/* =============================================================================
   custom.css - OpenWatch design system (openwatch.cloud)
   -----------------------------------------------------------------------------
   Single source of truth for the visual identity. The file is structured in
   four layers:

     1. Foundations  : @font-face, design tokens (light + dark), reset bits.
     2. Layout       : navbar, footer, page heading.
     3. Components   : cards, tables, buttons, forms, dropdowns, alerts, etc.
     4. Utilities    : the kw-* helper classes consumed by templates so
                       they can stay free of inline styles (CSP-safe).

   Conventions
   - No `style="…"` in templates. Use Bootstrap utilities or kw-* helpers.
   - All tokens live as CSS custom properties on :root and are mirrored
     under [data-bs-theme="dark"]. Never hard-code colours in components.
   - Motion uses --kw-motion-out / --kw-motion-spring; honour
     prefers-reduced-motion at the bottom of this file.
   ============================================================================= */


/* =============================================================================
   1. FOUNDATIONS
   ============================================================================= */

/* --- Typography (self-hosted, CSP-safe) ----------------------------------- */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/inter-variable.woff2') format('woff2-variations'),
         url('/static/fonts/inter-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter Variable';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/inter-variable-italic.woff2') format('woff2-variations'),
         url('/static/fonts/inter-variable-italic.woff2') format('woff2');
}

/* --- Design tokens : light theme ----------------------------------------- */
:root {
    /* Surfaces */
    --cce-bg:               #F6F7F9;
    --cce-bg-elevated:      #FFFFFF;
    --cce-card-bg:          #FFFFFF;
    --cce-surface-muted:    #F1F3F6;
    --cce-surface-hover:    rgba(15, 23, 42, 0.035);

    /* Text */
    --cce-text:             #0F172A;
    --cce-text-strong:      #020617;
    --cce-text-secondary:   #64748B;
    --cce-text-muted:       #94A3B8;
    --cce-text-on-accent:   #FFFFFF;

    /* Borders */
    --cce-border:           rgba(15, 23, 42, 0.08);
    --cce-border-strong:    rgba(15, 23, 42, 0.14);
    --cce-border-subtle:    rgba(15, 23, 42, 0.05);

    /* Brand & state palette */
    --cce-accent:           #1F6FBF;
    --cce-accent-hover:     #1860A8;
    --cce-accent-soft:      rgba(31, 111, 191, 0.08);
    --cce-accent-soft-2:    rgba(31, 111, 191, 0.14);
    --cce-accent-ring:      rgba(31, 111, 191, 0.20);

    --cce-success:          #047857;
    --cce-success-soft:     rgba(4, 120, 87, 0.10);
    --cce-warning:          #B45309;
    --cce-warning-soft:     rgba(180, 83, 9, 0.10);
    --cce-danger:           #BE123C;
    --cce-danger-soft:      rgba(190, 18, 60, 0.10);
    --cce-info:             #0369A1;
    --cce-info-soft:        rgba(3, 105, 161, 0.10);

    /* Charts categorical palette (10 colors) */
    --cce-chart-1: #1F6FBF;
    --cce-chart-2: #0EA5A4;
    --cce-chart-3: #B45309;
    --cce-chart-4: #6366F1;
    --cce-chart-5: #DB2777;
    --cce-chart-6: #047857;
    --cce-chart-7: #DC2626;
    --cce-chart-8: #7C3AED;
    --cce-chart-9: #EA580C;
    --cce-chart-10: #0891B2;

    /* Radius */
    --cce-radius-xs:        6px;
    --cce-radius-sm:        10px;
    --cce-radius:           14px;
    --cce-radius-lg:        20px;
    --cce-radius-pill:      999px;

    /* Shadows: layered, low-blur, high-precision */
    --cce-shadow-xs:        0 1px 1px rgba(15, 23, 42, 0.04);
    --cce-shadow-sm:        0 1px 2px rgba(15, 23, 42, 0.04),
                            0 1px 3px rgba(15, 23, 42, 0.05);
    --cce-shadow:           0 2px 4px rgba(15, 23, 42, 0.04),
                            0 6px 16px -4px rgba(15, 23, 42, 0.10);
    --cce-shadow-lg:        0 4px 6px rgba(15, 23, 42, 0.04),
                            0 16px 32px -8px rgba(15, 23, 42, 0.14);
    --cce-shadow-focus:     0 0 0 3px var(--cce-accent-ring);

    /* Motion */
    --cce-motion-out:       180ms cubic-bezier(0.16, 1, 0.3, 1);
    --cce-motion-spring:    260ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --cce-transition:       180ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Navbar */
    --cce-navbar-bg:        rgba(255, 255, 255, 0.78);
    --cce-navbar-blur:      saturate(180%) blur(20px);
    --cce-navbar-border:    rgba(15, 23, 42, 0.08);

    /* Footer */
    --cce-footer-bg:        #0B0F1A;
    --cce-footer-text:      rgba(255, 255, 255, 0.62);
    --cce-footer-border:    rgba(255, 255, 255, 0.06);
}

