/* ==========================================================
   Theme tokens
   ----------------------------------------------------------
   Content-area colors only (body, cards, tables, headings).
   The navbar, footer and sidebar are deliberately left as
   fixed dark "chrome" in both themes - Bootstrap's navbar-dark
   utility classes assume a dark background, and keeping the
   top bar / sidebar dark regardless of theme (like Slack or
   many dashboard apps) avoids that mismatch entirely.

   :root values below match the colors this app has always
   used, so an existing Dark-theme tenant sees zero visual
   change. The [data-theme="light"] block only takes effect
   for a tenant whose admin has switched to Light in
   Settings > Admin > General Settings.
   ========================================================== */

:root {
    --bg-page: #111827;
    --bg-surface: #1f2937;
    --bg-surface-alt: #111827;
    --border-color: #374151;
    --border-strong: #4b5563;
    --text-primary: #e5e7eb;
    --text-heading: #f9fafb;
    --text-muted: #9ca3af;
    --accent-text: #38bdf8;
    --hover-surface: #374151;
    --hover-text: #ffffff;
    --shadow-resting: 0 1px 2px rgba(0, 0, 0, .18), 0 1px 1px rgba(0, 0, 0, .06);
    --shadow-hover: 0 10px 24px rgba(0, 0, 0, .28);
    --tint-accent: rgba(56, 189, 248, .12);
}

/* Light theme - reworked from the original #f3f4f6-page/#ffffff-card
   pairing, which sat too close in value to each other (plus every
   border/shadow below was tuned for a dark surface, so it barely
   showed against white) - the combination read as "just a lot of
   white" rather than a deliberately designed light theme. --bg-page
   is now a cool, slightly blue-tinted canvas a visible step away from
   --bg-surface's white, --bg-surface-alt is its own tone rather than
   literally equal to --bg-page (so a card header or table head row
   still reads as a step apart from a plain white card body), and
   --shadow-resting/--shadow-hover/--tint-accent give this theme its
   own, stronger values so cards/icons have actual depth and a touch
   of brand color instead of flat gray boxes. */
:root[data-theme="light"] {
    --bg-page: #e8edf4;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f1f5f9;
    --border-color: #dde3ea;
    --border-strong: #c3ccd6;
    --text-primary: #1e293b;
    --text-heading: #0f172a;
    --text-muted: #64748b;
    --accent-text: #0369a1;
    --hover-surface: #e2e8f0;
    --hover-text: #0f172a;
    --shadow-resting: 0 1px 3px rgba(30, 41, 59, .08), 0 1px 2px rgba(30, 41, 59, .06);
    --shadow-hover: 0 12px 28px rgba(30, 41, 59, .14);
    --tint-accent: rgba(2, 132, 199, .10);
}


