/* ============================================================
   Loading Overlay
   ============================================================ */
.form-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.form-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: form-spin 0.8s linear infinite;
}

@keyframes form-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Form Validation Styles
   ============================================================ */
.glass-input.is-invalid,
.glass-input[data-val-error],
.glass-input.input-validation-error {
    border-color: var(--input-error-border, var(--danger)) !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}

.glass-input.is-valid {
    border-color: var(--input-success-border, var(--success)) !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15) !important;
}

.field-validation-error {
    color: var(--danger, #fca5a5);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

.validation-summary-errors {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.75rem;
    padding: 1rem;
    color: var(--danger, #fca5a5);
    margin-bottom: 1rem;
}

/* ============================================================
   Glassmorphism Button Variations
   ============================================================ */
.glass-button-secondary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.glass-button-secondary:hover,
.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   TomSelect Glassmorphism Theme Overrides
   ============================================================ */
.glass-panel .ts-wrapper .ts-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.75rem !important;
    color: #ffffff !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
}
.glass-panel .ts-wrapper.focus .ts-control {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
}
.glass-panel .ts-wrapper .ts-dropdown {
    background-color: #1e1b4b !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.75rem !important;
    color: #ffffff !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
    z-index: 50 !important;
    margin-top: 4px !important;
    overflow: hidden !important;
}
.glass-panel .ts-wrapper .ts-dropdown .option {
    color: #cbd5e1 !important;
    padding: 0.625rem 1rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}
.glass-panel .ts-wrapper .ts-dropdown .option.active,
.glass-panel .ts-wrapper .ts-dropdown .option:hover {
    background-color: rgba(99, 102, 241, 0.3) !important;
    color: #ffffff !important;
}
.glass-panel .ts-wrapper .ts-dropdown .option.selected {
    background-color: rgba(79, 70, 229, 0.5) !important;
    color: #ffffff !important;
}
.glass-panel .ts-wrapper .ts-control input {
    color: #ffffff !important;
}
.glass-panel .ts-wrapper .ts-control .item {
    color: #ffffff !important;
}
.glass-panel .ts-wrapper .ts-dropdown .no-results {
    color: #94a3b8 !important;
    padding: 0.625rem 1rem !important;
}

/* ============================================================
   Keyboard Shortcut Hints
   ============================================================ */
kbd.kbd-hint {
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: inherit;
    line-height: 1;
}

/* ============================================================
   Theme-Aware Tailwind Color Overrides
   Scoped to #mainContent ONLY so sidebar is never affected.
   ============================================================ */

/* --- Tables (non-ag-grid) --- */
#mainContent table td,
#mainContent table th {
  color: var(--text-primary) !important;
}

/* --- Buttons/links keep white text on gradients --- */
#mainContent button.text-white,
#mainContent a.text-white,
#mainContent .btn-primary.text-white {
  color: white !important;
}

/* ---------- Light & Sajjad ---------- */
[data-theme="light"] #mainContent .text-gray-300,
[data-theme="sajjad"] #mainContent .text-gray-300,
[data-theme="light"] .text-gray-300,
[data-theme="sajjad"] .text-gray-300 { color: var(--text-secondary) !important; }

[data-theme="light"] #mainContent .text-gray-400,
[data-theme="sajjad"] #mainContent .text-gray-400,
[data-theme="light"] .text-gray-400,
[data-theme="sajjad"] .text-gray-400 { color: var(--text-muted) !important; }

[data-theme="light"] #mainContent .text-gray-500,
[data-theme="sajjad"] #mainContent .text-gray-500,
[data-theme="light"] .text-gray-500,
[data-theme="sajjad"] .text-gray-500 { color: var(--text-muted) !important; }

[data-theme="light"] #mainContent .text-gray-600,
[data-theme="sajjad"] #mainContent .text-gray-600,
[data-theme="light"] .text-gray-600,
[data-theme="sajjad"] .text-gray-600 { color: var(--text-secondary) !important; }

[data-theme="light"] #mainContent .text-gray-700,
[data-theme="sajjad"] #mainContent .text-gray-700,
[data-theme="light"] .text-gray-700,
[data-theme="sajjad"] .text-gray-700 { color: var(--text-primary) !important; }

[data-theme="light"] #mainContent .text-gray-900,
[data-theme="sajjad"] #mainContent .text-gray-900,
[data-theme="light"] .text-gray-900,
[data-theme="sajjad"] .text-gray-900 { color: var(--text-primary) !important; }

/* Headings and Titles High-Contrast Overrides for Light & Sajjad */
[data-theme="light"] h1.text-white,
[data-theme="sajjad"] h1.text-white,
[data-theme="light"] h2.text-white,
[data-theme="sajjad"] h2.text-white,
[data-theme="light"] h3.text-white,
[data-theme="sajjad"] h3.text-white,
[data-theme="light"] h4.text-white,
[data-theme="sajjad"] h4.text-white,
[data-theme="light"] [data-testid="page-title"],
[data-theme="sajjad"] [data-testid="page-title"],
[data-theme="light"] .page-header-title,
[data-theme="sajjad"] .page-header-title,
[data-theme="light"] .dynamic-form-title,
[data-theme="sajjad"] .dynamic-form-title,
[data-theme="light"] .form-group-title,
[data-theme="sajjad"] .form-group-title {
  color: var(--text-primary) !important;
}