/* --- Design tokens : dark theme ----------------------------------------- */
[data-bs-theme="dark"] {
    --cce-bg:               #0B0F1A;
    --cce-bg-elevated:      #11151F;
    --cce-card-bg:          #141826;
    --cce-surface-muted:    #1A1F2E;
    --cce-surface-hover:    rgba(255, 255, 255, 0.04);

    --cce-text:             #E2E8F0;
    --cce-text-strong:      #F8FAFC;
    --cce-text-secondary:   #94A3B8;
    --cce-text-muted:       #64748B;

    --cce-border:           rgba(255, 255, 255, 0.08);
    --cce-border-strong:    rgba(255, 255, 255, 0.14);
    --cce-border-subtle:    rgba(255, 255, 255, 0.05);

    --cce-accent:           #4FA3DD;
    --cce-accent-hover:     #6FB4E4;
    --cce-accent-soft:      rgba(79, 163, 221, 0.10);
    --cce-accent-soft-2:    rgba(79, 163, 221, 0.18);
    --cce-accent-ring:      rgba(79, 163, 221, 0.30);

    --cce-success:          #34D399;
    --cce-success-soft:     rgba(52, 211, 153, 0.12);
    --cce-warning:          #FBBF24;
    --cce-warning-soft:     rgba(251, 191, 36, 0.14);
    --cce-danger:           #FB7185;
    --cce-danger-soft:      rgba(251, 113, 133, 0.14);
    --cce-info:             #38BDF8;
    --cce-info-soft:        rgba(56, 189, 248, 0.14);

    --cce-shadow-xs:        0 1px 1px rgba(0, 0, 0, 0.30);
    --cce-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.30),
                            0 1px 3px rgba(0, 0, 0, 0.40);
    --cce-shadow:           0 2px 4px rgba(0, 0, 0, 0.30),
                            0 6px 16px -4px rgba(0, 0, 0, 0.50);
    --cce-shadow-lg:        0 4px 6px rgba(0, 0, 0, 0.30),
                            0 16px 32px -8px rgba(0, 0, 0, 0.60);

    --cce-navbar-bg:        rgba(11, 15, 26, 0.78);
    --cce-navbar-border:    rgba(255, 255, 255, 0.08);

    --cce-footer-bg:        #060812;
    --cce-footer-text:      rgba(255, 255, 255, 0.55);
    --cce-footer-border:    rgba(255, 255, 255, 0.04);
}

/* --- Body & global typography -------------------------------------------- */
html {
    font-feature-settings: 'cv11', 'ss01', 'ss03';
}

body {
    font-family: 'Inter Variable', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: var(--cce-bg);
    color: var(--cce-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Numeric tabular figures wherever we display money or counts. */
.kpi-value,
.kw-tabular,
.table td.text-end,
.table th.text-end,
.fs-3, .fs-4, .display-1, .display-2, .display-3,
.badge {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

a {
    color: var(--cce-accent);
    text-decoration: none;
    transition: color var(--cce-motion-out);
}

a:hover {
    color: var(--cce-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
    box-shadow: var(--cce-shadow-focus);
    border-radius: var(--cce-radius-xs);
}

::selection {
    background: var(--cce-accent-soft-2);
    color: var(--cce-text-strong);
}


/* =============================================================================
   2. LAYOUT
   ============================================================================= */

/* --- Navbar (frosted glass) ---------------------------------------------- */
.navbar {
    background: var(--cce-navbar-bg) !important;
    -webkit-backdrop-filter: var(--cce-navbar-blur);
    backdrop-filter: var(--cce-navbar-blur);
    border-bottom: 1px solid var(--cce-navbar-border);
    padding: 0.75rem 0;
    z-index: 1030;
}

.navbar-brand {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--cce-text-strong) !important;
    margin-right: 1.25rem;
}

.navbar-logo {
    height: 24px;
    width: auto;
}

.navbar .nav-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cce-text-secondary) !important;
    padding: 0.45rem 0.7rem;
    border-radius: var(--cce-radius-xs);
    transition: color var(--cce-motion-out), background var(--cce-motion-out);
    white-space: nowrap;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--cce-accent) !important;
    background: var(--cce-accent-soft);
}

.navbar .btn-outline-light {
    border-color: var(--cce-border-strong);
    color: var(--cce-text-secondary);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--cce-radius-xs);
    padding: 0.35rem 0.65rem;
    transition: all var(--cce-motion-out);
    white-space: nowrap;
}

.navbar .btn-outline-light:hover,
.navbar .btn-outline-light:focus,
.navbar .btn-outline-light:active,
.navbar .btn-outline-light.show {
    background: var(--cce-accent-soft);
    border-color: var(--cce-accent);
    color: var(--cce-accent);
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--cce-border-strong);
    color: var(--cce-text-secondary);
    border-radius: var(--cce-radius-xs);
    padding: 0.35rem 0.55rem;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--cce-motion-out);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.theme-toggle:hover,
.theme-toggle:focus {
    background: var(--cce-accent-soft);
    border-color: var(--cce-accent);
    color: var(--cce-accent);
}

/* --- Footer -------------------------------------------------------------- */
footer {
    background: var(--cce-footer-bg) !important;
    border-top: 1px solid var(--cce-footer-border);
}

.footer-logo {
    opacity: 0.85;
    filter: brightness(1.5);
}

.footer-link {
    color: var(--cce-footer-text) !important;
    transition: color var(--cce-motion-out);
}

