/* Dark mode override layer.
   Activated by [data-theme="dark"] on <html>. Overrides only the surfaces the
   templates actually use. The vendored material.css is never edited; its utility
   classes use !important, so the overrides below do too where needed. */

/* IMPORTANT: Daemonite Material ships its own dark mode keyed on this same
   [data-theme="dark"] attribute, implemented as a whole-page colour inversion:
       html[data-theme='dark'] { filter: invert(1) hue-rotate(180deg); }
   plus a counter-inversion on <img>/<video> to make them look normal again.
   That inversion flipped every explicit colour below (dark bg -> light grey,
   accents hue-shifted) and flipped embedded iframes like YouTube (which it
   never un-inverts). We use real, explicit colours instead, so cancel Material's
   inversion entirely. This MUST stay at the top, before the colour rules. */
[data-theme="dark"],
[data-theme="dark"] img,
[data-theme="dark"] video,
[data-theme="dark"] .prevent-dark-theme {
    -webkit-filter: none !important;
    filter: none !important;
}

[data-theme="dark"] {
    --dk-bg: #1e1e1e;          /* page background: matches the content surface so the
                                  darker base never shows through margins (the strips
                                  that appeared above the navbar and below the footer) */
    --dk-surface: #1e1e1e;     /* cards / bg-white / main content */
    --dk-surface-2: #262626;   /* bg-light */
    --dk-surface-3: #2f2f2f;   /* bg-light-1, bg-light-2, bg-dark header bands */
    --dk-text: rgba(255, 255, 255, 0.87);
    --dk-text-2: rgba(255, 255, 255, 0.60);
    --dk-border: rgba(255, 255, 255, 0.14);
    --dk-link: #b388ff;        /* purple links (violet-leaning, not pink) */
    --dk-link-hover: #cdb4ff;
    --dk-orange: #fb8c00;      /* orange accent (brand orange, not yellow/amber) */
}

/* Fix the dark strip under the navbar: the content container lets its first
   child's top margin (e.g. .mt-5) collapse through, exposing the darker body
   background between the navbar and the content. flow-root contains the margin
   without shifting anything or clipping the nav-drawer transform. */
[data-theme="dark"] .main-content {
    display: flow-root;
}

/* ---- Base surfaces ---- */

[data-theme="dark"] body {
    background-color: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--dk-surface) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--dk-surface-2) !important;
}

[data-theme="dark"] .bg-light-1,
[data-theme="dark"] .bg-light-2,
[data-theme="dark"] .bg-light-3,
[data-theme="dark"] .bg-light-4 {
    background-color: var(--dk-surface-3) !important;
}

/* bg-dark is used with text-white for section header bands (RATING, DATA POINTS,
   etc). Keep it a touch lighter than the page so the bands stay legible. */
[data-theme="dark"] .bg-dark {
    background-color: var(--dk-surface-3) !important;
}

/* ---- Navbar / footer ---- */

[data-theme="dark"] .navbar.bg-light-2 {
    background-color: #1a1a1a !important;
}

[data-theme="dark"] .navbar.bg-white {
    background-color: var(--dk-surface) !important;
}

/* navbar-light hardcodes dark text (used by the top nav brand and the footer
   note). Light it up so the footer small print is readable too. */
[data-theme="dark"] .navbar-light,
[data-theme="dark"] .navbar-light .navbar-brand,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar-light .navbar-text,
[data-theme="dark"] .navbar.bg-white small {
    color: var(--dk-text) !important;
}

/* ---- Links ---- */

[data-theme="dark"] a,
[data-theme="dark"] a:visited {
    color: var(--dk-link);
}

[data-theme="dark"] a:hover {
    color: var(--dk-link-hover);
}

/* Keep buttons-rendered-as-links readable: button classes manage their own color. */
[data-theme="dark"] a.btn {
    color: inherit;
}

/* ---- Icons ---- */

[data-theme="dark"] .material-icons.black {
    color: var(--dk-text);
}

/* ---- Buttons ---- */

