:root {
    /* Design-system palette (2026-09): deep green / earthy amber / coral,
       replacing the old bright green + primary red/yellow/green status set.
       --accent and the two status tones (--earthy, --coral) are the site's
       only three brand hues now; --accent-dark/--accent-light/--border/
       --text-muted/--sidebar-bg/--tooltip-bg/--hero-grad-* are companion
       shades computed from them (darken/lighten/tint) to keep hover states,
       borders and emphasis text working -- the palette only specifies one
       shade per role, so these exist to preserve that existing depth, not
       to introduce new brand colors. Change --accent/--earthy/--coral/
       --bg/--surface/--surface-alt/--text-primary/--text-secondary and
       everything else in the file follows. */
    --accent: #1F5F45;
    --accent-dark: #184A36;
    --accent-light: #E9EFEC;
    --accent-rgb: 31, 95, 69;
    --earthy: #8F5A1A;
    --coral: #B3392C;
    --bg: #F7F5F0;
    --surface: #FFFFFF;
    --surface-alt: #E1DDD3;
    --border: #EDEBE5;
    --text-primary: #1C2620;
    --text-secondary: #54615A;
    --text-muted: #8D958E;
    --sidebar-bg: #143E2D;
    --sidebar-width: 220px;
    --topbar-height: 68px;
    --radius: 12px;
    --radius-lg: 16px;
    /* App-wide spacing: between tabs in a tab bar, between cards in a row,
       and between stacked sections/cards down a page. */
    --tab-gap: 0.4rem;
    --card-gap: 1rem;
    --section-gap: 1.5rem;
    --shadow: 0 1px 3px rgba(16, 24, 18, 0.07), 0 1px 2px rgba(16, 24, 18, 0.04);
    --shadow-md: 0 10px 24px rgba(16, 24, 18, 0.08);
    --shadow-lg: 0 16px 32px rgba(16, 24, 18, 0.12);
    --grid-color: var(--border);
    --muted-ink: var(--text-muted);
    --tooltip-bg: #1C2620;
    --tooltip-text: #ffffff;
    /* BD Master Sheet row colours by Status, as set on the Smartsheet
       itself (its conditional formatting) -- used for the Action Centre
       list so it reads the same as the sheet. New Inquiry is uncoloured. */
    --ss-ongoing-bg: #E2F2FE;
    --ss-converted-bg: #E7F5E9;
    --ss-onhold-bg: #E5E5E5;
    --ss-terminated-bg: #FFEBEE;
    --hero-grad-from: var(--accent-dark);
    --hero-grad-to: var(--accent);
    /* Fixed brand palette (not theme-varied) shared by the phase bars and the
       task-status doughnut, so these read the same in light and dark mode.
       Phase bars are colored by phase status: each status has a light
       (planned) / dark (actual) pair, except not-applicable which is a
       single flat grey for both bars, and overrun which only tints actual. */
    --phase-planned: #a8dcc8;
    --phase-actual: #1d9e75;
    --phase-na: #c9c9c4;
    --phase-overrun: #e2574c;
    --phase-inprogress-planned: #f3d9a8;
    --phase-inprogress-actual: #e8a33d;
    --phase-notstarted-planned: #7fb5d6;
    --phase-notstarted-actual: #4a90c2;

    /* RAG(B) condition buckets for the Home page -- Red/Amber/Green kept in
       the same family as .attention-chip, plus a Blue bucket for condition
       code 5 ("ahead"), which is tracked separately from Green. Red/Amber/
       Green all reference the three brand hues above (not their own
       hardcoded colors), so this is where the whole platform's status
       language -- good/medium/urgent -- actually lives. Blue is unrelated
       to that language (a distinct "ahead of plan" bucket) and stays as-is. */
    --rag-red-bg: rgba(179, 57, 44, 0.10);
    --rag-red-text: var(--coral);
    --rag-amber-bg: rgba(143, 90, 26, 0.12);
    --rag-amber-text: var(--earthy);
    --rag-green-bg: var(--accent-light);
    --rag-green-text: var(--accent-dark);
    --rag-blue-bg: rgba(2, 119, 189, 0.12);
    --rag-blue-text: #0277bd;

    /* Categorical chart palette (CVD-safe, validated) -- shared by the Home
       page's inline-SVG donut/bar visuals so they stay theme-aware without JS. */
    --chart-1: #1f6524;
    --chart-2: #c79214;
    --chart-3: #33691e;
    --chart-4: #94b046;
    --chart-5: #9c5220;
    --chart-6: #00967f;
    --chart-7: #cc6642;
    --chart-8: #3f9c7c;

    /* Fixed semantic pair for the Precert/Cert stacked column chart -- deep
       green + slate blue (no yellow/amber), chosen per-theme (not tied to a
       --chart-N index, since the index->hue mapping isn't consistent
       between the light/dark palettes above). */
    --precert-color: #1d9e75;
    --cert-color: #4a7fa5;

    /* Status/priority badge icons -- shared mask-image glyphs used by every
       outline badge (.status-badge, .priority-chip, .attention-chip,
       .rating-badge, .invoice-chip, .et-writeback-badge). Each is a plain
       stroke='black' shape; the mask keeps only its alpha, so the badge's
       own `color` (via background-color: currentColor on the ::before)
       is what actually paints it -- add a new status by pointing
       --badge-icon at one of these, never by drawing a new filled icon. */
    --icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='black'/%3E%3C/svg%3E");
    --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
    --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5.5-6'/%3E%3C/svg%3E");
    --icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5v7M14 8.5v7'/%3E%3C/svg%3E");
    --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19L12 3.5z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 14.6 9l6 .9-4.3 4.2 1 6-5.3-2.8-5.3 2.8 1-6-4.3-4.2 6-.9L12 3.5z'/%3E%3C/svg%3E");
    --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
    --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
    --icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 15 15 9M9.5 9h5.5v5.5'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
    /* Same palette, dark-mode shades -- see the :root block above for how
       the companion tokens (accent-dark, border, sidebar, tooltip, hero
       gradient) are derived from the palette's named colors. */
    --accent: #4FAE82;
    --accent-dark: #76C09D;
    --accent-light: rgba(79, 174, 130, 0.16);
    --accent-rgb: 79, 174, 130;
    --earthy: #D89A4E;
    --coral: #E17A6C;
    --bg: #131C17;
    --surface: #1B2620;
    --surface-alt: #2A362F;
    --border: #3A4740;
    --text-primary: #ECF0EA;
    --text-secondary: #A6B3AB;
    --text-muted: #7A867F;
    --sidebar-bg: #0C251B;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.4);
    --grid-color: var(--border);
    --muted-ink: var(--text-muted);
    --tooltip-bg: #0F1612;
    --tooltip-text: #ffffff;
    /* Dark-mode equivalents of the Smartsheet status row colours: the same
       hues as low-opacity tints, so text stays readable. */
    --ss-ongoing-bg: rgba(226, 242, 254, 0.10);
    --ss-converted-bg: rgba(231, 245, 233, 0.10);
    --ss-onhold-bg: rgba(229, 229, 229, 0.08);
    --ss-terminated-bg: rgba(255, 235, 238, 0.10);
    --hero-grad-from: #102D21;
    --hero-grad-to: var(--accent);

    --rag-red-bg: rgba(225, 122, 108, 0.16);
    --rag-red-text: var(--coral);
    --rag-amber-bg: rgba(216, 154, 78, 0.16);
    --rag-amber-text: var(--earthy);
    --rag-green-bg: var(--accent-light);
    --rag-green-text: var(--accent-dark);
    --rag-blue-bg: rgba(79, 195, 247, 0.16);
    --rag-blue-text: #4fc3f7;

    --chart-1: #c08a12;
    --chart-2: #a8461f;
    --chart-3: #6b9c3a;
    --chart-4: #9c5220;
    --chart-5: #0097a7;
    --chart-6: #8a8a1e;
    --chart-7: #00a8ba;
    --chart-8: #2f8a37;

    --precert-color: #2bc08f;
    --cert-color: #6f9fc4;
}

* {
    box-sizing: border-box;
}

/* Baseline for any plain, unclassed link (e.g. a project/company name in a
   table cell) -- every other link on the site already sets its own color
   via a class and wins on specificity, so this only fills the gap the
   browser default (blue, barely visible on the dark theme's green
   surfaces) was otherwise left in. */
a {
    color: var(--accent-dark);
}

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

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Layout shell */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sidebar-brand-logo {
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.95rem;
}

.nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nav-link.active {
    background-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

.nav-link.disabled {
    color: rgba(255, 255, 255, 0.35);
    cursor: default;
}

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

.topbar {
    height: var(--topbar-height);
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.topbar-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.9rem;
}

.sync-indicator {
    color: var(--text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: var(--surface-alt);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.theme-toggle:hover {
    background-color: var(--accent-light);
    color: var(--accent-dark);
}

.theme-toggle:active {
    transform: scale(0.92);
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

.theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.2;
}

.username {
    color: var(--text-primary);
    font-weight: 600;
}

.role-badge {
    align-self: flex-start;
    padding: 0.05rem 0.5rem;
    border-radius: 10px;
    background-color: var(--accent-light);
    color: var(--accent-dark);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.logout-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.logout-link:hover {
    text-decoration: underline;
}

.content {
    padding: 2rem;
    flex: 1;
}

/* Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--card-gap);
    margin-bottom: var(--section-gap);
}

.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-light);
    color: var(--accent-dark);
    flex-shrink: 0;
}

.card-icon svg {
    width: 19px;
    height: 19px;
}

.card-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.card-value {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: var(--accent-dark);
    letter-spacing: -0.01em;
}

/* Hero stat card (Total Projects) */
.card--hero {
    background: linear-gradient(135deg, var(--hero-grad-from), var(--hero-grad-to));
    border: none;
    color: #fff;
}

.card--hero .card-label {
    color: rgba(255, 255, 255, 0.78);
}

.card--hero .card-value {
    color: #fff;
}

.card--hero .card-icon {
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.card--hero:hover {
    box-shadow: var(--shadow-lg);
}

/* Charts */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--card-gap);
    margin-bottom: var(--section-gap);
}

/* Task Status doughnut card -- stretches (via .chart-grid's default
   align-items: stretch) to match the Phase Baseline card beside it. The
   wrapper is a fixed 300px-tall, wider-than-tall box (not a square) so
   Chart.js's built-in right-side legend has its own horizontal real estate
   instead of competing with the arc for space inside a square box -- that
   competition was why the arc rendered small even with a "big enough"
   square wrapper. Fixed pixel height (not %/aspect-ratio) so Chart.js's
   resize logic always gets an unambiguous, non-zero box to size against. */
.doughnut-card {
    display: flex;
    flex-direction: column;
}

.doughnut-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

.doughnut-wrap {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: 300px;
    flex-shrink: 0;
}

.chart-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    min-width: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.chart-card:hover {
    box-shadow: var(--shadow-md);
}

.chart-card h2 {
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
}

.chart-card.full-width {
    grid-column: 1 / -1;
}

.finance-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1.1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.finance-summary strong {
    color: var(--text-primary);
}

/* Table */
.table-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    overflow-x: auto;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-bottom: var(--section-gap);
}

.table-card h2 {
    margin: 0 0 1.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
}

.table-footnote {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.table-footnote a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.table-footnote a:hover {
    text-decoration: underline;
}

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

th,
td {
    text-align: left;
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    white-space: nowrap;
}

th {
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------- */
/* Shared outline badge style -- every status/priority indicator platform-  */
/* wide (project status, inquiry stage, priority, email status, invoice     */
/* status, rating, writeback) inherits its shape from this one rule set.    */
/* A specific badge class only ever sets `color` + `--badge-icon`; shape,   */
/* border, tint background and icon rendering all live here so the look    */
/* stays in sync everywhere by construction, not by convention.            */
/* ---------------------------------------------------------------------- */
.status-badge,
.priority-chip,
.attention-chip,
.rating-badge,
.invoice-chip,
.et-writeback-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    border: 1.5px solid currentColor;
    background-color: color-mix(in srgb, currentColor 10%, var(--surface));
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
}

.status-badge::before,
.priority-chip::before,
.attention-chip::before,
.rating-badge::before,
.invoice-chip::before,
.et-writeback-badge::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--badge-icon, var(--icon-dot));
    mask-image: var(--badge-icon, var(--icon-dot));
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.status-badge {
    font-size: 0.78rem;
    color: var(--text-secondary);
    --badge-icon: var(--icon-dot);
}

.status-badge.in-progress {
    color: var(--accent-dark);
    --badge-icon: var(--icon-clock);
}

.status-badge.completed {
    color: var(--accent-dark);
    --badge-icon: var(--icon-check);
}

.status-badge.on-hold {
    color: var(--earthy);
    --badge-icon: var(--icon-pause);
}

.status-badge.converted {
    color: var(--accent-dark);
    --badge-icon: var(--icon-check);
}

.status-badge.terminated {
    color: var(--coral);
    --badge-icon: var(--icon-x);
}

/* Login page */
.login-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg);
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    transition: background-color 0.2s ease;
}

.login-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2.5rem 2rem;
    width: 100%;
    max-width: 360px;
    box-shadow: var(--shadow-md);
}

.login-title {
    font-size: 1.2rem;
    color: var(--accent-dark);
    margin: 0 0 1.5rem;
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.login-form label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.6rem;
}

.login-form input {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    background-color: var(--surface);
    color: var(--text-primary);
}

.login-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.login-form button {
    margin-top: 1.25rem;
    padding: 0.7rem;
    background-color: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.login-form button:hover {
    background-color: var(--accent-dark);
}

.login-error {
    background-color: var(--rag-red-bg);
    color: var(--rag-red-text);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

/* ---------------------------------------------------------------------- */
/* Projects picker                                                        */
/* ---------------------------------------------------------------------- */

.chip-strip-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.chip-strip-card h2 {
    margin: 0 0 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
}

.chip-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.priority-chip {
    font-size: 0.85rem;
    color: var(--coral);
    --badge-icon: var(--icon-alert);
    transition: transform 0.15s ease;
}

.priority-chip:hover {
    transform: translateY(-1px);
}

/* Projects welcome/picker screen */
.projects-welcome {
    background: linear-gradient(160deg, var(--accent-light), var(--bg) 70%);
    border-radius: var(--radius-lg);
    min-height: calc(100vh - var(--topbar-height) - 4rem);
    padding: 2rem 2rem 3rem;
    display: flex;
    flex-direction: column;
}

.welcome-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--accent-dark);
    font-size: 1rem;
}

.welcome-brand-logo {
    height: 32px;
    width: auto;
}

.welcome-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.75rem;
    padding: 2rem 1rem;
}

.welcome-heading {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.project-search-wrap {
    position: relative;
    width: 100%;
    max-width: 560px;
}

.project-search-input {
    width: 100%;
    padding: 1rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: 28px;
    font-size: 1.05rem;
    font-family: inherit;
    background-color: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.project-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.project-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    text-align: left;
    z-index: 10;
}

.project-search-dropdown.open {
    display: block;
}

.project-search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.project-search-result:last-child {
    border-bottom: none;
}

.project-search-result:hover,
.project-search-result.active {
    background-color: var(--accent-light);
}

.result-name {
    font-weight: 600;
    font-size: 0.92rem;
}

.result-client {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.welcome-graphic-wrap {
    width: 100%;
    max-width: 480px;
}

.welcome-graphic {
    width: 100%;
    height: auto;
}

.welcome-graphic .wg-ground {
    stroke: var(--border);
}

.welcome-graphic .wg-sun {
    fill: var(--accent-light);
    stroke: var(--accent);
    opacity: 0.55;
}

.welcome-graphic .wg-bldg {
    fill: var(--accent);
}

.welcome-graphic .wg-bldg-a {
    opacity: 0.14;
}

.welcome-graphic .wg-bldg-b {
    opacity: 0.2;
}

.welcome-graphic .wg-bldg-c {
    opacity: 0.16;
}

.welcome-graphic .wg-windows rect {
    fill: var(--surface);
    opacity: 0.85;
}

.welcome-graphic .wg-leaves path {
    fill: var(--accent);
    opacity: 0.5;
}

.welcome-graphic .wg-leaves line {
    stroke: var(--accent-dark);
    opacity: 0.45;
}

/* ---------------------------------------------------------------------- */
/* Project detail page                                                    */
/* ---------------------------------------------------------------------- */

.attention-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: var(--section-gap);
}

.attention-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    border-radius: 12px;
    background-color: #1d9e75;
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.actions-btn:hover {
    background-color: #17805f;
    transform: translateY(-1px);
}

.actions-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Actions dropdown -- anchored under the button, not a centered modal */
.actions-menu {
    position: relative;
    margin-left: auto;
}

.actions-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem;
    z-index: 50;
}

.actions-dropdown.open {
    display: block;
}

.actions-dropdown-title {
    margin: 0.2rem 0.5rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.actions-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.5rem;
    border-radius: var(--radius);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.87rem;
    font-weight: 600;
    transition: background-color 0.12s ease;
}

.actions-dropdown-item:hover {
    background-color: var(--accent-light);
}

.actions-dropdown-item svg {
    color: #1d9e75;
    flex-shrink: 0;
}

.attention-chip {
    font-size: 0.83rem;
    color: var(--text-secondary);
    --badge-icon: var(--icon-dot);
}

.attention-chip.red {
    color: var(--coral);
    --badge-icon: var(--icon-alert);
}

.attention-chip.orange {
    color: var(--earthy);
    --badge-icon: var(--icon-clock);
}

.attention-chip.yellow {
    color: var(--earthy);
    --badge-icon: var(--icon-flag);
}

.attention-chip.green {
    color: var(--accent-dark);
    --badge-icon: var(--icon-check);
}

/* Header band */
.project-header-band {
    background: linear-gradient(135deg, var(--hero-grad-from), var(--hero-grad-to));
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: var(--section-gap);
    box-shadow: var(--shadow-md);
}

.header-band-main {
    flex: 1 1 320px;
}

.header-band-title {
    margin: 0 0 0.3rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.header-band-client {
    margin: 0 0 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
}

.header-band-client a {
    color: #fff;
    text-decoration: underline;
}

.header-band-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.header-band-meta strong {
    color: #fff;
    font-weight: 600;
}

.header-band-logos {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.header-band-logos img {
    max-height: 52px;
    max-width: 120px;
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    object-fit: contain;
}

/* Contacts */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.contact-card {
    background-color: var(--surface-alt);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}

.contact-card h3 {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
}

.contact-card p {
    margin: 0.15rem 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.contact-card p.contact-sub {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* Milestones */
.milestone-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.milestone-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    background-color: var(--surface-alt);
}

.milestone-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
}

.milestone-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.days-until-chip {
    flex-shrink: 0;
    padding: 0.2rem 0.65rem;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 700;
    background-color: var(--accent-light);
    color: var(--accent-dark);
    white-space: nowrap;
}

.days-until-chip.soon {
    background-color: var(--rag-amber-bg);
    color: var(--earthy);
}

/* Rating gap card */
.rating-gap-card .rating-gap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.rating-badge {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rating-badge.on-track {
    color: var(--accent-dark);
    --badge-icon: var(--icon-check);
}

.rating-badge.at-risk {
    color: var(--coral);
    --badge-icon: var(--icon-alert);
}

.rating-meter-track {
    position: relative;
    height: 10px;
    border-radius: 6px;
    background-color: var(--surface-alt);
    overflow: hidden;
}

.rating-meter-fill {
    height: 100%;
    border-radius: 6px;
    background-color: var(--accent);
}

.rating-meter-marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 16px;
    background-color: var(--text-primary);
}

.rating-gap-footnote {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Phase variance bars */
.phase-variance-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.phase-variance-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.phase-variance-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
}

.phase-variance-callout {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--coral);
}

.phase-bar-track {
    position: relative;
    height: 8px;
    border-radius: 5px;
    background-color: var(--surface-alt);
}

.phase-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 5px;
}

.phase-bar-fill.baseline {
    background-color: var(--phase-planned);
}