.footer-link:hover {
    color: #FFFFFF !important;
}

/* --- Page headings ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--cce-text-strong);
    letter-spacing: -0.018em;
    font-weight: 650;
}

h1 { font-size: 1.875rem; line-height: 1.2; }
h2 { font-size: 1.5rem;   line-height: 1.25; font-weight: 700; }
h3 { font-size: 1.25rem;  line-height: 1.3; }
h4 { font-size: 1.0625rem; line-height: 1.35; }
h5 { font-size: 0.9375rem; line-height: 1.4; font-weight: 600; }
h6 { font-size: 0.8125rem; line-height: 1.4; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cce-text-secondary); }


/* =============================================================================
   3. COMPONENTS
   ============================================================================= */

/* --- Cards --------------------------------------------------------------- */
.card {
    background: var(--cce-card-bg);
    border: 1px solid var(--cce-border);
    border-radius: var(--cce-radius) !important;
    box-shadow: var(--cce-shadow-xs);
    transition: transform var(--cce-motion-out), box-shadow var(--cce-motion-out), border-color var(--cce-motion-out);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--cce-shadow-sm);
    border-color: var(--cce-border-strong);
}

.card-header {
    background: var(--cce-card-bg) !important;
    border-bottom: 1px solid var(--cce-border);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--cce-text-strong);
}

.card-header h5 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.card-body {
    padding: 1.5rem;
}

@media (max-width: 576px) {
    .card-body { padding: 1.1rem; }
    .card-header { padding: 0.85rem 1.1rem; }
}

/* --- KPI cards (dashboard) ----------------------------------------------- */
.kpi-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cce-radius-sm);
    font-size: 1.05rem;
}
/* Flexbox min-width reset: lets a flex child (e.g. the KPI number+label block)
   shrink so a long label like "Organisations" truncates inside the card
   instead of overflowing it. */
.kw-min-w-0 { min-width: 0; }

.kpi-value {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--cce-text-strong);
}

.kpi-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cce-text-secondary);
}

@media (max-width: 576px) {
    .kpi-value { font-size: 1.4rem; }
}

/* --- Dropdown menus ------------------------------------------------------ */
.dropdown-menu {
    border: 1px solid var(--cce-border);
    border-radius: var(--cce-radius-sm);
    box-shadow: var(--cce-shadow-lg);
    padding: 0.4rem;
    background: var(--cce-card-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    animation: cce-dropdown-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
    min-width: max-content;
}

@keyframes cce-dropdown-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-item {
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--cce-radius-xs);
    padding: 0.45rem 0.75rem;
    color: var(--cce-text);
    transition: background var(--cce-motion-out), color var(--cce-motion-out);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--cce-accent-soft);
    color: var(--cce-accent);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--cce-accent);
    color: var(--cce-text-on-accent);
}

.dropdown-header {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cce-text-muted);
    padding: 0.4rem 0.75rem 0.2rem;
}

.dropdown-divider {
    margin: 0.35rem 0;
    border-color: var(--cce-border);
}

/* --- Tables -------------------------------------------------------------- */
.table {
    font-size: 0.8125rem;
    color: var(--cce-text);
}

.table th,
.table td {
    vertical-align: middle;
    padding: 0.75rem 0.95rem;
    border-color: var(--cce-border);
}

.table thead th,
.table-light th {
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cce-text-secondary);
    background: var(--cce-surface-muted) !important;
    border-color: var(--cce-border) !important;
    border-bottom: 1px solid var(--cce-border-strong) !important;
}

.table-hover tbody tr {
    transition: background var(--cce-motion-out);
}

.table-hover tbody tr:hover {
    background: var(--cce-accent-soft) !important;
}

[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td,
[data-bs-theme="dark"] .table-light {
    background: var(--cce-surface-muted) !important;
    color: var(--cce-text-secondary);
    border-color: var(--cce-border) !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-bg: var(--cce-accent-soft);
    --bs-table-border-color: var(--cce-border);
    color: var(--cce-text);
}

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background: var(--cce-accent-soft) !important;
}

