@charset "UTF-8";
/* ==========================================================================
   Aiedrow Theme System — Light & Dark Modes
   Compatible with [theme=light], [theme=dark], [data-theme], and .dark class.
   ========================================================================== */

/* Default / Light Theme */
:root,
[theme="light"],
[data-theme="light"] {
    --a-bg-canvas: #fbfbfd;
    --a-bg-surface: #f5f5f7;
    --a-bg-surface-elevated: #ffffff;
    --a-bg-surface-secondary: #f2f2f7;
    --a-bg-surface-tertiary: #e5e5ea;
    
    --a-text-primary: #1d1d1f;
    --a-text-secondary: #424245;
    --a-text-muted: #86868b;
    --a-text-light: #6e6e73;

    --a-border: rgba(0, 0, 0, 0.06);
    --a-border-subtle: rgba(0, 0, 0, 0.04);
    --a-header-bg: rgba(251, 251, 253, 0.82);

    --a-blue: #0071e3;
    --a-blue-hover: #0077ed;
    --a-blue-active: #0066cc;

    --a-font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Dark Theme (Apple Dark Mode Aesthetics) */
html.dark,
[theme="dark"],
[data-theme="dark"] {
    --a-bg-canvas: #000000;
    --a-bg-surface: #161617;
    --a-bg-surface-elevated: #1c1c1e;
    --a-bg-surface-secondary: #242426;
    --a-bg-surface-tertiary: #2c2c2e;
    
    --a-text-primary: #f5f5f7;
    --a-text-secondary: #a1a1a6;
    --a-text-muted: #86868b;
    --a-text-light: #a1a1a6;

    --a-border: rgba(255, 255, 255, 0.08);
    --a-border-subtle: rgba(255, 255, 255, 0.05);
    --a-header-bg: rgba(22, 22, 23, 0.82);

    --a-blue: #2997ff;
    --a-blue-hover: #0077ed;
    --a-blue-active: #0066cc;
}

/* Dark Mode Global Overrides */
html.dark body,
[theme="dark"] body,
[data-theme="dark"] body {
    background-color: var(--a-bg-canvas) !important;
    color: var(--a-text-primary) !important;
}

html.dark .apple-header,
[theme="dark"] .apple-header {
    background: var(--a-header-bg) !important;
    border-bottom: 1px solid var(--a-border) !important;
}

html.dark .apple-nav-link,
[theme="dark"] .apple-nav-link {
    color: var(--a-text-secondary);
}
html.dark .apple-nav-link:hover,
[theme="dark"] .apple-nav-link:hover {
    color: var(--a-text-primary);
}
html.dark .apple-nav-link.active,
[theme="dark"] .apple-nav-link.active {
    color: var(--a-text-primary);
    background: rgba(255, 255, 255, 0.08);
}

html.dark .apple-card,
[theme="dark"] .apple-card {
    background: var(--a-bg-surface);
    color: var(--a-text-primary);
    border: 1px solid var(--a-border);
}

html.dark .apple-card-white,
[theme="dark"] .apple-card-white {
    background: var(--a-bg-surface-elevated);
    color: var(--a-text-primary);
    border: 1px solid var(--a-border);
}

html.dark .apple-btn-secondary,
[theme="dark"] .apple-btn-secondary {
    background: var(--a-bg-surface-secondary);
    color: var(--a-text-primary);
}
html.dark .apple-btn-secondary:hover,
[theme="dark"] .apple-btn-secondary:hover {
    background: var(--a-bg-surface-tertiary);
}

/* Dark mode utility adaptors for tailwind-styled sections */
html.dark .bg-\[\#fbfbfd\],
html.dark .bg-\[\#f5f5f7\],
[theme="dark"] .bg-\[\#fbfbfd\],
[theme="dark"] .bg-\[\#f5f5f7\] {
    background-color: var(--a-bg-canvas) !important;
}

html.dark .bg-white,
[theme="dark"] .bg-white {
    background-color: var(--a-bg-surface-elevated) !important;
    border-color: var(--a-border) !important;
}

html.dark .bg-white\/80,
html.dark .bg-white\/90,
[theme="dark"] .bg-white\/80,
[theme="dark"] .bg-white\/90 {
    background-color: rgba(28, 28, 30, 0.85) !important;
    border-color: var(--a-border) !important;
}

html.dark .text-\[\#1d1d1f\],
[theme="dark"] .text-\[\#1d1d1f\] {
    color: var(--a-text-primary) !important;
}

html.dark .text-\[\#424245\],
html.dark .text-\[\#6e6e73\],
[theme="dark"] .text-\[\#424245\],
[theme="dark"] .text-\[\#6e6e73\] {
    color: var(--a-text-secondary) !important;
}

html.dark .border-black\/\[0\.04\],
html.dark .border-black\/\[0\.05\],
html.dark .border-black\/\[0\.06\],
html.dark .border-black\/\[0\.03\],
[theme="dark"] .border-black\/\[0\.04\],
[theme="dark"] .border-black\/\[0\.05\],
[theme="dark"] .border-black\/\[0\.06\],
[theme="dark"] .border-black\/\[0\.03\] {
    border-color: var(--a-border) !important;
}

/* Dark mode mockups and cards */
html.dark .swiper-slide,
[theme="dark"] .swiper-slide {
    background-color: var(--a-bg-surface-elevated) !important;
    border-color: var(--a-border) !important;
}

html.dark #appleSpotlightModal > div,
[theme="dark"] #appleSpotlightModal > div {
    background-color: var(--a-bg-surface-elevated) !important;
    color: var(--a-text-primary) !important;
    border: 1px solid var(--a-border);
}

html.dark #spotlightInput,
[theme="dark"] #spotlightInput {
    color: var(--a-text-primary) !important;
}

html.dark footer,
[theme="dark"] footer {
    background-color: var(--a-bg-surface) !important;
    border-top-color: var(--a-border) !important;
}

/* Keyboard Shortcut Badge Theme Overrides (Neutralizing Bootstrap default) */
kbd {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    padding: 2px 6px !important;
    color: var(--a-text-muted) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

html.dark kbd,
[theme="dark"] kbd,
[data-theme="dark"] kbd {
    color: var(--a-text-secondary) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   Dark Mode Utility Adaptors v2
   Full coverage for neutral light utilities used across site + admin panel.
   Elements that must stay light opt out via Tailwind "!" variants
   (e.g. "!bg-white"), which these selectors cannot touch.
   ========================================================================== */

/* --- Neutral surfaces ----------------------------------------------------- */
html.dark .bg-\[\#fbfbfd\]\/95,
html.dark .bg-\[\#fbfbfd\]\/98,
[theme="dark"] .bg-\[\#fbfbfd\]\/95,
[theme="dark"] .bg-\[\#fbfbfd\]\/98 {
    background-color: rgba(0, 0, 0, 0.92) !important;
}

html.dark .bg-\[\#e5e5ea\],
[theme="dark"] .bg-\[\#e5e5ea\] {
    background-color: var(--a-bg-surface-tertiary) !important;
}

html.dark .bg-white\/70,
html.dark .bg-white\/75,
html.dark .bg-white\/85,
html.dark .bg-white\/95,
html.dark .bg-white\/98,
[theme="dark"] .bg-white\/70,
[theme="dark"] .bg-white\/75,
[theme="dark"] .bg-white\/85,
[theme="dark"] .bg-white\/95,
[theme="dark"] .bg-white\/98 {
    background-color: rgba(28, 28, 30, 0.82) !important;
}

/* --- Hover / focus states -------------------------------------------------- */
html.dark .hover\:bg-\[\#f5f5f7\]:hover,
[theme="dark"] .hover\:bg-\[\#f5f5f7\]:hover {
    background-color: var(--a-bg-surface-secondary) !important;
}
html.dark .hover\:bg-\[\#f5f5f7\]\/50:hover,
[theme="dark"] .hover\:bg-\[\#f5f5f7\]\/50:hover {
    background-color: rgba(36, 36, 38, 0.5) !important;
}
html.dark .hover\:bg-\[\#e5e5ea\]:hover,
[theme="dark"] .hover\:bg-\[\#e5e5ea\]:hover {
    background-color: var(--a-bg-surface-tertiary) !important;
}
html.dark .hover\:bg-white:hover,
[theme="dark"] .hover\:bg-white:hover {
    background-color: var(--a-bg-surface-tertiary) !important;
}
html.dark .focus\:bg-white:focus,
[theme="dark"] .focus\:bg-white:focus {
    background-color: var(--a-bg-surface-elevated) !important;
}

/* --- Text ------------------------------------------------------------------- */
html.dark .hover\:text-\[\#1d1d1f\]:hover,
[theme="dark"] .hover\:text-\[\#1d1d1f\]:hover {
    color: var(--a-text-primary) !important;
}

/* --- Borders & dividers ---------------------------------------------------- */
html.dark .border-black\/\[0\.08\],
html.dark .border-black\/\[0\.1\],
html.dark .border-black\/\[0\.12\],
[theme="dark"] .border-black\/\[0\.08\],
[theme="dark"] .border-black\/\[0\.1\],
[theme="dark"] .border-black\/\[0\.12\] {
    border-color: var(--a-border) !important;
}
html.dark .divide-black\/\[0\.03\] > :not([hidden]) ~ :not([hidden]),
[theme="dark"] .divide-black\/\[0\.03\] > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--a-border-subtle) !important;
}
html.dark .border-white:not(.border-white\/10),
[theme="dark"] .border-white:not(.border-white\/10) {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* --- Slim Select ------------------------------------------------------------ */
html.dark .ss-content,
[theme="dark"] .ss-content {
    background: var(--a-bg-surface-elevated) !important;
    color: var(--a-text-primary);
}
html.dark .ss-main,
[theme="dark"] .ss-main {
    color: var(--a-text-primary);
}

/* --- Admin: scrollbars ------------------------------------------------------- */
html.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* --- Admin: simple-datatables ------------------------------------------------- */
html.dark .dataTable-input,
html.dark .datatable-input {
    background: var(--a-bg-surface-elevated);
    color: var(--a-text-primary);
    border-color: var(--a-border);
}
html.dark .dataTable-input:focus,
html.dark .datatable-input:focus {
    background: var(--a-bg-surface-secondary);
    box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.15);
}
html.dark .dataTable-selector,
html.dark .datatable-selector {
    background: var(--a-bg-surface-elevated);
    color: var(--a-text-primary);
    border-color: var(--a-border);
}
html.dark .dataTable-table > thead > tr > th,
html.dark .datatable-table > thead > tr > th,
html.dark .dataTable-table > tbody > tr > td,
html.dark .datatable-table > tbody > tr > td {
    border-bottom-color: var(--a-border-subtle);
}
html.dark .dataTable-table > tfoot > tr > th,
html.dark .datatable-table > tfoot > tr > th {
    border-top-color: var(--a-border-subtle);
}
html.dark .dataTable-table > tbody > tr:hover,
html.dark .datatable-table > tbody > tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
}
html.dark .dataTable-pagination li a,
html.dark .datatable-pagination li a,
html.dark .dataTable-pagination button,
html.dark .datatable-pagination-list button,
html.dark .datatable-pagination button,
html.dark .datatable-pagination-list button {
    background: var(--a-bg-surface-secondary);
    color: var(--a-text-primary);
}
html.dark .dataTable-pagination li a:hover,
html.dark .datatable-pagination li a:hover,
html.dark .dataTable-pagination button:hover {
    background: var(--a-bg-surface-tertiary);
}

/* ==========================================================================
   Dark Mode Adaptors v3 — root-element & third-party polish
   ========================================================================== */

/* The <html> element itself can carry light utility classes (admin/auth/link) */
html.dark.bg-\[\#fbfbfd\],
[theme="dark"].bg-\[\#fbfbfd\],
html.dark.bg-white,
[theme="dark"].bg-white {
    background-color: var(--a-bg-canvas) !important;
}

/* Tailwind pastel tints (badges/alerts) that glare on dark surfaces */
html.dark .bg-red-50,
html.dark .hover\:bg-red-50:hover,
html.dark .hover\:bg-red-100:hover,
html.dark .bg-blue-50,
html.dark .bg-amber-50,
html.dark .bg-purple-50,
[theme="dark"] .bg-red-50,
[theme="dark"] .hover\:bg-red-50:hover,
[theme="dark"] .hover\:bg-red-100:hover,
[theme="dark"] .bg-blue-50,
[theme="dark"] .bg-amber-50,
[theme="dark"] .bg-purple-50 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .border-blue-100,
html.dark .border-amber-100,
[theme="dark"] .border-blue-100,
[theme="dark"] .border-amber-100 {
    border-color: var(--a-border) !important;
}

/* ApexCharts light-styled tooltips */
html.dark .apexcharts-tooltip,
html.dark .apexcharts-xaxistooltip,
html.dark .apexcharts-yaxistooltip,
[theme="dark"] .apexcharts-tooltip,
[theme="dark"] .apexcharts-xaxistooltip,
[theme="dark"] .apexcharts-yaxistooltip {
    background: var(--a-bg-surface-elevated) !important;
    border-color: var(--a-border) !important;
    color: var(--a-text-primary) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}
html.dark .apexcharts-tooltip-title,
[theme="dark"] .apexcharts-tooltip-title {
    background: var(--a-bg-surface-secondary) !important;
    border-bottom-color: var(--a-border) !important;
}
html.dark .apexcharts-yaxistooltip-text,
html.dark .apexcharts-xaxistooltip-text,
[theme="dark"] .apexcharts-yaxistooltip-text,
[theme="dark"] .apexcharts-xaxistooltip-text {
    color: var(--a-text-primary) !important;
}

/* ==========================================================================
   Polished interactive states — seamless focus and hover
   ========================================================================== */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--a-blue);
    outline-offset: 2px;
    border-radius: 4px;
}
a.apple-btn-blue:focus-visible,
a.apple-btn-secondary:focus-visible,
a.apple-btn-dark:focus-visible {
    outline-offset: 3px;
}