/* ==========================================================================
   JAB — Single dark theme (teal accent, charcoal surfaces, 10px radius).
   Source of truth for all admin chrome and component cosmetics.
   ========================================================================== */

@font-face {
    font-family: 'Jost';
    src: url('/public/assets/webfonts/Jost-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* --- Design tokens -------------------------------------------------------- */
:root {
    color-scheme: dark;

    /* Surfaces */
    --vc-bg-dark:        #0f1115;
    --vc-bg-sidebar:     rgba(22, 24, 29, 0.85);
    --vc-bg-header:      rgba(22, 24, 29, 0.85);
    --vc-bg-card:        #1c1e24;
    --vc-bg-elevated:    #22252c;
    --vc-input-bg:       #15171d;
    --vc-input-focus:    #1c1f26;

    /* Text */
    --vc-text-primary:   #e8edf2;
    --vc-text-secondary: #9aa4b2;
    --vc-text-muted:     #6b7382;

    /* Lines */
    --vc-border:         rgba(255, 255, 255, 0.08);
    --vc-border-strong:  rgba(255, 255, 255, 0.14);
    --vc-table-hover:    rgba(255, 255, 255, 0.04);

    /* Accent (teal) */
    --vc-accent-primary:       #2EE8B5;
    --vc-accent-primary-hover: #25b991;
    --vc-accent-tint:          rgba(46, 232, 181, 0.10);
    --vc-accent-ring:          rgba(46, 232, 181, 0.25);

    /* Semantic */
    --vc-success: #00C853;
    --vc-warning: #F5A524;
    --vc-danger:  #FF5C5C;
    --vc-info:    #3FA9F5;

    /* Geometry */
    --vc-radius:   10px;
    --vc-radius-sm: 6px;
    --vc-radius-lg: 14px;

    /* Spacing scale */
    --vc-space-1: 4px;
    --vc-space-2: 8px;
    --vc-space-3: 12px;
    --vc-space-4: 16px;
    --vc-space-5: 24px;
    --vc-space-6: 32px;
    --vc-space-7: 48px;
    --vc-space-8: 64px;

    /* Type scale */
    --vc-text-xs:  12px;
    --vc-text-sm:  13px;
    --vc-text-md:  14px;
    --vc-text-lg:  16px;
    --vc-text-xl:  20px;
    --vc-text-2xl: 24px;
    --vc-text-3xl: 30px;

    /* Shadows */
    --vc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --vc-shadow:    0 6px 20px rgba(0, 0, 0, 0.35);
    --vc-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);

    /* Bootstrap overrides */
    --bs-body-bg: var(--vc-bg-dark);
    --bs-body-color: var(--vc-text-primary);
    --bs-border-color: var(--vc-border);
    --bs-link-color: var(--vc-accent-primary);
    --bs-link-hover-color: var(--vc-accent-primary-hover);
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--vc-bg-dark);
    color: var(--vc-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--vc-text-md);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--vc-text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1 { font-size: var(--vc-text-3xl); }
h2 { font-size: var(--vc-text-2xl); }
h3 { font-size: var(--vc-text-xl); }
h4 { font-size: var(--vc-text-lg); }
h5 { font-size: var(--vc-text-md); }
h6 { font-size: var(--vc-text-sm); }

p, label { color: var(--vc-text-primary); }
a { color: var(--vc-accent-primary); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--vc-accent-primary-hover); }
.text-muted, small.text-muted { color: var(--vc-text-secondary) !important; }

::selection { background: var(--vc-accent-tint); color: var(--vc-text-primary); }

:focus-visible {
    outline: 2px solid var(--vc-accent-primary);
    outline-offset: 2px;
    box-shadow: none;
}
/* But don't double-up on form controls — they already get an accent ring
   via .form-control:focus / .btn:focus rules below. */
.form-control:focus-visible,
.form-select:focus-visible,
.btn:focus-visible {
    outline: none;
}
#page-content-wrapper:focus-visible {
    outline: none;
}

/* --- Skip-to-content link (a11y) ----------------------------------------- */
.skip-to-content {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2000;
    padding: 8px 14px;
    background: var(--vc-bg-elevated);
    color: var(--vc-accent-primary);
    border: 1px solid var(--vc-accent-primary);
    border-radius: var(--vc-radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--vc-text-sm);
    transform: translateY(-150%);
    transition: transform 0.15s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--vc-accent-primary);
    outline-offset: 2px;
    color: var(--vc-accent-primary);
}

/* --- Layout & structure --------------------------------------------------- */
#wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

#main-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    background-color: var(--vc-bg-dark);
}

#page-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: var(--vc-bg-dark);
}

/* --- Top header ----------------------------------------------------------- */
.top-header {
    background-color: var(--vc-bg-header);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--vc-border);
    padding: 0 var(--vc-space-5);
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1040;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.top-header.scrolled {
    background-color: rgba(22, 24, 29, 0.95);
    border-bottom-color: var(--vc-border-strong);
}

