/* Bates Estates admin console.
   Tokens and components transcribed from the approved Figma - see
   docs/design/admin-console-design-reference.md. The design is the visual contract
   (OA-01), so values here are read off the screens rather than invented. */

:root {
    --sidebar: #0b0f17;
    --sidebar-item: #98a1b3;
    --sidebar-active-bg: #1b2130;
    --page: #f6f7f9;
    --surface: #ffffff;
    --border: #e8eaee;
    --border-strong: #d6dae1;

    --primary: #1d6ff2;
    --primary-dark: #1559c9;
    --primary-soft: #eaf1fe;

    --text: #0c1220;
    --muted: #6b7280;
    --muted-light: #9ca3af;

    --success: #16a34a;
    --success-soft: #e7f7ed;
    --warning: #f59e0b;
    --warning-soft: #fef4e6;
    --danger: #dc2626;
    --danger-soft: #fdeaea;
    --purple: #8b5cf6;
    --purple-soft: #f1ecfe;
    --sky: #0ea5e9;
    --sky-soft: #e6f6fe;
    --slate-soft: #eef0f4;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(12, 18, 32, .04), 0 4px 12px rgba(12, 18, 32, .04);
    --shadow-hover: 0 10px 24px rgba(12, 18, 32, .10), 0 4px 10px rgba(12, 18, 32, .06);
    --sidebar-width: 264px;

    --font: "Poppins", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Thin scrollbars everywhere - Firefox via scrollbar-width/-color, WebKit/Blink via the
   -webkit- pseudo-elements. Applied globally so any overflow: auto panel (table-scroll,
   board-col__body, dialog bodies, ...) matches without opting in individually. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--muted-light);
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- shell */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--sidebar);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sidebar__mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary);
    display: block;
    object-fit: contain;
    padding: 7px;
    flex: 0 0 36px;
}

.sidebar__name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.sidebar__sub { font-size: 12px; color: var(--sidebar-item); }

.sidebar__section {
    padding: 22px 20px 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5c6579;
}

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-item);
    font-weight: 500;
    text-decoration: none;
    font-size:12px;
}

.sidebar__link:hover { background: rgba(255, 255, 255, .04); color: #fff; text-decoration: none; }

.sidebar__link.is-active { background: var(--sidebar-active-bg); color: #fff; }
.sidebar__link.is-active svg { color: var(--primary); }

/* The trailing dot marks the active item, exactly as drawn. */
.sidebar__link.is-active::after {
    content: "";
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.sidebar__foot { position: relative; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .06); }

.sidebar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.sidebar__user:hover { background: rgba(255, 255, 255, .06); }

.sidebar__user-name { font-size: 13px; font-weight: 600; }
.sidebar__user-role { font-size: 12px; color: var(--sidebar-item); }

/* Chevron on the account switcher rotates to show open state; no separate icon asset. */
.chevron-btn {
    display: inline-grid;
    place-items: center;
    margin-left: auto;
    color: #98a1b3;
}

.chevron-btn svg { transition: transform .15s ease; }
.sidebar__foot.is-open .chevron-btn svg { transform: rotate(180deg); }

/* Account switcher - anchored above the footer row it hangs off, matching the design's
   panel-over-nav treatment rather than a full-screen dialog (this is a quick account swap,
   not a form). Hidden by default; .is-open on the footer (toggled by the chevron button) is
   the only thing that shows it. */
.user-switch {
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 8px);
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px;
    background: #11141c;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    z-index: 30;
}

.sidebar__foot.is-open .user-switch { display: block; }

.user-switch__label {
    padding: 10px 10px 6px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5c6579;
}

.user-switch form { margin: 0; }

.user-switch__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

button.user-switch__row:hover { background: rgba(255, 255, 255, .06); }
.user-switch__row.is-current { background: var(--sidebar-active-bg); cursor: default; }

.user-switch__row-name { display: block; font-size: 13px; font-weight: 600; }
.user-switch__row-sub { display: block; font-size: 11px; color: var(--sidebar-item); font-weight: 400; }

.user-switch__check { margin-left: auto; color: var(--primary); flex: 0 0 auto; }

.user-switch__signout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius-sm);
    background: none;
    color: #f87171;
    font: inherit;
    cursor: pointer;
}

.user-switch__signout:hover { background: rgba(248, 113, 113, .08); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar__search {
    position: relative;
    flex: 0 1 420px;
    margin: 0;
}

.topbar__search input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fbfbfc;
    font: inherit;
}

.topbar__search input:focus { outline: none; border-color: var(--primary); background: var(--surface); }

.topbar__search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-light); }

