/* =========================================================================
   Cases Academy — GeodAIsics brand theme
   Bootstrap 5.3 override via CSS variables (without Sass recompilation).
   Identity extracted from geodaisics.com:
     - Brand blue   #0C4DA2  (primary)
     - Bright blue  #2EA3F2  (info / accent / links)
     - Orange       #FF8500  (highlight / secondary CTA)
     - Headings     Barlow Condensed
     - Body         Archivo
   Load AFTER bootstrap.min.css and styles.css.
   ========================================================================= */

/* ---- Brand fonts (Google Fonts) ---- */
@import url("./fonts.css");
/* =========================================================================
   1. Brand tokens — Bootstrap root variables
   ========================================================================= */
:root,
[data-bs-theme="light"] {
    /* GeodAIsics palette — "Ciel" variant (validated) */
    --ga-blue:        #2E8FE6;
    --ga-blue-rgb:    46, 143, 230;
    --ga-blue-hover:  #1f7ccf;
    --ga-blue-active: #1a6cb5;

    --ga-sky:         #2EA3F2;
    --ga-sky-rgb:     46, 163, 242;
    --ga-sky-hover:   #1f8fdb;

    --ga-orange:      #FF9E2C;
    --ga-orange-rgb:  255, 158, 44;
    --ga-orange-hover:#f08a12;

    /* --- Bootstrap color remapping --- */
    --bs-primary:        var(--ga-blue);
    --bs-primary-rgb:    var(--ga-blue-rgb);
    --bs-info:           var(--ga-sky);
    --bs-info-rgb:       var(--ga-sky-rgb);
    --bs-link-color:     var(--ga-blue);
    --bs-link-color-rgb: var(--ga-blue-rgb);
    --bs-link-hover-color: var(--ga-blue-active);

    /* Typography */
    --bs-body-font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 0.975rem;
    --bs-body-color: #25303b;

    /* Radii & shadows — a touch softer and more modern */
    --bs-border-radius:    0.55rem;
    --bs-border-radius-sm: 0.4rem;
    --bs-border-radius-lg: 0.85rem;
    --ga-shadow-sm: 0 1px 2px rgba(16, 32, 53, .06), 0 1px 3px rgba(16, 32, 53, .08);
    --ga-shadow:    0 4px 14px rgba(16, 32, 53, .08);
}

/* Dark mode: keep the brand but soften the blue for contrast */
[data-bs-theme="dark"] {
    --bs-primary:        #4d9bf0;
    --bs-primary-rgb:    77, 155, 240;
    --bs-link-color:     #6fb3f5;
    --bs-link-color-rgb: 111, 179, 245;
    --bs-link-hover-color: #9ccbf8;
    --bs-body-font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* IMPORTANT: restore a light text color (otherwise the #25303b
       inherited from :root makes labels and headings unreadable on a dark background) */
    --bs-body-color:       #dde3ea;
    --bs-secondary-color:  rgba(221, 227, 234, .7);
    --bs-emphasis-color:   #f4f7fa;
}

/* =========================================================================
   2. Typography
   ========================================================================= */
body {
    font-family: var(--bs-body-font-family);
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- Headings: Barlow Condensed, slightly larger scale ----
   (narrow font → bump sizes and weight a little for balance) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, .card-title, .modal-title {
    font-family: 'Barlow Condensed', 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .3px;
}

h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2.0rem; }
h3, .h3 { font-size: 1.65rem; font-weight: 700; }   /* most common page title */
h4, .h4 { font-size: 1.4rem; }
h5, .h5 { font-size: 1.2rem; }
h6, .h6 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .6px; color: var(--bs-secondary-color); }

/* Lead text */
.lead { font-weight: 400; color: var(--bs-secondary-color); }

/* Bold action links a touch more readable */
strong, .fw-bold, b { font-weight: 600; }

/* =========================================================================
   3. Buttons — Bootstrap does not theme .btn-* via --bs-primary alone,
      the local variables of each variant must be overridden.
   ========================================================================= */
.btn-primary {
    --bs-btn-bg: var(--ga-blue);
    --bs-btn-border-color: var(--ga-blue);
    --bs-btn-hover-bg: var(--ga-blue-hover);
    --bs-btn-hover-border-color: var(--ga-blue-hover);
    --bs-btn-active-bg: var(--ga-blue-active);
    --bs-btn-active-border-color: var(--ga-blue-active);
    --bs-btn-disabled-bg: var(--ga-blue);
    --bs-btn-disabled-border-color: var(--ga-blue);
    --bs-btn-focus-shadow-rgb: var(--ga-blue-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ga-blue);
    --bs-btn-border-color: var(--ga-blue);
    --bs-btn-hover-bg: var(--ga-blue);
    --bs-btn-hover-border-color: var(--ga-blue);
    --bs-btn-active-bg: var(--ga-blue-active);
    --bs-btn-active-border-color: var(--ga-blue-active);
    --bs-btn-focus-shadow-rgb: var(--ga-blue-rgb);
}