[data-theme="light"] [data-testid="page-subtitle"],
[data-theme="sajjad"] [data-testid="page-subtitle"] {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .theme-card p.text-white,
[data-theme="sajjad"] .theme-card p.text-white,
[data-theme="light"] .layout-card p.text-white,
[data-theme="sajjad"] .layout-card p.text-white {
  color: var(--text-primary) !important;
}

/* Layout preview cards in Appearance page */
[data-theme="light"] .layout-card > div,
[data-theme="sajjad"] .layout-card > div {
  background-color: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .layout-card > div .bg-white\/10,
[data-theme="sajjad"] .layout-card > div .bg-white\/10,
[data-theme="light"] .layout-card > div .bg-white\/5,
[data-theme="sajjad"] .layout-card > div .bg-white\/5 {
  background-color: #cbd5e1 !important;
}
[data-theme="light"] .layout-card > div .border-white\/10,
[data-theme="sajjad"] .layout-card > div .border-white\/10 {
  border-color: #cbd5e1 !important;
}

/* Dashboard welcome card text */
[data-theme="light"] #trialBanner .text-white,
[data-theme="sajjad"] #trialBanner .text-white,
[data-theme="light"] .welcome-card h3,
[data-theme="sajjad"] .welcome-card h3 {
  color: var(--text-primary) !important;
}

/* Top Bar Navigation & Dropdown Overrides */
.topbar-brand-title {
    color: var(--text-primary, #ffffff);
}
[data-theme="sajjad"] .topbar-brand-title {
    color: #1f2937 !important;
}
[data-theme="light"] .topbar-brand-title {
    color: #0f172a !important;
}

.topbar-search-input {
    background: var(--input-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, #ffffff);
}
[data-theme="sajjad"] .topbar-search-input,
[data-theme="light"] .topbar-search-input {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #1f2937 !important;
}

.topnav-item {
    color: var(--nav-text, #94a3b8);
    background: transparent;
    border: 1px solid transparent;
}
.topnav-item:hover {
    color: var(--nav-text-hover, #ffffff);
    background: var(--nav-bg-hover, rgba(255, 255, 255, 0.08));
}
.topnav-item.topnav-active {
    color: var(--accent-primary, #38bdf8);
    background: var(--accent-light, rgba(56, 189, 248, 0.12));
    border-color: var(--accent-border, rgba(56, 189, 248, 0.25));
}

.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu,
.dropdown.open > .dropdown-menu {
    display: block !important;
}

.dropdown-menu {
    display: none;
    background: var(--bg-secondary, #0f172a);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, #f8fafc);
}
[data-theme="sajjad"] .dropdown-menu {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04) !important;
    color: #1f2937 !important;
}
[data-theme="light"] .dropdown-menu {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
}

.topbar-dropdown-link {
    color: var(--text-secondary, #cbd5e1);
}
.topbar-dropdown-link:hover {
    color: var(--text-primary, #ffffff);
    background: var(--nav-bg-hover, rgba(255, 255, 255, 0.08));
}
.topbar-dropdown-link.active {
    color: var(--accent-primary, #38bdf8);
    background: var(--accent-light, rgba(56, 189, 248, 0.15));
    font-weight: 600;
}
[data-theme="sajjad"] .topbar-dropdown-link {
    color: #4b5563 !important;
}
[data-theme="sajjad"] .topbar-dropdown-link:hover {
    color: #ea580c !important;
    background: #fff3e6 !important;
}
[data-theme="sajjad"] .topbar-dropdown-link.active {
    color: #ea580c !important;
    background: #fff3e6 !important;
    font-weight: 700 !important;
}

[data-theme="sajjad"] .topbar-user-name {
    color: #1f2937 !important;
}
[data-theme="light"] .topbar-user-name {
    color: #0f172a !important;
}

/* TomSelect Overrides for Light & Sajjad */
[data-theme="light"] .glass-panel .ts-wrapper .ts-control,
[data-theme="sajjad"] .glass-panel .ts-wrapper .ts-control {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
}
[data-theme="light"] .glass-panel .ts-wrapper .ts-control input,
[data-theme="sajjad"] .glass-panel .ts-wrapper .ts-control input,
[data-theme="light"] .glass-panel .ts-wrapper .ts-control .item,
[data-theme="sajjad"] .glass-panel .ts-wrapper .ts-control .item {
    color: #1f2937 !important;
}
[data-theme="light"] .glass-panel .ts-wrapper .ts-dropdown,
[data-theme="sajjad"] .glass-panel .ts-wrapper .ts-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] .glass-panel .ts-wrapper .ts-dropdown .option,
[data-theme="sajjad"] .glass-panel .ts-wrapper .ts-dropdown .option {
    color: #374151 !important;
}
[data-theme="sajjad"] .glass-panel .ts-wrapper .ts-dropdown .option.active,
[data-theme="sajjad"] .glass-panel .ts-wrapper .ts-dropdown .option:hover {
    background-color: #fff3e6 !important;
    color: #ea580c !important;
}
[data-theme="sajjad"] .glass-panel .ts-wrapper .ts-dropdown .option.selected {
    background-color: #f58220 !important;
    color: #ffffff !important;
}
[data-theme="light"] .glass-panel .ts-wrapper .ts-dropdown .option.active,
[data-theme="light"] .glass-panel .ts-wrapper .ts-dropdown .option:hover {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}
[data-theme="light"] .glass-panel .ts-wrapper .ts-dropdown .option.selected {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* Form Controls — Sajjad & Light High Contrast */
[data-theme="sajjad"] input[type="text"],
[data-theme="sajjad"] input[type="email"],
[data-theme="sajjad"] input[type="password"],
[data-theme="sajjad"] input[type="number"],
[data-theme="sajjad"] input[type="date"],
[data-theme="sajjad"] input[type="datetime-local"],
[data-theme="sajjad"] input[type="search"],
[data-theme="sajjad"] select,
[data-theme="sajjad"] textarea,
[data-theme="sajjad"] .glass-input,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="search"],
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .glass-input {
    background-color: var(--input-bg, #f9fafb) !important;
    border-color: var(--input-border, #d1d5db) !important;
    color: var(--text-primary, #1f2937) !important;
}

[data-theme="sajjad"] input::placeholder,
[data-theme="sajjad"] textarea::placeholder,
[data-theme="sajjad"] .glass-input::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder,
[data-theme="light"] .glass-input::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

[data-theme="sajjad"] label,
[data-theme="sajjad"] .form-label,
[data-theme="light"] label,
[data-theme="light"] .form-label {
    color: var(--text-primary, #1f2937) !important;
    font-weight: 600;
}

/* ---------- WCAG AA Contrast Overrides for Dark Mode ---------- */
html:not([data-theme="light"]):not([data-theme="sajjad"]) #mainContent .text-gray-500 { color: #94a3b8 !important; }
html:not([data-theme="light"]):not([data-theme="sajjad"]) #mainContent .text-gray-600 { color: #cbd5e1 !important; }

[data-theme="light"] .bg-white\/5,
[data-theme="sajjad"] .bg-white\/5,
[data-theme="light"] #mainContent .bg-white\/5,
[data-theme="sajjad"] #mainContent .bg-white\/5 { background: var(--glass-bg) !important; }

[data-theme="light"] .bg-white\/10,
[data-theme="sajjad"] .bg-white\/10,
[data-theme="light"] #mainContent .bg-white\/10,
[data-theme="sajjad"] #mainContent .bg-white\/10 { background: var(--glass-hover) !important; }

[data-theme="light"] .hover\:bg-white\/10:hover,
[data-theme="sajjad"] .hover\:bg-white\/10:hover,
[data-theme="light"] #mainContent .hover\:bg-white\/10:hover,
[data-theme="sajjad"] #mainContent .hover\:bg-white\/10:hover { background: var(--glass-hover) !important; }

[data-theme="light"] .border-white\/10,
[data-theme="sajjad"] .border-white\/10,
[data-theme="light"] #mainContent .border-white\/10,
[data-theme="sajjad"] #mainContent .border-white\/10 { border-color: var(--glass-border) !important; }

[data-theme="light"] .border-white\/5,
[data-theme="sajjad"] .border-white\/5,
[data-theme="light"] #mainContent .border-white\/5,
[data-theme="sajjad"] #mainContent .border-white\/5 { border-color: var(--glass-border) !important; }

[data-theme="light"] .border-t.border-white\/5,
[data-theme="sajjad"] .border-t.border-white\/5,
[data-theme="light"] #mainContent .border-t.border-white\/5,
[data-theme="sajjad"] #mainContent .border-t.border-white\/5 { border-color: var(--glass-border) !important; }

[data-theme="light"] .border-b.border-white\/5,
[data-theme="sajjad"] .border-b.border-white\/5,
[data-theme="light"] #mainContent .border-b.border-white\/5,
[data-theme="sajjad"] #mainContent .border-b.border-white\/5 { border-color: var(--glass-border) !important; }

[data-theme="light"] .bg-gray-500\/10,
[data-theme="sajjad"] .bg-gray-500\/10 { background: var(--accent-light) !important; }
[data-theme="light"] .bg-emerald-500\/20,
[data-theme="sajjad"] .bg-emerald-500\/20 { background: rgba(22,163,74,0.12) !important; }
[data-theme="light"] .text-emerald-400,
[data-theme="sajjad"] .text-emerald-400 { color: var(--success) !important; }
[data-theme="light"] .bg-blue-500\/20,
[data-theme="sajjad"] .bg-blue-500\/20 { background: rgba(37,99,235,0.1) !important; }
[data-theme="light"] .text-blue-400,
[data-theme="sajjad"] .text-blue-400 { color: var(--info) !important; }
[data-theme="light"] .bg-purple-500\/20,
[data-theme="sajjad"] .bg-purple-500\/20 { background: rgba(124,58,237,0.1) !important; }
[data-theme="light"] .text-purple-400,
[data-theme="sajjad"] .text-purple-400 { color: #7c3aed !important; }
[data-theme="light"] .bg-amber-500\/20,
[data-theme="sajjad"] .bg-amber-500\/20 { background: rgba(217,119,6,0.1) !important; }
[data-theme="light"] .text-amber-400,
[data-theme="sajjad"] .text-amber-400 { color: var(--warning) !important; }
[data-theme="light"] .bg-rose-500\/20,
[data-theme="sajjad"] .bg-rose-500\/20 { background: rgba(220,38,38,0.1) !important; }
[data-theme="light"] .text-rose-400,
[data-theme="sajjad"] .text-rose-400 { color: var(--danger) !important; }
[data-theme="light"] .bg-cyan-500\/20,
[data-theme="sajjad"] .bg-cyan-500\/20 { background: rgba(6,182,212,0.1) !important; }
[data-theme="light"] .text-cyan-400,
[data-theme="sajjad"] .text-cyan-400 { color: #0891b2 !important; }
[data-theme="light"] .bg-teal-500\/20,
[data-theme="sajjad"] .bg-teal-500\/20 { background: rgba(20,184,166,0.1) !important; }
[data-theme="light"] .text-teal-400,
[data-theme="sajjad"] .text-teal-400 { color: #0d9488 !important; }
[data-theme="light"] .bg-orange-500\/20,
[data-theme="sajjad"] .bg-orange-500\/20 { background: rgba(234,88,12,0.1) !important; }
[data-theme="light"] .text-orange-400,
[data-theme="sajjad"] .text-orange-400 { color: #ea580c !important; }
[data-theme="light"] .bg-indigo-500\/20,
[data-theme="sajjad"] .bg-indigo-500\/20 { background: rgba(79,70,229,0.1) !important; }
[data-theme="light"] .text-indigo-400,
[data-theme="sajjad"] .text-indigo-400 { color: #4f46e5 !important; }

[data-theme="light"] .shadow-sm,
[data-theme="sajjad"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; }
[data-theme="light"] .shadow-lg,
[data-theme="sajjad"] .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.08) !important; }

[data-theme="light"] .border-gray-200,
[data-theme="sajjad"] .border-gray-200 { border-color: var(--glass-border) !important; }
[data-theme="light"] .border-gray-300,
[data-theme="sajjad"] .border-gray-300 { border-color: var(--glass-border) !important; }

/* ---------- Ocean ---------- */
[data-theme="ocean"] #mainContent .text-gray-300 { color: var(--text-secondary) !important; }
[data-theme="ocean"] #mainContent .text-gray-400 { color: var(--text-muted) !important; }
[data-theme="ocean"] #mainContent .text-gray-500 { color: var(--text-muted) !important; }
[data-theme="ocean"] #mainContent .text-gray-600 { color: var(--text-secondary) !important; }
[data-theme="ocean"] #mainContent .text-gray-700 { color: var(--text-primary) !important; }
[data-theme="ocean"] #mainContent .text-gray-900 { color: var(--text-primary) !important; }
[data-theme="ocean"] #mainContent .bg-white\/5 { background: var(--glass-bg) !important; }
[data-theme="ocean"] #mainContent .bg-white\/10 { background: var(--glass-hover) !important; }
[data-theme="ocean"] #mainContent .hover\:bg-white\/10:hover { background: var(--glass-hover) !important; }
[data-theme="ocean"] #mainContent .border-white\/10 { border-color: var(--glass-border) !important; }
[data-theme="ocean"] #mainContent .border-white\/5 { border-color: var(--glass-border) !important; }
[data-theme="ocean"] #mainContent .border-t.border-white\/5 { border-color: var(--glass-border) !important; }
[data-theme="ocean"] #mainContent .border-b.border-white\/5 { border-color: var(--glass-border) !important; }
[data-theme="ocean"] #mainContent .bg-emerald-500\/20 { background: rgba(52,211,153,0.15) !important; }
[data-theme="ocean"] #mainContent .text-emerald-400 { color: var(--success) !important; }
[data-theme="ocean"] #mainContent .bg-blue-500\/20 { background: rgba(56,189,248,0.15) !important; }
[data-theme="ocean"] #mainContent .text-blue-400 { color: var(--info) !important; }
[data-theme="ocean"] #mainContent .bg-purple-500\/20 { background: rgba(167,139,250,0.15) !important; }
[data-theme="ocean"] #mainContent .text-purple-400 { color: #a78bfa !important; }
[data-theme="ocean"] #mainContent .bg-amber-500\/20 { background: rgba(251,191,36,0.15) !important; }
[data-theme="ocean"] #mainContent .text-amber-400 { color: var(--warning) !important; }
[data-theme="ocean"] #mainContent .bg-rose-500\/20 { background: rgba(251,113,133,0.15) !important; }
[data-theme="ocean"] #mainContent .text-rose-400 { color: var(--danger) !important; }
[data-theme="ocean"] #mainContent .bg-cyan-500\/20 { background: rgba(34,211,238,0.15) !important; }
[data-theme="ocean"] #mainContent .text-cyan-400 { color: #22d3ee !important; }
[data-theme="ocean"] #mainContent .bg-teal-500\/20 { background: rgba(45,212,191,0.15) !important; }
[data-theme="ocean"] #mainContent .text-teal-400 { color: #2dd4bf !important; }
[data-theme="ocean"] #mainContent .bg-orange-500\/20 { background: rgba(251,146,60,0.15) !important; }
[data-theme="ocean"] #mainContent .text-orange-400 { color: #fb923c !important; }
[data-theme="ocean"] #mainContent .bg-indigo-500\/20 { background: rgba(129,140,248,0.15) !important; }
[data-theme="ocean"] #mainContent .text-indigo-400 { color: #818cf8 !important; }

/* ---------- Forest ---------- */
[data-theme="forest"] #mainContent .text-gray-300 { color: var(--text-secondary) !important; }
[data-theme="forest"] #mainContent .text-gray-400 { color: var(--text-muted) !important; }
[data-theme="forest"] #mainContent .text-gray-500 { color: var(--text-muted) !important; }
[data-theme="forest"] #mainContent .text-gray-600 { color: var(--text-secondary) !important; }
[data-theme="forest"] #mainContent .text-gray-700 { color: var(--text-primary) !important; }
[data-theme="forest"] #mainContent .text-gray-900 { color: var(--text-primary) !important; }
[data-theme="forest"] #mainContent .bg-white\/5 { background: var(--glass-bg) !important; }
[data-theme="forest"] #mainContent .bg-white\/10 { background: var(--glass-hover) !important; }
[data-theme="forest"] #mainContent .hover\:bg-white\/10:hover { background: var(--glass-hover) !important; }
[data-theme="forest"] #mainContent .border-white\/10 { border-color: var(--glass-border) !important; }
[data-theme="forest"] #mainContent .border-white\/5 { border-color: var(--glass-border) !important; }
[data-theme="forest"] #mainContent .border-t.border-white\/5 { border-color: var(--glass-border) !important; }
[data-theme="forest"] #mainContent .border-b.border-white\/5 { border-color: var(--glass-border) !important; }
[data-theme="forest"] #mainContent .bg-emerald-500\/20 { background: rgba(74,222,128,0.15) !important; }
[data-theme="forest"] .text-emerald-400,
[data-theme="forest"] #mainContent .text-emerald-400 { color: var(--success) !important; }
[data-theme="forest"] #mainContent .bg-blue-500\/20 { background: rgba(56,189,248,0.15) !important; }
[data-theme="forest"] #mainContent .text-blue-400 { color: var(--info) !important; }
[data-theme="forest"] #mainContent .bg-purple-500\/20 { background: rgba(167,139,250,0.15) !important; }
[data-theme="forest"] #mainContent .text-purple-400 { color: #a78bfa !important; }
[data-theme="forest"] #mainContent .bg-amber-500\/20 { background: rgba(251,191,36,0.15) !important; }
[data-theme="forest"] #mainContent .text-amber-400 { color: var(--warning) !important; }
[data-theme="forest"] #mainContent .bg-rose-500\/20 { background: rgba(251,113,133,0.15) !important; }
[data-theme="forest"] #mainContent .text-rose-400 { color: var(--danger) !important; }
[data-theme="forest"] #mainContent .bg-cyan-500\/20 { background: rgba(34,211,238,0.15) !important; }
[data-theme="forest"] #mainContent .text-cyan-400 { color: #22d3ee !important; }
[data-theme="forest"] #mainContent .bg-teal-500\/20 { background: rgba(45,212,191,0.15) !important; }
[data-theme="forest"] #mainContent .text-teal-400 { color: #2dd4bf !important; }
[data-theme="forest"] #mainContent .bg-orange-500\/20 { background: rgba(251,146,60,0.15) !important; }
[data-theme="forest"] #mainContent .text-orange-400 { color: #fb923c !important; }
[data-theme="forest"] #mainContent .bg-indigo-500\/20 { background: rgba(129,140,248,0.15) !important; }
[data-theme="forest"] #mainContent .text-indigo-400 { color: #818cf8 !important; }

/* --- Global scrollbar (safe — no layout impact) --- */
[data-theme="light"] ::-webkit-scrollbar-track,
[data-theme="sajjad"] ::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
[data-theme="light"] ::-webkit-scrollbar-thumb,
[data-theme="sajjad"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
[data-theme="sajjad"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* --- Glass header (sidebar only — safe) --- */
[data-theme="light"] .glass-header,
[data-theme="sajjad"] .glass-header {
  background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0) 100%);
}

/* --- Loading spinner (safe — button-only) --- */
[data-theme="light"] .btn.is-loading::before,
[data-theme="sajjad"] .btn.is-loading::before {
  border-color: rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.65);
}

/* ============================================================
   ag-Grid Theme Overrides
   Variables + per-theme background/color for the grid itself.
   ============================================================ */
.ag-theme-alpine,
.ag-theme-alpine-dark {
  --ag-background-color: var(--card-bg, #1C2233);
  --ag-header-background-color: var(--table-header-bg, #212842);
  --ag-foreground-color: var(--text-primary, #F1F5F9);
  --ag-header-foreground-color: var(--text-secondary, #A0AEC0);
  --ag-odd-row-background-color: transparent;
  --ag-row-hover-color: var(--table-row-hover, rgba(56, 189, 248, 0.10));
  --ag-selected-row-background-color: var(--accent-light, rgba(56, 189, 248, 0.12));
  --ag-range-selection-background-color: var(--accent-light, rgba(56, 189, 248, 0.12));
  --ag-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ag-font-size: 13px;
  --ag-border-color: var(--border-default, var(--glass-border));
  --ag-row-border-color: var(--table-border, rgba(255, 255, 255, 0.08));
  --ag-input-focus-color: var(--accent-primary, #38BDF8);
}

/* ag-grid inputs */
.ag-theme-alpine input,
.ag-theme-alpine select,
.ag-theme-alpine-dark input,
.ag-theme-alpine-dark select {
  color: var(--text-primary) !important;
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
}

/* Midnight ag-grid variables */
[data-theme="midnight"] .ag-theme-alpine-dark {
  --ag-background-color: #1C2233;
  --ag-header-background-color: #212842;
  --ag-foreground-color: #F1F5F9;
  --ag-header-foreground-color: #A0AEC0;
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.02);
  --ag-row-hover-color: rgba(56, 189, 248, 0.10);
  --ag-selected-row-background-color: rgba(56, 189, 248, 0.12);
  --ag-border-color: rgba(255, 255, 255, 0.14);
  --ag-row-border-color: rgba(255, 255, 255, 0.07);
}

/* Light theme ag-grid variables */
[data-theme="light"] .ag-theme-alpine {
  --ag-background-color: #FFFFFF;
  --ag-header-background-color: #F1F5F9;
  --ag-foreground-color: #0F172A;
  --ag-header-foreground-color: #334155;
  --ag-odd-row-background-color: #F8FAFC;
  --ag-row-hover-color: #EFF6FF;
  --ag-selected-row-background-color: #DBEAFE;
  --ag-border-color: #E2E8F0;
  --ag-row-border-color: #E2E8F0;
}

/* Sajjad theme ag-grid variables */
[data-theme="sajjad"] .ag-theme-alpine {
  --ag-background-color: #FFFFFF;
  --ag-header-background-color: #F8FAFC;
  --ag-foreground-color: #0F172A;
  --ag-header-foreground-color: #334155;
  --ag-odd-row-background-color: #FBFBFD;
  --ag-row-hover-color: #FEF9C3;
  --ag-selected-row-background-color: #FEF3C7;
  --ag-border-color: #E2E8F0;
  --ag-row-border-color: #E2E8F0;
}

/* Ocean ag-grid variables */
[data-theme="ocean"] .ag-theme-alpine-dark {
  --ag-background-color: #0A3635;
  --ag-header-background-color: #124F4C;
  --ag-foreground-color: #F0FDFA;
  --ag-header-foreground-color: #B2DFDB;
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.02);
  --ag-row-hover-color: rgba(34, 211, 238, 0.12);
  --ag-selected-row-background-color: rgba(34, 211, 238, 0.15);
  --ag-border-color: #1A504E;
  --ag-row-border-color: #1A504E;
}

/* Forest ag-grid variables */
[data-theme="forest"] .ag-theme-alpine-dark {
  --ag-background-color: #14532D;
  --ag-header-background-color: #1F7A44;
  --ag-foreground-color: #F0FDF4;
  --ag-header-foreground-color: #C6E8D0;
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.02);
  --ag-row-hover-color: rgba(52, 211, 153, 0.10);
  --ag-selected-row-background-color: rgba(52, 211, 153, 0.15);
  --ag-border-color: #27703D;
  --ag-row-border-color: #27703D;
}

/* ============================================================
   Form Controls — Inputs, Selects, Textareas
   ============================================================ */
#mainContent select,
#mainContent input[type="text"],
#mainContent input[type="email"],
#mainContent input[type="number"],
#mainContent input[type="password"],
#mainContent input[type="date"],
#mainContent input[type="search"],
#mainContent textarea {
  color: var(--text-primary) !important;
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
}
#mainContent select:focus,
#mainContent input:focus,
#mainContent textarea:focus {
  border-color: var(--input-focus) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
}
#mainContent select option {
  color: var(--text-primary);
  background: var(--bg-secondary, #1e293b);
}
#mainContent label {
  color: var(--text-secondary) !important;
}
#mainContent .form-label,
#mainContent label.font-semibold,
#mainContent label.font-medium {
  color: var(--text-primary) !important;
}

/* Pagination text */
#mainContent .ag-paging-description,
#mainContent .ag-paging-row-summary-panel,
#mainContent [class*="pagination"],
#mainContent [class*="page-size"],
#mainContent [class*="Page"] {
  color: var(--text-secondary) !important;
}

/* Table body text (non-ag-grid tables) */
#mainContent table tbody td {
  color: var(--text-primary) !important;
}
#mainContent table thead th {
  color: var(--text-muted) !important;
}

/* Modal / dropdown text */
#mainContent .modal-body,
#mainContent .dropdown-menu,
#mainContent [role="dialog"] {
  color: var(--text-primary) !important;
}

/* Badge text inside tables */
#mainContent .badge,
#mainContent [class*="status-"] {
  color: inherit !important;
}

/* Dropdown menus — override hardcoded bg-slate-800 */
#mainContent [class*="bg-slate-800"] {
  background: var(--bg-secondary, #1e293b) !important;
  border-color: var(--glass-border, rgba(255,255,255,0.1)) !important;
}
[data-theme="light"] #mainContent [class*="bg-slate-800"],
[data-theme="sajjad"] #mainContent [class*="bg-slate-800"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
[data-theme="light"] #mainContent [class*="text-slate-300"],
[data-theme="sajjad"] #mainContent [class*="text-slate-300"] {
  color: #334155 !important;
}
[data-theme="light"] #mainContent [class*="hover\\:text-white"]:hover,
[data-theme="sajjad"] #mainContent [class*="hover\\:text-white"]:hover {
  color: #0f172a !important;
}

/* ── Validation Styling ── */
.field-validation-error {
    color: var(--danger, #fb7185) !important;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
}

.input-validation-error {
    border-color: var(--danger, #fb7185) !important;
}

/* ============================================================
   Sidebar Navigation Item Alignment & Spacing Overrides
   ============================================================ */
.sidebar-item-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    text-align: left !important;
    background: transparent;
    border: none;
    cursor: pointer;
}

.sidebar-item-link > div {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    min-width: 0 !important;
    text-align: left !important;
}

.sidebar-child-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    text-align: left !important;
    text-decoration: none;
}

.sidebar-child-link > div {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    min-width: 0 !important;
    text-align: left !important;
}

/* ============================================================
   Enhanced Sidebar UI/UX: Domains, Rails, Tree Guide & Active States
   ============================================================ */

/* ── Custom Scrollbar for Navigation ── */
.sidebar-nav-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.sidebar-nav-scroll::-webkit-scrollbar {
    width: 5px;
}

.sidebar-nav-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(56, 189, 248, 0.4);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ── Domain Headers & Tree Guide Lines ── */
.sidebar-domain-header {
    letter-spacing: normal !important;
}

.sidebar-domain-header span {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

.sidebar-domain-content {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-domain-header:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.sidebar-tree-guide {
    position: relative;
    border-left: 1.5px solid var(--border-subtle, rgba(255, 255, 255, 0.1)) !important;
    margin-left: 1rem;
    padding-left: 0.75rem;
}

/* ── Glowing Active Route Pill ── */
.sidebar-child-link.active,
.sidebar-item-link.active:not(:has(.chevron)) {
    border-left: 3px solid #38bdf8 !important;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0.03) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.12);
}

.sidebar-child-link.active i,
.sidebar-item-link.active:not(:has(.chevron)) i {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.4));
}

/* ── Desktop Rail Collapse (72px) ── */
@media (min-width: 768px) {
    #sidebarMenu {
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
    }

    #sidebarMenu.sidebar-collapsed {
        width: 4.5rem !important; /* 72px */
    }

    #sidebarMenu.sidebar-collapsed .sidebar-brand-text,
    #sidebarMenu.sidebar-collapsed .sidebar-filter-section,
    #sidebarMenu.sidebar-collapsed .sidebar-domain-header span,
    #sidebarMenu.sidebar-collapsed .sidebar-domain-header .chevron,
    #sidebarMenu.sidebar-collapsed .sidebar-domain-header .rounded-full,
    #sidebarMenu.sidebar-collapsed .sidebar-item-link span,
    #sidebarMenu.sidebar-collapsed .sidebar-item-link .chevron,
    #sidebarMenu.sidebar-collapsed .sidebar-tree-guide,
    #sidebarMenu.sidebar-collapsed .sidebar-user-details,
    #sidebarMenu.sidebar-collapsed .sidebar-user-actions {
        display: none !important;
    }

    #sidebarMenu.sidebar-collapsed .glass-header {
        padding: 1rem 0.75rem !important;
        justify-content: center !important;
    }

    #sidebarMenu.sidebar-collapsed .sidebar-brand-container {
        justify-content: center;
        width: 100%;
    }

    #sidebarMenu.sidebar-collapsed .sidebar-domain-header,
    #sidebarMenu.sidebar-collapsed .sidebar-item-link {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 3rem !important;
        height: 3rem !important;
        margin: 0.25rem auto !important;
        border-radius: 0.75rem !important;
    }

    #sidebarMenu.sidebar-collapsed .sidebar-domain-header i,
    #sidebarMenu.sidebar-collapsed .sidebar-item-link i {
        font-size: 1.125rem !important;
        margin: 0 !important;
    }

    #sidebarMenu.sidebar-collapsed .sidebar-footer-section {
        padding: 0.5rem !important;
    }

    #sidebarMenu.sidebar-collapsed .sidebar-footer-section a[data-testid="user-profile"] {
        justify-content: center !important;
        padding: 0.25rem !important;
    }

    /* Main Content Shift */
    #sidebarMenu.sidebar-collapsed ~ #mainContent,
    body.sidebar-is-collapsed #mainContent {
        margin-left: 4.5rem !important;
        transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ==========================================================================
   Multi-Navigation Layout Overrides (Ribbon, Float, Compact, Dual)
   ========================================================================== */