.logo-wrapper {
    width: 42px;
    padding: 4px;
    cursor: pointer;
}
.bar { transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.top-bar { transition-delay: 0s; }
.mid-bar { transition-delay: 0.05s; }
.bot-bar { transition-delay: 0.1s; }

body.sidebar-open .logo-wrapper .top-bar { width: 45px; }
body.sidebar-open .logo-wrapper .mid-bar { width: 75px; }
body.sidebar-open .logo-wrapper .bot-bar { width: 100px; }
/* Hovering anywhere over the sidebar (any width, pinned or collapsed)
   replays the logo expand animation as a small "you're here" cue. */
body.sidebar-hover .logo-wrapper .top-bar { width: 45px; }
body.sidebar-hover .logo-wrapper .mid-bar { width: 75px; }
body.sidebar-hover .logo-wrapper .bot-bar { width: 100px; }

.header-brand {
    font-family: 'Jost', sans-serif;
    font-weight: 700;
    font-size: var(--vc-text-xl);
    color: #ffffff;
    text-decoration: none;
    margin-left: var(--vc-space-3);
    letter-spacing: 0.5px;
}
.header-brand:hover { color: #ffffff; }

/* --- Active brand/venue context picker (in top header) ------------------ */
.active-context {
    flex: 0 1 auto;
    min-width: 0;
}
.active-context-select.form-select {
    padding: 5px 28px 5px 10px;
    font-size: var(--vc-text-sm);
    background-color: var(--vc-input-bg);
    border-color: var(--vc-border);
    color: var(--vc-text-primary);
    min-width: 140px;
    max-width: 200px;
    text-overflow: ellipsis;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.active-context-select.form-select:hover {
    border-color: var(--vc-border-strong);
}
.active-context-select.form-select:focus {
    border-color: var(--vc-accent-primary);
    box-shadow: 0 0 0 3px var(--vc-accent-ring);
}
@media (max-width: 991px) {
    .active-context-select.form-select { min-width: 110px; max-width: 180px; }
}
/* Inside the bottom-offcanvas, selects render full width. */
#activeContextSheet .active-context-select.form-select {
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: 10px 14px;
    font-size: var(--vc-text-md);
}
/* Mobile trigger: a single filter icon with an accent dot when a scope is set. */
.active-context-trigger {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--vc-text-secondary);
}
.active-context-trigger:hover,
.active-context-trigger:focus-visible {
    color: var(--vc-accent-primary);
    background-color: var(--vc-table-hover);
}
.active-context-trigger-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--vc-accent-primary);
    box-shadow: 0 0 0 2px var(--vc-bg-header);
}

/* --- Filter-active indicator --------------------------------------------
   Reusable dot for any control that toggles a set of filters. Mark the
   element with .has-active-filter and the ::after dot lights up the corner
   so the user knows filters are currently constraining what they're seeing.
   Position: relative on the marked element so the dot anchors correctly. */
.filter-active-indicator,
.filter-trigger {
    position: relative;
}
.filter-active-indicator.has-active-filter::after,
.filter-trigger.has-active-filter::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--vc-accent-primary);
    box-shadow: 0 0 0 2px var(--vc-bg-card);
    pointer-events: none;
}

/* --- Dashboard customize modal ------------------------------------------ */
/* The Bootstrap flex-grow-1 + min-w-0 dance for text-truncate is fragile on
   narrow viewports — descriptions are pushing the remove/add buttons off the
   right edge. Force flex-basis to 0 and explicitly stop the buttons from
   shrinking, and on mobile let the descriptions wrap so the user can
   actually read them. */
.dashboard-enabled-list .list-group-item,
.dashboard-available-widget {
    overflow: hidden;
}
.dashboard-enabled-widget-row > .flex-grow-1,
.dashboard-available-widget > .flex-grow-1 {
    flex-basis: 0;
    min-width: 0;
}
.dashboard-enabled-widget-row > .btn,
.dashboard-available-widget > .btn,
.dashboard-enabled-widget-row > i,
.dashboard-available-widget > i {
    flex-shrink: 0;
}
/* The settings cog gets an accent tint when its panel is open so the user
   can see at a glance which widget they're editing. */
.dashboard-enabled-widget.is-settings-open .widget-settings-toggle {
    background-color: var(--vc-accent-tint);
    border-color: var(--vc-accent-primary);
    color: var(--vc-accent-primary);
}
.dashboard-enabled-widget .widget-settings-panel {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: var(--vc-border) !important;
}
@media (max-width: 575px) {
    /* Allow long descriptions to wrap rather than ellipsize away. Title
       stays single-line so the card stays scannable. */
    .dashboard-enabled-list .list-group-item .small.text-truncate,
    .dashboard-available-widget .small.text-truncate {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    /* Description gets in the way on narrow viewports — only the title and
       the controls matter for tap targets. */
    .dashboard-enabled-widget-row .small.text-vc-secondary {
        display: none;
    }
    /* WCAG-compliant tap targets on the row controls. */
    .dashboard-enabled-widget-row > .btn,
    .dashboard-available-widget > .btn {
        min-width: 38px;
        min-height: 38px;
    }
}

/* --- Omni search (top-bar quick find) ----------------------------------- */
.omni-search {
    position: relative;
    flex: 1 1 420px;
    max-width: 520px;
    margin: 0 var(--vc-space-4);
    min-width: 0;
}
.omni-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.omni-search-icon {
    position: absolute;
    left: 12px;
    color: var(--vc-text-muted);
    font-size: var(--vc-text-sm);
    pointer-events: none;
}
.omni-search-input.form-control {
    background-color: var(--vc-input-bg);
    border: 1px solid var(--vc-border);
    color: var(--vc-text-primary);
    padding: 7px 56px 7px 34px;
    font-size: var(--vc-text-sm);
    border-radius: var(--vc-radius);
    height: 36px;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.omni-search-input.form-control::placeholder { color: var(--vc-text-muted); }
.omni-search-input.form-control:hover { border-color: var(--vc-border-strong); }
.omni-search-input.form-control:focus {
    background-color: var(--vc-input-focus);
    border-color: var(--vc-accent-primary);
    box-shadow: 0 0 0 3px var(--vc-accent-ring);
    outline: none;
}
.omni-search-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--vc-bg-elevated);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius-sm);
    padding: 2px 6px;
    font-size: 11px;
    color: var(--vc-text-muted);
    font-family: inherit;
    pointer-events: none;
}
.omni-search-kbd-mod { margin-right: 2px; }
@media (max-width: 991px) {
    .omni-search { flex-basis: 220px; max-width: 260px; margin: 0 var(--vc-space-2); }
    .omni-search-kbd { display: none; }
    .omni-search-input.form-control { padding-right: 12px; }
}
@media (max-width: 575px) {
    .omni-search {
        flex-basis: 0;
        max-width: none;
        margin: 0 var(--vc-space-2);
    }
    .omni-search-input.form-control::placeholder { color: transparent; }
}