/* --- Badges -------------------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.01em;
    padding: 0.35em 0.6em;
    border-radius: var(--cce-radius-xs);
}

.badge.bg-primary,
.badge.text-bg-primary { background: var(--cce-accent) !important; color: var(--cce-text-on-accent) !important; }
.badge.bg-success,
.badge.text-bg-success { background: var(--cce-success-soft) !important; color: var(--cce-success) !important; }
.badge.bg-warning,
.badge.text-bg-warning { background: var(--cce-warning-soft) !important; color: var(--cce-warning) !important; }
.badge.bg-danger,
.badge.text-bg-danger  { background: var(--cce-danger-soft)  !important; color: var(--cce-danger)  !important; }
.badge.bg-info,
.badge.text-bg-info    { background: var(--cce-info-soft)    !important; color: var(--cce-info)    !important; }
.badge.bg-secondary,
.badge.text-bg-secondary { background: var(--cce-surface-muted) !important; color: var(--cce-text-secondary) !important; }
.badge.bg-light,
.badge.text-bg-light   { background: var(--cce-surface-muted) !important; color: var(--cce-text-secondary) !important; }
.badge.bg-dark,
.badge.text-bg-dark    { background: var(--cce-text-strong) !important; color: var(--cce-bg-elevated) !important; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--cce-radius-xs);
    padding: 0.5rem 1rem;
    transition: background var(--cce-motion-out), border-color var(--cce-motion-out), color var(--cce-motion-out), transform var(--cce-motion-out), box-shadow var(--cce-motion-out);
    letter-spacing: -0.005em;
    line-height: 1.4;
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn-primary {
    background: var(--cce-accent);
    border-color: var(--cce-accent);
    color: var(--cce-text-on-accent);
    box-shadow: 0 1px 2px rgba(31, 111, 191, 0.20);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--cce-accent-hover);
    border-color: var(--cce-accent-hover);
    color: var(--cce-text-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 111, 191, 0.28);
}

.btn-outline-primary {
    color: var(--cce-accent);
    border-color: var(--cce-accent);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: var(--cce-accent);
    border-color: var(--cce-accent);
    color: var(--cce-text-on-accent);
    box-shadow: 0 4px 12px rgba(31, 111, 191, 0.22);
}

.btn-outline-secondary {
    border-color: var(--cce-border-strong);
    color: var(--cce-text-secondary);
    background: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--cce-accent-soft);
    border-color: var(--cce-accent);
    color: var(--cce-accent);
}

.btn-success { background: var(--cce-success); border-color: var(--cce-success); color: #fff; }
.btn-warning { background: var(--cce-warning); border-color: var(--cce-warning); color: #fff; }
.btn-danger  { background: var(--cce-danger);  border-color: var(--cce-danger);  color: #fff; }
.btn-info    { background: var(--cce-info);    border-color: var(--cce-info);    color: #fff; }

.btn-sm {
    font-size: 0.75rem;
    padding: 0.375rem 0.7rem;
}

.btn-lg {
    font-size: 0.9375rem;
    padding: 0.65rem 1.25rem;
}

/* --- Forms --------------------------------------------------------------- */
.form-control,
.form-select {
    border: 1px solid var(--cce-border-strong);
    border-radius: var(--cce-radius-xs);
    font-size: 0.875rem;
    padding: 0.55rem 0.85rem;
    transition: border-color var(--cce-motion-out), box-shadow var(--cce-motion-out), background var(--cce-motion-out);
    background: var(--cce-card-bg);
    color: var(--cce-text);
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
    border-color: var(--cce-text-muted);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cce-accent);
    box-shadow: var(--cce-shadow-focus);
    outline: none;
}

.form-control::placeholder {
    color: var(--cce-text-muted);
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cce-text-strong);
    margin-bottom: 0.4rem;
}

.form-text {
    font-size: 0.75rem;
    color: var(--cce-text-secondary);
}

.form-check-input {
    border-color: var(--cce-border-strong);
}

.form-check-input:checked {
    background-color: var(--cce-accent);
    border-color: var(--cce-accent);
}

.form-check-input:focus {
    border-color: var(--cce-accent);
    box-shadow: var(--cce-shadow-focus);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: var(--cce-surface-muted);
    border-color: var(--cce-border-strong);
    color: var(--cce-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--cce-accent);
    box-shadow: var(--cce-shadow-focus);
}

/* --- Alerts -------------------------------------------------------------- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--cce-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.85rem 1.15rem;
}

.alert-primary { background: var(--cce-accent-soft); color: var(--cce-accent); border-color: var(--cce-accent-soft-2); }
.alert-success { background: var(--cce-success-soft); color: var(--cce-success); border-color: var(--cce-success-soft); }
.alert-warning { background: var(--cce-warning-soft); color: var(--cce-warning); border-color: var(--cce-warning-soft); }
.alert-danger  { background: var(--cce-danger-soft);  color: var(--cce-danger);  border-color: var(--cce-danger-soft); }
.alert-info    { background: var(--cce-info-soft);    color: var(--cce-info);    border-color: var(--cce-info-soft); }

/* --- Progress (stacked cost breakdown) ---------------------------------- */
.progress {
    border-radius: var(--cce-radius-pill);
    background: var(--cce-surface-muted);
    overflow: hidden;
    height: 10px;
}

.progress-bar {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 24px;
}

/* --- Admin sidebar (card style) ------------------------------------------ */
.admin-sidebar-card {
    background: var(--cce-card-bg);
    border: 1px solid var(--cce-border);
    border-radius: var(--cce-radius) !important;
    box-shadow: var(--cce-shadow-xs);
    position: sticky;
    top: 80px;
    overflow: hidden;
}

.admin-sidebar-card .border-bottom {
    border-color: var(--cce-border) !important;
}

#adminSidebar .nav-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cce-text-secondary);
    border-radius: var(--cce-radius-xs);
    margin: 1px 0.5rem;
    padding: 0.55rem 0.75rem !important;
    transition: color var(--cce-motion-out), background var(--cce-motion-out);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

#adminSidebar .nav-link:hover {
    color: var(--cce-text-strong);
    background: var(--cce-surface-hover);
}

#adminSidebar .nav-link.active {
    color: var(--cce-accent) !important;
    background: var(--cce-accent-soft);
    font-weight: 600;
}

