/**
 * Kabook Editor Tools - Admin Styles
 *
 * Handles the visual styling for the plugin's settings page.
 * Scoped to .kabook-admin-wrapper to prevent conflicts with core WordPress styles.
 *
 * @package    Kabook_Editor_Tools
 * @subpackage Kabook_Editor_Tools/admin/css
 * @author     Kabook
 * @license    GPL-2.0+
 */

/* ==========================================================================
   0. Global Typography Settings (Smart RTL Support)
   ========================================================================== */
/* Ensures all Kabook elements inherit the correct WP Admin font in RTL mode (e.g., Vazir).
   EXCLUDING icons (.dashicons, .fa, etc.) so they don't break.
   This rule acts as the "Global Constitution" for all modules.
*/
body.rtl [class*="kabook-"],
body.rtl [class*="kabook-"] *:not(.dashicons):not(.dashicons-before):not(.fa):not([class*="icon"]),
body.rtl input, 
body.rtl select, 
body.rtl textarea, 
body.rtl button {
	font-family: inherit !important;
}

/* ==========================================================================
   1. Main Wrapper & Layout
   ========================================================================== */

.kabook-admin-wrapper {
	background: #fff;
	padding: 0;
	border-radius: 16px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
	max-width: 1100px;
	margin: 30px auto;
	border: 1px solid #e0e0e0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.kabook-admin-wrapper * {
	box-sizing: border-box; /* Global safety for our wrapper */
}

.kabook-inner-content {
	padding: 30px;
}

/* ==========================================================================
   2. Header & Sub-Header
   ========================================================================== */

.kabook-admin-wrapper h1 {
	background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%);
	color: #fff;
	padding: 25px 40px;
	margin: 0;
	font-size: 1.8em;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: space-between;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.kabook-admin-wrapper h1::before {
	content: '';
	background-image: url('../images/kabook.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 45px;
	height: 45px;
	display: block;
	margin-left: 20px;
	background-color: #fff;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* 2.1. Sub-Header (Redesigned for RTL/LTR Stability) */
.kabook-sub-header {
	background: #e4eef7; /* Clean white background */
	border-bottom: 1px solid #eef2f7;
	padding: 10px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 75px;
	position: relative;
	background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
	background-size: 20px 20px;
}

/* Container items (Columns) */
.k-sub-item {
	flex: 1; /* Ensures all three columns take equal space */
	display: flex;
	align-items: center;
}

/* Directional alignment (Smart RTL/LTR support) */
.k-area-start { justify-content: flex-start; }
.k-area-center { justify-content: center; }
.k-area-end { justify-content: flex-end; }

/* Slogan Styling */
.k-slogan {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: linear-gradient(90deg, #005bea, #5c0d4b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 0.8;
}

/* 2.2. Top Navigation Buttons (System & Docs) */
.kabook-top-btn {
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	color: #57606f;
	padding: 10px 20px;
	border-radius: 50px; /* Capsule-shaped buttons */
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.8);
	position: relative;
	overflow: hidden;
}

.kabook-top-btn .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	color: #a4b0be;
	transition: all 0.3s ease;
}

/* Hover State */
.kabook-top-btn:hover {
	background: #fff;
	color: #005bea;
	border-color: rgba(0, 91, 234, 0.2);
	box-shadow: 0 10px 20px rgba(0, 91, 234, 0.1);
	transform: translateY(-2px);
}

.kabook-top-btn:hover .dashicons {
	color: #005bea;
	transform: scale(1.1) rotate(10deg);
}

/* Active State */
.kabook-top-btn.nav-tab-active {
	background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 5px 15px rgba(0, 91, 234, 0.3);
}

.kabook-top-btn.nav-tab-active .dashicons {
	color: #fff;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
	.kabook-sub-header {
		flex-direction: column;
		height: auto;
		gap: 10px;
		padding: 15px;
	}
	.k-sub-item {
		width: 100%;
		justify-content: center !important;
	}
	.k-slogan {
		margin: 5px 0;
		font-size: 11px;
	}
}

/* ==========================================================================
   3. Main Connected Tabs
   ========================================================================== */

.kabook-admin-wrapper .kabook-connected-tabs {
	border-bottom: 2px solid #005bea !important;
	padding: 0 !important;
	margin: 10px 0 30px 0 !important;
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.kabook-admin-wrapper .nav-tab {
	background: #f1f5f9 !important;
	border: 1px solid #e2e8f0 !important;
	border-bottom: none !important;
	margin: 0 !important;
	padding: 12px 25px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #64748b !important;
	border-radius: 8px 8px 0 0 !important;
	transition: all 0.2s ease;
	position: relative;
	top: 2px;
}

.kabook-admin-wrapper .nav-tab:hover {
	background: #e2e8f0 !important;
	color: #334155 !important;
}

/* Active State for Main Tabs */
.kabook-admin-wrapper .nav-tab.nav-tab-active,
.kabook-admin-wrapper .nav-tab.nav-tab-active:hover {
	background: #005bea !important;
	color: #fff !important;
	border-color: #005bea !important;
	top: 2px;
	box-shadow: 0 -4px 10px rgba(0, 91, 234, 0.15);
}

/* ==========================================================================
   4. Field Rows (Grid Layout)
   ========================================================================== */

.kabook-field-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 20px;
	align-items: center;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 15px;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
	max-width: 900px;
	transition: border-color 0.3s ease;
}

.kabook-field-row:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.k-label strong {
	font-size: 14px;
	color: #37474f;
	display: block;
	margin-bottom: 4px;
}

.k-label .description {
	font-size: 12px;
	color: #90a4ae;
	margin: 0;
	line-height: 1.4;
}

/* ==========================================================================
   5. Inputs & Buttons
   ========================================================================== */

.kabook-admin-wrapper input[type="text"],
.kabook-admin-wrapper input[type="number"],
.kabook-admin-wrapper select {
	border: 1px solid #cfd8dc;
	border-radius: 8px;
	padding: 0 12px;
	height: 40px;
	background: #fff;
	color: #455a64;
	width: 100%;
	max-width: 350px;
}

.kabook-admin-wrapper input:focus,
.kabook-admin-wrapper select:focus {
	border-color: #005bea;
	box-shadow: 0 0 0 2px rgba(0, 91, 234, 0.1);
	outline: none;
}

/* Primary Button Styling */
.kabook-admin-wrapper .button-primary {
	background: #005bea !important;
	border: none !important;
	color: #fff !important;
	border-radius: 8px !important;
	padding: 8px 30px !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 12px rgba(0, 91, 234, 0.2) !important;
}

.kabook-admin-wrapper .button-primary:hover {
	background: #0044b0 !important;
	transform: translateY(-2px);
}

.kabook-footer-actions {
	margin-top: 40px;
	padding-top: 25px;
	border-top: 1px solid #eee;
	text-align: left;
}

/* ==========================================================================
   6. Components & Widgets
   ========================================================================== */

.kabook-tab-content h3 {
	font-size: 1.3em;
	color: #01579b;
	margin: 0 0 25px 0;
	padding-bottom: 15px;
	border-bottom: 1px dashed #b3e5fc;
}

/* Custom Switch Toggle */
.kabook-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	vertical-align: middle;
}