/* Results panel is detached from .omni-search (rendered outside the
   header) so the header's backdrop-filter doesn't create a containing
   block that breaks fixed/absolute positioning on mobile Safari.
   Final top/left/width are set by JS in positionResults(). */
.omni-search-results {
    position: fixed;
    top: 60px;
    left: 8px;
    right: 8px;
    background: var(--vc-bg-elevated);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow-lg);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1060;
    padding: 6px;
}
.omni-search-group-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    padding: 8px 10px 4px;
    font-weight: 600;
}
.omni-search-group-label:first-child { padding-top: 4px; }

.omni-search-item {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3);
    padding: 8px 10px;
    border-radius: var(--vc-radius-sm);
    color: var(--vc-text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.1s;
}
.omni-search-item:hover,
.omni-search-item.is-active {
    background: var(--vc-table-hover);
    color: var(--vc-text-primary);
}
.omni-search-item.is-active {
    background: var(--vc-accent-tint);
    outline: 1px solid var(--vc-accent-ring);
}
.omni-search-item-icon {
    width: 20px;
    text-align: center;
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    flex-shrink: 0;
}
.omni-search-item.is-active .omni-search-item-icon { color: var(--vc-accent-primary); }
.omni-search-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.omni-search-item-title {
    font-size: var(--vc-text-md);
    color: var(--vc-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.omni-search-item-sub {
    font-size: var(--vc-text-xs);
    color: var(--vc-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.omni-search-item mark {
    background: transparent;
    color: var(--vc-accent-primary);
    padding: 0;
    font-weight: 600;
}
.omni-search-item-type {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vc-text-muted);
    background: var(--vc-bg-card);
    border: 1px solid var(--vc-border);
    padding: 2px 6px;
    border-radius: 999px;
}
.omni-search-empty {
    padding: 16px 12px;
    text-align: center;
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
}

/* User menu */
.user-menu .dropdown-toggle {
    background: transparent;
    border: none;
    color: var(--vc-text-primary);
    display: flex;
    align-items: center;
    gap: var(--vc-space-2);
    padding: 6px 10px;
    border-radius: var(--vc-radius);
    transition: background-color 0.15s;
}
.user-menu .dropdown-toggle:hover { background-color: var(--vc-table-hover); }
.user-menu .dropdown-toggle::after { display: none; }

.dropdown-menu {
    background-color: var(--vc-bg-elevated) !important;
    border: 1px solid var(--vc-border) !important;
    border-radius: var(--vc-radius) !important;
    box-shadow: var(--vc-shadow-lg) !important;
    margin-top: 8px;
    padding: 6px;
    min-width: 180px;
    z-index: 1055;
    --bs-dropdown-bg: var(--vc-bg-elevated);
    --bs-dropdown-link-color: var(--vc-text-primary);
    --bs-dropdown-link-hover-color: var(--vc-text-primary);
    --bs-dropdown-link-hover-bg: var(--vc-table-hover);
    --bs-dropdown-color: var(--vc-text-primary);
    --bs-dropdown-border-color: var(--vc-border);
}
/* Bootstrap may scope dropdown-menu under data-bs-theme="dark" with its own vars — neutralize. */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--vc-bg-elevated) !important;
}
.dropdown-item {
    color: var(--vc-text-primary);
    padding: 8px 12px;
    border-radius: var(--vc-radius-sm);
    transition: background-color 0.15s;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--vc-table-hover);
    color: var(--vc-text-primary);
}
.dropdown-divider { border-color: var(--vc-border); margin: 4px 2px; }

/* --- Sidebar -------------------------------------------------------------- */
#sidebar {
    width: 240px;
    background-color: var(--vc-bg-sidebar);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--vc-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    transition: width 0.2s ease;
    z-index: 1030;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#sidebar::-webkit-scrollbar { display: none; }

.nav-category {
    font-size: var(--vc-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--vc-text-muted);
    padding: 18px 20px 8px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.nav-category i {
    transition: transform 0.2s ease;
    font-size: 0.75rem;
}
.nav-category.collapsed i { transform: rotate(-90deg); }

.sidebar-nav { list-style: none; padding: 0 var(--vc-space-2); margin: 0; }
.sidebar-nav .nav-item { margin-bottom: 1px; }

/* The top-of-rail block (currently the Dashboard link) sits above the
   categorised sections. Add a hairline + a little breathing room so the
   first category header doesn't read as a continuation of the link, and
   push the whole thing down from the sidebar's top edge so it doesn't
   feel pinned to the chrome above. */
.sidebar-nav-top {
    padding-top: var(--vc-space-4);
    padding-bottom: var(--vc-space-2);
    margin-top: var(--vc-space-3);
    border-bottom: 1px solid var(--vc-border);
}

.sidebar-nav .nav-link {
    color: var(--vc-text-secondary);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    transition: background-color 0.15s, color 0.15s;
    border-radius: var(--vc-radius-sm);
    font-size: var(--vc-text-md);
    font-weight: 500;
    text-decoration: none;
}
.sidebar-nav .nav-link i {
    width: 20px;
    text-align: center;
    margin-right: 12px;
    color: var(--vc-text-muted);
    transition: color 0.15s;
    font-size: 1rem;
}
.sidebar-nav .nav-link:hover {
    background-color: var(--vc-table-hover);
    color: var(--vc-text-primary);
}
.sidebar-nav .nav-link:hover i { color: var(--vc-text-primary); }

.sidebar-nav .nav-link.active {
    background-color: var(--vc-accent-tint);
    color: var(--vc-accent-primary);
    box-shadow: inset 2px 0 0 var(--vc-accent-primary);
}
.sidebar-nav .nav-link.active i { color: var(--vc-accent-primary); }

#overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1025;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
    border-radius: var(--vc-radius-sm);
    font-weight: 500;
    font-size: var(--vc-text-sm);
    padding: 7px 14px;
    transition: background-color 0.15s, border-color 0.15s, transform 0.1s ease, box-shadow 0.15s;
    letter-spacing: 0;
    text-transform: none;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 4px 10px; font-size: var(--vc-text-xs); }
