/* =============================================================================
   CSP Suite — application theme + shell (shared verbatim across all suite apps)
   -----------------------------------------------------------------------------
   Loaded LAST (after Bootstrap and the older refinement layer) so it wins.
   Clean, minimal dashboard language: flat solid surfaces, one blue accent,
   solid icon squares, quiet typography. Dark + light via <html data-theme>.
   Shell: permanent left sidebar (collapsible, <html data-sidebar>) + top bar.
   Copies: CSP-Suite / CSP-Tools-Laravel / CSP-Wireless  public/css/theme.css
           CSP-Reports / CSPLeaves                      public/assets/css/theme.css
   ========================================================================== */

/* ---- Tokens ---------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
    --c-bg: #141829;
    --c-card: #1c2135;
    --c-card-2: #252b43;
    --c-input: #181c2e;
    --c-hover: #2c3350;
    --c-hover-soft: rgba(255, 255, 255, 0.045);
    --c-border: rgba(255, 255, 255, 0.09);
    --c-border-soft: rgba(255, 255, 255, 0.06);
    --c-text: #f3f5fa;
    --c-muted: #a0a8bd;
    --c-faint: #7f88a6;
    --c-accent: #0075ff;
    --c-accent-hover: #1a85ff;
    --c-accent-soft: rgba(0, 117, 255, 0.16);
    --c-accent-ink: #5aa6ff;
    --c-on-accent: #ffffff;
    --c-success: #01b574; --c-success-soft: rgba(1, 181, 116, 0.16); --c-success-ink: #5fe3b0;
    --c-warning: #f5a524; --c-warning-soft: rgba(245, 165, 36, 0.16); --c-warning-ink: #fcc96b;
    --c-danger: #e5484d;  --c-danger-soft: rgba(229, 72, 77, 0.16);  --c-danger-ink: #ff9a9d;
    --c-neutral-soft: rgba(160, 168, 189, 0.14); --c-neutral-ink: #c9cfdd;
    --c-success-solid: #047857; --c-danger-solid: #dc2626;
    --c-icon-glow: rgba(0, 117, 255, 0.45);
    --c-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --c-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
    --c-scroll: rgba(255, 255, 255, 0.14);
    --c-close-filter: invert(1) grayscale(1) brightness(1.8);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --c-bg: #f4f6fa;
    --c-card: #ffffff;
    --c-card-2: #f3f5f9;
    --c-input: #ffffff;
    --c-hover: #eaeef5;
    --c-hover-soft: rgba(15, 23, 42, 0.04);
    --c-border: #e2e6ee;
    --c-border-soft: #edf0f5;
    --c-text: #1b2130;
    --c-muted: #5f6b7e;
    --c-faint: #8590a3;
    --c-accent: #0069e6;
    --c-accent-hover: #0058c2;
    --c-accent-soft: rgba(0, 105, 230, 0.09);
    --c-accent-ink: #0058c2;
    --c-on-accent: #ffffff;
    --c-success: #059669; --c-success-soft: rgba(5, 150, 105, 0.10); --c-success-ink: #047857;
    --c-warning: #d97706; --c-warning-soft: rgba(217, 119, 6, 0.11); --c-warning-ink: #b45309;
    --c-danger: #dc2626;  --c-danger-soft: rgba(220, 38, 38, 0.09);  --c-danger-ink: #b91c1c;
    --c-neutral-soft: rgba(95, 107, 126, 0.10); --c-neutral-ink: #475264;
    --c-success-solid: #047857; --c-danger-solid: #dc2626;
    --c-icon-glow: rgba(0, 105, 230, 0.30);
    --c-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
    --c-shadow-lg: 0 12px 32px -10px rgba(16, 24, 40, 0.18);
    --c-scroll: rgba(15, 23, 42, 0.18);
    --c-close-filter: none;
    color-scheme: light;
}

:root {
    --sb-w: 250px;
    --tb-h: 72px;
    --c-r-card: 18px;
    --c-r-ctl: 10px;
    --c-r-sm: 8px;

    /* Re-point the older refinement layer's tokens so its rules follow suit. */
    --w-ink: var(--c-text);
    --w-ink-dim: var(--c-muted);
    --w-ink-faint: var(--c-faint);
    --w-accent: var(--c-accent);
    --w-accent-2: var(--c-accent);
    --w-accent-3: var(--c-accent);
    --w-accent-4: var(--c-accent);
    --w-accent-ink: var(--c-on-accent);
    --w-grad: var(--c-accent);
    --w-grad-soft: var(--c-accent-soft);
    --w-surface: var(--c-card);
    --w-surface-2: var(--c-card);
    --w-stroke: var(--c-border);
    --w-stroke-soft: var(--c-border-soft);
    --w-hair-top: 0 0 #0000;
    --w-shadow-sm: var(--c-shadow);
    --w-shadow-md: var(--c-shadow);
    --w-shadow-lg: var(--c-shadow-lg);
    --w-glow: 0 0 #0000;
    --w-r-xs: 6px;
    --w-r-sm: 8px;
    --w-r-md: 10px;
    --w-r-lg: 18px;
    --w-r-xl: 22px;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 18px;
    --bs-border-radius-xl: 18px;
    --bs-border-radius-xxl: 22px;
}