.btn-info {
    --bs-btn-bg: var(--ga-sky);
    --bs-btn-border-color: var(--ga-sky);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ga-sky-hover);
    --bs-btn-hover-border-color: var(--ga-sky-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ga-sky-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--ga-sky-rgb);
}

/* The "save / validate / publish" buttons were green (btn-success):
   we harmonize them with the brand blue. (The text-bg-success status badges
   stay green, that's a different class.) */
.btn-success {
    --bs-btn-bg: var(--ga-blue);
    --bs-btn-border-color: var(--ga-blue);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ga-blue-hover);
    --bs-btn-hover-border-color: var(--ga-blue-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ga-blue-active);
    --bs-btn-active-border-color: var(--ga-blue-active);
    --bs-btn-disabled-bg: var(--ga-blue);
    --bs-btn-disabled-border-color: var(--ga-blue);
    --bs-btn-focus-shadow-rgb: var(--ga-blue-rgb);
}

/* Orange accent button (secondary CTA) — new utility variant */
.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ga-orange);
    --bs-btn-border-color: var(--ga-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ga-orange-hover);
    --bs-btn-hover-border-color: var(--ga-orange-hover);
    --bs-btn-active-bg: var(--ga-orange-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--ga-orange-rgb);
}

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--bs-border-radius);
}

/* =========================================================================
   4. Brand surfaces (bg / badges / text)
   ========================================================================= */
.bg-primary        { background-color: var(--ga-blue) !important; }
.text-bg-primary   { background-color: var(--ga-blue) !important; color: #fff !important; }
.text-primary      { color: var(--ga-blue) !important; }
.border-primary    { border-color: var(--ga-blue) !important; }

.text-bg-accent, .badge.text-bg-accent { background-color: var(--ga-orange) !important; color: #fff !important; }
.text-bg-info      { background-color: var(--ga-sky) !important; color: #fff !important; }

/* The app nav bar: we replace the inconsistent green with the brand blue */
div.fixed-app-nav .nav-header.text-bg-success,
div.fixed-app-nav .nav-header {
    background: linear-gradient(90deg, var(--ga-blue) 0%, var(--ga-blue-active) 100%) !important;
    color: #fff !important;
}
div.fixed-app-nav .nav-header a,
div.fixed-app-nav .nav-header button,
div.fixed-app-nav .nav-header .fw-light,
div.fixed-app-nav .nav-header i {
    color: #fff !important;
}
div.fixed-app-nav .nav-header a:hover,
div.fixed-app-nav .nav-header button:not(.btn):hover,
div.fixed-app-nav .nav-header a:hover i,
div.fixed-app-nav .nav-header button:not(.btn):hover i {
    color: var(--ga-orange) !important;
    transition: color .15s ease;
}
/* The "logout" button keeps a readable red on a blue background */
div.fixed-app-nav .nav-header form .btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-danger);
    --bs-btn-hover-border-color: var(--bs-danger);
    color: #fff !important;
    background-color: transparent;
    border-color: transparent;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
div.fixed-app-nav .nav-header form .btn-danger:hover {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
div.fixed-app-nav .nav-header form .btn-danger:hover i {
    color: #fff !important;
}

/* =========================================================================
   5. Cards — soft shadow, hover, sharper image
   ========================================================================= */
.card {
    --bs-card-border-color: rgba(16, 32, 53, .08);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--ga-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    overflow: hidden;               /* image respects the rounded corners */
}

/* ---- Case grid: regular gutters instead of fixed margins ---- */
#cases_card_list {
    gap: 1.5rem;
    align-items: stretch;
}
#cases_card_list div.card {
    width: 15.5rem;
    margin: 0;                      /* cancels the margin-right/bottom from styles.css */
    display: flex;
    flex-direction: column;
}

/* ---- Hover: the card lifts and the image zooms in slightly ---- */
#cases_card_list a:not(.disabled_card) .card,
#cases_card_list .card:has(a:not(.disabled_card)) {
    cursor: pointer;
}
#cases_card_list .card:not(#ad_tile):hover {
    box-shadow: var(--ga-shadow);
    transform: translateY(-4px);
    border-color: rgba(var(--ga-blue-rgb), .35);
}
#cases_card_list .card:not(#ad_tile) > a {
    display: block;
    overflow: hidden;
}
#cases_card_list .card .card-img-top {
    transition: transform .35s ease;
}
#cases_card_list .card:hover .card-img-top {
    transform: scale(1.045);
}
.disabled_card .card-img-top { filter: grayscale(.25) opacity(.85); }