.btn-lg { padding: 10px 18px; font-size: var(--vc-text-md); }

.btn-primary {
    background-color: var(--vc-accent-primary);
    border-color: var(--vc-accent-primary);
    color: #06241c;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--vc-accent-primary-hover);
    border-color: var(--vc-accent-primary-hover);
    color: #06241c;
}

.btn-outline-primary {
    color: var(--vc-accent-primary);
    border-color: var(--vc-accent-primary);
    background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--vc-accent-primary);
    color: #06241c;
}

.btn-secondary {
    background-color: var(--vc-bg-elevated);
    border-color: var(--vc-border-strong);
    color: var(--vc-text-primary);
}
.btn-secondary:hover {
    background-color: var(--vc-border-strong);
    border-color: var(--vc-border-strong);
    color: var(--vc-text-primary);
}

.btn-outline-secondary {
    color: var(--vc-text-primary);
    border-color: var(--vc-border-strong);
    background-color: transparent;
}
.btn-outline-secondary:hover {
    background-color: var(--vc-table-hover);
    border-color: var(--vc-border-strong);
    color: var(--vc-text-primary);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--vc-text-secondary);
}
.btn-ghost:hover {
    background-color: var(--vc-table-hover);
    color: var(--vc-text-primary);
}
.btn-ghost.text-vc-danger:hover {
    background-color: rgba(255, 92, 92, 0.10);
    color: var(--vc-danger) !important;
}

.btn-danger {
    background-color: var(--vc-danger);
    border-color: var(--vc-danger);
    color: #fff;
    font-weight: 600;
}
.btn-danger:hover, .btn-danger:active, .btn-danger:focus {
    background-color: #e64545;
    border-color: #e64545;
    color: #fff;
}
.btn-outline-danger {
    color: var(--vc-danger);
    border-color: var(--vc-danger);
    background-color: transparent;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: var(--vc-danger);
    color: #fff;
}

.btn-check:focus + .btn, .btn:focus {
    box-shadow: 0 0 0 3px var(--vc-accent-ring);
}

/* --- Cards ---------------------------------------------------------------- */
.card {
    background-color: var(--vc-bg-card);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow-sm);
    color: var(--vc-text-primary);
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--vc-border);
    padding: var(--vc-space-3) var(--vc-space-4);
    font-weight: 600;
}
.card-body { padding: var(--vc-space-4); }
.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--vc-border);
    padding: var(--vc-space-3) var(--vc-space-4);
}

/* --- List groups ---------------------------------------------------------- */
.list-group-item {
    background-color: var(--vc-bg-card);
    border-color: var(--vc-border);
    color: var(--vc-text-primary);
}
.list-group-item.bg-light {
    background-color: var(--vc-bg-elevated) !important;
    color: var(--vc-text-primary);
}

/* --- Tables --------------------------------------------------------------- */
.table {
    color: var(--vc-text-primary);
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--vc-text-primary);
    --bs-table-border-color: var(--vc-border);
}

.table th {
    text-transform: none;
    font-size: var(--vc-text-xs);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--vc-text-secondary);
    border-bottom: 1px solid var(--vc-border-strong);
    padding: 10px 14px;
    background-color: transparent;
}
.table td {
    padding: 11px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--vc-border);
    color: var(--vc-text-primary);
    background-color: transparent;
}
.table tbody tr:hover td {
    background-color: var(--vc-table-hover);
}
.table .text-end form { margin: 0; display: inline-flex; }
.table .text-end .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Bootstrap's .table-sm crushes cell padding to 4px which collides with
   our touch-target sizing and looks cramped. Override via the Bootstrap
   CSS variables it uses internally so the change sticks regardless of
   selector specificity. */
.table-sm {
    --bs-table-cell-padding-y-sm: 7px;
    --bs-table-cell-padding-x-sm: 10px;
}
.table-sm > :not(caption) > * > * {
    padding: 7px 10px;
}

/* Custom table links */
.table-link {
    color: var(--vc-text-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}
.table-link:hover { color: var(--vc-accent-primary); }

/* --- Forms ---------------------------------------------------------------- */
.form-control, .form-select, .input-group-text {
    background-color: var(--vc-input-bg);
    border: 1px solid var(--vc-border);
    color: var(--vc-text-primary);
    border-radius: var(--vc-radius-sm);
    padding: 8px 12px;
    font-size: var(--vc-text-md);
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.form-control:focus, .form-select:focus {
    background-color: var(--vc-input-focus);
    border-color: var(--vc-accent-primary);
    box-shadow: 0 0 0 3px var(--vc-accent-ring);
    color: var(--vc-text-primary);
}
.form-control:hover:not(:focus), .form-select:hover:not(:focus) {
    border-color: var(--vc-border-strong);
}
.form-control::placeholder {
    color: var(--vc-text-muted);
    opacity: 1;
}
.form-label {
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    margin-bottom: 6px;
}
.form-text { color: var(--vc-text-secondary); font-size: var(--vc-text-xs); }
.form-check-input {
    background-color: var(--vc-input-bg);
    border-color: var(--vc-border-strong);
}
.form-check-input:checked {
    background-color: var(--vc-accent-primary);
    border-color: var(--vc-accent-primary);
}
/* Form validation: only paint invalid fields red AFTER the user has
   submitted once (form.was-validated). Avoids the jarring "everything is
   red as I type" default Bootstrap behaviour. */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--vc-danger) !important;
    background-image: none;
    box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.18);
}
.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: var(--vc-border);
    background-image: none;
}
.invalid-feedback { color: var(--vc-danger); font-size: var(--vc-text-xs); }