/* ---- Base -------------------------------------------------------------------- */
html, body {
    background: var(--c-bg) !important;
    background-image: none !important;
}
body {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--c-text);
}
body::before, body::after { content: none !important; display: none !important; animation: none !important; }
* { text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
::selection { background: var(--c-accent-soft); color: var(--c-text); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
* { scrollbar-color: var(--c-scroll) transparent; }
*::-webkit-scrollbar-thumb { background: var(--c-scroll); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--c-faint); background-clip: padding-box; }

/* Old layer's entrance animation off; the motion section at the end owns motion. */
.card-glass, .card, .tile, .launch-card { animation: none !important; }

/* ---- Typography ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--c-text) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1.02rem; }
h5, .h5 { font-size: 0.92rem; }
h6, .h6 { font-size: 0.85rem; }
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i { color: var(--c-accent) !important; -webkit-text-fill-color: var(--c-accent) !important; filter: none !important; }
p { color: inherit; }
.text-white, .text-light { color: var(--c-text) !important; }
.text-muted, .text-secondary, .form-text, small.text-muted { color: var(--c-muted) !important; }
.opacity-75 { opacity: 1 !important; color: var(--c-muted) !important; }
.opacity-50 { opacity: 1 !important; color: var(--c-muted) !important; }
.text-white-50, .text-black-50 { color: var(--c-muted) !important; }
.text-success { color: var(--c-success-ink) !important; }
.text-danger { color: var(--c-danger-ink) !important; }
.text-warning { color: var(--c-warning-ink) !important; }
.text-info, .text-primary { color: var(--c-accent-ink) !important; }
a { color: var(--c-accent-ink); }
a:hover { color: var(--c-accent); }
hr { border-color: var(--c-border); opacity: 1; }
.eyebrow, .dash-eyebrow { color: var(--c-muted) !important; letter-spacing: 0.08em !important; }
.dash-hello, .dash-hello * { color: var(--c-text) !important; }
.dash-hello { font-size: 1.6rem !important; font-weight: 700 !important; }
.dash-hello .nm { color: var(--c-accent) !important; }

/* Old "page title in a glass pill" headings -> plain, left-aligned page titles. */
h1.card-glass, h2.card-glass, h1.rounded-pill, h2.rounded-pill {
    background: none !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; border-radius: 0 !important;
    align-self: flex-start; text-align: left !important; font-size: 1.4rem !important;
}
h1.card-glass::before, h2.card-glass::before { content: none !important; }
/* "Developed by CloudSP" footers */
h6.btn-glass, h6.btn-glass-light {
    background: none !important; border: 0 !important; box-shadow: none !important;
    color: var(--c-muted) !important; font-weight: 500 !important; font-size: 0.75rem !important;
}

/* ---- Surfaces ---------------------------------------------------------------- */
.card-glass, .card, .tile, .launch-card, .glass-table, .table-glass, .myday-tile, .dash-hero.card-glass {
    background: var(--c-card) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--c-r-card) !important;
    box-shadow: var(--c-shadow) !important;
    color: var(--c-text) !important;
}
.table-glass { box-shadow: none !important; }
/* "Dark glass" sub-panels (Reports forms, Suite access matrix) */
.card-glass-dark {
    background: var(--c-card) !important; border: 1px solid var(--c-border) !important;
    box-shadow: var(--c-shadow) !important; color: var(--c-text) !important; border-radius: var(--c-r-card) !important;
}
.card-glass .card-glass-dark, .card .card-glass-dark { background: var(--c-card-2) !important; box-shadow: none !important; }
.card-glass .card-glass, .card .card-glass, .card-glass .table-glass { background: var(--c-card-2) !important; box-shadow: none !important; }
.card-glass::before, .card-glass::after, .tile::before, .tile::after,
.launch-card::before, .launch-card::after, .btn-glass::after, .btn-glass-light::after { content: none !important; display: none !important; }
a.card-glass:hover, a.card:hover, .tile:hover, .launch-card:hover {
    background: var(--c-card) !important;
    border-color: var(--c-accent) !important;
    box-shadow: var(--c-shadow) !important;
    color: var(--c-text) !important;
}
.card .card-header, .card .card-footer { background: transparent !important; border-color: var(--c-border) !important; color: var(--c-text); }
.card .card-title, .modal-title { color: var(--c-text) !important; }