#adminSidebar .nav-link i {
    font-size: 0.95rem;
    width: 1.25rem;
    text-align: center;
}

/* --- Charts (Chart.js) --------------------------------------------------- */
canvas {
    max-width: 100%;
}

/* --- Login / setup page -------------------------------------------------- */
.auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    width: 100%;
}

.auth-card {
    border-radius: var(--cce-radius-lg) !important;
    box-shadow: var(--cce-shadow-lg);
    border: 1px solid var(--cce-border);
}

.auth-page input:focus::placeholder {
    opacity: 0;
    transition: opacity .15s ease;
}

.auth-logo {
    display: block;
    max-height: 80px;
    width: auto;
    margin: 0 auto;
}

[data-bs-theme="dark"] .auth-card {
    background: var(--cce-card-bg);
}

/* --- Nav pills (Resource Explorer tabs) ---------------------------------- */
.nav-pills .nav-link {
    color: var(--cce-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--cce-radius-xs);
    padding: 0.5rem 1rem;
    transition: all var(--cce-motion-out);
}

.nav-pills .nav-link:hover {
    color: var(--cce-text-strong);
    background: var(--cce-surface-hover);
}

.nav-pills .nav-link.active {
    background: var(--cce-accent);
    color: var(--cce-text-on-accent);
    box-shadow: 0 1px 2px rgba(31, 111, 191, 0.20);
}

.nav-pills .nav-link .badge {
    font-size: 0.65rem;
    padding: 0.2em 0.5em;
}

/* --- Bootstrap colour overrides for soft semantics ----------------------- */
.text-muted        { color: var(--cce-text-secondary) !important; }
.text-secondary    { color: var(--cce-text-secondary) !important; }
.text-success      { color: var(--cce-success) !important; }
.text-warning      { color: var(--cce-warning) !important; }
.text-danger       { color: var(--cce-danger) !important; }
.text-info         { color: var(--cce-info) !important; }
.text-primary      { color: var(--cce-accent) !important; }

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

/* Fixed-height canvas wrapper for the dashboard 30-day stacked chart.
   Chart.js needs a sized parent because the chart sets maintainAspectRatio
   to false (we want the chart to fill the card width regardless of data). */
.kw-chart-30d { position: relative; height: 320px; }
@media (max-width: 576px) { .kw-chart-30d { height: 240px; } }

/* Preferences page - sidebar nav (sticky on lg+, scroll-spy via JS). */
@media (min-width: 992px) {
    .kw-prefs-nav { position: sticky; top: 1rem; }
}
.kw-prefs-link {
    color: var(--cce-text-secondary);
    border-radius: var(--cce-radius-xs);
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    transition: background var(--cce-motion-out), color var(--cce-motion-out);
}
.kw-prefs-link:hover { background: var(--cce-surface-hover); color: var(--cce-text); }
.kw-prefs-link.active {
    background: var(--cce-accent-soft);
    color: var(--cce-accent);
    font-weight: 600;
}
.kw-prefs-link.active.text-danger {
    background: var(--cce-danger-soft);
    color: var(--cce-danger) !important;
}

/* Contact channel card - subtle lift on hover so it reads as clickable. */
.kw-contact-card {
    transition: transform var(--cce-motion-out), box-shadow var(--cce-motion-out);
}
.kw-contact-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cce-shadow-lg);
}

/* Large initials avatar used on the Profile hero. */
.kw-avatar-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cce-accent);
    color: var(--cce-text-on-accent);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

/* Auth pages - single-card stacked layout used by login / register.
   Replaces the previous trio of stacked cards by a divider that scopes
   visually but keeps the form continuous. */
.kw-auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
    color: var(--cce-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kw-auth-divider::before,
.kw-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cce-border);
}

/* Metrics-explorer pill, themed via the ``--kw-pill-color`` custom
   property that the JS sets per-pill. Keeps the colour-per-metric
   behaviour without inline ``style="…"`` attributes. */
.kw-metric-pill {
    border: 2px solid var(--kw-pill-color, var(--cce-accent));
    background: var(--kw-pill-color, var(--cce-accent));
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
    font-weight: 500;
    transition: background var(--cce-motion-out), color var(--cce-motion-out), opacity var(--cce-motion-out);
}
.kw-metric-pill.inactive {
    background: transparent;
    color: var(--kw-pill-color, var(--cce-accent));
    opacity: 0.5;
}

/* Mobile responsive polish - reduce display-* sizes on small screens so
   the hero figures don't push the rest of the page off-screen on phones,
   and tighten kpi-icon / card-body paddings so cards stack cleanly. */
@media (max-width: 576px) {
    .display-4 { font-size: 2rem !important; }
    .display-5 { font-size: 1.75rem !important; }
    .display-6 { font-size: 1.5rem !important; }
    .kpi-icon  { width: 36px; height: 36px; font-size: 1rem; }
    .kw-prefs-nav { position: static; }
    .kw-rs-toolbar { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.75rem; }
}

/* Add a subtle right-edge gradient to ``.table-responsive`` on small
   screens so wide tables clearly read as scrollable instead of "the
   data is cut off". The gradient is pure CSS and fades when the table
   is scrolled to the right edge - no JS needed. */
.table-responsive { position: relative; }
@media (max-width: 768px) {
    .table-responsive::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 24px;
        background: linear-gradient(to left, var(--cce-card-bg), transparent);
        pointer-events: none;
    }
}

/* Resource Explorer table - migrated from a per-template <style> block so
   CSP nonces aren't needed for the layout rules. Mirrors the previous
   ``.rs-*`` selectors used by the Tier-1 resources page. */
.kw-rs-table th.kw-rs-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.kw-rs-table th.kw-rs-sortable:hover { background-color: var(--cce-surface-hover); }
.kw-rs-table th .kw-rs-sort-icon { opacity: 0.3; font-size: 0.75em; margin-left: 0.25rem; }
.kw-rs-table th .kw-rs-sort-icon.active { opacity: 1; }
.kw-rs-spinner { display: flex; justify-content: center; padding: 3rem; }
.kw-rs-empty { text-align: center; padding: 3rem; color: var(--cce-text-secondary); }
.kw-rs-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; gap: 1rem; flex-wrap: wrap; }
.kw-rs-info { font-size: 0.85rem; color: var(--cce-text-secondary); white-space: nowrap; }
.kw-rs-search { max-width: 260px; }

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

/* Bootstrap's .text-dark stays a dark hex regardless of theme, which turns
   page-level icons and KPI numbers invisible on the dark surface. Flip it
   under [data-bs-theme="dark"] but keep the dark-on-yellow contrast on the
   warning button (the only place where the dark text is intentional and
   not theme-following). */
[data-bs-theme="dark"] .text-dark { color: var(--cce-text-strong) !important; }
[data-bs-theme="dark"] .btn-warning.text-dark { color: #1F2937 !important; }


/* =============================================================================
   4. UTILITIES (kw-* helpers, CSP-safe replacements for inline styles)
   ============================================================================= */

/* Font-size nudges */
.kw-fs-nano   { font-size: 0.6rem; }
.kw-fs-micro  { font-size: 0.65rem; }
.kw-fs-nudged { font-size: 0.7rem; }

/* Uppercase label variants (font + letter-spacing) */
.kw-label-xs      { font-size: 0.65rem; letter-spacing: 0.05em; }
.kw-label-xs-bold { font-size: 0.65rem; letter-spacing: 0.06em; }
.kw-label-sm     { font-size: 0.7rem;  letter-spacing: 0.05em; }

/* Opacity primitives */
.kw-opacity-0 { opacity: 0; }

/* Stacking context helpers beyond Bootstrap's tiny range */
.kw-z-top          { z-index: 9999; }
.kw-z-above-navbar { z-index: 1030; }

/* Tabular figures (explicit opt-in) */
.kw-tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* Table column widths used by multiple report-style tables */
.kw-w-5  { width: 5%; }
.kw-w-15 { width: 15%; }
.kw-w-20 { width: 20%; }
.kw-w-25 { width: 25%; }
.kw-w-35 { width: 35%; }
.kw-w-40 { width: 40%; }
.kw-w-50 { width: 50%; }

/* Absolute widths / min-widths used sparsely */
.kw-w-80px  { width: 80px; }
.kw-w-100px { width: 100px; }
.kw-w-120px { width: 120px; }
.kw-w-150px { width: 150px; }
.kw-minw-100 { min-width: 100px; }

/* Max-width helpers for narrow content columns */
.kw-mw-150 { max-width: 150px; }
.kw-mw-180 { max-width: 180px; }
.kw-mw-200 { max-width: 200px; }
.kw-mw-220 { max-width: 220px; }
.kw-mw-280 { max-width: 280px; }
.kw-mw-400 { max-width: 400px; }
.kw-mw-480 { max-width: 480px; }
.kw-mw-520 { max-width: 520px; }
.kw-mw-560 { max-width: 560px; }
.kw-mw-620 { max-width: 620px; }
.kw-mw-640 { max-width: 640px; }
.kw-mw-720 { max-width: 720px; }

/* Min-width helpers */
.kw-minw-150 { min-width: 150px; }
.kw-minw-180 { min-width: 180px; }

/* Max-height helpers (Chart.js canvas sizing) */
.kw-maxh-300 { max-height: 300px; }
.kw-maxh-350 { max-height: 350px; }
.kw-maxh-420 { max-height: 420px; }
.kw-maxh-220 { max-height: 220px; }

/* Mini theme-change toast: a non-intrusive confirmation that pops in
   the bottom-right for ~1.5s when the user toggles light/dark mode.
   Lighter than a Bootstrap .toast container so it doesn't need JS
   initialisation. */
.kw-theme-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 2000;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--cce-card-bg, #fff);
    color: var(--cce-text-primary, #1e1e2e);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.kw-theme-toast.show {
    opacity: 1;
    transform: translateY(0);
}
[data-bs-theme="dark"] .kw-theme-toast {
    background: var(--cce-card-bg, #1e1e2e);
    color: var(--cce-text-primary, #f5f5f7);
}

/* Cursor helpers */
.kw-cursor-pointer { cursor: pointer; }
.kw-cursor-help    { cursor: help; }

/* Compound utilities */
.kw-ellipsis      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-qr-preview    { max-width: 220px; image-rendering: pixelated; }
.kw-chart-compact { position: relative; width: 100%; max-width: 280px; }
.kw-sparkline-wrap { position: relative; width: 100%; height: 60px; }
.kw-border-2      { border-width: 2px !important; }

/* Brand-specific accent */
.kw-bg-discord { background-color: #5865F2 !important; }

/* Font-size singletons */
.kw-fs-3rem { font-size: 3rem; }

/* Fixed heights */
.kw-h-22         { height: 22px; }
.kw-progress-mini { height: 6px; min-width: 60px; }

/* Colour tokens the theme palette doesn't expose */
.kw-text-muted-token { color: var(--cce-text-secondary); }
.kw-text-on-dark-60  { color: rgba(255, 255, 255, 0.62); }
.kw-text-on-dark-50  { color: rgba(255, 255, 255, 0.50); }
.kw-text-on-dark-40  { color: rgba(255, 255, 255, 0.40); }

/* Dynamic width bars: JS reads data-width and applies element.style.width.
   Kept here so the default is a visible skeleton while JS bootstraps. */
.kw-bar-dynamic { width: 0; transition: width 0.3s ease; }

/* Onboarding wizard step cards */
.kw-step-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 1rem;
}
.kw-step-done {
    background: rgba(40, 167, 69, 0.04);
}
.kw-step-locked {
    opacity: 0.6;
}
[data-bs-theme="dark"] .kw-step-done {
    background: rgba(40, 167, 69, 0.10);
}


/* =============================================================================
   5. RESPONSIVE
   ============================================================================= */

/* --- Tables responsive --------------------------------------------------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px) {
    .table-responsive table {
        font-size: 0.75rem;
    }
    .table-responsive th,
    .table-responsive td {
        padding: 0.5rem 0.55rem;
        white-space: nowrap;
    }
}

/* --- Navbar compact on lg screens (992-1399px) --------------------------- */
@media (min-width: 992px) and (max-width: 1399px) {
    .navbar-brand { margin-right: 0.75rem; }
    .navbar .nav-link { font-size: 0.8125rem; padding: 0.4rem 0.5rem; }
    .navbar .btn-outline-light { font-size: 0.75rem; padding: 0.3rem 0.5rem; }
    .theme-toggle { padding: 0.3rem 0.45rem; font-size: 0.875rem; }
}

/* --- Mobile / tablet navbar (< lg) --------------------------------------- */
@media (max-width: 991.98px) {
    .navbar > .container {
        flex-wrap: wrap;
    }

    .navbar-toggler {
        border-color: var(--cce-border-strong);
        padding: 0.3rem 0.5rem;
        font-size: 0.875rem;
        order: 3;
    }
    .navbar-toggler:focus {
        box-shadow: var(--cce-shadow-focus);
    }
    .navbar-toggler-icon {
        width: 1.2em;
        height: 1.2em;
    }

    .navbar-mobile-actions { order: 2; }

    .navbar-brand {
        order: 1;
        margin-right: auto;
    }

    .navbar-collapse {
        order: 4;
        border-top: 1px solid var(--cce-border);
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .navbar-nav .nav-link {
        padding: 0.65rem 0.75rem;
        font-size: 0.9375rem;
        border-radius: var(--cce-radius-xs);
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:active {
        background: var(--cce-accent-soft);
    }

    .navbar-controls {
        border-top: 1px solid var(--cce-border);
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        padding-bottom: 0.25rem;
    }
    .navbar-controls .dropdown { width: 100%; }
    .navbar-controls .btn {
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .navbar-controls .dropdown-menu { width: 100%; }
}

/* --- Tablet (md) --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container { max-width: 100%; }
    .navbar-controls {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    .navbar-controls .dropdown {
        flex: 1 1 45%;
        min-width: 0;
    }
}

/* --- Small screens ------------------------------------------------------- */
@media (max-width: 576px) {
    .navbar { padding: 0.55rem 0; }
    .navbar-logo { height: 22px; }
    .card-body .fs-4 { font-size: 1.1rem !important; }
    .card-body .fs-3 { font-size: 1.3rem !important; }
    h2 { font-size: 1.25rem; }
    footer .row > div { text-align: center !important; }
}


/* =============================================================================
   6. ONBOARDING TOUR
   ============================================================================= */

.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.onboarding-overlay.onboarding-active {
    opacity: 1;
    pointer-events: auto;
}
.onboarding-overlay.onboarding-fade-out {
    opacity: 0;
    pointer-events: none;
}

.onboarding-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 26, 0.55);
    z-index: 10001;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.onboarding-spotlight {
    position: fixed;
    z-index: 10002;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(11, 15, 26, 0.55);
    background: transparent;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.onboarding-tooltip {
    position: fixed;
    z-index: 10003;
    background: var(--cce-card-bg, #fff);
    color: var(--cce-text, #0F172A);
    border-radius: var(--cce-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--cce-shadow-lg);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 280px;
    border: 1px solid var(--cce-border);
}
.onboarding-tooltip-center {
    text-align: center;
}

.onboarding-tooltip-title {
    font-size: 1.05rem;
    font-weight: 650;
    margin-bottom: 0.5rem;
    color: var(--cce-text-strong);
}
.onboarding-tooltip-center .onboarding-tooltip-title {
    font-size: 1.25rem;
}

.onboarding-tooltip-body {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--cce-text-secondary, #555);
    margin-bottom: 1rem;
}

.onboarding-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.onboarding-btn-skip {
    text-decoration: none !important;
    font-size: 0.8rem;
    padding: 0;
}

.onboarding-step-counter {
    flex-shrink: 0;
    color: var(--cce-text-muted);
    font-size: 0.75rem;
}

.onboarding-tooltip-center .onboarding-tooltip-body p {
    margin-bottom: 0.5rem;
}

[data-bs-theme="dark"] .onboarding-tooltip {
    background: var(--cce-card-bg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .onboarding-backdrop {
    background: rgba(0, 0, 0, 0.7);
}
[data-bs-theme="dark"] .onboarding-spotlight {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}


/* =============================================================================
   7. ACCESSIBILITY
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:active { transform: none; }
    .btn-primary:hover, .btn-outline-primary:hover { transform: none; }
}


/* =============================================================================
   8. SKELETON LOADERS - async-widget placeholders
   ============================================================================= */

/* Animated shimmer rectangle used while a widget waits for its data.
   Lighter than a spinner: signals "content shape coming here" rather than
   "the page is busy" and prevents layout shift on first paint. */
.kw-skeleton {
    background: linear-gradient(90deg,
        rgba(127, 127, 127, 0.08) 0%,
        rgba(127, 127, 127, 0.18) 50%,
        rgba(127, 127, 127, 0.08) 100%);
    background-size: 200% 100%;
    animation: kw-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 0.4rem;
    min-height: 1rem;
}
.kw-skeleton-line {
    height: 0.9rem;
    margin-bottom: 0.4rem;
}
.kw-skeleton-bar  { height: 1.4rem; }
.kw-skeleton-tall { height: 6rem; }
.kw-skeleton-chart { height: 12rem; }

@keyframes kw-skeleton-shimmer {
    0%   { background-position: 200% 50%; }
    100% { background-position: -200% 50%; }
}
[data-bs-theme="dark"] .kw-skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        rgba(255, 255, 255, 0.06) 100%);
}


/* =============================================================================
   9. STICKY TABLE HEADERS - keep column labels visible on long scrolls
   ============================================================================= */

/* Opt-in: add .kw-table-sticky on the wrapping .table-responsive (or any
   scrollable parent) and the <thead> first row sticks to the top. */
.kw-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--cce-card-bg, #fff);
    box-shadow: 0 1px 0 var(--cce-border, rgba(0, 0, 0, 0.08));
}
[data-bs-theme="dark"] .kw-table-sticky thead th {
    background: var(--cce-card-bg, #1e1e2e);
}


/* =============================================================================
   10. PASSWORD STRENGTH METER - used by password-strength.js
   ============================================================================= */

/* Compact progress bar plugged after any <input type="password"
   data-password-strength>. Widths are pre-computed at 25 % steps so
   the JS can switch class instead of writing inline styles (CSP). */
.kw-pw-bar {
    height: 4px;
    border-radius: 2px;
}
.kw-pw-fill-0   { width: 0; }
.kw-pw-fill-25  { width: 25%; }
.kw-pw-fill-50  { width: 50%; }
.kw-pw-fill-75  { width: 75%; }
.kw-pw-fill-100 { width: 100%; }
.kw-pw-label {
    min-height: 1em; /* Prevent layout jump while typing the first chars. */
}


/* =============================================================================
   11. RESOURCE TREND SPARKLINE - used by /resources column renderer
   ============================================================================= */

/* Tight inline SVG sparkline. Uses ``currentColor`` so the polyline
   matches the cell's text colour and follows the light/dark theme. */
.kw-trend-cell {
    display: inline-block;
    line-height: 1;
    color: var(--bs-primary, #0d6efd);
    min-width: 80px;
}
.kw-sparkline {
    width: 80px;
    height: 22px;
    display: block;
}


/* =============================================================================
   12. BULK-TAG SELECTION - used by the /resources DataTables wiring (phase F3)
   ============================================================================= */

/* Tight checkbox column on the inventory table - keeps the column
   width down to the checkbox + a bit of padding so it never steals
   horizontal space from the data columns. */
.kw-rs-select-cell {
    width: 36px;
    text-align: center;
}

/* Floating action bar that surfaces when ≥1 row is selected. Fixed
   at the bottom so the user can see what's about to be tagged while
   they scroll back up the table. */
.kw-bulk-tag-bar {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1030;
    background: var(--cce-card-bg, #fff);
    border: 1px solid var(--cce-border, rgba(0,0,0,0.1));
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
}

/* Capped scroll for the selection list inside the modal so a
   50-resource bulk doesn't push the form below the fold. */
.kw-bulk-tag-list {
    max-height: 160px;
    overflow-y: auto;
    padding-left: 0;
}


/* =============================================================================
   13. ALERT SPARKLINE - per-row 30-day trend on /notifications/alerts (phase G2)
   ============================================================================= */

.kw-alert-spark-cell {
    width: 110px;
    vertical-align: middle;
}
.kw-alert-spark {
    width: 100px;
    height: 28px;
    display: block;
    color: var(--bs-primary, #0d6efd);
}