/* --- Modals --------------------------------------------------------------- */
.modal-content {
    background-color: var(--vc-bg-card);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow-lg);
    color: var(--vc-text-primary);
}
.modal-header, .offcanvas-header {
    border-bottom: 1px solid var(--vc-border);
    padding: var(--vc-space-3) var(--vc-space-4);
}
.modal-body { padding: var(--vc-space-4); }
.modal-footer {
    border-top: 1px solid var(--vc-border);
    padding: var(--vc-space-3) var(--vc-space-4);
}
.modal-backdrop {
    background-color: rgba(8, 10, 14, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.modal-backdrop.show { opacity: 1; }

.offcanvas {
    background-color: var(--vc-bg-card);
    color: var(--vc-text-primary);
    border-color: var(--vc-border);
}

/* --- Tabs ----------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--vc-border);
    gap: var(--vc-space-4);
}
.nav-tabs .nav-link {
    color: var(--vc-text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 4px;
    font-weight: 500;
    background: transparent;
    transition: color 0.15s, border-color 0.15s;
}
.nav-tabs .nav-link:hover {
    color: var(--vc-text-primary);
    border-bottom-color: var(--vc-border-strong);
}
.nav-tabs .nav-link.active {
    color: var(--vc-accent-primary);
    background: transparent;
    border-bottom-color: var(--vc-accent-primary);
}

/* --- Badges --------------------------------------------------------------- */
.badge {
    border-radius: var(--vc-radius-sm);
    padding: 4px 8px;
    font-weight: 500;
    font-size: var(--vc-text-xs);
}
/* Soft / tinted badges for status pills, type labels, etc. — easier on the
   eye in a data-dense table than a solid bg. Pair the bg tint with a
   readable accent text color. */
.badge-soft-primary { background-color: rgba(46, 232, 181, 0.14); color: #5cf0c5; }
.badge-soft-success { background-color: rgba(0, 200, 83, 0.14);  color: #6ee7a8; }
.badge-soft-info    { background-color: rgba(63, 169, 245, 0.14); color: #8ec7f7; }
.badge-soft-warning { background-color: rgba(245, 165, 36, 0.14); color: #ffd07a; }
.badge-soft-danger  { background-color: rgba(255, 92, 92, 0.14);  color: #ff9b9b; }
.badge-soft-grey    { background-color: rgba(113, 113, 122, 0.20); color: #b6bcc6; }
.badge-soft-purple  { background-color: rgba(166, 120, 240, 0.14); color: #d4baff; }

/* --- Accordions ----------------------------------------------------------- */
.accordion {
    --bs-accordion-color: var(--vc-text-primary);
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-color: var(--vc-text-primary);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-color: var(--vc-text-primary);
    --bs-accordion-active-bg: var(--vc-accent-tint);
    --bs-accordion-border-color: var(--vc-border);
}
.accordion-item {
    background-color: var(--vc-bg-card);
    border-color: var(--vc-border);
}
.accordion-button {
    background-color: var(--vc-bg-card);
    color: var(--vc-text-primary);
}
.accordion-button:not(.collapsed) {
    background-color: var(--vc-accent-tint);
    color: var(--vc-text-primary);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--vc-border);
}
.accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(180%);
}

/* --- Alerts --------------------------------------------------------------- */
.alert {
    border-radius: var(--vc-radius);
    border-width: 1px;
    padding: var(--vc-space-3) var(--vc-space-4);
}
.alert-success { background-color: rgba(0, 200, 83, 0.08); border-color: rgba(0, 200, 83, 0.3); color: #6ee7a8; }
.alert-warning { background-color: rgba(245, 165, 36, 0.10); border-color: rgba(245, 165, 36, 0.3); color: #ffd07a; }
.alert-danger  { background-color: rgba(255, 92, 92, 0.10); border-color: rgba(255, 92, 92, 0.3); color: #ff9b9b; }
.alert-info    { background-color: rgba(63, 169, 245, 0.10); border-color: rgba(63, 169, 245, 0.3); color: #8ec7f7; }

/* --- Page header --------------------------------------------------------- */
.page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--vc-radius-sm);
    background-color: var(--vc-accent-tint);
    color: var(--vc-accent-primary);
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(46, 232, 181, 0.15);
}
.page-header h1 { font-size: 1.5rem; line-height: 1.2; }
@media (min-width: 768px) {
    .page-header h1 { font-size: 1.75rem; }
}
.page-header-actions { flex-shrink: 0; }

/* Breadcrumb sits above the header */
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--vc-text-muted);
    --bs-breadcrumb-item-active-color: var(--vc-text-primary);
    margin-bottom: 0;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--vc-text-muted); }

/* --- Auth pages ----------------------------------------------------------- */
.auth-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--vc-bg-dark);
    padding: var(--vc-space-4);
}
.auth-card {
    background-color: var(--vc-bg-card);
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    box-shadow: var(--vc-shadow);
    width: 100%;
    max-width: 400px;
    padding: var(--vc-space-6);
}
.auth-card .auth-title {
    font-size: var(--vc-text-xl);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--vc-space-2);
}
.auth-card .auth-subtitle {
    text-align: center;
    color: var(--vc-text-secondary);
    margin-bottom: var(--vc-space-5);
    font-size: var(--vc-text-sm);
}
.auth-card .auth-link {
    color: var(--vc-text-secondary);
    text-decoration: none;
    font-size: var(--vc-text-sm);
}
.auth-card .auth-link:hover { color: var(--vc-accent-primary); }
.auth-card .form-control.mfa-code {
    text-align: center;
    font-size: var(--vc-text-2xl);
    letter-spacing: 0.4em;
    padding: var(--vc-space-3);
}

/* --- Table search group (filter input above tables) ----------------------- */
.table-search-group { width: 100%; }
@media (min-width: 768px) {
    .table-search-group { width: 50%; min-width: 300px; }
}
@media (min-width: 992px) {
    .table-search-group { width: 33%; }
}

/* --- Mobile / responsive -------------------------------------------------- */
.fab-btn { display: none; }
.mobile-filter-trigger { display: none; }
.mobile-actions { display: none; }

@media (max-width: 768px) {
    /* iOS Safari zooms in on inputs whose computed font-size is below 16px.
       Forcing 16px on every text input avoids that without us having to
       bump font sizes on every component. The visual size stays the same
       on desktop (this rule is mobile-only). */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"],
    textarea,
    select,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    #sidebar {
        position: fixed;
        left: -260px;
        height: 100dvh;
        width: 260px;
        padding-bottom: 20px;
    }
    #sidebar.toggled { left: 0; }
    #overlay.toggled { display: block; }
    .container-fluid { padding: var(--vc-space-4) !important; }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .table-responsive::-webkit-scrollbar { display: none; }
    .table-responsive .table {
        width: max-content;
        min-width: 100%;
        margin-bottom: 0;
    }
    .table-responsive .table th,
    .table-responsive .table td {
        white-space: nowrap;
        vertical-align: middle;
    }
    .table-responsive .table .col-fixed-left {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: var(--vc-bg-card);
        white-space: normal;
        max-width: 150px;
    }
    .table-responsive .table td.col-fixed-left a.table-link,
    .table-responsive .table td.col-fixed-left strong {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }
    .table-responsive .table tbody tr:hover .col-fixed-left {
        background-color: var(--vc-table-hover);
    }
    .table-responsive .table .col-fixed-left::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 1px;
        background-color: var(--vc-border);
    }
    .table-responsive .table .col-fixed-right {
        position: sticky;
        right: 0;
        z-index: 1;
        background-color: var(--vc-bg-card);
        text-align: right;
    }
    .table .mobile-actions {
        width: 44px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* WCAG-compliant tap target on mobile kebab triggers. */
    .table .mobile-actions .btn,
    .table .mobile-actions [data-bs-toggle="dropdown"] {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .table-responsive .table tbody tr:hover .col-fixed-right {
        background-color: var(--vc-table-hover);
    }
    .table-responsive .table .col-fixed-right::before {
        content: '';
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: 1px;
        background-color: var(--vc-border);
    }
    /* Always swap inline-actions for mobile-actions on small screens,
       regardless of whether the table sits inside .table-responsive. */
    .inline-actions { display: none !important; }
    .table .mobile-actions { display: table-cell !important; }
    th.mobile-actions, td.mobile-actions { display: table-cell !important; }

    .header-actions { display: none !important; }
    .fab-btn {
        display: flex !important;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
        font-size: 22px;
        z-index: 1040;
        background-color: var(--vc-accent-primary);
        color: #06241c;
        text-decoration: none;
        border: none;
    }
    .fab-btn:hover {
        background-color: var(--vc-accent-primary-hover);
        color: #06241c;
    }

    /* Speed-dial: secondary actions stacked above the primary FAB,
       revealed by the "more" toggle to its left. */
    .fab-stack {
        position: fixed;
        bottom: 20px;
        right: 86px;  /* sits left of the primary FAB (56px + 10px gap) */
        z-index: 1041;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px;
    }
    .fab-stack .fab-stack-toggle {
        position: static;
        width: 48px;
        height: 48px;
        background-color: var(--vc-bg-elevated);
        color: var(--vc-text-primary);
        border: 1px solid var(--vc-border);
        font-size: 18px;
        transition: transform 0.2s ease, background-color 0.15s;
    }
    .fab-stack .fab-stack-toggle.is-open {
        transform: rotate(90deg);
        background-color: var(--vc-accent-primary);
        color: #06241c;
        border-color: transparent;
    }
    .fab-stack .fab-stack-toggle:hover {
        background-color: var(--vc-table-hover);
        color: var(--vc-text-primary);
    }
    .fab-stack-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-end;
    }
    .fab-stack-item {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--vc-text-primary);
        text-decoration: none;
        cursor: pointer;
    }
    .fab-stack-label {
        background: var(--vc-bg-elevated);
        border: 1px solid var(--vc-border);
        border-radius: var(--vc-radius);
        padding: 6px 12px;
        font-size: var(--vc-text-sm);
        font-weight: 500;
        box-shadow: var(--vc-shadow);
        white-space: nowrap;
    }
    .fab-stack-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: var(--vc-bg-elevated);
        border: 1px solid var(--vc-border);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--vc-text-primary);
        box-shadow: var(--vc-shadow);
    }
    .fab-stack-item:hover .fab-stack-icon,
    .fab-stack-item:focus-visible .fab-stack-icon {
        background-color: var(--vc-accent-primary);
        color: #06241c;
        border-color: transparent;
    }
    /* When back-to-top is visible, lift the stack above it too. */
    body.has-back-to-top .fab-stack { bottom: 60px; }

    .mobile-filter-trigger { display: block; }
    .desktop-filters { display: none !important; }

    #mobileActionsOffcanvasBody .dropdown-item {
        padding: 14px 20px;
        font-size: 1rem;
        color: var(--vc-text-primary);
        border-bottom: 1px solid var(--vc-border);
        display: flex;
        align-items: center;
    }
    #mobileActionsOffcanvasBody .dropdown-item:active {
        background-color: var(--vc-table-hover);
    }
    #mobileActionsOffcanvasBody .dropdown-item i {
        margin-right: 12px;
        font-size: 1.1rem;
        width: 22px;
        text-align: center;
    }
    #mobileActionsOffcanvasBody .dropdown-item.text-danger,
    #mobileActionsOffcanvasBody .dropdown-item.text-vc-danger {
        color: var(--vc-danger) !important;
    }
    #mobileActionsOffcanvasBody .dropdown-divider { display: none; }
    #mobileActionsOffcanvasBody form { margin: 0; width: 100%; }
    #mobileActionsOffcanvasBody form .dropdown-item {
        width: 100%;
        text-align: left;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--vc-border);
    }
}