/* Solid accent icon squares (launchpad, KPI tiles, My Day). */
.lc-icon, .stat-tile .lc-icon, .myday-tile .mt-icon, .tile .tile-icon, .sb-link.active .sb-ico {
    background: linear-gradient(160deg, #2e8bff 0%, #0072f5 55%, #0064e0 100%) !important;
    color: #fff !important;
    border: 0 !important;
    filter: none !important;
    border-radius: 12px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),      /* faint lit top edge */
        0 4px 10px -4px var(--c-icon-glow) !important; /* soft drop */
}
.sb-link.active .sb-ico { border-radius: 10px !important; }
.lc-icon { width: 46px !important; height: 46px !important; font-size: 1.05rem !important; }
.lc-title, .tile .tile-label { color: var(--c-text) !important; font-weight: 700; font-size: 0.98rem !important; }
.lc-desc, .tile .tile-sub, .stat-tile .stat-label, .myday-tile .mt-label { color: var(--c-muted) !important; }
.lc-arrow { color: var(--c-faint) !important; }
.launch-card:hover .lc-arrow { color: var(--c-accent) !important; transform: none !important; }
.launch-card { padding: 1.25rem 1.35rem !important; min-height: 0 !important; }
.stat-tile .stat-value, .myday-tile .mt-value { color: var(--c-text) !important; font-weight: 700 !important; }
.role-chip {
    background: var(--c-accent-soft) !important; color: var(--c-accent-ink) !important;
    border: 0 !important; box-shadow: none !important; border-radius: 999px !important;
}
.role-chip::before { background: currentColor !important; box-shadow: none !important; }

