/**
 * Menu Icon
 */
li.toplevel_page_social-post-flow {

	a {

		div.wp-menu-image {

			img {
				padding: 6px 0 0 0 !important;
				width: 22px;
				height: 22px;
				opacity: 1 !important;
			}
		}
	}
}

/**
* Header Icon
*/
body.wpzinc.social-post-flow {

	div.wrap {

		h1.wp-heading-inline {
			background-image: url(../images/icons/logo-dark.svg);
			background-position: 25px 50%;
			background-repeat: no-repeat;
			background-size: 32px 32px;
		}
	}
}

/**
* Log
*/
table.social-post-flow-log {

	tbody {

		tr {

			&.error {

				td,
				th {
					background: #ffcdcd;
				}

				&.alternate {

					td,
					th {
						background: #fcbbbb;
					}
				}

				a {
					text-decoration: none;
				}
			}

			&.success {

				td,
				th {
					background: #ddfede;
				}

				&.alternate {

					td,
					th {
						background: #cafcbb;
					}
				}
			}

			&.warning {

				td,
				th {
					background: #ffa500;
				}

				&.alternate {

					td,
					th {
						background: #e6a62e;
					}
				}
			}
		}
	}
}

/**
* Log Meta Box
*/
#social-post-flow-log {

	div.inside {
		margin: 0;
		padding: 0;

		div.wpzinc-option {

			table.social-post-flow-log {

				thead {

					tr {

						th {
							font-weight: 700;
						}
					}
				}
			}
		}
	}
}

/**
* Post Meta
*/
body.post-php,
body.post-new-php {

	#social-post-flow {

		/**
		 * Force Gutenberg Show / Hide Arrow Button to display over h2.hndle,
		 * otherwise .hndle background will hide this button
		 */
		> .handlediv {
			position: relative;
			z-index: 2;
		}

		> .hndle {
			background: #fff;
			border-top: 1px solid #e5e5e5;
			border-right: 1px solid #e5e5e5;
			border-left: 1px solid #e5e5e5;
		}

		div.inside {
			margin: 0;
			padding: 0;

			#social-post-flow-override {
				display: none;
				margin-top: -1px;
				border-bottom: 1px solid #dfdfdf;
			}
		}
	}

	/**
	 * Image
	 */
	#social-post-flow-image {

		div.inside {
			margin: 0;
			padding: 0;
		}
	}
}

/**
* Gutenberg Meta Boxes
*/
body.block-editor-page {

	#social-post-flow,
	#social-post-flow-log {
		margin-bottom: 20px;
	}
}

