/**
 * Media Player Module - Admin UI Styles
 *
 * Defines the styles for the TinyMCE modal used by the Media Player module.
 *
 * STRATEGY: SCOPED "SAFE MODE" CSS
 * This stylesheet targets only the specific modal via aria-label to prevent
 * conflicts with other TinyMCE plugins or core WordPress styles.
 * It strictly avoids global flexbox on the window container to prevent layout
 * collapse issues common in TinyMCE 4.x (especially in RTL environments).
 *
 * @package    Kabook_Editor_Tools
 * @subpackage Kabook_Editor_Tools/modules/media-player/assets
 * @author     Kabook
 * @license    GPL-2.0+
 */

/* ==========================================================================
   1. Global Scoped Reset
   ========================================================================== */

/* Apply border-box sizing only to elements inside our specific modal. */
div.mce-window[aria-label="Kabook Media Player Settings"] .mce-window-body * {
	box-sizing: border-box;
}

/* ==========================================================================
   2. Toolbar Icon Integration
   ========================================================================== */

/* Overwrite default TinyMCE icon styles to use WordPress Dashicons. */
i.mce-i-kabook_media {
	font-family: 'dashicons' !important;
	display: inline-block;
	background: transparent !important;
	color: #005bea !important;
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 1;
	text-align: center;
}

/* Dashicon ID: dashicons-playlist-audio (\f127) */
i.mce-i-kabook_media:before {
	content: "\f127" !important;
}

/* ==========================================================================
   3. Window Header (Branding)
   ========================================================================== */

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-window-head {
	background: linear-gradient(90deg, #005bea 0%, #00c6fb 100%) !important;
	border-bottom: 0 !important;
}

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-title {
	color: #fff !important;
	font-weight: 800 !important;
	text-transform: uppercase;
}

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-close {
	color: #fff !important;
	opacity: 0.8;
}

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-close:hover {
	opacity: 1;
}

/* ==========================================================================
   4. Body & Background
   ========================================================================== */

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-window-body {
	background: #f5f5f5 !important;
}

/* ==========================================================================
   5. Form Inputs (Textbox & Listbox)
   ========================================================================== */

div.mce-window[aria-label="Kabook Media Player Settings"] input.mce-textbox,
div.mce-window[aria-label="Kabook Media Player Settings"] .mce-listbox {
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	padding: 5px 10px !important;
	height: 36px !important;
	line-height: 24px !important;
	background: #fff !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
	color: #333 !important;
	font-size: 13px !important;
}

div.mce-window[aria-label="Kabook Media Player Settings"] input.mce-textbox:focus {
	border-color: #005bea !important;
	box-shadow: 0 0 0 1px #005bea !important;
}

/* ==========================================================================
   6. Secondary Buttons (File Selection)
   ========================================================================== */

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-btn {
	border: 1px solid #005bea !important;
	background: #fff !important;
	border-radius: 4px !important;
}

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-btn button {
	color: #005bea !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	padding: 4px 10px !important;
}

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-btn:hover {
	background: #eef4ff !important;
}

/* ==========================================================================
   7. Footer & Primary Actions
   ========================================================================== */

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-foot {
	background: #fff !important;
	border-top: 1px solid #ddd !important;
}

/* Primary "Insert" or "Update" Button */
div.mce-window[aria-label="Kabook Media Player Settings"] .mce-primary {
	background: #005bea !important;
	border-color: #005bea !important;
}

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-primary button {
	color: #fff !important;
	font-weight: bold !important;
	text-shadow: none !important;
}

/* ==========================================================================
   8. CRITICAL LAYOUT (Safe Mode)
   ========================================================================== */
/*
 * We apply Flexbox ONLY to the specific rows containing [Input + Button].
 * We DO NOT apply flexbox to the entire window or parent containers.
 * This guarantees stability in TinyMCE's calculation engine.
 */

/* Target the container holding Input + Button */
div.mce-window[aria-label="Kabook Media Player Settings"] .mce-container-body.mce-flow-layout {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important; /* Spacing between input and button */
}

/* Force Input to take available space */
div.mce-window[aria-label="Kabook Media Player Settings"] .mce-container-body.mce-flow-layout > div:first-child {
	flex-grow: 1 !important;
	width: auto !important;
}

/* Prevent Button from shrinking */
div.mce-window[aria-label="Kabook Media Player Settings"] .mce-container-body.mce-flow-layout > div:last-child {
	flex-shrink: 0 !important;
}

/* ==========================================================================
   9. Dropdown UI Adjustments
   ========================================================================== */

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-listbox {
	display: flex !important;
	align-items: center !important;
}

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-listbox .mce-btn {
	width: 100% !important;
	border: none !important;
	background: transparent !important;
}

div.mce-window[aria-label="Kabook Media Player Settings"] .mce-listbox button {
	text-align: left !important;
	width: 100% !important;
	padding-left: 10px !important;
}

/* ==========================================================================
   10. RTL Support (Persian/Arabic)
   ========================================================================== */

.mce-rtl.mce-window[aria-label="Kabook Media Player Settings"] {
	direction: rtl !important;
	text-align: right !important;
}

/* RTL Dropdown Text Alignment */
.mce-rtl.mce-window[aria-label="Kabook Media Player Settings"] .mce-listbox button {
	text-align: right !important;
	padding-right: 10px !important;
}

/* RTL Caret (Arrow) Positioning */
.mce-rtl.mce-window[aria-label="Kabook Media Player Settings"] .mce-listbox i.mce-caret {
	left: 5px !important;
	right: auto !important;
}

/* RTL Flex Direction Correction */
.mce-rtl.mce-window[aria-label="Kabook Media Player Settings"] .mce-container-body.mce-flow-layout {
	flex-direction: row !important;
}

/* ==========================================================================
   11. Kabook Modal Styling (Final Polish)
   Blue Header, RTL Text Alignment, Pure White Close Button
   ========================================================================== */

/* 1. Header Strip (Blue Harmony) */
div.mce-window-head,
body.rtl div.mce-window-head {
	background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%) !important;
	padding: 0 15px !important;
	height: 45px !important;
	min-height: 45px !important;
	border: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

/* 2. Title Text (RTL & Alignment) */
div.mce-title,
body.rtl div.mce-title {
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-shadow: none !important;
	line-height: 45px !important;
	margin: 0 !important;
	padding: 0 !important;

	/* RTL Specifics */
	width: 100% !important;
	text-align: left !important;
}

/* RTL Override for Title */
body.rtl div.mce-title {
	text-align: right !important;
	padding-left: 30px !important;
	direction: rtl !important;
}

/* 3. Close Button Container */
button.mce-close,
body.rtl button.mce-close {
	background: transparent !important;
	top: 50% !important;
	margin-top: -11px !important;
	border: none !important;
	box-shadow: none !important;
}

/* Target the Icon DIRECTLY */
button.mce-close i,
button.mce-close .mce-ico,
body.rtl button.mce-close .mce-ico {
	color: #fff !important;
	text-shadow: none !important;
	font-size: 16px !important;
	line-height: 22px !important;
}

/* Hover Effect */
button.mce-close:hover {
	opacity: 1;
	transform: scale(1.1);
}

/* 4. Position Logic (RTL vs LTR) */

/* LTR: Button on Right */
body:not(.rtl) button.mce-close {
	right: 15px !important;
	left: auto !important;
}

/* RTL: Button on Left */
body.rtl button.mce-close {
	left: 15px !important;
	right: auto !important;
}

/* 5. Window Body Rounded Corners */
div.mce-window {
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25) !important;
}