/* ---- Buttons ------------------------------------------------------------------ */
.btn, .btn-glass, .btn-glass-light {
    border-radius: var(--c-r-ctl) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
.btn-sm { border-radius: var(--c-r-sm) !important; }
.btn-glass, .btn-glass-light, .btn-secondary, .btn-light, .btn-dark,
.btn-outline-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark {
    background: var(--c-card-2) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text) !important;
}
.btn-glass:hover, .btn-glass:focus, .btn-glass-light:hover, .btn-glass-light:focus,
.btn-secondary:hover, .btn-light:hover, .btn-dark:hover,
.btn-outline-light:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-dark:hover {
    background: var(--c-hover) !important;
    border-color: var(--c-border) !important;
    color: var(--c-text) !important;
    box-shadow: none !important;
}
.btn-glass i, .btn-glass-light i, .btn-secondary i { color: inherit !important; }
.btn-glass.active, .btn-glass.is-active, .btn-glass-light.active, .nav-current {
    background: var(--c-accent-soft) !important;
    border-color: transparent !important;
    color: var(--c-accent-ink) !important;
    box-shadow: none !important;
}
.nav-current::before { content: none !important; }
.btn-primary, .btn-info {
    background: var(--c-accent) !important;
    border: 1px solid var(--c-accent) !important;
    color: var(--c-on-accent) !important;
    filter: none !important;
}
.btn-primary:hover, .btn-info:hover, .btn-primary:focus, .btn-info:focus {
    background: var(--c-accent-hover) !important; border-color: var(--c-accent-hover) !important; color: var(--c-on-accent) !important;
}
.btn-success { background: var(--c-success-solid) !important; border: 1px solid var(--c-success-solid) !important; color: #fff !important; }
.btn-danger  { background: var(--c-danger-solid) !important;  border: 1px solid var(--c-danger-solid) !important;  color: #fff !important; }
.btn-warning { background: var(--c-warning) !important; border: 1px solid var(--c-warning) !important; color: #1d1302 !important; }
.btn-success:hover, .btn-danger:hover, .btn-warning:hover { filter: brightness(1.08); }
.btn-outline-success { color: var(--c-success-ink) !important; border-color: var(--c-success) !important; background: transparent !important; }
.btn-outline-danger  { color: var(--c-danger-ink) !important;  border-color: var(--c-danger) !important;  background: transparent !important; }
.btn-outline-warning { color: var(--c-warning-ink) !important; border-color: var(--c-warning) !important; background: transparent !important; }
.btn-outline-success:hover { background: var(--c-success-soft) !important; }
.btn-outline-danger:hover  { background: var(--c-danger-soft) !important; }
.btn-outline-warning:hover { background: var(--c-warning-soft) !important; }

/* Status pills (CSP-Leaves Approved / Pending / Rejected). */
.btn-glass-success, .btn-glass-warning, .btn-glass-danger {
    border-radius: var(--c-r-sm) !important; box-shadow: none !important; font-weight: 600 !important;
}
.btn-glass-success { background: var(--c-success-soft) !important; border: 1px solid transparent !important; color: var(--c-success-ink) !important; }
.btn-glass-warning { background: var(--c-warning-soft) !important; border: 1px solid transparent !important; color: var(--c-warning-ink) !important; }
.btn-glass-danger  { background: var(--c-danger-soft) !important;  border: 1px solid transparent !important; color: var(--c-danger-ink) !important; }
.btn-glass-success:hover, .btn-glass-warning:hover, .btn-glass-danger:hover { border-color: currentColor !important; box-shadow: none !important; }

.btn-close { filter: var(--c-close-filter) !important; opacity: .7; }

/* ---- Forms ------------------------------------------------------------------- */
.form-control, .form-select, .input, .ts-wrapper.single .ts-control, .ts-control {
    background-color: var(--c-input) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--c-r-ctl) !important;
    box-shadow: none !important;
    padding: 0.55rem 0.85rem !important;
}
.form-control::placeholder, .input::placeholder, .ts-control input::placeholder { color: var(--c-faint) !important; }
.form-control:focus, .form-select:focus, .input:focus, .ts-wrapper.focus .ts-control {
    background-color: var(--c-input) !important;
    color: var(--c-text) !important;
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px var(--c-accent-soft) !important;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--c-card-2) !important; color: var(--c-muted) !important; }
.form-select {
    padding-right: 2.2rem !important;
    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='%238a94a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-position: right 0.85rem center !important;
}
.form-select option, .form-control option, select option { color: var(--c-text); background: var(--c-card); }
.form-control-sm, .form-select-sm { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; border-radius: var(--c-r-sm) !important; }
textarea.form-control { border-radius: var(--c-r-ctl) !important; }
.form-label { color: var(--c-muted) !important; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.04em; }
.input-group-text { background: var(--c-card-2) !important; color: var(--c-muted) !important; border: 1px solid var(--c-border) !important; }
.form-check-input { background-color: var(--c-input) !important; border: 1px solid var(--c-border) !important; box-shadow: none !important; }
.form-check-input:checked { background-color: var(--c-accent) !important; border-color: var(--c-accent) !important; }
.form-check-label { color: var(--c-text) !important; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: var(--c-close-filter); opacity: .6; }

/* TomSelect */
.ts-control input, .ts-wrapper.single .ts-control .item { color: var(--c-text) !important; }
.ts-dropdown { background: var(--c-card) !important; color: var(--c-text) !important; border: 1px solid var(--c-border) !important; border-radius: var(--c-r-ctl) !important; box-shadow: var(--c-shadow-lg) !important; }
.ts-dropdown .option { border-bottom: 1px solid var(--c-border-soft) !important; color: var(--c-text); }
.ts-dropdown .active { background: var(--c-hover) !important; color: var(--c-text) !important; }
.ts-dropdown .ts-loading, .ts-dropdown .no-results { color: var(--c-muted) !important; }
.customer-option .customer-name, .customer-option .customer-username { color: var(--c-text) !important; }
.ts-control .item small, .customer-option .customer-name + * { color: var(--c-muted); }

/* ---- Tables ------------------------------------------------------------------ */
.table, .table-dark, .table-light, .table-striped, .table-hover {
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--c-text) !important;
    --bs-table-striped-bg: transparent !important; --bs-table-striped-color: var(--c-text) !important;
    --bs-table-hover-bg: transparent !important;   --bs-table-hover-color: var(--c-text) !important;
    --bs-table-active-bg: transparent !important;  --bs-table-active-color: var(--c-text) !important;
    --bs-table-bg-state: transparent !important; --bs-table-color-state: var(--c-text) !important;
    --bs-table-accent-bg: transparent !important; --bs-table-border-color: var(--c-border) !important;
    color: var(--c-text) !important;
}
/* Bootstrap 5.3 paints row states with an inset box-shadow (dark for .table-dark);
   rows are coloured with background-color below instead. */