/**
* Settings (Post Meta and Settings Screen)
*/
#social-post-flow {

	ul.wpzinc-nav-tabs {

		li {

			/**
			* Settings
			*/
			&.image {

				a {
					background-image: url(../../_modules/dashboard/feather/image.svg);
					background-size: 16px 16px;
				}
			}

			&.lock {

				a {
					background-image: url(../../_modules/dashboard/feather/lock.svg);
					background-size: 16px 16px;
				}
			}

			&.arrow-right-circle {

				a {
					background-image: url(../../_modules/dashboard/feather/arrow-right-circle.svg);
					background-size: 16px 16px;
				}
			}

			&.file-text {

				a {
					background-image: url(../../_modules/dashboard/feather/file-text.svg);
					background-size: 16px 16px;
				}
			}

			&.users {

				a {
					background-image: url(../../_modules/dashboard/feather/users.svg);
					background-size: 16px 16px;
				}
			}

			&.tag {

				a {
					background-image: url(../../_modules/dashboard/feather/tag.svg);
					background-size: 16px 16px;
				}
			}

			/**
			* Profile Types
			*/
			&.default {

				a {
					background-image: url(../../_modules/dashboard/feather/settings.svg);
					background-size: 16px 16px;
				}
			}

			&.facebook {

				a {
					background-image: url(../../_modules/dashboard/feather/facebook.svg);
					background-size: 16px 16px;
				}
			}

			&.threads {

				a {
					background-image: url(../../_modules/dashboard/feather/at-sign.svg);
					background-size: 16px 16px;
				}
			}

			&.instagram {

				a {
					background-image: url(../../_modules/dashboard/feather/instagram.svg);
					background-size: 16px 16px;
				}
			}

			&.linkedin {

				a {
					background-image: url(../../_modules/dashboard/feather/linkedin.svg);
					background-size: 16px 16px;
				}
			}

			&.x {

				a {
					background-image: url(../../_modules/dashboard/feather/x.svg);
					background-size: 16px 16px;
				}
			}

			&.mastodon {

				a {
					background-image: url(../../_modules/dashboard/feather/mastodon.svg);
					background-size: 16px 16px;
				}
			}

			&.bluesky {

				a {
					background-image: url(../../_modules/dashboard/feather/bluesky.svg);
					background-size: 16px 16px;
				}
			}

			&.telegram {

				a {
					background-image: url(../../_modules/dashboard/feather/telegram.svg);
					background-size: 16px 16px;
				}
			}

			&.pinterest {

				a {
					background-image: url(../../_modules/dashboard/feather/pinterest.svg);
					background-size: 16px 16px;
				}
			}

			&.google {

				a {
					background-image: url(../../_modules/dashboard/feather/google.svg);
					background-size: 16px 16px;
				}
			}

			&.tiktok {

				a {
					background-image: url(../../_modules/dashboard/feather/tiktok.svg);
					background-size: 16px 16px;
				}
			}

			&.external-link {

				a {
					background-image: url(../../_modules/dashboard/feather/external-link.svg);
					background-size: 16px 16px;
				}
			}
		}
	}

	ul.wpzinc-nav-tabs,
	ul.wpzinc-nav-tabs-horizontal {

		li {

			a {

				span.dashicons.dashicons-yes,
				span.dashicons.dashicons-warning {
					display: none;
				}

				&.enabled {

					span.dashicons.dashicons-yes {
						display: inline-block;
					}
				}

				/**
				 * Disconnected profile: always show the warning icon,
				 * regardless of whether the profile is enabled in the plugin.
				 */
				&.error {

					span.dashicons.dashicons-warning {
						display: inline-block;
					}

					span.dashicons.dashicons-yes {
						display: none;
					}
				}
			}
		}

		li.wpzinc-nav-tab {

			/**
			 * Profile tabs only: scoped via :has(span.formatted-username) so
			 * these padding overrides only apply to tabs that display a
			 * connected social profile. Other wpzinc-nav-tabs (e.g. the
			 * Settings screen's left-hand menu) are left untouched.
			 */
			a:has(span.formatted-username) {
				padding-left: 32px;
				padding-right: 28px;

				span.formatted-username {
					display: inline-block;
					max-width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					vertical-align: middle;

					/**
					 * Prevent text reflow / overflow when the active tab becomes bold.
					 * The ::after pseudo-element reserves the bold width up front,
					 * so the layout doesn't shift when font-weight changes.
					 */
					&::after {
						content: attr(data-text);
						display: block;
						height: 0;
						font-weight: 700;
						visibility: hidden;
						overflow: hidden;
					}
				}
			}

			a.wpzinc-nav-tab-vertical-active:has(span.formatted-username),
			a:hover:has(span.formatted-username) {
				padding-left: 45px;
			}
		}
	}

	/**
	 * Media Library
	 */
	.wpzinc-media-library {
		width: 150px;
	}

	/**
	* Postbox
	*/
	div.postbox {
		width: 100%;

		/**
		* Statuses
		*/
		div.statuses {

			/**
			* Status
			*/
			tr.status {

				/**
				* Don't display first status' delete button
				*/
				&.first {

					td.actions {

						a.delete-status {
							display: none;
						}
					}
				}

				/**
				* Columns
				*/
				td {

					&.count {
						width: 20px;
					}

					&.actions {
						width: 80px;
					}
				}
			}

			/**
			 * Status Form Container Row
			 */
			tr.status-form-container {

				> td {
					padding: 0;
				}
			}
		}
	}

	/**
* Status Form
*/
	body.wpzinc {

		.wrap {

			#social-post-flow-status-form {

				> .wpzinc-option {
					padding: 20px 30px;
				}

				div.notice-inline {
					margin: 5px 0 15px 0;
					border-top: 1px solid #ccd0d4;
					border-right: 1px solid #ccd0d4;
					border-bottom: 1px solid #ccd0d4;

					p {
						margin: 0.5em 0;
					}
				}

				div.images {
					margin: 0 0 10px 0;

					select.right {
						margin: 0 0 0 5px;
					}
				}

				div.tags {
					margin: 0 0 10px 0;
				}

				/**
			 * Character Count
			 */
				small.characters {
					display: inline-block;
					line-height: 1;
				}

				h3 {
					margin: 0;
				}

				/**
			 * Status
			 */
				div.status,
				div.scheduling,
				div.pinterest,
				div.googlebusiness,
				div.images,
				div.text-to-image {

					select,
					input[type="text"],
					textarea {
						margin: 0 0 7px 0;
					}
				}

				/**
			 * Scheduling
			 */
				div.schedule {

					label,
					.custom {
						display: inline-block;
						vertical-align: middle;
					}

					input[type="number"] {
						width: 50px;
					}
				}

				/**
			* Section divider
			*/
				div.section {
					margin: 15px 0 0 0;
					padding: 15px 0 0 0;
					border-top: 1px solid #dfdfdf;

					table {

						th.actions,
						td.actions {
							width: 71px;
						}
					}
				}
			}
		}

		/**
	* Progress Bar
	*/
		.wpzinc-option.progressbar {

			/**
		* jQuery UI ProgressBar
		*/
			.ui-progressbar {
				height: 2em;
				text-align: left;
				overflow: hidden;
			}

			.ui-progressbar .ui-progressbar-value {
				margin: -1px;
				height: 100%;
			}

			.ui-progressbar .ui-progressbar-overlay {
				background: #008000;
				height: 100%;
				filter: alpha(opacity=25); /* support: IE8 */
				opacity: 0.25;
			}

			.ui-progressbar-indeterminate .ui-progressbar-value {
				background-image: none;
			}

			.ui-widget {
				font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
				font-size: 1.1em;
			}

			.ui-widget .ui-widget {
				font-size: 1em;
			}

			.ui-widget input,
			.ui-widget select,
			.ui-widget textarea,
			.ui-widget button {
				font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
				font-size: 1em;
			}

			.ui-widget-content {
				border: 1px solid #ddd;
				background: #eee;
				color: #333;
			}

			.ui-widget-content a {
				color: #333;
			}

			.ui-widget-header {
				border: 1px solid #e78f08;
				background: #008000;
				color: #fff;
				font-weight: 700;
			}

			.ui-widget-header a {
				color: #fff;
			}
		}
	}

	/**
* Table Row Repeaters (Custom Fields, Custom Tags)
*/
	table {

		tr.hide-delete-button {

			td {

				.wpzinc-delete-table-row {
					display: none;
				}
			}
		}
	}
}