/* Ribbon Bar Styling across all themes */
[data-theme="light"] .ribbon-btn-label,
[data-theme="sajjad"] .ribbon-btn-label {
    color: var(--text-primary) !important;
}

[data-theme="light"] .ribbon-btn,
[data-theme="sajjad"] .ribbon-btn {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .ribbon-btn:hover,
[data-theme="sajjad"] .ribbon-btn:hover {
    background-color: var(--hover-bg) !important;
    color: var(--accent-primary) !important;
}

[data-theme="light"] .ribbon-group,
[data-theme="sajjad"] .ribbon-group {
    border-color: var(--glass-border) !important;
}

/* Float Launcher & Taskbar across themes */
[data-theme="light"] #floatMenu,
[data-theme="sajjad"] #floatMenu {
    background: #ffffff !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] #floatMenu p,
[data-theme="sajjad"] #floatMenu p,
[data-theme="light"] #floatMenu span,
[data-theme="sajjad"] #floatMenu span {
    color: var(--text-primary) !important;
}

[data-theme="light"] #floatMenu input,
[data-theme="sajjad"] #floatMenu input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .float-taskbar,
[data-theme="sajjad"] .float-taskbar {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: var(--glass-border) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .float-taskbar button,
[data-theme="sajjad"] .float-taskbar button {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .float-taskbar button:hover,
[data-theme="sajjad"] .float-taskbar button:hover {
    background-color: var(--hover-bg) !important;
    color: var(--accent-primary) !important;
}

[data-theme="light"] #taskbarTime,
[data-theme="sajjad"] #taskbarTime {
    color: var(--text-secondary) !important;
}

/* Compact Rail & Flyout Styling */
[data-theme="light"] .compact-flyout,
[data-theme="sajjad"] .compact-flyout {
    background: #ffffff !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .compact-flyout .sidebar-child-link,
[data-theme="sajjad"] .compact-flyout .sidebar-child-link {
    color: var(--text-primary) !important;
}

[data-theme="light"] .compact-flyout .sidebar-child-link:hover,
[data-theme="sajjad"] .compact-flyout .sidebar-child-link:hover {
    background-color: #fff3e6 !important;
    color: var(--accent-primary) !important;
}

[data-theme="light"] .compact-flyout .sidebar-child-link.active,
[data-theme="sajjad"] .compact-flyout .sidebar-child-link.active {
    background-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

[data-theme="light"] .nav-tooltip,
[data-theme="sajjad"] .nav-tooltip {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Dual Panel Sidebar */
[data-theme="light"] #dualSidebarMenu,
[data-theme="sajjad"] #dualSidebarMenu {
    background: var(--sidebar-bg) !important;
    border-color: var(--glass-border) !important;
}

[data-theme="light"] #dualSidebarMenu .sidebar-item-link,
[data-theme="sajjad"] #dualSidebarMenu .sidebar-item-link {
    color: var(--nav-text) !important;
}

[data-theme="light"] #dualSidebarMenu .sidebar-item-link:hover,
[data-theme="sajjad"] #dualSidebarMenu .sidebar-item-link:hover {
    color: var(--nav-text-hover) !important;
    background-color: var(--hover-bg) !important;
}

[data-theme="light"] #dualSidebarMenu .sidebar-child-link,
[data-theme="sajjad"] #dualSidebarMenu .sidebar-child-link {
    color: var(--text-secondary) !important;
}