.card-img-top {
    border-top-left-radius: var(--bs-border-radius-lg);
    border-top-right-radius: var(--bs-border-radius-lg);
}
/* Case tiles: image rounded on all 4 corners (top AND bottom) */
#cases_card_list .card-img-top {
    border-radius: var(--bs-border-radius-lg);
}

/* ---- Status badge: crisp pill, readable over the image ---- */
#cases_card_list .card > .badge {
    border-radius: 50rem;
    padding: .4em .7em;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    z-index: 2;
}

/* ---- Case title (card-text in the body): more prominent, on 2 lines ---- */
#cases_card_list .card-body {
    padding-bottom: .5rem;
}
#cases_card_list .card-body .card-text {
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.3;
    color: var(--bs-body-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

/* ---- Card footer: clean, finely separated ---- */
#cases_card_list .card-footer {
    background: transparent;
    border-top: 1px solid rgba(16, 32, 53, .07);
}
#cases_card_list .card-footer .card-text.small {
    color: var(--bs-secondary-color);
    line-height: 1.4;
}
/* Edit button: round icon, subtle at rest, emphasized on hover */
#cases_card_list .card-footer .btn-primary {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    padding: 0;
}

/* =========================================================================
   6. Links, focus, pagination, legacy purple badges
   ========================================================================= */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

.form-control:focus,
.form-select:focus {
    border-color: var(--ga-sky);
    box-shadow: 0 0 0 .2rem rgba(var(--ga-sky-rgb), .2);
}

.pagination {
    --bs-pagination-color: var(--ga-blue);
    --bs-pagination-hover-color: var(--ga-blue-active);
    --bs-pagination-active-bg: var(--ga-blue);
    --bs-pagination-active-border-color: var(--ga-blue);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--ga-blue-rgb), .25);
    --bs-pagination-border-radius: var(--bs-border-radius);
}

/* Replaces the old placeholder purple #712cf9 with the brand blue */
span.badge.text-bg-purple, button.btn-purple {
    background-color: var(--ga-blue) !important;
}
span.badge.text-bg-purple:hover, button.btn-purple:hover {
    background-color: var(--ga-blue-active) !important;
}
.btn-bd-primary {
    --bd-violet-bg: var(--ga-blue);
    --bs-btn-bg: var(--ga-blue);
    --bs-btn-border-color: var(--ga-blue);
    --bs-btn-hover-bg: var(--ga-blue-hover);
    --bs-btn-hover-border-color: var(--ga-blue-hover);
    --bs-btn-active-bg: var(--ga-blue-active);
}

/* =========================================================================
   7. Toasts & modals — brand header
   ========================================================================= */
.modal-title { color: var(--ga-blue); }
[data-bs-theme="dark"] .modal-title { color: #6fb3f5; }

/* =========================================================================
   8. App navigation bar (fixed-app-nav)
   ========================================================================= */
div.fixed-app-nav {
    /* square top corners (the banner is stuck to the top of the page), rounded bottom */
    border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg);
    box-shadow: var(--ga-shadow);
    margin-bottom: 1.25rem;
    /* no overflow:hidden here, otherwise the status badge (#case_edit_badge,
       at bottom:-10px) would be clipped → we round the corners on the banner/area */
}

/* ---- Top banner: more breathing room, clean alignment ---- */
div.fixed-app-nav .nav-header {
    height: auto;
    min-height: 3rem;
    padding: .45rem 1rem;
    gap: .5rem;
    border-top-left-radius: 0;     /* square top corners */
    border-top-right-radius: 0;
}

/* ---- Action icons: round clickable target + emphasized hover ----
   (we exclude .btn so as not to affect the logout button) */
div.fixed-app-nav .nav-header a,
div.fixed-app-nav .nav-header button:not(.btn) {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rem;
    margin-right: .15rem !important;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
div.fixed-app-nav .nav-header a:hover,
div.fixed-app-nav .nav-header button:not(.btn):hover {
    background-color: rgba(255, 255, 255, .18);
    color: var(--ga-orange) !important;
    transform: translateY(-1px);
}
div.fixed-app-nav .nav-header a:active,
div.fixed-app-nav .nav-header button:not(.btn):active {
    transform: translateY(0);
}

/* ---- User name: readable, separated from the actions by a thin rule ---- */
div.fixed-app-nav .nav-header .fw-light {
    font-weight: 500 !important;
    padding-right: .85rem;
    margin-right: .35rem;
    border-right: 1px solid rgba(255, 255, 255, .25);
    white-space: nowrap;
}

/* ---- Logout button: translucent, turns red on hover ---- */
div.fixed-app-nav .nav-header form { margin: 0; }
div.fixed-app-nav .nav-header form .btn-danger {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius);   /* square with rounded corners, as before */
    padding: 0;
}