html {
    font-size: 14px;
    height: auto;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html,
body {
    height: auto;
    min-height: auto;
}

body {
    margin: 0;
    background-color: var(--bg-page);
    color: var(--text-primary);
}


/* Navbar - always dark chrome, regardless of theme (see note above) */

.navbar {
    background-color: #1f2937 !important;
    border-bottom: 1px solid #374151;
}


.navbar-brand {
    color: #38bdf8 !important;
}


.navbar .nav-link {
    color: #d1d5db !important;
    position: relative;
    transition: color .2s ease;
}


    .navbar .nav-link:hover {
        color: #38bdf8 !important;
    }


/* Animated underline on hover. ::before (not ::after) deliberately -
   Bootstrap's .dropdown-toggle already uses ::after for the caret icon,
   so using that pseudo-element here would blank out the caret on every
   dropdown nav item (Clients, Endpoints, Service Desk, etc). */
.navbar .nav-link::before {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 2px;
    height: 2px;
    background-color: #38bdf8;
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform .2s ease;
}

    .navbar .nav-link:hover::before {
        transform: scaleX(1);
    }


/* "You are here" - which section the current page belongs to (set in
   _Layout.cshtml via NavActive). Reuses the exact same color/underline
   as :hover above, so the active section always reads as "selected"
   even without the mouse over it - it just won't animate in, since
   scaleX(1) is its resting state rather than a transition target. */
.navbar .nav-link.active {
    color: #38bdf8 !important;
}

    .navbar .nav-link.active::before {
        transform: scaleX(1);
    }


/* Top navbar dropdown menus (Clients, Endpoints, Service Desk, etc) -
   Bootstrap's dropdown-menu-dark already supplies the hover background
   color; this just smooths it into a transition and adds a small
   indent animation so hovering feels alive rather than an instant flip. */
.navbar .dropdown-menu .dropdown-item {
    transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}

    .navbar .dropdown-menu .dropdown-item:hover {
        padding-left: 1.25rem;
    }


/* Main page wrapper */

.page-wrapper {
}


.main-content {
    padding-top: 25px;
    padding-bottom: 60px;
}


/* Dashboard container */

.container-fluid {
    padding-left: 25px;
    padding-right: 25px;
}


/* Cards */

.card {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px;
}


.card-body {
    background-color: var(--bg-surface) !important;
}


.card:hover {
    transform: translateY(-3px);
    transition: 0.2s;
}


/* While a Bootstrap modal is open, cards sitting behind the backdrop
   (ticket-count tiles, the query-widget card, etc.) can still receive
   :hover as the mouse crosses them, continuously re-triggering this
   transform/transition. On some Chromium builds that repeatedly
   re-triggered transform, happening behind a fixed, semi-transparent
   backdrop, causes visible flicker/resize artifacts in whatever is
   rendered on top (e.g. a modal with a native <select> in it). Disable
   the hover-lift while any modal is open so nothing behind the
   backdrop keeps animating while the user is interacting with the
   modal itself. */
body.modal-open .card:hover {
    transform: none;
    transition: none;
}


/* Query-filter widget's "Filters" collapse toggle (see
   _QueryFilterWidget.cshtml) - rotate the chevron when expanded. */
.qf-toggle-btn .qf-toggle-icon {
    display: inline-block;
    transition: transform 0.15s ease;
}

.qf-toggle-btn[aria-expanded="true"] .qf-toggle-icon {
    transform: rotate(90deg);
}


/* The "Set conditions" modal (.qf-modal) is a position:fixed box
   covering the whole viewport (inset:0), and Bootstrap centers the
   dialog inside it with margin:auto. On desktop that centers it
   against the FULL window width, including the 210px
   .poseidon-sidebar on the left (see dashboard.css), so the dialog
   visibly sits left of the page's actual content area. Pulling the
   modal's own left edge in by the sidebar's width makes it center
   against the content area instead. Only applies above the
   dashboard.css breakpoint (991.98px) where the sidebar is a left
   column rather than stacked on top. */
@media (min-width: 992px) {
    .qf-modal {
        left: 210px;
    }
}


/* Card headers */

.card-header {
    background-color: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}


/* Text */

.text-muted {
    color: var(--text-muted) !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-heading);
}


/* Buttons - kept as a fixed brand blue in both themes; the existing
   values already read fine against both a dark and a white background */

.btn-primary {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
}


.btn-outline-primary {
    color: #38bdf8 !important;
    border-color: #38bdf8 !important;
}


    .btn-outline-primary:hover {
        background-color: #38bdf8 !important;
        color: #111827 !important;
    }


/* Tables - Dashboard Recent Tickets / Recent Assets, and Dashboard
   widget tables (e.g. the "Tickets" list-mode search widget, which
   renders _TicketTable.cshtml inside .dash-widget-body rather than
   a .card - see _Search.cshtml / _Widget.cshtml) */

.card .table,
.dash-widget-body .table {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}


    .card .table thead th,
    .dash-widget-body .table thead th {
        background-color: var(--bg-surface-alt) !important;
        color: var(--text-muted) !important;
        border-color: var(--border-color) !important;
        border-bottom: 2px solid var(--border-strong) !important;
    }


    .card .table tbody tr,
    .dash-widget-body .table tbody tr {
        background-color: var(--bg-surface) !important;
    }


    .card .table tbody td,
    .dash-widget-body .table tbody td {
        background-color: var(--bg-surface) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }


.card .table-hover tbody tr:hover td,
.dash-widget-body .table-hover tbody tr:hover td {
    background-color: var(--hover-surface) !important;
}


/* All tables */

.table {
    color: var(--text-primary) !important;
}


    .table td,
    .table th {
        border-color: var(--border-color) !important;
    }


/* Live ticket-queue toast notifications (wwwroot/js/ticket-toasts.js,
   container in _Layout.cshtml) - same surface/border tokens as .card
   above, so a toast reads as part of this app's own UI in both themes
   instead of Bootstrap's stock default toast styling. */