[data-theme="light"] #dualSidebarMenu .sidebar-child-link:hover,
[data-theme="sajjad"] #dualSidebarMenu .sidebar-child-link:hover {
    color: var(--accent-primary) !important;
    background-color: var(--hover-bg) !important;
}

/* ============================================================
   Storefront & Marketplace Theme Parity Overrides
   Adapts .bg-white cards and borders under dark themes (midnight, ocean, forest)
   ============================================================ */
[data-theme="midnight"] #mainContent .bg-white,
[data-theme="ocean"] #mainContent .bg-white,
[data-theme="forest"] #mainContent .bg-white {
    background-color: var(--bg-secondary) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

[data-theme="midnight"] #mainContent .border-gray-200,
[data-theme="ocean"] #mainContent .border-gray-200,
[data-theme="forest"] #mainContent .border-gray-200 {
    border-color: var(--glass-border) !important;
}

[data-theme="midnight"] #mainContent .text-gray-900,
[data-theme="midnight"] #mainContent .text-gray-800,
[data-theme="midnight"] #mainContent .text-gray-700,
[data-theme="ocean"] #mainContent .text-gray-900,
[data-theme="ocean"] #mainContent .text-gray-800,
[data-theme="ocean"] #mainContent .text-gray-700,
[data-theme="forest"] #mainContent .text-gray-900,
[data-theme="forest"] #mainContent .text-gray-800,
[data-theme="forest"] #mainContent .text-gray-700 {
    color: var(--text-primary) !important;
}

