/**
 * Gutenberg Toolkit - Admin Styles
 *
 * Defines the styles for the Gutenberg Toolkit module, including the custom
 * modal interface, grid layout system, glassmorphism effects, and
 * toolbar integration overrides.
 *
 * @package    Kabook_Editor_Tools
 * @subpackage Kabook_Editor_Tools/modules/gutenberg-toolkit/assets
 * @author     Kabook
 * @license    GPL-2.0+
 */

/* ==========================================================================
   1. Main Modal Container
   ========================================================================== */

.kabook-toolkit-modal {
	border-radius: 12px !important;
	overflow: hidden !important;
	box-shadow: 0 20px 50px rgba(0, 51, 102, 0.25) !important;
}

/* Header Styling */
.kabook-toolkit-modal .components-modal__header {
	background: linear-gradient(135deg, #003366 0%, #005bea 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px 24px;
}

.kabook-toolkit-modal .components-modal__header-heading {
	color: #ffffff;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}

/* Close Button Override */
.kabook-toolkit-modal .components-button[aria-label="Close"] {
	color: rgba(255, 255, 255, 0.8);
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.kabook-toolkit-modal .components-button[aria-label="Close"]:hover {
	background: #ff4757;
	color: white;
	transform: rotate(90deg);
}

/* Content Area */
.kabook-toolkit-modal .components-modal__content {
	background: #f8f9fa;
	padding: 25px;
}

/* ==========================================================================
   2. Custom Scrollbar (WebKit)
   ========================================================================== */

.kabook-toolkit-modal .components-modal__content::-webkit-scrollbar {
	width: 6px;
}

.kabook-toolkit-modal .components-modal__content::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.kabook-toolkit-modal .components-modal__content::-webkit-scrollbar-thumb {
	background: #cbd5e0;
	border-radius: 10px;
}

.kabook-toolkit-modal .components-modal__content::-webkit-scrollbar-thumb:hover {
	background: #005bea;
}

/* ==========================================================================
   3. Grid Layout System
   ========================================================================== */

.kabook-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px;
	margin-bottom: 25px;
}

/* ==========================================================================
   4. Card Buttons (UI Items)
   ========================================================================== */

.kabook-tools-grid button.components-button {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 15px 10px;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #4a5568;
	font-weight: 600;
	font-size: 13px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
	transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
	white-space: normal;
	line-height: 1.4;
}

/* Hover Effects */
.kabook-tools-grid button.components-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 15px rgba(0, 91, 234, 0.1);
	border-color: #005bea;
	color: #005bea;
	background: #ffffff;
	z-index: 2;
}

/* Icons inside buttons */
.kabook-tools-grid button.components-button span {
	font-size: 1.2em;
	margin-bottom: 5px;
	display: block;
}

/* ==========================================================================
   5. Section Headers
   ========================================================================== */

h3.kabook-section-title {
	font-size: 12px;
	font-weight: 800;
	color: #a0aec0;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin: 10px 0 15px 0;
	padding-bottom: 8px;
	border-bottom: 2px solid #edf2f7;
	display: flex;
	align-items: center;
}

h3.kabook-section-title::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: #005bea;
	border-radius: 50%;
	margin-right: 8px; /* LTR */
	margin-left: 0;
}

body.rtl h3.kabook-section-title::before {
	margin-right: 0;
	margin-left: 8px; /* RTL */
}

/* ==========================================================================
   6. Media & Search Forms
   ========================================================================== */

.kabook-media-form,
.kabook-search-form {
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   7. Gutenberg Toolbar Button Override
   ========================================================================== */

/* High specificity selector using 'body' to override Gutenberg defaults */
body .edit-post-header__toolbar .components-button.is-pressed[aria-label="Kabook Tools"],
body .edit-post-header__toolbar .components-button.is-pressed[aria-label="Kabook Tools"]:hover,
body .edit-post-header__toolbar .components-button.is-pressed[aria-label="Kabook Tools"]:focus {
	background-color: #e3f2fd !important;
	box-shadow: inset 0 0 0 1px #005bea !important;
	color: #005bea !important;
}

/* Ensure icon color persistence */
body .edit-post-header__toolbar .components-button.is-pressed[aria-label="Kabook Tools"] svg {
	fill: #005bea !important;
}