/* ============================================================
   NOA panel theme — dark navy + gold
   Loaded after tabler.css. The app's own Vite CSS defines its
   variables inside @layer base, so these unlayered overrides win.
   No backdrop-filter anywhere. No emoji.
   Palette: bg #0a1428 -> #0d1830, surfaces #10203c,
            gold #c8a04a -> #e8cf7a, gold text #d9b866
   ============================================================ */

/* ---------- PRIMARY: purple -> gold (light and dark) ---------- */
:root {
    --primary: 41 53% 54%;
    --primary-foreground: 220 60% 10%;
    --accent: 41 53% 54%;
    --accent-foreground: 220 60% 10%;
    --gradient-from: 46 70% 69%;
    --gradient-via: 41 53% 54%;
    --gradient-to: 36 50% 42%;
    --tblr-primary: #c8a04a;
    --tblr-primary-rgb: 200, 160, 74;
}

/* ---------- DARK: navy-gold surfaces ---------- */
body.theme-dark {
    /* Tailwind/liquid HSL tokens */
    --primary: 41 53% 54%;
    --primary-foreground: 220 60% 10%;
    --secondary: 218 58% 15%;
    --secondary-foreground: 45 45% 85%;
    --accent: 41 53% 54%;
    --accent-foreground: 220 60% 10%;
    --background: 221 57% 12%;
    --foreground: 217 30% 88%;
    --border: 219 40% 22%;
    --heading-background: 218 58% 15%;
    --heading-foreground: 45 45% 90%;
    --input-background: 220 55% 13%;
    --input-foreground: 217 30% 90%;
    --input-border: 219 40% 24%;
    --card-background: 218 58% 15%;
    --card-foreground: 217 30% 88%;
    --card-border: 219 40% 22%;
    --card-shadow: 0 10px 30px rgb(4 10 24 / 45%);
    --folder-background: 218 58% 15%;
    --folder-foreground: 217 30% 88%;
    --folder-border: 219 40% 22%;
    --header-background: 220 60% 10%;
    --header-border: 219 40% 20%;
    --label: 218 25% 62%;
    --surface: 218 58% 15%;
    --surface-light: 218 45% 19%;
    --surface-background: 221 57% 12%;
    --clay: 218 58% 15%;
    --dropdown-background: 218 58% 15%;
    --dropdown-foreground: 217 30% 88%;
    --dropdown-border: 219 40% 24%;

    /* Sidebar / navbar */
    --navbar-background: 220 60% 10%;
    --navbar-foreground: 218 20% 72%;
    --navbar-background-hover: 41 53% 54%;
    --navbar-foreground-hover: 41 53% 54%;
    --navbar-background-active: 41 53% 54%;
    --navbar-foreground-active: 41 53% 54%;
    --navbar-border: 219 40% 20%;
    --navbar-divider: 219 40% 20%;

    /* Gradients used by decorative text/surfaces */
    --gradient-from: 46 70% 69%;
    --gradient-via: 41 53% 54%;
    --gradient-to: 36 50% 42%;

    /* Tabler BC vars */
    --tblr-primary: #c8a04a;
    --tblr-primary-rgb: 200, 160, 74;
    --tblr-body-bg: #0d1830;
    --tblr-body-bg-rgb: 13, 24, 48;
    --tblr-bg-surface: #10203c;
    --tblr-border-color: rgb(200 160 74 / 12%);
    --tblr-card-border-color: rgb(200 160 74 / 12%);
    --tblr-dark-mode-border-color: rgb(200 160 74 / 12%);
    --tblr-muted: #8290ad;
    --tblr-bg-forms: hsl(220 55% 13%);

    /* liquid extras */
    --lqd-pink: #16264a;
    --lqd-gray: #cfd8ea;
    --lqd-header-search-bg: #10203c;
    --lqd-header-search-color: #8290ad;
    --lqd-header-search-color-focus: #e8cf7a;
    --lqd-heading-color: #f0e6c8;
    --lqd-heading-color-rgb: 240, 230, 200;
    --lqd-vertical-nav-link-color: #aab6cf;
    --lqd-shadow-color: rgb(4 10 24 / 45%);
    --lqd-faded-out: rgb(200 160 74 / 25%);
    --lqd-faded-out-more: rgb(200 160 74 / 10%);

    background-color: #0a1428;
    background-image: linear-gradient(180deg, #0a1428 0%, #0d1830 55%, #0a1428 100%);
    background-attachment: fixed;
    color: hsl(var(--foreground));
}

/* ---------- Scrollbar (subtle) ---------- */
:root:has(body.theme-dark) {
    --scrollbar-width: 6px;
    --scrollbar-track: 221 57% 9%;
    --scrollbar-thumb: 219 25% 26%;
    --scrollbar-thumb-hover: 41 40% 45%;
}

body.theme-dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.theme-dark ::-webkit-scrollbar-track {
    background: rgb(8 16 34 / 60%);
}

body.theme-dark ::-webkit-scrollbar-thumb {
    background: #2a3a5c;
    border-radius: 6px;
}

body.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #c8a04a;
}