.table > :not(caption) > * > *, .table-dark > :not(caption) > * > * {
    border-color: var(--c-border) !important; color: var(--c-text) !important; box-shadow: none !important;
}
.table thead th, .glass-table th {
    background: var(--c-card) !important;
    color: var(--c-muted) !important;
    font-size: 0.7rem !important; font-weight: 700 !important;
    letter-spacing: 0.06em !important; text-transform: uppercase;
    border-bottom: 1px solid var(--c-border) !important;
}
.card-glass .table thead th, .card .table thead th { background: var(--c-card) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--c-hover-soft) !important; }
.table-hover > tbody > tr:hover > * { background-color: var(--c-hover-soft) !important; color: var(--c-text) !important; box-shadow: none !important; }
.glass-table td { color: var(--c-text) !important; border-color: var(--c-border) !important; background: transparent !important; }
/* CSP-Leaves div-grid tables (inline white rules) -> hairlines */
.table-glass [style*="border-right"] { border-right: 1px solid var(--c-border) !important; }
.table-glass [style*="border-bottom"] { border-bottom: 1px solid var(--c-border) !important; }

/* ---- Badges, alerts, chips ------------------------------------------------- */
.badge { border-radius: 6px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; }
.badge.bg-success   { background: var(--c-success-soft) !important; color: var(--c-success-ink) !important; box-shadow: none !important; }
.badge.bg-danger    { background: var(--c-danger-soft) !important;  color: var(--c-danger-ink) !important;  box-shadow: none !important; }
.badge.bg-warning   { background: var(--c-warning-soft) !important; color: var(--c-warning-ink) !important; box-shadow: none !important; }
.badge.bg-info, .badge.bg-primary { background: var(--c-accent-soft) !important; color: var(--c-accent-ink) !important; box-shadow: none !important; }
.badge.bg-secondary, .badge.bg-dark, .badge.bg-light { background: var(--c-neutral-soft) !important; color: var(--c-neutral-ink) !important; box-shadow: none !important; }
.badge::before { box-shadow: none !important; }
.actions-table td .badge.bg-success { background: var(--c-success-soft) !important; color: var(--c-success-ink) !important; box-shadow: none !important; }
.actions-table td .badge.bg-warning { background: var(--c-warning-soft) !important; color: var(--c-warning-ink) !important; box-shadow: none !important; }
.actions-table td .badge.bg-danger  { background: var(--c-danger-soft) !important;  color: var(--c-danger-ink) !important;  box-shadow: none !important; }
.actions-table td .badge.bg-secondary { background: var(--c-neutral-soft) !important; color: var(--c-neutral-ink) !important; box-shadow: none !important; }
.actions-table td .badge { border-radius: var(--c-r-sm) !important; }

.alert { border-radius: var(--c-r-ctl) !important; box-shadow: none !important; border: 1px solid transparent !important; }
.alert::before { content: none !important; }
.alert-success { background: var(--c-success-soft) !important; color: var(--c-success-ink) !important; }
.alert-danger  { background: var(--c-danger-soft) !important;  color: var(--c-danger-ink) !important; }
.alert-warning { background: var(--c-warning-soft) !important; color: var(--c-warning-ink) !important; }
.alert-info, .alert-primary { background: var(--c-accent-soft) !important; color: var(--c-accent-ink) !important; }

/* ---- Menus, modals, nav ------------------------------------------------------ */
.dropdown-menu, .modal-content, .popover, .toast {
    background: var(--c-card) !important;
    color: var(--c-text) !important;
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--c-shadow-lg) !important;
}
.modal-content { border-radius: var(--c-r-card) !important; }
.modal-header, .modal-footer, .dropdown-divider { border-color: var(--c-border) !important; }
.dropdown-item { color: var(--c-text) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--c-hover) !important; color: var(--c-text) !important; }
.modal-backdrop.show { opacity: .55; }

.list-group-item { background: var(--c-card-2) !important; border: 1px solid var(--c-border) !important; color: var(--c-text) !important; }
.list-group-item-action:hover { background: var(--c-hover) !important; border-color: var(--c-border) !important; }

.nav-pills { background: var(--c-card-2) !important; border: 1px solid var(--c-border) !important; border-radius: var(--c-r-ctl) !important; }
.nav-pills .nav-link { color: var(--c-muted) !important; border-radius: var(--c-r-sm) !important; }
.nav-pills .nav-link:hover { color: var(--c-text) !important; }
.nav-pills .nav-link.active { background: var(--c-accent) !important; color: var(--c-on-accent) !important; box-shadow: none !important; }
.nav-tabs { border-color: var(--c-border) !important; }
.nav-tabs .nav-link { color: var(--c-muted) !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--c-text) !important; border-bottom-color: var(--c-accent) !important; }

.page-link { background: var(--c-card) !important; border: 1px solid var(--c-border) !important; color: var(--c-text) !important; box-shadow: none !important; }
.page-link:hover { background: var(--c-hover) !important; color: var(--c-text) !important; }
.page-item.active .page-link { background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: var(--c-on-accent) !important; box-shadow: none !important; }
.page-item.disabled .page-link { background: var(--c-card) !important; color: var(--c-faint) !important; }

