/* =============================================================================
   CSP Suite — unified refinement layer (shared verbatim across all suite apps)
   -----------------------------------------------------------------------------
   Loaded AFTER each app's base so it wins. Token-driven, additive, reversible.
   A deep "frosted glass over deep space" identity: layered translucent surfaces,
   a cyan→blue→indigo signature accent, soft layered shadows, crisp typography
   and restrained motion. Designed to read as one elevated, professional product.
   ========================================================================== */

:root {
    /* Backdrop */
    --w-bg-1: #0e1a30;
    --w-bg-2: #13213f;
    --w-bg-3: #0b1526;

    /* Ink */
    --w-ink: #eef4ff;
    --w-ink-dim: rgba(226, 236, 255, 0.64);
    --w-ink-faint: rgba(226, 236, 255, 0.40);

    /* Accent — a cyan→blue→indigo signature */
    --w-accent: #7dd3fc;
    --w-accent-2: #4dabf7;
    --w-accent-3: #818cf8;
    --w-accent-ink: #042033;
    --w-grad: linear-gradient(135deg, #7dd3fc 0%, #4dabf7 52%, #818cf8 100%);
    --w-grad-soft: linear-gradient(135deg, rgba(125, 211, 252, 0.20), rgba(129, 140, 248, 0.14));

    /* Glass surfaces (translucent, frosted) */
    --w-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028) 46%, rgba(255, 255, 255, 0.055));
    --w-surface-2: linear-gradient(160deg, rgba(23, 38, 71, 0.72), rgba(16, 28, 56, 0.66));
    --w-stroke: rgba(255, 255, 255, 0.14);
    --w-stroke-soft: rgba(255, 255, 255, 0.08);
    --w-hair-top: inset 0 1px 0 rgba(255, 255, 255, 0.14);  /* light-catching top edge */

    /* Radii */
    --w-r-sm: 0.7rem;
    --w-r-md: 1.05rem;
    --w-r-lg: 1.5rem;
    --w-r-xl: 1.9rem;
    --w-r-pill: 999px;

    /* Elevation — layered ambient + key shadows */
    --w-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px -2px rgba(0, 0, 0, 0.28);
    --w-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.28), 0 14px 34px -14px rgba(0, 0, 0, 0.55);
    --w-shadow-lg: 0 8px 18px rgba(0, 0, 0, 0.30), 0 30px 60px -22px rgba(0, 0, 0, 0.62);
    --w-glow: 0 0 0 1px rgba(125, 211, 252, 0.35), 0 8px 30px -8px rgba(77, 171, 247, 0.45);

    /* Motion */
    --w-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --w-inner-hi: var(--w-hair-top);  /* back-compat alias used by older rules */
    --w-card: var(--w-surface);       /* back-compat alias */
}

/* ---- Base ----------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 10pt !important;
    line-height: 1.6;
    letter-spacing: 0.1px;
    color: var(--w-ink);
    min-height: 100vh;
    background:
        radial-gradient(1100px 620px at 86% -8%, rgba(125, 211, 252, 0.13), transparent 55%),
        radial-gradient(900px 640px at -6% 108%, rgba(129, 140, 248, 0.12), transparent 55%),
        radial-gradient(1400px 1000px at 50% 130%, rgba(0, 0, 0, 0.38), transparent 60%),
        linear-gradient(145deg, var(--w-bg-1) 0%, var(--w-bg-2) 52%, var(--w-bg-3) 100%) !important;
    background-attachment: fixed !important;
}

::selection { background: rgba(125, 211, 252, 0.30); color: #fff; }

:focus-visible {
    outline: 2px solid var(--w-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Slim, on-theme scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.20) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(125, 211, 252, 0.45); background-clip: padding-box; }

/* ---- Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: #fff; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-weight: 800; }
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
    color: var(--w-accent);
    filter: drop-shadow(0 2px 10px rgba(77, 171, 247, 0.45));
}
p { color: var(--w-ink); }
.text-muted, .text-secondary, small.text-muted { color: var(--w-ink-dim) !important; }
.opacity-75 { opacity: 1 !important; color: var(--w-ink-dim); }
.opacity-50 { opacity: 1 !important; color: var(--w-ink-faint); }
hr { border-color: var(--w-stroke); opacity: 0.6; }
.form-text { color: var(--w-ink-dim) !important; }

/* Content links grow an underline; structural links stay plain. */
a { color: var(--w-accent); text-decoration: none; transition: color 0.15s var(--w-ease); }
a:hover { color: #bfe6ff; }
.btn, .nav-link, .page-link, .dropdown-item, .navbar a, .tile, a.card-glass, a.card, a.tile { color: inherit; }
.btn:hover, .nav-link:hover { color: inherit; }

/* Utilities */
.text-gradient {
    background: var(--w-grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow { text-transform: uppercase; letter-spacing: 2.5px; font-size: 0.68rem; font-weight: 700; color: var(--w-accent); }

/* ---- Glass surfaces ------------------------------------------------------- */
.card-glass, .card {
    position: relative;
    background: var(--w-surface) !important;
    border: 1px solid var(--w-stroke) !important;
    border-radius: var(--w-r-lg) !important;
    box-shadow: var(--w-shadow-md), var(--w-hair-top) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    color: var(--w-ink);
}
.card .card-header, .card .card-footer {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--w-stroke-soft) !important;
    color: #fff;
}
.card .card-title { color: #fff; }
/* Interactive cards/tiles lift on hover */
a.card-glass, a.card { transition: transform 0.22s var(--w-ease), box-shadow 0.22s var(--w-ease), border-color 0.22s var(--w-ease); display: block; }
a.card-glass:hover, a.card:hover { transform: translateY(-3px); border-color: rgba(125, 211, 252, 0.45) !important; box-shadow: var(--w-shadow-lg), var(--w-hair-top) !important; }

.custom-navbar {
    background: linear-gradient(90deg, rgba(10, 18, 36, 0.72), rgba(10, 18, 36, 0.55)) !important;
    border: 1px solid var(--w-stroke) !important;
    border-radius: var(--w-r-lg) !important;
    box-shadow: var(--w-shadow-sm), var(--w-hair-top) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

.offcanvas {
    background: var(--w-surface-2) !important;
    border: 1px solid var(--w-stroke) !important;
    outline: none !important;
    box-shadow: var(--w-shadow-lg) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
}

/* ---- Buttons -------------------------------------------------------------- */
.btn { border-radius: var(--w-r-pill); font-weight: 600; letter-spacing: 0.2px; transition: transform 0.16s var(--w-ease), box-shadow 0.16s var(--w-ease), background 0.16s var(--w-ease), filter 0.16s var(--w-ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Glass buttons — frosted with a soft sheen on hover */
.btn-glass, .btn-glass-light {
    position: relative; overflow: hidden;
    color: #fff !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)) !important;
    border: 1px solid var(--w-stroke) !important;
    border-radius: var(--w-r-pill) !important;
    box-shadow: var(--w-shadow-sm), var(--w-hair-top) !important;
    transition: transform 0.16s var(--w-ease), box-shadow 0.16s var(--w-ease), background 0.16s var(--w-ease) !important;
}
.btn-glass::after, .btn-glass-light::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.18) 50%, transparent 80%);
    transform: translateX(-130%); transition: transform 0.5s var(--w-ease); pointer-events: none;
}
.btn-glass:hover, .btn-glass:focus, .btn-glass-light:hover, .btn-glass-light:focus {
    transform: translateY(-1px); color: #fff;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)) !important;
    box-shadow: var(--w-shadow-md), 0 0 0 1px rgba(125, 211, 252, 0.35) inset !important;
}
.btn-glass:hover::after, .btn-glass-light:hover::after { transform: translateX(130%); }
.btn-glass.is-active, .btn-glass.active, .btn-glass-light.active, .btn-glass-light.nav-current {
    background: var(--w-grad-soft) !important;
    border-color: rgba(125, 211, 252, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.5) inset, var(--w-shadow-sm) !important;
}

/* Semantic buttons — one cohesive family */
.btn-primary, .btn-info {
    background: var(--w-grad) !important;
    border: 1px solid rgba(125, 211, 252, 0.55) !important;
    color: var(--w-accent-ink) !important; font-weight: 700;
    box-shadow: var(--w-shadow-sm), var(--w-hair-top) !important;
}
.btn-primary:hover, .btn-info:hover { color: var(--w-accent-ink) !important; filter: brightness(1.06); box-shadow: var(--w-glow) !important; }
.btn-secondary, .btn-light {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)) !important;
    border: 1px solid var(--w-stroke) !important; color: #fff !important;
    box-shadow: var(--w-shadow-sm), var(--w-hair-top) !important;
}
.btn-danger, .btn-warning, .btn-success {
    border-radius: var(--w-r-pill); font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--w-shadow-sm), var(--w-hair-top);
}
.btn-danger:hover, .btn-warning:hover, .btn-success:hover { box-shadow: var(--w-shadow-md); }
.btn-outline-light, .btn-outline-primary, .btn-outline-secondary { border-radius: var(--w-r-pill); color: var(--w-ink) !important; border-color: var(--w-stroke) !important; }
.btn-outline-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover { background: rgba(125, 211, 252, 0.14) !important; color: #fff !important; border-color: rgba(125, 211, 252, 0.45) !important; }
.btn-sm { border-radius: var(--w-r-sm) !important; }

/* ---- Navigation (offcanvas menu) ----------------------------------------- */
.offcanvas .nav .btn-glass, .offcanvas .nav .btn-glass-light { padding: 0.72rem 1.1rem; font-size: 11pt !important; }
.offcanvas .nav .btn-glass i, .offcanvas .nav .btn-glass-light i { opacity: 0.9; }
.nav-current {
    position: relative;
    background: var(--w-grad-soft) !important;
    border-color: rgba(125, 211, 252, 0.5) !important;
}
.nav-current::before {
    content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 54%; border-radius: 3px; background: var(--w-grad);
    box-shadow: 0 0 10px rgba(125, 211, 252, 0.7);
}

/* ---- Dashboard tiles ------------------------------------------------------ */
.tile {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.9rem; padding: 2.1rem 1.25rem; min-height: 180px; text-align: center;
    color: #fff; text-decoration: none; border-radius: var(--w-r-lg);
    background: var(--w-surface); border: 1px solid var(--w-stroke);
    box-shadow: var(--w-shadow-md), var(--w-hair-top);
    -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
    transition: transform 0.24s var(--w-ease), box-shadow 0.24s var(--w-ease), border-color 0.24s var(--w-ease);
    overflow: hidden;
}
.tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--w-grad); opacity: 0.95; }
.tile::after {
    content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.24s var(--w-ease);
    background: radial-gradient(120% 90% at 50% -10%, rgba(125, 211, 252, 0.16), transparent 60%);
}
.tile:hover { transform: translateY(-5px); border-color: rgba(125, 211, 252, 0.5); box-shadow: var(--w-shadow-lg), var(--w-glow); color: #fff; }
.tile:hover::after { opacity: 1; }
.tile .tile-icon {
    font-size: 1.7rem; color: var(--w-accent);
    width: 62px; height: 62px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--w-grad-soft); border: 1px solid rgba(125, 211, 252, 0.28);
    box-shadow: var(--w-hair-top); filter: drop-shadow(0 3px 10px rgba(77, 171, 247, 0.4));
}
.tile .tile-label { font-weight: 700; font-size: 1.08rem; letter-spacing: 0.2px; }
.tile .tile-sub { font-size: 0.8rem; color: var(--w-ink-dim); font-weight: 500; }

/* ---- Form controls -------------------------------------------------------- */
.form-control, .form-select, .input {
    background: rgba(8, 15, 33, 0.72) !important;
    color: var(--w-ink) !important;
    border: 1px solid var(--w-stroke) !important;
    border-radius: var(--w-r-pill) !important;
    padding: 0.62rem 1.1rem !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), var(--w-hair-top) !important;
    transition: box-shadow 0.18s var(--w-ease), border-color 0.18s var(--w-ease), background 0.18s var(--w-ease) !important;
}
.form-control::placeholder, .input::placeholder { color: var(--w-ink-faint) !important; }
.form-control:focus, .form-select:focus, .input:focus {
    outline: none !important;
    background: rgba(8, 15, 33, 0.85) !important;
    border-color: rgba(125, 211, 252, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.22), inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
}
textarea.form-control { border-radius: var(--w-r-md) !important; line-height: 1.5; }
.form-select {
    padding-right: 2.4rem !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='%237dd3fc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: right 1.05rem center !important; background-size: 14px 12px !important;
}
.form-select option, .form-control option, select option { color: #eaf2ff; background: #0f1b33; }
.form-select-sm, .form-control-sm { border-radius: var(--w-r-sm) !important; padding-top: 0.42rem !important; padding-bottom: 0.42rem !important; font-size: 0.85rem !important; }
.form-select-sm { padding-right: 2rem !important; }
.form-label { color: var(--w-ink-dim); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.4px; text-transform: uppercase; }
.input-group-text { background: rgba(255, 255, 255, 0.06) !important; color: var(--w-ink) !important; border: 1px solid var(--w-stroke) !important; }

/* Checks, radios, switches */
.form-check-input { background-color: rgba(8, 15, 33, 0.8); border: 1px solid var(--w-stroke); box-shadow: var(--w-hair-top); }
.form-check-input:checked { background-color: var(--w-accent-2); border-color: var(--w-accent-2); box-shadow: 0 0 10px rgba(77, 171, 247, 0.45); }
.form-check-input:focus { border-color: rgba(125, 211, 252, 0.6); box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.22); }
.form-check-label { color: var(--w-ink-dim); }

/* ---- Tables --------------------------------------------------------------- */
.card-glass .table-responsive, .card .table-responsive { border-radius: var(--w-r-lg); overflow: auto; }
.table-dark, .table { --bs-table-bg: transparent; color: var(--w-ink) !important; margin-bottom: 0; font-variant-numeric: tabular-nums; }
.table-dark > :not(caption) > * > *, .table > :not(caption) > * > * { background-color: transparent !important; border-color: var(--w-stroke-soft) !important; }
.table thead th {
    position: sticky; top: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(14, 26, 48, 0.98), rgba(14, 26, 48, 0.9)) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.7px;
    color: var(--w-ink-dim) !important; font-weight: 700; border-bottom: 1px solid var(--w-stroke) !important;
    white-space: nowrap; padding: 0.75rem 0.8rem;
}
.table tbody tr { transition: background 0.14s var(--w-ease); }
.table tbody td { vertical-align: middle; padding: 0.6rem 0.8rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.022) !important; }
.table-hover tbody tr { position: relative; }
.table-hover tbody tr:hover > * { background-color: rgba(125, 211, 252, 0.08) !important; }
.table-hover tbody tr:hover > :first-child { box-shadow: inset 3px 0 0 var(--w-accent); }
.table caption { color: var(--w-ink-dim); }

/* ---- Pill tabs & underline tabs ------------------------------------------- */
.nav-pills { gap: 0.4rem; padding: 0.3rem; border-radius: var(--w-r-pill); background: rgba(0, 0, 0, 0.18); border: 1px solid var(--w-stroke-soft); display: inline-flex; }
.nav-pills .nav-link { color: var(--w-ink-dim); font-weight: 600; border-radius: var(--w-r-pill); border: 1px solid transparent; padding: 0.4rem 1.05rem; transition: color 0.15s var(--w-ease), background 0.15s var(--w-ease); }
.nav-pills .nav-link:hover { color: #fff; }
.nav-pills .nav-link.active { color: var(--w-accent-ink) !important; background: var(--w-grad) !important; border-color: transparent !important; box-shadow: var(--w-shadow-sm); }
.nav-tabs { border-bottom: 1px solid var(--w-stroke); }
.nav-tabs .nav-link { color: var(--w-ink-dim); border: none; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 600; }
.nav-tabs .nav-link:hover { color: #fff; border-bottom-color: var(--w-stroke); }
.nav-tabs .nav-link.active { color: #fff; background: transparent; border-bottom-color: var(--w-accent); }

/* ---- Alerts --------------------------------------------------------------- */
.alert { position: relative; border-radius: var(--w-r-md); border: 1px solid var(--w-stroke); box-shadow: var(--w-shadow-sm), var(--w-hair-top); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-left: 1.1rem; }
.alert::before { content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 3px; background: currentColor; opacity: 0.8; }
.alert-success { background: rgba(34, 197, 94, 0.14) !important; border-color: rgba(34, 197, 94, 0.4) !important; color: #b6f3cb !important; }
.alert-danger  { background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.4) !important; color: #ffc9c9 !important; }
.alert-warning { background: rgba(245, 158, 11, 0.14) !important; border-color: rgba(245, 158, 11, 0.4) !important; color: #ffe3b0 !important; }
.alert-info    { background: rgba(77, 171, 247, 0.14) !important; border-color: rgba(77, 171, 247, 0.4) !important; color: #cfe8ff !important; }

/* ---- Badges --------------------------------------------------------------- */
.badge { letter-spacing: 0.3px; padding: 0.42em 0.72em; border-radius: var(--w-r-pill); font-weight: 600; }

/* ---- List groups ---------------------------------------------------------- */
.list-group-item { border-radius: var(--w-r-sm) !important; margin-bottom: 5px; border: 1px solid var(--w-stroke-soft) !important; background: rgba(255, 255, 255, 0.03) !important; color: var(--w-ink); transition: background 0.15s var(--w-ease), border-color 0.15s var(--w-ease), transform 0.12s var(--w-ease); }
.list-group-item-action:hover { background: rgba(125, 211, 252, 0.12) !important; border-color: rgba(125, 211, 252, 0.4) !important; transform: translateX(2px); }

/* ---- Dropdowns ------------------------------------------------------------ */
.dropdown-menu { background: var(--w-surface-2) !important; border: 1px solid var(--w-stroke) !important; border-radius: var(--w-r-md) !important; box-shadow: var(--w-shadow-lg) !important; padding: 0.4rem; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.dropdown-item { color: var(--w-ink) !important; border-radius: var(--w-r-sm); padding: 0.5rem 0.9rem; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(125, 211, 252, 0.16) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--w-stroke-soft); }

/* ---- Modals --------------------------------------------------------------- */
.modal-content { background: var(--w-surface-2) !important; border: 1px solid var(--w-stroke) !important; border-radius: var(--w-r-lg) !important; box-shadow: var(--w-shadow-lg) !important; color: var(--w-ink); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.modal-header, .modal-footer { border-color: var(--w-stroke-soft) !important; }
.modal-title { color: #fff; font-weight: 700; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); opacity: 0.8; }
.btn-close:hover { opacity: 1; }

/* ---- Pagination ----------------------------------------------------------- */
.pagination { gap: 5px; }
.page-link { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--w-stroke-soft) !important; color: var(--w-ink) !important; border-radius: var(--w-r-sm) !important; }
.page-link:hover { background: rgba(125, 211, 252, 0.16) !important; color: #fff !important; }
.page-item.active .page-link { background: var(--w-grad) !important; border-color: transparent !important; color: var(--w-accent-ink) !important; }
.page-item.disabled .page-link { background: rgba(255, 255, 255, 0.03) !important; color: var(--w-ink-faint) !important; }

/* ---- Accordion ------------------------------------------------------------ */
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--w-stroke-soft); }
.accordion-item { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--w-stroke-soft); border-radius: var(--w-r-md); margin-bottom: 8px; overflow: hidden; }
.accordion-button { background: transparent !important; color: var(--w-ink) !important; font-weight: 600; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: rgba(125, 211, 252, 0.12) !important; color: #fff !important; }
.accordion-button::after { filter: invert(1) brightness(1.5); }
.accordion-body { color: var(--w-ink); }

/* ---- Breadcrumb / progress / pre ----------------------------------------- */
.breadcrumb { color: var(--w-ink-dim); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--w-ink-faint); }
.breadcrumb-item.active { color: #fff; }
.progress { background: rgba(255, 255, 255, 0.08); border-radius: var(--w-r-pill); overflow: hidden; }
.progress-bar { background: var(--w-grad); }
pre { color: var(--w-ink); background: rgba(4, 9, 22, 0.66); border: 1px solid var(--w-stroke-soft); border-radius: var(--w-r-md); padding: 1rem 1.15rem; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); font-size: 0.82rem; }
canvas { max-width: 100%; }
dl.row dt { font-weight: 600; color: var(--w-ink-dim); }
dl.row dd { margin-bottom: 0.4rem; color: var(--w-ink); }

/* ---- TomSelect (customer pickers) ---------------------------------------- */
.ts-wrapper { margin: 0; }
.ts-wrapper.single .ts-control, .ts-control {
    background: rgba(8, 15, 33, 0.72) !important; color: var(--w-ink) !important;
    border: 1px solid var(--w-stroke) !important; border-radius: var(--w-r-pill) !important;
    padding: 0.56rem 1.1rem !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), var(--w-hair-top) !important; min-height: 0;
}
.ts-wrapper.focus .ts-control { border-color: rgba(125, 211, 252, 0.6) !important; box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.22) !important; }
.ts-control input, .ts-control input::placeholder { color: var(--w-ink) !important; }
.ts-control input::placeholder { color: var(--w-ink-faint) !important; }
.ts-dropdown { background: var(--w-surface-2) !important; color: var(--w-ink) !important; border: 1px solid var(--w-stroke) !important; border-radius: var(--w-r-md) !important; box-shadow: var(--w-shadow-lg) !important; overflow: hidden; margin-top: 5px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ts-dropdown .option { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--w-stroke-soft); }
.ts-dropdown .option:last-child { border-bottom: none; }
.ts-dropdown .active { background: rgba(125, 211, 252, 0.16) !important; color: #fff !important; }
.ts-dropdown .ts-loading, .ts-dropdown .no-results { padding: 0.6rem 0.9rem; color: var(--w-ink-dim); }
.customer-option { display: flex; flex-direction: column; line-height: 1.25; }
.customer-option .customer-username { font-weight: 600; color: var(--w-ink); }
.customer-option .customer-name { font-size: 0.78rem; color: var(--w-ink-dim); }
.ts-wrapper.single .ts-control .item { color: var(--w-ink) !important; }
.ts-control .item small { color: var(--w-ink-dim); }

/* ---- Entrance motion (respect reduced-motion) ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .card-glass, .card, .tile { animation: w-rise 0.45s var(--w-ease) both; }
    @keyframes w-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
@media (max-width: 575.98px) {
    .card-glass, .card { border-radius: var(--w-r-md) !important; }
}

/* =============================================================================
   Elevated pass II (2026-10-12) — a bolder, unmistakably different identity:
   a living aurora backdrop, a 4-stop accent, gradient display headings, a
   floating luminous navbar and chunkier frosted glass. Appended last; wins.
   ========================================================================== */

:root {
    --w-accent-4: #a78bfa;                      /* violet, adds life */
    --w-grad: linear-gradient(120deg, #7dd3fc 0%, #4dabf7 38%, #818cf8 68%, #a78bfa 100%);
    --w-grad-soft: linear-gradient(135deg, rgba(125, 211, 252, 0.22), rgba(167, 139, 250, 0.16));
    --w-r-md: 1.15rem;
    --w-r-lg: 1.75rem;
    --w-r-xl: 2.2rem;
}

/* The deep base moves to <html>; <body> turns transparent so the animated
   aurora layer can live behind the content but above the base. */
html {
    background:
        radial-gradient(1500px 1000px at 50% 135%, rgba(0, 0, 0, 0.42), transparent 60%),
        linear-gradient(150deg, #0a1426 0%, #10203e 50%, #080f1f 100%) !important;
    background-attachment: fixed !important;
    min-height: 100%;
}
body { background: transparent !important; position: relative; }

/* Living aurora — large, slow, blurred colour fields */
body::before {
    content: ""; position: fixed; inset: -25vmax; z-index: -2; pointer-events: none;
    background:
        radial-gradient(42vmax 42vmax at 16% 20%, rgba(125, 211, 252, 0.24), transparent 60%),
        radial-gradient(40vmax 40vmax at 84% 16%, rgba(129, 140, 248, 0.22), transparent 60%),
        radial-gradient(46vmax 46vmax at 72% 86%, rgba(167, 139, 250, 0.18), transparent 62%),
        radial-gradient(40vmax 40vmax at 22% 90%, rgba(45, 212, 191, 0.13), transparent 62%);
    filter: blur(14px) saturate(135%);
    animation: w-aurora 30s var(--w-ease) infinite alternate;
}
@keyframes w-aurora {
    0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
    100% { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.12); }
}
/* Fine grain for a tactile, premium surface */
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Gradient display headings (icons keep their accent colour) */
h1, h2 {
    background: var(--w-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    letter-spacing: -0.02em;
}
h1 i, h2 i { -webkit-text-fill-color: var(--w-accent); color: var(--w-accent); }

/* Floating, luminous navbar */
.custom-navbar {
    background: linear-gradient(90deg, rgba(10, 18, 36, 0.78), rgba(14, 24, 48, 0.62)) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: var(--w-r-xl) !important;
    box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(125, 211, 252, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
}
.custom-navbar.fixed-top { top: 12px; left: 12px; right: 12px; width: auto; }
.custom-navbar h1, .custom-navbar h2 { letter-spacing: 0.5px; }

/* Chunkier, glossier glass */
.card-glass, .card, .tile {
    border-radius: var(--w-r-lg) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%); backdrop-filter: blur(20px) saturate(135%);
}
.card-glass::after, .card.card-glass::after { content: none; }
.card-glass { background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.07)) !important; }
.card-glass::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(125,211,252,0.6), rgba(167,139,250,0.5), transparent);
    opacity: 0.7;
}

/* Punchier primary action + focus glow */
.btn-primary, .btn-info, .page-item.active .page-link, .nav-pills .nav-link.active {
    box-shadow: 0 6px 22px -6px rgba(77, 171, 247, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.btn-glass.active, .btn-glass-light.active, .nav-current { box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.5) inset, 0 6px 20px -8px rgba(129, 140, 248, 0.55) !important; }

/* A touch more air in the main content column */
main, .container, .container-fluid { position: relative; }

/* =============================================================================
   Elevated pass III (2026-10-12) — a real dashboard language + more presence.
   Stronger backdrop so the glass has something to refract, higher-contrast
   surfaces, and a premium "launchpad" card system (.launch-*, .dash-*).
   ========================================================================== */

/* More present aurora + a soft central lift so the canvas never reads empty */
body::before {
    background:
        radial-gradient(44vmax 44vmax at 14% 16%, rgba(125, 211, 252, 0.34), transparent 58%),
        radial-gradient(42vmax 42vmax at 86% 12%, rgba(129, 140, 248, 0.32), transparent 58%),
        radial-gradient(48vmax 48vmax at 74% 88%, rgba(167, 139, 250, 0.26), transparent 60%),
        radial-gradient(42vmax 42vmax at 20% 92%, rgba(45, 212, 191, 0.18), transparent 60%);
    filter: blur(16px) saturate(140%);
}

/* Higher-contrast glass — reads clearly against the richer backdrop */
.card-glass {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035) 48%, rgba(255, 255, 255, 0.08)) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 20px 48px -18px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* ---- Dashboard hero ------------------------------------------------------- */
.dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin: 0.25rem 0 1.9rem; }
.dash-eyebrow { text-transform: uppercase; letter-spacing: 3px; font-size: 0.7rem; font-weight: 700; color: var(--w-accent); margin-bottom: 0.35rem; }
.dash-hello { font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 800; line-height: 1.12; margin: 0; }
.dash-hello .nm { background: var(--w-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dash-sub { color: var(--w-ink-dim); margin: 0.5rem 0 0; }
.role-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: var(--w-r-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #fff; background: var(--w-grad-soft); border: 1px solid rgba(125, 211, 252, 0.4); box-shadow: var(--w-hair-top); }
.role-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--w-accent); box-shadow: 0 0 8px rgba(125, 211, 252, 0.9); }

/* ---- Launchpad cards ------------------------------------------------------ */
.launch-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.launch-card {
    position: relative; display: flex; gap: 1.1rem; align-items: flex-start;
    padding: 1.55rem 1.6rem; min-height: 132px; border-radius: var(--w-r-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.16); color: var(--w-ink); text-decoration: none; overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), 0 16px 40px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(18px) saturate(135%); backdrop-filter: blur(18px) saturate(135%);
    transition: transform 0.24s var(--w-ease), box-shadow 0.24s var(--w-ease), border-color 0.24s var(--w-ease);
}
.launch-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--w-chip, var(--w-grad)); opacity: 0.9; }
.launch-card::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.24s var(--w-ease); background: radial-gradient(130% 90% at 15% -10%, rgba(125, 211, 252, 0.14), transparent 55%); }
.launch-card:hover { transform: translateY(-5px); border-color: rgba(125, 211, 252, 0.45); color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 34px 70px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(125, 211, 252, 0.25); }
.launch-card:hover::after { opacity: 1; }
.lc-icon {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
    font-size: 1.4rem; color: #eaf6ff; background: var(--w-chip, var(--w-grad));
    border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -8px rgba(0, 0, 0, 0.6);
    transition: transform 0.24s var(--w-ease);
}
.launch-card:hover .lc-icon { transform: scale(1.06) rotate(-3deg); }
.lc-body { min-width: 0; }
.lc-title { font-weight: 700; font-size: 1.1rem; color: #fff; letter-spacing: 0.2px; }
.lc-desc { color: var(--w-ink-dim); font-size: 0.85rem; margin-top: 0.2rem; line-height: 1.4; }
.lc-arrow { position: absolute; top: 1.25rem; right: 1.3rem; color: var(--w-ink-faint); font-size: 0.95rem; transition: transform 0.22s var(--w-ease), color 0.22s var(--w-ease); }
.launch-card:hover .lc-arrow { transform: translateX(5px); color: var(--w-accent); }

/* =============================================================================
   No gradient text (2026-10-12) — crisp, solid headings/brand/name everywhere.
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .dash-hello, .dash-hello .nm, .text-gradient {
    background: none !important;
    -webkit-background-clip: border-box !important; background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: #fff !important;
}
.dash-hello .nm { color: var(--w-accent) !important; }          /* solid accent highlight, not a gradient */
h1 i, h2 i, h3 i, h4 i, h5 i, h6 i { color: var(--w-accent) !important; -webkit-text-fill-color: var(--w-accent) !important; }

/* =============================================================================
   Navbar clearance fix (2026-10-12) — full-width top header (rounded bottom
   only) so the fixed bar never overlaps the page content below it. The earlier
   inset "floating" bar sat lower than the pages' top spacing accounted for.
   ========================================================================== */
.custom-navbar.fixed-top {
    top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important;
    border-top: none !important; border-left: none !important; border-right: none !important;
    border-radius: 0 0 var(--w-r-lg) var(--w-r-lg) !important;
}
/* A touch more breathing room under the header on the main content column. */
body { padding-top: 6px; }

/* =============================================================================
   Launchpad refinement (2026-10-12) — professional, not "RGB". Color lives only
   in the icon chip; cards are cohesive neutral glass; content is balanced.
   ========================================================================== */
.launch-card::before { display: none !important; }      /* drop the loud colour strip */
.launch-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    min-height: 120px;
}
.launch-card:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)) !important;
}
/* Balance the launcher in the viewport so it never floats in a void. */
.dash-wrap { min-height: calc(100vh - 150px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 3vh; }

/* =============================================================================
   Header, final (2026-10-12) — a clean flat full-bleed top bar: no rounded
   corners, a crisp bottom hairline + soft shadow, frosted. Reads as a proper
   application header rather than a floating panel.
   ========================================================================== */
.custom-navbar.fixed-top {
    top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.75) !important;
    padding-top: 0.55rem !important; padding-bottom: 0.55rem !important;
    background: linear-gradient(180deg, rgba(11, 19, 38, 0.82), rgba(11, 19, 38, 0.68)) !important;
}

/* =============================================================================
   Header, rounded & contained (2026-10-12) — a floating glass bar inset equally
   from all edges. width:auto (not 100%) so it never exceeds the viewport / adds
   a horizontal scrollbar; extra top clearance so it never overlaps content.
   ========================================================================== */
.custom-navbar.fixed-top {
    top: 12px !important; left: 14px !important; right: 14px !important; width: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--w-r-lg) !important;
    box-shadow: 0 16px 44px -18px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    background: linear-gradient(180deg, rgba(11, 19, 38, 0.84), rgba(14, 24, 48, 0.66)) !important;
    padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;
}
html, body { overflow-x: hidden; }
body { padding-top: 22px; }   /* clears the floating bar on every page */

/* =============================================================================
   Status colour coding (2026-10-12) — crisp, consistent green / amber / red.
   Covers CSP-Leaves' .btn-glass-* status pills and Bootstrap .badge.bg-* badges
   (CSP-Tools tickets, RADIUS status, etc.) with a soft tint + glowing dot.
   ========================================================================== */

/* Leaves status pills (Approved / Pending / Rejected) — strong, legible tint */
.btn-glass-success { background: rgba(34, 197, 94, 0.22) !important; border: 1px solid rgba(34, 197, 94, 0.6) !important; color: #c9f9d9 !important; text-shadow: none !important; box-shadow: 0 2px 10px -4px rgba(34, 197, 94, 0.5) !important; }
.btn-glass-warning { background: rgba(245, 158, 11, 0.22) !important; border: 1px solid rgba(245, 158, 11, 0.62) !important; color: #ffe3ad !important; text-shadow: none !important; box-shadow: 0 2px 10px -4px rgba(245, 158, 11, 0.5) !important; }
.btn-glass-danger  { background: rgba(239, 68, 68, 0.22) !important; border: 1px solid rgba(239, 68, 68, 0.6) !important; color: #ffcccc !important; text-shadow: none !important; box-shadow: 0 2px 10px -4px rgba(239, 68, 68, 0.5) !important; }
.btn-glass-success:hover { border-color: rgba(34, 197, 94, 0.85) !important; box-shadow: 0 4px 16px -4px rgba(34, 197, 94, 0.65) !important; }
.btn-glass-warning:hover { border-color: rgba(245, 158, 11, 0.85) !important; box-shadow: 0 4px 16px -4px rgba(245, 158, 11, 0.65) !important; }
.btn-glass-danger:hover  { border-color: rgba(239, 68, 68, 0.85) !important; box-shadow: 0 4px 16px -4px rgba(239, 68, 68, 0.65) !important; }

/* Bootstrap badges -> soft tinted status chips with a glowing dot */
.badge { display: inline-flex; align-items: center; gap: 0.45em; vertical-align: middle; }
.badge.bg-success   { background: rgba(34, 197, 94, 0.18) !important; color: #c9f9d9 !important; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.5); }
.badge.bg-danger    { background: rgba(239, 68, 68, 0.18) !important; color: #ffcccc !important; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.5); }
.badge.bg-warning   { background: rgba(245, 158, 11, 0.18) !important; color: #ffe3ad !important; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.55); }
.badge.bg-info      { background: rgba(77, 171, 247, 0.18) !important; color: #d6ecff !important; box-shadow: inset 0 0 0 1px rgba(77, 171, 247, 0.5); }
.badge.bg-secondary { background: rgba(148, 163, 184, 0.16) !important; color: #dde6f2 !important; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.42); }
.badge.bg-success::before, .badge.bg-danger::before, .badge.bg-warning::before,
.badge.bg-info::before, .badge.bg-secondary::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; flex: 0 0 auto;
}





/* =============================================================================
   Data tables with an actions column (CSP-Tools ticket lists): status chip and
   edit/delete icon buttons share one height (28px); status is a solid-filled
   pill (no status dot), text optically centred. Scoped to .actions-table.
   ========================================================================== */
.actions-table td .btn.btn-sm {
    width: 28px; height: 28px; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px !important; font-size: 0.78rem !important; line-height: 1;
    vertical-align: middle;
}
.actions-table td form.d-inline { margin-left: 0.3rem; }
.actions-table td .badge {
    height: 28px; padding: 2px 0.9rem 0 !important; font-size: 0.76rem;
    font-weight: 700; letter-spacing: 0.3px;
    border-radius: 999px !important; vertical-align: middle;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; line-height: 1 !important;
}
.actions-table td .badge::before { display: none !important; }  /* no status dot */
.actions-table td .badge.bg-success {
    background: rgba(34, 197, 94, 0.34) !important; color: #e3fff0 !important;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.9), 0 2px 8px -3px rgba(34, 197, 94, 0.6) !important;
}
.actions-table td .badge.bg-warning {
    background: rgba(245, 158, 11, 0.34) !important; color: #fff2d6 !important;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.95), 0 2px 8px -3px rgba(245, 158, 11, 0.6) !important;
}
.actions-table td .badge.bg-danger {
    background: rgba(239, 68, 68, 0.34) !important; color: #ffe4e4 !important;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.9), 0 2px 8px -3px rgba(239, 68, 68, 0.6) !important;
}
.actions-table td .badge.bg-secondary {
    background: rgba(148, 163, 184, 0.32) !important; color: #f2f6fb !important;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.75) !important;
}

/* =============================================================================
   KPI strip — compact headline stats above a launchpad (CSP-Reports landing).
   Reuses .lc-icon for the gradient chip; harmless where unused.
   ========================================================================== */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 0 0 1.4rem; }
.stat-tile { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--w-r-lg); }
.stat-tile .lc-icon { width: 50px; height: 50px; border-radius: 14px; flex: 0 0 auto; font-size: 1.15rem; }
.stat-tile .stat-value { font-size: 1.85rem; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -0.02em; }
.stat-tile .stat-label { font-size: 0.72rem; color: var(--w-ink-dim); margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.07em; }

/* ============================================================================
   RADIUS COHESION (2026-10-29)
   One proportional corner-rounding scale for the whole suite. Redefining the
   --w-r-* tokens cascades to every component that already uses them (the
   canonical styles nearly all of them this way); Bootstrap's radius vars +
   utilities and the base stylesheet's hardcoded 2rem/3rem radii are normalised
   explicitly below. Appended last so it wins. Fully reversible (delete block).
   Scale:  xs 6 · sm 10 · md 14 · lg 20 · xl 28 · pill ∞
   ============================================================================ */
:root {
    --w-r-xs: 6px;
    --w-r-sm: 10px;
    --w-r-md: 14px;
    --w-r-lg: 20px;
    --w-r-xl: 28px;
    --w-r-pill: 999px;

    /* Map Bootstrap's own radius scale onto ours, so every Bootstrap component
       and .rounded-* utility rounds on the same system. */
    --bs-border-radius: var(--w-r-md);
    --bs-border-radius-sm: var(--w-r-sm);
    --bs-border-radius-lg: var(--w-r-lg);
    --bs-border-radius-xl: var(--w-r-lg);
    --bs-border-radius-xxl: var(--w-r-xl);
    --bs-border-radius-pill: var(--w-r-pill);
}

/* Rounding utility classes (Bootstrap + a few Tailwind-style names used in views). */
.rounded, .rounded-2, .rounded-md { border-radius: var(--w-r-md) !important; }
.rounded-1, .rounded-sm          { border-radius: var(--w-r-sm) !important; }
.rounded-3, .rounded-lg          { border-radius: var(--w-r-lg) !important; }
.rounded-4, .rounded-5, .rounded-xl { border-radius: var(--w-r-xl) !important; }
.rounded-0                       { border-radius: 0 !important; }
.rounded-pill, .rounded-full     { border-radius: var(--w-r-pill) !important; }

/* Large surfaces — cards, tiles, modals, tables, nav bar, offcanvas, hero. */
.card-glass, .card, .tile, .dash-hero, .modal-content, .glass-table,
.offcanvas, .custom-navbar, .card-glass .table-responsive,
.card .table-responsive { border-radius: var(--w-r-lg) !important; }

/* Pills — all buttons, segmented toggles, nav pills, badges, chips, progress. */
.btn, .btn-glass, .btn-glass-light, .btn-glass-success, .btn-glass-warning,
.btn-glass-danger, .nav-pills, .nav-pills .nav-link, .badge, .role-chip,
.glass-glider, .glass-glider-2, .progress { border-radius: var(--w-r-pill) !important; }

/* Medium controls — inputs, selects, dropdowns, alerts, accordions, tom-select. */
.form-control, .form-select, .input, .input-group-text, .dropdown-menu,
.alert, .accordion-item, .ts-control, .ts-dropdown, pre,
textarea.form-control { border-radius: var(--w-r-md) !important; }

/* Small controls — compact inputs, list items, menu items, pagination. */
.form-control-sm, .form-select-sm, .btn-sm, .list-group-item,
.dropdown-item, .page-link { border-radius: var(--w-r-sm) !important; }

/* Square-ish icon chips: tie to the scale instead of ad-hoc px values. */
.lc-icon, .stat-tile .lc-icon { border-radius: var(--w-r-md) !important; }