.phase-bar-fill.actual {
    height: 4px;
    top: 2px;
    background-color: var(--phase-actual);
}

/* Phase status colors are carried on the track wrapper (not the individual
   bar) so both the planned and actual bar in a pair pick up the same status
   family; "completed" has no override and falls through to the green
   defaults above. */
.phase-bar-track.status-in-progress .phase-bar-fill.baseline {
    background-color: var(--phase-inprogress-planned);
}

.phase-bar-track.status-in-progress .phase-bar-fill.actual {
    background-color: var(--phase-inprogress-actual);
}

.phase-bar-track.status-not-started .phase-bar-fill.baseline {
    background-color: var(--phase-notstarted-planned);
}

.phase-bar-track.status-not-started .phase-bar-fill.actual {
    background-color: var(--phase-notstarted-actual);
}

.phase-bar-track.status-not-applicable .phase-bar-fill.baseline,
.phase-bar-track.status-not-applicable .phase-bar-fill.actual {
    background-color: var(--phase-na);
}

/* Tick marking where the planned (baseline) length ends, so the red overrun
   segment reads as "everything past this point" at a glance. */
.phase-bar-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 12px;
    margin-left: -1px;
    background-color: var(--text-primary);
    border-radius: 1px;
}

/* Overrun always wins on the actual bar, regardless of status -- placed last
   so its equal-specificity selector beats the status-specific rules above. */
.phase-bar-track .phase-bar-fill.actual.overrunning {
    background-color: var(--phase-overrun);
}

.phase-bar-days {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.phase-variance-row-inner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.phase-variance-row-inner .phase-bar-track {
    flex: 1;
}

.phase-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.phase-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.phase-legend .legend-swatch {
    width: 12px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.phase-legend .legend-swatch.completed {
    background-color: var(--phase-actual);
}

.phase-legend .legend-swatch.in-progress {
    background-color: var(--phase-inprogress-actual);
}

.phase-legend .legend-swatch.not-started {
    background-color: var(--phase-notstarted-actual);
}

.phase-legend .legend-swatch.not-applicable {
    background-color: var(--phase-na);
}

/* Invoice status chips */
.invoice-chip {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.invoice-chip.paid {
    color: var(--accent-dark);
    --badge-icon: var(--icon-check);
}

.invoice-chip.raised {
    color: var(--earthy);
    --badge-icon: var(--icon-send);
}

.invoice-chip.confirmed {
    color: var(--text-secondary);
    --badge-icon: var(--icon-check);
}

.invoice-chip.yet-to-be-raised {
    color: var(--text-secondary);
    --badge-icon: var(--icon-minus);
}

.days-outstanding.overdue {
    color: var(--coral);
    font-weight: 700;
}

/* Effort% vs Invoiced% bars */
.effort-bars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.effort-bar-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.effort-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
}

.effort-bar-track {
    height: 10px;
    border-radius: 6px;
    background-color: var(--surface-alt);
    overflow: hidden;
}

.effort-bar-fill {
    height: 100%;
    border-radius: 6px;
    background-color: var(--accent);
}

.effort-bar-fill.invoiced {
    background-color: var(--earthy);
}

/* Projected completion */
.projected-completion-row {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.projected-completion-item .card-label {
    margin-bottom: 0.3rem;
}

.projected-completion-item .card-value {
    font-size: 1.4rem;
}

.projected-completion-item.overrun .card-value {
    color: var(--coral);
}

.location-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-dark);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.location-link:hover {
    text-decoration: underline;
}

.location-link svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.financial-summary-row {
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 0;
}

@media (max-width: 1100px) {
    .financial-summary-row {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.interest-loss-line {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--coral);
}

.interest-loss-line strong {
    color: var(--coral);
}

/* Generic empty state used across detail-page sections with sparse data */
.empty-state {
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 0.75rem 0;
}

.section-note {
    margin: -0.5rem 0 1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-dark);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    margin-bottom: 1.25rem;
}

.back-link:hover {
    text-decoration: underline;
}

.action-placeholder {
    text-align: center;
    padding: 3rem 1.5rem;
}

.action-placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--accent-light);
    color: var(--accent-dark);
    margin-bottom: 1rem;
}

.action-placeholder h2 {
    margin: 0 0 0.5rem;
    text-transform: none;
    font-size: 1.15rem;
    letter-spacing: normal;
    color: var(--text-primary);
}

/* Home page -- compact card system (adapted from docs/db3_reference.html,
   using theme CSS vars instead of the reference's fixed purple palette so it
   stays readable in both light and dark mode). */
.home-section {
    margin-bottom: var(--section-gap);
}

.home-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    margin: 0 0 0.7rem;
}

/* align-items: start -- CSS Grid's default (stretch) was forcing every card
   in a row to match the row's tallest card, e.g. Projects by Typology (a
   short bar chart) getting stretched to match Projects by Guideline (a
   200px donut), leaving a large blank strip below the bars. Cards should
   only ever be as tall as their own content. */
.home-row {
    display: grid;
    align-items: start;
    gap: var(--card-gap);
}

.home-row + .home-row {
    margin-top: 0.9rem;
}

.home-row--5 {
    grid-template-columns: repeat(5, 1fr);
}

.home-row--3 {
    grid-template-columns: repeat(3, 1fr);
}

.home-row--2 {
    grid-template-columns: 1fr 1fr;
}

/* Portfolio Composition only: the two cards must match height (the donut
   card's natural height is the standard), overriding .home-row's usual
   align-items: start. The typology card then stretches its bar chart to
   fill that full height via .home-card--typology below, instead of
   leaving blank space under a short fixed-height chart. */
.home-row--equal {
    align-items: stretch;
}

.home-card--typology {
    display: flex;
    flex-direction: column;
}

.home-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    min-width: 0;
}

.home-card-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0 0 0.4rem;
}

.home-card-value {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: var(--text-primary);
}

.home-card-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0.3rem 0 0;
}

.home-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.home-rag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.home-card--red .home-card-value { color: var(--rag-red-text); }
.home-card--amber .home-card-value { color: var(--rag-amber-text); }
.home-card--green .home-card-value { color: var(--rag-green-text); }
.home-card--blue .home-card-value { color: var(--rag-blue-text); }

.home-donut-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.home-donut-row svg {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.home-legend {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.home-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* CSS Grid (not flex) with an explicit column count set inline per render --
   guarantees every column is exactly 1/N of the full card width regardless
   of how many typology families are present, so bars can't end up bunched
   in part of the row with blank space beside them. .home-bars/.home-bar-col
   flex-grow to fill .home-card--typology's full (stretched-to-match-donut)
   height, and the fill's height % is relative to .home-bar-track (itself
   flex:1, so it always fills whatever height is available) -- keeping the
   track separate from the value/label (both auto-height, no
   overflow:hidden) is what stops labels from being vertically clipped;
   they used to compete with the fill for space inside one shared
   fixed-height flex column. */
.home-bars {
    display: grid;
    align-items: end;
    gap: 8px;
    width: 100%;
    flex: 1;
    min-height: 0;
    padding-bottom: 0.2rem;
}

.home-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 100%;
}

.home-bar-track {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-end;
}

.home-bar-col .home-bar-fill {
    width: 100%;
    background-color: var(--accent);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}

.home-bar-label {
    font-size: 0.66rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

.home-bar-value {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-primary);
}

.home-hbar-row {
    margin-bottom: 0.6rem;
}

.home-hbar-row:last-child {
    margin-bottom: 0;
}

.home-hbar-label {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.home-hbar-label strong {
    color: var(--text-primary);
    font-weight: 600;
}

.home-hbar-track {
    height: 8px;
    background-color: var(--surface-alt);
    border-radius: 4px;
    overflow: hidden;
}

.home-hbar-fill {
    height: 100%;
    border-radius: 4px;
    background-color: var(--accent);
}

/* Typology duration -- lollipop style (dot + stem) to visually differ from
   the guideline-family horizontal bars beside it. */
.home-lollipop-row {
    margin-bottom: 0.9rem;
}

.home-lollipop-row:last-child {
    margin-bottom: 0;
}

.home-lollipop-track {
    position: relative;
    height: 10px;
}

.home-lollipop-stem {
    position: absolute;
    top: 4px;
    left: 0;
    height: 2px;
    border-radius: 1px;
    background-color: var(--chart-6);
}

.home-lollipop-dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: -5px;
    border-radius: 50%;
    background-color: var(--chart-6);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--chart-6);
}

/* Precert vs Cert -- vertical grouped stacked column per guideline family
   (X axis = family), with % labels inside the wider segments. Deep green +
   slate blue are fixed semantic colors (not the generic --chart-N
   rotation) so the meaning stays consistent between light and dark mode,
   and read as a distinct chart type/palette next to the horizontal bars
   and lollipops elsewhere on this page. */
.home-stack-columns {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 170px;
    padding-bottom: 0.25rem;
}

.home-stack-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    min-width: 0;
}

.home-stack-col-bar {
    width: 100%;
    max-width: 64px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--surface-alt);
}

.home-stack-col-bar .segment {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 700;
    min-height: 2px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.home-stack-col-bar .segment.precert {
    background-color: var(--precert-color);
}

.home-stack-col-bar .segment.cert {
    background-color: var(--cert-color);
}

.home-stack-col-label {
    font-size: 0.68rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    word-break: break-word;
}

.home-pct-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.home-pct-legend .precert-dot { background-color: var(--precert-color); }
.home-pct-legend .cert-dot { background-color: var(--cert-color); }

.home-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 1100px) {
    .home-row--5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }

    .home-row--5,
    .home-row--3,
    .home-row--2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .home-row--5,
    .home-row--3,
    .home-row--2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .sidebar {
        display: none;
    }
}

/* ---------------------------------------------------------------------- */
/* Finance page (Phase 5)                                                 */
/* ---------------------------------------------------------------------- */

/* Landing picker -- three large option cards instead of the Projects
   welcome screen's search box, reusing the same .projects-welcome shell
   (gradient background, brand row, graphic) for visual consistency. */
.finance-option-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    width: 100%;
    max-width: 900px;
}