[data-theme="midnight"] #mainContent .text-gray-600,
[data-theme="midnight"] #mainContent .text-gray-500,
[data-theme="ocean"] #mainContent .text-gray-600,
[data-theme="ocean"] #mainContent .text-gray-500,
[data-theme="forest"] #mainContent .text-gray-600,
[data-theme="forest"] #mainContent .text-gray-500 {
    color: var(--text-secondary) !important;
}

[data-theme="midnight"] #mainContent .text-gray-400,
[data-theme="midnight"] #mainContent .text-gray-300,
[data-theme="ocean"] #mainContent .text-gray-400,
[data-theme="ocean"] #mainContent .text-gray-300,
[data-theme="forest"] #mainContent .text-gray-400,
[data-theme="forest"] #mainContent .text-gray-300 {
    color: var(--text-muted) !important;
}

/* Modal and dialog backgrounds under dark themes */
[data-theme="midnight"] dialog .bg-white,
[data-theme="ocean"] dialog .bg-white,
[data-theme="forest"] dialog .bg-white {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
}

/* ==========================================================================
   UNIVERSAL APPLICATION-WIDE MICRO-TOOLTIP ENGINE
   Adopts the efind8 card-bounded dark slate (#0f172a) tooltip styling globally.
   Supports [data-tooltip], [data-card-tip], multi-direction and alignments.
   ========================================================================== */