.ticket-toast {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

.ticket-toast .toast-header {
    background-color: var(--bg-surface-alt) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.ticket-toast .toast-header .text-muted,
.ticket-toast .small.text-muted {
    color: var(--text-muted) !important;
}

.ticket-toast:hover {
    border-color: var(--border-strong) !important;
}


/* Footer - always dark chrome, regardless of theme (see note above) */

.footer {
    position: static !important;
    background-color: #1f2937;
    color: #9ca3af;
    border-top: 1px solid #374151;
    padding: 20px 0;
    width: 100%;
    margin-top: 40px;
}


/* PoseidonOne administration and knowledge base */

/* Sits in the dark navbar, so stays dark chrome regardless of theme */
.admin-nav-button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #4b5563;
    border-radius: 10px;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 19px;
    transition: .15s ease;
}
.admin-nav-button:hover {
    color: #fff;
    background: #374151;
    border-color: #6b7280;
    transform: none;
}

/* The theme toggle is a <button> (it submits a form), unlike its
   sibling icons which are plain links - reset the browser's own
   button chrome so it matches them exactly. */
button.admin-nav-button {
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.admin-tile, .kb-card {
    display: block;
    height: 100%;
    padding: 22px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    color: var(--text-primary);
    text-decoration: none;
    transition: .15s ease;
}
.admin-tile:hover, .kb-card:hover {
    color: var(--hover-text);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}
.admin-tile {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.admin-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--tint-accent);
    font-size: 22px;
}
.admin-tile h4, .kb-card h4 {
    margin: 0 0 7px;
}
.admin-tile p, .kb-card p {
    margin: 0 0 10px;
    color: var(--text-muted);
}
.admin-tile span {
    font-size: .85rem;
    color: var(--accent-text);
}
.kb-card .kb-category, .kb-detail .kb-category {
    color: var(--accent-text);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.kb-card h4 {
    margin-top: 18px;
}
.kb-editor {
    min-height: 360px;
    font-family: inherit;
}
.kb-content {
    white-space: pre-wrap;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Ticket Activity Timeline (Views/Tickets/Details.cshtml) - a
   connecting line down the left with a colored dot per entry, in
   place of the plain stacked boxes this used to be. Reuses the same
   theme tokens as everything else in this stylesheet, so it reads
   correctly in both themes without any colors of its own. */
.ticket-timeline {
    position: relative;
    padding-left: 1.75rem;
    margin: 0;
}

.ticket-timeline::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 2px;
    background-color: var(--border-color);
}

.ticket-timeline-item {
    position: relative;
    padding-bottom: 1.25rem;
}

.ticket-timeline-item:last-child {
    padding-bottom: 0;
}

.ticket-timeline-dot {
    position: absolute;
    left: -1.75rem;
    top: 0.3rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 2px solid var(--bg-surface);
}

.ticket-timeline-content {
    background-color: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.65rem 0.9rem;
}


/* ==========================================================
   Buttons - general polish
   ----------------------------------------------------------
   Bootstrap's buttons work, but sit flush against the app's
   more rounded, elevated look everywhere else (.card and
   .admin-tile above are both 12-14px radius with a hover
   lift). This brings every button - any Bootstrap variant/
   size, an <a> or a <button>, e.g. the Suspend/Reactivate
   <form> buttons on Tenants/Index.cshtml - in line with that,
   without touching a single view: it's purely extending the
   .btn/.btn-sm classes Bootstrap's own markup already uses
   everywhere in the app. */

.btn {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: color .15s ease-in-out, background-color .15s ease-in-out,
        border-color .15s ease-in-out, box-shadow .15s ease-in-out,
        transform .15s ease-in-out;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Same flicker-avoidance as .card:hover above (see that comment
   for why) - a button sitting in a card behind an open modal's
   backdrop shouldn't keep re-triggering its own hover lift. */
body.modal-open .btn:hover {
    transform: none;
    box-shadow: none;
}

/* .btn-sm is what nearly every Edit/Delete/View/Export-style
   action button in a table row or card header uses - Bootstrap's
   own padding there reads as a thin text link more than a
   button. A little more room make it a more deliberate target. */
.btn-sm {
    padding: .32rem .7rem;
}

/* Most action-button clusters in this app (a table row's Edit/
   Delete/View, a card header's Edit/Export/Back, a toggle
   <form> sat next to plain links) are just written as bare
   adjacent elements with no gap/flex-wrap utility on their
   wrapper - relying on the sliver of whitespace HTML collapses
   between them. A small, consistent margin instead of that
   accidental sliver keeps every such cluster app-wide looking
   deliberately spaced, with no markup changes needed. Where a
   view already sets its own gap-* utility (e.g. Tenants/Index's
   action cell), this adds a little on top rather than fighting
   it - a bit more breathing room, never less. */
.btn + .btn,
.btn + form,
form + .btn,
form + form {
    margin-left: .4rem;
}


/* ==========================================================
   Settings description box
   ----------------------------------------------------------
   A short "here's what this section controls" callout, meant
   to sit right under a settings card/page's heading and above
   its actual form fields - see Views/Settings/Index.cshtml and
   its partials, Views/Settings/Permissions.cshtml and Views/
   AgentSettings/Index.cshtml. Deliberately not .alert-info
   (used elsewhere for a dynamic save/error message) - this is
   static help text, not a notification, so it gets its own
   calmer, left-accented look instead of competing with those.
   ========================================================== */

.settings-description {
    background-color: var(--bg-surface-alt);
    border-left: 3px solid var(--accent-text);
    border-radius: 6px;
    padding: .65rem 1rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    font-size: .9rem;
}

.settings-description:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   Visual refresh - typography, depth, and dark-theme coverage
   for the rest of Bootstrap
   ----------------------------------------------------------
   Everything above covers .card, .table, buttons, the navbar/
   sidebar/footer chrome, and a couple of page-specific forms
   (Change Requests, Runbooks - see dashboard.css). Everywhere
   else - Settings' own forms, every admin Create/Edit page,
   plain dropdown menus, modals, list groups, alerts,
   pagination, nav tabs, accordions - still fell through to
   Bootstrap's stock light-theme defaults, sitting oddly inside
   this app's dark cards (the admin list on Settings/Index.cshtml
   even needs a manual "bg-transparent" class to avoid it).
   Everything below is new, reuses the exact same tokens defined
   at the top of this file, and follows both themes the same way
   the rest of this stylesheet already does.
   ========================================================== */

/* Inter itself is loaded from Google Fonts via a <link> in
   _Layout.cshtml's <head>, not an @import here - an @import only
   takes effect as the very first rule in a stylesheet, before
   even :root above, so a <link> next to the other stylesheet tags
   is both simpler and avoids that footgun entirely. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ---- Depth: a quiet resting shadow, a bit more on hover.
   No new colors - just makes the existing cards/tiles feel lifted
   off the page instead of resting on a flat border alone. ---- */
.card,
.admin-tile,
.kb-card,
.stat-tile {
    box-shadow: var(--shadow-resting);
}

.card:hover,
.admin-tile:hover,
.kb-card:hover,
.stat-tile:hover {
    box-shadow: var(--shadow-hover);
}

/* ---- Primary buttons: same brand blue, a touch of depth ---- */
.btn-primary {
    background-image: linear-gradient(180deg, #0ea5e9, #0284c7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.btn-primary:hover:not(:disabled) {
    background-image: linear-gradient(180deg, #38bdf8, #0284c7);
}

/* ---- Consistent brand-colored focus rings everywhere, replacing
   Bootstrap's default blue ---- */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .35);
}

/* ---- Form controls: today these only have dark styling on a
   couple of specific pages (Change Requests, Runbooks) - everywhere
   else (Settings, Tickets/Create, every admin Create/Edit form, the
   login screen) falls through to Bootstrap's plain light theme,
   sitting oddly on this app's dark cards. This covers all of them,
   everywhere, once. ---- */
.form-control,
.form-select {
    background-color: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 8px;
}
.form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--bg-surface-alt);
    border-color: var(--accent-text);
    color: var(--text-primary);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--bg-surface);
    color: var(--text-muted);
    opacity: .75;
}
.form-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: .88rem;
}
.form-text {
    color: var(--text-muted);
}