.finance-option-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.75rem 1.5rem;
    text-align: left;
    text-decoration: none;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.finance-option-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.finance-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-light);
    color: var(--accent-dark);
    margin-bottom: 0.35rem;
}

.finance-option-card h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.finance-option-sub {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-dark);
}

.finance-option-desc {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

@media (max-width: 900px) {
    .finance-option-grid {
        grid-template-columns: 1fr;
    }
}

/* Sub-nav shown at the top of each of the three finance views -- a back
   link to the picker plus tabs to jump directly between sibling views
   without detouring through the picker each time. */
.finance-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: var(--section-gap);
}

.finance-tabs-links {
    display: flex;
    gap: var(--tab-gap);
    background-color: var(--surface-alt);
    padding: 0.3rem;
    border-radius: 12px;
}

.finance-tab {
    padding: 0.45rem 1rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.finance-tab:hover {
    color: var(--text-primary);
}

.finance-tab.active {
    background-color: var(--surface);
    color: var(--accent-dark);
    box-shadow: var(--shadow);
}

.finance-period-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.finance-period-label strong {
    color: var(--text-primary);
}

/* On-Hold Locked Value -- deliberately visually separate (amber, not part
   of the main card-grid) so it reads as excluded-from-target money, not an
   addition to it. */
.finance-onhold-card {
    background-color: var(--rag-amber-bg);
    border: 1px solid color-mix(in srgb, var(--earthy) 25%, transparent);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.25rem;
}

.finance-onhold-card .card-label {
    color: var(--earthy);
}

.finance-onhold-card .card-value {
    color: var(--earthy);
    font-size: 1.6rem;
}

.finance-onhold-card .card-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
}

/* Stat delta (variance / QoQ change) -- green for favorable, red for
   unfavorable, arrow direction communicated via a unicode glyph rather than
   an icon font. */
.stat-delta {
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0.2rem 0 0;
}

.stat-delta.positive {
    color: var(--accent-dark);
}

.stat-delta.negative {
    color: var(--coral);
}

/* Horizontal aging bars -- one row per bucket, bar width relative to the
   largest bucket so the worst-aged money is immediately visually obvious. */
.aging-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.aging-row-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    margin-bottom: 0.3rem;
}

.aging-row-label strong {
    color: var(--text-primary);
    font-weight: 700;
}