/* ---- Filter area (nav-body): light background, centered vertical alignment ---- */
div.fixed-app-nav .nav-body {
    padding: .85rem 1rem;
    align-items: center;
    gap: .75rem;
    background: var(--bs-body-bg);
    border-bottom-left-radius: var(--bs-border-radius-lg);
    border-bottom-right-radius: var(--bs-border-radius-lg);
}
/* case status badge: it sticks out below the bar, we keep it in the foreground */
#case_edit_badge {
    z-index: 2;
}
[data-bs-theme="dark"] div.fixed-app-nav .nav-body {
    background: var(--bs-tertiary-bg);
}

/* =========================================================================
   9. Secondary pages — tables & forms
   ========================================================================= */

/* ---- Tables (user list, DataTables) ---- */
.table {
    --bs-table-hover-bg: rgba(var(--ga-blue-rgb), .06);
    --bs-table-border-color: rgba(16, 32, 53, .08);
    vertical-align: middle;
}
.table > thead th,
.table > thead td {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .4px;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border-bottom: 2px solid rgba(var(--ga-blue-rgb), .25);
    white-space: nowrap;
}
/* User list (table-layout: fixed): normal case + line wrapping so that
   the column labels display fully without being truncated */
#manage-users-table thead th {
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    font-size: .8rem;
    line-height: 1.2;
}
/* DataTables classes "Last login" as a date column (dt-type-date) → header
   right-aligned + sort arrow on the left. We restore left alignment + arrow
   on the right, like the other columns. */
#manage-users-table thead th.dt-type-date,
#manage-users-table thead th.dt-type-numeric {
    text-align: left;
}
#manage-users-table thead th.dt-type-date div.dt-column-header,
#manage-users-table thead th.dt-type-numeric div.dt-column-header {
    flex-direction: row;
}
/* The DataTables container: rounded corners + subtle rule */
.table-responsive { border-radius: var(--bs-border-radius); }

/* DataTables column filters (input-filter from user_list.css): brand focus */
.input-filter:focus,
.dataTables_wrapper input:focus,
.dataTables_wrapper select:focus {
    border-color: var(--ga-sky);
    box-shadow: 0 0 0 .2rem rgba(var(--ga-sky-rgb), .2);
    outline: 0;
}

/* ---- Forms ---- */
/* Checkboxes / switches: checked state in brand colors */
.form-check-input:checked {
    background-color: var(--ga-blue);
    border-color: var(--ga-blue);
}
.form-check-input:focus {
    border-color: var(--ga-sky);
    box-shadow: 0 0 0 .25rem rgba(var(--ga-sky-rgb), .25);
}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232EA3F2'/%3e%3c/svg%3e");
}

/* Floating fields (signup, preferences): subtler label */
.form-floating > label { color: var(--bs-secondary-color); }
.form-control, .form-select { border-radius: var(--bs-border-radius); }

/* Alerts: consistent corners + colored left rule for rhythm */
.alert {
    border-radius: var(--bs-border-radius);
    border-left-width: 4px;
}

/* Authentication pages: comfortable, centered form width */
main > .container form.d-flex.flex-column .form-floating,
main > .container form.d-flex.flex-column .form-control {
    width: 100%;
    min-width: 320px;
    max-width: 380px;
}

/* =========================================================================
   10. TinyMCE editor (toolbar — parent document, outside iframe)
   ========================================================================= */

/* Editor frame aligned with the form fields */
.tox.tox-tinymce {
    border-radius: var(--bs-border-radius) !important;
    border-color: var(--bs-border-color) !important;
}

/* TinyMCE "promotion / Upgrade" slot (white frame in the top right):
   its container stays rendered even with promotion:false → we remove it completely. */
.tox .tox-promotion,
.tox .tox-promotion-link {
    display: none !important;
}

/* Toolbar buttons: hover and active state in brand colors */
.tox .tox-tbtn:hover {
    background: rgba(var(--ga-blue-rgb), .08) !important;
}
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
    background: rgba(var(--ga-blue-rgb), .16) !important;
}
.tox .tox-tbtn--enabled svg,
.tox .tox-tbtn--enabled:hover svg {
    fill: var(--ga-blue) !important;
}
/* Focus ring of the editing area in brand blue */
.tox .tox-edit-area::before {
    border-color: var(--ga-blue) !important;
}