/* Global search results, hung off the box the same way the bell's panel hangs off the bell:
   hidden until the script has something to put in it, so a page with no scripting shows no
   empty shell. The rows are plain links and take real focus, which is what the arrow-key
   walk in the layout's script moves - hence a focus style with weight, not just a tint. */
.gsearch__panel {
    display: none;
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    width: min(460px, calc(100vw - 32px));
    max-height: min(70vh, 470px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(12, 18, 32, .16);
    z-index: 45;
    text-align: left;
}

.topbar__search.is-open .gsearch__panel { display: block; }

.gsearch__group { padding-bottom: 6px; }
.gsearch__group + .gsearch__group { border-top: 1px solid var(--border); }

.gsearch__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.gsearch__group-head a {
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
    color: var(--primary);
    text-decoration: none;
}

.gsearch__group-head a:hover { text-decoration: underline; }

.gsearch__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 18px;
    color: var(--text);
    text-decoration: none;
}

.gsearch__item:hover { background: var(--page); text-decoration: none; }

.gsearch__item:focus-visible {
    outline: none;
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary);
}

.gsearch__icon {
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
}

.gsearch__icon--lead { background: var(--primary-soft); color: var(--primary); }
.gsearch__icon--site { background: var(--slate-soft); color: var(--muted); }

.gsearch__body { flex: 1 1 auto; min-width: 0; }

.gsearch__title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsearch__sub {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gsearch__item .badge { flex: 0 0 auto; }

.gsearch__empty { margin: 0; padding: 26px 22px; text-align: center; font-size: 13px; color: var(--muted); }
.gsearch__empty-sub { display: block; margin-top: 5px; font-size: 11px; color: var(--muted-light); }

/* The same partial on its own page: no panel chrome around it, and room to breathe. */
.gsearch__results--page .gsearch__group { padding-bottom: 10px; }
.gsearch__results--page .gsearch__group-head { padding: 16px 20px 6px; }
.gsearch__results--page .gsearch__item { padding: 10px 20px; }
.gsearch__results--page .gsearch__empty { padding: 46px 22px; }

.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }

/* Notification panel. The bell in the design is a plain glyph with a red dot, so the dot
   stays a dot - the unread count is written inside the panel rather than on the icon. The
   panel itself hangs off the bell and is shown only by .is-open, the same treatment the
   account switcher gets in the sidebar. */
.bell { position: relative; display: grid; place-items: center; }

.bell__btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.bell__btn:hover { background: var(--page); color: var(--text); }
.bell.is-open .bell__btn { background: var(--page); color: var(--text); }

.bell__dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
    border: 1.5px solid #fff;
}

.bell__panel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(12, 18, 32, .16);
    overflow: hidden;
    z-index: 40;
    text-align: left;
}

.bell.is-open .bell__panel { display: block; }

.bell__head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--border);
}

.bell__title { font-size: 14px; font-weight: 600; color: var(--text); }
.bell__mark-form { margin: 0 0 0 auto; }

.bell__mark {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11px;
    font-weight: 400;
    color: var(--primary);
    cursor: pointer;
}

.bell__mark:hover { text-decoration: underline; }

/* Capped rather than unbounded: the feed is short, but a panel that can grow past the
   viewport is a panel whose last row cannot be clicked. */
.bell__list { max-height: min(60vh, 430px); overflow-y: auto; }

.bell__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.bell__item:last-child { border-bottom: 0; }
.bell__item:hover { background: var(--page); text-decoration: none; }

.bell__item-dot-slot {
    flex: 0 0 8px;
    width: 8px;
    padding-top: 5px;
}

.bell__item-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
}

.bell__body { flex: 1 1 auto; min-width: 0; }

.bell__row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.bell__item-title { font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--text); }
.bell__item:not(.is-unread) .bell__item-title { color: var(--muted); }

.bell__item-sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bell__item-time { flex: 0 0 auto; font-size: 10px; color: var(--muted-light); white-space: nowrap; }

.bell__empty { margin: 0; padding: 34px 22px; text-align: center; font-size: 13px; color: var(--muted); }

.bell__foot {
    padding: 11px 16px;
    border-top: 1px solid var(--border);
    background: var(--page);
    text-align: center;
}

.bell__foot a { font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; }
.bell__foot a:hover { text-decoration: underline; }

.content { padding: 26px 28px 48px; }

.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 5px; }
.page-head__title { font-size: 20px; }
.page-head__sub { color: var(--muted); margin-top: 0px;margin-bottom:5px; }
.page-head__actions { margin-left: auto; display: flex; gap: 10px; }

/* Page-head search, e.g. Operators - sits beside the header action button rather than
   stretching to fill the row, so it reads as a companion control, not a filter bar. */
.page-head__search { position: relative; flex: 0 1 280px; min-width: 200px; margin-left: auto; }
.page-head__search .field { width: 100%; padding-left: 34px; }
.page-head__search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-light); pointer-events: none; }
.page-head__search + .page-head__actions { margin-left: 0; }

.eyebrow {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

/* --------------------------------------------------------------- avatars */

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    flex: 0 0 auto;
}

.avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.avatar--lg { width: 52px; height: 52px; font-size: 16px; }
.avatar--soft { background: var(--primary-soft); color: var(--primary); }

/* Stable per-operator colour (ConsoleFormat.AvatarTone) so the same person reads as the same
   colour in the account switcher, the operator-view sidebar and the topbar. */
.avatar--tone-1 { background: var(--purple); }
.avatar--tone-2 { background: #ef4444; }
.avatar--tone-3 { background: var(--warning); }
.avatar--tone-4 { background: var(--success); }
.avatar--tone-5 { background: var(--sky); }

.avatar-wrap { position: relative; display: inline-grid; }
.avatar-wrap .online {
    position: absolute; right: 0; bottom: 2px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--success); border: 2px solid #fff;
}

.person { display: flex; align-items: center; gap: 9px; }

/* ----------------------------------------------------------------- cards */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
}

.card__title { font-size: 17px; font-weight: 500; }
.card__sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.card__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.card__body { padding: 0 20px 20px; }

/* ------------------------------------------------------------ stat cards */

.stat-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.stat-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.stat {
    /* Overridden per-card by the accent script (see _Layout), which reads each tile's own
       icon color so the hover glow and top bar match it instead of one fixed brand color. */
    --accent: var(--primary);
    --accent-soft: rgba(29, 111, 242, .16);
    --accent-ring: rgba(29, 111, 242, .35);

    position: relative;
    background: linear-gradient(180deg, #ffffff, #fbfbfd);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    overflow: hidden;
    animation: stat-in .5s cubic-bezier(.22, 1, .36, 1) backwards;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, border-color .25s ease;
}

.stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent 140%);
    background-size: 220% 100%;
    background-position: 100% 0;
    opacity: .5;
    transform: scaleX(1);
    transform-origin: left;
    transition: opacity .3s ease, background-position 1s ease;
}

/* Soft spotlight bloom, tinted to the card's own accent - stays dormant until hover so five
   tiles side by side don't all glow at once. */
.stat::after {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-soft), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--border-strong);
}

.stat:hover::before { opacity: 1; background-position: 0 0; }
.stat:hover::after { opacity: 1; }

.stat-row .stat:nth-child(1) { animation-delay: .02s; }
.stat-row .stat:nth-child(2) { animation-delay: .07s; }
.stat-row .stat:nth-child(3) { animation-delay: .12s; }
.stat-row .stat:nth-child(4) { animation-delay: .17s; }
.stat-row .stat:nth-child(5) { animation-delay: .22s; }

.stat__top { display: flex; align-items: center; margin-bottom: 22px; }

.stat__icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: grid; place-items: center;
    color: #fff;
    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 0 var(--accent-ring), 0 8px 16px -8px var(--accent);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}

.stat:hover .stat__icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 7px var(--accent-ring), 0 10px 18px -7px var(--accent);
}

.stat__value {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}
.stat__label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 6px; }
.stat__foot { font-size: 12px; color: var(--muted-light); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

/* The commission approval tiles: no icon, and the label reads before the number rather
   than under it, so the amount is the only thing in the card carrying any weight. */
.stat--plain { padding: 24px 26px; }
.stat--plain .stat__label { margin: 0 0 14px; }

/* The commission-approved tile is inverted in the design. */
.stat--dark { background: linear-gradient(155deg, #131d34 0%, #0c1220 65%); border-color: #0c1220; }

.stat--dark::after {
    top: -46px; right: -46px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(29, 111, 242, .35), transparent 70%);
    opacity: 1;
}

.stat--dark .stat__label { color: #9aa3b2; }
.stat--dark .stat__foot { color: #7b8494; border-top-color: rgba(255, 255, 255, .1); }
.stat--dark .stat__icon { background: rgba(255, 255, 255, .1); }

.stat--dark .stat__value { color: #fff; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .stat--dark .stat__value {
        background: linear-gradient(135deg, #ffffff, #a9c9ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.trend {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: transform .2s ease;
}

.stat:hover .trend { transform: translateY(-1px); }

.trend--up { background: var(--success-soft); color: var(--success); }
.trend--up svg { animation: trend-bounce 1.8s ease-in-out infinite; }
.trend--flat { background: var(--slate-soft); color: var(--muted); }
.trend--warn { background: var(--danger-soft); color: var(--danger); }
.trend--warn svg { animation: trend-pulse 1.6s ease-in-out infinite; }

/* Compact count chips in the dashboard header. */
.chip-stats { margin-left: auto; display: flex; gap: 10px; }

.chip-stat {
    --accent: var(--primary);
    --accent-soft: rgba(29, 111, 242, .14);

    position: relative;
    min-width: 96px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    background: var(--surface);
    overflow: hidden;
    animation: stat-in .5s cubic-bezier(.22, 1, .36, 1) backwards;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, border-color .2s ease;
}

.chip-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.chip-stat:hover::before { transform: scaleX(1); }

.chip-stats .chip-stat:nth-child(1) { animation-delay: .05s; }
.chip-stats .chip-stat:nth-child(2) { animation-delay: .1s; }
.chip-stats .chip-stat:nth-child(3) { animation-delay: .15s; }

.chip-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: var(--border-strong);
    background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface);
}

.chip-stat__value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-stat__label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* The chips are links to the screen each figure is read off, so they keep the card's own
   colours rather than picking up the global anchor blue and underline. */
a.chip-stat, a.chip-stat:hover { color: inherit; text-decoration: none; }

/* A link to a panel on the same page (the Alerts chip, the schedule tabs) lands it clear of
   the sticky topbar instead of underneath it. */
.card[id] { scroll-margin-top: 88px; }

@keyframes stat-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes trend-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes trend-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(1.12); }
}

/* --------------------------------------------------------------- badges */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge--plain::before { display: none; }

.badge--slate { background: var(--slate-soft); color: #4b5563; }
.badge--blue { background: var(--primary-soft); color: var(--primary); }
.badge--purple { background: var(--purple-soft); color: var(--purple); }
.badge--sky { background: var(--sky-soft); color: #0284c7; }
.badge--amber { background: var(--warning-soft); color: #b45309; }
.badge--green { background: var(--success-soft); color: var(--success); }
.badge--dark-green { background: #dcf5e5; color: #0f7a37; }
.badge--red { background: var(--danger-soft); color: var(--danger); }

/* -------------------------------------------------------------- buttons */

/* 36px tall, 8px corners, medium weight - read off the design's buttons. The height is
   held by the padding plus a fixed 20px line box rather than the body's 1.5 ratio, so a
   button keeps the same height whatever font-size a modifier sets. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.btn--primary:disabled { background: #a6c6f8; cursor: not-allowed; }

.btn--ghost { background: var(--surface); border-color: var(--border); color: var(--text);min-width:80px }
.btn--ghost:hover:not(:disabled) { background: #f9fafb; color: var(--text); }

.btn--success { background: var(--success); color: #fff; }
.btn--success:hover:not(:disabled) { background: #128040; color: #fff; }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not(:disabled) { background: #b91c1c; color: #fff; }

/* Soft pill - light tint fill, no border, fully rounded ends. Used for low-emphasis
   "view all" style links that still want to read as a button. */
.btn--soft { background: var(--primary-soft); color: var(--primary); border-radius: 999px; font-weight: 600; }
.btn--soft:hover:not(:disabled) { background: #dde9fd; color: var(--primary-dark); }

/* Only .btn--primary said anything about being disabled, so a turned-off ghost or danger
   button was indistinguishable from a live one - full colour, hand cursor, and nothing but
   a tooltip to say otherwise. Every variant now fades and drops the pointer, and the hover
   rules above are gated so a dead button no longer lights up under the mouse. */
.btn--ghost:disabled,
.btn--success:disabled,
.btn--danger:disabled { opacity: .5; cursor: not-allowed; }

.btn--block { width: 100%; }
.btn--lg { padding: 11px 18px; font-size: 15px; }
.btn--sm { padding: 6px 12px; font-size: 13px; line-height: 18px; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.icon-btn:hover:not(:disabled) { background: #f3f4f6; color: var(--text); }

/* A turned-off row action (Websites' Remove, which needs the site inactive first) has to
   read as unavailable rather than just failing to respond to a click. */
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }

.icon-btn--on { color: var(--success); }
.icon-btn--on:hover:not(:disabled) { background: var(--success-soft); color: var(--success); }

.icon-btn--danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }

/* --------------------------------------------------------------- tables */

/* Wide tables scroll inside their card rather than squashing. The staff compare
   values across columns, so collapsing to stacked cards on small screens would
   break the thing the table is for. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; }

.table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-light);
    font-weight: 600;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: var(--surface);
}

.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fafbfc; }
.table tbody tr:hover .row-actions { opacity: 1; }

.row-actions { opacity: 0; display: flex; gap: 4px; justify-content: flex-end; }

.cell-primary { font-weight: 600; }
.cell-primary a{
    color:#0c1220;
}
.cell-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cell-muted { color: var(--muted); }
.cell-overdue { color: var(--danger); font-weight: 600; }

/* A select that sits inside a table cell and reads as text until it is reached for -
   borderless at rest, so a column of them does not turn the grid into a form, and
   bordered on hover/focus so it is clearly the thing that changes the value. Used by
   the Website Manager's Operator column. */
.cell-select {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-weight: 600;
    max-width: 190px;
    text-overflow: ellipsis;
    padding: 5px 24px 5px 8px;
    margin-left: -8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center;
    color: var(--text);
    cursor: pointer;
}

.cell-select:hover { border-color: var(--border); background-color: #fff; }
.cell-select:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); background-color: #fff; }
.cell-select:disabled { opacity: .55; cursor: progress; }

/* Unmapped reads like the em dash the other empty cells use, not like a real value. */
.cell-select--empty { color: var(--muted-light); font-weight: 400; }

/* The All Leads grid's Operator column on a row nobody owns. It has to keep reading as
   the red "Unassigned" pill the rest of the console uses - the dot included, drawn as a
   background layer because a select cannot carry the badge's ::before - while still
   being the control that hands the lead to someone. */
.cell-select--assign {
    font-size: 12px;
    font-weight: 600;
    max-width: 170px;
    padding: 4px 24px 4px 21px;
    margin-left: 0;
    border-radius: 999px;
    color: var(--danger);
    background-color: var(--danger-soft);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        radial-gradient(circle at 4px 50%, currentColor 3px, transparent 3.5px);
    background-repeat: no-repeat, no-repeat;
    background-position: right 7px center, left 4px center;
}

/* Hover and focus keep the pill rather than turning white like the plain cell select: the
   row is still unassigned until the pick is saved, and losing the red mid-gesture reads
   as the change having already happened. */
.cell-select--assign:hover,
.cell-select--assign:focus {
    background-color: var(--danger-soft);
    border-color: var(--danger);
}

/* The dropdown list is drawn by the platform and inherits the select's red on some of
   them, which would print every operator as though they were a problem. */
.cell-select--assign option { color: var(--text); font-weight: 500; }
.cell-num { font-variant-numeric: tabular-nums; }

/* Source site: the full domain, linking out to it. Stays muted like the plain site
   name it replaced until hovered, so a whole column of links does not out-shout the
   seller names beside it. Long domains ellipsise rather than widening the column. */
.cell-site {
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 220px;
}

.cell-site svg { flex: none; }
.cell-site__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cell-site:hover { color: var(--primary); }
a.cell-site:hover .cell-site__text { text-decoration: underline; }

.sortable { color: inherit; display: inline-flex; align-items: center; gap: 5px; }
.sortable:hover { text-decoration: none; color: var(--text); }

.site-key {
    font-family: var(--mono);
    font-size: 12px;
    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
}

/* --------------------------------------------------------------- filters */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 16px 16px 16px;
}

.field { font: inherit; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); }
.field:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.field--search { min-width: 260px; flex: 1 1 260px; }

/* Search field with a leading icon inside the filter bar, e.g. Jobs. */
.filter-bar__search { position: relative; flex: 1 1 260px; min-width: 260px;max-width:300px; }
.filter-bar__search .field { width: 100%; padding-left: 36px; }
.filter-bar__search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted-light); pointer-events: none; }

/* Leads filter bar matches the approved design: search/stage/status/date stay their
   natural width and Clear sits flush against the right edge, leaving open space in
   between rather than the search field stretching to fill it. Every control shares one
   fixed height and a smaller font so the search box, the two selects, the date picker
   and Clear all line up instead of each sizing off its own content. */
.filter-bar--leads { padding: 10px 16px; gap: 8px; }

.filter-bar--leads .field,
.filter-bar--leads .btn {
    height: 32px;
    font-size: 12.5px;
}

.filter-bar--leads .field { padding: 0 10px; border-radius: 8px; }
.filter-bar--leads .filter-bar__search .field { padding-left: 32px; }
.filter-bar--leads .filter-bar__search svg { left: 10px; }
.filter-bar--leads .btn { padding: 0 14px; border-radius: 8px; }
/* Clear sits flush right once a control is set. The group takes the auto margin so
   anything in it stays together instead of each button absorbing half the gap. */
.filter-bar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.segmented { display: inline-flex; background: #f3f4f6; border-radius: 10px; padding: 3px; gap: 3px; }

.segmented a, .segmented button {
    border: 0; background: transparent; font: inherit; font-weight: 600;
    padding: 6px 13px; border-radius: 8px; color: var(--muted); cursor: pointer;
}

.segmented .is-active { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.segmented a:hover { text-decoration: none; }

/* View switch (Jobs List / Pipeline) - a plain label next to a solid pill, not a
   segmented track, matching the approved design. */
.view-switch { display: flex; align-items: center; gap: 6px; }

.view-switch__item {
    font: inherit;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.view-switch__item:hover { text-decoration: none; color: var(--text); }
.view-switch__item.is-active { background: var(--primary); color: #fff; }
.view-switch__item.is-active:hover { color: #fff; }

/* ------------------------------------------------------------ pipeline board */

.board-scroll { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }

.board { display: flex; align-items: flex-start; gap: 16px; }

.board-col { flex: 0 0 250px; width: 250px; }

.board-col__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px 12px;
    font-size: 13px;
    font-weight: 600;
}

.board-col__count { margin-left: auto; color: var(--muted-light); font-weight: 600; }

/* Capped and independently scrollable so one busy stage can't stretch the whole
   board - and the page under it - to its height while the other columns sit
   short with dead space below them. */
.board-col__body { max-height: min(70vh, 640px); overflow-y: auto; }

.board-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 13px;
    margin-bottom: 10px;
    color: inherit;
}

.board-card:hover { border-color: var(--border-strong); text-decoration: none; color: inherit; }

.board-card__name { font-weight: 600; }
.board-card__address { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; margin-top: 4px; }
.board-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.board-card__foot .person { gap: 6px; font-size: 12px; }
.board-card__date { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }

.board-col__empty { color: var(--muted-light); font-size: 13px; padding: 6px; }
.board-col__more { color: var(--muted); font-size: 12px; padding: 2px 6px; }

/* ----------------------------------------------------------- flash + toast */

.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-weight: 500;
}

.flash--ok { background: var(--success-soft); color: #0f7a37; }
.flash--err { background: var(--danger-soft); color: #a91b1b; }
.flash--warn { background: var(--warning-soft); color: #b45309; }

/* Bottom-right stack, as drawn. Success toasts fade themselves out; error toasts stay
   until dismissed, because a message about something that did not happen is worth reading
   at whatever pace the reader needs. */
/* A native <dialog> opens in the top layer, which no z-index can reach, so the stack is a
   manual popover that script raises into the top layer alongside it. The popover's own UA
   styles - centred, bordered, its own background - are undone here, and the closed state
   keeps the old fixed position so the toasts still show if that script never runs. */
.toast-stack {
    position: fixed;
    inset: auto 24px 24px auto;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: auto;
    height: auto;
    max-width: min(380px, calc(100vw - 48px));
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
}

.toast-stack:not(:popover-open) { display: flex; }

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(12, 18, 32, .14);
    padding: 13px 16px;
    font-weight: 600;
    animation: toast-in .18s ease-out;
}

.toast--ok .toast__icon { color: var(--success); flex: 0 0 18px; }
.toast--err { border-color: #f3c6c6; }
.toast--err .toast__icon { color: var(--danger); flex: 0 0 18px; }

.toast__close {
    background: none;
    border: 0;
    padding: 2px;
    cursor: pointer;
    color: var(--muted-light);
    display: inline-flex;
    margin-left: auto;
}

.toast__close:hover { color: var(--text); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.toast--ok {
    animation: toast-in .18s ease-out, toast-out .4s ease-in 6s forwards;
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(8px); visibility: hidden; }
}

/* Someone who has asked for less motion gets a toast that simply stays put. */
@media (prefers-reduced-motion: reduce) {
    .toast, .toast--ok { animation: none; }
}

/* ---------------------------------------------------------------- login */

.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.login__aside {
    position: relative;
    background: var(--sidebar);
    color: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The soft glow behind the brand, top-left in the design. */
.login__aside::before {
    content: "";
    position: absolute;
    top: -180px; left: -140px;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 111, 242, .28), transparent 62%);
}

/* The second, dimmer glow behind the stats row, bottom-right in the design. */
.login__aside::after {
    content: "";
    position: absolute;
    bottom: -220px; right: -160px;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 42, 148, .35), transparent 65%);
}

.login__aside > * { position: relative; }

.login__pitch { margin-top: auto; max-width: 420px; }
.login__pitch h1 { font-size: 48px; line-height: 1.08; margin: 14px 0 18px; letter-spacing: -0.03em; }
.login__pitch p { color: #98a1b3; font-size: 15px; }
.login__eyebrow { color: #4d94ff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }

.login__stats { display: flex; gap: 14px; margin-top: 46px; }

.login__stat {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .03);
}

.login__stat b { display: block; font-size: 24px; }
.login__stat span { font-size: 12px; color: #98a1b3; }

.login__trust { margin-top: 34px; font-size: 12px; color: #6b7385; display: flex; align-items: center; gap: 8px; }

.login__panel { background: #fff; display: grid; place-items: center; padding: 40px; }
.login__form { width: 100%; max-width: 420px; }
.login__form h2 { font-size: 34px; letter-spacing: -0.02em; }
.login__form .lede { color: var(--muted); margin: 6px 0 32px; }

.label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.label { font-weight: 600; font-size: 12px;display:inline-block;margin-bottom:5px; }

.input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fafbfc;
    font: inherit;
}

.input:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); background: #fff; }

.input-wrap { position: relative; }
.input-wrap .reveal { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: 0; border: 0; color: var(--muted-light); cursor: pointer; }

.form-row { margin-bottom: 18px; }

.check { display: flex; align-items: center; gap: 9px; margin: 18px 0 22px; }

.login__note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 20px; }
.login__fine { text-align: center; color: var(--muted-light); font-size: 12px; margin-top: 10px; }

.validation { color: var(--danger); font-size: 13px; margin-bottom: 14px; }

/* Per-field message shown under an input while its value is being corrected -
   carries the hidden attribute until the field's own handler unhides it. */
.field-note { color: var(--danger); font-size: 12px; line-height: 1.4; margin-top: 6px; }
.field-note[hidden] { display: none; }

.test-creds {
    border: 1px dashed var(--warning);
    background: var(--warning-soft);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 20px;
}

.test-creds__head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #92600a;
    margin-bottom: 8px;
}

.test-creds__row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.test-creds__row + .test-creds__row { margin-top: 6px; }
.test-creds__row:hover { border-color: var(--warning); }

.test-creds__label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-light); flex: 0 0 60px; }
.test-creds__value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; flex: 1; }
.test-creds__copied { display: none; font-size: 11px; font-weight: 600; color: var(--success); }
.test-creds__row.is-copied .test-creds__copied { display: inline; }
.test-creds__row.is-copied .test-creds__value { color: var(--success); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1399px) {
    .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .login { grid-template-columns: 1fr; }
    .login__aside { display: none; }
}

@media (max-width: 1023px) {
    .sidebar {
        position: fixed;
        z-index: 50;
        left: 0; top: 0;
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    .shell.is-open .sidebar { transform: translateX(0); }

    .shell.is-open .scrim {
        position: fixed;
        inset: 0;
        background: rgba(12, 18, 32, .45);
        z-index: 40;
    }

    .stat-row, .stat-row--4, .stat-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content { padding: 20px 16px 40px; }
    .topbar { padding: 12px 16px; }
}

@media (min-width: 1024px) {
    .nav-toggle { display: none; }
}

@media (max-width: 767px) {
    .stat-row, .stat-row--4, .stat-row--3 { grid-template-columns: minmax(0, 1fr); }
    .page-head { flex-wrap: wrap; }
    .page-head__title { font-size: 20px; }
    .page-head__search { flex: 1 1 100%; margin-left: 0; }
    .chip-stats { width: 100%; }
    .topbar__search { flex: 1 1 auto; }
}

/* Print and reduced motion: the console is used to review money decisions, so both
   deserve to behave. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------- pipeline overview */

.pipeline { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }

.pipeline__tile { border-radius: 12px; padding: 16px 14px; border: 1px solid transparent; }
.pipeline__count { font-size: 26px; font-weight: 600; line-height: 1.1; }
.pipeline__name { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin: 6px 0 12px; }
.pipeline__bar { height: 4px; border-radius: 999px; background: rgba(12, 18, 32, .08); overflow: hidden; }
.pipeline__bar span { display: block; height: 100%; border-radius: 999px; background: currentColor; }

.pipeline__tile--slate { background: #f7f8fa; color: #4b5563; border-color: #eceef2; }
.pipeline__tile--blue { background: #f1f6ff; color: var(--primary); border-color: #e0ebfd; }
.pipeline__tile--purple { background: #f7f4ff; color: var(--purple); border-color: #ece4fd; }
.pipeline__tile--sky { background: #eef9ff; color: #0284c7; border-color: #ddf1fc; }
.pipeline__tile--amber { background: #fff8ed; color: #b45309; border-color: #fdedd6; }
.pipeline__tile--green { background: #f0fbf4; color: var(--success); border-color: #ddf3e5; }
.pipeline__tile--dark-green { background: #eafaf0; color: #0f7a37; border-color: #d4f2df; }

/* ------------------------------------------------------------------ charts */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

/* Charts are plain CSS bars rather than a charting library: no external script, nothing to
   hydrate, and it renders identically with JavaScript disabled. */
.chart { display: flex; gap: 12px; height: 210px; }

.chart__axis {
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: 11px; color: var(--muted-light); text-align: right;
    padding-bottom: 22px; min-width: 30px;
}

.chart__plot {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.chart__group { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart__bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; }

.bar { width: 12px; border-radius: 4px 4px 0 0; min-height: 2px; }
.bar--primary { background: var(--primary); }
.bar--green { background: #22c55e; }

.chart__label { font-size: 11px; color: var(--muted); padding: 6px 0; }

/* ------------------------------------------------------ summary + activity */

.kv { margin: 0; }
.kv > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--border); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--muted); margin: 0; font-size: 13px; }
.kv dd { margin: 0; font-weight: 600; font-size: 13px; }

/* A row that carries a second, explanatory line under its value - who reassigned a lead
   and when (RT-04). Centring is right for a one-line value and wrong the moment the value
   wraps, so the modifier tops the label and the value out together instead. */
.kv > div.kv--noted { align-items: flex-start; gap: 20px; }
.kv--noted dd { text-align: right; }
.kv__note {
    display: block; margin-top: 4px;
    font-weight: 400; font-size: 12px; line-height: 1.55; color: var(--muted);
}

.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.activity li:last-child { border-bottom: 0; }
.activity__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 8px; }
.activity__dot--neutral { background: var(--primary); }
.activity__dot--positive { background: var(--success); }
.activity__dot--pending { background: var(--warning); }
.activity__dot--negative { background: var(--danger); }
.activity__body { flex: 1; min-width: 0; }
.activity__body strong { display: block; font-size: 13px; }
.activity__body .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity__time { font-size: 12px; color: var(--muted-light); white-space: nowrap; }

.count-pill {
    background: var(--danger); color: #fff; font-size: 12px; font-weight: 600;
    min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; padding: 0 7px;
}

.attention {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 13px; border-radius: 10px; margin-bottom: 9px; font-size: 13px; font-weight: 500;
}

.attention:last-child { margin-bottom: 0; }
.attention--critical { background: var(--danger-soft); color: #a91b1b; }
.attention--warning { background: var(--warning-soft); color: #92590b; }
.attention > svg:first-child { flex: 0 0 16px; }
.attention__text { flex: 1; min-width: 0; }
.attention a.attention__text { color: inherit; text-decoration: none; }
.attention a.attention__text:hover { text-decoration: underline; }

.attention__close {
    background: none; border: 0; padding: 2px; cursor: pointer;
    color: inherit; opacity: .55; display: inline-flex; flex: 0 0 auto;
}

.attention__close:hover { opacity: 1; }

/* Icon-triggered tooltip - a compact alternative to .attention for warnings that
   belong next to a status badge rather than as a banner inside the card body. */
.tooltip-trigger {
    position: relative;
    display: inline-flex;
    color: var(--warning);
    cursor: default;
    outline: none;
}

.tooltip-trigger svg { display: block; }

.tooltip-trigger__bubble {
    position: absolute;
    top: calc(100% + 10px);
    right: -8px;
    width: 230px;
    background: var(--text);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
    z-index: 20;
}

.tooltip-trigger__bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 12px;
    border: 6px solid transparent;
    border-bottom-color: var(--text);
}

.tooltip-trigger:hover .tooltip-trigger__bubble,
.tooltip-trigger:focus-visible .tooltip-trigger__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 1399px) {
    .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Header for a column that carries only hover actions. The column still needs a name for
   anyone reading the table with a screen reader; it just must not print one. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------- grid ranking picker */

/* "Sort by" in a grid's card head, e.g. Operators. Sized down against the card title so it
   reads as a control on the table rather than a second heading, and allowed to drop onto
   its own line on a narrow screen instead of squeezing the title beside it. */
.card__head--wrap { flex-wrap: wrap; }

.sort-picker { gap: 8px; }
.sort-picker label { font-size: 12px; white-space: nowrap; }
.sort-picker .field { height: 34px; font-size: 12.5px; padding: 0 10px; border-radius: 8px; }

@media (max-width: 767px) {
    .sort-picker { margin-left: 0; flex: 1 1 100%; }
    .sort-picker .field { flex: 1 1 auto; min-width: 0; }
}