/* --- Desktop sidebar (collapsed icon rail OR fully expanded) -------------- */
@media (min-width: 768px) {
    #sidebar {
        width: 64px;
        overflow-x: hidden;
    }
    /* Pinned (= "always expanded") is the only thing that widens the rail.
       Hover used to expand it too, which made navigating between modules
       feel jumpy. The logo lines still animate on hover (see .logo-wrapper
       rules below) so the user gets feedback. */
    #sidebar.pinned {
        width: 240px;
    }
    #sidebar > * { width: 240px; }
    /* When the rail is collapsed (64px) the toggle row inherits the 240px
       width from above and its content is pushed off-screen by
       justify-content-end. Constrain it to the rail and centre the button so
       the user can re-expand the sidebar. */
    #sidebar:not(.pinned) > .sidebar-pin-row {
        width: 64px;
        justify-content: center;
    }
    #sidebar .nav-link { white-space: nowrap; }

    #sidebar .nav-text,
    #sidebar .nav-category .ms-auto {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s, visibility 0.15s;
        display: inline-block;
        vertical-align: middle;
    }
    #sidebar.pinned .nav-text,
    #sidebar.pinned .nav-category .ms-auto {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.15s 0.05s, visibility 0.15s 0.05s;
    }
    #sidebar .nav-category {
        white-space: nowrap;
        overflow: hidden;
        padding-left: 22px;
        padding-right: 20px;
    }
}