/* ---- Dark mode: COMPLETE repaint of the oxide surfaces (the skin stays light) ----
   (the editable area background is handled in tiny_editor.css via body.ca-theme-dark) */
[data-bs-theme="dark"] .tox.tox-tinymce {
    border-color: rgba(255, 255, 255, .15) !important;
}
/* Surfaces: menu bar, toolbar, status */
[data-bs-theme="dark"] .tox .tox-editor-header,
[data-bs-theme="dark"] .tox .tox-menubar,
[data-bs-theme="dark"] .tox .tox-toolbar,
[data-bs-theme="dark"] .tox .tox-toolbar__primary,
[data-bs-theme="dark"] .tox .tox-toolbar__overflow,
[data-bs-theme="dark"] .tox .tox-statusbar {
    background-color: #2b3035 !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

/* Buttons (toolbar + menu + split): TRANSPARENT background, light text/icons */
[data-bs-theme="dark"] .tox .tox-tbtn,
[data-bs-theme="dark"] .tox .tox-mbtn,
[data-bs-theme="dark"] .tox .tox-split-button {
    background: transparent !important;
    color: #dde3ea !important;
    border-color: transparent !important;
}
[data-bs-theme="dark"] .tox .tox-tbtn svg,
[data-bs-theme="dark"] .tox .tox-mbtn svg {
    fill: #dde3ea !important;
}
[data-bs-theme="dark"] .tox .tox-tbtn span,
[data-bs-theme="dark"] .tox .tox-tbtn__select-label,
[data-bs-theme="dark"] .tox .tox-mbtn__select-label {
    color: #dde3ea !important;
}

/* Hover / active state */
[data-bs-theme="dark"] .tox .tox-tbtn:hover,
[data-bs-theme="dark"] .tox .tox-mbtn:hover,
[data-bs-theme="dark"] .tox .tox-split-button:hover {
    background: rgba(255, 255, 255, .10) !important;
}
[data-bs-theme="dark"] .tox .tox-tbtn--enabled,
[data-bs-theme="dark"] .tox .tox-tbtn--enabled:hover {
    background: rgba(111, 179, 245, .22) !important;
}
[data-bs-theme="dark"] .tox .tox-tbtn--enabled svg {
    fill: #6fb3f5 !important;
}

/* Group separators + status bar */
[data-bs-theme="dark"] .tox .tox-toolbar__group {
    border-color: rgba(255, 255, 255, .08) !important;
}
[data-bs-theme="dark"] .tox .tox-statusbar,
[data-bs-theme="dark"] .tox .tox-statusbar a,
[data-bs-theme="dark"] .tox .tox-statusbar__wordcount,
[data-bs-theme="dark"] .tox .tox-statusbar__path-item {
    color: #aeb6bf !important;
}

/* Dropdown menus (File / Edit… + toolbar lists: Format, lists,
   alignment…) rendered at the body level (.tox-tinymce-aux) */
[data-bs-theme="dark"] .tox .tox-menu,
[data-bs-theme="dark"] .tox .tox-collection,
[data-bs-theme="dark"] .tox .tox-collection--list,
[data-bs-theme="dark"] .tox .tox-collection--grid,
[data-bs-theme="dark"] .tox .tox-collection--toolbar {
    background-color: #2b3035 !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
[data-bs-theme="dark"] .tox .tox-collection__group {
    border-color: rgba(255, 255, 255, .10) !important;
}
[data-bs-theme="dark"] .tox .tox-collection__item {
    background-color: transparent !important;
    color: #dde3ea !important;
}
[data-bs-theme="dark"] .tox .tox-collection__item-label,
[data-bs-theme="dark"] .tox .tox-collection__item-caret,
[data-bs-theme="dark"] .tox .tox-collection__item-accessory {
    color: #dde3ea !important;
}
[data-bs-theme="dark"] .tox .tox-collection__item-accessory {
    color: #aeb6bf !important;
}
[data-bs-theme="dark"] .tox .tox-collection__item svg { fill: #dde3ea !important; }
[data-bs-theme="dark"] .tox .tox-collection__item--active {
    background-color: rgba(111, 179, 245, .22) !important;
}
[data-bs-theme="dark"] .tox .tox-collection__item--enabled {
    background-color: rgba(111, 179, 245, .14) !important;
}

/* ---- Dark mode: dialog boxes (Help, Link, Table…) ---- */
[data-bs-theme="dark"] .tox .tox-dialog {
    background-color: #2b3035 !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: #dde3ea !important;
}
[data-bs-theme="dark"] .tox .tox-dialog__header,
[data-bs-theme="dark"] .tox .tox-dialog__footer,
[data-bs-theme="dark"] .tox .tox-dialog__body,
[data-bs-theme="dark"] .tox .tox-dialog__body-nav {
    background-color: #2b3035 !important;
    color: #dde3ea !important;
    border-color: rgba(255, 255, 255, .10) !important;
}
[data-bs-theme="dark"] .tox .tox-dialog__title,
[data-bs-theme="dark"] .tox .tox-dialog__body-content,
[data-bs-theme="dark"] .tox .tox-dialog__body-content p,
[data-bs-theme="dark"] .tox .tox-dialog__body-content h1,
[data-bs-theme="dark"] .tox .tox-dialog__body-content h2 {
    color: #dde3ea !important;
}
/* Left tabs (Help) */
[data-bs-theme="dark"] .tox .tox-dialog__body-nav-item {
    color: #aeb6bf !important;
}
[data-bs-theme="dark"] .tox .tox-dialog__body-nav-item--active {
    color: #6fb3f5 !important;
    border-bottom-color: #6fb3f5 !important;
}
/* Help tables */
[data-bs-theme="dark"] .tox .tox-dialog__table th,
[data-bs-theme="dark"] .tox .tox-dialog__table td {
    color: #dde3ea !important;
    border-color: rgba(255, 255, 255, .10) !important;
}
/* Links in dialogs */
[data-bs-theme="dark"] .tox .tox-dialog a { color: #6fb3f5 !important; }
/* Dialog form fields (Link, etc.) */
[data-bs-theme="dark"] .tox .tox-label,
[data-bs-theme="dark"] .tox .tox-form__group > label { color: #dde3ea !important; }
[data-bs-theme="dark"] .tox .tox-textfield,
[data-bs-theme="dark"] .tox .tox-textarea,
[data-bs-theme="dark"] .tox .tox-listbox,
[data-bs-theme="dark"] .tox .tox-listbox--select,
[data-bs-theme="dark"] .tox .tox-listbox__select,
[data-bs-theme="dark"] .tox .tox-selectfield select {
    background-color: #1f2937 !important;
    color: #dde3ea !important;
    border-color: rgba(255, 255, 255, .2) !important;
}
/* Listbox (dropdown buttons "Anchors", "Open link in…"): label + chevron in light */
[data-bs-theme="dark"] .tox .tox-listbox__select-label {
    color: #dde3ea !important;
}
[data-bs-theme="dark"] .tox .tox-listbox__select-chevron svg {
    fill: #dde3ea !important;
}

/* =========================================================================
   11. File upload (Dropzone)
   ========================================================================= */

/* Drop zone: branded dashed border, centered, interactive states.
   (form.dropzone + !important to beat the `border: 1px solid grey !important` from styles.css) */
form.dropzone {
    border: 2px dashed rgba(var(--ga-blue-rgb), .45) !important;
    border-radius: var(--bs-border-radius-lg);
    background: rgba(var(--ga-blue-rgb), .03);
    min-height: 220px;
    padding: 2.75rem 1.5rem;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
    cursor: pointer;
}
form.dropzone:hover {
    border-color: var(--ga-blue) !important;
    background: rgba(var(--ga-blue-rgb), .07);
}
/* Hover during a file drag-and-drop */
form.dropzone.dz-drag-hover {
    border-color: var(--ga-blue) !important;
    border-style: solid !important;
    background: rgba(var(--ga-blue-rgb), .12);
    transform: scale(1.005);
}

/* Prompt message: cloud icon + text hierarchy */
.dropzone .dz-message {
    margin: 0;
    text-align: center;
    color: var(--bs-secondary-color);
}
.dropzone .dz-message::before {
    content: "\f574";                 /* FontAwesome 5: cloud-upload-alt */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: block;
    font-size: 2.75rem;
    color: var(--ga-blue);
    margin-bottom: .75rem;
    transition: transform .18s ease;
}
form.dropzone:hover .dz-message::before { transform: translateY(-3px); }
.dropzone .dz-message p { margin: 0 0 .25rem; }
.dropzone .dz-message p:first-of-type {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--bs-body-color);
    letter-spacing: .3px;
}
.dropzone .dz-message p:not(:first-of-type) { font-size: .85rem; }

/* Thumbnails of dropped files */
.dropzone .dz-preview .dz-image { border-radius: var(--bs-border-radius); }
.dropzone .dz-preview .dz-progress .dz-upload { background: var(--ga-blue) !important; }
.dropzone .dz-preview .dz-success-mark { color: var(--bs-success); }
.dropzone .dz-preview .dz-error-mark { color: var(--bs-danger); }
.dropzone .dz-preview .dz-details { border-radius: var(--bs-border-radius); }

/* Dark mode */
[data-bs-theme="dark"] form.dropzone {
    background: rgba(var(--ga-blue-rgb), .06);
    border-color: rgba(111, 179, 245, .4) !important;
}
[data-bs-theme="dark"] form.dropzone:hover,
[data-bs-theme="dark"] form.dropzone.dz-drag-hover {
    border-color: #6fb3f5 !important;
    background: rgba(111, 179, 245, .12);
}
[data-bs-theme="dark"] .dropzone .dz-message::before { color: #6fb3f5; }

/* =========================================================================
   12. Thumbnails of the selection modal (#vignetteModal)
       Same interaction as the case tiles: lift + shadow + zoom + border
   ========================================================================= */
#vignetteModal .form-check-label {
    display: inline-block;
    overflow: hidden;                 /* keeps the image zoom inside the frame */
    border-radius: var(--bs-border-radius-lg);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
#vignetteModal .form-check-label:hover {
    transform: translateY(-3px);
    box-shadow: var(--ga-shadow);
}
#vignetteModal .img-thumbnail {
    display: block;
    transition: transform .35s ease, border-color .2s ease;
}
#vignetteModal .form-check-label:hover .img-thumbnail {
    transform: scale(1.06);
    border-color: rgba(var(--ga-blue-rgb), .5);
}
/* keeps the radio button above the zoomed image (otherwise it disappears on hover) */
#vignetteModal .form-check-input {
    z-index: 3;
}

/* Thumbnail on the case edit page: image rounded at the bottom too (top+bottom corners),
   with a slight gap before the "Choose a thumbnail" button */
.card:has(> #change_case_vignette) .card-img-top {
    border-radius: var(--bs-border-radius-lg);
}
.card:has(> #change_case_vignette) > #change_case_vignette {
    margin-top: .4rem;
}

/* =========================================================================
   13. Light/dark theme switcher — sun/moon icons in orange
   ========================================================================= */
.bd-mode-toggle #bd-theme .theme-icon-active i,
.bd-mode-toggle .dropdown-item .theme-icon i {
    color: var(--ga-orange) !important;
}

/* =========================================================================
   14. Toasts — neutral surface + colored left rule (instead of a solid fill)
       (Bootstrap's text-bg-* is !important → we override with specificity + !important)
   ========================================================================= */
.toast-container .toast {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid rgba(16, 32, 53, .10);
    border-left: 7px solid var(--ga-blue);     /* default accent (primary) */
    border-radius: var(--bs-border-radius);
    box-shadow: var(--ga-shadow);
}
.toast-container .toast .toast-body {
    color: var(--bs-body-color);
}
.toast-container .toast-header {
    background-color: transparent;
    border-bottom-color: rgba(16, 32, 53, .08);
}
.toast-container .toast-header strong {
    color: var(--ga-blue);
}

/* Accent color (left rule) according to the message type */
.toast-container .toast.text-bg-info    { border-left-color: var(--ga-sky); }
.toast-container .toast.text-bg-success { border-left-color: var(--bs-success); }
.toast-container .toast.text-bg-warning { border-left-color: var(--bs-warning); }
.toast-container .toast.text-bg-danger,
.toast-container .toast.text-bg-error   { border-left-color: var(--bs-danger); }

/* Dark mode */
/* we do NOT touch border-left-color here (the border-color shorthand would override it → rule lost) */
[data-bs-theme="dark"] .toast-container .toast {
    border-top-color: rgba(255, 255, 255, .10);
    border-right-color: rgba(255, 255, 255, .10);
    border-bottom-color: rgba(255, 255, 255, .10);
}
[data-bs-theme="dark"] .toast-container .toast-header { border-bottom-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .toast-container .toast-header strong { color: #6fb3f5; }

/* =========================================================================
   15. Date picker (daterangepicker) — brand selection color + dark theme
   ========================================================================= */

/* Harmonizing the selection color (original blue #357ebd → brand blue), both modes.
   !important because daterangepicker.css is loaded after theme.css (footer_resources). */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
    background-color: var(--ga-blue) !important;
    color: #fff !important;
}

/* ---- Dark mode ---- */
[data-bs-theme="dark"] .daterangepicker {
    background-color: #2b3035;
    border-color: rgba(255, 255, 255, .15);
    color: #dde3ea;
}
[data-bs-theme="dark"] .daterangepicker:after { border-bottom-color: #2b3035; }
[data-bs-theme="dark"] .daterangepicker:before { border-bottom-color: rgba(255, 255, 255, .2); }
[data-bs-theme="dark"] .daterangepicker .calendar-table {
    background-color: #2b3035;
    border-color: #2b3035;
}
[data-bs-theme="dark"] .daterangepicker td.available:hover,
[data-bs-theme="dark"] .daterangepicker th.available:hover {
    background-color: rgba(255, 255, 255, .10);
}
[data-bs-theme="dark"] .daterangepicker td.off,
[data-bs-theme="dark"] .daterangepicker td.off.in-range,
[data-bs-theme="dark"] .daterangepicker td.off.start-date,
[data-bs-theme="dark"] .daterangepicker td.off.end-date {
    background-color: #2b3035;
    color: #6c757d;
}
[data-bs-theme="dark"] .daterangepicker td.in-range {
    background-color: rgba(var(--ga-blue-rgb), .20);
    color: #dde3ea;
}
[data-bs-theme="dark"] .daterangepicker .calendar-table .next span,
[data-bs-theme="dark"] .daterangepicker .calendar-table .prev span {
    border-color: #dde3ea;     /* navigation arrows < > */
}
[data-bs-theme="dark"] .daterangepicker select.monthselect,
[data-bs-theme="dark"] .daterangepicker select.yearselect,
[data-bs-theme="dark"] .daterangepicker select.hourselect,
[data-bs-theme="dark"] .daterangepicker select.minuteselect,
[data-bs-theme="dark"] .daterangepicker select.secondselect,
[data-bs-theme="dark"] .daterangepicker select.ampmselect {
    background-color: #1f2937;
    color: #dde3ea;
    border-color: rgba(255, 255, 255, .2);
}
[data-bs-theme="dark"] .daterangepicker .drp-buttons,
[data-bs-theme="dark"] .daterangepicker .ranges {
    border-color: rgba(255, 255, 255, .12);
}
[data-bs-theme="dark"] .daterangepicker .ranges li { color: #dde3ea; }
[data-bs-theme="dark"] .daterangepicker .ranges li:hover { background-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .daterangepicker .drp-selected { color: #dde3ea; }

/* =========================================================================
   16. Editing studies / series — highlight on hover
       (study = .p-2 enclosing the study row + its series; series = .series_form)
   ========================================================================= */
.customize_studies_forms > .p-2,
.customize_studies_forms .series_form {
    border-radius: var(--bs-border-radius);
    transition: background-color .15s ease, box-shadow .15s ease;
}
.customize_studies_forms .series_form {
    padding: .35rem .5rem;          /* a little room so the background can breathe */
}

/* Hovering the STUDY row → the whole study (with its series) is highlighted.
   The :has targets the block when ITS study row (direct child) is hovered,
   not when a series is hovered. */
.customize_studies_forms > .p-2:has(> .study_form:hover) {
    background-color: rgba(var(--ga-blue-rgb), .07);
    box-shadow: 0 0 0 1px rgba(var(--ga-blue-rgb), .15);
}

/* Hovering a SERIES → only that series is highlighted (slightly stronger background) */
.customize_studies_forms .series_form:hover {
    background-color: rgba(var(--ga-blue-rgb), .13);
    box-shadow: 0 0 0 1px rgba(var(--ga-blue-rgb), .22);
}

/* Dark mode: slightly brighter highlights to stay visible */
[data-bs-theme="dark"] .customize_studies_forms > .p-2:has(> .study_form:hover) {
    background-color: rgba(111, 179, 245, .10);
    box-shadow: 0 0 0 1px rgba(111, 179, 245, .22);
}
[data-bs-theme="dark"] .customize_studies_forms .series_form:hover {
    background-color: rgba(111, 179, 245, .18);
    box-shadow: 0 0 0 1px rgba(111, 179, 245, .30);
}

/* =========================================================================
   17. Case list — search / sort bar
   ========================================================================= */
/* space between the search field and the "Order by" group */
#searchForm {
    column-gap: 1rem;
}
/* The 1st child of the "Order by" group is a <label visually-hidden> → Bootstrap
   squares the left corner of the label. We restore the rounding on the left. */
#searchForm .input-group:has(#orderBy) > .input-group-text {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

/* =========================================================================
   18. "About" modal — brand header
   ========================================================================= */
.about-modal-header {
    background: linear-gradient(135deg, var(--ga-blue) 0%, var(--ga-blue-active) 100%);
    padding: 2.25rem 1.5rem 1.75rem;
}
.about-modal-header .about-logo {
    max-width: 220px;
    width: 70%;
    height: auto;
}
.about-title {
    font-family: 'Barlow Condensed', 'Archivo', sans-serif;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ga-blue);
}
[data-bs-theme="dark"] .about-title {
    color: #6fb3f5;
}