.accordion-item { background: var(--c-card) !important; border: 1px solid var(--c-border) !important; }
.accordion-button { color: var(--c-text) !important; }
.accordion-button:not(.collapsed) { background: var(--c-card-2) !important; color: var(--c-text) !important; }
.accordion-button::after { filter: var(--c-close-filter) !important; }
.accordion-body { color: var(--c-text) !important; }

.progress { background: var(--c-card-2) !important; }
.progress-bar { background: var(--c-accent) !important; }
pre { background: var(--c-input) !important; color: var(--c-text) !important; border: 1px solid var(--c-border) !important; box-shadow: none !important; }
.breadcrumb-item.active { color: var(--c-text) !important; }

/* ===========================================================================
   SHELL — sidebar + top bar
   ======================================================================== */

/* Sidebar (a Bootstrap .offcanvas-lg: permanent >= lg, slide-in below). */
html .app-sidebar {
    --bs-offcanvas-width: 280px;
    background: var(--c-card) !important;
    border: 1px solid var(--c-border) !important;
    color: var(--c-text);
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.85rem;
    z-index: 1045;
}
@media (min-width: 992px) {
    html .app-sidebar {
        position: fixed !important;
        top: 16px; bottom: 16px; left: 16px;
        width: var(--sb-w) !important;
        height: auto !important;
        border-radius: 20px !important;
        box-shadow: var(--c-shadow) !important;
        overflow-y: auto;
        z-index: 1030;
    }
    html[data-sidebar="collapsed"] .app-sidebar {
        transform: translateX(calc(-100% - 24px)) !important;
        visibility: hidden !important;
        box-shadow: none !important;
    }
    body.has-sidebar { padding-left: calc(var(--sb-w) + 32px) !important; }
    html[data-sidebar="collapsed"] body.has-sidebar { padding-left: 0 !important; }
}
@media (max-width: 991.98px) {
    html .app-sidebar { border-radius: 0 !important; border-width: 0 1px 0 0 !important; }
}

.sb-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .5rem 1rem; margin-bottom: .75rem; border-bottom: 1px solid var(--c-border); }
.sb-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--c-text) !important; }
.sb-brand img { height: 30px; width: auto; }
.sb-brand span { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-section { margin: 1rem .75rem .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.sb-link {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    padding: .55rem .7rem; border-radius: 12px; border: 0; background: transparent;
    color: var(--c-text) !important; font-size: .86rem; font-weight: 600; text-align: left;
    text-decoration: none; transition: background-color .15s ease;
}
.sb-link:hover { background: var(--c-hover); color: var(--c-text) !important; }
.sb-ico {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px;
    display: grid; place-items: center; font-size: .8rem;
    background: var(--c-card-2); color: var(--c-accent);
}
.sb-link.active { background: var(--c-card-2); }
:root[data-theme="light"] .sb-link.active { background: var(--c-accent-soft); }
.sb-link.active .sb-ico { background: var(--c-accent); color: var(--c-on-accent); }
.sb-link .sb-ext { margin-left: auto; font-size: .65rem; color: var(--c-faint); }
.sb-foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 2px; }
.sb-foot form { margin: 0; }
.sb-extra { padding: 0 .25rem .75rem; }

/* Unified suite menu: the nav scrolls between the fixed brand and log-out, and
   each sub-app is a drop-down group of its own pages. */
@media (min-width: 992px) { html .app-sidebar { overflow: hidden; } }
.app-sidebar .sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin-right: -.5rem; padding-right: .5rem; scrollbar-width: thin; }
.sb-group-name { flex: 1 1 auto; min-width: 0; }
.sb-caret { font-size: .62rem; color: var(--c-faint); }
.sb-group.open > .sb-group-toggle .sb-caret { transform: rotate(180deg); }
.sb-group.has-active > .sb-group-toggle .sb-ico { background: var(--c-accent-soft); }
.sb-group-body { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.sb-group.open > .sb-group-body { grid-template-rows: 1fr; visibility: visible; }
.sb-group-inner { min-height: 0; overflow: hidden; }
.sb-group-list { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 1.6rem; padding-left: .45rem; border-left: 1px solid var(--c-border); }
.sb-link.sb-sub { gap: .6rem; padding: .4rem .6rem; font-size: .82rem; font-weight: 500; }
.sb-link.sb-sub .sb-ico { width: 24px; height: 24px; border-radius: 8px; font-size: .68rem; }
.sb-link.sb-sub.active { font-weight: 600; }
.sb-link.sb-sub.active .sb-ico { border-radius: 8px !important; }
.sb-subsection { margin: .55rem .6rem .15rem; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
@media (prefers-reduced-motion: no-preference) {
    html.motion-ready .sb-group-body { transition: grid-template-rows 260ms var(--ease-out), visibility 260ms; }
    html.motion-ready .sb-caret { transition: transform 260ms var(--ease-out); }
}

/* Top bar */
.app-topbar {
    position: fixed; top: 0; right: 0; left: 0; z-index: 1020;
    height: var(--tb-h);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0 1.5rem;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border-soft);
}
@media (min-width: 992px) {
    body.has-sidebar .app-topbar { left: calc(var(--sb-w) + 32px); padding-left: 0; }
    html[data-sidebar="collapsed"] body.has-sidebar .app-topbar { left: 0; padding-left: 1.5rem; }
}
.tb-left, .tb-right { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.tb-center { position: absolute; left: 50%; transform: translateX(-50%); }
.tb-btn {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: inline-grid; place-items: center;
    border-radius: var(--c-r-ctl); border: 1px solid var(--c-border);
    background: var(--c-card); color: var(--c-text); font-size: .9rem;
    transition: background-color .15s ease;
}
.tb-btn:hover { background: var(--c-hover); }
.tb-brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--c-text) !important; }
.tb-brand img { height: 30px; }
@media (min-width: 992px) {
    html:not([data-sidebar="collapsed"]) body.has-sidebar .tb-brand { display: none; }
}
.tb-crumbs { min-width: 0; display: flex; align-items: baseline; gap: .55rem; white-space: nowrap; }
.tb-app { font-size: .85rem; font-weight: 600; color: var(--c-muted); }
.tb-sep { font-size: .85rem; color: var(--c-faint); }
.tb-title { font-size: 1.05rem; font-weight: 700; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; }
.tb-user { display: flex; align-items: center; gap: .6rem; }
.tb-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent-ink); font-weight: 700; font-size: .8rem; text-transform: uppercase; }
.tb-user-name { font-size: .82rem; font-weight: 600; color: var(--c-text); line-height: 1.15; }
.tb-user-role { font-size: .7rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 575.98px) { .tb-user-meta, .tb-app, .tb-sep { display: none; } .app-topbar { padding: 0 1rem; } }