[data-tooltip],
[data-card-tip] {
  position: relative !important;
}

[data-tooltip]::before,
[data-tooltip]::after,
[data-card-tip]::before,
[data-card-tip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
}

/* Tooltip Bubble */
[data-tooltip]::after {
  content: attr(data-tooltip);
  background: #0f172a;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 6px 11px;
  border-radius: 6px;
  white-space: normal;
  max-width: 260px;
  width: max-content;
  text-align: center;
  word-break: break-word;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
}

[data-card-tip]::after {
  content: attr(data-card-tip);
  background: #0f172a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 5px 9px;
  border-radius: 5px;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 18px -2px rgba(15, 23, 42, 0.35);
}

/* Caret Indicator */
[data-tooltip]::before,
[data-card-tip]::before {
  content: "";
  border-width: 5px;
  border-style: solid;
}

/* DEFAULT: TOP POSITION (Tooltip above element, caret pointing down) */
[data-tooltip]::after,
[data-tooltip][data-tooltip-pos="top"]::after,
[data-card-tip]::after,
[data-card-tip][data-tooltip-pos="top"]::after {
  bottom: calc(100% + 7px);
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%) translateY(4px);
}
[data-tooltip]::before,
[data-tooltip][data-tooltip-pos="top"]::before,
[data-card-tip]::before,
[data-card-tip][data-tooltip-pos="top"]::before {
  bottom: calc(100% + 1px);
  left: 50%;
  right: auto;
  top: auto;
  border-color: #0f172a transparent transparent transparent;
  transform: translateX(-50%) translateY(4px);
}