/* Bootstrap bakes the <select> caret as a fixed dark-gray inline SVG
   meant for a light background - it's nearly invisible on a dark
   one. Swap it for a light-colored version here; the Light-theme
   block near the bottom swaps it back. */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input {
    background-color: var(--bg-surface-alt);
    border: 1px solid var(--border-strong);
}
.form-check-input:checked {
    background-color: #0284c7;
    border-color: #0284c7;
}
.form-check-input:focus {
    border-color: var(--accent-text);
    box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .25);
}
.form-check-label {
    color: var(--text-primary);
}

.input-group-text {
    background-color: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

/* ---- Dropdown menus - the navbar's own menus already opt in to
   Bootstrap's .dropdown-menu-dark utility class, which is why they
   look fine today. Every OTHER dropdown in the app (export menus,
   bulk-action menus, filter menus) is a plain .dropdown-menu and
   falls through unstyled - this covers those without touching the
   navbar's own dark menus. ---- */
.dropdown-menu:not(.dropdown-menu-dark) {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.dropdown-menu:not(.dropdown-menu-dark) .dropdown-item {
    color: var(--text-primary);
}
.dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:hover,
.dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:focus {
    background-color: var(--hover-surface);
    color: var(--hover-text);
}
.dropdown-menu:not(.dropdown-menu-dark) .dropdown-item.active {
    background-color: #0284c7;
    color: #fff;
}
.dropdown-menu:not(.dropdown-menu-dark) .dropdown-divider {
    border-color: var(--border-color);
}
.dropdown-menu:not(.dropdown-menu-dark) .dropdown-header {
    color: var(--text-muted);
}

/* ---- Modals ---- */
.modal-content {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
.modal-header,
.modal-footer {
    border-color: var(--border-color);
}
/* Bootstrap's close-icon glyph is dark, meant for a light modal */
:root .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.8);
}

/* ---- List groups - currently need a manual "bg-transparent" added
   by hand everywhere they're used (e.g. the admin list on
   Settings/Index.cshtml) to avoid Bootstrap's plain white rows.
   This makes that the default so nothing needs the manual class. ---- */
.list-group-item {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.list-group-item.active {
    background-color: #0284c7;
    border-color: #0284c7;
    color: #fff;
}

/* ---- Alerts - keep Bootstrap's own semantic colors (info/success/
   warning/danger) but as a tinted wash against the dark surface
   instead of a solid pastel block, matching the existing
   .alert-banner recipe in dashboard.css ---- */
.alert-info {
    background-color: rgba(56, 189, 248, .12);
    border: 1px solid rgba(56, 189, 248, .35);
    color: var(--text-primary);
}
.alert-success {
    background-color: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .35);
    color: var(--text-primary);
}
.alert-warning {
    background-color: rgba(245, 158, 11, .14);
    border: 1px solid rgba(245, 158, 11, .4);
    color: var(--text-primary);
}
.alert-danger {
    background-color: rgba(220, 38, 38, .12);
    border: 1px solid rgba(220, 38, 38, .4);
    color: var(--text-primary);
}

/* ---- Pagination ---- */
.page-link {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.page-link:hover {
    background-color: var(--hover-surface);
    color: var(--hover-text);
}
.page-item.active .page-link {
    background-color: #0284c7;
    border-color: #0284c7;
}
.page-item.disabled .page-link {
    background-color: var(--bg-surface-alt);
    color: var(--text-muted);
}

/* ---- Nav tabs (Settings' System/Admin tabs, etc.) ---- */
.nav-tabs {
    border-bottom-color: var(--border-color);
}
.nav-tabs .nav-link {
    color: var(--text-muted);
    border-color: transparent;
}
.nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
}
.nav-tabs .nav-link.active {
    background-color: var(--bg-surface);
    border-color: var(--border-color) var(--border-color) var(--bg-surface);
    color: var(--text-heading);
}

/* ---- Accordions ---- */
.accordion-item {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}
.accordion-button {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}
.accordion-button:not(.collapsed) {
    background-color: var(--bg-surface-alt);
    color: var(--accent-text);
}
.accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(1.8);
}

/* ---- Thin scrollbar matching the dark chrome (WebKit/Chromium -
   Firefox keeps its own default, which is harmless) ---- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-page);
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ---- Light-theme swaps for the two hardcoded-dark bits above ---- */
:root[data-theme="light"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
:root[data-theme="light"] .btn-close,
:root[data-theme="light"] .accordion-button::after {
    filter: none;
}