/* ---------- Buttons: gold primary ---------- */
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled,
.btn-primary.disabled {
    background: linear-gradient(120deg, #c8a04a, #e8cf7a) !important;
    border-color: #c8a04a !important;
    color: #0a1428 !important;
    box-shadow: 0 2px 10px rgb(200 160 74 / 25%);
}

.btn-primary:hover {
    background: linear-gradient(120deg, #d3ab55, #f0da8c) !important;
    border-color: #d3ab55 !important;
    color: #0a1428 !important;
    box-shadow: 0 4px 16px rgb(200 160 74 / 35%);
}

.btn-outline-primary {
    color: #c8a04a !important;
    border-color: #c8a04a !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: rgb(200 160 74 / 12%) !important;
    color: #e8cf7a !important;
    border-color: #e8cf7a !important;
}

/* Tailwind-style primary surfaces get gold via --primary tokens;
   make sure text sitting on them is dark for contrast. */
body.theme-dark .bg-primary {
    color: hsl(var(--primary-foreground));
}

/* ---------- Links: gold (only unclassed content links, so
   utility-classed nav/menu items keep their own styling) ---------- */
body.theme-dark a:not([class]) {
    color: #d9b866;
}

body.theme-dark a:not([class]):hover {
    color: #e8cf7a;
}

/* ---------- Forms: dark inputs, gold focus ---------- */
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="password"],
body.theme-dark input[type="search"],
body.theme-dark input[type="number"],
body.theme-dark input[type="url"],
body.theme-dark textarea,
body.theme-dark select {
    background-color: hsl(220 55% 13%);
    border-color: hsl(219 40% 24%);
    color: hsl(217 30% 90%);
}

body.theme-dark .form-control::placeholder,
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #6d7a96;
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus,
body.theme-dark input[type="text"]:focus,
body.theme-dark input[type="email"]:focus,
body.theme-dark input[type="password"]:focus,
body.theme-dark input[type="search"]:focus,
body.theme-dark input[type="number"]:focus,
body.theme-dark input[type="url"]:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
    background-color: hsl(220 55% 13%);
    border-color: #c8a04a;
    box-shadow: 0 0 0 2px rgb(200 160 74 / 25%);
    outline: none;
    color: hsl(217 30% 92%);
}

body.theme-dark .form-check-input:checked,
body.theme-dark .form-switch .form-check-input:checked {
    background-color: #c8a04a;
    border-color: #c8a04a;
}

/* ---------- Cards / dropzones / that pale lilac panel ---------- */
body.theme-dark .card,
body.theme-dark .modal-content,
body.theme-dark .dropdown-menu,
body.theme-dark .offcanvas {
    background-color: #10203c;
    border-color: hsl(219 40% 22%);
    color: hsl(217 30% 88%);
}

/* Light/lilac utility backgrounds inside the panel become navy surfaces */
body.theme-dark .bg-white,
body.theme-dark .bg-light,
body.theme-dark .bg-secondary {
    background-color: #10203c !important;
    color: hsl(217 30% 88%);
}

/* File drop areas (Source Image etc.) */
body.theme-dark .lqd-drop-area,
body.theme-dark [class*="drop-area"],
body.theme-dark .dropzone {
    background-color: #0f1c33;
    border-color: rgb(200 160 74 / 35%);
    color: #aab6cf;
}

body.theme-dark .lqd-drop-area:hover,
body.theme-dark [class*="drop-area"]:hover,
body.theme-dark .dropzone:hover {
    border-color: #c8a04a;
    background-color: #12224066;
}

/* Solid surfaces: never any backdrop blur in dark theme */
body.theme-dark [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---------- Tables / badges / misc ---------- */
body.theme-dark .table,
body.theme-dark table {
    color: hsl(217 30% 88%);
    --tblr-table-bg: transparent;
}

body.theme-dark .badge.bg-primary,
body.theme-dark .badge[class*="primary"] {
    background: linear-gradient(120deg, #c8a04a, #e8cf7a) !important;
    color: #0a1428 !important;
}

body.theme-dark .text-primary {
    color: #d9b866 !important;
}

body.theme-dark .border-primary {
    border-color: #c8a04a !important;
}

/* Progress bars pick up the gold */
body.theme-dark .progress {
    background-color: #10203c;
}

body.theme-dark .progress-bar {
    background: linear-gradient(120deg, #c8a04a, #e8cf7a);
}

/* Selection color */
body.theme-dark ::selection {
    background: rgb(200 160 74 / 35%);
    color: #f0e6c8;
}