/* BOTTOM POSITION: Tooltip below element, caret pointing up */
[data-tooltip][data-tooltip-pos="bottom"]::after,
[data-card-tip][data-tooltip-pos="bottom"]::after {
  top: calc(100% + 7px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip][data-tooltip-pos="bottom"]::before,
[data-card-tip][data-tooltip-pos="bottom"]::before {
  top: calc(100% + 1px);
  bottom: auto;
  left: 50%;
  right: auto;
  border-color: transparent transparent #0f172a transparent;
  transform: translateX(-50%) translateY(-4px);
}

/* LEFT POSITION: Tooltip to the left, caret pointing right */
[data-tooltip][data-tooltip-pos="left"]::after,
[data-card-tip][data-tooltip-pos="left"]::after {
  right: calc(100% + 7px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(4px);
}
[data-tooltip][data-tooltip-pos="left"]::before,
[data-card-tip][data-tooltip-pos="left"]::before {
  right: calc(100% + 1px);
  left: auto;
  top: 50%;
  bottom: auto;
  border-color: transparent transparent transparent #0f172a;
  transform: translateY(-50%) translateX(4px);
}

/* RIGHT POSITION: Tooltip to the right, caret pointing left */
[data-tooltip][data-tooltip-pos="right"]::after,
[data-card-tip][data-tooltip-pos="right"]::after {
  left: calc(100% + 7px);
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) translateX(-4px);
}
[data-tooltip][data-tooltip-pos="right"]::before,
[data-card-tip][data-tooltip-pos="right"]::before {
  left: calc(100% + 1px);
  right: auto;
  top: 50%;
  bottom: auto;
  border-color: transparent #0f172a transparent transparent;
  transform: translateY(-50%) translateX(-4px);
}

/* HORIZONTAL ALIGNMENT MODIFIERS (FOR TOP & BOTTOM PLACEMENT) */
/* Align Left: bubble starts at left edge of trigger */
[data-tooltip][data-tip-align="left"]::after,
[data-tooltip][data-tooltip-align="left"]::after,
[data-card-tip][data-tip-align="left"]::after,
[data-card-tip][data-tooltip-align="left"]::after {
  left: 0;
  right: auto;
  text-align: left;
  transform: translateY(4px);
}
[data-tooltip][data-tip-align="left"]::before,
[data-tooltip][data-tooltip-align="left"]::before,
[data-card-tip][data-tip-align="left"]::before,
[data-card-tip][data-tooltip-align="left"]::before {
  left: 12px;
  right: auto;
  transform: translateY(4px);
}

/* Align Right: bubble ends at right edge of trigger */
[data-tooltip][data-tip-align="right"]::after,
[data-tooltip][data-tooltip-align="right"]::after,
[data-card-tip][data-tip-align="right"]::after,
[data-card-tip][data-tooltip-align="right"]::after {
  right: 0;
  left: auto;
  text-align: right;
  transform: translateY(4px);
}
[data-tooltip][data-tip-align="right"]::before,
[data-tooltip][data-tooltip-align="right"]::before,
[data-card-tip][data-tip-align="right"]::before,
[data-card-tip][data-tooltip-align="right"]::before {
  right: 12px;
  left: auto;
  transform: translateY(4px);
}

/* ACTIVE HOVER & FOCUS STATES */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after,
[data-card-tip]:hover::before,
[data-card-tip]:hover::after,
[data-card-tip]:focus-visible::before,
[data-card-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Reset transforms on hover */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip][data-tooltip-pos="top"]:hover::after,
[data-tooltip][data-tooltip-pos="top"]:hover::before,
[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:hover::before,
[data-card-tip]:hover::after,
[data-card-tip]:hover::before,
[data-card-tip][data-tooltip-pos="top"]:hover::after,
[data-card-tip][data-tooltip-pos="top"]:hover::before,
[data-card-tip][data-tooltip-pos="bottom"]:hover::after,
[data-card-tip][data-tooltip-pos="bottom"]:hover::before {
  transform: translateX(-50%) translateY(0);
}

[data-tooltip][data-tip-align="left"]:hover::after,
[data-tooltip][data-tip-align="left"]:hover::before,
[data-tooltip][data-tooltip-align="left"]:hover::after,
[data-tooltip][data-tooltip-align="left"]:hover::before,
[data-card-tip][data-tip-align="left"]:hover::after,
[data-card-tip][data-tip-align="left"]:hover::before,
[data-card-tip][data-tooltip-align="left"]:hover::after,
[data-card-tip][data-tooltip-align="left"]:hover::before,
[data-tooltip][data-tip-align="right"]:hover::after,
[data-tooltip][data-tip-align="right"]:hover::before,
[data-tooltip][data-tooltip-align="right"]:hover::after,
[data-tooltip][data-tooltip-align="right"]:hover::before,
[data-card-tip][data-tip-align="right"]:hover::after,
[data-card-tip][data-tip-align="right"]:hover::before,
[data-card-tip][data-tooltip-align="right"]:hover::after,
[data-card-tip][data-tooltip-align="right"]:hover::before {
  transform: translateY(0);
}

[data-tooltip][data-tooltip-pos="left"]:hover::after,
[data-tooltip][data-tooltip-pos="left"]:hover::before,
[data-card-tip][data-tooltip-pos="left"]:hover::after,
[data-card-tip][data-tooltip-pos="left"]:hover::before,
[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:hover::before,
[data-card-tip][data-tooltip-pos="right"]:hover::after,
[data-card-tip][data-tooltip-pos="right"]:hover::before {
  transform: translateY(-50%) translateX(0);
}

/* Card-Title-Tooltip pattern (for multi-line text bound within parent cards) */
.card-title-wrap {
  position: relative;
}
.card-title-tooltip {
  display: none !important;
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  z-index: 50 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(4px) !important;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.card-title-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  border-width: 6px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
}
.card-title-wrap:hover .card-title-tooltip,
.card-title-wrap:focus-within .card-title-tooltip {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}