/* Theme toggle shows the mode you'd switch TO. */
.theme-toggle .fa-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .fa-sun, :root:not([data-theme]) .theme-toggle .fa-sun { display: inline-block; }
:root[data-theme="dark"] .theme-toggle .fa-moon, :root:not([data-theme]) .theme-toggle .fa-moon { display: none; }

/* Reports scope switch, recoloured for the top bar */
.report-scope-toggle { background: var(--c-card) !important; border: 1px solid var(--c-border) !important; box-shadow: none !important; }
.report-scope-option { color: var(--c-muted) !important; }
.report-scope-option:hover { color: var(--c-text) !important; background: var(--c-hover) !important; }
.report-scope-option.active { background: var(--c-accent) !important; color: var(--c-on-accent) !important; box-shadow: none !important; }

/* Content spacing under the fixed top bar (old pages padded for the taller floating navbar). */
.mt-15 { margin-top: calc(var(--tb-h) + 1.75rem) !important; }
.dash-wrap { min-height: 0 !important; justify-content: flex-start !important; }


/* ===========================================================================
   MOTION — seamless, responsive transitions. Only enabled once the page has
   painted (html.motion-ready, set by theme.js) so nothing animates on load.
   ======================================================================== */
:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur: 220ms; }

@media (prefers-reduced-motion: no-preference) {
    /* Seamless page-to-page navigation (same-origin): the sidebar and top bar
       stay put while the content cross-fades. */
    @view-transition { navigation: auto; }
    .app-sidebar { view-transition-name: app-sidebar; }
    .app-topbar { view-transition-name: app-topbar; }
    ::view-transition-old(root) { animation: vt-out 160ms ease both; }
    ::view-transition-new(root) { animation: vt-in 260ms var(--ease-out) both; }
    @keyframes vt-out { to { opacity: 0; } }
    @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

    /* Shell: sidebar slides, content + top bar glide to fill the space. */
    html.motion-ready .app-sidebar {
        transition: transform 320ms var(--ease-out), visibility 0s linear 0s, box-shadow 320ms ease !important;
    }
    html.motion-ready[data-sidebar="collapsed"] .app-sidebar {
        transition: transform 320ms var(--ease-out), visibility 0s linear 320ms, box-shadow 320ms ease !important;
    }
    html.motion-ready body.has-sidebar { transition: padding-left 320ms var(--ease-out); }
    html.motion-ready .app-topbar { transition: left 320ms var(--ease-out), padding-left 320ms var(--ease-out), background-color var(--dur) ease, border-color var(--dur) ease; }

    /* Theme switch: everything eases between palettes together (theme.js adds
       .theme-switching for the duration; a circular reveal runs where the
       browser supports View Transitions). */
    html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
        transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, fill 300ms ease, box-shadow 300ms ease !important;
    }
    html.vt-theme .app-sidebar, html.vt-theme .app-topbar { view-transition-name: none; }
    html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

    /* Interactive feedback */
    html.motion-ready .btn, html.motion-ready .btn-glass, html.motion-ready .btn-glass-light,
    html.motion-ready .tb-btn, html.motion-ready .sb-link, html.motion-ready .page-link,
    html.motion-ready .dropdown-item, html.motion-ready .list-group-item, html.motion-ready .nav-link,
    html.motion-ready .badge, html.motion-ready .report-scope-option {
        transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease,
                    box-shadow var(--dur) ease, transform 160ms var(--ease-out) !important;
    }
    .btn:active, .btn-glass:active, .btn-glass-light:active, .tb-btn:active, .sb-link:active,
    .page-link:active, .report-scope-option:active { transform: scale(0.97) !important; }
    .tb-btn:hover { border-color: var(--c-accent); color: var(--c-accent-ink); }

    .sb-ico { transition: background-color var(--dur) ease, color var(--dur) ease, transform 260ms var(--ease-out); }
    .sb-link:hover .sb-ico { transform: translateX(2px); }
    .sb-link:hover:not(.active) .sb-ico { background: var(--c-accent-soft); }

    .theme-toggle i { transition: transform 420ms var(--ease-out); }
    .theme-toggle:hover i { transform: rotate(25deg); }

    html.motion-ready .form-control, html.motion-ready .form-select, html.motion-ready .input,
    html.motion-ready .ts-control, html.motion-ready .form-check-input {
        transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease !important;
    }

    /* Clickable cards lift slightly and pick up the accent. */
    html.motion-ready a.card-glass, html.motion-ready a.card, html.motion-ready .tile, html.motion-ready .launch-card {
        transition: transform 260ms var(--ease-out), border-color var(--dur) ease, box-shadow 260ms var(--ease-out), background-color var(--dur) ease !important;
    }
    a.card-glass:hover, a.card:hover, .tile:hover, .launch-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: var(--c-shadow-lg) !important;
    }
    a.card-glass:active, a.card:active, .tile:active, .launch-card:active { transform: translateY(-1px) scale(0.99) !important; }
    .lc-icon { transition: transform 300ms var(--ease-out) !important; }
    .launch-card:hover .lc-icon { transform: scale(1.06) !important; }
    .launch-card:hover .lc-arrow { transform: translateX(4px) !important; transition: transform 260ms var(--ease-out), color var(--dur) ease; }

    /* Table rows + list rows respond to the pointer. */
    html.motion-ready .table tbody tr > * { transition: background-color 160ms ease; }

    /* Menus and dialogs open with a short, soft scale-in. */
    .dropdown-menu.show, .ts-dropdown { animation: pop-in 180ms var(--ease-out); transform-origin: top; }
    .modal.fade .modal-dialog { transition: transform 280ms var(--ease-out), opacity 200ms ease !important; transform: translateY(12px) scale(0.98); }
    .modal.show .modal-dialog { transform: none; }
    @keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }

    /* No entrance animation on page load: content is visible on the first paint,
       together with the sidebar and top bar (a fade-in from opacity 0 read as the
       page loading unstyled). Navigation still cross-fades via @view-transition. */
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* ---- Audit fixes (2026-11-02) ---------------------------------------------- */
.bulk-bar { background: var(--c-card) !important; border: 1px solid var(--c-border) !important; box-shadow: var(--c-shadow) !important; border-radius: var(--c-r-ctl) !important; }
.bulk-bar.is-active { background: var(--c-accent-soft) !important; border-color: var(--c-accent) !important; }
.bulk-bar__count, .bulk-bar.is-active .bulk-bar__count { color: var(--c-text) !important; }
.bulk-bar__hint { color: var(--c-muted) !important; opacity: 1 !important; }
.pagination .page-item .page-link { border-radius: var(--c-r-sm) !important; border-width: 1px !important; box-shadow: none !important; }
.close:hover { color: var(--c-text) !important; }

/* Icon squares respond to their card */
@media (prefers-reduced-motion: no-preference) {
    .lc-icon, .myday-tile .mt-icon { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out) !important; }
    .launch-card:hover .lc-icon, a.stat-tile:hover .lc-icon {
        transform: scale(1.04) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -5px var(--c-icon-glow) !important;
    }
}

/* Compact buttons keep icon + label on one line. */
.btn-sm { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }