/* =====================================================================
   CA Portal — Design System v2
   Light, high-contrast corporate SaaS. Native UI type + Lucide icons.
   Hand-written Bootstrap 5 override layer, no preprocessor.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Fonts
   Native UI faces only. Each platform ships its own hinted font —
   Segoe UI on Windows, SF on Apple, Roboto on Android — so glyphs are
   grid-fitted by the OS and stay sharp at every size and DPI. A webfont
   carries no Windows hinting and softens at 12–14px, which is what reads
   as "blurry". Only the icon font is downloaded.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------- */
:root {
    /* Brand */
    --pr: #2f6bff;
    --pr-hover: #1f56e6;
    --pr-active: #1848c9;
    /* Text/icon colour when sitting on --pr-bg. The base --pr only reaches
       4.05:1 on that tint; this clears AA at 5.3:1. */
    --pr-ink: #1c50d8;
    --pr-bg: #eef3ff;
    --pr-bg-2: #dfe9ff;
    --pr-ring: rgba(47, 107, 255, .16);

    /* Semantic — text colours all clear 4.5:1 on their own tint */
    --ok: #0a7c4a;
    --ok-bg: #e7f6ee;
    --warn: #a55a00;
    --warn-bg: #fdf2e3;
    --dang: #c92a3b;
    --dang-bg: #fdecee;
    --info: #0369a1;
    --info-bg: #e6f2fb;

    /* Neutrals */
    --canvas: #f7f8fa;
    --surface: #ffffff;
    --surface-2: #fbfbfc;
    --surface-3: #f2f4f7;
    --line: #e8eaee;
    --line-2: #dcdfe6;

    /* Text — deliberately dark for legibility */
    --tx: #14161a;
    --tx-2: #4d5462;
    --tx-3: #767d8c;

    /* Shape */
    --r-lg: 14px;
    --r: 10px;
    --r-sm: 8px;
    --r-pill: 999px;

    /* Elevation — hairline-first, shadows kept subtle */
    --sh-sm: 0 1px 2px rgba(20, 22, 26, .04);
    --sh: 0 1px 2px rgba(20, 22, 26, .04), 0 2px 8px -2px rgba(20, 22, 26, .06);
    --sh-lg: 0 4px 12px -2px rgba(20, 22, 26, .08), 0 16px 32px -12px rgba(20, 22, 26, .16);

    /* Metrics */
    --sb-w: 258px;
    --sb-rail: 72px;
    --tb-h: 62px;

    --ease: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------
   3. Base + typography scale
   --------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
    /* No negative tracking: tightening pushes glyphs onto fractional pixels,
       which is exactly what softens small text. */
    letter-spacing: 0;
    color: var(--tx);
    background: var(--canvas);
    /* Left at the browser default on purpose — `antialiased` disables
       subpixel rendering and makes text look thin and washed out on Windows. */
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--tx);
    font-weight: 600;
    line-height: 1.3;
}

/* Type scale — integer sizes, no tracking, so every step lands on a pixel. */
.t-display { font-size: 30px; font-weight: 700; line-height: 1.15; }
.t-h1      { font-size: 20px; font-weight: 600; }
.t-h2      { font-size: 16px; font-weight: 600; }
.t-h3      { font-size: 14px; font-weight: 600; }
.t-body    { font-size: 14px; }
.t-sm      { font-size: 13px; }
.t-xs      { font-size: 12px; }

.t-2  { color: var(--tx-2) !important; }
.t-3  { color: var(--tx-3) !important; }
.num  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; }

p { margin: 0; }

a {
    color: var(--pr);
    text-decoration: none;
    transition: color var(--ease);
}

a:hover { color: var(--pr-hover); }

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0;
    opacity: 1;
}

::selection {
    background: var(--pr-bg-2);
    color: var(--tx);
}

:focus-visible {
    outline: 2px solid var(--pr);
    outline-offset: 2px;
    border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #d3d7de;
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: #b6bcc7; background-clip: content-box; }

/* ---------------------------------------------------------------
   4. Icons — Lucide, sized and aligned consistently
   --------------------------------------------------------------- */
[class^="icon-"],
[class*=" icon-"] {
    font-family: "lucide" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: -.125em;
    font-size: 1.15em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ic-sm { font-size: 1em; }
.ic-lg { font-size: 1.35em; }
.ic-xl { font-size: 2rem; }

/* ---------------------------------------------------------------
   5. Shell
   --------------------------------------------------------------- */
.shell { min-height: 100vh; min-height: 100dvh; }

.main {
    margin-left: var(--sb-w);
    min-height: 100vh;
    /* dvh tracks the collapsing mobile browser chrome; vh does not. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--ease);
}

.content {
    flex: 1;
    padding: 24px 22px 40px;
    max-width: 1800px;
    width: 100%;
    /* Keeps the column centred instead of hugging the sidebar on ultrawide. */
    margin-inline: auto;
}

.foot {
    padding: 18px 28px 24px;
    border-top: 1px solid var(--line);
    color: var(--tx-3);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   6. Sidebar
   --------------------------------------------------------------- */
.sb {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sb-w);
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform var(--ease), width var(--ease);
}

.sb-brand {
    height: var(--tb-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line);
}

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(140deg, #4f83ff 0%, var(--pr) 55%, #1e46c8 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(47, 107, 255, .32);
}

.brand-tx { display: flex; flex-direction: column; min-width: 0; }

.brand-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--tx);
    line-height: 1.2;
    white-space: nowrap;
}

.brand-sub {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-3);
    line-height: 1.3;
    white-space: nowrap;
}

/* Only reachable while the drawer is open; on desktop the rail has no drawer.
   Scoped to .sb so it outranks the later .iconbtn { display: grid }. */
.sb .sb-close { display: none; margin-left: auto; margin-right: -8px; }

@media (max-width: 991.98px) {
    .sb .sb-close { display: grid; }
}

.sb-nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px 20px;
    -webkit-overflow-scrolling: touch;
}

.nav-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tx-3);
    padding: 0 10px;
    margin: 16px 0 6px;
    white-space: nowrap;
}

.nav-label:first-child { margin-top: 0; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--r);
    /* Deliberately dark: every nav label must be comfortably readable. */
    color: #3f4553;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 1px;
    white-space: nowrap;
    transition: background var(--ease), color var(--ease);
}

.nav-item > [class^="icon-"] {
    font-size: 17px;
    color: var(--tx-3);
    transition: color var(--ease);
}

.nav-item:hover {
    background: var(--surface-3);
    color: var(--tx);
}

.nav-item:hover > [class^="icon-"] { color: var(--tx-2); }

.nav-item.active {
    background: var(--pr-bg);
    color: var(--pr-ink);
    font-weight: 600;
}

.nav-item.active > [class^="icon-"] { color: var(--pr-ink); }

.nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Not-yet-built modules. Text stays legible — only the chip signals state. */
.nav-item.soon {
    color: #6a7180;
    cursor: default;
}

.nav-item.soon > [class^="icon-"] { color: #9aa0ac; }
.nav-item.soon:hover { background: var(--surface-2); color: #6a7180; }

.chip-soon {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6f7686;
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    padding: 2px 6px;
    border-radius: 5px;
    line-height: 1.35;
    flex-shrink: 0;
}

.nav-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--tx-2);
    background: var(--surface-3);
    padding: 1px 7px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
}

.sb-foot {
    padding: 12px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}

.sb-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--r);
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.sb-user-meta { min-width: 0; line-height: 1.3; }

.sb-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-user-role {
    font-size: 11px;
    color: var(--tx-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsed rail */
@media (min-width: 992px) {
    body.rail .sb { width: var(--sb-rail); }
    body.rail .main { margin-left: var(--sb-rail); }
    body.rail .sb-brand { padding: 0 20px; }

    body.rail .brand-tx,
    body.rail .nav-text,
    body.rail .chip-soon,
    body.rail .nav-count,
    body.rail .sb-user-meta {
        display: none;
    }

    body.rail .nav-item { justify-content: center; padding: 10px; }
    body.rail .nav-item > [class^="icon-"] { font-size: 18px; }

    body.rail .nav-label {
        margin: 12px 8px 8px;
        padding: 0;
        height: 1px;
        overflow: hidden;
        background: var(--line);
        color: transparent;
    }

    body.rail .sb-user { justify-content: center; padding: 7px; }
}

/* Off-canvas */
@media (max-width: 991.98px) {
    .sb { transform: translateX(-100%); box-shadow: var(--sh-lg); }
    body.sb-open .sb { transform: translateX(0); }
    .main { margin-left: 0; }
    .content { padding: 18px 16px 32px; }
    .foot { padding: 16px; }
}

.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 26, .42);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ease), visibility var(--ease);
}

body.sb-open .backdrop { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------
   7. Topbar
   --------------------------------------------------------------- */
.tb {
    height: var(--tb-h);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 1030;
    flex-shrink: 0;
}

@media (max-width: 991.98px) { .tb { padding: 0 14px; gap: 8px; } }

.iconbtn {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--tx-2);
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: var(--ease);
    padding: 0;
}

.iconbtn:hover {
    background: var(--surface-3);
    color: var(--tx);
}

.tb-title {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--tx-3);
    min-width: 0;
}

.crumbs a { color: var(--tx-2); }
.crumbs a:hover { color: var(--pr); }
.crumbs .sep { color: #c2c7d0; }

.tb-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Search */
.tb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    min-width: 232px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--tx-3);
    font-size: 13px;
    transition: var(--ease);
}

.tb-search:hover {
    border-color: #c9cdd6;
    color: var(--tx-2);
}

.tb-search kbd {
    margin-left: auto;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--tx-3);
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    padding: 1px 5px;
    line-height: 1.4;
}

@media (max-width: 1199.98px) { .tb-search { display: none; } }

/* Avatar + user button */
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(140deg, #5f8dff 0%, var(--pr) 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    flex-shrink: 0;
}

.avatar-lg { width: 38px; height: 38px; font-size: 13px; }

.userbtn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px 3px 3px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
    transition: var(--ease);
}

.userbtn:hover { border-color: #c9cdd6; box-shadow: var(--sh-sm); }

.userbtn-meta { text-align: left; line-height: 1.25; min-width: 0; }

.userbtn-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tx);
    white-space: nowrap;
}

.userbtn-role {
    font-size: 11px;
    color: var(--tx-3);
    white-space: nowrap;
}

@media (max-width: 575.98px) { .userbtn-meta { display: none; } }

/* ---------------------------------------------------------------
   8. Dropdown
   --------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: 5px;
    font-size: 13px;
    min-width: 224px;
    color: var(--tx);
}

.dropdown-item {
    border-radius: var(--r-sm);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tx);
    font-weight: 500;
}

.dropdown-item > [class^="icon-"] { font-size: 16px; color: var(--tx-3); }

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--surface-3);
    color: var(--tx);
}

.dropdown-item.danger { color: var(--dang); }
.dropdown-item.danger > [class^="icon-"] { color: var(--dang); }
.dropdown-item.danger:hover { background: var(--dang-bg); color: var(--dang); }

.dropdown-head {
    padding: 9px 10px 7px;
    line-height: 1.35;
}

.dropdown-head-name { font-size: 13px; font-weight: 600; color: var(--tx); }
.dropdown-head-mail { font-size: 11px; color: var(--tx-3); word-break: break-all; }

.dropdown-divider { border-color: var(--line); margin: 4px 0; }

/* ---------------------------------------------------------------
   9. Cards
   --------------------------------------------------------------- */
.card2 {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.card2-head {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.card2-title {
    font-size: 15px;
    font-weight: 600;
}

.card2-sub {
    font-size: 12px;
    color: var(--tx-3);
    margin-top: 1px;
}

.card2-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.card2-body { padding: 18px; }
.card2-body.flush { padding: 0; }

/* Fills the column height and centres a short/empty body inside it, so a
   card sitting beside a taller stack does not leave a dead gap. */
.card2.stretch {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card2.stretch > .card2-body { flex: 1; }

.card2.stretch > .card2-body > .empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------
   10. Stat tiles
   --------------------------------------------------------------- */
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: 16px 18px 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.stat:hover { border-color: var(--line-2); box-shadow: var(--sh); }

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--tx-2);
}

.stat-ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}

.stat-val {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
}

.stat-foot {
    font-size: 12px;
    color: var(--tx-3);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}

.stat-foot .up { color: var(--ok); font-weight: 600; }
.stat-foot .dn { color: var(--dang); font-weight: 600; }
.stat-foot .dot { color: #c8ccd4; }

/* Tonal fills */
.tone-pr   { background: var(--pr-bg);   color: var(--pr-ink); }
.tone-ok   { background: var(--ok-bg);   color: var(--ok); }
.tone-warn { background: var(--warn-bg); color: var(--warn); }
.tone-dang { background: var(--dang-bg); color: var(--dang); }
.tone-info { background: var(--info-bg); color: var(--info); }
.tone-mute { background: var(--surface-3); color: var(--tx-2); }

/* ---------------------------------------------------------------
   11. Buttons
   --------------------------------------------------------------- */
.btn {
    border-radius: var(--r);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid transparent;
    transition: var(--ease);
    line-height: 1.45;
    /* A label must never wrap inside a fixed-height control. */
    white-space: nowrap;
}

.btn > [class^="icon-"] { font-size: 16px; }

.btn:focus-visible { outline: 2px solid var(--pr); outline-offset: 2px; }

.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--r-sm); }
.btn-sm > [class^="icon-"] { font-size: 14px; }
.btn-lg { padding: 10px 18px; font-size: 15px; }

.btn-primary {
    background: var(--pr);
    border-color: var(--pr);
    color: #fff;
    box-shadow: 0 1px 2px rgba(20, 22, 26, .08);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--pr-hover) !important;
    border-color: var(--pr-hover) !important;
    color: #fff !important;
}

.btn-ghost {
    background: var(--surface);
    border-color: var(--line-2);
    color: var(--tx);
}

.btn-ghost:hover {
    background: var(--surface-2);
    border-color: #c9cdd6;
    color: var(--tx);
}

.btn-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--tx-2);
}

.btn-quiet:hover { background: var(--surface-3); color: var(--tx); }

.btn-danger { background: var(--dang); border-color: var(--dang); color: #fff; }
.btn-danger:hover { background: #ad2130; border-color: #ad2130; color: #fff; }

.btn:disabled,
.btn.disabled {
    opacity: 1;
    background: var(--surface-2);
    border-color: var(--line);
    color: #838a98;
    cursor: not-allowed;
    box-shadow: none;
}

.btn:disabled > [class^="icon-"] { color: #a2a8b4; }

.btn-block { width: 100%; }

/* ---------------------------------------------------------------
   12. Badges
   --------------------------------------------------------------- */
.badge2 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 2.5px 8px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.5;
}

.badge2::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge2.plain::before { display: none; }

.b-pr   { background: var(--pr-bg);       color: var(--pr-ink); }
.b-ok   { background: var(--ok-bg);       color: var(--ok); }
.b-warn { background: var(--warn-bg);     color: var(--warn); }
.b-dang { background: var(--dang-bg);     color: var(--dang); }
.b-info { background: var(--info-bg);     color: var(--info); }
.b-mute { background: var(--surface-3);   color: #161616; }

/* ---------------------------------------------------------------
   13. Tables
   --------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; }

table.tbl {
    width: 100%;
    margin: 0;
    /* collapse, so a 1px border on every cell renders as one shared grid
       line instead of doubling between neighbours. */
    border-collapse: collapse;
    font-size: 14px;
}

table.tbl thead th {
    /* Tinted header band, ruled off from the body. */
    background: var(--pr-bg);
    border-bottom: 1px solid var(--line-2);
    border-right: 1px solid var(--line-2);
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .055em;
    padding: 10px 14px;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
    position: relative;
}

table.tbl thead th:last-child { border-right: none; }

/* Sortable headers */
table.tbl thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background var(--ease);
}

table.tbl thead th.sortable:hover { background: var(--pr-bg-2); }

table.tbl thead th.sortable .sort-ic {
    font-size: 12px;
    margin-left: 5px;
    opacity: .45;
    vertical-align: -.18em;
}

table.tbl thead th.sortable.asc .sort-ic,
table.tbl thead th.sortable.desc .sort-ic {
    opacity: 1;
    color: var(--pr-ink);
}

/* Full cell grid — vertical rules as well as horizontal. */
table.tbl tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    vertical-align: middle;
    color: var(--tx);
}

table.tbl tbody td:last-child { border-right: none; }
table.tbl tbody tr:last-child td { border-bottom: none; }

/* Serial-number column. Muted in the body only — the header cell keeps the
   black band colour like every other heading. */
table.tbl .sr {
    width: 56px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

table.tbl tbody td.sr {
    color: #474a52;
    font-size: 12px;
}

/* Primary cell often links through to the record. */
table.tbl .cell-link {
    color: var(--pr-ink);
    font-weight: 500;
}

table.tbl .cell-link:hover { text-decoration: underline; }

table.tbl tbody tr { transition: background var(--ease); }

/* Zebra stated on both sides so nothing reintroduces a fill on odd rows. */
table.tbl tbody tr:nth-child(odd) > td { background: var(--surface); }
table.tbl tbody tr:nth-child(even) > td { background: #f5f7fa; }

/* Accent rail marks the row under the pointer / last clicked. */
table.tbl tbody tr > td:first-child { box-shadow: inset 3px 0 0 transparent; }

table.tbl tbody tr:hover > td,
table.tbl tbody tr.row-on > td { background: var(--pr-bg); }

table.tbl tbody tr:hover > td:first-child,
table.tbl tbody tr.row-on > td:first-child { box-shadow: inset 3px 0 0 var(--pr); }

table.tbl .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl thead th.r { text-align: right; }

/* Totals row on statement-style tables. Ruled off above so it reads as a
   sum rather than one more record. */
table.tbl tfoot td {
    padding: 11px 14px;
    background: var(--surface-3);
    border-top: 2px solid var(--line-2);
    font-variant-numeric: tabular-nums;
    color: var(--tx);
}

.cell-1 { font-weight: 600; color: #000000; line-height: 1.35; }
.cell-2 { font-size: 12px; color: #474a52; line-height: 1.35; }

/* ---- List toolbar + pagination ------------------------------- */
.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    /* nowrap above mobile: a wrapping flex line moves an item to the next row
       instead of shrinking it, which is what pushed the tool group down. With
       nowrap the group stays put and the search gives up width instead. */
    flex-wrap: nowrap;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}

/* Filters keep their width; only the search inside the tool group shrinks. */
.toolbar > .form-select,
.toolbar > .len-select { flex-shrink: 0; }

.search {
    position: relative;
    flex: 1 1 220px;
    min-width: 160px;
    max-width: 320px;
}

.search > [class^="icon-"] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--tx-3);
    pointer-events: none;
}

.search > .inp { padding-left: 36px; }

/* Every toolbar control is the same 34px tall so the row reads as one band:
   selects, the search field, and the Export / Columns / Refresh buttons. */
.toolbar .form-select,
.toolbar .inp,
.toolbar .btn {
    height: 34px;
    min-height: 34px;
    font-size: 13px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 32px;
}

.toolbar .form-select {
    width: auto;
    padding-right: 32px;
    /* Own chevron — Bootstrap's is a different shape to the Lucide set. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7180' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 15px 15px;
    cursor: pointer;
}

.toolbar .form-select:hover { border-color: #c9cdd6; }

.toolbar .search > .inp { padding-left: 34px; }

.toolbar .btn { padding-left: 11px; padding-right: 11px; }

/* Icon-only buttons stay square. */
.toolbar .btn-icon { width: 34px; padding: 0; }

/* Optional wrapper for tables carrying several filters. The filters wrap
   among themselves and the band grows taller, but the tool group on the right
   still never leaves the first line. */
.toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.toolbar-left > * { flex-shrink: 0; }

.toolbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    /* nowrap so the group drops to the next line as a unit rather than
       leaving Refresh stranded on its own row. */
    flex-wrap: nowrap;
    min-width: 0;
}

/* Buttons keep their intrinsic width — otherwise flex shrinks them and the
   labels wrap onto a second line inside a fixed-height control. */
.toolbar-right > * { flex-shrink: 0; }

/* The search is the only thing that gives. */
.toolbar-right .search {
    flex: 0 1 220px;
    min-width: 90px;
    max-width: 240px;
}

/* Between a phone and a wide desktop the row is tight — Export/Columns are
   already icon-only here, so give back the remaining width from the search
   and the filter selects rather than dropping the group to a second line. */
@media (max-width: 1199.98px) {
    .toolbar { gap: 6px; }
    .toolbar-right { gap: 6px; }
    .toolbar-right .search { flex: 0 1 170px; min-width: 74px; }
    .toolbar .form-select { max-width: 132px; }
}

@media (max-width: 767.98px) {
    /* Phones: let it stack properly. */
    .toolbar { flex-wrap: wrap; }
    .toolbar-left { width: 100%; }
    .toolbar-left > .form-select { flex: 1 1 140px; }
    .toolbar-right { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .toolbar-right .search { flex: 1 1 140px; max-width: none; min-width: 120px; }
    .toolbar .form-select { max-width: none; }
}

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
}

.pager-info { font-size: 12px; color: var(--tx-3); }

.pager-nav { display: flex; align-items: center; gap: 4px; }

.pager-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 500;
    color: var(--tx-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}

.pager-btn > [class^="icon-"] { font-size: 14px; }

.pager-btn:hover:not(:disabled):not(.on) {
    border-color: #c9cdd6;
    color: var(--tx);
    background: var(--surface-2);
}

.pager-btn.on {
    background: var(--pr);
    border-color: var(--pr);
    color: #fff;
}

.pager-btn:disabled { opacity: .45; cursor: not-allowed; }

.pager-gap { color: var(--tx-3); padding: 0 2px; font-size: 12px; }

@media (pointer: coarse) {
    .pager-btn { min-width: 40px; height: 40px; }
}

/* Row action buttons — outlined squares, right-aligned in the last column. */
.row-acts { display: flex; gap: 6px; justify-content: flex-end; }

.act {
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--tx-2);
    display: inline-grid;
    place-items: center;
    font-size: 15px;
    transition: var(--ease);
}

.act:hover {
    border-color: var(--pr);
    background: var(--pr-bg);
    color: var(--pr-ink);
}

.act.danger:hover { border-color: var(--dang); background: var(--dang-bg); color: var(--dang); }
.act.ok:hover { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }

/* Listed but unavailable — e.g. moving a lead that has already closed. */
.act:disabled { opacity: .38; cursor: not-allowed; }
.act:disabled:hover { border-color: var(--line-2); background: var(--surface); color: var(--tx-2); }

@media (pointer: coarse) {
    .act { width: 38px; height: 38px; }
}

/* Page-length select sits first in the toolbar. */
.len-select { width: auto; min-width: 74px; }

/* Column-visibility dropdown */
.colvis-menu { padding: 6px; min-width: 200px; max-height: 300px; overflow-y: auto; }

.colvis-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--tx);
    cursor: pointer;
    user-select: none;
}

.colvis-item:hover { background: var(--surface-3); }

.colvis-item input {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--line-2);
    border-radius: 4px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin: 0;
}

.colvis-item input:checked { background: var(--pr); border-color: var(--pr); }

.colvis-item input:checked::after {
    content: "";
    width: 8px;
    height: 4px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}

/* ---------------------------------------------------------------
   14. Empty states
   --------------------------------------------------------------- */
.empty {
    padding: 44px 22px;
    text-align: center;
}

.empty-ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--surface-3);
    color: #9198a6;
    display: grid;
    place-items: center;
    font-size: 21px;
    margin: 0 auto 12px;
}

.empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--tx);
    margin-bottom: 3px;
}

.empty-text {
    font-size: 13px;
    color: var(--tx-3);
    max-width: 40ch;
    margin: 0 auto;
}

.empty.compact { padding: 28px 16px; }

/* ---------------------------------------------------------------
   15. Progress
   --------------------------------------------------------------- */
.bar {
    /* Rendered as a <span>, so this must be blockified or the height is
       ignored and the track collapses to nothing. */
    display: block;
    height: 6px;
    border-radius: var(--r-pill);
    /* Track must stay visible on white even at 0% fill. */
    background: #e6e9ef;
    overflow: hidden;
}

.bar > span {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--pr);
    transition: width 420ms cubic-bezier(.4, 0, .2, 1);
}

.bar-pr   > span { background: var(--pr); }
.bar-ok   > span { background: var(--ok); }
.bar-warn > span { background: var(--warn); }
.bar-dang > span { background: var(--dang); }
.bar-info > span { background: var(--info); }
.bar-mute > span { background: #b6bcc7; }

/* Pipeline rows */
.pipe-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
}

.pipe-row + .pipe-row { border-top: 1px solid var(--line); }

.pipe-name { min-width: 96px; flex-shrink: 0; }
.pipe-bar { flex: 1; min-width: 60px; }

/* When the row has no bar, the label takes the slack instead — and may wrap. */
.pipe-name.grow { flex: 1; min-width: 0; }

.pipe-num {
    min-width: 34px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   16. Forms
   --------------------------------------------------------------- */
.field { margin-bottom: 16px; }

.lbl {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--tx);
    margin-bottom: 6px;
}

.lbl .req { color: var(--dang); }

.inp,
.form-control,
.form-select {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: var(--tx);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    padding: 9px 12px;
    line-height: 1.45;
    transition: var(--ease);
    appearance: none;
}

.inp::placeholder,
.form-control::placeholder { color: #969ca9; }

.inp:hover,
.form-control:hover { border-color: #c9cdd6; }

.inp:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--pr);
    box-shadow: 0 0 0 3px var(--pr-ring);
}

.inp:disabled,
.inp[readonly] {
    background: var(--surface-2);
    color: var(--tx-2);
    cursor: not-allowed;
}

.inp.bad { border-color: var(--dang); }
.inp.bad:focus { box-shadow: 0 0 0 3px rgba(201, 42, 59, .14); }

.field-hint { font-size: 12px; color: var(--tx-3); margin-top: 5px; }
.field-err  { font-size: 12px; color: var(--dang); margin-top: 5px; }

.inp-wrap { position: relative; }

.inp-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--tx-3);
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    font-size: 16px;
    padding: 0;
    transition: var(--ease);
}

.inp-btn:hover { color: var(--tx); background: var(--surface-3); }

/* Checkbox */
.chk {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    /* The whole label is the hit area, not just the 17px box. */
    min-height: 34px;
}

.chk input {
    appearance: none;
    position: relative;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--line-2);
    border-radius: 5px;
    background: var(--surface);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: var(--ease);
    margin: 0;
}

.chk input:hover { border-color: #b8bdc8; }

.chk input:checked {
    background: var(--pr);
    border-color: var(--pr);
}

.chk input:checked::after {
    content: "";
    width: 9px;
    height: 5px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}

.chk input:focus-visible { outline: 2px solid var(--pr); outline-offset: 2px; }

.chk span { font-size: 13px; color: var(--tx); user-select: none; }

/* Invisible padding so the box itself is comfortably tappable. */
.chk input::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
}

/* ---- Logo picker --------------------------------------------- */
.logo-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 170px;
    border: 1px dashed var(--line-2);
    border-radius: var(--r);
    background: var(--surface-2);
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 10px;
}

.logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-empty {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--surface-3);
    color: #9198a6;
    font-size: 21px;
}

/* ---- Modals -------------------------------------------------- */
.modal-content {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
}

.modal-header {
    padding: 17px 20px;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
    gap: 12px;
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.modal-header .iconbtn { margin-left: auto; flex-shrink: 0; }

.modal-body { padding: 20px; }

.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    gap: 8px;
}

.modal-backdrop.show { opacity: .45; }

@media (max-width: 575.98px) {
    .modal-header,
    .modal-body,
    .modal-footer { padding: 14px 16px; }

    .modal-footer .btn { flex: 1; }
}

/* ---------------------------------------------------------------
   17. Alerts
   --------------------------------------------------------------- */
.note {
    border-radius: var(--r);
    font-size: 13px;
    padding: 11px 13px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.note > [class^="icon-"] { font-size: 17px; margin-top: 1px; }

.note-ok   { background: var(--ok-bg);   color: var(--ok); }
.note-dang { background: var(--dang-bg); color: var(--dang); }
.note-info { background: var(--info-bg); color: var(--info); }
.note-warn { background: var(--warn-bg); color: var(--warn); }

/* ---------------------------------------------------------------
   18. Auth — floating card on an ambient stage
   --------------------------------------------------------------- */
.stage {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 32px;
    overflow: hidden;
    background:
        radial-gradient(1100px 700px at 50% -10%, #1c2740 0%, transparent 62%),
        linear-gradient(168deg, #0e1219 0%, #0b0e14 48%, #0d1119 100%);
}

/* Faint engineering grid, fading out toward the edges. */
.stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(900px 620px at 50% 42%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(900px 620px at 50% 42%, #000 20%, transparent 78%);
    pointer-events: none;
}

/* Fine grain so the large flat areas do not band. */
.stage::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .5;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* Soft colour fields drifting behind the card. */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(78px);
    pointer-events: none;
    will-change: transform;
}

.orb-1 {
    width: 460px;
    height: 460px;
    top: -130px;
    left: 50%;
    margin-left: -420px;
    background: rgba(47, 107, 255, .40);
    animation: drift-a 19s ease-in-out infinite alternate;
}

.orb-2 {
    width: 400px;
    height: 400px;
    bottom: -140px;
    left: 50%;
    margin-left: 90px;
    background: rgba(16, 176, 152, .26);
    animation: drift-b 23s ease-in-out infinite alternate;
}

.orb-3 {
    width: 320px;
    height: 320px;
    top: 42%;
    left: 50%;
    margin-left: -160px;
    background: rgba(124, 92, 255, .22);
    animation: drift-c 27s ease-in-out infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(70px, 50px, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-60px, -46px, 0) scale(1.09); } }
@keyframes drift-c { to { transform: translate3d(34px, -60px, 0) scale(1.14); } }

@media (prefers-reduced-motion: reduce) {
    .orb { animation: none; }
}

/* ---- Card -------------------------------------------------- */
.auth-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 428px;
    margin: auto;
}

.auth-card {
    position: relative;
    background: var(--surface);
    border-radius: 20px;
    padding: 56px 34px 30px;
    border: 1px solid rgba(255, 255, 255, .10);
    /* Layered: tight contact shadow, broad ambient falloff, inner top highlight. */
    box-shadow:
        0 1px 1px rgba(6, 9, 15, .18),
        0 8px 20px -6px rgba(6, 9, 15, .34),
        0 30px 60px -20px rgba(6, 9, 15, .55),
        0 60px 110px -50px rgba(20, 40, 100, .55),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Brand badge floating over the card's top edge. */
.auth-badge {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 17px;
    background: linear-gradient(145deg, #5b8bff 0%, var(--pr) 52%, #1a3fbe 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    border: 3px solid var(--surface);
    box-shadow:
        0 6px 16px -3px rgba(47, 107, 255, .58),
        0 2px 5px rgba(6, 9, 15, .22);
}

.auth-badge::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .26), transparent 58%);
    pointer-events: none;
}

.auth-head-wrap { text-align: center; margin-bottom: 26px; }

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pr-ink);
    background: var(--pr-bg);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    margin-bottom: 12px;
}

.auth-title2 {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 6px;
}

.auth-sub2 {
    font-size: 13px;
    color: var(--tx-2);
    line-height: 1.55;
}

/* ---- Inputs with leading icons ------------------------------ */
.inp-ic {
    position: relative;
    display: flex;
    align-items: center;
}

.inp-ic > .lead {
    position: absolute;
    left: 13px;
    font-size: 17px;
    color: #9aa1b0;
    pointer-events: none;
    transition: color var(--ease);
    z-index: 2;
}

.inp-ic > .inp {
    padding-left: 40px;
    height: 46px;
}

.inp-ic > .inp.has-btn { padding-right: 42px; }

.inp-ic:focus-within > .lead { color: var(--pr); }

.lbl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

/* Padding grows the hit box; the negative margin keeps the visual position.
   Baseline alignment means the text does not move. */
.lbl-row a {
    display: inline-block;
    padding: 9px 6px;
    margin: -9px -6px;
}

/* ---- Divider + demo ----------------------------------------- */
.auth-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tx-3);
}

.auth-rule::before,
.auth-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.demo2 { display: grid; gap: 7px; }

.demo2-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--surface-2);
    text-align: left;
    transition: var(--ease);
}

.demo2-btn:hover {
    border-color: var(--pr);
    background: var(--pr-bg);
    box-shadow: 0 0 0 3px var(--pr-ring);
}

.demo2-ic {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
}

.demo2-meta { min-width: 0; line-height: 1.3; }

.demo2-role { font-size: 12px; font-weight: 600; color: var(--tx); }

.demo2-mail {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 11px;
    color: var(--tx-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo2-go {
    margin-left: auto;
    font-size: 15px;
    color: #b3b9c5;
    flex-shrink: 0;
    transition: var(--ease);
}

.demo2-btn:hover .demo2-go { color: var(--pr); transform: translateX(2px); }

/* ---- Below-card strip --------------------------------------- */
.auth-legal {
    position: relative;
    z-index: 2;
    margin-top: 14px;
    font-size: 11px;
    color: #b4c4e7;
    text-align: center;
}

.auth-back {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 18px;
    font-size: 16px;
}

.auth-back a {
    color: #d4e3ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: var(--r);
}

.auth-back a:hover { color: #fff; background: rgba(255, 255, 255, .07); }

.auth-back a:hover { color: #fff; }

@media (max-width: 479.98px) {
    .stage { padding: 28px 14px 24px; }
    .auth-card { padding: 50px 22px 26px; border-radius: 18px; }
    .auth-title2 { font-size: 22px; }
}

/* ---------------------------------------------------------------
   19. Timeline
   --------------------------------------------------------------- */
.tl { position: relative; padding-left: 24px; }

.tl::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 1.5px;
    background: var(--line);
}

.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }

.tl-dot {
    position: absolute;
    left: -24px;
    top: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--pr);
}

.tl-t { font-size: 13px; font-weight: 500; color: var(--tx); line-height: 1.4; }
.tl-d { font-size: 12px; color: var(--tx-3); margin-top: 1px; }

/* A remark carried by a transition. Quoted rather than boxed so a long
   timeline stays scannable. */
.tl-note {
    font-size: 12px;
    color: var(--tx-2);
    line-height: 1.55;
    margin-top: 5px;
    padding-left: 9px;
    border-left: 2px solid var(--line-2);
}

/* ---------------------------------------------------------------
   20. Detail pages — key/value, pipeline stepper, product picker
   --------------------------------------------------------------- */

/* ---- Key / value list ---------------------------------------- */
.kv {
    display: grid;
    grid-template-columns: minmax(96px, auto) 1fr;
    margin: 0;
}

.kv > dt,
.kv > dd {
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
    min-width: 0;
}

.kv > dt {
    font-size: 12px;
    color: var(--tx-3);
    padding-right: 14px;
}

.kv > dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    text-align: right;
    /* Long emails and addresses must wrap rather than widen the card. */
    overflow-wrap: anywhere;
}

.kv > dt:last-of-type,
.kv > dd:last-of-type { border-bottom: 0; }

.kv a { color: var(--pr); }
.kv a:hover { text-decoration: underline; }

/* ---- Pipeline stepper ----------------------------------------- */
.steps {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    padding: 2px 0 4px;
    /* Scrollbar-free on touch; the track still pans. */
    scrollbar-width: thin;
}

.step {
    flex: 1 1 0;
    min-width: 84px;
    text-align: center;
    position: relative;
}

/* Connector, drawn behind the dot and stopping short of both ends. */
.step + .step::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--line);
    margin: 0 15px;
}

.step.done + .step.done::before,
.step.done + .step.now::before { background: var(--pr); }

.step-dot {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    margin: 0 auto 7px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    background: var(--surface);
    border: 2px solid var(--line-2);
    color: var(--tx-3);
}

.step-name {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--tx-3);
    line-height: 1.35;
}

.step.done .step-dot { background: var(--pr); border-color: var(--pr); color: #fff; }
.step.done .step-name { color: var(--tx-2); }

.step.now .step-dot {
    background: var(--surface);
    border-color: var(--pr);
    color: var(--pr);
    box-shadow: 0 0 0 4px var(--pr-bg);
}

.step.now .step-name { color: var(--pr-ink); }

.step.lost .step-dot {
    background: var(--dang);
    border-color: var(--dang);
    color: #fff;
    box-shadow: 0 0 0 4px var(--dang-bg);
}

.step.lost .step-name { color: var(--dang); }

.step.won .step-dot {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
    box-shadow: 0 0 0 4px var(--ok-bg);
}

.step.won .step-name { color: var(--ok); }

/* ---- Product picker ------------------------------------------- */
.pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 10px;
}

.pick-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--surface);
    cursor: pointer;
    transition: var(--ease);
    margin: 0;
}

.pick-item:hover { border-color: #b8bdc8; box-shadow: var(--sh-sm); }

/* The whole card reads as selected, not just its box. */
.pick-item:has(input:checked) {
    border-color: var(--pr);
    background: var(--pr-bg);
}

.pick-item:has(input:focus-visible) { outline: 2px solid var(--pr); outline-offset: 2px; }

.pick-item input {
    appearance: none;
    position: relative;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    border: 1.5px solid var(--line-2);
    border-radius: 5px;
    background: var(--surface);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: var(--ease);
}

.pick-item input:checked { background: var(--pr); border-color: var(--pr); }

.pick-item input:checked::after {
    content: "";
    width: 9px;
    height: 5px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}

.pick-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    line-height: 1.35;
}

.pick-cat {
    display: block;
    font-size: 11px;
    color: var(--tx-3);
    margin-top: 2px;
}

/* ---------------------------------------------------------------
   21. Charts
   --------------------------------------------------------------- */
.chart { position: relative; width: 100%; }
.chart-sm { height: 232px; }
.chart-md { height: 288px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.legend-i {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--tx-2);
}

.legend-d { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }

/* ---------------------------------------------------------------
   22. Utilities
   --------------------------------------------------------------- */
.page-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.page-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Inline placeholder while an AJAX section is in flight. */
.loading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 320px;
    padding: 40px 20px;
    text-align: center;
}

.loading-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--tx-3);
}

/* Shown in place of a section that failed to load. */
.retry-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 320px;
    padding: 40px 20px;
    text-align: center;
}

.retry-block .empty-ic { margin: 0; background: var(--dang-bg); color: var(--dang); }
.retry-block .empty-title { margin: 0; }
.retry-block .empty-text { margin: 0 0 4px; }

.loader {
    position: fixed;
    inset: 0;
    background: rgba(247, 248, 250, .7);
    backdrop-filter: blur(2px);
    z-index: 2000;
    display: none;
    place-items: center;
}

.loader.on { display: grid; }

.spinner {
    width: 34px;
    height: 34px;
    border: 2.5px solid var(--line-2);
    border-top-color: var(--pr);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------
   23. Command palette (Ctrl/Cmd + K)
   --------------------------------------------------------------- */
.cmdk {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(20, 22, 26, .38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
}

.cmdk[hidden] { display: none; }

.cmdk-box {
    width: 100%;
    max-width: 520px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}

.cmdk-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
    color: var(--tx-3);
}

.cmdk-input input {
    flex: 1;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 15px;
    color: var(--tx);
    background: transparent;
    padding: 0;
    min-width: 0;
}

.cmdk-input input::placeholder { color: #979dab; }

.cmdk-input kbd {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--tx-3);
    background: var(--surface-3);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    padding: 2px 6px;
}

.cmdk-list {
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
}

.cmdk-group {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx-3);
    padding: 9px 10px 5px;
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--tx);
    text-align: left;
    transition: background var(--ease);
}

.cmdk-item > [class^="icon-"] { font-size: 16px; color: var(--tx-3); }

.cmdk-item.sel,
.cmdk-item:hover { background: var(--pr-bg); color: var(--pr-ink); }

.cmdk-item.sel > [class^="icon-"],
.cmdk-item:hover > [class^="icon-"] { color: var(--pr-ink); }

.cmdk-item.off { color: #6a7180; cursor: not-allowed; }
.cmdk-item.off:hover { background: var(--surface-3); color: #6a7180; }
.cmdk-item.off > [class^="icon-"] { color: #9aa0ac; }

.cmdk-empty {
    padding: 26px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--tx-3);
}

/* ---------------------------------------------------------------
   24. Touch devices
   Pointer-based, not width-based: a 1024px tablet needs big targets
   while a 1024px desktop window does not.
   --------------------------------------------------------------- */
@media (pointer: coarse) {
    .btn { min-height: 44px; padding: 10px 16px; }
    .btn-sm { min-height: 38px; padding: 8px 13px; }
    .btn-lg { min-height: 50px; }

    /* Keep the toolbar row uniform on touch too. */
    .toolbar .form-select,
    .toolbar .inp,
    .toolbar .btn {
        height: 42px;
        min-height: 42px;
        line-height: 40px;
        font-size: 14px;
    }

    .toolbar .btn-icon { width: 42px; }

    .iconbtn { width: 44px; height: 44px; }

    .inp,
    .form-control,
    .form-select { min-height: 46px; }

    .inp-ic > .inp { height: 50px; }
    .inp-btn { width: 42px; height: 42px; }

    .chk { min-height: 44px; }
    .chk input { width: 21px; height: 21px; }
    .chk input:checked::after { width: 10px; height: 6px; }
    .chk span { font-size: 14px; }

    .pick-item { min-height: 56px; padding: 13px 14px; }
    .pick-item input { width: 21px; height: 21px; }
    .pick-item input:checked::after { width: 10px; height: 6px; }
    .pick-name { font-size: 14px; }

    .kv > dt,
    .kv > dd { padding: 11px 0; }

    /* Phone and email values are links. Padding grows the hit box to a
       thumb-sized target; the negative margin keeps the text where it was.
       The same applies to breadcrumb links, which are small by design. */
    .kv a,
    .crumbs a {
        display: inline-block;
        padding: 14px 6px;
        margin: -14px -6px;
    }

    .nav-item { min-height: 46px; padding: 11px 12px; }
    .dropdown-item { min-height: 46px; padding: 12px 11px; }
    .cmdk-item { min-height: 46px; padding: 12px 10px; }
    .cmdk-input input { font-size: 16px; }

    .userbtn { min-height: 44px; }
    .demo2-btn { min-height: 54px; }
    .demo2-go { font-size: 17px; }

    table.tbl tbody td { padding: 14px 16px; }

    /* Hover affordances are meaningless without a pointer. */
    .stat:hover { transform: none; }
}

/* iOS zooms the page when a focused input is under 16px. */
@media (pointer: coarse) and (max-width: 767.98px) {
    .inp,
    .form-control,
    .form-select { font-size: 16px; }
}

/* ---------------------------------------------------------------
   25. Print
   Reports are exported to PDF through the browser's own print dialog,
   which uses real fonts and renders the rupee glyph correctly — no
   server-side PDF engine involved. Everything interactive is dropped and
   the content is laid out full width.
   --------------------------------------------------------------- */
@media print {
    @page { margin: 12mm; }

    .sb,
    .tb,
    .foot,
    .backdrop,
    .loader,
    .cmdk,
    #toast-container,
    .toolbar,
    .pager,
    .modal,
    .modal-backdrop,
    .page-head-actions,
    .card2-tools,
    .dropdown { display: none !important; }

    body { background: #fff; }

    .shell { display: block; }
    .main { margin: 0; }

    .content {
        padding: 0;
        max-width: none;
        margin: 0;
    }

    /* Flat on paper — shadows and tints only cost toner. */
    .card2,
    .stat {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #c9cdd6;
    }

    .card2 { margin-bottom: 12px; }

    /* Charts are canvases; keep them whole and inside the page width. */
    .chart { break-inside: avoid; }
    .chart-md, .chart-sm { height: 200px; }
    canvas { max-width: 100% !important; }

    /* Table rules must survive the print colour-adjust rules. */
    table.tbl { font-size: 11px; }
    table.tbl thead th { padding: 6px 8px; font-size: 9px; }
    table.tbl tbody td { padding: 6px 8px; }
    table.tbl thead { display: table-header-group; }
    table.tbl tr { break-inside: avoid; }

    table.tbl thead th,
    table.tbl tfoot td,
    .badge2,
    .stat-ic {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tbl-wrap { overflow: visible; }

    a { text-decoration: none; color: inherit; }
}

/* ---------------------------------------------------------------
   26. Third-party overrides
   --------------------------------------------------------------- */
#toast-container > div {
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    opacity: 1;
    font-size: 13px;
    font-family: inherit;
    padding: 13px 16px 13px 46px;
    background-position: 15px center;
    background-size: 18px;
}

#toast-container > .toast-success { background-color: #0a7c4a; }
#toast-container > .toast-error   { background-color: #c92a3b; }
#toast-container > .toast-warning { background-color: #a55a00; }
#toast-container > .toast-info    { background-color: #0369a1; }

.swal2-popup { border-radius: var(--r-lg) !important; font-family: inherit !important; }
.swal2-title { font-size: 18px !important; font-weight: 600 !important; color: var(--tx) !important; }
.swal2-html-container { font-size: 14px !important; color: var(--tx-2) !important; }
.swal2-styled { border-radius: var(--r) !important; font-size: 13px !important; font-weight: 500 !important; }

.page-link { color: var(--tx); border-color: var(--line); font-size: 13px; }
.page-item.active .page-link { background: var(--pr); border-color: var(--pr); }

@media print {
    .sb, .tb, .foot, .page-head-actions { display: none !important; }
    .main { margin-left: 0 !important; }
    .card2 { box-shadow: none; break-inside: avoid; }
}