/* --- Custom palette (semantic-ish + legacy support) ----------------------- */
:root {
    --vc-grey:   #71717A;
    --vc-grey-rgb:   113, 113, 122;
    --vc-white:  #FFFFFF;
    --vc-white-rgb:  255, 255, 255;
    --vc-green:  var(--vc-success);
    --vc-green-rgb:  0, 200, 83;
    --vc-blue:   #3FA9F5;
    --vc-blue-rgb:   63, 169, 245;
    --vc-purple: #A678F0;
    --vc-purple-rgb: 166, 120, 240;
    --vc-orange: var(--vc-warning);
    --vc-orange-rgb: 245, 165, 36;
    --vc-red:    var(--vc-danger);
    --vc-red-rgb:    255, 92, 92;
    --vc-success-rgb: 0, 200, 83;
    --vc-danger-rgb:  255, 92, 92;
    --vc-accent-primary-rgb: 46, 232, 181;
}

/* Background utilities — use rgba with --bs-bg-opacity so that Bootstrap's
   .bg-opacity-{10|25|50|75} modifiers still work alongside these. */
.bg-vc-grey   { background-color: rgba(var(--vc-grey-rgb),   var(--bs-bg-opacity, 1)) !important; }
.bg-vc-white  { background-color: rgba(var(--vc-white-rgb),  var(--bs-bg-opacity, 1)) !important; color: #000; }
.bg-vc-green  { background-color: rgba(var(--vc-green-rgb),  var(--bs-bg-opacity, 1)) !important; }
.bg-vc-blue   { background-color: rgba(var(--vc-blue-rgb),   var(--bs-bg-opacity, 1)) !important; }
.bg-vc-purple { background-color: rgba(var(--vc-purple-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-vc-orange { background-color: rgba(var(--vc-orange-rgb), var(--bs-bg-opacity, 1)) !important; }
.bg-vc-red    { background-color: rgba(var(--vc-red-rgb),    var(--bs-bg-opacity, 1)) !important; }
.bg-vc-success{ background-color: rgba(var(--vc-success-rgb),var(--bs-bg-opacity, 1)) !important; }
.bg-vc-danger { background-color: rgba(var(--vc-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
/* When the bg is fully opaque, force dark text on light backgrounds. */
.bg-vc-grey, .bg-vc-green, .bg-vc-blue, .bg-vc-purple, .bg-vc-red, .bg-vc-success, .bg-vc-danger { color: #fff; }
.bg-vc-orange { color: #1a1a1a; }
/* When opacity has been turned down, let text inherit from the surrounding card. */
[class*="bg-vc-"][class*="bg-opacity-"] { color: inherit !important; }

/* Text utilities */
.text-vc-grey    { color: var(--vc-grey) !important; }
.text-vc-white   { color: var(--vc-white) !important; }
.text-vc-green   { color: var(--vc-green) !important; }
.text-vc-blue    { color: var(--vc-blue) !important; }
.text-vc-purple  { color: var(--vc-purple) !important; }
.text-vc-orange  { color: var(--vc-orange) !important; }
.text-vc-red     { color: var(--vc-red) !important; }
.text-vc-success { color: var(--vc-success) !important; }
.text-vc-danger  { color: var(--vc-danger) !important; }
.text-vc-secondary { color: var(--vc-text-secondary) !important; }
.text-vc-accent-primary { color: var(--vc-accent-primary) !important; }

/* Border utilities */
.border-vc-grey   { border-color: var(--vc-grey)   !important; }
.border-vc-green  { border-color: var(--vc-green)  !important; }
.border-vc-blue   { border-color: var(--vc-blue)   !important; }
.border-vc-orange { border-color: var(--vc-orange) !important; }
.border-vc-red    { border-color: var(--vc-red)    !important; }

/* Colored button variants (legacy support — prefer .btn-primary/secondary/etc) */
.btn-outline-vc-blue   { color: var(--vc-blue) !important;   border-color: var(--vc-blue) !important; }
.btn-outline-vc-blue:hover { background-color: var(--vc-blue) !important; color: #fff !important; }

.btn-outline-vc-red    { color: var(--vc-red) !important;    border-color: var(--vc-red) !important; }
.btn-outline-vc-red:hover { background-color: var(--vc-red) !important; color: #fff !important; }
.btn-check:checked + .btn-outline-vc-red { background-color: var(--vc-red) !important; color: #fff !important; }

.btn-outline-vc-green  { color: var(--vc-green) !important;  border-color: var(--vc-green) !important; }
.btn-outline-vc-green:hover { background-color: var(--vc-green) !important; color: #fff !important; }

.btn-outline-vc-orange { color: var(--vc-orange) !important; border-color: var(--vc-orange) !important; }
.btn-outline-vc-orange:hover { background-color: var(--vc-orange) !important; color: #1a1a1a !important; }

.btn-outline-vc-grey   { color: var(--vc-grey) !important;   border-color: var(--vc-grey) !important; }
.btn-outline-vc-grey:hover { background-color: var(--vc-grey) !important; color: #fff !important; }

.btn-vc-green  { background-color: var(--vc-green)  !important; border-color: var(--vc-green)  !important; color: #fff !important; }
.btn-vc-orange { background-color: var(--vc-orange) !important; border-color: var(--vc-orange) !important; color: #1a1a1a !important; }
.btn-vc-blue   { background-color: var(--vc-blue)   !important; border-color: var(--vc-blue)   !important; color: #fff !important; }
.btn-vc-grey   { background-color: var(--vc-grey)   !important; border-color: var(--vc-grey)   !important; color: #fff !important; }
.btn-vc-red    { background-color: var(--vc-red)    !important; border-color: var(--vc-red)    !important; color: #fff !important; }

/* --- SKU builder chips ---------------------------------------------------- */
.eb-chip {
    display: inline-block;
    padding: 2px 6px;
    margin: 0 2px;
    border-radius: var(--vc-radius-sm);
    font-size: var(--vc-text-sm);
    font-family: var(--bs-font-monospace);
    font-weight: bold;
    color: #fff;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}
.eb-chip-mc   { background-color: var(--vc-accent-primary); color: #06241c; }
.eb-chip-sc   { background-color: var(--vc-info); color: #fff; }
.eb-chip-bin  { background-color: var(--vc-warning); color: #1a1a1a; }
.eb-chip-date { background-color: var(--vc-danger); }
.eb-chip-vn   { background-color: var(--vc-success); }
.eb-chip-vv   { background-color: var(--vc-purple); }
.eb-chip-text { background-color: var(--vc-grey); }

/* --- Back to top --------------------------------------------------------- */
/* Desktop: not needed. Home key, scroll wheel, and browser scroll handle it. */
#backToTopBtn { display: none !important; }

/* Mobile: a slim, full-width edge-to-edge bar that slides up from the bottom
   when scrolled. Doesn't collide with the create FAB — body.has-back-to-top
   lifts the FAB above the bar. */
@media (max-width: 768px) {
    #backToTopBtn {
        display: flex !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 44px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0;
        margin: 0;
        background-color: rgba(28, 30, 36, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
        border-top: 1px solid var(--vc-border);
        border-radius: 0;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
        color: var(--vc-text-secondary);
        font-size: 0.8rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        cursor: pointer;
        outline: none;
        z-index: 1035;
        transform: translateY(100%);
        opacity: 0;
        transition: transform 0.2s ease, opacity 0.2s ease, color 0.15s;
    }
    #backToTopBtn.visible {
        transform: translateY(0);
        opacity: 1;
    }
    #backToTopBtn:hover, #backToTopBtn:focus-visible {
        color: var(--vc-accent-primary);
        background-color: rgba(28, 30, 36, 0.96);
    }
    /* Lift the create FAB above the bar so they don't overlap. */
    body.has-back-to-top .fab-btn { bottom: 60px; }

    /* And give the scrolling containers room so the last item (last
       sidebar entry, last dashboard widget, etc.) can actually be
       scrolled into view above the bar instead of hiding behind it. */
    body.has-back-to-top #page-content-wrapper { padding-bottom: 52px; }
    body.has-back-to-top #sidebar { padding-bottom: 52px; }
}

/* --- Skeleton shimmer (loading state) ------------------------------------ */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.table-skeleton td {
    background: linear-gradient(
        90deg,
        rgba(32, 35, 44, 0.6) 25%,
        rgba(46, 232, 181, 0.07) 50%,
        rgba(32, 35, 44, 0.6) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s ease-in-out infinite;
    color: transparent !important;
    user-select: none;
}
.table-skeleton td * { visibility: hidden; }

/* --- Custom scrollbar (page content + sub-areas) ------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(46, 232, 181, 0.4); }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }

/* --- Print --------------------------------------------------------------- */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body, #wrapper, #main-container, #page-content-wrapper {
        height: auto !important;
        overflow: visible !important;
        background: white !important;
        color: black !important;
    }
    .top-header, #sidebar, #overlay, .fab-btn, #backToTopBtn,
    .header-actions, .page-header-actions, .mobile-filter-trigger,
    .skip-to-content, .breadcrumb, .module-info-icon-, .module-callout-,
    [class*="module-callout-"], [class*="module-info-icon-"] {
        display: none !important;
    }
    .page-header-icon {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
    }
    .card, .modal-content, .list-group-item, .form-control, .form-select {
        background: white !important;
        color: black !important;
        border-color: #ccc !important;
        box-shadow: none !important;
    }
    .table th, .table td {
        color: black !important;
        background: white !important;
        border-color: #ccc !important;
    }
    a { color: black !important; text-decoration: none !important; }
    h1, h2, h3, h4, h5, h6, p, label { color: black !important; }
    .badge {
        background: #f0f0f0 !important;
        color: black !important;
        border: 1px solid #ccc !important;
    }
}