.aging-row-label span.aging-count {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.aging-bar-track {
    height: 12px;
    border-radius: 6px;
    background-color: var(--surface-alt);
    overflow: hidden;
}

.aging-bar-fill {
    height: 100%;
    border-radius: 6px;
    background-color: var(--accent);
}

.aging-row.bucket-31-60 .aging-bar-fill { background-color: #e8a33d; }
.aging-row.bucket-61-90 .aging-bar-fill { background-color: #e0752e; }
.aging-row.bucket-90plus .aging-bar-fill { background-color: #e2574c; }

/* Carryforward / add-on mini-cards -- reuses .home-card's surface but as a
   labeled two-stat card rather than a single big number. */
.cf-card {
    background-color: var(--surface-alt);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}

.cf-card h3 {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}

.cf-card-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.25rem 0;
}

.cf-card-row strong {
    color: var(--text-primary);
}

/* Gap-to-target action banner (Current Month view) */
.gap-banner {
    background-color: var(--accent-light);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 2.25rem;
}

.gap-banner strong {
    color: var(--accent-dark);
}

.gap-banner.on-target {
    background-color: var(--accent-light);
    border-left-color: var(--accent-dark);
}

/* BD Follow-ups view: overdue-action variant -- red, not green, since this
   banner means the opposite of "on target". */
.gap-banner.urgent {
    background-color: var(--rag-red-bg);
    border-left-color: var(--rag-red-text);
}

.gap-banner.urgent strong {
    color: var(--rag-red-text);
}

.finance-footnote {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: -1rem 0 2.25rem;
}

/* Email Tracker: consolidated toolbar (view toggle + filters + refresh in
   one row) and on-demand refresh. Scoped to .email-tracker-page; the
   toolbar/segment/filter rules are shared with BD Performance's date filter
   (.bdp-toolbar) so both pages filter with the same controls. */

.email-tracker-page .et-toolbar, .bdp-toolbar .et-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-bottom: 1.1rem;
    margin-bottom: var(--section-gap);
    border-bottom: 1px solid var(--border);
}

.email-tracker-page .et-segment-group, .bdp-toolbar .et-segment-group {
    display: flex;
    gap: var(--tab-gap);
    background-color: var(--surface-alt);
    padding: 0.25rem;
    border-radius: 10px;
    flex-shrink: 0;
}

.email-tracker-page .et-segment, .bdp-toolbar .et-segment {
    padding: 0.4rem 0.9rem;
    border-radius: 7px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.email-tracker-page .et-segment:hover, .bdp-toolbar .et-segment:hover {
    color: var(--text-primary);
}

.email-tracker-page .et-segment.active, .bdp-toolbar .et-segment.active {
    background-color: var(--surface);
    color: var(--accent-dark);
    box-shadow: var(--shadow);
}

.email-tracker-page .et-toolbar-right, .bdp-toolbar .et-toolbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.email-tracker-page .et-filter-form, .bdp-toolbar .et-filter-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.email-tracker-page .et-filter-label, .bdp-toolbar .et-filter-label {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.email-tracker-page .et-filter-form input[type="date"], .bdp-toolbar .et-filter-form input[type="date"],
.email-tracker-page .et-filter-form select, .bdp-toolbar .et-filter-form select {
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    background-color: var(--bg);
    color: var(--text-primary);
}

.email-tracker-page .et-filter-form input[type="date"], .bdp-toolbar .et-filter-form input[type="date"] {
    min-width: 128px;
}

.email-tracker-page .et-filter-form select, .bdp-toolbar .et-filter-form select {
    min-width: 148px;
}

.email-tracker-page .et-filter-form input:focus, .bdp-toolbar .et-filter-form input:focus,
.email-tracker-page .et-filter-form select:focus, .bdp-toolbar .et-filter-form select:focus {
    outline: none;
    border-color: var(--accent);
}

.email-tracker-page .et-apply-btn, .bdp-toolbar .et-apply-btn {
    padding: 0.42rem 0.9rem;
    background-color: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.email-tracker-page .et-apply-btn:hover, .bdp-toolbar .et-apply-btn:hover {
    background-color: var(--accent-dark);
}

.email-tracker-page .et-clear-link, .bdp-toolbar .et-clear-link {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: underline;
    white-space: nowrap;
}

.email-tracker-page .et-toolbar-divider, .bdp-toolbar .et-toolbar-divider {
    width: 1px;
    align-self: stretch;
    background-color: var(--border);
}

.email-tracker-page .et-sync {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.email-tracker-page .last-updated-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Generic small icon button -- originally Email Tracker-only, promoted to
   global since the CRM page (and anything after it) needs the same close/
   refresh-button look. Behavior is identical everywhere; nothing here is
   page-specific. */
.et-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-color: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.et-icon-btn:hover {
    background-color: var(--accent-light);
    color: var(--accent-dark);
    border-color: var(--accent);
}

.et-icon-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.et-icon-btn svg {
    width: 15px;
    height: 15px;
}

/* Where-mail-gets-stuck table: tint rows that have an open (pending) count */
tr.stuck-row-pending td {
    background-color: var(--rag-amber-bg);
}

tr.stuck-row-pending td:first-child {
    border-left: 3px solid var(--rag-amber-text);
}

/* Email Tracker visual redesign (2026-08): one consistent spacing rhythm,
   equal-height KPI cards, and lighter card chrome. Scoped to
   .email-tracker-page throughout so Home/Finance/etc. are unaffected.

   Spacing rhythm: every direct child block on the page (toolbar, KPI
   section, each chart-grid row, the table) sits 1.5rem (24px) apart via
   this single rule, instead of a different margin hardcoded per section --
   the template carries no margin utility classes or inline spacing at all
   any more. Within a row, cards sit 1rem (16px) apart. That 16/24 split is
   the page's entire spacing scale. */
.email-tracker-page > * + * {
    margin-top: 1.5rem;
}

.email-tracker-page .home-section,
.email-tracker-page .card-grid,
.email-tracker-page .chart-grid {
    margin-bottom: var(--section-gap);
}

.email-tracker-page .home-section-label {
    margin-bottom: 0.85rem;
}

/* KPI strip: explicit equal columns + a fixed card height fixes the
   long-standing uneven-row problem (Needs Action and Response Rate used to
   render taller than their siblings). Every KPI card, including the gauge
   and hero variants, is exactly the same box; `align-items: stretch`
   (grid's default) plus the fixed height on the card itself means no card
   can grow past or fall short of its neighbours regardless of content. */
.email-tracker-page .et-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.email-tracker-page .et-kpi-grid .card {
    height: 120px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    box-shadow: none;
}

.email-tracker-page .et-kpi-grid .card-label {
    font-size: 0.7rem;
    line-height: 1.2;
    letter-spacing: 0.06em;
}

.email-tracker-page .et-kpi-grid .card-value {
    font-size: 1.85rem;
}

.email-tracker-page .et-kpi-grid .card-sub {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--text-secondary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-tracker-page .card--hero .card-sub {
    color: rgba(255, 255, 255, 0.78);
}

.email-tracker-page .chart-grid {
    gap: var(--card-gap);
}

/* Restraint: the KPI strip drops its shadow entirely (a quiet data band,
   distinguished only by a hairline border); chart/table cards keep the
   sitewide shadow token as-is -- it's already a 1px/3px hairline, not a
   drop shadow, so it stays as the one place a boundary is worth drawing
   around actual chart/table content. Hover no longer lifts or deepens
   the shadow on this page -- the green accent stays reserved for the one
   hero KPI and active toggle state, not sprinkled across every hover. */
.email-tracker-page .card,
.email-tracker-page .chart-card,
.email-tracker-page .table-card {
    transition: border-color 0.15s ease;
}

.email-tracker-page .card:hover {
    transform: none;
    box-shadow: none;
}

.email-tracker-page .chart-card:hover,
.email-tracker-page .table-card:hover {
    box-shadow: var(--shadow);
}

.email-tracker-page .chart-card {
    padding: 1.15rem 1.25rem;
}

/* Every chart-card heading gets the same 0.75rem breathing room below it
   by default; the one card with an inline stat (chart-card-header) zeroes
   its own h2 margin and takes over that spacing on the wrapping flex row
   instead, so the two layouts land on an identical gap either way. */
.email-tracker-page .chart-card h2 {
    font-size: 0.72rem;
    margin-bottom: 0.75rem;
}

.email-tracker-page .chart-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.email-tracker-page .chart-card-header h2 {
    margin-bottom: 0;
}

.email-tracker-page .chart-card-stat {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-dark);
    white-space: nowrap;
}

.email-tracker-page .chart-card-stat-sub {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.email-tracker-page .table-card {
    padding: 1.15rem 1.25rem;
}

.email-tracker-page .table-card h2 {
    font-size: 0.72rem;
    margin-bottom: 0.75rem;
}

.email-tracker-page .section-note {
    font-size: 0.78rem;
    margin: -0.35rem 0 0.75rem;
}

.email-tracker-page th,
.email-tracker-page td {
    padding: 0.55rem 0.7rem;
    font-size: 0.83rem;
}

/* Fixed-height wrapper so Chart.js's responsive resize logic always has an
   unambiguous box (bare canvases with no wrapper were sizing off their
   default aspect ratio, which is what made the charts render oversized). */
.email-tracker-page .chart-wrap {
    position: relative;
    width: 100%;
    height: 280px;
}

.email-tracker-page .chart-wrap--sm {
    height: 260px;
}

/* Generic muted "-" placeholder -- promoted to global for the same reason
   as .et-icon-btn above. */
.muted-dash {
    color: var(--text-muted);
}

/* Hero action panel -- now the Email List at the bottom of the page. A
   hairline accent top border is the only visual weight it gets beyond the
   shared table-card chrome; the content (larger heading, ranked rows) does
   the rest. */
.email-tracker-page .hero-card {
    border-top: 3px solid var(--accent);
}

.email-tracker-page .hero-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.email-tracker-page .hero-head h2 {
    margin: 0;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--text-primary);
}

.email-tracker-page .hero-stat {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.email-tracker-page .hero-stat strong {
    color: var(--accent-dark);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Email list scrolls inside its own fixed-height box (~10 rows) instead of
   stretching the page -- the header row stays sticky to the top of that
   box while the body scrolls under it. */
.email-tracker-page .et-table-scroll {
    max-height: 460px;
    overflow-y: auto;
    border-radius: var(--radius);
}

.email-tracker-page .et-table-scroll table {
    margin: 0;
}

.email-tracker-page .et-action-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--surface);
    box-shadow: 0 1px 0 var(--border);
}

.email-tracker-page .action-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--surface-alt);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
}

.email-tracker-page tr.action-row-top .action-rank {
    background-color: var(--accent-light);
    color: var(--accent-dark);
}

.email-tracker-page .category-chip {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--surface-alt);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.email-tracker-page .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.email-tracker-page .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background-color: var(--surface-alt);
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.email-tracker-page .tag-chip .tag-count {
    font-weight: 700;
    color: var(--text-primary);
}

/* 2026 SaaS/BI redesign -- adds progressive disclosure (clickable rows +
   drawer), a compact "communication line" per row instead of prose, a
   segmented-bar component reused across every composition insight, and a
   couple of Chart.js upgrades (donut, horizontal bar, area/gap trend).
   Nothing above this point changed shape -- filters, toggle, KPI strip and
   Refresh Now are untouched. */

/* -- Action table: clickable rows, compact communication line -- */
.email-tracker-page .et-action-table tbody tr[data-row-id] {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.email-tracker-page .et-action-table tbody tr[data-row-id]:hover,
.email-tracker-page .et-action-table tbody tr[data-row-id]:focus-visible {
    background-color: var(--accent-light);
}

.email-tracker-page .et-action-table tbody tr[data-row-id]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.email-tracker-page .et-sender-cell {
    font-weight: 600;
    color: var(--text-primary);
}

.email-tracker-page .et-flow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.email-tracker-page .et-flow-arrow {
    color: var(--text-muted);
}

/* Status badge in the Communication column (New / Follow-up Due) keeps the
   outline shape/border/color but drops the leading icon -- the word itself
   already says what it is, and the row already reads left-to-right as
   owner -> date -> status without one more glyph competing for attention. */
.email-tracker-page .et-status-chip::before {
    display: none;
}

.email-tracker-page .et-col-status {
    width: 36px;
}

.email-tracker-page .draft-indicator {
    text-align: center;
}

.email-tracker-page .et-status-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.email-tracker-page .et-status-icon--draft {
    color: var(--text-muted);
}

.email-tracker-page .et-status-icon--approved {
    color: var(--accent-dark);
}

.email-tracker-page .attention-chip.neutral {
    color: var(--text-secondary);
    --badge-icon: var(--icon-minus);
}

/* -- Segmented composition bar (Priority Mix, Trusted Split, Sender Type,
   Reply Speed) -- a single 100%-wide row of proportional colored segments
   plus a labeled legend underneath. Colors are semantic (good/warning/
   critical/neutral, reusing the site's RAG tokens) where the data has an
   inherent order, and a fixed categorical set (cat1..cat4) where it
   doesn't (sender type) -- see routes/bd.py's _segmented_rows(). */
.email-tracker-page .segbar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--surface-alt);
    gap: 2px;
}

.email-tracker-page .segbar-seg {
    min-width: 3px;
}

.email-tracker-page .segbar-seg--good { background-color: var(--rag-green-text); }
.email-tracker-page .segbar-seg--warning { background-color: var(--rag-amber-text); }
.email-tracker-page .segbar-seg--critical { background-color: var(--rag-red-text); }
.email-tracker-page .segbar-seg--neutral { background-color: var(--text-muted); }
.email-tracker-page .segbar-seg--cat1 { background-color: var(--chart-1); }
.email-tracker-page .segbar-seg--cat2 { background-color: var(--chart-6); }
.email-tracker-page .segbar-seg--cat3 { background-color: var(--chart-2); }
.email-tracker-page .segbar-seg--cat4 { background-color: var(--chart-5); }

.email-tracker-page .segbar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.65rem;
}

.email-tracker-page .segbar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.email-tracker-page .segbar-legend-item strong {
    color: var(--text-primary);
}

/* Compact variant for the Quick Insight tiles -- the big metric above
   already states the headline count, so the legend here just names each
   segment's color (no repeated numbers) to keep the fixed chart-zone from
   overflowing. */
.email-tracker-page .segbar-legend--compact {
    gap: 0.35rem 0.6rem;
    margin-top: 0.45rem;
    font-size: 0.68rem;
}

.email-tracker-page .segbar-legend--compact .segbar-legend-item {
    font-size: 0.68rem;
    gap: 0.3rem;
}

.email-tracker-page .segbar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.email-tracker-page .segbar-dot--good { background-color: var(--rag-green-text); }
.email-tracker-page .segbar-dot--warning { background-color: var(--rag-amber-text); }
.email-tracker-page .segbar-dot--critical { background-color: var(--rag-red-text); }
.email-tracker-page .segbar-dot--neutral { background-color: var(--text-muted); }
.email-tracker-page .segbar-dot--cat1 { background-color: var(--chart-1); }
.email-tracker-page .segbar-dot--cat2 { background-color: var(--chart-6); }
.email-tracker-page .segbar-dot--cat3 { background-color: var(--chart-2); }
.email-tracker-page .segbar-dot--cat4 { background-color: var(--chart-5); }

/* -- Detail drawer: fixed right-side panel + backdrop -- */
.et-drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(10, 20, 14, 0.45);
    z-index: 90;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.et-drawer-backdrop:not([hidden]) {
    opacity: 1;
}

.et-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
    z-index: 91;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

.et-drawer.open {
    transform: translateX(0);
}

/* The drawer/backdrop/toasts live outside .email-tracker-page (a fixed
   overlay shouldn't inherit a page wrapper's stacking context), so
   .et-icon-btn needs its own copy here -- the .email-tracker-page-scoped
   one (Refresh Now button) doesn't reach this markup. */
.et-drawer .et-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-color: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.et-drawer .et-icon-btn:hover {
    background-color: var(--accent-light);
    color: var(--accent-dark);
    border-color: var(--accent);
}

.et-drawer .et-icon-btn svg {
    width: 15px;
    height: 15px;
}

.et-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.35rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.et-drawer-sender {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-word;
}

.et-drawer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.et-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.35rem 1.75rem;
}

.et-drawer-loading {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.et-drawer-flow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.et-drawer-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    background-color: var(--surface-alt);
    border-radius: var(--radius);
}

.et-drawer-meta-item dt {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.et-drawer-meta-item dd {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-primary);
    word-break: break-word;
}

.et-drawer-section {
    margin-bottom: 1.35rem;
}

.et-drawer-section-label {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.et-drawer-summary {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.et-drawer-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.et-writeback-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.et-writeback-badge.off {
    color: var(--text-muted);
    --badge-icon: var(--icon-minus);
}

.et-writeback-badge.on {
    color: var(--rag-green-text);
    --badge-icon: var(--icon-check);
}

.et-drawer-readonly-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.83rem;
}

.et-drawer-readonly-row > div {
    display: flex;
    gap: 0.5rem;
}

.et-drawer-readonly-label {
    flex-shrink: 0;
    width: 56px;
    color: var(--text-muted);
    font-weight: 600;
}

.et-drawer-textarea {
    width: 100%;
    resize: vertical;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
}

.et-drawer-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.et-drawer-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.et-btn {
    flex: 1;
    padding: 0.65rem 1rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.et-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.et-btn--secondary {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
}

.et-btn--secondary:hover:not(:disabled) {
    border-color: var(--accent);
}

.et-btn--primary {
    background-color: var(--accent);
    color: #fff;
}

.et-btn--primary:hover:not(:disabled) {
    background-color: var(--accent-dark);
}

/* -- Toasts -- */
.et-toast-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.et-toast {
    min-width: 240px;
    max-width: 360px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.et-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.et-toast--success {
    border-left: 3px solid var(--rag-green-text);
}

.et-toast--info {
    border-left: 3px solid var(--text-muted);
}

.et-toast--error {
    border-left: 3px solid var(--rag-red-text);
}

/* ---------------------------------------------------------------------- */
/* Quick Insights: number-first cards (2026-09 tightening)                */
/* ---------------------------------------------------------------------- */
/* Every card is the same four-part stack -- [[label][metric][caption]] up
   top, [chart-zone] pinned to a fixed height at the bottom. A row's cards
   share one height (grid stretch), and every chart-zone is the same fixed
   height regardless of card content, so every mini-visual on the page sits
   on the same horizontal line -- see qi_card()/qi_bars()/qi_segbar() in
   the template. Explicit 4-column grid (not auto-fit) so "wide" cards
   (span 2) land predictably instead of reflowing the whole row. */
/* Quick Insights grid: 6 columns so a "wide" card (Response Health, What's
   Coming In, Inquiry Focus, What Needs a Decision) spans a clean half
   (3/6) and every other card spans a clean third (2/6) -- with the cards
   in template order that packs into 4 even rows (wide+wide / three regular
   / three regular / wide+wide), so every row's siblings are naturally
   similar content (bar lists together, segmented bars together) and
   grid's default row-stretch lines their chart-zones up without any card
   having to fake a height it doesn't need. */
.email-tracker-page .qi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--card-gap);
    align-items: stretch;
}

.email-tracker-page .qi-card {
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
}

.email-tracker-page .qi-card--wide {
    grid-column: span 3;
}

.email-tracker-page .qi-label {
    margin: 0 0 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.email-tracker-page .qi-metric {
    margin: 0 0 0.3rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--accent-dark);
}

.email-tracker-page .qi-metric-unit {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: -0.3rem;
}

.email-tracker-page .qi-metric--good { color: var(--rag-green-text); }
.email-tracker-page .qi-metric--warning { color: var(--rag-amber-text); }
.email-tracker-page .qi-metric--critical { color: var(--rag-red-text); }
.email-tracker-page .qi-metric--neutral { color: var(--accent-dark); }

/* Up/down/flat badge next to a card's headline metric (currently Response
   Health) -- color always means "better/worse", not the literal sign of
   the number (e.g. fewer days-to-reply is an "up" / good arrow). */
.email-tracker-page .qi-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.email-tracker-page .qi-trend svg {
    width: 13px;
    height: 13px;
}

.email-tracker-page .qi-trend--up { color: var(--rag-green-text); }
.email-tracker-page .qi-trend--down { color: var(--rag-red-text); }
.email-tracker-page .qi-trend--flat { color: var(--text-muted); }

.email-tracker-page .qi-caption {
    margin: 0;
    min-height: 2.3em;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-secondary);
}

.email-tracker-page .qi-caption--muted {
    color: var(--text-muted);
}

/* Chart zone sits at the card's bottom and sizes to its own content (no
   fixed height) -- grid's default row-stretch then equalizes every card's
   height within its row. Content centers vertically in the leftover space
   (rather than pinning to the very bottom) so a short visual next to a
   tall row-sibling (e.g. Bottleneck's 3 bars beside Heaviest Load's 6)
   gets balanced whitespace above and below instead of one big gap. */
.email-tracker-page .qi-chart-zone {
    flex: 1;
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.email-tracker-page .qi-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    font-size: 0.76rem;
    color: var(--text-muted);
    background-color: var(--surface-alt);
    border-radius: var(--radius);
}

/* Ranked horizontal bars (Bottleneck, Heaviest Load, Inquiries vs. Others,
   Inquiry Focus' source-channel column). */
.email-tracker-page .qi-bars {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.email-tracker-page .qi-bar-row {
    display: grid;
    grid-template-columns: 84px 1fr 34px;
    align-items: center;
    gap: 0.55rem;
}

.email-tracker-page .qi-bar-label {
    font-size: 0.74rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-tracker-page .qi-bar-track {
    height: 7px;
    border-radius: 4px;
    background-color: var(--surface-alt);
    overflow: hidden;
}

.email-tracker-page .qi-bar-fill {
    height: 100%;
    border-radius: 4px;
    background-color: var(--accent);
}

.email-tracker-page .qi-bar-value {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

/* Heaviest Load's bars double as click-to-filter links (the "N others"
   aggregate row is a plain div -- nothing to filter by). */
.email-tracker-page a.qi-bar-row--link {
    text-decoration: none;
    border-radius: 6px;
    margin: -0.15rem -0.35rem;
    padding: 0.15rem 0.35rem;
    transition: background-color 0.12s ease;
}

.email-tracker-page a.qi-bar-row--link:hover {
    background-color: var(--surface-alt);
}

.email-tracker-page a.qi-bar-row--link:hover .qi-bar-label {
    color: var(--accent-dark);
}

.email-tracker-page .qi-bar-row--muted .qi-bar-label,
.email-tracker-page .qi-bar-row--muted .qi-bar-value {
    color: var(--text-muted);
}

/* What's Coming In: a real category-share widget -- a properly sized donut
   (with the total drawn into its own hole by the centerTextPlugin) beside a
   proper legend list, not a tiny ring floating in empty space. */
.email-tracker-page .qi-donut-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.email-tracker-page .qi-donut-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.email-tracker-page .qi-donut-legend {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.email-tracker-page .qi-donut-legend-row {
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
}

.email-tracker-page .qi-donut-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.email-tracker-page .qi-donut-legend-label {
    color: var(--text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-tracker-page .qi-donut-legend-pct {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.email-tracker-page .qi-donut-legend-count {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-align: right;
    min-width: 1.6em;
}

/* Inquiry Focus: source-channel mini-bars beside a service-interest tag
   cloud. */
.email-tracker-page .qi-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.email-tracker-page .qi-split-col--tags {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.35rem;
}

.email-tracker-page .qi-split-col--tags .tag-list {
    gap: 0.3rem;
}

.email-tracker-page .qi-split-col--tags .tag-chip {
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
}

/* What Needs a Decision: 2-3 rule-based takeaways, each a small tone-colored
   icon + one plain-language sentence. */
.email-tracker-page .qi-decision-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.email-tracker-page .qi-decision-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.email-tracker-page .qi-decision-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--surface-alt);
    color: var(--text-secondary);
}

.email-tracker-page .qi-decision-icon svg {
    width: 15px;
    height: 15px;
}

.email-tracker-page .qi-decision-item--good .qi-decision-icon { background-color: var(--rag-green-bg); color: var(--rag-green-text); }
.email-tracker-page .qi-decision-item--warning .qi-decision-icon { background-color: var(--rag-amber-bg); color: var(--rag-amber-text); }
.email-tracker-page .qi-decision-item--critical .qi-decision-icon { background-color: var(--rag-red-bg); color: var(--rag-red-text); }

.email-tracker-page .qi-decision-text {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-primary);
    padding-top: 0.2rem;
}

@media (max-width: 1100px) {
    .email-tracker-page .et-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .email-tracker-page .qi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .email-tracker-page .qi-card,
    .email-tracker-page .qi-card--wide {
        grid-column: span 1;
    }
}

@media (max-width: 720px) {
    .email-tracker-page .chart-grid {
        grid-template-columns: 1fr;
    }

    .email-tracker-page .qi-grid {
        grid-template-columns: 1fr;
    }

    .email-tracker-page .qi-card--wide {
        grid-column: span 1;
    }

    .email-tracker-page .et-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .email-tracker-page .et-toolbar-right {
        width: 100%;
    }

    .email-tracker-page .et-flow {
        white-space: normal;
    }

    .et-drawer {
        width: 100vw;
    }

    .et-drawer-meta {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------- */
/* BD Action Centre                                                        */
/* ---------------------------------------------------------------------- */
/* A grey "unset/other" chip -- attention-chip only ships red/orange/yellow/
   green (the RAG-style ones with real meaning); status values like
   "Archive" or a blank Approval Request Status need a neutral option that
   doesn't imply good/bad. Kept global (not page-scoped) since it's a
   reasonable default anywhere else a chip needs a neutral tone. */
.attention-chip.neutral {
    color: var(--text-secondary);
    --badge-icon: var(--icon-minus);
}

.ac-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: var(--section-gap);
}

.ac-viewing-as {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ac-viewing-as label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.ac-viewing-as select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.88rem;
    min-width: 200px;
}

.ac-viewing-as select:focus {
    outline: none;
    border-color: var(--accent);
}

.ac-writeback-note {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.ac-writeback-note strong {
    color: var(--text-secondary);
}

.ac-summary-grid {
    grid-template-columns: repeat(4, 1fr);
}

.ac-breakdown-card {
    cursor: default;
}

.ac-breakdown-card:hover {
    transform: none;
    box-shadow: none;
}

.ac-breakdown-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ac-breakdown-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.ac-breakdown-label {
    color: var(--text-secondary);
}

.ac-breakdown-count {
    font-weight: 700;
}

.ac-table th,
.ac-table td {
    padding: 0.6rem 0.9rem;
}

.ac-col-update {
    width: 56px;
    text-align: center;
}

.ac-update-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ac-update-btn:hover {
    background-color: var(--accent-light);
    color: var(--accent-dark);
    border-color: var(--accent);
}

.ac-update-btn svg {
    width: 15px;
    height: 15px;
}

.ac-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 0.25rem;
}

.ac-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.ac-field select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
}

.ac-field select:focus {
    outline: none;
    border-color: var(--accent);
}

.ac-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ac-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
}

.ac-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.ac-form-link {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--accent-dark);
    text-decoration: none;
    word-break: break-word;
}

.ac-form-link:hover {
    text-decoration: underline;
}

.ac-proposal-note {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ac-proposal-problems {
    margin: 0 0 0.75rem;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.ac-proposal-problems .ac-proposal-warning {
    color: var(--rag-red-text);
    font-weight: 600;
}

.ac-proposal-problems li + li {
    margin-top: 0.2rem;
}

.ac-proposal-btn {
    width: 100%;
}

/* Proposal fill-in boxes (one per blank proposal field) */
.ac-proposal-fields {
    margin-bottom: 0.85rem;
}

.ac-field-grid--stack {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.ac-field input {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 400;
}

.ac-field input:focus {
    outline: none;
    border-color: var(--accent);
}

.ac-proposal-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ac-proposal-hint {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
}

@media (max-width: 720px) {
    .ac-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ac-field-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------- */
/* CRM (contacts) page                                                    */
/* ---------------------------------------------------------------------- */

.crm-page > * + * {
    margin-top: 1.5rem;
}

.crm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.crm-title {
    margin: 0 0 0.2rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.crm-subtitle {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.crm-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    background-color: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.crm-new-btn:hover {
    background-color: var(--accent-dark);
}

.crm-new-btn svg {
    width: 16px;
    height: 16px;
}

/* Toolbar: search + city/type selects + inbound toggle */
.crm-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.crm-search-form {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}

.crm-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.crm-search-form input[type="search"] {
    width: 100%;
    padding: 0.55rem 0.8rem 0.55rem 2.2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.86rem;
    font-family: inherit;
    background-color: var(--surface);
    color: var(--text-primary);
}

.crm-search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
}

.crm-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.crm-toolbar-filters select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 0.82rem;
    font-family: inherit;
    background-color: var(--surface);
    color: var(--text-primary);
}

.crm-toolbar-filters select:focus {
    outline: none;
    border-color: var(--accent);
}

.crm-inbound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.crm-inbound-toggle input {
    accent-color: var(--accent);
}

/* Three-column layout: filter rail / contact list / detail panel */
.crm-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

.crm-rail {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.crm-rail-label {
    margin: 0.85rem 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

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

.crm-rail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 7px;
    font-size: 0.83rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.crm-rail-item:hover {
    background-color: var(--surface-alt);
    color: var(--text-primary);
}

.crm-rail-item.active {
    background-color: var(--accent-light);
    color: var(--accent-dark);
    font-weight: 700;
}

.crm-rail-item span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-rail-count {
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Contact list */
.crm-list-panel {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.crm-list-scroll {
    max-height: 660px;
    overflow-y: auto;
}

/* table-layout: fixed + a <colgroup> in the template is what keeps this to
   exactly the panel's width -- without it, seven nowrap columns push the
   table wider than its container with no horizontal scroll to reveal the
   overflow, silently hiding every column past Company. */
.crm-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.crm-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--surface);
    box-shadow: 0 1px 0 var(--border);
    text-align: left;
    padding: 0.7rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-table td {
    padding: 0.6rem 0.55rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.83rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dense multi-column list -- the icon is worth less here than the extra
   text width it costs; every other badge on the platform keeps its icon. */
.crm-table .attention-chip::before {
    display: none;
}

.crm-table tbody tr {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.crm-table tbody tr:hover,
.crm-table tbody tr:focus-visible {
    background-color: var(--surface-alt);
}

.crm-table tbody tr.active {
    background-color: var(--accent-light);
}

.crm-table tbody tr:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Name cell holds two stacked lines (name + designation) -- override the
   generic td's single-line nowrap so it can wrap to that second line, then
   truncate each line individually instead. */
.crm-table td:first-child {
    white-space: normal;
}

.crm-row-name,
.crm-row-designation {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-row-name {
    font-weight: 600;
}

.crm-row-designation {
    margin-top: 0.1rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* contact_type badges -- a category, not a severity, so these get their
   own small distinct-hue set rather than the platform's red/amber/green
   status language. Same outline shape as every other badge for visual
   consistency, colors are just category identity, not meaning good/bad. */
.crm-type-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
    border: 1.5px solid currentColor;
    background-color: color-mix(in srgb, currentColor 10%, var(--surface));
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Badges inside a table cell truncate with an ellipsis on their own text
   when the column is too narrow (e.g. "Email/Inbound", "MEPF Consultant"),
   instead of the surrounding td hard-clipping them with no indicator. */
.crm-table .attention-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    vertical-align: middle;
}

.crm-type-chip--owner { color: var(--accent-dark); }
.crm-type-chip--prospect { color: var(--earthy); }
.crm-type-chip--consultant { color: var(--cert-color); }
.crm-type-chip--email-inbound { color: var(--text-muted); }

/* Detail panel */
.crm-detail-panel {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    max-height: 720px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.crm-detail-empty {
    margin: 2rem 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.crm-detail-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.crm-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--accent-light);
    color: var(--accent-dark);
    font-weight: 700;
    font-size: 1.1rem;
}

.crm-detail-head-text {
    min-width: 0;
}

.crm-detail-name {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-word;
}

.crm-detail-designation {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.crm-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.crm-sync-note {
    margin: -0.4rem 0 0;
    padding: 0.4rem 0.7rem;
    border-radius: 7px;
    font-size: 0.76rem;
    font-weight: 600;
}

.crm-sync-note--good {
    background-color: var(--rag-green-bg);
    color: var(--rag-green-text);
}

.crm-sync-note--warning {
    background-color: var(--rag-amber-bg);
    color: var(--rag-amber-text);
}

.crm-detail-section {
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.crm-detail-head + .crm-sync-note + .crm-detail-section,
.crm-detail-head + .crm-detail-section {
    padding-top: 0;
    border-top: none;
}

.crm-detail-section-label {
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.crm-detail-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.3rem 0;
    font-size: 0.86rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 6px;
}

.crm-detail-row svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.crm-detail-row--link {
    color: var(--accent-dark);
    cursor: pointer;
}

.crm-detail-row--link:hover {
    text-decoration: underline;
}

.crm-detail-row--muted {
    color: var(--text-muted);
}

.crm-detail-row--indent {
    margin-left: 1.85rem;
    padding: 0;
    font-size: 0.8rem;
}

/* Projects involved -- a plain compact list, not a table; project names
   run long and this section can get tall for a contact linked to dozens of
   projects (e.g. a developer-side contact who signs on every one of a
   client's sites), so it scrolls within the detail panel's own scroll
   rather than fighting it for space. */
.crm-project-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.crm-project-list li {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background-color: var(--surface-alt);
}

.crm-social-form,
.crm-notes-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.crm-social-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.crm-social-form input,
.crm-notes-form textarea {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.83rem;
    font-family: inherit;
    font-weight: 400;
    background-color: var(--bg);
    color: var(--text-primary);
}

.crm-notes-form textarea {
    resize: vertical;
}

.crm-social-form input:focus,
.crm-notes-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.crm-social-save {
    align-self: flex-start;
    font-size: 0.78rem;
    padding: 0.4rem 0.85rem;
}

.crm-detail-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}

.crm-detail-actions .et-btn svg {
    width: 15px;
    height: 15px;
    margin-right: 0.35rem;
    vertical-align: -2px;
}

/* New / Edit contact modal */
.crm-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(10, 20, 14, 0.45);
    z-index: 90;
}

.crm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 2rem));
    max-height: 85vh;
    overflow-y: auto;
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 91;
}

.crm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.crm-modal-header p {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.crm-modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.crm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.crm-form-row label,
.crm-form-full {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.crm-modal input[type="text"],
.crm-modal input[type="email"],
.crm-modal select,
.crm-modal textarea {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 400;
    background-color: var(--bg);
    color: var(--text-primary);
}

.crm-modal input:focus,
.crm-modal select:focus,
.crm-modal textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.crm-modal textarea {
    resize: vertical;
}

.crm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 1200px) {
    .crm-layout {
        grid-template-columns: 180px minmax(0, 1fr) 320px;
    }
}

@media (max-width: 980px) {
    .crm-layout {
        grid-template-columns: 1fr;
    }

    .crm-rail {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .crm-rail-label {
        width: 100%;
        margin: 0.4rem 0 0.1rem;
    }

    .crm-rail-item {
        width: auto;
    }

    .crm-list-scroll {
        max-height: 440px;
    }

    .crm-detail-panel {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .crm-toolbar-filters {
        margin-left: 0;
        width: 100%;
    }

    .crm-form-row {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------- */
/* BD Performance (templates/bd_performance.html) -- five numbered         */
/* sections, equal-height cards per row, fixed-height chart boxes. Every   */
/* rule is scoped under .bdp so no other page is affected.                 */
/* ---------------------------------------------------------------------- */
.bdp {
    --bdp-gap: var(--card-gap);
}

.bdp-section {
    margin-bottom: var(--section-gap);
    display: flex;
    flex-direction: column;
    gap: var(--bdp-gap);
}

.bdp-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}

.bdp-section-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.bdp-section-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
}

.bdp-section-hint {
    margin-left: auto;
    font-size: 0.76rem;
    color: var(--text-muted);
    text-align: right;
}

/* KPI strip */
.bdp-kpis {
    display: grid;
    gap: var(--card-gap);
}

/* All overview tiles on one line, evenly spaced */
.bdp-kpis--row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bdp-kpis--lost { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bdp-kpi {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.85rem 1rem;
    min-width: 0;
}

.bdp-kpi-label {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.bdp-kpi-value {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent-dark);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bdp-kpi-sub {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.bdp-kpi-sub + .bdp-kpi-sub {
    margin-top: 0.1rem;
}

.bdp-kpi--hero {
    background: linear-gradient(135deg, var(--hero-grad-from), var(--hero-grad-to));
    border-color: transparent;
}

.bdp-kpi--hero .bdp-kpi-label,
.bdp-kpi--hero .bdp-kpi-sub { color: rgba(255, 255, 255, 0.78); }
.bdp-kpi--hero .bdp-kpi-value { color: #fff; }

.bdp-kpi--compact {
    padding: 0.7rem 1rem;
    box-shadow: none;
}

.bdp-kpi--compact .bdp-kpi-value {
    font-size: 1.2rem;
    color: var(--text-primary);
}

.bdp-kpi--coral {
    border-left: 3px solid var(--coral);
}

.bdp-kpi--coral .bdp-kpi-value {
    color: var(--coral);
}

/* Grid rows -- stretch so every card in a row matches height */
.bdp-grid {
    display: grid;
    gap: var(--bdp-gap);
    align-items: stretch;
}

.bdp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bdp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bdp-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bdp-card-title {
    margin: 0 0 0.85rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.bdp-card-sub {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}

/* Fixed-height chart box. The canvas is absolutely positioned so it can
   never feed back into the card's height (no Chart.js resize creep); the
   box itself grows via flex only when a taller sibling stretches the row. */
.bdp-chart {
    position: relative;
    flex: 1 1 auto;
    min-height: var(--h, 220px);
}

.bdp-chart canvas {
    position: absolute;
    inset: 0;
}

.bdp-note {
    margin: 0.75rem 0 0;
}

.bdp-note--top {
    margin: -0.35rem 0 0.75rem;
}

/* Stage breakdown */
.bdp-stage-table th,
.bdp-stage-table td {
    padding: 0.5rem 0.5rem;
}

.bdp-stage-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bdp-stage-bar-col {
    width: 32%;
}

.bdp-stage-divider td {
    padding: 0.55rem 0.5rem 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: normal;
}

.bdp-minibar {
    height: 6px;
    border-radius: 3px;
    background-color: var(--surface-alt);
    overflow: hidden;
}

.bdp-minibar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background-color: var(--accent);
}

.bdp-minibar--earthy span { background-color: var(--earthy); }
.bdp-minibar--coral span { background-color: var(--coral); }

/* Tables inside cards */
.bdp-table-wrap {
    overflow-x: auto;
}

/* Capped list: ~10 rows visible, internal scroll, header row pinned */
.bdp-scroll {
    max-height: 488px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.bdp-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--surface);
    box-shadow: inset 0 -1px 0 var(--border);
    border-bottom: none;
}

.bdp-scroll tbody tr:last-child td {
    border-bottom: none;
}

.bdp-scroll tbody tr:hover {
    background-color: var(--surface-alt);
}

.bdp-cell-wrap {
    white-space: normal;
    min-width: 220px;
}

/* Guideline heatmap */
.bdp-heatmap-wrap {
    flex: 1 1 auto;
    min-height: var(--h, 220px);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.bdp-heatmap {
    border-collapse: separate;
    border-spacing: 3px;
}

.bdp-heatmap th,
.bdp-heatmap td {
    border-bottom: none;
    padding: 0.5rem 0.45rem;
    font-size: 0.8rem;
}

.bdp-heatmap thead th {
    font-size: 0.66rem;
    text-align: center;
    padding: 0.2rem 0.3rem 0.35rem;
}

.bdp-heatmap thead th:first-child,
.bdp-heatmap tbody th {
    text-align: left;
}

.bdp-heatmap tbody th {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-primary);
    white-space: normal;
}

.bdp-heat {
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.bdp-heat--accent { background-color: color-mix(in srgb, var(--accent) var(--heat), var(--surface)); }
.bdp-heat--neutral { background-color: color-mix(in srgb, var(--text-secondary) var(--heat), var(--surface)); }
.bdp-heat--earthy { background-color: color-mix(in srgb, var(--earthy) var(--heat), var(--surface)); }
.bdp-heat--empty { background-color: var(--surface-alt); color: var(--text-muted); }
.bdp-heat.is-strong { color: #fff; }

.bdp-heat-legend {
    margin: auto 0 0;
    padding-top: 0.7rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.bdp-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.bdp-heat-legend .bdp-swatch:not(:first-child) {
    margin-left: 0.6rem;
}

.bdp-swatch--accent { background-color: var(--accent); }
.bdp-swatch--earthy { background-color: var(--earthy); }

/* Demand-by-typology treemap (HTML tiles, positioned by JS in %) */
.bdp-treemap {
    position: relative;
    flex: 1 1 auto;
    min-height: var(--h, 220px);
}

.bdp-tile {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid var(--surface);
    border-radius: 5px;
    background-color: var(--tile);
    color: #fff;
    padding: 0.35rem 0.45rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    cursor: default;
    transition: filter 0.12s ease;
}

.bdp-tile:hover {
    filter: brightness(1.08);
}

.bdp-tile-name {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bdp-tile-count {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.bdp-tile--sm {
    padding: 0.2rem 0.3rem;
}

.bdp-tile--sm .bdp-tile-name,
.bdp-tile--sm .bdp-tile-count {
    font-size: 0.64rem;
}

/* Too small for a name: centre the count; the name is in the hover title */
.bdp-tile--xs {
    padding: 0;
    align-items: center;
    justify-content: center;
}

.bdp-tile--xs .bdp-tile-name {
    display: none;
}

/* Where We Win > By Typology: ranked rows with lollipop tracks */
.bdp-lolli {
    flex: 1 1 auto;
    min-height: var(--h, 220px);
    max-height: var(--h, 220px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.bdp-lolli-row {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) minmax(0, 1.35fr) minmax(0, 1.2fr) 1.6rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}

.bdp-lolli-row:last-child {
    border-bottom: none;
}

.bdp-lolli-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--surface);
    padding: 0 0 0.4rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.bdp-lolli .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.bdp-lolli-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bdp-lolli-cell {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.bdp-lolli-cell strong {
    flex: 0 0 3.1rem;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.bdp-lolli-cell strong.bdp-muted {
    color: var(--text-muted);
}

/* Thin baseline + stem ending in a dot */
.bdp-lolli-track {
    position: relative;
    flex: 1 1 auto;
    height: 2px;
    background-color: var(--border);
}

.bdp-lolli-stem {
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    background-color: var(--accent);
}

.bdp-lolli-stem::after {
    content: "";
    position: absolute;
    right: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent);
}

.bdp-lolli-cell--days .bdp-lolli-stem,
.bdp-lolli-cell--days .bdp-lolli-stem::after {
    background-color: var(--earthy);
}

.bdp-lolli-track--empty {
    background-image: linear-gradient(90deg, var(--border) 50%, transparent 50%);
    background-size: 6px 2px;
    background-color: transparent;
}

@media (max-width: 1280px) {
    .bdp-kpis--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bdp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bdp-grid--3 > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .bdp-grid--2,
    .bdp-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .bdp-kpis--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bdp-section-hint { display: none; }
}

@media (max-width: 560px) {
    .bdp-kpis--row,
    .bdp-kpis--lost { grid-template-columns: minmax(0, 1fr); }
}

/* BD Performance: Total Inquiries tile opens the status distribution */
.bdp-kpi--toggle {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.bdp-kpi--toggle:hover,
.bdp-kpi--toggle[aria-expanded="true"] {
    box-shadow: var(--shadow-md);
}

.bdp-toggle-hint {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bdp-status-dist {
    max-width: 560px;
}

.bdp-status-dist[hidden] {
    display: none;
}

.bdp-stage-table .bdp-muted {
    color: var(--text-muted);
}

.bdp-minibar--blue span { background-color: var(--rag-blue-text); }
.bdp-minibar--muted span { background-color: var(--text-muted); }

/* Monthly/Quarterly/Annually switch in a card title */
.bdp-card-toggle {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
}

.bdp-card-toggle .et-segment {
    border: none;
    background-color: transparent;
    font-family: inherit;
    font-size: 0.74rem;
    padding: 0.3rem 0.65rem;
    cursor: pointer;
}

/* Site-wide hover tooltip for [data-tip] elements (see base.html). Same
   look as the Chart.js tooltips: --tooltip-bg / --tooltip-text, 8px radius. */
.hover-tip {
    position: fixed;
    z-index: 1000;
    display: none;
    max-width: 320px;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-line;
    pointer-events: none;
}

.hover-tip.open {
    display: block;
}

[data-tip] {
    cursor: help;
}

/* Projects tab: search bar + collapsible project list above the Home overview */
.projects-top {
    margin-bottom: var(--section-gap);
}

.projects-top-search {
    max-width: none;
    margin-bottom: 0.9rem;
}

.projects-top-search .project-search-input {
    padding: 0.75rem 1.2rem;
    font-size: 0.95rem;
    box-shadow: var(--shadow);
}

.projects-list-card {
    padding: 0.9rem 1.5rem;
}

.projects-list-card[open] {
    padding-bottom: 1.5rem;
}

.projects-list-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
}

.projects-list-card[open] .projects-list-summary {
    margin-bottom: 1rem;
}

.projects-list-count {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-primary);
}

/* Action Centre: search box above the list + Smartsheet status row colours */
.ac-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.ac-list-head h2 {
    margin: 0;
}

.ac-search {
    width: 220px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.83rem;
    background-color: var(--surface);
    color: var(--text-primary);
}

.ac-search:focus {
    outline: none;
    border-color: var(--accent);
}

.ac-table tr.ac-row--on-going-inquiry td { background-color: var(--ss-ongoing-bg); }
.ac-table tr.ac-row--converted td { background-color: var(--ss-converted-bg); }
.ac-table tr.ac-row--on-hold td { background-color: var(--ss-onhold-bg); }
.ac-table tr.ac-row--terminated td { background-color: var(--ss-terminated-bg); }

/* Email Tracker quick-insight visuals: gauge / ring beside a legend, and
   the Home page's lollipop and column shapes sized for a card. */
.email-tracker-page .qi-ring-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.email-tracker-page .qi-ring-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}

.email-tracker-page .qi-ring-wrap--gauge {
    width: 190px;
    height: 100px;
}

.email-tracker-page .qi-ring-row .segbar-legend {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
}

.email-tracker-page .qi-lollipops .home-lollipop-row {
    margin-bottom: 0.55rem;
}

.email-tracker-page .qi-columns {
    height: 110px;
    justify-content: center;
}

/* Project detail: compact Invoice Schedule under the Financial Summary */
.invoice-schedule-scroll {
    max-height: 420px;
}

.invoice-schedule-table td,
.invoice-schedule-table th {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.invoice-schedule-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.invoice-date {
    margin-right: 0.5rem;
    color: var(--text-secondary);
}

/* Uniform spacing: a container's last block never adds its own gap on top
   of the container's, so stacked sections are always --section-gap apart. */
.home-section > :last-child,
.table-card > :last-child,
.chart-card > :last-child,
.bdp-section > :last-child,
.projects-top > :last-child,
.table-card .card-grid {
    margin-bottom: 0;
}