/* Plain/icon buttons (e.g. the theme toggle, the NEW button) inherit Material's
   dark default text colour, so their labels and inner material-icons come out
   near-black on the dark page. Default them to light; the coloured variants
   below use !important and keep their own colours. */
[data-theme="dark"] .btn {
    color: var(--dk-text);
}

/* btn-outline-dark is invisible on a dark surface; invert to a light outline. */
[data-theme="dark"] .btn-outline-dark {
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

[data-theme="dark"] .btn-outline-dark:hover,
[data-theme="dark"] .btn-outline-dark:focus {
    background-color: var(--dk-text) !important;
    border-color: var(--dk-text) !important;
    color: #121212 !important;
}

[data-theme="dark"] .btn-light {
    background-color: var(--dk-surface-3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-light:focus {
    background-color: #3a3a3a !important;
    color: var(--dk-text) !important;
}

/* btn-dark (auth pages) needs to stand out against the dark page. */
[data-theme="dark"] .btn-dark {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
    color: #121212 !important;
}

[data-theme="dark"] .btn-dark:hover,
[data-theme="dark"] .btn-dark:focus {
    background-color: #ffffff !important;
    color: #121212 !important;
}

/* Danger reds (#b00020) are nearly invisible on a dark page; lighten them. */
[data-theme="dark"] .btn-outline-danger {
    color: #ff6b6b !important;
    border-color: #ff6b6b !important;
}

[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-outline-danger:focus {
    background-color: #ff6b6b !important;
    border-color: #ff6b6b !important;
    color: #121212 !important;
}

[data-theme="dark"] .btn-danger {
    background-color: #cf3a4a !important;
    border-color: #cf3a4a !important;
    color: #ffffff !important;
}

/* Orange accent. On dark surfaces a brighter, more saturated orange reads better
   and stays orange (the stock #ff8d00 looks muddy/brown once dimmed). */
[data-theme="dark"] .btn-warning {
    background-color: var(--dk-orange) !important;
    color: #121212 !important;
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--dk-orange) !important;
    color: #121212 !important;
}

[data-theme="dark"] .material-icons.orange600 {
    color: var(--dk-orange) !important;
}

[data-theme="dark"] .btn-outline-warning {
    color: var(--dk-orange) !important;
    border-color: var(--dk-orange) !important;
}

[data-theme="dark"] .btn-outline-warning:hover {
    background-color: var(--dk-orange) !important;
    border-color: var(--dk-orange) !important;
    color: #121212 !important;
}

/* ---- Action chips (Hive, Bookmark on a datapoint) ---- */

/* These are Material chips (default: light-grey fill, dark text, and a dark hover
   that makes the label unreadable). Make them behave like the outline buttons:
   dark with light text/border, filling light with dark text on hover. */
[data-theme="dark"] .chip-action {
    background-color: transparent !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}

[data-theme="dark"] .chip-action:not(.disabled):hover,
[data-theme="dark"] .chip-action:not(.disabled):focus,
[data-theme="dark"] .chip-action:not(.disabled):active {
    background-color: var(--dk-text) !important;
    color: #121212 !important;
}

/* Bookmark icon (.material-icons.black) is light by default; make it dark on the
   light hover fill so it stays visible. The Hive icon (orange600) reads on both. */
[data-theme="dark"] .chip-action:hover .material-icons.black,
[data-theme="dark"] .chip-action:focus .material-icons.black {
    color: #121212 !important;
}

/* ---- Forms ---- */

[data-theme="dark"] .form-control {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

[data-theme="dark"] .form-control:focus {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--dk-text-2) !important;
}

/* The nav search field has no border and its dark fill disappears against the
   navbar. Give it a lighter fill + visible border so it reads as a field. This
   targets only navbar fields, leaving the underline-style create/edit form
   fields (on the content surface) as they are. */
[data-theme="dark"] .navbar .form-control {
    background-color: #2e2e2e !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 4px;
}

[data-theme="dark"] .custom-select {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

[data-theme="dark"] label,
[data-theme="dark"] .form-text {
    color: var(--dk-text-2) !important;
}

/* ---- Cards / tables / modals ---- */

[data-theme="dark"] .card {
    background-color: transparent !important;
    color: var(--dk-text) !important;
}

/* Datapoint search-result text hardcodes dark secondary colours (rgba(0,0,0,.6))
   that the body's light colour can't reach. */
[data-theme="dark"] .card-text,
[data-theme="dark"] .card-text small,
[data-theme="dark"] .description,
[data-theme="dark"] .author-name,
[data-theme="dark"] .created,
[data-theme="dark"] .last-edited {
    color: var(--dk-text-2) !important;
}

/* Material's secondary/hint text utilities. */
[data-theme="dark"] .text-black,
[data-theme="dark"] .text-black-primary {
    color: var(--dk-text) !important;
}

[data-theme="dark"] .text-black-secondary,
[data-theme="dark"] .text-black-hint {
    color: var(--dk-text-2) !important;
}

[data-theme="dark"] .table {
    color: var(--dk-text) !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: var(--dk-border) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--dk-text) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--dk-border) !important;
}

[data-theme="dark"] .close {
    color: var(--dk-text) !important;
    text-shadow: none !important;
}

/* ---- Misc ---- */

[data-theme="dark"] hr {
    border-top-color: var(--dk-border) !important;
}

[data-theme="dark"] ::selection {
    color: #121212;
    background-color: #bbbbbb;
}

/* The active pagination page keeps the orange accent (see main.css); ensure its
   text stays readable. */
[data-theme="dark"] .page-item.active .page-link {
    color: #121212 !important;
}

[data-theme="dark"] .page-link {
    background-color: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* ---- Best-effort: third-party widget chrome ---- */

/* CKEditor 5: theme it dark via its own CSS variables. The key one is
   --ck-color-text, which drives the toolbar icon/label colour (it defaulted to
   ~#333, making the icons invisible on the dark toolbar). .ck-body-wrapper holds
   floating UI (dropdowns, balloons) rendered at the end of <body>. */
[data-theme="dark"] .ck.ck-editor,
[data-theme="dark"] .ck-body-wrapper .ck {
    --ck-color-base-foreground: #2a2a2a;
    --ck-color-base-background: #1e1e1e;
    --ck-color-base-border: rgba(255, 255, 255, 0.18);
    --ck-color-base-text: rgba(255, 255, 255, 0.87);
    --ck-color-text: rgba(255, 255, 255, 0.87);
    --ck-color-shadow-drop: rgba(0, 0, 0, 0.5);
    --ck-color-shadow-inner: rgba(0, 0, 0, 0.3);
    --ck-color-toolbar-background: #262626;
    --ck-color-toolbar-border: rgba(255, 255, 255, 0.18);
    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: #333333;
    --ck-color-button-default-active-background: #3a3a3a;
    --ck-color-button-on-background: #333333;
    --ck-color-button-on-hover-background: #3f3f3f;
    --ck-color-button-on-active-background: #444444;
    --ck-color-button-on-color: #ffffff;
    --ck-color-button-action-background: #fb8c00;
    --ck-color-button-action-hover-background: #ff9e1b;
    --ck-color-panel-background: #262626;
    --ck-color-panel-border: rgba(255, 255, 255, 0.18);
    --ck-color-dropdown-panel-background: #262626;
    --ck-color-dropdown-panel-border: rgba(255, 255, 255, 0.18);
    --ck-color-list-background: #262626;
    --ck-color-list-button-hover-background: #333333;
    --ck-color-list-button-on-background: #333333;
    --ck-color-input-background: #1e1e1e;
    --ck-color-input-border: rgba(255, 255, 255, 0.22);
    --ck-color-input-text: rgba(255, 255, 255, 0.87);
}

[data-theme="dark"] .ck.ck-content {
    background-color: #1e1e1e !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Flatpickr */
[data-theme="dark"] .flatpickr-calendar {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text) !important;
}