.kabook-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.kabook-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #cfd8dc;
	transition: .3s;
	border-radius: 34px;
}

.kabook-slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .3s;
	border-radius: 50%;
}

input:checked + .kabook-slider {
	background-color: #00c6fb;
}

input:checked + .kabook-slider:before {
	transform: translateX(20px);
}

/* Shortcodes Wrapper */
#kabook-shortcodes-wrapper {
	background: #fcfdfe;
	border: 2px dashed #b0bec5;
	border-radius: 10px;
	padding: 20px;
}

.shortcode-row {
	background: #fff;
	border: 1px solid #eceff1;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.k-row-inputs {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 15px;
}

.k-row-inputs label {
	font-size: 12px;
	font-weight: bold;
	color: #90a4ae;
}

/* Cards Grid (Admin Settings) */
.kabook-cards-grid {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.kabook-card-preview-box {
	flex: 1;
	background: #fff;
	border: 1px solid #eceff1;
	border-radius: 10px;
	padding: 20px;
	min-width: 250px;
}

.k-input-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

/* Flex Row for Card inputs */
.kabook-flex-row {
	display: flex;
	gap: 15px;
	align-items: center;
	justify-content: space-between;
}

.k-input-col {
	flex: 1;
}

.k-input-col label {
	display: block;
	font-size: 11px;
	margin-bottom: 3px;
	color: #888;
}

.k-input-col input {
	width: 100% !important;
}

/* Danger Zone & Help Box */
.kabook-danger-zone {
	background: #ffebee;
	border: 1px solid #ffcdd2;
	padding: 20px;
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.k-danger-text strong {
	color: #c62828;
}

.kabook-help-box {
	background: #e1f5fe;
	border: 1px solid #b3e5fc;
	padding: 20px;
	border-radius: 8px;
	margin-top: 25px;
}

.kabook-help-box h3 {
	color: #0277bd;
	margin-bottom: 10px;
	border: none;
}

/* ==========================================================================
   7. TinyMCE Modal Customization
   ========================================================================== */

div.mce-window {
	border-radius: 12px !important;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
	background: #fff !important;
}

div.mce-window-head {
	background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%) !important;
	padding: 18px 25px !important;
	border: none !important;
}

div.mce-title {
	color: #fff !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	font-size: 16px !important;
}

button.mce-close {
	top: 50% !important;
	transform: translateY(-50%);
	right: 20px !important;
	color: #fff !important;
	opacity: 0.9;
}

div.mce-window input.mce-textbox:focus {
	border-color: #005bea !important;
}

/* Modal Footer Buttons */
div.mce-foot {
	background: #fcfcfc !important;
	border-top: 1px solid #eee !important;
}

div.mce-foot .mce-btn.mce-primary {
	background: #005bea !important;
	border-color: #005bea !important;
	border-radius: 6px !important;
}

div.mce-foot .mce-btn.mce-primary button {
	color: #fff !important;
	font-weight: 600 !important;
}

div.mce-foot .mce-btn.mce-primary:hover {
	background: #0044b0 !important;
}

/* ==========================================================================
   8. Responsive Design Adjustments
   ========================================================================== */

@media (max-width: 768px) {
	.kabook-admin-wrapper {
		width: 95%;
		margin: 10px auto;
		padding: 0;
	}

	.kabook-inner-content {
		padding: 15px;
	}

	.kabook-field-row {
		grid-template-columns: 1fr;
		gap: 5px;
	}

	.k-label {
		margin-bottom: 5px;
		text-align: right;
	}

	.k-input {
		width: 100%;
		max-width: none;
	}

	.shortcode-row {
		flex-direction: column;
		gap: 10px;
	}

	.k-row-inputs {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* Tabs Menu for Mobile */
	.kabook-admin-wrapper .nav-tab-wrapper {
		flex-direction: column;
		padding: 10px !important;
		background: #f8f9fa;
		border-radius: 12px;
	}

	.kabook-admin-wrapper .nav-tab {
		width: 100%;
		text-align: center;
		margin: 0 !important;
		box-sizing: border-box;
	}

	/* Stack Settings Boxes */
	.kabook-cards-grid {
		flex-direction: column;
	}

	.kabook-card-preview-box {
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}

	/* Mobile Layout for UI Boxes */
	.kabook-flex-row {
		flex-direction: column !important;
		gap: 15px !important;
		align-items: stretch !important;
	}

	.k-input-col {
		width: 100% !important;
		flex: auto !important;
	}

	/* Reset width and margins for boxes to prevent overflow */
	.kabook-admin-wrapper .kabook-card-luxury,
	.kabook-admin-wrapper .kabook-card-creative,
	.kabook-admin-wrapper .kabook-card-b,
	.kabook-admin-wrapper .kabook-card-pattern,
	.kabook-admin-wrapper .kabook-box,
	.kabook-admin-wrapper .kabook-brand-1,
	.kabook-admin-wrapper .kabook-brand-2 {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		height: auto !important;
		padding-bottom: 20px !important;
		white-space: normal !important;
	}

	/* WP Color Picker Responsive Width */
	.wp-picker-container,
	.wp-picker-container .wp-color-result {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* ==========================================================================
   9. Module Management Grid
   ========================================================================== */

.kabook-modules-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}

.kabook-module-card {
	background: #fff;
	padding: 15px 20px;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.kabook-module-card:hover {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	border-color: #cbd5e1;
	transform: translateY(-2px);
}

.kabook-card-inner {
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 1; /* Consumes available space */
	min-width: 0; /* Text overflow safety */
}

.kabook-module-icon-box {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f7ff;
	border-radius: 10px;
	color: #005bea;
	flex-shrink: 0;
}

.kabook-module-icon-box svg {
	width: 24px !important;
	height: 24px !important;
	stroke: currentColor;
	fill: none;
}

.kabook-module-title {
	font-weight: 600;
	font-size: 14px;
	color: #333;
}

.kabook-module-card.inactive {
	opacity: 0.8;
	background: #fafafa;
}

.kabook-module-card.inactive .kabook-module-icon-box {
	background: #f1f5f9;
	color: #94a3b8;
}

.kabook-module-card.inactive .kabook-module-title {
	color: #64748b;
}

/* ==========================================================================
   10. TinyMCE Editor Button
   ========================================================================== */

.mce-kabook-blue-trigger .mce-ico {
	color: #005bea !important;
}

.mce-kabook-blue-trigger .mce-txt {
	color: #333 !important;
	font-weight: normal !important;
}

.mce-kabook-blue-trigger:hover {
	background-color: #e3f2fd !important;
	border-color: #b3e5fc !important;
}

/* ==========================================================================
   11. Form Elements Layout (Responsive Radio & Checkbox)
   ========================================================================== */

/* Label Styling: Flexbox layout for accurate alignment */
.kabook-admin-wrapper label {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	width: 100%;
	max-width: 100%;
}

/* Radio & Checkbox Input Styling */
.kabook-admin-wrapper input[type="radio"],
.kabook-admin-wrapper input[type="checkbox"] {
	margin: 0 !important;
	margin-top: 4px !important; /* Visual alignment with the first line of text */
	flex-shrink: 0; /* Prevent input from shrinking on long labels */
}

/* Label Text Typography */
.kabook-admin-wrapper label span,
.kabook-admin-wrapper label {
	line-height: 1.5;
	white-space: normal !important;
	word-break: break-word;
	color: #455a64;
}

/* ==========================================================================
   12. Intelligent Grid Layout for Inputs
   ========================================================================== */

.k-input-row {
	display: grid;
	/* Responsive Grid: Creates columns min 220px wide, filling available space */
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 15px;
	width: 100%;
	align-items: stretch;
}

/* Column/Card Styling */
.k-input-col {
	position: relative;
	display: flex;
	align-items: center;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 15px;
	transition: all 0.2s ease;
	min-width: 0; /* Ensures flexibility */
}

.k-input-col:hover {
	background: #fff;
	border-color: #94a3b8;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.k-input-col:focus-within {
	border-color: #005bea;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(0, 91, 234, 0.1);
}

.k-input-col label {
	margin: 0 !important;
	width: 100%;
	padding-inline-start: 5px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 600px) {
	.k-input-row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   13. Luxury Cards Module Styling
   ========================================================================== */

/* Flex Container Styling for Preview Rows */
.kabook-card-preview-box .kabook-flex-row {
	display: flex !important;
	gap: 15px;
	align-items: center;
	flex-wrap: wrap;
}

/* Reset Column Styles (Overrides global grid settings) */
.kabook-card-preview-box .k-input-col {
	display: block !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	min-width: auto !important;
	flex: 1;
}

/* Input Field Styling within Preview Boxes */
.kabook-card-preview-box input[type="number"],
.kabook-card-preview-box input[type="text"] {
	width: 100% !important;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	height: 36px;
	font-size: 13px;
}

/* General Card Preview Container */
.kabook-card-preview-box {
	padding: 25px;
	border-radius: var(--kabook-card-a-radius, 15px);
	margin-bottom: 20px;
	border: 1px solid #e2e8f0;
	transition: all 0.3s ease;
	position: relative;
}

/* Luxury Card A (Light Mode) Styling */
.kabook-card-preview-box.light-mode {
	background: var(--kabook-card-a-bg, #ffffff) !important;
	border: 2px solid var(--kabook-card-a-border, #d4af37) !important;
	border-radius: var(--kabook-card-a-radius, 15px) !important;
}

/* Luxury Card B (Dark Mode) Styling */
.kabook-card-preview-box.kabook-card-dark-mode {
	background: linear-gradient(135deg, var(--kabook-card-b-bg1, #2b2b2b) 0%, var(--kabook-card-b-bg2, #1a1a1a) 100%) !important;
	border-radius: var(--kabook-card-b-radius, 25px) !important;
	color: var(--kabook-card-b-text, #ffffff) !important;
	border: none !important;
}

/* ==========================================================================
   14. Label Typography & Colors
   ========================================================================== */

.kabook-card-preview-box label {
	display: block !important;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 4px;
	color: #64748b;
}

.kabook-card-preview-box.kabook-card-dark-mode label {
	color: rgba(255, 255, 255, 0.7) !important;
}

.kabook-card-preview-box.light-mode label {
	color: #64748b !important;
}

/* ==========================================================================
   15. System Module & Switch Overrides
   ========================================================================== */

/* Switch Toggle Component Dimensions */
.kabook-admin-wrapper .kabook-switch {
	display: inline-block !important;
	width: 44px !important;
	min-width: 44px !important;
	height: 24px !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

.kabook-module-card {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
}

.kabook-field-row .kabook-switch {
	margin-inline-start: auto !important;
}