/* ══════════════════════════════════════════════════════════
   PROCONTROL — Dark Theme (SWIFT4Data)
   ══════════════════════════════════════════════════════════ */

/* Colors: https://www.cssportal.com/tools/lighten-color/ */
/* ── CSS Variables — SWIFT4Data palette ────────────────── */
:root {
    /* Text size (Settings > App Settings). Every font-size is
       calc(Npx * var(--text-scale)); rem/em follow the root font-size below.
       medium = 1 = the original look. */
    --text-scale: 1;
    color-scheme: dark;
    /* Backgrounds (dark navy from s4d) */
    --bg-primary: #080c1a;
    --bg-secondary: #141a35;
    --bg-tertiary: #111828;
    --bg-hover: #192038;
    --bg-active: #1f2848;
    --bg-selected: #222b52;      /* selected nav item / active segment */

    /* Borders */
    --border-subtle: #1a2440;
    --border-default: #1e2d50;
    --border-strong: #2a3d6a;

    /* Text */
    --text-primary: #f0f0f0;
    --text-secondary: #8fa8c8;
    --text-muted: #acbdd5;
    --text-inverse: #080c1a;

    /* Accent — orange (s4d logo) */
    --accent: #f7931e;
    --accent-hover: #e07d0a;
    --accent-subtle: rgba(247, 147, 30, 0.12);

    /* Secondary accent — blue (s4d logo body) */
    --accent-blue: #2196f3;
    --accent-blue-dim: rgba(33, 150, 243, 0.12);

    /* Status colours (RAG) */
    --green: #22c55e;
    --green-bg: rgba(34, 197, 94, 0.10);
    --green-border: rgba(34, 197, 94, 0.25);
    --yellow: #f7c948;
    --yellow-bg: rgba(247, 201, 72, 0.10);
    --yellow-border: rgba(247, 201, 72, 0.25);
    --red: #e05555;
    --red-bg: rgba(224, 85, 85, 0.10);
    --red-border: rgba(224, 85, 85, 0.25);
    --grey: #6b7280;
    --grey-bg: rgba(107, 114, 128, 0.10);

    /* Priority */
    --priority-high: #e05555;
    --priority-medium: #f7c948;
    --priority-low: #6b7280;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.6);
    --rail-shadow-color: rgba(0, 0, 0, 0.5);   /* same strength as --shadow-md */
    /* Top bar uses the same dark shadow as the rail in both themes. */
    --topbar-shadow: var(--shadow-md);   /* same dark shadow as the rail */

    /* Project logo backdrop (theme-project-logo-light): a customer's own
       uploaded artwork, often white-on-transparent, disappears against a
       light page background. A neutral gradient plate behind it keeps that
       artwork legible without recolouring anything the customer uploaded —
       applied in BOTH themes (not just light) so it never looks like a
       rendering bug that only appears on toggle. */
    --project-logo-backdrop-start: #1c2440;
    --project-logo-backdrop-end: #0c1120;

    /* Sizing */
    --sidebar-w: calc(220px * (1 + (var(--text-scale) - 1) * 0.6));
    --topbar-h: 56px;
    --radius: 8px;
    --radius-lg: 14px;

    /* Transitions */
    --transition: 0.2s ease;

    /* ── On-tint foregrounds ────────────────────────────────
       Status pills are a semantic colour at ~15% over the page background,
       with brighter text of the same hue on top. In a light theme that text
       has to go DARK instead — a pale green on a pale green tint is invisible.
       These exist so a pill can say `color: var(--green-text)` once and be
       right in both themes. */
    --green-text: #4ade80;
    --red-text: #f87171;
    --yellow-text: #facc15;
    --blue-text: #60a5fa;
    --purple-text: #c084fc;
    --grey-text: #a1a1aa;
    --accent-text: var(--accent);

    /* Text sitting ON a coloured fill. Two tokens, not one, because the fills
       do not behave alike between themes:
         --text-on-fill    red/green/grey fills, and user-chosen WP colours.
                           These stay dark enough in the light theme that white
                           text keeps working (white on #c02626 is 5.9:1).
         --text-on-accent  the SWIFT4DATA orange, which is bright in BOTH
                           themes. White on #f7931e is only 2.3:1, so in the
                           light theme this flips to near-black (7.9:1). */
    --text-on-fill: #ffffff;
    --text-on-accent: #ffffff;

    /* ── Aliases ────────────────────────────────────────────
       These names are used throughout the stylesheet but were never defined,
       so `var(--text)` (321 uses) and `var(--border)` (225 uses) were
       resolving to nothing at all. Defining them here is what makes the light
       theme possible — an undefined custom property cannot be re-pointed. */
    --text: var(--text-primary);
    --border: var(--border-default);
    --border-color: var(--border-default);
    --border-light: var(--border-subtle);
    --bg-card: var(--bg-secondary);
    --bg-sidebar: var(--bg-secondary);
    --bg-input: var(--bg-tertiary);
    --bg-offset: var(--bg-tertiary);
    --bg-subtle: var(--bg-tertiary);
    --surface-2: var(--bg-tertiary);
    --danger: var(--red);
    --success: var(--green);
    --warning: var(--yellow);
    --accent-orange: var(--accent);
    --accent-bg: var(--accent-subtle);
    --accent-rgb: 247, 147, 30;
    --radius-sm: 4px;
    --radius-md: var(--radius);
    --shadow: var(--shadow-md);
    /* --cell-w and --wp-color are deliberately absent: both are set inline at
       runtime (gantt.js, planning.js), so a static default would be wrong. */
}


/* ══════════════════════════════════════════════════════════
   Light theme
   Every token is re-pointed; nothing is inherited from the dark block above,
   because a value tuned against #080c1a is meaningless on #f4f6fa. Ported
   from DESKWORKS, whose palette was checked against WCAG contrast maths.

   The accent is the SWIFT4DATA orange in both themes by explicit product
   decision. Stated plainly: #f7931e measures ~2.3:1 on white, so accent TEXT
   is below AA in the light theme. It is kept for identity — icons, borders,
   fills, active indicators — and never as the only carrier of information.
   Where an accent-coloured *label* has to be read, --accent-text darkens.

   Applied by the runtime as <html data-theme="light">.
   ══════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
    color-scheme: light;
    --bg-primary: #f4f6fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eaeef6;
    --bg-hover: #dfe5f0;
    --bg-active: #d2dbec;
    --bg-selected: #d6deef;

    --border-subtle: #e6eaf2;
    --border-default: #d5dce8;
    --border-strong: #b6c1d4;

    --text-primary: #0f1524;     /* 16.8:1 on --bg-primary */
    --text-secondary: #42506b;   /*  7.5:1 */
    --text-muted: #5b6880;       /*  5.2:1 */
    --text-inverse: #0f1524;
    /* On the bright orange fill, near-black reads 7.9:1 where white is 2.3:1. */
    --text-on-accent: #0f1524;

    --accent: #f7931e;
    --accent-hover: #e07d0a;
    --accent-subtle: rgba(247, 147, 30, 0.14);
    --accent-text: #7c4300;      /* the readable shade, for text only */

    --accent-blue: #1565c0;
    --accent-blue-dim: rgba(21, 101, 192, 0.10);

    --green: #10682f;
    --green-bg: rgba(16, 104, 47, 0.10);
    --green-border: rgba(16, 104, 47, 0.28);
    --yellow: #8a6100;
    --yellow-bg: rgba(138, 97, 0, 0.10);
    --yellow-border: rgba(138, 97, 0, 0.28);
    --red: #c02626;
    --red-bg: rgba(192, 38, 38, 0.09);
    --red-border: rgba(192, 38, 38, 0.28);
    --grey: #5b6880;
    --grey-bg: rgba(91, 104, 128, 0.10);

    --priority-high: #c02626;
    --priority-medium: #8a6100;
    --priority-low: #5b6880;

    /* On a light tint the foreground goes dark, not light. */
    --green-text: #10682f;
    --red-text: #8f1d1d;
    --yellow-text: #6b4b00;
    --blue-text: #1565c0;
    --purple-text: #6b21a8;
    --grey-text: #5b6880;

    /* Dark-theme shadows are near-opaque black; on white they read as smudges. */
    --shadow-sm: 0 1px 2px rgba(15, 21, 36, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 21, 36, 0.10);
    --topbar-shadow: var(--shadow-md);
    --shadow-lg: 0 4px 24px rgba(15, 21, 36, 0.14);
    --rail-shadow-color: rgba(15, 21, 36, 0.10);

    /* Project logo backdrop (theme-project-logo-light) — near-white greys,
       the light-theme mirror of the near-black pair at :root. */
    --project-logo-backdrop-start: #eef1f7;
    --project-logo-backdrop-end: #dce2ee;
}


/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { font-size: calc(16px * var(--text-scale)); }
:root[data-text-size="small"]  { --text-scale: 0.92; }
:root[data-text-size="medium"] { --text-scale: 1; }
:root[data-text-size="large"]  { --text-scale: 1.15; }

/* ── Form fields: one look, app-wide ────────────────────────
   Reference: the Partners filter bar. Tokens first, then a ZERO-specificity
   element default (:where) so any existing class rule still wins. Compact
   in-table variants (.effort-cell-input, .wp-leader-select, ...) override it. */
:root {
    --field-bg: var(--bg-tertiary);
    --field-border: var(--border-default);
    --field-radius: var(--radius);
    --field-pad-y: 7px;
    --field-pad-x: 12px;
    --field-fs: calc(13px * var(--text-scale));
    --field-color: var(--text-primary);
    --field-focus: var(--accent);
    --field-focus-ring: 0 0 0 3px var(--accent-subtle);
}

:where(input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=range], [type=hidden], [type=submit], [type=button], [type=reset], [type=image]), select, textarea) {
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    padding: var(--field-pad-y) var(--field-pad-x);
    color: var(--field-color);
    font: inherit;
    font-size: var(--field-fs);
    min-width: 0;
    max-width: 100%;
    transition: var(--transition);
}
:where(input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=range], [type=hidden], [type=submit], [type=button], [type=reset], [type=image]), textarea)::placeholder {
    color: var(--text-muted);
}
:where(input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=range], [type=hidden], [type=submit], [type=button], [type=reset], [type=image]), select, textarea):focus {
    outline: none;
    border-color: var(--field-focus);
    box-shadow: var(--field-focus-ring);
}
:where(input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=range], [type=hidden], [type=submit], [type=button], [type=reset], [type=image]), select, textarea):disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
:where(textarea) { resize: vertical; }
:where(select) { cursor: pointer; }

/* Fields that draw their own focus state: no extra ring from the default. */
.recip-input:focus,
#palette-input:focus,
.effort-cell-input:focus { box-shadow: none; }

.field-mono { font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace); }
.field-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.field-row > :where(input, select) { flex: 1 1 12em; width: auto; }
.flex-col-gap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: calc(14px * var(--text-scale));
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}


/* ── Sidebar ───────────────────────────────────────────── */
#sidebar {
    width: var(--sidebar-w);
    min-height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--bg-secondary);   /* invisible: the ::after shadow separates rail and content */
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
}

/* Soft shadow on the rail's right edge, matching the topbar's. Starts below the
   topbar band so it never darkens the bar itself, and fades in over 12px so that
   in the corner where rail and bar meet the two shadows add up to one constant
   strength instead of a darker spot. The 12px blur must match --shadow-md. */
#sidebar::after {
    content: "";
    position: absolute;
    left: 100%;
    top: var(--topbar-h);
    bottom: 0;
    width: 12px;
    pointer-events: none;
    background: linear-gradient(to right, var(--rail-shadow-color), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12px);
            mask-image: linear-gradient(to bottom, transparent, #000 12px);
}

.sidebar-brand {
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar-logo {
    padding: 20px 20px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--bg-secondary);   /* same as the rail: line invisible */
    text-align: center;
    flex-shrink: 0;
}

.sidebar-logo-img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0 auto 10px auto;
}

.sidebar-logo-txt {
    display: block;
    width: 150px;
    margin: 0 auto 4px auto;
}

.sidebar-logo .logo-text {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}

.sidebar-logo .logo-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
    display: block;
}

.brand-icon {
    color: var(--accent);
    font-size: calc(20px * var(--text-scale));
}

.brand-text {
    font-size: calc(16px * var(--text-scale));
    font-weight: 600;
    letter-spacing: -0.3px;
}

.nav-links {
    list-style: none;
    padding: 12px 8px;
    /* `min-height: 0` is load-bearing: a flex item defaults to `min-height: auto`
       and refuses to shrink below its content, so `overflow-y` alone does nothing
       and the unfolded rail pushes the footer off-screen. Same trap as the flex
       modals (see CLAUDE.md). */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.nav-links li + li,
.nav-links .nav-link + .nav-link {
    margin-top: 4px;   /* keep hover/active/focus highlights from touching */
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius);
    transition: var(--transition);
    font-size: calc(13.5px * var(--text-scale));
    font-weight: 500;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.nav-link.active {
    color: var(--text-primary);
    background: var(--bg-selected);
}

.nav-icon {
    font-size: calc(16px * var(--text-scale));
    width: 20px;
    text-align: center;
}

/* ── Rail groups (collapsible inline disclosure) ────────── */
#nav-groups-toggle-all-wrap {
    padding: 0 12px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.nav-palette-hint {
    display: block;
    margin-top: 6px;
    text-align: center;
    font-size: calc(10px * var(--text-scale));
    color: var(--text-muted);
    letter-spacing: 0.04em;
    user-select: none;
}

/* Solid orange primary button (same look as .btn-primary). */
.nav-groups-toggle-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 10px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: var(--text-on-accent);
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(247, 147, 30, 0.25);
    transition: var(--transition);
}

.nav-groups-toggle-all:hover {
    background: var(--accent-hover);
    box-shadow: 0 2px 8px rgba(247, 147, 30, 0.35);
}

.nav-group {
    margin: 0;
}

.nav-group-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 4px;
}

.nav-group-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius);
    transition: var(--transition);
    font-size: calc(13.5px * var(--text-scale));
    font-weight: 500;
    cursor: pointer;
    min-width: 0;
}

.nav-group-label:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.nav-group.has-active-child > .nav-group-row > .nav-group-label {
    color: var(--text-primary);
    background: var(--bg-selected);
}

.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    transition: var(--transition);
}

.nav-group-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.nav-group-chevron {
    display: inline-block;
    font-size: calc(13px * var(--text-scale));
    transition: transform 0.15s ease;
}

.nav-group.nav-group-open .nav-group-chevron {
    transform: rotate(90deg);
}

.nav-sublist {
    list-style: none;
    display: none;
    padding-left: 14px;
}

.nav-group.nav-group-open .nav-sublist {
    display: block;
}

.nav-link.nav-link-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.nav-link.nav-link-disabled:hover {
    color: var(--text-secondary);
    background: transparent;
}

.nav-sublink {
    font-size: calc(13px * var(--text-scale));
}

.sidebar-footer {
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 10px 16px;
    background: var(--bg-sidebar, var(--bg-card));
}

.sidebar-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 8px;
}

.branding-version {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.branding-powered {
    font-size: 0.6rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.branding-logos {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 1;
}

.branding-logo-img {
    height: 18px;
    width: auto;
}

.branding-logo-txt {
    height: 12px;
    width: auto;
}

/* One wordmark per theme. Driven off the same data-theme attribute the palette
   uses, so it is correct on the first paint and needs no JS. */
.branding-logo-light { display: none; }
:root[data-theme="light"] .branding-logo-dark { display: none; }
:root[data-theme="light"] .branding-logo-light { display: inline; }

.version {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
}


/* ── Main Content ──────────────────────────────────────── */
#content {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;   /* flex child of body: without this #content grows to its widest descendant and pushes the page off-screen */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* ── Top Bar ───────────────────────────────────────────── */
#topbar {
    height: var(--topbar-h);
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bg-secondary);   /* same as the bar: line invisible */
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 40;
    /* Shadow (light) / glow (dark) so scrolled content visibly slides under the bar. */
    box-shadow: var(--topbar-shadow);
}

#page-title {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-title-icon .page-title-svg { display: block; }
.page-title-icon {
    display: inline-flex;
    font-size: 1.3rem;
    color: var(--text-primary);
    opacity: 1;
}

.search-box input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 7px 14px;
    color: var(--text-primary);
    font-size: calc(13px * var(--text-scale));
    width: 260px;
    transition: var(--transition);
}

.search-box input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-hover);
}

.search-box input::placeholder {
    color: var(--text-muted);
}


/* ── Page Container ────────────────────────────────────── */
#page-container {
    padding: 24px 28px;
    flex: 1;
    min-width: 0;
}

.page {
    display: none;
}

.page.active {
    display: block;
}


/* ── Toolbar ───────────────────────────────────────────── */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Meetings toolbar: the meeting select and 10 icon buttons stay on ONE row down to 900px wide.
   The select gives way first (it shrinks), the icon groups never wrap. Below 900px the toolbar may wrap. */
#mtg-select { flex: 1 1 220px; min-width: 120px; max-width: 340px; }
@media (min-width: 900px) {
    #mtg-toolbar { flex-wrap: nowrap; }
    #mtg-toolbar .toolbar-left { flex: 1 1 auto; min-width: 0; }
    #mtg-toolbar .toolbar-right { flex-wrap: nowrap; gap: 8px; flex: 0 0 auto; }
}

/* Partners toolbar: search + 4 filters + the icon buttons stay on ONE row down to 1020px wide (below that it wraps onto a second line).
   The search box gives way first, the filters keep their full labels (the Tags filter is capped),
   the icon group never wraps. */
@media (min-width: 1020px) {
    #page-partners > .toolbar { flex-wrap: nowrap; }
    #page-partners > .toolbar .toolbar-left { flex: 1 1 auto; min-width: 0; gap: 6px; }
    #page-partners > .toolbar .search-inline { flex: 1 1 200px; width: auto; min-width: 80px; max-width: 200px; }
    #page-partners > .toolbar .filter-group { flex: 0 0 auto; min-width: min-content; flex-wrap: nowrap; gap: 6px; }
    #page-partners > .toolbar .filter-group select { flex: 0 1 auto; min-width: min-content; padding-left: 8px; padding-right: 4px; }
    #page-partners > .toolbar #partner-filter-tag { max-width: 110px; min-width: 80px; text-overflow: ellipsis; }
    #page-partners > .toolbar .toolbar-right { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
}

.filter-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-group select {
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    padding: var(--field-pad-y) var(--field-pad-x);
    color: var(--text-secondary);
    font-size: var(--field-fs);
    cursor: pointer;
    transition: var(--transition);
}

.filter-group select:focus {
    outline: none;
    border-color: var(--accent);
    color: var(--text-primary);
}


/* ── Buttons ───────────────────────────────────────────── */
.btn {
    padding: 7px 16px;
    border: none;
    border-radius: var(--radius);
    font-size: calc(13px * var(--text-scale));
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary {
    background: var(--accent);
    color: var(--text-on-accent);
    box-shadow: 0 1px 4px rgba(247, 147, 30, 0.25);
}

.btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 2px 8px rgba(247, 147, 30, 0.35);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.btn:disabled, .btn-ghost:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-danger {
    background: rgba(224, 85, 85, 0.08);
    color: var(--red);
    border: 1px solid rgba(224, 85, 85, 0.4);
}

.btn-danger:hover {
    background: rgba(224, 85, 85, 0.15);
}

.btn-danger-ghost {
    background: transparent;
    border: 1px solid var(--danger, var(--red));
    color: var(--danger, var(--red));
}
.btn-danger-ghost:hover {
    background: var(--danger, var(--red));
    color: var(--text-on-fill);
}

.btn-sm {
    padding: 4px 10px;
    font-size: calc(12px * var(--text-scale));
}
.btn-xs {
    padding: 2px 6px;
    font-size: calc(11px * var(--text-scale));
    line-height: 1.4;
}


/* ── Table ─────────────────────────────────────────────── */
.table-wrapper {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

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

#leads-table thead {
    background: var(--bg-secondary);
}

#leads-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: calc(11.5px * var(--text-scale));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    user-select: none;
}

#leads-table th.sortable {
    cursor: pointer;
}

#leads-table th.sortable:hover {
    color: var(--text-secondary);
}

#leads-table th.sort-asc::after {
    content: " ▲";
    font-size: calc(9px * var(--text-scale));
}

#leads-table th.sort-desc::after {
    content: " ▼";
    font-size: calc(9px * var(--text-scale));
}

#leads-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: calc(13px * var(--text-scale));
    vertical-align: middle;
}

#leads-table tbody tr {
    cursor: pointer;
    transition: background var(--transition);
}

#leads-table tbody tr:hover {
    background: var(--bg-hover);
}

#leads-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── RAG Colour Rows ────────────────────────────────── */
tr.row-green {
    border-left: 3px solid var(--green);
    background: var(--green-bg);
}

tr.row-yellow {
    border-left: 3px solid var(--yellow);
    background: var(--yellow-bg);
}

tr.row-red {
    border-left: 3px solid var(--red);
    background: var(--red-bg);
}

tr.row-grey {
    border-left: 3px solid var(--grey);
    background: var(--grey-bg);
}

tr.row-green:hover { background: rgba(34, 197, 94, 0.15); }
tr.row-yellow:hover { background: rgba(247, 201, 72, 0.15); }
tr.row-red:hover { background: rgba(224, 85, 85, 0.15); }
tr.row-grey:hover { background: var(--bg-hover); }


/* ── Badges & Pills ────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.badge-priority-high { background: rgba(224, 85, 85, 0.15); color: var(--priority-high); }
.badge-priority-medium { background: rgba(247, 201, 72, 0.15); color: var(--priority-medium); }
.badge-priority-low { background: rgba(107, 114, 128, 0.15); color: var(--priority-low); }

/* Tracking > KPIs pace badge (tracking-b3-kpi-pace-tab) */
.kpi-pace-behind { background: rgba(224, 85, 85, 0.15); color: var(--danger, var(--red)); }
.kpi-pace-on_track { background: rgba(34, 197, 94, 0.15); color: var(--success, var(--green)); }
.kpi-pace-ahead { background: var(--accent-subtle); color: var(--accent); }
.kpi-pace-unknown { background: rgba(107, 114, 128, 0.15); color: var(--priority-low); }

.badge-status {
    background: var(--accent-subtle);
    color: var(--accent);
}

.tag-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 500;
    margin-right: 4px;
    margin-bottom: 2px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.days-badge {
    display: inline-block;
    min-width: 28px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
}

.days-green { background: var(--green-bg); color: var(--green); }
.days-yellow { background: var(--yellow-bg); color: var(--yellow); }
.days-red { background: var(--red-bg); color: var(--red); }
.days-grey { background: var(--grey-bg); color: var(--grey); }


/* ── Empty State ───────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state p {
    font-size: calc(14px * var(--text-scale));
}

.hidden {
    display: none !important;
}


/* ── Modal ─────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    width: 580px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

/* Standard header/body/footer modals: the rounded outer clips, header and
   footer stay pinned, and only the inner body scrolls, so the scrollbar sits
   inside the rounded corners. `min-height: 0` is load-bearing (CLAUDE.md
   "Flex modals"). Modals without a .modal-body keep the outer scroll above. */
.modal:has(> .modal-body) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal:has(> .modal-body) > .modal-header,
.modal:has(> .modal-body) > .modal-footer {
    flex-shrink: 0;
}
.modal:has(> .modal-body) > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-header h2 {
    font-size: calc(16px * var(--text-scale));
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: calc(22px * var(--text-scale));
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: var(--transition);
}

.modal-close,
.drawer-close,
.settings-dialog-close,
.track-heat-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modal-close svg,
.drawer-close svg,
.settings-dialog-close svg,
.track-heat-close svg,
.recip-pill-x svg,
.mtg-tag-x svg {
    width: 1em;
    height: 1em;
    flex: none;
    pointer-events: none;
}
.modal-close svg,
.drawer-close svg { width: 0.85em; height: 0.85em; }
.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
}

/* Cost item dialog footer: the buttons never overflow the dialog. Two groups (Clear / Distribute by WP on the left,
   Cancel / Save on the right); on a narrow dialog the groups wrap into at most two rows, buttons never break their label. */
.costs-cell-footer {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
}
.costs-cell-footer-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    max-width: 100%;
}
.costs-cell-footer-main { margin-left: auto; }
.costs-cell-footer .btn { white-space: nowrap; }

/* ── KER fiche modal: capped height, the form body scrolls ──
   Same fix as .msg-compose-modal (CLAUDE.md "Flex modals" gotcha) — four
   grouped sections make this taller than 90vh, so the body must be the flex
   item that shrinks and scrolls while header/footer stay pinned. */
.ker-fiche {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.ker-fiche .modal-header,
.ker-fiche .modal-footer {
    flex-shrink: 0;
}
.ker-fiche .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.fiche-section {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.fiche-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.fiche-section-title {
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.fiche-role-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fiche-role-row {
    display: grid;
    grid-template-columns: 1fr repeat(3, 84px);
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius);
}
.fiche-role-row:not(.fiche-role-head):hover {
    background: var(--bg-hover);
}
.fiche-role-head {
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fiche-role-head span {
    text-align: center;
}
.fiche-role-head span:first-child {
    text-align: left;
}
.fiche-role-name {
    font-size: calc(13px * var(--text-scale));
    color: var(--text-primary);
}
.fiche-role-cell {
    display: flex;
    justify-content: center;
    cursor: pointer;
}


/* ── Forms ─────────────────────────────────────────────── */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}

.form-row .form-group {
    margin-bottom: 0;
}

.form-group label {
    font-size: calc(12px * var(--text-scale));
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input:where(:not([type=checkbox], [type=radio])),
.form-group select,
.form-group textarea {
    width: 100%;
    min-width: 0;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    padding: var(--field-pad-y) var(--field-pad-x);
    color: var(--field-color);
    font-size: var(--field-fs);
    font-family: inherit;
    transition: var(--transition);
}

.form-group input:where(:not([type=checkbox], [type=radio])):focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-group textarea {
    resize: vertical;
}

/* Standalone form-control — same look as .form-group inputs */
.form-control {
    width: 100%;
    min-width: 0;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    padding: var(--field-pad-y) var(--field-pad-x);
    color: var(--field-color);
    font-size: var(--field-fs);
    font-family: inherit;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* Input utilities */
.input-narrow {
    width: 80px !important;
}

.input-with-action {
    display: flex;
    gap: 6px;
    align-items: center;
}

.input-with-action .form-control {
    flex: 1;
}

.input-license-key {
    font-family: monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 180px;
}

#license-status-display {
    margin-bottom: 14px;
}

.tags-select {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
}

.tag-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: 99px;
    cursor: pointer;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    transition: var(--transition);
    user-select: none;
}

.tag-checkbox:hover {
    border-color: var(--border-strong);
}

.tag-checkbox.selected {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
}

.tag-checkbox input {
    display: none;
}


/* ── Detail Drawer Backdrop ─────────────────────────────── */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* ── First-run checklist ──────────────────────────────── */
.first-run-checklist {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.first-run-head-actions { display: flex; align-items: center; gap: 12px; }
.first-run-startup { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--text-muted); cursor: pointer; }
.first-run-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.first-run-title { margin: 0 0 4px; }
#first-run-items { margin-top: 8px; }
.first-run-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-default);
}
.first-run-item:first-child { border-top: none; }
.first-run-dot { font-size: calc(13px * var(--text-scale)); line-height: 1; }
.first-run-label { flex: 1; }
.first-run-item.done .first-run-label { color: var(--text-muted); text-decoration: line-through; }

/* ── Sample project (pilot-sample-project-feature) ───────── */
.sample-badge {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.6875rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    vertical-align: middle;
    background: rgba(234, 179, 8, 0.15);
    color: var(--yellow-text);
    border: 1px solid rgba(234, 179, 8, 0.4);
}
.sample-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
}
.sample-notice.hidden { display: none; }
.sample-notice-text { flex: 1; }

/* Kanban per-column empty placeholder */
.msg-col-empty {
    padding: 16px 12px;
    text-align: center;
    line-height: 1.5;
}

/* ── Detail Drawer ─────────────────────────────────────── */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 480px;
    max-width: 95vw;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    z-index: 90;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 250ms ease;
}

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

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.drawer-header h2 {
    font-size: calc(16px * var(--text-scale));
    font-weight: 600;
}

.drawer-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: calc(22px * var(--text-scale));
    cursor: pointer;
    line-height: 1;
    transition: var(--transition);
}

.drawer-close:hover {
    color: var(--text-primary);
}

.drawer-body {
    padding: 20px 24px;
    flex: 1;
    overflow-y: auto;
}

.detail-section {
    margin-bottom: 24px;
}

.detail-section h3 {
    font-size: calc(12px * var(--text-scale));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-weight: 600;
}

.detail-field {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: calc(13px * var(--text-scale));
}

.detail-field .label {
    color: var(--text-secondary);
}

.detail-field .value {
    color: var(--text-primary);
    font-weight: 500;
}

.detail-field .value a {
    color: var(--accent);
    text-decoration: none;
}

.detail-field .value a:hover {
    text-decoration: underline;
}

/* ── Contact Log Timeline ──────────────────────────────── */
.timeline {
    position: relative;
    padding-left: 20px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--border-default);
}

.timeline-item {
    position: relative;
    padding-bottom: 18px;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -17px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-secondary);
}

.timeline-item.inbound::before {
    background: var(--green);
}

.timeline-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.timeline-date {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
}

.timeline-channel {
    font-size: calc(10px * var(--text-scale));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.timeline-campaign {
    font-size: calc(10px * var(--text-scale));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: 500;
}

.timeline-subject {
    font-size: calc(13px * var(--text-scale));
    font-weight: 500;
    margin-bottom: 2px;
}

.timeline-text {
    font-size: calc(12.5px * var(--text-scale));
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── Collapsible message body in activity log ── */
.timeline-expand {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    margin-top: 4px;
    padding: 0;
    cursor: pointer;
}
.timeline-expand:hover {
    color: var(--accent-blue);
}
.timeline-expand.expanded {
    color: var(--accent-blue);
}
.timeline-body-collapsible {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-hover);
    border-radius: 6px;
    font-size: calc(13px * var(--text-scale));
    line-height: 1.5;
}

/* ── Timeline Actions (edit/delete) ───────────────────── */
.timeline-actions {
    margin-left: auto;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.timeline-item:hover .timeline-actions {
    opacity: 1;
}

/* ── Timeline Threads (grouped contact-log entries) ────── */
.timeline-thread {
    position: relative;
    margin-bottom: 18px;
}

.timeline-thread-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 2px 0;
}

.timeline-thread-arrow {
    font-size: calc(10px * var(--text-scale));
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.timeline-thread.expanded .timeline-thread-arrow {
    transform: rotate(90deg);
}

.timeline-thread-subject {
    font-size: calc(13px * var(--text-scale));
    font-weight: 500;
    color: var(--text-primary);
}

.timeline-thread-count {
    font-size: calc(10px * var(--text-scale));
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.timeline-thread-del {
    margin-left: auto;
}

.timeline-thread-body {
    display: none;
    margin-top: 10px;
    padding-left: 20px;
    position: relative;
}

.timeline-thread.expanded .timeline-thread-body {
    display: block;
}

.timeline-thread-body::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--border-default);
}

/* ── Quoted-history collapse ───────────────────────────── */
.timeline-quote-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-top: 4px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    cursor: pointer;
}

.timeline-quote-toggle:hover {
    color: var(--accent-blue);
}

.tl-body-full {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-hover);
    border-radius: 6px;
}

.btn-icon-xs {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius);
    font-size: calc(12px * var(--text-scale));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.15s ease, background 0.15s ease;
}

.btn-icon-xs:hover {
    background: var(--bg-tertiary);
    color: var(--accent);
}

.btn-icon-xs[title="Delete"]:hover {
    color: var(--red, var(--red));
}

/* ── Timeline Inline Edit Form ────────────────────────── */
.timeline-edit-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.timeline-edit-form select,
.timeline-edit-form input[type="text"],
.timeline-edit-form input[type="date"],
.timeline-edit-form textarea {
    font-size: calc(12.5px * var(--text-scale));
    padding: 5px 8px;
}

.timeline-edit-form .form-row {
    display: flex;
    gap: 6px;
}

.timeline-edit-form .form-row > * {
    flex: 1;
}


/* ── Context Menu ──────────────────────────────────────── */
.context-menu {
    position: fixed;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    min-width: 180px;
    padding: 4px 0;
}

.context-menu ul {
    list-style: none;
}

.context-menu li {
    padding: 7px 16px;
    font-size: calc(13px * var(--text-scale));
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}

.context-menu li:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.context-menu li.separator {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 8px;
    padding: 0;
    cursor: default;
}

.context-menu li.context-warning {
    color: var(--yellow);
}

.context-menu li.context-danger {
    color: var(--red);
}

.context-menu li.context-danger:hover {
    background: var(--red-bg);
}


/* ── Toast Notifications ───────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 10px 18px;
    font-size: calc(13px * var(--text-scale));
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    animation: toast-in 200ms ease;
    max-width: 340px;
}

.toast.toast-success { border-left: 3px solid var(--green); }
.toast.toast-error { border-left: 3px solid var(--red); }
.toast.toast-warning { border-left: 3px solid var(--yellow); white-space: pre-line; }
.toast.toast-info { border-left: 3px solid var(--accent); }
.toast.toast-loading {
    border-left: 3px solid var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.toast.toast-out {
    animation: toast-out 200ms ease forwards;
}

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

/* ── Auto-save Indicator (small fading "Saved" flash) ──── */
.autosave-indicator {
    display: inline-block;
    margin-left: 8px;
    font-size: calc(12px * var(--text-scale));
    color: var(--green);
    opacity: 0;
    vertical-align: middle;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.autosave-indicator.autosave-indicator-show {
    opacity: 1;
}

/* ── Settings auto-save status line (autosave.js) ───────────
   Fixed height so "Saving... / Saved / Not saved" never moves the layout. */
.autosave-status {
    min-height: 1.6em;
    margin-top: 8px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
}
.autosave-status.is-saved { color: var(--green); }
.autosave-status.is-error { color: var(--red); }
.autosave-field-error {
    min-height: 1.4em;
    color: var(--red);
}
[aria-invalid="true"] { border-color: var(--red); }

/* ── Password reveal toggle ("Show"/"Hide") ────────────── */
.password-reveal-toggle {
    display: inline-block;
    margin-left: 8px;
    margin-top: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    cursor: pointer;
}

.password-reveal-toggle:hover {
    color: var(--accent-blue);
}


/* ── Utility ───────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.text-sm { font-size: calc(12px * var(--text-scale)); }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }

/* ── Add Contact Log Form in Drawer ────────────────────── */

/* ── Kanban Board ──────────────────────────────────────── */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    min-height: calc(100vh - 180px);
}

.kanban-column {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.kanban-column-header h3 {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.kanban-count {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
}

.kanban-cards {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    min-height: 100px;
}

.kanban-cards.drag-over {
    background: var(--accent-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── Kanban Card ──────────────────────────────────────── */
.kanban-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: grab;
    transition: var(--transition);
    position: relative;
}

.kanban-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}

.kanban-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.kanban-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.kanban-card-name {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    color: var(--text-primary);
}

.kanban-card-channel {
    font-size: calc(10px * var(--text-scale));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-primary);
    color: var(--text-muted);
}

.kanban-card-channel.ch-email { color: var(--accent); background: var(--accent-subtle); }
.kanban-card-channel.ch-linkedin { color: #0a66c2; background: rgba(10, 102, 194, 0.12); }

.kanban-card-company {
    font-size: calc(11.5px * var(--text-scale));
    color: var(--text-muted);
    margin-bottom: 6px;
}

.kanban-card-subject {
    font-size: calc(12.5px * var(--text-scale));
    color: var(--text-secondary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-card-preview {
    font-size: calc(11.5px * var(--text-scale));
    color: var(--text-muted);
    line-height: 1.4;
    max-height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kanban-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}

.kanban-card-actions .btn {
    padding: 3px 8px;
    font-size: calc(11px * var(--text-scale));
}

.kanban-card-date {
    font-size: calc(10px * var(--text-scale));
    color: var(--text-muted);
    position: absolute;
    top: 12px;
    right: 14px;
}

/* Loading spinner for Claude drafts */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 600ms linear infinite;
}

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

.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn.loading::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--text-on-fill);
    border-radius: 50%;
    animation: spin 600ms linear infinite;
    margin-left: 6px;
}

/* ── Document Upload Section in Drawer ─────────────────── */
.doc-list {
    list-style: none;
}

.doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: calc(12.5px * var(--text-scale));
    border-bottom: 1px solid var(--border-subtle);
}

.doc-item:last-child {
    border-bottom: none;
}

.doc-name {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
}

.doc-name:hover {
    text-decoration: underline;
}

.doc-meta {
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale));
}

.doc-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: calc(14px * var(--text-scale));
    padding: 2px 6px;
}

.doc-delete:hover {
    color: var(--red);
}

.upload-area {
    margin-top: 10px;
}

.upload-area input[type="file"] {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
}


/* ══════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════ */

/* ── Stat Cards ────────────────────────────────────────── */
.stat-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
}

/* Every stat card has the same size: cards in one row stretch to the
   tallest (default align-items: stretch), so a card that wraps its lines on a
   narrow window grows the whole row instead of clipping its text. The row
   wraps and stays centred instead of stretching sideways. */
.stat-card {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 210px;
    min-height: 148px;  /* fits the Total costs card: value + three sub-lines */
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.stat-card.accent {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.stat-label {
    font-size: calc(11.5px * var(--text-scale));
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.stat-value {
    font-size: calc(22px * var(--text-scale));
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.stat-card.accent .stat-value {
    color: var(--accent);
}

/* Square stat cards for project row */
.stat-card-square {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card-31 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card-toggle { cursor: pointer; }

.stat-sub {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

/* ── Dashboard Grid ────────────────────────────────────── */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

/* Pipeline row: left column tall, right column stacks two panels */
.dashboard-grid-pipeline {
    align-items: stretch;
}

.dash-panel-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dash-panel-stack .dash-panel {
    flex: 1;
}

/* Messages card: two bar groups, each with a bold row-spanning label in front.
   Same bar-row pitch as the Partner Pipeline card, and the divider is drawn
   with a pseudo-element (zero layout height) so the 7 rows line up 1:1. */
.dash-subgroup {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.dash-subgroup-label {
    width: 90px;
    flex-shrink: 0;
    font-size: calc(12px * var(--text-scale));
    font-weight: 700;
    color: var(--text-primary);
}
.dash-subgroup-rows {
    flex: 1;
    min-width: 0;
}
.dash-subgroup-divided::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    height: 1px;
    background: var(--border-subtle);
}
.dash-subgroup .bar-label {
    text-transform: none;
}

/* ── Dashboard Doughnut Chart Grid (D6) ───────────────── */
.chart-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    /* Never more than three per row: five doughnuts read as 3 + 2, centred,
       instead of 4 + 1 with one stranded on its own row. */
    max-width: calc(3 * 196px + 2 * 14px);
    margin: 0 auto 20px;
}

.chart-card {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 196px;
    height: 196px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
}

.chart-card .dash-panel-title {
    margin-bottom: 6px;
    flex-shrink: 0;
}

.chart-canvas-wrapper {
    flex: 1;
    position: relative;
    min-height: 0;
}

.chart-canvas-wrapper canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

.dash-panel {
    min-width: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}

/* Left-clustered, not `space-between`. The dashboard content is full-width, so
   space-between put the only action on this row against the right edge of the
   monitor, thousands of pixels from the control it belongs with. */
.dash-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Placeholder reference in the PowerPoint export modal. */
.pptx-token-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 10px;
}
.pptx-token-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.pptx-token {
    font-family: monospace;
    font-size: calc(11.5px * var(--text-scale));
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    cursor: pointer;
}
.pptx-token:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Chart group switch (Proposal / Execution / All) ───── */
.chart-group-switch {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    margin-bottom: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.cgs-btn {
    padding: 5px 14px;
    background: none;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    font-size: calc(12.5px * var(--text-scale));
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.cgs-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.cgs-btn.active {
    color: var(--text-primary);
    background: var(--bg-selected);
}

/* ── Pinned KPI tiles (execution chart group) ──────────────
   Deliberately compact rather than a doughnut per indicator: a project can
   carry 20+ KPIs, and "4 / 10" plus a bar says the same thing in a tenth of
   the space. `auto-fill` keeps them tidy whether one is pinned or twelve. */
.kpi-tile-panel {
    margin-bottom: 20px;
}

.kpi-tile-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* an odd last row stays centred, so the block is symmetric */
    gap: 12px;
}

.kpi-tile {
    /* equal width: (row - gaps) / columns; columns come from dashboard.js */
    flex: 0 0 calc((100% - (var(--kpi-cols, 3) - 1) * 12px) / var(--kpi-cols, 3));
    min-width: 0;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.kpi-tile-name {
    font-size: calc(12.5px * var(--text-scale));
    color: var(--text-secondary);
    margin-bottom: 6px;
    /* Indicator names are sentences often enough to need this. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-tile-figure {
    font-size: calc(20px * var(--text-scale));
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.kpi-tile-figure .kpi-tile-target {
    font-size: calc(14px * var(--text-scale));
    font-weight: 500;
    color: var(--text-muted);
}

/* The shared .bar-track is --bg-tertiary, which is also the tile background,
   so an indicator at 0% looked like it had no bar at all rather than an empty
   one. Inside a tile the track needs to be visible in its own right. */
.kpi-tile .bar-track {
    background: var(--bg-primary);
}

.dash-panel-title {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

/* ── Progress Bars ─────────────────────────────────────── */
.bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bar-label {
    width: 90px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    text-transform: capitalize;
}

.bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 400ms ease;
}

.bar-fill.fill-accent { background: var(--accent); }
.bar-fill.fill-green { background: var(--green); }
.bar-fill.fill-yellow { background: var(--yellow); }
.bar-fill.fill-red { background: var(--red); }
.bar-fill.fill-grey { background: var(--grey); }
.bar-fill.fill-high { background: var(--priority-high); }
.bar-fill.fill-medium { background: var(--priority-medium); }
.bar-fill.fill-low { background: var(--priority-low); }

.bar-count {
    width: 30px;
    text-align: right;
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Dashboard Sections ────────────────────────────────── */
.dash-section {
    margin-bottom: 24px;
}

.dash-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* ── Reminder Cards ────────────────────────────────────── */
.reminder-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 8px;
    transition: var(--transition);
}

.reminder-card:hover {
    border-color: var(--border-default);
}

.reminder-card.reminder-due {
    border-left: 3px solid var(--red);
    background: var(--red-bg);
}

.reminder-card.reminder-upcoming {
    border-left: 3px solid var(--yellow);
}

.reminder-card.reminder-done {
    opacity: 0.5;
    border-left: 3px solid var(--green);
}

.reminder-info {
    flex: 1;
}

.reminder-lead {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    color: var(--text-primary);
}

.reminder-lead a {
    font-weight: 400;
    color: var(--accent-text);
    text-decoration: none;
}

.reminder-lead a:hover {
    text-decoration: underline;
}

.reminder-note {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    margin-top: 2px;
}

.reminder-date {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
    margin-top: 2px;
}

.reminder-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Follow-up List ────────────────────────────────────── */
.followup-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    margin-bottom: 6px;
    cursor: pointer;
    transition: var(--transition);
}

.followup-row:hover {
    border-color: var(--border-default);
    background: var(--bg-hover);
}

.followup-name {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    width: 160px;
}

.followup-company {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    width: 140px;
}

.followup-status {
    width: 100px;
}

.followup-days {
    flex-shrink: 0;
}

.followup-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.followup-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}
.btn-followup-snooze {
    font-size: calc(11px * var(--text-scale));
    padding: 2px 6px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.btn-followup-snooze:hover {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}
.followup-custom-days {
    width: 38px;
    font-size: calc(11px * var(--text-scale));
    padding: 2px 4px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary);
    color: var(--text-primary);
    text-align: center;
}
.followup-custom-days::placeholder {
    color: var(--text-muted);
}
.btn-followup-dismiss {
    font-size: calc(13px * var(--text-scale));
    padding: 1px 5px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    margin-left: 2px;
}
.btn-followup-dismiss:hover {
    background: var(--red);
    color: var(--text-on-fill);
    border-color: var(--red);
}

/* ── Nav Badge ─────────────────────────────────────────── */
.nav-badges {
    margin-left: auto;
    display: inline-flex;
    gap: 4px;
}
.nav-badges .nav-badge { margin-left: 0; }
.nav-badge {
    margin-left: auto;
    background: var(--red);
    color: var(--text-on-fill);
    font-size: calc(10px * var(--text-scale));
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}


/* ══════════════════════════════════════════════════════════
   SEARCH DROPDOWN
   ══════════════════════════════════════════════════════════ */

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 200;
}

.search-group-label {
    padding: 8px 14px 4px;
    font-size: calc(10px * var(--text-scale));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.search-result {
    padding: 8px 14px;
    cursor: pointer;
    transition: var(--transition);
}

.search-result:hover {
    background: var(--bg-hover);
}

.search-result-title {
    font-size: calc(13px * var(--text-scale));
    font-weight: 500;
    color: var(--text-primary);
}

.search-result-sub {
    font-size: calc(11.5px * var(--text-scale));
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-empty {
    padding: 16px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: calc(13px * var(--text-scale));
}


/* ══════════════════════════════════════════════════════════
   SETTINGS PAGE
   ══════════════════════════════════════════════════════════ */

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.settings-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.settings-panel.full-width {
    grid-column: 1 / -1;
}

.settings-panel-title {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

.settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-panel-header .settings-panel-title {
    margin: 0;
}

.settings-panel-body {
    padding: 14px 18px;
}

.settings-panel-body > .settings-panel-title {
    margin-bottom: 12px;
}

/* Reuse for panels without a header */
.settings-panel > .settings-panel-title {
    padding: 14px 18px 0;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
}

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

.settings-row-title {
    font-size: calc(13px * var(--text-scale));
    font-weight: 500;
    color: var(--text-primary);
    margin-right: 8px;
}

.settings-row-meta {
    display: block;
    margin-top: 2px;
    line-height: 1.3;
}
.settings-row-meta-age {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
}

.settings-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.add-contact-form {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 14px;
    margin-top: 14px;
}

.add-contact-form h4 {
    font-size: calc(12px * var(--text-scale));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.add-contact-form .form-row {
    gap: 10px;
}

.add-contact-form input,
.add-contact-form select,
.add-contact-form textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: calc(12px * var(--text-scale));
    font-family: inherit;
    width: 100%;
}

.add-contact-form textarea {
    resize: vertical;
}

.add-contact-form .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Container — this is critical */
.multi-select {
    position: relative;
    display: inline-block;
    min-width: 140px;
}

/* Toggle button — matches your select styling */
.ms-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 6px 10px;
    color: var(--text-secondary);
    font-size: calc(12.5px * var(--text-scale));
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.ms-toggle:hover {
    border-color: var(--accent);
}

.ms-label.ms-active {
    color: var(--accent);
    font-weight: 500;
}

.ms-arrow {
    font-size: calc(10px * var(--text-scale));
    opacity: 0.5;
}

/* Dropdown — floats over content */
.ms-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 100%;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 300;
}

.ms-dropdown label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    font-size: calc(12.5px * var(--text-scale));
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.ms-dropdown label:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}

.ms-dropdown input[type="checkbox"] {
    accent-color: var(--accent, var(--accent));
    width: 13px;
    height: 13px;
    cursor: pointer;
}
/* ══════════════════════════════════════════════════════════
   PHASE 1 ADDITIONS — Project Selector + User Menu
   Append these to the END of your existing style.css
   ══════════════════════════════════════════════════════════ */


/* ── Project Selector (sidebar) ──────────────────────── */

/* The three controls under the logo (project, status, "Collapse all") share one
   height, one width (12px side padding) and one 6px gap. */
#project-selector {
    --rail-control-h: 38px;
    padding: 0 12px;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.project-dropdown {
    position: relative;
}

.project-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    height: var(--rail-control-h);
    padding: 0 12px;
    background: var(--bg-primary, var(--bg-primary));
    border: 1px solid var(--border-default);
    border-radius: 8px;
    color: var(--text-primary, var(--text-primary));
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s;
    text-align: left;
}
.project-selector-btn:hover {
    border-color: var(--accent, var(--accent));
}

.ps-acronym {
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps-icon { font-size: 1rem; }
.ps-label { flex: 1; }
.ps-arrow { font-size: 0.7rem; opacity: 0.5; }

.ps-status {
    display: inline-block;
    font-size: 0.6875rem;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.ps-status-draft      { background: rgba(113, 113, 122, 0.2); color: var(--grey-text); }
.ps-status-proposal   { background: rgba(59, 130, 246, 0.15); color: var(--blue-text); }
.ps-status-submitted  { background: rgba(234, 179, 8, 0.15); color: var(--yellow-text); }
.ps-status-ga_prep    { background: rgba(168, 85, 247, 0.15); color: var(--purple-text); }
.ps-status-execution  { background: rgba(34, 197, 94, 0.15); color: var(--green-text); }
.ps-status-closed     { background: rgba(113, 113, 122, 0.15); color: var(--grey-text); }

/* ── Sidebar Status Selector ─────────────────────────── */
#sidebar-project-status {
    padding: 0 12px;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.sidebar-status-select {
    width: 100%;
    box-sizing: border-box;
    height: 38px;   /* = --rail-control-h on #project-selector */
    padding: 0 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg-primary);
    color: var(--text-muted);
    transition: border-color 0.15s, color 0.15s;
    appearance: auto;
}
.sidebar-status-select:hover {
    border-color: var(--accent);
}
.sidebar-status-select.ps-status-draft      { color: var(--grey-text); border-color: rgba(113,113,122,0.4); }
.sidebar-status-select.ps-status-submitted  { color: var(--yellow-text); border-color: rgba(234,179,8,0.4); }
.sidebar-status-select.ps-status-ga_prep    { color: var(--purple-text); border-color: rgba(168,85,247,0.4); }
.sidebar-status-select.ps-status-execution  { color: var(--green-text); border-color: rgba(34,197,94,0.4); }
.sidebar-status-select.ps-status-closed     { color: var(--grey-text); border-color: rgba(113,113,122,0.4); }

/* Dropdown menu */
.ps-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-secondary, var(--bg-secondary));
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
    padding: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.ps-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-secondary, var(--grey-text));
    transition: background 0.1s;
}
.ps-item:hover { background: var(--bg-hover); }
.ps-item.ps-active {
    background: var(--accent-subtle);
    color: var(--accent-text);
    font-weight: 600;
}
.ps-item-acronym { font-weight: 500; }
.ps-item-type { font-size: 0.75rem; color: var(--text-muted); }

.ps-item-action {
    color: var(--accent-text);
    font-size: 0.8125rem;
}
.ps-item-action:hover { background: var(--accent-subtle); }

.ps-divider {
    height: 1px;
    background: var(--border-default);
    margin: 4px 0;
}


/* ── User Menu (sidebar footer) ──────────────────────── */

.sidebar-user {
    padding: 12px;
    border-top: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent, var(--accent));
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    overflow: hidden;
}
.user-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, var(--text-primary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-role {
    font-size: 0.6875rem;
    color: var(--text-muted, var(--grey-text));
    text-transform: capitalize;
}

.btn-logout {
    background: none;
    border: none;
    color: var(--text-muted, var(--grey-text));
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s;
}
.btn-logout:hover { color: var(--red-text); }


/* ── Form helpers (used in modals) ───────────────────── */

.form-row {
    display: flex;
    gap: 12px;
}


/* ══════════════════════════════════════════════════════════
   PARTNERS (Phase 2)
   ══════════════════════════════════════════════════════════ */

/* ── Partners Table ────────────────────────────────────── */
#partners-table {
    width: 100%;
    border-collapse: collapse;
}

#partners-table thead {
    background: var(--bg-secondary);
}

#partners-table th {
    padding: 10px 12px;
    text-align: left;
    font-size: calc(11.5px * var(--text-scale));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    user-select: none;
}

#partners-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: calc(13px * var(--text-scale));
    vertical-align: middle;
}

#partners-table tbody tr {
    cursor: pointer;
    transition: background var(--transition);
}

#partners-table tbody tr:hover { background: var(--bg-hover); }
#partners-table tbody tr:last-child td { border-bottom: none; }
/* Pill columns are centred, header included, so the label sits over its pills. */
#partners-table :is(th, td):is([data-col="priority"], [data-col="type"], [data-col="status"], [data-col="since"], [data-col="acronym"]) { text-align: center; }
/* Acronym: the text is centred in the column and on the row's middle. The F&T pill hangs beside it
   (out of the line box, so it cannot lift the text); the cell reserves its width on both sides. */
#partners-table td[data-col="acronym"] { padding-inline: calc(12px + 10em); }
#partners-table .acronym-inner { position: relative; display: inline-block; vertical-align: middle; line-height: 1.3; }
#partners-table .acronym-mark { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-inline-start: .6em; }

/* ── Inline search in toolbar ────────────────────────── */
.search-inline {
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    padding: var(--field-pad-y) var(--field-pad-x);
    color: var(--field-color);
    font-size: var(--field-fs);
    width: 200px;
    transition: var(--transition);
}
.search-inline:focus {
    outline: none;
    border-color: var(--field-focus);
}
.search-inline::placeholder { color: var(--text-muted); }

/* ── Partner Status Badges ──────────────────────────── */
.badge-partner-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: capitalize;
}
/* One colour per status (owner's palette, 2026-10-15): --st is the edge/text,
   --st-bg the light fill. Shared by the text pill and the table's status dot.
   Dark theme (default) needs stronger fills and brighter text than light. */
.badge-status-prospect     { --st: #9ca3af; --st-bg: rgba(156, 163, 175, 0.35); }
.badge-status-contacted    { --st: #facc15; --st-bg: rgba(250, 204, 21, 0.35); }
.badge-status-replied      { --st: #fb923c; --st-bg: rgba(251, 146, 60, 0.35); }
.badge-status-negotiating  { --st: #60a5fa; --st-bg: rgba(96, 165, 250, 0.35); }
.badge-status-on_board     { --st: #4ade80; --st-bg: rgba(74, 222, 128, 0.35); }
.badge-status-declined     { --st: #f87171; --st-bg: rgba(248, 113, 113, 0.35); }
.badge-status-discarded    { --st: #6b7280; --st-bg: #374151; }
:root[data-theme="light"] .badge-status-prospect    { --st: #6b7280; --st-bg: rgba(107, 114, 128, 0.22); }
:root[data-theme="light"] .badge-status-contacted   { --st: #ca8a04; --st-bg: rgba(234, 179, 8, 0.28); }
:root[data-theme="light"] .badge-status-replied     { --st: #ea580c; --st-bg: rgba(249, 115, 22, 0.25); }
:root[data-theme="light"] .badge-status-negotiating { --st: #2563eb; --st-bg: rgba(59, 130, 246, 0.25); }
:root[data-theme="light"] .badge-status-on_board    { --st: #16a34a; --st-bg: rgba(34, 197, 94, 0.25); }
:root[data-theme="light"] .badge-status-declined    { --st: #dc2626; --st-bg: rgba(239, 68, 68, 0.25); }
:root[data-theme="light"] .badge-status-discarded   { --st: #000000; --st-bg: rgba(75, 85, 99, 0.45); }
.badge-partner-status[class*="badge-status-"] { background: var(--st-bg); color: var(--st); }
/* Black text is unreadable on the dark theme; the dot keeps the black edge. */
.badge-partner-status.badge-status-discarded { color: var(--text); }

/* Partners table rows: bar and tint follow the status colour (same --st tokens). */
#partners-table tr.row-status {
    border-left: 3px solid var(--st);
    background: color-mix(in srgb, var(--st) 9%, transparent);
}
#partners-table tr.row-status:hover { background: color-mix(in srgb, var(--st) 15%, transparent); }
/* A black bar vanishes on the dark theme's navy: dark grey there, black on light. */
#partners-table tr.row-status.badge-status-discarded { border-left-color: #4b5563; }
:root[data-theme="light"] #partners-table tr.row-status.badge-status-discarded { border-left-color: var(--st); }

/* Partners table: the status as a circle; the name is in its tooltip. */
.status-dot {
    display: inline-block;
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--st, var(--grey));
    background: var(--st-bg, var(--grey-bg));
    vertical-align: middle;
    cursor: help;
}
/* Declined / Discarded carry a white cross, drawn as two bars so it is centred on
   the circle exactly (a "×" glyph sits off-centre). The light theme's fills are
   translucent, so these two dots get a solid fill there to keep the white cross legible. */
.status-dot.badge-status-declined::before,
.status-dot.badge-status-declined::after,
.status-dot.badge-status-discarded::before,
.status-dot.badge-status-discarded::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}
:root[data-theme="light"] .status-dot.badge-status-declined  { background: #f87171; }
:root[data-theme="light"] .status-dot.badge-status-discarded { background: #6b7280; }
.status-dot.badge-status-declined::before,
.status-dot.badge-status-discarded::before { transform: translate(-50%, -50%) rotate(45deg); }
.status-dot.badge-status-declined::after,
.status-dot.badge-status-discarded::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── Entity type & misc badges ────────────────────────── */
.badge-entity {
    background: var(--accent-blue-dim);
    color: var(--accent-blue);
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.3px;
}
.badge-primary {
    background: var(--accent-subtle);
    color: var(--accent);
    display: inline-block;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: calc(10px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.3px;
}
.badge-tiny {
    display: inline-block;
    padding: 1px 5px;
    font-size: calc(10px * var(--text-scale));
    border-radius: 3px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-amber { background: var(--yellow-bg); color: var(--yellow-text, var(--yellow)); }
.badge-muted { background: var(--grey-bg);  color: var(--text-muted); }

/* F&T marks: the slot always reserves the pill's width, so rows do not shift
   when the marks load or change. */
.ft-pill-slot { display: inline-block; min-width: 9.5em; min-height: 1.6em; line-height: 1.6em; vertical-align: middle; }
/* A label and its pill on one line, at a height that does not change when the pill arrives. */
.ft-label-row { display: flex; align-items: center; gap: 8px; min-height: 1.8em; margin-bottom: 4px; }
.ft-label-row > label { margin-bottom: 0; }
/* The depreciation modal's error line keeps its height so the modal does not grow on a save error. */
#fte-m-error { min-height: 1.4em; }
.ft-pill { white-space: nowrap; }
.fth-dialog { width: min(980px, 96vw); display: flex; flex-direction: column; }
.fth-tabs { display: flex; gap: 6px; padding: 0 16px 8px; flex-shrink: 0; }
.fth-tab.active { background: var(--bg-tertiary); }
.fth-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.fth-filters { margin-bottom: 10px; }
.fth-row { cursor: pointer; }
.fth-table th, .fth-table td { text-align: left; vertical-align: top; }
.fth-pre { white-space: pre-wrap; font-size: 0.85em; }

/* ── Partner Detail Drawer (wider) ───────────────────── */
#partner-drawer { width: 620px; max-width: 100vw; }

/* ── Danger-coloured icon button ─────────────────────── */
.btn-icon-danger { color: var(--text-muted); }
.btn-icon-danger:hover { color: var(--red); background: var(--red-bg); }

.pd-header-info .pd-short-name {
    font-size: calc(20px * var(--text-scale));
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.3px;
}
.pd-header-info .pd-full-name {
    font-size: calc(12.5px * var(--text-scale));
    color: var(--text-secondary);
    margin-top: 3px;
}
#pd-badges {
    margin-top: 7px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pd-header-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-shrink: 0;
}

/* ── Drawer Tabs ──────────────────────────────────────── */
.drawer-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    padding: 0 16px;
    flex-shrink: 0;
}
.drawer-tab {
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: calc(13px * var(--text-scale));
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    font-family: inherit;
}
.drawer-tab:hover { color: var(--text-secondary); }
.drawer-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Overview Tab ─────────────────────────────────────── */
.inline-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 4px 8px;
    color: var(--text-primary);
    font-size: calc(12.5px * var(--text-scale));
    font-family: inherit;
    cursor: pointer;
}
.detail-notes {
    font-size: calc(13px * var(--text-scale));
    color: var(--text-secondary);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}
.danger-zone {
    border-top: 1px solid var(--red-border, rgba(224,85,85,0.25));
    padding-top: 16px;
    margin-top: 8px;
}

/* ── Inline small input (detail card auto-save fields) ── */
.inline-input-sm {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    padding: 3px 6px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.inline-input-sm:hover,
.inline-input-sm:focus {
    border-color: var(--accent);
    outline: none;
}

/* Overview tab: auto-save fields read as plain text until hovered or focused,
   so they do not look like a form waiting for an Edit button. Padding and
   border width stay the same, so nothing moves on hover. */
.detail-field .inline-input-sm,
.detail-field .inline-select {
    background: transparent;
    border-color: transparent;
}
.detail-field .inline-select { -webkit-appearance: none; appearance: none; }
.detail-field .inline-input-sm:hover,
.detail-field .inline-input-sm:focus,
.detail-field .inline-select:hover,
.detail-field .inline-select:focus {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    outline: none;
}

/* ── Contact Cards ────────────────────────────────────── */
.contacts-list { display: flex; flex-direction: column; gap: 10px; }

.contact-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 14px;
    transition: border-color var(--transition);
}
.contact-card.contact-primary { border-color: var(--accent); }
.contact-card:hover { border-color: var(--border-default); }

.contact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.contact-card-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.contact-name {
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
    color: var(--text-primary);
}
.contact-actions { display: flex; gap: 4px; align-items: center; }
.contact-card-body { font-size: calc(12.5px * var(--text-scale)); line-height: 1.7; color: var(--text-secondary); }
.contact-card-body a { color: var(--accent); text-decoration: none; }
.contact-card-body a:hover { text-decoration: underline; }

/* Inline link on surfaces with no global `a` rule (e.g. modals) */
.link-accent { color: var(--accent-text, var(--accent)); }
.link-accent:hover { text-decoration: underline; }
.contact-role { color: var(--text-muted); font-size: calc(11.5px * var(--text-scale)); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.3px; }

/* ── Flag Toggles ─────────────────────────────────────── */
.flags-list { display: flex; flex-direction: column; }

.flag-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.flag-row:last-child { border-bottom: none; }
.flag-label { font-size: calc(13px * var(--text-scale)); color: var(--text-secondary); }

/* Toggle switch */
.flag-toggle { position: relative; display: inline-block; width: 38px; height: 22px; }
.flag-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: 99px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--transition), background var(--transition);
}
.flag-toggle input:checked + .toggle-track {
    background: var(--green);
    border-color: var(--green);
}
.flag-toggle input:checked + .toggle-track::after {
    transform: translateX(16px);
    background: white;
}

/* ── Document List (Partners) ─────────────────────────── */
.partner-doc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}
.partner-doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}
.partner-doc-icon { font-size: calc(18px * var(--text-scale)); flex-shrink: 0; }
.partner-doc-info { flex: 1; min-width: 0; }
.partner-doc-name {
    font-size: calc(13px * var(--text-scale));
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}
.partner-doc-meta { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); margin-top: 2px; }
.partner-doc-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Drop Zone ────────────────────────────────────────── */
.drop-zone {
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    font-size: calc(13.5px * var(--text-scale));
    color: var(--text-secondary);
}
.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--accent);
    background: var(--accent-subtle);
}
.drop-zone-icon { font-size: calc(28px * var(--text-scale)); margin-bottom: 10px; display: block; }
.drop-zone-browse {
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
}

/* ps-status pills are defined above in the project selector section */
.form-row > .form-group { flex: 1; }


/* ══════════════════════════════════════════════════════════
   Phase 3 — Work Packages + Effort Table
   ══════════════════════════════════════════════════════════ */

/* ── WP Cards ───────────────────────────────────────────── */
.wp-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}
.wp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-default);
    flex-wrap: wrap;
}
.wp-number-badge {
    font-weight: 700;
    font-size: calc(13px * var(--text-scale));
    color: var(--accent);
    min-width: 36px;
}

/* ── WP Colour Swatch ─────────────────────────────────── */
.wp-colour-swatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.1s ease;
}
.wp-colour-swatch:hover {
    transform: scale(1.15);
}
.wp-colour-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

.wp-title {
    font-weight: 600;
    font-size: calc(14px * var(--text-scale));
    flex: 1;
    cursor: pointer;
}
.wp-title:hover { text-decoration: underline dotted; }
.wp-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
.wp-leader-label {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.wp-leader-select {
    font-size: calc(12px * var(--text-scale));
    padding: 2px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-primary);
}

/* ── Task Rows ──────────────────────────────────────────── */
.wp-tasks { padding: 8px 16px; }
.wp-tasks-empty {
    color: var(--text-muted, var(--text-secondary));
    font-size: calc(12px * var(--text-scale));
    padding: 6px 0;
}
.task-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-default);
    flex-wrap: wrap;
}
.task-row:last-child { border-bottom: none; }
.task-row.dragging { opacity: 0.5; }
.task-drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    font-size: calc(16px * var(--text-scale));
    user-select: none;
}
.task-number-badge {
    font-size: calc(11px * var(--text-scale));
    font-weight: 700;
    color: var(--accent);
    min-width: 36px;
}
.task-name {
    font-size: calc(13px * var(--text-scale));
    flex: 1;
    cursor: pointer;
    min-width: 120px;
}
.task-name:hover { text-decoration: underline dotted; }
.task-leader-label,
.task-field-label {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.task-leader-select,
.wp-leader-contact-select,
.task-start-input,
.task-dur-input {
    font-size: calc(12px * var(--text-scale));
    padding: 2px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-primary);
}

/* Supporting partners picker: same width as the Leader select */
.task-leader-select,
.sp-button { width: 110px; }
.sp-button {
    font-size: calc(12px * var(--text-scale));
    padding: 2px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-popover {
    position: fixed;
    z-index: 1000;
    min-width: 140px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.sp-popover.hidden { display: none; }
.sp-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-primary);
    cursor: pointer;
}
.sp-item:hover { background: var(--bg-hover, rgba(255, 255, 255, 0.08)); }
.sp-empty { padding: 3px 6px; font-size: calc(12px * var(--text-scale)); color: var(--text-secondary); }

/* Inline edit input */
.inline-input {
    font-size: calc(13px * var(--text-scale));
    padding: 2px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    outline: none;
}

/* ── Effort Table ───────────────────────────────────────── */
.effort-table-scroll {
    overflow-x: auto;
    margin-top: 8px;
}
.effort-table {
    border-collapse: collapse;
    width: 100%;
    font-size: calc(13px * var(--text-scale));
}
.effort-table th,
.effort-table td {
    border: 1px solid var(--border-default);
    padding: 6px 10px;
    text-align: center;
    white-space: nowrap;
}
.effort-th-partner,
.effort-td-partner {
    text-align: left;
    min-width: 110px;
    font-weight: 600;
}
.effort-th-wp {
    font-weight: 700;
    color: var(--accent);
    min-width: 70px;
}
.effort-th-total,
.effort-td-total,
.effort-td-col-label,
.effort-td-col-total,
.effort-td-grand-total {
    font-weight: 700;
    background: var(--bg-secondary);
}
.effort-td-grand-total { color: var(--accent); }
.effort-cell-input {
    width: 56px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: calc(13px * var(--text-scale));
    padding: 2px 4px;
    border-radius: 4px;
}
.effort-cell-input:focus {
    outline: none;
    background: var(--accent-subtle, rgba(99,179,237,0.1));
    border: 1px solid var(--accent);
}
.effort-cell-input:hover { background: var(--bg-secondary); }
.effort-partner-short { font-weight: 600; }

/* ── Budget Page ─────────────────────────────────────────── */
.budget-tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    padding: 0 16px;
    flex-shrink: 0;
    margin-top: 8px;
}
.budget-tab {
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: calc(13px * var(--text-scale));
    white-space: nowrap;
    font-family: inherit;
    transition: color var(--transition);
}
.budget-tab:hover { color: var(--text-secondary); }
.budget-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

#budget-export-controls {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.budget-sheet-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    line-height: 1;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    cursor: pointer;
}
.budget-sheet-toggle input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

#budget-warnings {
    margin: 8px 0;
}
.budget-warnings-inner {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid var(--yellow-text);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: calc(13px * var(--text-scale));
    color: var(--yellow-text);
}
.budget-warnings-inner ul {
    margin: 4px 0 0 18px;
    padding: 0;
}
.budget-warnings-inner li {
    margin: 2px 0;
}

#budget-profit-warning {
    margin: 8px 0;
}
.budget-warning {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid var(--yellow-text);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: calc(13px * var(--text-scale));
    color: var(--yellow-text);
}
.budget-warning ul {
    margin: 4px 0 8px 18px;
    padding: 0;
}
#budget-profit-modal ul {
    margin: 8px 0 0;
    padding-left: 20px;
}
.budget-eu-total {
    margin: 8px 0;
    font-size: calc(13px * var(--text-scale));
    color: var(--text-secondary);
}
.budget-eu-total.budget-eu-over {
    color: var(--yellow-text);
    font-weight: 700;
}

.budget-table-scroll {
    overflow-x: auto;
    margin-top: 8px;
}
.budget-table {
    border-collapse: collapse;
    width: 100%;
    font-size: calc(13px * var(--text-scale));
}
.budget-table th,
.budget-table td {
    border: 1px solid var(--border-default);
    padding: 6px 10px;
    text-align: center;
    white-space: nowrap;
}
.budget-table td.budget-currency {
    text-align: right;
}
.budget-table th {
    background: var(--bg-secondary);
    font-weight: 700;
    text-align: center;
}
.budget-th-partner,
.budget-td-partner {
    text-align: left;
    min-width: 120px;
    font-weight: 600;
}
.budget-td-total {
    font-weight: 700;
    background: var(--bg-secondary);
}
.budget-totals-row td {
    background: var(--bg-secondary);
    border-top: 2px solid var(--border-strong);
}
.budget-warning-row td {
    color: var(--text-muted);
    font-style: italic;
}
.budget-expand-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: calc(10px * var(--text-scale));
    padding: 0 4px;
    transition: color var(--transition);
}
.budget-expand-btn:hover { color: var(--accent); }

.budget-lump-detail td {
    padding: 0;
    background: var(--bg-tertiary);
}
.budget-lump-subtable {
    border-collapse: collapse;
    width: 100%;
    font-size: calc(12px * var(--text-scale));
}
.budget-lump-subtable th,
.budget-lump-subtable td {
    border: 1px solid var(--border-subtle);
    padding: 4px 8px;
    text-align: center;
}
.budget-lump-subtable td.budget-currency {
    text-align: right;
}
.budget-lump-subtable th {
    background: var(--bg-secondary);
    font-weight: 600;
    text-align: center;
}

/* ── Management Budget Summary (Phase 7) ─────────────── */
.mgmt-budget-table .mgmt-col-personnel { min-width: 110px; }
.mgmt-budget-table .mgmt-col-indirect  { min-width: 120px; }
.mgmt-budget-table .mgmt-col-total     { font-weight: 700; color: var(--text-primary); }
.budget-lump-subtable td:first-child {
    text-align: left;
    color: var(--text-secondary);
}


/* ══════════════════════════════════════════════════════════
   Gantt Chart (Phase 5)
   ══════════════════════════════════════════════════════════ */

/* Remove page-container padding when Gantt is active so the chart fills full bleed */
#page-container:has(#page-gantt.active) {
    padding: 0 0 0 12px;
    max-width: none;
}

#page-gantt.active .gantt-container {
    width: 100%;
}

/* Override standard toolbar margin inside Gantt's flex-column layout */
#page-gantt .toolbar {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding: 8px 16px;
    flex-shrink: 0;
}

/* Outer container: two-column sticky layout */
.gantt-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* Left label column */
.gantt-left {
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border-default);
    background: var(--bg-secondary);
}

/* Right scrollable grid */
.gantt-right {
    overflow: auto;
    background: var(--bg-primary);
}

/* Header row (month labels) */
.gantt-header-left {
    height: 32px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: sticky;
    top: 0;
    z-index: 2;
}

.gantt-header-right {
    height: 32px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}

.gantt-month-cell {
    min-width: var(--cell-w, 44px);
    width: var(--cell-w, 44px);
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
    border-right: 1px solid var(--border-subtle);
    cursor: default;
    flex-shrink: 0;
    transition: color var(--transition);
}

.gantt-month-cell:hover {
    color: var(--text-primary);
}

.gantt-month-cell.gantt-month-q1 {
    border-left: 2px solid var(--border-strong);
}

.gantt-cell.gantt-cell-q1 {
    border-left: 2px solid var(--border-strong);
}

/* Row: label side */
.gantt-row-label {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(12.5px * var(--text-scale));
    color: var(--text-secondary);
    cursor: default;
    gap: 6px;
}

.gantt-row-label.gantt-row-wp {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: calc(12px * var(--text-scale));
}

.gantt-row-label.gantt-row-task {
    padding-left: 24px;
}

.gantt-row-label.gantt-row-ghost {
    color: var(--text-muted);
    font-style: italic;
}

.gantt-row-num {
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale));
    flex-shrink: 0;
}

/* Row: grid side */
.gantt-row-grid {
    height: 36px;
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    display: flex;
}

.gantt-row-grid.gantt-row-wp {
    background: var(--bg-tertiary);
}

.gantt-cell {
    min-width: var(--cell-w, 44px);
    width: var(--cell-w, 44px);
    height: 36px;
    border-right: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* WP aggregate bar */
.gantt-bar-wp {
    position: absolute;
    top: 8px;
    height: 20px;
    /* Solid tint (not opacity) so the month/RP lines behind it do not show through */
    background: color-mix(in srgb, var(--accent) 35%, var(--bg-tertiary));
    border-radius: 3px;
    pointer-events: none;
    z-index: 1;
}

/* Task bar */
.gantt-bar {
    position: absolute;
    top: 6px;
    height: 24px;
    background: var(--accent-blue);
    border-radius: 3px;
    cursor: grab;
    z-index: 1;
    transition: filter 0.1s ease;
    user-select: none;
}

.gantt-bar:hover {
    filter: brightness(1.18);
}

.gantt-bar:active {
    cursor: grabbing;
}

.gantt-bar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: calc(11px * var(--text-scale));
    color: var(--text-on-fill);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Resize handles */
.gantt-resize-l,
.gantt-resize-r {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7px;
    cursor: col-resize;
    z-index: 2;
}

.gantt-resize-l { left: 0; border-radius: 3px 0 0 3px; }
.gantt-resize-r { right: 0; border-radius: 0 3px 3px 0; }

.gantt-resize-l:hover,
.gantt-resize-r:hover {
    background: rgba(255,255,255,0.15);
}

/* Ghost row (task without timing) */
.gantt-ghost-bar {
    position: absolute;
    top: 6px;
    left: 4px;
    width: 180px;
    height: 24px;
    border: 1px dashed var(--border-strong);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}

.gantt-ghost-bar:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Tooltip */
.gantt-tooltip {
    position: fixed;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-primary);
    pointer-events: none;
    z-index: 9999;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    max-width: 280px;
    white-space: pre-line;
}

/* Gantt-specific page layout overrides — only when active */
#page-gantt.active {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: calc(100vh - var(--topbar-h));
    overflow: hidden;
    max-width: none;
    width: 100%;
}

/* Today indicator line */
.gantt-today-line {
    position: absolute;
    top: 32px;                   /* below the sticky header */
    bottom: 0;
    width: 2px;
    background: var(--red);
    opacity: 0.55;
    pointer-events: none;
    z-index: 3;
}

/* Edit modal date hint */
.gantt-date-hint {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
    margin-top: 3px;
}

/* Empty state inside gantt */
.gantt-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: calc(14px * var(--text-scale));
}

/* Dragging state — disable text selection globally */
.gantt-dragging,
.gantt-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ── Gantt DV/MS Markers ──────────────────────────────── */
.gantt-marker {
    position: absolute;
    font-size: calc(14px * var(--text-scale));
    line-height: 14px;
    width: 14px;
    text-align: center;
    cursor: pointer;
    z-index: 4;
    pointer-events: auto;
    transition: transform 0.1s ease;
}
.gantt-marker:hover {
    transform: scale(1.3);
}
.gantt-marker-dv {
    color: var(--accent);              /* blue ◆ */
}
.gantt-marker-ms {
    color: var(--yellow);                    /* orange ★ */
}

/* ── Planned-vs-actual overlay (DV/MS layer) ─────────────
   Drawn on the row's bottom edge so it never collides with the
   baseline ◆/★ markers, which keep their own position and meaning. */
.gantt-actual-mark {
    position: absolute;
    font-size: calc(10px * var(--text-scale));
    line-height: 10px;
    width: 10px;
    text-align: center;
    cursor: default;
    z-index: 5;
    pointer-events: auto;
}
.gantt-actual-revised { color: var(--text-muted); }   /* ◇ revised due date */
.gantt-actual-done    { color: var(--green); }        /* ● delivered / achieved */
.gantt-actual-late    { color: var(--yellow); }       /* ● but late vs baseline */
.gantt-actual-overdue { color: var(--red); }          /* ○ nothing delivered */

.gantt-marker-group {
    width: auto;
    display: flex;
    align-items: center;
    gap: 1px;
}
.gantt-marker-count {
    font-size: calc(9px * var(--text-scale));
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}

/* ── Gantt Export Dialog ──────────────────────────────── */
.gantt-export-wp-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    color: var(--text-on-fill);
}

/* ── Costs Page (Phase 6) ─────────────────────────────── */
.costs-layout {
    display: flex;
    gap: 16px;
    height: calc(100vh - var(--topbar-h) - 57px);
    overflow: hidden;
}
.costs-cat-panel {
    width: 280px;
    min-width: 220px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    overflow-y: auto;
    flex-shrink: 0;
    padding-bottom: 12px;
}
.costs-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}
.costs-hidden-section > summary { cursor: pointer; list-style-position: inside; }
.costs-hidden-section .hidden-move-target { max-width: 140px; }
.costs-hidden-section .costs-cat-row { flex-direction: column; align-items: stretch; gap: 3px; }
.costs-hidden-section .costs-cat-info { flex: none; }
.costs-hidden-section .costs-cat-label { white-space: normal; }
.costs-hidden-section .costs-cat-actions { flex-wrap: wrap; align-items: center; gap: 4px; opacity: 1; }
.costs-hidden-reason { padding: 2px 12px 6px; margin: 0 4px; }
.costs-group-section {
    padding: 8px 0 4px;
}
.costs-group-label {
    font-size: calc(10px * var(--text-scale));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 4px 12px 2px;
}
.costs-group-empty {
    padding: 2px 12px 6px;
    font-size: calc(11px * var(--text-scale));
}
.costs-cat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    border-radius: 4px;
    margin: 0 4px;
    gap: 6px;
}
.costs-cat-row:hover {
    background: var(--bg-tertiary);
}
.costs-cat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.costs-cat-label {
    font-size: calc(12px * var(--text-scale));
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.costs-cat-price {
    font-size: calc(11px * var(--text-scale));
}
.costs-cat-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.costs-cat-row:hover .costs-cat-actions {
    opacity: 1;
}
.costs-matrix-wrap {
    flex: 1;
    overflow: auto;
}

/* Matrix table (reuses effort-table styles) */
.costs-matrix .costs-cat-col {
    min-width: 200px;
    text-align: left;
}
.costs-matrix .costs-partner-col {
    min-width: 100px;
    text-align: center;
}
.costs-matrix .costs-total-col {
    min-width: 90px;
    text-align: right;
    font-weight: 600;
}
.costs-group-row .costs-group-header {
    background: var(--bg-tertiary);
    font-size: calc(10px * var(--text-scale));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 4px 10px;
}
.costs-cat-name-cell {
    padding: 6px 10px;
}
.costs-cat-name {
    font-size: calc(12px * var(--text-scale));
    font-weight: 500;
}
.costs-cat-default-price {
    font-size: calc(11px * var(--text-scale));
}
.costs-cell {
    text-align: center;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.1s;
}
.costs-cell:hover {
    background: var(--bg-tertiary);
}
.costs-cell.has-value {
    background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
}
.costs-cell.has-value:hover {
    background: color-mix(in srgb, var(--accent-blue) 18%, transparent);
}
.costs-cell-total {
    display: block;
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
}
.costs-cell-qty {
    display: block;
    font-size: calc(10px * var(--text-scale));
}
.costs-cell-empty {
    color: var(--text-muted);
    font-size: calc(12px * var(--text-scale));
}
/* Depreciation rows in the Equipment group (Costs page) */
.costs-cell-blank {
    text-align: center;
    vertical-align: middle;
}
.costs-dep-tag {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent-blue) 18%, transparent);
    font-size: calc(10px * var(--text-scale));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.costs-group-header .costs-add-dep {
    margin-left: 8px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}
.costs-equip-note {
    padding: 4px 10px;
}
.costs-dep-warnings {
    margin-top: 8px;
    color: var(--text-muted);
}
.costs-depr-fields.is-off {
    opacity: 0.5;
}
.costs-row-total {
    text-align: right;
    font-weight: 600;
    font-size: calc(12px * var(--text-scale));
    background: var(--bg-secondary);
}
.costs-footer-row td {
    background: var(--bg-tertiary);
    font-weight: 700;
    font-size: calc(12px * var(--text-scale));
    border-top: 2px solid var(--border-default);
}
.costs-footer-label {
    font-weight: 700;
}
.costs-col-total {
    text-align: center;
    font-weight: 700;
}
.costs-grand-total {
    text-align: right;
    font-weight: 700;
    color: var(--accent);
}
.costs-cell-preview {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: calc(13px * var(--text-scale));
    text-align: center;
}


/* ── Deliverables & Milestones Page ─────────── */
.dvms-table-scroll { overflow-x: auto; margin-top: 8px; }
.dvms-table {
    border-collapse: collapse;
    width: 100%;
    font-size: calc(13px * var(--text-scale));
}
.dvms-table th,
.dvms-table td {
    border: 1px solid var(--border-default);
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
}
.dvms-table th {
    background: var(--bg-secondary);
    font-weight: 700;
    text-align: center;
}
.dvms-table .col-name { min-width: 200px; white-space: normal; }
.dvms-table .col-actions { text-align: center; }

.dvms-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dvms-status-pending   { background: rgba(148,163,184,.15); color: var(--text-muted); }
.dvms-status-submitted { background: rgba(59,130,246,.15);  color: var(--blue-text); }
.dvms-status-approved  { background: rgba(34,197,94,.15);   color: var(--green-text); }
.dvms-status-overdue   { background: rgba(239,68,68,.15);   color: var(--red-text); }
.dvms-status-rejected  { background: rgba(239,68,68,.15);   color: var(--red-text); }
.dvms-status-achieved  { background: rgba(34,197,94,.15);   color: var(--green-text); }

.dvms-rdots { display: flex; gap: 4px; align-items: center; }
.dvms-rdot {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: calc(10px * var(--text-scale));
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: default;
}
.dvms-rdot--sent   { background: rgba(34,197,94,.18); color: var(--green-text); border: 1px solid rgba(34,197,94,.35); }
.dvms-rdot--unsent { background: rgba(148,163,184,.08); color: rgba(148,163,184,.4); border: 1px solid rgba(148,163,184,.15); }
/* The send behind the claim failed (pilot-reminder-failed-visible); retry from "Send reminders". */
.dvms-rdot--failed { background: rgba(224,85,85,.18); color: var(--red-text); border: 1px solid rgba(224,85,85,.45); }

/* "Retry failed" section of the Send-reminders dialog */
.reminders-confirm-failed { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-default); }
.reminders-confirm-failed h3 { margin: 0 0 6px; font-size: calc(13px * var(--text-scale)); color: var(--red-text); }
.reminders-confirm-failed li { margin-bottom: 4px; }

.dvms-config-form {
    max-width: 520px;
    padding: 4px 0;
}
.dvms-config-form input[type="number"] { max-width: 120px; }
.dvms-config-form textarea { min-height: 60px; resize: vertical; }
/* Settings > Reminders: editable reminder email texts (reminder_templates.js) */
.rt-host { max-width: 720px; padding: 4px 0; }
.rt-host input[type="text"], .rt-host textarea { width: 100%; box-sizing: border-box; }
.rt-host textarea { min-height: 140px; resize: vertical; }
.rt-block { margin-bottom: 28px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.rt-title { margin: 0 0 8px; font-size: calc(14px * var(--text-scale)); }
.rt-placeholders { margin: 4px 0 8px; }
.rt-preview { min-height: 11em; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 6px; }
.rt-preview-body { margin: 6px 0 0; white-space: pre-wrap; font-family: inherit; }
.dvms-config-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.dvms-config-check input { width: auto; }
.field-hint {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-secondary);
    cursor: help;
    position: relative;
    white-space: nowrap;
}
.field-hint[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: calc(12px * var(--text-scale));
    font-weight: 400;
    padding: 6px 10px;
    border-radius: var(--radius);
    width: 260px;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}
.field-hint[data-tooltip]:hover::after {
    opacity: 1;
}

.dvms-table .dvms-rdots {
    display: inline-flex;    /* keeps dots side-by-side */
    gap: 4px;
    justify-content: center;
}

/* Centre-align specific DV table columns: #, WP, Type, Diss., Lead, Month, Status, Reminders */
.dvms-table th:nth-child(1),  .dvms-table td:nth-child(1),   /* # */
.dvms-table th:nth-child(2),  .dvms-table td:nth-child(2),   /* WP */
.dvms-table th:nth-child(4),  .dvms-table td:nth-child(4),   /* Type */
.dvms-table th:nth-child(5),  .dvms-table td:nth-child(5),   /* Diss. */
.dvms-table th:nth-child(6),  .dvms-table td:nth-child(6),   /* Lead */
.dvms-table th:nth-child(8),  .dvms-table td:nth-child(8),   /* Month */
.dvms-table th:nth-child(9),  .dvms-table td:nth-child(9),   /* Status */
.dvms-table th:nth-child(9),  .dvms-table td:nth-child(10),  /* Reminders */
.dvms-table th:nth-child(10), .dvms-table td:nth-child(11) { /* Planning Link */
    text-align: center;
}

/* ── Import Report Modal ──────────────────────────────── */
.import-report-summary {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.import-report-summary .badge-success,
.import-report-summary .badge-info,
.import-report-summary .badge-warn {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
}
.import-report-summary .badge-success { background: rgba(16,185,129,0.15); color: var(--green); }
.import-report-summary .badge-info    { background: rgba(59,130,246,0.15); color: var(--accent-blue); }
.import-report-summary .badge-warn    { background: rgba(245,166,35,0.15); color: var(--yellow); }

.import-report-section {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    background: var(--bg-secondary);
}
.import-report-section strong {
    display: block;
    margin-bottom: 6px;
}
.import-report-section p {
    font-size: calc(13px * var(--text-scale));
    margin: 4px 0;
    color: var(--text-secondary);
}
.import-report-error {
    border-left: 3px solid var(--red);
}
.import-report-warn {
    border-left: 3px solid var(--yellow);
}
.import-report-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.import-chip {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
}
.import-chip-error { background: rgba(239,68,68,0.15); color: var(--red); }
.import-chip-warn  { background: rgba(245,166,35,0.15); color: var(--yellow); }

.import-report-errors {
    margin: 8px 0 0 0;
    padding-left: 18px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    max-height: 200px;
    overflow-y: auto;
}
.import-report-errors li {
    margin-bottom: 3px;
}

/* ── Inline links in body copy ─────────────────────────────
   This app sets NO global anchor colour, so any plain <a> renders in the
   browser default #0000EE — unreadable on the dark theme. Every component that
   grows an inline link has to opt in here. Currently: the proposal check panel
   (issue refs), the composer's subject-prefix hint, and the dashboard's
   "pin a KPI" hint. */
#prop-validation a,
#msg-compose-subject-hint a,
#kpi-tile-grid a {
    color: var(--accent);
    text-decoration: underline;
}
#prop-validation a:hover,
#msg-compose-subject-hint a:hover,
#kpi-tile-grid a:hover {
    color: var(--text-primary);
}


/* ══════════════════════════════════════════════════════════
   Phase 9: Messages Page — 4-column Kanban
   ══════════════════════════════════════════════════════════ */

/* ── Messages page layout ─────────────────────────────── */
#page-messages .msg-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0;
    align-items: start;
}

#page-messages .msg-kanban-col {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px;
    min-height: 200px;
}

#page-messages .msg-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

#page-messages .msg-col-header h3 {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.msg-col-count {
    font-size: calc(12px * var(--text-scale));
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 600;
}

/* ── Message cards ────────────────────────────────────── */
.msg-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: default;
}

.msg-card:last-child { margin-bottom: 0; }

.msg-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}

.msg-card-to {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-card-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.msg-card-partner {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.msg-card-subject {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-ai-spinner {
    font-size: calc(12px * var(--text-scale));
    color: var(--accent);
    margin-bottom: 8px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.msg-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.15s;
}
.msg-card:hover .msg-card-actions,
.msg-card:focus-within .msg-card-actions { opacity: 1; }
@media (hover: none) { .msg-card-actions { opacity: 1; } }

.btn-xs {
    padding: 2px 8px;
    font-size: calc(11px * var(--text-scale));
    border-radius: 4px;
}

/* ── Legacy section ──────────────────────────────────── */
.msg-legacy-section {
    margin-top: 32px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
}

.msg-legacy-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: calc(13px * var(--text-scale));
    color: var(--text-muted);
    user-select: none;
    margin-bottom: 8px;
}

.msg-legacy-toggle:hover { color: var(--text-secondary); }

#msg-legacy-list.hidden { display: none; }

/* ── Compose modal: capped height, the form body scrolls ──
   The body must scroll: with the To/Cc/Bcc recipient fields the form is taller
   than 90vh on smaller screens, and `overflow:hidden` here previously clipped
   everything below the fold (the message body became unreachable).
   `min-height:0` is required — a flex item defaults to min-height:auto and so
   refuses to shrink below its content, which stops overflow-y from ever
   engaging. Header/footer stay pinned. */
.msg-compose-modal {
    width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.msg-compose-modal .modal-header,
.msg-compose-modal .modal-footer {
    flex-shrink: 0;
}
.msg-compose-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#msg-compose-body {
    min-height: 140px;
    max-height: 300px;
    overflow-y: auto;
}
/* Line the signature up with the body text: Quill's 15px padding + 1px border. */
#msg-signature-preview-wrap { padding-left: 16px; }
#msg-compose-body .ql-editor {
    min-height: 120px;
    max-height: 280px;
    overflow-y: auto;
}

/* ── Failed card highlight ── */
.msg-card-failed {
    border-left: 3px solid var(--red);
}

/* ── Scheduler status bar ── */
.msg-scheduler-status {
    margin-top: 10px;
    padding: 8px 14px;
    font-size: calc(13px * var(--text-scale));
    color: var(--text-muted);
    background: var(--bg-card);
    border-left: 3px solid var(--accent-blue);
    border-radius: 6px;
}


/* ══════════════════════════════════════════════════════════
   Quill.js Dark Theme Overrides
   ══════════════════════════════════════════════════════════ */

.ql-toolbar.ql-snow {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 6px 8px;
}

.ql-container.ql-snow {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radius) var(--radius);
    font-family: inherit;
    font-size: calc(14px * var(--text-scale));
    color: var(--text-primary);
}

.ql-editor {
    background: var(--bg-secondary);
    color: var(--text-primary);
    min-height: 180px;
    line-height: 1.6;
}

.ql-editor.ql-blank::before {
    color: var(--text-muted) !important;
    font-style: normal;
}

/* Toolbar icons */
.ql-toolbar .ql-stroke {
    stroke: var(--text-secondary) !important;
}

.ql-toolbar .ql-fill {
    fill: var(--text-secondary) !important;
}

.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--accent) !important;
}

.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-fill {
    fill: var(--accent) !important;
}

/* Colour picker dropdowns */
.ql-picker-label {
    color: var(--text-secondary) !important;
    border-color: var(--border-default) !important;
}

.ql-picker-options {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
}

.ql-picker-item:hover {
    color: var(--accent) !important;
}

/* ── Planning Tab Bar (WPs, DVs & MSs page) ────────────── */
/* ── Info Banner (read-only warnings) ─────────────────── */
.info-banner {
    padding: 8px 16px;
    margin-bottom: 12px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    background: rgba(148,163,184,.08);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}
/* ── WP Read-only (execution phase) ──────────────────── */
#wp-list.wp-readonly .wp-drag-handle,
#wp-list.wp-readonly .task-drag-handle,
#wp-list.wp-readonly .btn-add-task,
#wp-list.wp-readonly .btn-add-subtask,
#wp-list.wp-readonly .btn-delete-wp,
#wp-list.wp-readonly .btn-delete-task,
#wp-list.wp-readonly .wp-colour-swatch,
#wp-list.wp-readonly .wp-colour-hex { display: none; }
#wp-list.wp-readonly .editable { pointer-events: none; cursor: default; }

/* ── Inline Toggle (checkbox + label in toolbar) ──────── */
.toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    font-size: 0.8125rem;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.toggle-inline input[type="checkbox"] {
    accent-color: var(--accent);
    margin: 0;
    cursor: pointer;
}
.planning-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
}

.planning-tab {
    padding: 8px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

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

.planning-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.planning-tab-content {
    display: none;
}

.planning-tab-content.active {
    display: block;
}

/* ── Settings Tabs (same visual pattern as planning tabs) ── */
.settings-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-default);
    margin-bottom: 20px;
}

.settings-tab {
    padding: 8px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

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

.settings-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Templates collapsible (Messages page) ─────────────── */
.templates-collapsible {
    margin-bottom: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.templates-collapsible summary {
    padding: 12px 18px;
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.templates-collapsible summary:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.templates-collapsible[open] summary {
    border-bottom: 1px solid var(--border-subtle);
}

.templates-collapsible .settings-panel-body {
    padding: 14px 18px;
}

.templates-collapsible .settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 12px;
}

/* ── Planning DV cards (grouped by WP) ─────────────────── */

.plan-dv-wp-group {
    margin-bottom: 20px;
}

.plan-dv-wp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
}

.plan-dv-wp-header .wp-colour-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.plan-dv-wp-header .chevron {
    font-size: 0.75rem;
    transition: transform 0.15s;
}

.plan-dv-wp-header.collapsed .chevron {
    transform: rotate(-90deg);
}

.plan-dv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.plan-dv-table th {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    background: var(--bg-offset);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.plan-dv-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-light, var(--border));
    vertical-align: middle;
}

.plan-dv-table tr:hover {
    background: var(--bg-hover, rgba(0,0,0,0.02));
}

.plan-dv-table .dv-number {
    font-weight: 600;
    white-space: nowrap;
    color: var(--accent);
}

.plan-dv-table td.editable,
.plan-ms-table td.editable {
    cursor: pointer;
}
.plan-dv-table td.editable:hover,
.plan-ms-table td.editable:hover {
    text-decoration: underline dotted;
}

.plan-dv-table .dv-actions {
    white-space: nowrap;
    text-align: right;
}

/* ── Planning MS table ─────────────────────────────────── */

.plan-ms-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.plan-ms-table th {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    background: var(--bg-offset);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.plan-ms-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-light, var(--border));
    vertical-align: middle;
}

.plan-ms-table tr:hover {
    background: var(--bg-hover, rgba(0,0,0,0.02));
}

.plan-ms-table .ms-number {
    font-weight: 600;
    white-space: nowrap;
    color: var(--accent-orange, var(--yellow));
}

.plan-ms-table .ms-actions {
    white-space: nowrap;
    text-align: right;
}

.plan-ms-table .ms-wp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.plan-ms-table .ms-wp-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--wp-color, var(--accent-blue));
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-on-fill);
}

/* Planning link column in DVs & MSs execution tables */
.dvms-table .col-link {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85em;
}

/* ── Sort Modal (drag-and-drop) ────────────────────────── */
.sort-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    cursor: grab;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.sort-item:hover { border-color: var(--border-strong); }
.sort-item.sort-dragging {
    opacity: 0.4;
    border-color: var(--accent);
}
.sort-handle {
    color: var(--text-muted);
    font-size: calc(16px * var(--text-scale));
    cursor: grab;
}

/* ── Budget inline edit ────────────────────────────────── */
.budget-editable {
    cursor: pointer;
    transition: background 0.15s;
}
.budget-editable:hover {
    background: var(--bg-hover);
}

/* ── Right-click context menu ──────────────────────────── */
.ctx-menu {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    min-width: 200px;
    /* A long list (e.g. cross-reference targets) scrolls instead of leaving the viewport. */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    z-index: 9999;
    font-size: calc(13px * var(--text-scale));
}
.ctx-item {
    padding: 8px 14px;
    cursor: pointer;
    color: var(--text-primary);
    white-space: nowrap;
    transition: background 0.1s;
}
.ctx-item:hover { background: var(--bg-hover); }
.ctx-separator {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 8px;
    padding: 0;
    cursor: default;
}
.ctx-item.ctx-danger { color: var(--red); }
.ctx-heading {
    padding: 4px 14px 2px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: default;
}
.ctx-item .status-dot { margin-right: 8px; cursor: inherit; vertical-align: -2px; }
.ctx-item[data-status] { text-transform: capitalize; }
.ctx-item.ctx-current { cursor: default; font-weight: 600; text-transform: capitalize; }
.ctx-item.ctx-current:hover { background: none; }
.ctx-note { margin-left: 8px; font-size: calc(11px * var(--text-scale)); font-weight: 400; color: var(--text-muted); text-transform: none; }
.ctx-item.ctx-danger:hover { background: var(--red-bg); }
.ctx-item.ctx-heading-item { color: var(--text-muted); cursor: default; }
.ctx-item.ctx-heading-item:hover { background: none; }
.ctx-item.ctx-has-sub { display: flex; justify-content: space-between; gap: 16px; }
.ctx-item.ctx-has-sub:focus, .ctx-item.ctx-has-sub:hover { background: var(--bg-hover); }
.ctx-arrow { color: var(--text-muted); }

/* Clickable PIC in side panel */
.pic-copyable {
    cursor: pointer;
    text-decoration: underline dotted;
    color: var(--accent);
}

/* ── Subtask Rows (WPs tab) ────────────────────────────── */
.subtask-group {
    margin-left: 20px;
    border-left: 2px solid var(--border-subtle);
    padding-left: 4px;
}

.subtask-row {
    background: var(--bg-secondary);
    opacity: 0.9;
}
.subtask-row .task-number-badge {
    font-size: calc(11px * var(--text-scale));
}
.subtask-badge {
    color: var(--text-muted);
}

/* Toggle button for collapse/expand */
.btn-toggle-subtasks {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: calc(10px * var(--text-scale));
    padding: 2px 4px;
    width: 16px;
    text-align: center;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.btn-toggle-subtasks:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* "+ ST" button */
.btn-add-subtask {
    font-size: calc(10px * var(--text-scale)) !important;
    padding: 1px 5px !important;
    color: var(--text-muted);
    border: 1px dashed var(--border-default) !important;
    background: transparent;
}
.btn-add-subtask:hover {
    color: var(--accent);
    border-color: var(--accent) !important;
}

/* ── Gantt Subtask Rows ────────────────────────────────── */
.gantt-row-subtask {
    font-size: calc(11px * var(--text-scale));
    height: 24px;
}

.gantt-bar-subtask {
    background: rgba(33, 150, 243, 0.55) !important;  /* accent-blue at 55% — overrides .gantt-bar */
    height: 14px !important;
    top: 5px !important;
    border-radius: 3px;
}

.gantt-row-subtask-grid {
    height: 24px;
}

/* WP toggle in Gantt sidebar */
.gantt-wp-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: calc(9px * var(--text-scale));
    margin-left: 4px;
    padding: 1px 3px;
    border-radius: 3px;
    vertical-align: middle;
}
.gantt-wp-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Task dragging state */
.task-dragging {
    opacity: 0.4;
}

/* ── WP Card Drag & Collapse ───────────────────────────── */
.wp-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: calc(14px * var(--text-scale));
    padding: 0 4px;
    user-select: none;
    flex-shrink: 0;
}
.wp-drag-handle:active { cursor: grabbing; }

.wp-dragging {
    opacity: 0.4;
}

.btn-collapse-wp {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: calc(10px * var(--text-scale));
    padding: 2px 4px;
    width: 16px;
    text-align: center;
    border-radius: 3px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.btn-collapse-wp:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* WP HEX colour input */
.wp-colour-hex {
    width: 72px;
    font-family: monospace;
    font-size: calc(11px * var(--text-scale));
    padding: 2px 5px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.wp-colour-hex:focus {
    outline: none;
    border-color: var(--accent);
    color: var(--text-primary);
}

/* ── Import WP Modal ───────────────────────────────────── */
.import-wp-item {
    transition: background 0.15s;
    border-radius: var(--radius);
}
.import-wp-item:hover {
    background: var(--bg-hover);
}

/* ══════════════════════════════════════════════════════════
   Drag & Drop — WP cards, task rows, DV/MS rows
   ══════════════════════════════════════════════════════════ */
.wp-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: calc(16px * var(--text-scale));
    padding: 0 6px;
    user-select: none;
    flex-shrink: 0;
}
.wp-drag-handle:active { cursor: grabbing; }

/* Source: dimmed, no outline (matches Gantt) */
.wp-card.dragging,
.task-row.dragging,
tr[data-dv-id].dragging,
tr[data-ms-id].dragging {
    opacity: 0.4;
}
/* Drop target: accent solid border */
.wp-card.drag-over {
    outline: 2px solid var(--accent);
    background: var(--accent-subtle);
}
.wp-card.task-drop-target {
    outline: 2px solid var(--accent-blue);
    background: var(--accent-blue-dim);
}
tr[data-dv-id].drag-over,
tr[data-ms-id].drag-over {
    outline: 2px solid var(--accent);
    background: var(--accent-subtle);
}

/* ── Effort Cell Save Feedback (M5) ────────────────────── */
.effort-cell-saved {
    animation: effort-flash-green 0.8s ease-out;
}
@keyframes effort-flash-green {
    0%   { background: rgba(34, 197, 94, 0.35); }
    100% { background: transparent; }
}

.effort-cell-error {
    animation: effort-flash-red 1.2s ease-out;
}
@keyframes effort-flash-red {
    0%   { background: rgba(239, 68, 68, 0.3); }
    100% { background: transparent; }
}

/* ── Effort Table Footer Alignment (M11) ──────────────── */
.effort-td-col-label {
    text-align: center !important;
    min-width: 110px;
}

/* ── Project Stat Cards ────────────────────────────────── */
.project-stat-grid {
    margin-bottom: 14px;
}

.project-stat-grid .stat-card {
    border-color: var(--accent-blue-dim, var(--border-subtle));
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ── Project Dropdown — scrollable list, fixed actions ──── */
.ps-actions-header {
    position: sticky;
    top: 0;
    background: var(--surface-2, var(--bg-card));
    z-index: 1;
}
.ps-list-scroll {
    max-height: 200px;
    overflow-y: auto;
}

/* ── Number Input Spinners — themed to match app ────────── */
/*
   Hide the default OS spinner entirely and replace with
   custom chevrons using a CSS background approach.
   Works in Chromium (webkit) and Firefox (moz).
*/

/* Remove native spinner in WebKit/Blink (Chrome, Edge, Safari) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Remove native spinner in Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Restore custom spinner only on inputs that should have one.
   We scope to .has-spinner so effort cells (which just show a
   number) don't get the arrows at all — cleaner table look.
   For task start/duration inputs we add the class in HTML. */
input[type="number"].has-spinner {
    -moz-appearance: auto;
    padding-right: 20px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M5 0L10 5H0z' fill='%234a6080'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M5 5L0 0H10z' fill='%234a6080'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: right 4px top 4px, right 4px bottom 4px;
}
input[type="number"].has-spinner:hover {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M5 0L10 5H0z' fill='%23f7931e'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M5 5L0 0H10z' fill='%23f7931e'/%3E%3C/svg%3E");
}

/* ── Scrollbars — one slim, auto-hiding bar everywhere ─────
   Every scrollable container (page, rail, modal bodies, table wrappers,
   palette list, dropdowns) inherits this. Thumb is transparent until the
   pointer is over the container (wheel/drag scrolling needs the pointer
   there anyway), so it reads as "appears on hover/scroll". Both colours come
   from theme variables, so light and dark need no separate rule. */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
*:hover {
    scrollbar-color: var(--border-strong) transparent;
}
/* Fallback for engines without scrollbar-color (older Chromium/Safari).
   Where scrollbar-color is supported, the rule above wins and these are inert. */
@supports not (scrollbar-color: auto) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 3px;
    }
    *:hover::-webkit-scrollbar-thumb {
        background: var(--border-strong);
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
    }
}

/* ── Budget Sheet export dropdown (X2) ─────────────────── */
.dropdown-inline {
    position: relative;
    display: inline-block;
}

.dropdown-inline .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 4px 0;
    margin-top: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.dropdown-inline .dropdown-item {
    display: block;
    padding: 8px 14px;
    font-size: calc(13px * var(--text-scale));
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}

.dropdown-inline .dropdown-item:hover {
    background: var(--accent-subtle);
}

.dropdown-inline .dropdown-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

/* ── Planning DV/MS card-style groups ──────────────────── */
.plan-dv-wp-group.wp-card-style {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.plan-dv-wp-group.wp-card-style .plan-dv-wp-header.wp-card-header {
    background: var(--bg-card);
    padding: 10px 14px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
}

.plan-dv-wp-group.wp-card-style .plan-dv-wp-header.collapsed + * {
    display: none;
}

/* ── Sidebar Project Logo / Dropzone ───────────────────── */
#sidebar-project-logo {
    padding: 12px 16px;
    display: flex;
    justify-content: center;
}

.logo-display {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

.sidebar-project-logo-img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    /* No backing plate: transparent logos sit directly on the sidebar.
       drop-shadow follows the image's alpha channel, so the shadow (light)
       or glow (dark) hugs the artwork instead of a rectangle. */
    box-sizing: border-box;
    padding: 4px 6px;
    filter: drop-shadow(0 0 6px rgba(143, 168, 200, 0.95)) drop-shadow(0 0 14px rgba(143, 168, 200, 0.6));
}

:root[data-theme="light"] .sidebar-project-logo-img {
    filter: drop-shadow(0 2px 4px rgba(15, 21, 36, 0.6)) drop-shadow(0 4px 10px rgba(15, 21, 36, 0.35));
}

.logo-remove-btn {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--danger, var(--red));
    color: var(--text-on-fill);
    font-size: calc(12px * var(--text-scale));
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-display:hover .logo-remove-btn {
    opacity: 1;
}

.logo-dropzone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.logo-dropzone:hover,
.logo-dropzone.dragover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 249, 115, 22), 0.05);
}

.logo-dropzone-icon {
    font-size: 1.2rem;
    opacity: 0.5;
}

.logo-dropzone-text {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ── MS Edit Modal: WP Chip Grid ───────────────────────── */
.pms-wp-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
}

.pms-wp-chip {
    padding: 4px 12px;
    border-radius: 12px;
    border: 2px solid var(--wp-color, var(--accent-blue));
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.pms-wp-chip:hover {
    opacity: 0.7;
}

.pms-wp-chip.active {
    background: var(--wp-color, var(--accent-blue));
    color: var(--text-on-fill);
    opacity: 1;
}

/* ── Planning MS card wrapper ──────────────────────────── */
.plan-ms-card.wp-card-style {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.plan-ms-card .plan-ms-table {
    margin: 0;
}

/* ── Financing Tab ─────────────────────────────────────── */
.fin-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.fin-row-header {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.fin-col-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    text-align: right;
    padding-right: 28px;
}

.fin-col-pct {
    padding-right: 24px;
}

.fin-label {
    font-size: 0.8rem;
    color: var(--text);
}

.fin-label-bold {
    font-weight: 600;
}

.fin-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fin-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.8rem;
    text-align: right;
    transition: border-color 0.15s;
}

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

.fin-input::placeholder {
    color: var(--text-muted);
    opacity: 0.4;
}

.budget-a4-mark {
    font-size: 0.65rem;
    color: var(--warning, #d9822b);
    border: 1px solid currentColor;
    border-radius: 8px;
    padding: 0 6px;
    white-space: nowrap;
}

.budget-a4-ok {
    color: var(--green);
}

.fin-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 2px 0 6px;
}

.fin-readonly {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.8rem;
    text-align: right;
    color: var(--text-muted);
}

.fin-unit {
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 24px;
}

.fin-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

.fin-row-general {
    padding-bottom: 2px;
}

.fin-total-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr;
    align-items: center;
    gap: 8px;
    padding: 6px 0 2px;
}

.fin-total-value {
    font-weight: 700;
    font-size: 0.85rem;
    text-align: right;
    padding-right: 24px;
    transition: color 0.2s;
}

.fin-total-ok {
    color: var(--success, var(--green));
}

.fin-total-err {
    color: var(--danger, var(--red));
}

/* ── Delete Project Section ────────────────────────────── */
.delete-project-section {
    border-top: 1px solid var(--border);
    margin-top: 16px;
    padding-top: 16px;
}

.delete-project-confirm {
    margin-top: 12px;
}

.delete-warning {
    font-size: 0.8rem;
    color: var(--danger, var(--red));
    line-height: 1.5;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.06);
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.15);
}


/* ── Gantt: drag grip handles ──────────────────────────── */
.gantt-drag-grip {
    cursor: grab;
    opacity: 0.3;
    font-size: 0.7rem;
    padding: 0 4px;
    user-select: none;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.gantt-drag-grip:hover {
    opacity: 0.7;
}

.gantt-row-label.gantt-row-dragging {
    opacity: 0.4;
}

.gantt-row-label.gantt-drop-target {
    background: rgba(var(--accent-rgb, 249, 115, 22), 0.1);
    box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
}

.gantt-row-label.gantt-drop-target.gantt-row-wp {
    box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent);
    border-radius: 4px 4px 0 0;
}

.gantt-row-label.gantt-drop-last {
    box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent);
    border-radius: 0 0 4px 4px;
}

.gantt-row-label.gantt-drop-target.gantt-drop-last {
    box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent);
    border-radius: 4px;
}

/* ── Gantt: marker dragging ────────────────────────────── */
.gantt-marker-dragging {
    opacity: 0.6;
    transform: scale(1.3);
    z-index: 10;
}

.gantt-marker[style*="cursor: grab"]:hover {
    transform: scale(1.2);
    transition: transform 0.1s;
}

/* ── Gantt: dragging cursor ────────────────────────────── */
body.gantt-dragging {
    cursor: col-resize !important;
    user-select: none;
}

body.gantt-dragging * {
    cursor: col-resize !important;
}

/* ── Cost WP Distribution Modal ──────────────────────── */
.dist-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    max-height: 320px;
    overflow-y: auto;
}
.dist-row {
    display: grid;
    grid-template-columns: 50px 1fr 100px 90px;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.dist-wp-label {
    font-weight: 600;
    font-size: 0.85rem;
}
.dist-wp-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dist-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.dist-input-wrap .form-control {
    width: 70px;
    text-align: right;
    padding: 4px 6px;
    font-size: 0.85rem;
}
.dist-unit {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.dist-amount {
    text-align: right;
    font-size: 0.8rem;
}
.dist-total-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--bg-subtle, var(--bg-tertiary));
    font-size: 0.9rem;
}
.dist-total-ok {
    background: var(--green-bg);
    color: var(--green);
}
.dist-total-err {
    background: var(--red-bg);
    color: var(--red);
}

/* Distribution badges on cost cells */
.dist-badge {
    font-size: 0.7rem;
    margin-left: 3px;
    cursor: default;
}
.dist-badge-ok {
    color: var(--green);
}
.dist-badge-warn {
    color: var(--yellow);
    animation: pulse-warn 2s infinite;
}
@keyframes pulse-warn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Row subtitle in financing section */
.fin-row-subtitle {
    padding: 2px 0 0 0;
}

/* ── WP Detail Modal (EC view) ───────────────────────── */
.wp-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.wp-detail-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid var(--border-color, var(--border-default));
    font-size: 0.8rem;
    color: var(--text-muted);
}
.wp-detail-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-subtle, var(--border-subtle));
}
.wp-detail-num {
    text-align: right;
    white-space: nowrap;
}
.wp-detail-section-header td {
    padding-top: 10px;
    padding-bottom: 4px;
    background: var(--bg-subtle, var(--bg-tertiary));
    font-size: 0.82rem;
}
.wp-detail-subtotal td {
    border-top: 2px solid var(--border-color, var(--border-default));
    padding-top: 6px;
    font-size: 0.82rem;
}
.wp-detail-override td {
    background: rgba(59, 130, 246, 0.06);
}
.wp-detail-tag {
    display: inline-block;
    font-size: 0.7rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--accent, var(--accent-blue));
    color: var(--text-on-accent);
    vertical-align: middle;
}
.wp-detail-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 6px;
    background: var(--bg-subtle, var(--bg-tertiary));
}
.wp-detail-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}
.wp-detail-grand-total {
    padding-top: 6px;
    border-top: 2px solid var(--border-color, var(--border-default));
    font-size: 0.95rem;
}
.wp-pct-ok { color: var(--green); }
.wp-pct-err { color: var(--red); }

.wp-ec-detail-btn {
    font-size: 0.9rem !important;
    padding: 1px 5px !important;
    opacity: 0.7;
}
.wp-ec-detail-btn:hover { opacity: 1; }

/* ── Gantt current execution month highlight ── */
.gantt-month-current {
    border-left-color: var(--accent) !important;   /* no dark seam between the cell and the orange lines */
    border-right-color: var(--accent) !important;
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    font-weight: 700;
}

.gantt-month-cell.gantt-month-after-current {
    border-left-color: var(--accent);
}

/* Current-month edges are overlay lines (not cell borders) so they sit above the grey
   trimester line but below the WP/task bars (z-index 0 < bars' 1) */
.gantt-current-line {
    position: absolute;
    top: 0;                      /* header too, so the grey trimester edge in it turns orange */
    height: 0;                   /* sized to the last row by Gantt._sizeMarkerLines */
    width: 2px;
    background: var(--accent);
    pointer-events: none;
    z-index: 0;
}

/* ── Gantt Grouped Marker Popover ───────────────────────── */
.gantt-marker-popover {
    position: fixed;
    z-index: 9999;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 4px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    min-width: 180px;
    max-width: 320px;
    display: none;
}

.gantt-marker-popover-row {
    padding: 6px 12px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 2px;
    transition: background 0.1s;
}

.gantt-marker-popover-row:hover {
    background: var(--bg-hover, rgba(255,255,255,0.06));
}

.gantt-marker-popover-row[style*="grab"]:active {
    cursor: grabbing;
}

/* ── License badge (sidebar) ─────────────────────────── */
.license-badge-wrap {
    padding: 8px 16px 4px;
    cursor: pointer;
}

.license-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: opacity 0.2s;
    width: 100%;
    justify-content: center;
    border: 1px solid transparent;
}

.license-badge:hover { opacity: 0.85; }

.license-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.license-badge--unknown {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.4);
}
.license-badge--unknown .license-badge-dot { background: rgba(255,255,255,0.3); }

.license-badge--active {
    background: rgba(34,197,94,0.15);
    border-color: rgba(34,197,94,0.4);
    color: var(--green-text);
}
.license-badge--active .license-badge-dot { background: var(--green); }

.license-badge--offline {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.4);
    color: var(--yellow-text);
}
.license-badge--offline .license-badge-dot { background: var(--yellow); }

.license-badge--inactive {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.3);
    color: var(--red-text);
}
.license-badge--inactive .license-badge-dot { background: var(--red); }

.license-badge--warning {
    background: rgba(245,158,11,0.15);
    border-color: rgba(245,158,11,0.4);
    color: var(--yellow-text);
}
.license-badge--warning .license-badge-dot { background: var(--yellow); }

.license-badge--critical {
    background: rgba(239,68,68,0.12);
    border-color: rgba(239,68,68,0.3);
    color: var(--red-text);
}
.license-badge--critical .license-badge-dot { background: var(--red); }

/* Stop app button — same shape as license badge, red palette */
.stop-app-wrap {
    padding: 4px 16px 8px;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Theme toggle (rail, above the licence pill) ───────── */
.theme-toggle-wrap {
    padding: 4px 16px 2px;
    flex-shrink: 0;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 5px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.theme-toggle-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-hover);
}

.theme-toggle-icon {
    font-size: calc(13px * var(--text-scale));
    line-height: 1;
}

.stop-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    width: 100%;
    justify-content: center;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--red-text);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.stop-app-wrap:hover .stop-app-btn {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.55);
    color: var(--red-text);
}

.stop-app-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;       /* square dot — visual cue: stop, not status */
    background: var(--red);
    flex-shrink: 0;
}

/* ── Splash screen (licensed startup) ───────────────────── */
#splash-screen {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transition: opacity 0.4s ease;
}

#splash-screen.splash-fade-out {
    opacity: 0;
    pointer-events: none;
}

.splash-brand {
    font-size: calc(13px * var(--text-scale));
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.splash-logo {
    width: 200px;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Light mode: the logo sits on a near-white page and washes out. A blurred shadow
   follows the PNG's alpha, so it hugs both the hexagon and the wordmark. Dark mode
   needs none. */
:root[data-theme="light"] .splash-logo {
    filter: drop-shadow(0 2px 6px rgba(15, 21, 36, 0.35)) drop-shadow(0 0 14px rgba(15, 21, 36, 0.18));
}

/* ══════════════════════════════════════════════════════════
   DatePicker — global calendar popup
   ══════════════════════════════════════════════════════════ */

/* Enhanced date inputs — calendar icon + pointer */
input[data-dp-ready] {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238fa8c8' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5'/%3E%3Cpath d='M2 7h12M5 1v3M11 1v3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 32px !important;
}

/* Backdrop blur when datepicker is open */
.dp-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, .25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.dp-backdrop.dp-open { display: block; }

/* Popup container */
.dp-popup {
    position: absolute;
    z-index: 9999;
    display: none;
    width: 264px;
    background: var(--bg-secondary);
    border: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    padding: 10px;
    font-size: calc(13px * var(--text-scale));
    user-select: none;
}
.dp-popup.dp-open { display: block; }

/* Header — nav arrows + month/year title */
.dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dp-title {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    text-align: center;
    font-size: calc(13px * var(--text-scale));
}
.dp-nav {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: calc(16px * var(--text-scale));
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 0;
}
.dp-nav:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Weekday headers (Mo Tu We …) */
.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    margin-bottom: 4px;
    gap: 2px;
}

/* Day grid */
.dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.dp-day {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-primary);
    font-size: calc(12.5px * var(--text-scale));
    transition: background var(--transition), color var(--transition);
}
.dp-day:not(.dp-other):hover {
    background: var(--bg-hover);
}
.dp-day.dp-other {
    color: var(--text-muted);
    opacity: .35;
    cursor: default;
}

/* Today ring */
.dp-day.dp-today-mark {
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* Selected day */
.dp-day.dp-selected {
    background: var(--accent);
    color: var(--text-inverse);
    font-weight: 600;
}
.dp-day.dp-selected.dp-today-mark {
    border-color: var(--accent);
}

/* Footer — Today / Clear buttons */
.dp-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
}
.dp-footer button {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius);
    transition: var(--transition);
}
.dp-footer button:hover {
    background: var(--accent-subtle);
}

/* ── Small inline spinner for buttons ─────────────────── */
.spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-sm 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes spin-sm {
    to { transform: rotate(360deg); }
}
/* ── AI Draft modal prompt popover ──────────────────── */
.ai-prompt-popover {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-default);
}
.ai-prompt-popover textarea {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.88em;
    resize: vertical;
}
.ai-prompt-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    border-radius: 4px;
}

/* ── Message card: clickable + hover delete ─────────── */
.msg-card { position: relative; cursor: pointer; }
.msg-card:hover { background: var(--bg-hover); }
/* ── AI History table ───────────────────────────────── */
.ai-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
}
.ai-history-table th {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-default);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85em;
    white-space: nowrap;
}
.ai-history-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.ai-history-row { cursor: default; }
.ai-history-row:hover { background: var(--bg-hover); }

/* ── AI History row popover ─────────────────────────── */
.ai-history-popover {
    position: fixed;
    z-index: 10000;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 0.85em;
    color: var(--text-secondary);
    line-height: 1.5;
    max-height: 180px;
    overflow-y: auto;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    display: none;
}

/* ── Drag & Drop ────────────────────────────────────── */
.msg-card-dragging {
    opacity: 0.4;
}
body.msg-dragging .msg-drop-zone .msg-card:not(.msg-card-dragging) {
    pointer-events: none;
}
.msg-drop-zone-active {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--accent-subtle) !important;
}

/* ── Signature editor (settings) ────────────────────── */
#settings-signature-editor {
    min-height: 80px;
}
#settings-signature-editor .ql-editor {
    min-height: 60px;
}

/* ══════════════════════════════════════════════════════════
   Gantt — Reporting Period Separators
   ══════════════════════════════════════════════════════════ */

/* RP row: left label */
.gantt-rp-label {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-default);
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-active);
    white-space: nowrap;
}

/* RP row: right grid */
.gantt-rp-grid {
    height: 32px;
    border-bottom: 1px solid var(--border-default);
    position: relative;
    display: flex;
    background: var(--bg-active);
}

/* RP cells (background grid) */
.gantt-rp-cell {
    min-width: var(--cell-w, 44px);
    width: var(--cell-w, 44px);
    height: 32px;
    border-right: 1px solid rgba(255,255,255,0.08);  /* #9: muted month lines */
    flex-shrink: 0;
}

/* RP segment labels (centred in each period range) */
/* RP segment labels (centred in each period range) */
.gantt-rp-segment {
    position: absolute;
    top: 0;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(11px * var(--text-scale));
    font-weight: 700;
    color: var(--text-on-fill);
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* RP divider handle (draggable, on the RP row) */
.gantt-rp-divider-handle {
    position: absolute;
    top: 2px;
    width: 6px;
    height: 28px;
    background: var(--accent);
    border-radius: 3px;
    cursor: ew-resize;
    z-index: 3;
    opacity: 0.85;
    transition: opacity 0.15s, transform 0.15s;
}
.gantt-rp-divider-handle:hover {
    opacity: 1;
    transform: scaleX(1.4);
}
.gantt-rp-divider-handle.gantt-rp-divider-dragging {
    opacity: 1;
    transform: scaleX(1.6);
    background: var(--accent-hover);
}

/* RP divider full-height line (spans entire Gantt right column) */
.gantt-rp-divider-line {
    position: absolute;
    top: 0;
    height: 0;                   /* sized to the last row by Gantt._sizeMarkerLines */
    width: 0;
    border-left: 2px dashed var(--accent);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;                  /* above grid lines, below WP/task bars (z-index 1) */
}

/* Planned internal check-in flag at the end of a range (RP row, bottom edge).
   Hollow = planned, filled = requested/reported. Not a diamond (deliverables/
   milestones) and not a dashed line (official RP dividers). */
.gantt-checkin-marker {
    position: absolute;
    bottom: 2px;
    z-index: 2;
    color: var(--accent);
    cursor: default;
}
.gantt-checkin-marker svg { display: block; overflow: visible; }
.gantt-checkin-marker path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.gantt-checkin-marker.gantt-checkin-filled path { fill: currentColor; }

/* Inactive state (draft / submitted) */
.gantt-rp-label.gantt-rp-inactive,
.gantt-rp-grid.gantt-rp-inactive {
    opacity: 0.4;
    pointer-events: none;
}

/* ── RP Context Menu ───────────────────────────────────── */
.gantt-rp-context-menu {
    position: fixed;
    z-index: 10000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 4px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    min-width: 200px;
}

.gantt-rp-context-item {
    padding: 8px 16px;
    font-size: calc(13px * var(--text-scale));
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.gantt-rp-context-item:hover {
    background: var(--bg-tertiary);
}
.gantt-rp-context-item.gantt-rp-context-danger {
    color: var(--danger, var(--red));
}
.gantt-rp-context-item.gantt-rp-context-danger:hover {
    background: rgba(231, 76, 60, 0.1);
}

/* ══════════════════════════════════════════════════════════
   Monitoring Page
   ══════════════════════════════════════════════════════════ */

/* Tab bar (reuses dvms pattern) */
.mon-tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    padding: 0 16px;
    flex-shrink: 0;
    margin-top: 8px;
}
.mon-tab {
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: calc(13px * var(--text-scale));
    white-space: nowrap;
    font-family: inherit;
    transition: color var(--transition);
}
.mon-tab:hover { color: var(--text-secondary); }
.mon-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.mon-tab-content { display: none; }
.mon-tab-content.active { display: block; }

/* Chart grid — responsive card layout */
.mon-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
    padding: 16px;
}

/* Chart card */
.mon-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.mon-card:hover {
    border-color: var(--border-default);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mon-card.mon-card-dragging {
    opacity: 0.5;
    border-color: var(--accent);
}
.mon-card.mon-card-drop-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

.mon-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
}
.mon-card-title {
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mon-card-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: calc(16px * var(--text-scale));
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
    transition: color var(--transition);
}
.mon-card-menu-btn:hover { color: var(--text-primary); }

.mon-card-body {
    padding: 12px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.mon-chart-wrap {
    position: relative;
    height: 280px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.mon-card-body .text-sm {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Add-chart card */
.mon-card-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    cursor: pointer;
    border-style: dashed;
    border-color: var(--border-default);
    color: var(--text-muted);
    transition: color var(--transition), border-color var(--transition);
}
.mon-card-add:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.mon-card-add-icon {
    font-size: calc(32px * var(--text-scale));
    font-weight: 300;
    line-height: 1;
    margin-bottom: 4px;
}
.mon-card-add-label {
    font-size: calc(13px * var(--text-scale));
}

/* Card context menu */
.mon-card-menu {
    z-index: 10000;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 4px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    min-width: 160px;
}
.mon-card-menu-item {
    padding: 8px 16px;
    font-size: calc(13px * var(--text-scale));
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.mon-card-menu-item:hover { background: var(--bg-tertiary); }
.mon-card-menu-item.mon-card-menu-danger { color: var(--danger, var(--red)); }
.mon-card-menu-item.mon-card-menu-danger:hover { background: rgba(231,76,60,0.1); }

/* Summary table inside a card */
.mon-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(12px * var(--text-scale));
}
.mon-summary-table th,
.mon-summary-table td {
    padding: 6px 10px;
    text-align: right;
    border-bottom: 1px solid var(--border-subtle);
}
.mon-summary-table th {
    text-align: right;
    font-weight: 600;
    color: var(--text-muted);
    font-size: calc(11px * var(--text-scale));
    text-transform: uppercase;
}
.mon-summary-table th:first-child,
.mon-summary-table td:first-child {
    text-align: left;
}

/* ── Monitoring: Data Tab ──────────────────────────────── */
.mon-data-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.mon-data-table-wrap {
    overflow-x: auto;
    padding: 0 16px 16px;
}

.mon-data-table td {
    cursor: default;
}

.mon-data-editable {
    cursor: pointer;
    position: relative;
}
.mon-data-editable:hover {
    background: rgba(var(--accent-rgb, 33,150,243), 0.06);
}
.mon-data-editable:hover::after {
    content: "✎";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(10px * var(--text-scale));
    color: var(--text-muted);
}

/* ── Monitoring: Import results ────────────────────────── */
.mon-import-conflict {
    background: rgba(231,76,60,0.08);
    border: 1px solid rgba(231,76,60,0.25);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: calc(13px * var(--text-scale));
}
.mon-import-conflict p { margin: 0 0 8px; }

.mon-import-success {
    background: rgba(46,204,113,0.08);
    border: 1px solid rgba(46,204,113,0.25);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: calc(13px * var(--text-scale));
}
.mon-import-success p { margin: 0 0 4px; }

/* ── Auth pages ──────────────────────────────────────── */
.auth-wrapper {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    padding: 20px;
}
.auth-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.auth-card h1 { font-size: 1.5rem; margin: 0 0 8px 0; color: var(--text-primary); }
.auth-card .subtitle { color: var(--text-muted); font-size: 0.875rem; margin-bottom: 28px; }
.auth-card .form-group { margin-bottom: 16px; }
.auth-card label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.auth-card input:focus { outline: none; border-color: var(--accent); }
.auth-card .btn-primary {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
}
.auth-card .btn-primary:hover { opacity: 0.9; }
.auth-card .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-card .auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.auth-card .auth-footer a { color: var(--accent); text-decoration: none; }
.auth-card .auth-footer a:hover { text-decoration: underline; }
.auth-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--red-text);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.8125rem;
    margin-bottom: 16px;
    display: none;
}
.auth-error.visible { display: block; }
.field-hint {
    font-weight: normal;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════
   Distribution Groups — Messages Tab + Matrix UI
   ══════════════════════════════════════════════════════════ */

/* ── Messages tab bar (reuses monitoring pattern) ─────── */
.msg-tab-bar {
    display: flex;
    align-items: center;
    min-height: 46px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    padding: 0 16px;
    flex-shrink: 0;
    margin-top: 8px;
}
.msg-tab {
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: calc(13px * var(--text-scale));
    white-space: nowrap;
    font-family: inherit;
    transition: color var(--transition);
}
.msg-tab:hover { color: var(--text-secondary); }
.msg-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.msg-tab-actions { margin-left: auto; flex-wrap: nowrap; padding: 4px 0; }
.dg-stats-row { padding: 8px 0 0; min-height: 1.4em; }
.msg-tab-content { display: none; }
.msg-tab-content.active { display: block; }

/* ── Groups toolbar ──────────────────────────────────── */
.dg-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

/* ── Matrix table ────────────────────────────────────── */
.dg-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-top: 4px;
}

.dg-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(13px * var(--text-scale));
}

.dg-matrix thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
}

.dg-matrix th,
.dg-matrix td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 0;
}

.dg-matrix-corner {
    width: 36px;
    min-width: 36px;
    text-align: center;
    padding: 6px 4px;
}

.dg-matrix-name-col {
    min-width: 200px;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: calc(11.5px * var(--text-scale));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.dg-matrix-group-col {
    min-width: 90px;
    max-width: 140px;
    text-align: center;
    padding: 6px 4px;
}

/* ── Group header badge ──────────────────────────────── */
.dg-group-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.dg-group-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--text-on-fill);
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-group-count {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
}

/* Count + Google marker share one row. `.dg-group-header` is a flex COLUMN, so
   without this wrapper the marker would add a line to every synced group's
   header and make the whole matrix taller. */
.dg-group-meta {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Google Groups sync marker (google-groups-ui) ─────
   Status only, never a button: it says which group has a problem, the ⋮ menu
   fixes it. Rendered only when the feature flag is on AND that group opted in,
   so an install without a Workspace account never sees one. */
.dg-google-mark {
    font-size: calc(11px * var(--text-scale));
    line-height: 1;
    color: var(--text-muted);
    opacity: 0.65;
    cursor: help;
}

.dg-google-mark.is-pending {
    opacity: 0.35;
}

.dg-google-mark.is-error {
    color: var(--danger);
    opacity: 1;
    font-size: calc(12px * var(--text-scale));
}

/* ── Google Groups block in the group settings modal ──
   Set off from the send-settings fields above it by a rule, because it governs
   a different system: everything above changes how PROCONTROL sends, this
   changes what exists in Google Workspace. */
.dg-google-block {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.dg-google-title {
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.dg-google-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.9em;
}

.dg-google-label {
    flex: 0 0 68px;
    color: var(--text-muted);
}

.dg-google-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Persisted state, not a transient toast: it stays visible for as long as the
   last push is still failing. */
.dg-google-error {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--red-border);
    border-radius: var(--radius-sm);
    background: var(--red-bg);
    color: var(--red-text);
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

.dg-google-notes {
    margin: 12px 0 0;
    padding-left: 16px;
}

.dg-google-notes li {
    margin-bottom: 4px;
}

.dg-group-header .btn-icon-xs {
    background: none;
    border: none;
    cursor: pointer;
    font-size: calc(14px * var(--text-scale));
    color: var(--text-muted);
    padding: 0 2px;
    line-height: 1;
}
.dg-group-header .btn-icon-xs:hover {
    color: var(--text-primary);
}

/* ── Partner row ─────────────────────────────────────── */
.dg-partner-row {
    background: var(--accent-subtle);
}

.dg-partner-label {
    padding: 6px 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
}

/* ── Contact row ─────────────────────────────────────── */
.dg-contact-label {
    padding: 5px 12px 5px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
}

.dg-contact-name {
    font-weight: 500;
    white-space: nowrap;
}

.dg-contact-email {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.dg-contact-no-email {
    color: var(--yellow);
    font-style: italic;
}

.dg-primary-badge {
    font-size: calc(10px * var(--text-scale));
    padding: 1px 5px;
    border-radius: 8px;
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Matrix cell (the checkbox intersection) ─────────── */
.dg-matrix-cell {
    text-align: center;
    cursor: pointer;
    padding: 4px;
    transition: background var(--transition);
    user-select: none;
}

.dg-matrix-cell:hover {
    background: var(--bg-hover);
}

.dg-cell-on {
    background: rgba(99, 102, 241, 0.08);
}
.dg-cell-on:hover {
    background: rgba(99, 102, 241, 0.15);
}

.dg-cell-mark {
    font-size: calc(14px * var(--text-scale));
    font-weight: 700;
    color: var(--accent);
}

/* ── Batch action bar ────────────────────────────────── */
.dg-batch-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    margin-top: 10px;
    font-size: calc(13px * var(--text-scale));
}

/* ── Context menu for group column ───────────────────── */
.dg-context-menu {
    position: fixed;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    min-width: 180px;
    padding: 4px 0;
}

.dg-menu-item {
    padding: 7px 16px;
    font-size: calc(13px * var(--text-scale));
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}
.dg-menu-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dg-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 8px;
}

.dg-menu-danger { color: var(--red); }
.dg-menu-danger:hover { background: var(--red-bg); }

/* ── Send mode toggle in compose modal ───────────────── */
.dg-send-toggle {
    display: inline-flex;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    overflow: hidden;
}

.dg-toggle-btn {
    padding: 5px 14px;
    font-size: calc(12px * var(--text-scale));
    font-weight: 500;
    background: var(--bg-secondary);
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition);
    font-family: inherit;
}

.dg-toggle-btn.active {
    background: var(--accent);
    color: var(--text-on-accent);
}

.dg-toggle-btn:not(.active):hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ── Group preview in compose modal ──────────────────── */
#msg-compose-group-preview {
    margin: 8px 0;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    max-height: 150px;
    overflow-y: auto;
    font-size: calc(12px * var(--text-scale));
}

.dg-preview-header {
    margin-bottom: 6px;
    font-size: calc(12px * var(--text-scale));
}

.dg-preview-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dg-preview-recipient {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 2px 0;
}

/* ── Distribution Groups — Phase 3 additions ─────────── */

/* Column drag-and-drop */
.dg-col-dragging {
    opacity: 0.4;
}
.dg-col-drop-target {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

/* Sent history section */
.dg-sent-list {
    padding: 8px 0;
}

.dg-sent-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background var(--transition);
    font-size: calc(13px * var(--text-scale));
}

.dg-sent-row:hover {
    background: var(--bg-hover);
}

.dg-sent-status {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.dg-sent-to {
    min-width: 140px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.dg-sent-subject {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
}

.dg-sent-date {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   Distribution Groups — Phase 4 additions
   ══════════════════════════════════════════════════════════ */

/* ── Search bar ──────────────────────────────────────── */
.dg-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.dg-search-bar input {
    max-width: 400px;
    font-size: calc(13px * var(--text-scale));
}

/* ── Column filter bar ──────────────────────────────── */
.dg-filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

/* ── No-email dimming ────────────────────────────────── */
.dg-no-email-row {
    opacity: 0.55;
}
.dg-cell-dimmed {
    cursor: not-allowed;
    background: repeating-linear-gradient(
        45deg,
        transparent, transparent 4px,
        var(--border-subtle) 4px, var(--border-subtle) 5px
    );
}
.dg-cell-dimmed:hover {
    background: repeating-linear-gradient(
        45deg,
        transparent, transparent 4px,
        var(--border-subtle) 4px, var(--border-subtle) 5px
    );
}

/* ── Contact role badge ──────────────────────────────── */
.dg-contact-role {
    font-size: calc(11px * var(--text-scale));
    padding: 1px 5px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    white-space: nowrap;
}

/* ── History panel ───────────────────────────────────── */
.dg-history-panel {
    margin-top: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    overflow: hidden;
}

.dg-history-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: calc(13px * var(--text-scale));
}

.dg-history-list {
    max-height: 300px;
    overflow-y: auto;
}

.dg-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: calc(13px * var(--text-scale));
    transition: background var(--transition);
}
.dg-history-row:hover {
    background: var(--bg-hover);
}

.dg-history-subject {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   Distribution Groups — Phase 5 additions
   ══════════════════════════════════════════════════════════ */

/* ── Group badges on partner contact cards ───────────── */
.contact-group-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.dg-contact-group-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    color: var(--text-on-fill);
    font-size: calc(10px * var(--text-scale));
    font-weight: 600;
    white-space: nowrap;
}

/* ── Matrix cell focus (keyboard nav) ────────────────── */
.dg-matrix-cell:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    z-index: 1;
    position: relative;
}
.dg-matrix-cell:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ── Admin Info tab & modal ──────────────────────────────────── */

.ai-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    flex-wrap: wrap;
}
.ai-filename {
    font-weight: 600;
    color: var(--text-primary);
}

/* Modal sections */
.ai-section {
    margin-bottom: 20px;
}
.ai-section-title {
    font-size: calc(13px * var(--text-scale));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}
.ai-sub-header {
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    color: var(--text-secondary);
    margin: 10px 0 4px;
}

/* Clickable field row */
.ai-field {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.ai-field:hover {
    background: var(--bg-tertiary);
}
.ai-label {
    flex: 0 0 160px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    text-align: right;
}
.ai-value {
    font-size: calc(13px * var(--text-scale));
    color: var(--text-primary);
    word-break: break-word;
}

.ai-field:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.ai-field.ai-saving { opacity: 0.6; }
.ai-field.ai-saved { background: rgba(34, 197, 94, 0.12); }
.ai-field.ai-saved .ai-value::after {
    content: " ✓ Saved";
    color: var(--green);
    font-size: calc(11px * var(--text-scale));
}

/* Edited-by-hand marker (title on the row explains it is not the imported value) */
.ai-field.ai-edited .ai-value {
    font-style: italic;
}
.ai-field.ai-edited .ai-value::before {
    content: "●";
    color: var(--yellow);
    font-size: calc(8px * var(--text-scale));
    margin-right: 5px;
    vertical-align: middle;
}

/* In-place editor */
.ai-field .ai-value { flex: 1 1 auto; min-width: 0; }
.ai-editor {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: calc(13px * var(--text-scale));
    padding: 2px 6px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
}
textarea.ai-editor { resize: vertical; }

.ai-hint {
    margin: 0;
    padding: 8px 24px 10px;
    flex-shrink: 0;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
}
.ai-limit-banner {
    margin-bottom: 12px;
    padding: 8px 12px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-primary);
    background: rgba(247, 201, 72, 0.15);
    border: 1px solid var(--yellow);
    border-radius: var(--radius-sm);
}

/* Add to Contacts button in Admin Info modal: look comes from .btn .btn-primary .btn-sm */
.btn-add-contact {
    margin-left: 8px;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════
   FEEDBACK CARDS — Kanban Board
   ══════════════════════════════════════════════════════════ */

/* ── Kanban board ─────────────────────────────────────── */
.fc-kanban-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
    min-height: 300px;
}

.fc-column {
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
}

.fc-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    min-height: 57px; /* 36px icon button + padding + border: every column header is as tall as the one with the + */
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
}

.fc-column-title {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Card list (drop zone) ───────────────────────────── */
.fc-card-list {
    flex: 1;
    padding: 8px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 0.15s;
}

.fc-card-list.fc-drop-active {
    background: rgba(247, 147, 30, 0.06);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

/* ── Card ─────────────────────────────────────────────── */
.fc-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 10px 12px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.fc-card:hover {
    border-color: var(--border-default);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.fc-card.fc-card-dragging {
    opacity: 0.4;
    border-color: var(--accent);
}

.fc-card.fc-card-overdue {
    border-left: 3px solid var(--red);
}

.fc-card.fc-card-complete {
    border-left: 3px solid var(--green);
}

.fc-card-title {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.3;
}

/* ── Progress bar ─────────────────────────────────────── */
.fc-card-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.fc-card-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--border-subtle);
    border-radius: 2px;
    overflow: hidden;
}

.fc-card-progress-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.fc-card-progress-fill.fc-progress-done {
    background: var(--green);
}

.fc-card-progress-label {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
    min-width: 32px;
    text-align: right;
}

/* ── Standalone to-do state chip (replaces the n/total meter) ── */
.fc-card-state {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
}

.fc-card-state-mark {
    font-size: calc(10px * var(--text-scale));
    line-height: 1;
}

.fc-card-state-done {
    color: var(--green);
}

/* ── Card footer (deadline + quick actions) ──────────── */
.fc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.fc-card-deadline {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
}

.fc-card-overdue .fc-card-deadline {
    color: var(--red);
    font-weight: 600;
}

.fc-card-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}

.fc-card:hover .fc-card-actions,
.fc-card:focus-within .fc-card-actions {
    opacity: 1;
}
@media (hover: none) { .fc-card-actions { opacity: 1; } }

/* ── Quick action buttons ─────────────────────────────── */
.fc-quick-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: calc(13px * var(--text-scale));
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
    transition: var(--transition);
}

.fc-quick-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.fc-quick-btn.fc-btn-danger:hover {
    color: var(--red);
    background: var(--red-bg);
}

/* ── Add card button ──────────────────────────────────── */
.fc-add-btn {
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: var(--text-on-accent);
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.fc-add-btn:hover {
    opacity: 0.85;
}

/* ── Archive section ──────────────────────────────────── */
.fc-archive-section {
    padding: 0 16px 16px;
}

.fc-archive-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: calc(12px * var(--text-scale));
    cursor: pointer;
    padding: 8px 0;
    transition: var(--transition);
}

.fc-archive-toggle::before {
    content: "▸ ";
}

.fc-archive-toggle.fc-archive-open::before {
    content: "▾ ";
}

.fc-archive-toggle:hover {
    color: var(--text-secondary);
}

.fc-archive-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.fc-archive-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    font-size: calc(13px * var(--text-scale));
}

.fc-archive-row-title {
    flex: 1;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-archive-row-meta {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
}

.fc-archive-row-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.fc-archive-row:hover .fc-archive-row-actions {
    opacity: 1;
}

/* ── Detail modal ─────────────────────────────────────── */
.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fc-detail-meta {
    margin-bottom: 16px;
}

.fc-detail-desc {
    font-size: calc(13px * var(--text-scale));
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
}

.fc-detail-meta-line {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
}

.fc-detail-note {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    margin-top: 12px;
}

/* ── Response table ───────────────────────────────────── */
.fc-response-table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(13px * var(--text-scale));
}

.fc-response-table thead th {
    text-align: left;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-default);
}

.fc-response-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.fc-response-table tbody tr:last-child td {
    border-bottom: none;
}

.fc-rt-partner {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.fc-rt-check {
    width: 70px;
    text-align: center;
}

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

.fc-rt-comment {
    min-width: 160px;
}

.fc-rt-comment input[type="text"] {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: calc(12px * var(--text-scale));
    padding: 4px 8px;
    font-family: inherit;
}

.fc-rt-comment input[type="text"]:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.fc-rt-date {
    width: 140px;
}

/* DatePicker turns type="date" into type="text" at runtime, so the type
   selector never matched and the browser's default box showed through. */
.fc-rt-date .fc-resp-date {
    width: 100%;
    background-color: var(--bg-primary);   /* not the shorthand: keeps the calendar icon */
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: calc(12px * var(--text-scale));
    font-family: inherit;
    box-sizing: border-box;
}

.fc-rt-date .fc-resp-date:focus {
    border-color: var(--accent-blue);
    outline: none;
}

/* ── Responsive: stack on narrow viewports ────────────── */
@media (max-width: 900px) {
    .fc-kanban-board {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════
   Meeting Planner
   ══════════════════════════════════════════════════════════ */

/* ── Info bar ──────────────────────────────────────────── */
.mtg-info-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 16px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Separator only between visible spans */
.mtg-info-bar span:not(.hidden) + span:not(.hidden)::before {
    content: "|";
    margin-right: 16px;
    color: var(--border-default);
}

/* ── Agenda table wrapper ──────────────────────────────── */
.mtg-agenda-wrap {
    position: relative;
    min-height: 120px;
}

.mtg-agenda-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.mtg-agenda-table thead th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border-default);
    text-align: left;
    user-select: none;
}

/* Special items (breaks, intro) — accent left border + italic */
.mtg-row-special {
    border-left: 3px solid var(--accent);
}

.mtg-row-special .mtg-col-desc span,
.mtg-row-special .mtg-col-lead span,
.mtg-row-special .mtg-col-speakers span {
    color: var(--text-secondary);
    font-style: italic;
}

/* Day break: a full-width divider row */
.mtg-row-daybreak {
    border-left: 3px solid var(--accent);
    background: var(--bg-secondary);
}
.mtg-daybreak-cell { padding: 8px 10px; }
.mtg-daybreak-time { margin-left: 10px; color: var(--text-muted); font-size: 0.9em; }

/* Speakers column */
.mtg-col-speakers { width: 150px; }

/* Speakers "+N" overflow badge */
.mtg-spk-more {
    display: inline-block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: 3px;
    padding: 0 4px;
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Speakers multi-select (item modal) ────────────────── */
.mtg-speakers-wrap {
    position: relative;
}

.mtg-speaker-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.mtg-speaker-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-primary);
}

.mtg-speaker-tag .mtg-tag-x {
    cursor: pointer;
    font-weight: bold;
    color: var(--text-muted);
    margin-left: 2px;
}
.mtg-speaker-tag .mtg-tag-x:hover { color: var(--red); }

.mtg-speaker-dropdown {
    position: fixed;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-shadow: var(--shadow);
    z-index: 10100;
    min-width: 250px;
}

.mtg-speaker-dropdown .mtg-spk-group-label {
    padding: 6px 10px 2px;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mtg-speaker-dropdown .mtg-spk-option {
    padding: 5px 10px 5px 18px;
    font-size: calc(13px * var(--text-scale));
    cursor: pointer;
    color: var(--text-primary);
}
.mtg-speaker-dropdown .mtg-spk-option:hover {
    background: var(--bg-tertiary);
}
.mtg-speaker-dropdown .mtg-spk-option.selected {
    color: var(--accent);
    font-weight: 600;
}

/* ── Quick-insert special item buttons ─────────────────── */
.mtg-special-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.mtg-special-btn {
    padding: 3px 10px;
    font-size: calc(12px * var(--text-scale));
    border: 1px solid var(--border-default);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.mtg-special-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.mtg-special-btn.active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-on-accent);
}

/* Column widths */
.mtg-col-drag     { width: 32px; text-align: center; }
.mtg-col-time     { width: 70px; text-align: center; }
.mtg-col-time.mtg-time-explicit { font-weight: 700; }
.mtg-col-duration { width: 80px; text-align: center; }
.mtg-col-desc     { /* flex-grow */ }
.mtg-col-lead     { width: 120px; }

/* ── Data rows ─────────────────────────────────────────── */
.mtg-row {
    border-bottom: 1px solid var(--border-default);
    transition: background 0.15s;
}

.mtg-row td {
    padding: 7px 10px;
    vertical-align: middle;
}

.mtg-row:hover {
    background: var(--bg-tertiary);
}

/* Custom items (breaks, intro) — accent left border + subtle style */
.mtg-row-custom {
    border-left: 3px solid var(--accent);
}

.mtg-row-custom .mtg-col-desc span,
.mtg-row-custom .mtg-col-lead span {
    color: var(--text-secondary);
    font-style: italic;
}

/* ── Drag handle (CSS three-line grip) ─────────────────── */
.mtg-drag-handle {
    cursor: grab;
    user-select: none;
}

.mtg-grip {
    display: inline-block;
    width: 10px;
    height: 14px;
    background-image: radial-gradient(circle, var(--text-muted) 1px, transparent 1px);
    background-size: 5px 5px;
    background-position: 0 0, 2.5px 2.5px;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.mtg-row:hover .mtg-grip {
    opacity: 1;
}

.mtg-row.mtg-dragging {
    opacity: 0.35;
}

.mtg-row.mtg-drag-over {
    border-top: 2px solid var(--accent-blue, var(--accent));
}

.mtg-row.mtg-drag-over-after {
    border-bottom: 2px solid var(--accent-blue, var(--accent));
}

/* ── Inline editing ────────────────────────────────────── */
.mtg-editable {
    cursor: text;
    border-radius: 3px;
    padding: 1px 3px;
    transition: background 0.1s;
}

.mtg-editable:hover {
    background: var(--bg-secondary);
    outline: 1px dashed var(--border-default);
}

.mtg-inline-input {
    font: inherit;
    padding: 2px 4px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

/* ── Empty state ───────────────────────────────────────── */
.mtg-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-muted);
}

.mtg-empty p {
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Table hint (below table) ──────────────────────────── */
.mtg-table-hint {
    text-align: center;
    padding: 6px 0 2px;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════
   User Management (Admin Settings Tab)
   ══════════════════════════════════════════════════════════ */

.um-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.um-table th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.um-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.05));
    vertical-align: middle;
}
.um-table tr:last-child td { border-bottom: none; }
/* Role column centred; the row actions share one centre line whatever their size (28 px round buttons and the 30 px trash). */
.um-table .um-center { text-align: center; }
.um-table .um-actions-cell { text-align: right; white-space: nowrap; }
.um-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 30px; }
.um-actions .btn-icon, .um-actions .btn-icon-action { margin: 0; vertical-align: middle; }

.um-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.um-status-active  { background: rgba(34,197,94,0.15); color: var(--green-text); }
.um-status-pending { background: rgba(250,204,21,0.15); color: var(--yellow-text); }
.um-status-disabled { background: rgba(239,68,68,0.1); color: var(--red-text); }

/* Invite form */
.um-invite-form {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 16px;
}

/* Invite request cards */
.um-request-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.05));
}
.um-request-card:last-child { border-bottom: none; }
.um-request-info { flex: 1; min-width: 0; }
.um-request-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Extra small button variant */
.btn-xs {
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════
   Project Modal — Tabs & Collaboration
   ══════════════════════════════════════════════════════════ */

.pm-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin: -8px 0 16px 0;
}
.pm-tab {
    padding: 8px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.pm-tab:hover { color: var(--text-primary); }
.pm-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.pm-tab-content { display: none; }
.pm-tab-content.active { display: block; }

.pm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-bottom: 8px;
}
.pm-table th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pm-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.05));
    vertical-align: middle;
}
.pm-table tr:last-child td { border-bottom: none; }

.pm-role-sel {
    font-size: 0.8125rem;
    padding: 3px 6px;
    min-width: 110px;
}

.pm-add-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.pm-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 8px 0;
}

/* ── Partners table — column toggle ─────────────────── */
#partners-table th[data-col] { cursor: pointer; user-select: none; }
#partners-table th[data-col="actions"] { cursor: default; }
#partners-table th .col-toggle-icon { display: none; font-size: calc(11px * var(--text-scale)); color: var(--accent, var(--accent)); }
#partners-table th.col-collapsed,
#partners-table td.col-collapsed { width: 18px !important; min-width: 18px !important; max-width: 18px !important; padding: 0 !important; overflow: hidden !important; }
#partners-table th.col-collapsed { text-align: center; padding: 2px 1px !important; }
#partners-table th.col-collapsed .col-label { display: none; }
#partners-table th.col-collapsed .col-toggle-icon { display: inline; }
#partners-table td.col-collapsed { opacity: 0; }
/* A collapsed cell is 18px wide: without nowrap the text wraps one character
   per line and the row grows to the length of the hidden value. */
#partners-table td.col-collapsed { white-space: nowrap; line-height: 0; font-size: 0; }

/* ── Placeholder partner row ────────────────────────── */
tr.row-placeholder td { font-style: italic; opacity: 0.8; }
.badge-placeholder { background: var(--grey); color: var(--text-on-fill); font-size: calc(10px * var(--text-scale)); padding: 1px 4px; border-radius: 3px; margin-right: 4px; font-style: normal; }

/* ── Proposal workspace ───────────────────────────────── */
.proposal-pane { display:none; }
.proposal-pane.active { display:block; }
.proposal-toolbar-actions { margin-left:auto; display:flex; align-items:center; flex-wrap:nowrap; gap:8px; }
.proposal-toolbar { margin-bottom:12px; display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; }
.ker-key-filter input[type="checkbox"] { margin:0; accent-color:var(--accent); }
.ker-key-filter { display:flex; align-items:center; gap:6px; line-height:1; font-size:calc(13px * var(--text-scale)); color:var(--text-secondary); cursor:pointer; }
.ker-key-cell { text-align:center; color:var(--accent); font-size:calc(15px * var(--text-scale)); }
.ker-score-sum-readout {
    padding: 8px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-align: center;
    font-weight: 600;
}
.ker-is-key-label { display:flex; align-items:center; gap:8px; cursor:pointer; }

/* ── Execution ▸ Exploitation: KER pilot board ─────────── */
.exploit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
    padding: 16px;
}
.exploit-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px;
}
.exploit-card-header {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: start;
    gap: 8px;
    height: 66px;            /* three title lines; keeps every card's sections level */
    margin-bottom: 8px;
}
/* Edit and pilot-status share one circle size so they line up. */
.exploit-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--badge-color, var(--border-default));
    color: var(--badge-color, var(--text-secondary));
    background: transparent;
    padding: 0;
    flex-shrink: 0;
}
.exploit-edit-btn { cursor: pointer; transition: var(--transition); }
.exploit-edit-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.exploit-status-badge { cursor: help; }
.exploit-card-number { font-weight: 700; color: var(--accent); font-size: calc(13px * var(--text-scale)); line-height: 22px; }
.exploit-card-title {
    font-weight: 600; font-size: calc(15px * var(--text-scale)); line-height: 22px;
    min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.exploit-key-badge {
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-subtle);
    border-radius: 10px;
    padding: 2px 8px;
}
.exploit-card-meta {
    display: flex;
    gap: 16px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    align-items: center;
    height: 22px;
    margin-bottom: 8px;
}
.exploit-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    align-content: flex-start;
    min-height: 56px;        /* two pill rows, so the sections below start level */
    margin-bottom: 8px;
}
.exploit-card-facts span {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 2px 9px;
}
.exploit-card-facts-empty { color: var(--text-muted); font-style: italic; }
.exploit-card-summary { font-size: calc(13px * var(--text-scale)); color: var(--text-primary); }
.exploit-card-desc { margin-bottom: 6px; }
.exploit-card-public-desc { margin-bottom: 6px; color: var(--text-secondary); font-style: italic; }
.exploit-card-line { margin-bottom: 4px; }
/* Collapsible sections: the closed summary bar is a fixed height, so the
   Details and Actions bars sit at the same level on every card. */
.exploit-fold { border-top: 1px dashed var(--border-subtle); }
.exploit-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    cursor: pointer;
    list-style: none;
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.exploit-fold > summary::-webkit-details-marker { display: none; }
.exploit-fold > summary > span::before {
    content: "▸";
    display: inline-block;
    width: 1.2em;
    transition: transform 0.15s ease;
}
.exploit-fold[open] > summary > span::before { transform: rotate(90deg); }
.exploit-fold > summary:hover { color: var(--text-primary); }
.exploit-fold-count { font-weight: 400; }
.exploit-fold[open] > summary { margin-bottom: 4px; }
/* ── Pilot tracking block (status + review dates) ────────── */
.exploit-card-pilot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border-default);
}
.exploit-pilot-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
}
.exploit-pilot-field > span {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Only the states that need attention get colour — "on track" and
   "not started" are the unremarkable cases and stay neutral. */
.exploit-pilot-at_risk { border-color: var(--yellow); }
.exploit-pilot-blocked { border-color: var(--red); }
.exploit-pilot-exploited { border-color: var(--green); }
.exploit-pilot-suggest {
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-blue);
    font-size: calc(11px * var(--text-scale));
    text-align: left;
    cursor: pointer;
}
.exploit-pilot-suggest:hover { text-decoration: underline; }

.exploit-actions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: calc(12px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.exploit-action-empty { padding: 4px 0; }
/* Two lines: the title takes the whole first line, the owner/date/month/status
   controls share the second. One line was too tight in a ~420px KER card and
   clipped every field ("Draft invention c…", "HOLO-…", "25.09.202"). */
.exploit-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    border-radius: var(--radius);
    border-left: 3px solid transparent;
    margin-bottom: 4px;
}
.exploit-action-row.exploit-action-overdue {
    border-left-color: var(--red);
    background: var(--red-bg);
}
.exploit-action-row .form-control {
    padding: 5px 8px;
    font-size: calc(12px * var(--text-scale));
}
.exploit-action-title { flex: 1 1 100%; }
.exploit-action-owner { flex: 1 1 7em; min-width: 7em; }
.exploit-action-date { flex: 1 1 9.5em; min-width: 9.5em; }
.exploit-action-month {
    flex: 0 0 auto;
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
    min-width: 22px;
    text-align: center;
}
.exploit-action-status { flex: 1 1 7.5em; min-width: 7.5em; }
.exploit-action-overdue-badge {
    flex: 0 0 auto;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    border-radius: 10px;
    padding: 1px 7px;
    white-space: nowrap;
}

/* ── KPI dashboard pin (kpi-pin-dashboard) ───────────────── */
/* Unpinned stays deliberately low-contrast: most KPIs are not pinned, and a
   column of bright stars would read as a warning rather than a control. */
.kpi-pin {
    color: var(--text-secondary);
    opacity: 0.5;
    transition: var(--transition);
}
.kpi-pin:hover {
    opacity: 1;
    color: var(--text-primary);
}
.kpi-pin.kpi-pin-on {
    color: var(--accent, var(--yellow));
    opacity: 1;
}

/* ── KPI Target vs Achieved progress readout (impact-a4) ─── */
.kpi-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kpi-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--border-subtle);
    border-radius: 2px;
    overflow: hidden;
}
.kpi-progress-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.kpi-progress-fill.kpi-progress-done { background: var(--green); }
.kpi-progress-label {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
    white-space: nowrap;
}

.risk-pill { display:inline-block; padding:2px 9px; border-radius:10px; font-size:calc(12px * var(--text-scale)); font-weight:600; }
.risk-pill.lvl-low    { background:rgba(34,197,94,.15); color:var(--green); }
.risk-pill.lvl-medium { background:rgba(234,179,8,.15); color:var(--yellow-text); }
.risk-pill.lvl-high   { background:rgba(239,68,68,.15); color:var(--red); }

/* ── Proposal · narrative editor ──────────────────────── */
.narr-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.narr-total { font-weight:600; color:var(--text-primary); }
.narr-total.over { color:var(--red); }
.narr-save { font-size:calc(12px * var(--text-scale)); color:var(--text-muted); }
.narr-layout { display:flex; gap:16px; align-items:flex-start; }
.narr-sections { width:240px; flex:0 0 240px; display:flex; flex-direction:column; gap:2px; }
.narr-section-item {
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    text-align:left; background:transparent; border:1px solid transparent; border-radius:6px;
    padding:8px 10px; cursor:pointer; color:var(--text-muted); font-size:calc(13px * var(--text-scale));
}
.narr-section-item:hover { background:var(--bg-secondary); color:var(--text-primary); }
.narr-section-item.active { background:var(--bg-secondary); color:var(--text-primary); border-color:var(--accent); }
.narr-section-pages { font-size:calc(11px * var(--text-scale)); opacity:.7; white-space:nowrap; }
.narr-section-pages.over, .narr-pages.over { color:var(--red); opacity:1; }
.narr-editor-wrap { flex:1; min-width:0; }
.narr-editor-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.narr-active-label { font-weight:600; color:var(--text-primary); }
.narr-pages { font-size:calc(12px * var(--text-scale)); color:var(--text-muted); }
.narr-head-right { display:flex; align-items:center; gap:10px; }
.narr-overview { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 20px; margin-bottom:14px; }
@media (max-width: 900px) { .narr-overview { grid-template-columns:minmax(0, 1fr); } }
.narr-overview-col { display:flex; flex-direction:column; gap:10px; min-width:0; }
.narr-overview-col :where(input[type=text], textarea) { width:100%; box-sizing:border-box; }
.narr-radio-row { display:flex; gap:16px; flex-wrap:wrap; }
.narr-radio-row label { display:inline-flex; align-items:center; gap:6px; font-weight:400; }
/* Space reserved so toggling Yes/No never moves the layout below. */
.narr-prev-refs { min-height:132px; margin-top:6px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.narr-prev-refs[hidden] { display:flex; visibility:hidden; }
.narr-prev-refs .field-row { width:100%; }
.narr-prev-refs input:invalid { border-color:var(--red); }
.field-counter { font-size:calc(11px * var(--text-scale)); color:var(--text-muted); margin-top:2px; min-height:1.3em; }
.field-counter.over { color:var(--red); }
.narr-group-title { font-size:calc(11px * var(--text-scale)); text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:10px 0 4px; padding:0 4px; }
.narr-group-title:first-child { margin-top:0; }
.narr-empty-note { font-size:calc(12px * var(--text-scale)); color:var(--text-muted); padding:4px; }
.narr-right { flex:1; min-width:0; }
.narr-wp-wrap { display:flex; flex-direction:column; gap:10px; }
.narr-wp-wrap textarea { resize:vertical; }
/* Per-task blocks: the WP colour is the border (3px task, 1px subtask) */
.nt-blocks { display:flex; flex-direction:column; gap:10px; }
.nt-subs { display:flex; flex-direction:column; gap:8px; margin:8px 0 0 24px; }
.nt-subs:empty { display:none; }
.nt-block { border:3px solid var(--nt-colour, var(--accent)); border-radius:6px; padding:8px 10px; background:var(--bg-secondary); }
.nt-level-1 { border-width:1px; }
.nt-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.nt-handle { cursor:grab; color:var(--text-secondary); user-select:none; }
.nt-label { min-width:48px; }
.nt-title { flex:1; min-width:0; }
.nt-facts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; min-height:28px; }
.nt-start, .nt-dur { width:56px; }
/* Rich editors (Objectives, task text): reserve the toolbar + editor height so the
   lazily created Quill never shifts the layout. */
.nt-rich { min-height:153px; }
.nt-rich-objectives { min-height:193px; }
.nt-rich .ql-toolbar { padding:4px 8px; }
.proposal-pane .nt-rich .ql-editor { min-height:110px; max-height:320px; }
.proposal-pane .nt-rich-objectives .ql-editor { min-height:150px; }
.nt-dragging { opacity:.5; }
.btn-sym {
    background: var(--bg-tertiary); color: var(--text-secondary);
    border: 1px solid var(--border-default); border-radius: 6px;
    min-width: 30px; height: 26px; cursor: pointer; font-size: calc(14px * var(--text-scale)); line-height: 1;
}
.btn-sym:hover { color: var(--accent); border-color: var(--accent); }
.sym-palette {
    background: var(--bg-tertiary); border: 1px solid var(--border-default);
    border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
}
.sym-group-title { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); margin: 6px 0 4px; }
.sym-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.sym-btn {
    min-width: 30px; height: 30px; padding: 0 6px;
    background: var(--bg-secondary); color: var(--text-primary);
    border: 1px solid var(--border-default); border-radius: 6px; cursor: pointer; font-size: calc(16px * var(--text-scale));
}
.sym-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Editor inherits the global dark Quill theme; bound its height and scroll inside. */
.proposal-pane .ql-editor {
    min-height: 240px;
    max-height: calc(100vh - 320px);
    overflow-y: auto;
}
.ql-toolbar button.ql-symbol::after { content: "Ω"; font-size: calc(15px * var(--text-scale)); font-weight: 600; color: var(--text-secondary); }
.ql-toolbar button.ql-symbol:hover::after { color: var(--accent); }
/* Cross-reference chip in the Part B editor (proposal_xref.js). The label is
   display-only; a missing target shows as a dashed red "broken" chip. */
.ql-editor .xref {
    display: inline-block;
    padding: 0 6px;
    margin: 0 1px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--accent-subtle);
    color: var(--accent-text);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
}
.ql-editor .xref.xref-broken {
    border-style: dashed;
    border-color: var(--red);
    background: var(--red-bg);
    color: var(--red);
}
/* ── Recycle bin (soft-deleted partners, dwpc-p7c) ─────────────────────── */
.recycle-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    margin-bottom: 6px;
}
.recycle-item:last-child { margin-bottom: 0; }
.recycle-item-main { min-width: 0; }
.recycle-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Recipient pill fields + contact picker (dwpc-p10a) ────────────────── */
.recip-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 4px 6px;
    background: var(--bg-input, var(--bg-secondary));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    cursor: text;
}
.recip-field:focus-within { border-color: var(--accent); }
.recip-input {
    flex: 1;
    min-width: 140px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    padding: 2px 4px;
}
.recip-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    font-size: calc(12px * var(--text-scale));
}
.recip-pill.is-invalid { border-color: var(--red); color: var(--red); }
.recip-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recip-pill-x {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: calc(14px * var(--text-scale));
    line-height: 1;
    padding: 0 2px;
}
.recip-pill-x:hover { color: var(--red); }
.recip-add-btn { margin-left: 8px; }

/* Timeline attachment strip (attach-imap-inbound). Pending attachments are
   quarantined, NOT in the partner folder — the states have to look different
   at a glance or "saved" and "waiting" blur together. */
.timeline-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.timeline-attachments .text-sm { flex-basis: 100%; }
.tl-att-saved    { border-color: var(--green-border); color: var(--green); }
.tl-att-refused  { border-color: var(--red-border); color: var(--red); }
.tl-att-discarded { opacity: 0.55; text-decoration: line-through; }
.tl-att-warn     { color: var(--yellow); }

/* Attachment chips — deliberately the same shape as the recipient pills above,
   so the composer reads as one control surface rather than two. */
.msg-attach-row { display: flex; align-items: center; gap: 10px; }
.msg-attach-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.msg-attach-chips:empty { margin-top: 0; }
.msg-attach-size { color: var(--text-muted); }
.contact-picker-list { display: flex; flex-direction: column; gap: 4px; }
.contact-picker-row {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
}
.contact-picker-row:hover { border-color: var(--border-strong); background: var(--bg-hover); }

/* ── Saved-password indicator (email account modal) ───────────────────── */
.pw-saved { color: var(--green); }

/* ── AI Draft modal: centered, stacked footer ─────────────────────────────
   Replaces the old space-between footer that shoved the prompt icons to the
   far left and crammed/wrapped the action controls on the right (Cancel ended
   up orphaned). Three centered rows: prompt toggles, generate/adjust controls,
   then the Apply/Cancel commit pair. */
.ai-draft-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.ai-prompt-row,
.ai-controls-row,
.ai-commit-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.ai-action-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Group sync provider tabs (Settings → Automation) ─────────────────────
   A tab strip INSIDE a settings panel, so it deliberately does not reuse
   .settings-tab: those are scoped to `#page-settings .settings-tab` and
   SettingsTabs toggles every one of them it finds, which would fight over the
   active class with the outer bar. Same visual language, own class. */
.int-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-default);
    margin: -4px 0 16px;
}

.int-tab {
    padding: 6px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

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

.int-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Execution ▸ Tracking ─────────────────────────────── */
.tracking-tabs { display: flex; gap: 4px; margin-bottom: 16px; }

.tracking-tab {
    padding: 6px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

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

.tracking-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tracking-pane { display: none; }
.tracking-pane.active { display: block; }

/* A bounded-height flex column clips instead of scrolling unless the
   scrolling child is allowed to shrink. See CLAUDE.md's flex-modal note. */
#page-tracking.active { display: flex; flex-direction: column; min-height: 0; }
.tracking-pane.active { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.risk-row-stale { background: var(--bg-hover); }
.risk-stale-flag { color: var(--yellow); font-size: calc(13px * var(--text-scale)); }
.risk-ga-score { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.risk-origin-pill {
    font-size: calc(10px * var(--text-scale)); text-transform: uppercase; letter-spacing: .04em;
    padding: 1px 6px; border-radius: 10px;
    background: var(--bg-tertiary); color: var(--text-secondary);
    margin-left: 6px;
}

/* The current-likelihood / current-severity selects are bare siblings in one
   cell; .form-control's width:100% (style.css ~1036) makes two of them stack
   instead of sharing the line. Wrap them, mirroring .exploit-action-row
   (style.css ~8446). */
.risk-level-pair { display: flex; align-items: center; gap: 6px; }
.risk-level-pair select { flex: 1 1 0; }

/* Per-status colour on the register's status select, mirroring the
   Exploitation pilot-status idiom (style.css ~8419). `open` (identified,
   nothing done yet) gets its own distinct colour — it is the state most in
   need of attention, not a routine one — while `accepted` (a considered
   decision not to act) stays the neutral grey. Deliberately NOT var(--accent):
   .form-control:focus (style.css ~1048) already uses that token at higher
   specificity, so any other status select would flash "open"-orange on focus
   while `open` itself showed no focus feedback. var(--accent-blue) reads as
   "needs attention" without colliding with the focus ring. */
.risk-status-open { border-color: var(--accent-blue); }
.risk-status-mitigating { border-color: var(--yellow); }
.risk-status-materialised { border-color: var(--red); }
.risk-status-closed { border-color: var(--green); }
.risk-status-accepted { border-color: var(--grey); }

/* Owner/status/level selects in the risk table were clipped ("Mitigatin",
   "Material", "HOLO-OI") because the auto-width table gave them a column
   narrower than their longest option. A min-width in `em` sizes each to its
   own text, and the tighter side padding leaves room for the arrow. */
.tracking-pane .plan-ms-table select.form-control { padding-left: 8px; padding-right: 4px; min-width: 9em; }
.tracking-pane .plan-ms-table input.form-control { min-width: 9.5em; padding-left: 8px; }
.tracking-pane .plan-ms-table select.risk-status { min-width: 9em; }
.tracking-pane .plan-ms-table .risk-level-pair select.form-control { min-width: 6.5em; }

.risk-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.risk-toolbar .filter-group { margin: 0; }

/* Risk matrix modal — same look as .settings-overlay / .settings-dialog. */
.track-heat-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.track-heat-overlay[hidden] { display: none; }
.track-heat-dialog {
    width: min(720px, 94vw); height: min(900px, 92vh);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-primary); color: var(--text-primary);
    border: 1px solid var(--border-default); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); outline: none;
}
.track-heat-header {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 14px 20px 10px; background: var(--bg-secondary);
}
.track-heat-header h2 { margin: 0; font-size: calc(18px * var(--text-scale)); font-weight: 700; }
.track-heat-close {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 1.5rem; line-height: 1;
    padding: 2px 8px; border-radius: var(--radius);
}
.track-heat-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.track-heat-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.track-heat-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px; }

.heat-wrap { display: flex; flex-direction: column; align-items: center; }
.heat-grid {
    display: grid; position: relative;
    grid-template-columns: auto auto repeat(3, var(--heat-tile));
    grid-template-rows: repeat(3, var(--heat-tile)) auto auto;
    gap: var(--heat-gap);
}
.heat-cell {
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius); font-weight: 600; position: relative;
    border: 2px solid currentColor; box-sizing: border-box;
}
.heat-row-label, .heat-col-label {
    display: flex; align-items: center;
    font-size: calc(15px * var(--text-scale)); color: var(--text-secondary);
}
.heat-row-label { justify-content: flex-end; padding-right: 4px; }
.heat-col-label { justify-content: center; }
.heat-count { font-size: calc(36px * var(--text-scale)); }
.heat-axis-y, .heat-axis-x {
    font-size: calc(16px * var(--text-scale)); font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
}
.heat-axis-y { grid-column: 1; grid-row: 1 / span 3; writing-mode: vertical-rl; transform: rotate(180deg); }
.heat-axis-x { grid-column: 3 / span 3; grid-row: 5; }
/* Inherent → residual connectors (tracking-a7): the SVG is pixel-sized to the
   tile area (3 tiles + 2 gaps) and laid over it by grid placement, so line
   ends are computed from the same tile/gap constants as the cells. */
.heat-arrows { grid-column: 3 / span 3; grid-row: 1 / span 3; pointer-events: none; overflow: visible; }
.heat-arrow-line { stroke: var(--text-primary); stroke-width: 3; opacity: .9; }
.heat-arrow-head { fill: var(--text-primary); opacity: .9; }
.heat-arrow-origin { fill: var(--bg-primary); stroke: var(--text-primary); stroke-width: 3; }
.heat-arrow-count { font-size: 16px; fill: var(--text-primary); text-anchor: middle; font-weight: 700; }
.heat-arrow-legend {
    display: flex; align-items: center; gap: 12px; margin-top: 56px;
    font-size: calc(14px * var(--text-scale)); color: var(--text-secondary);
}
.heat-legend-icon { flex: none; }
.heat-explain {
    align-self: stretch; margin-top: 28px; padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
    font-size: calc(14px * var(--text-scale)); color: var(--text-secondary); line-height: 1.5;
}
.heat-explain h3 { margin: 0 0 8px; font-size: calc(15px * var(--text-scale)); color: var(--text-primary); }
.heat-explain ul { margin: 0; padding-left: 20px; }
.heat-explain li { margin-bottom: 8px; }
.heat-key { display: inline-block; padding: 0 8px; margin-right: 4px; border-radius: var(--radius); font-weight: 600; }
.heat-legend-icon .heat-arrow-origin, .heat-legend-icon .heat-arrow-line { stroke: var(--text-primary); }

/* Register filters (tracking-a8) — .filter-group is the existing SPA-wide
   filter-select idiom (style.css ~585, e.g. the Partners toolbar). */
.risk-filter-count { font-size: calc(12px * var(--text-scale)); color: var(--text-secondary); margin-bottom: 6px; }
/* Bands by likelihood×severity product: 1-2 low, 3-4 moderate, 6-9 high.
   Theme-aware fills, matching the .risk-pill idiom (style.css ~8528) rather
   than the briefs' hardcoded dark-mode hex — this app has a light theme. */
.heat-band-1, .heat-band-2 { background: rgba(34,197,94,.15); color: var(--green); }
.heat-band-3, .heat-band-4 { background: rgba(234,179,8,.15); color: var(--yellow); }
.heat-band-6, .heat-band-9 { background: rgba(239,68,68,.15); color: var(--red); }

/* Read-only execution-status strip on Proposal > Risks (task-9-brief). Follows
   the .risk-pill idiom (style.css ~8529) — translucent fill, solid text colour
   — rather than .risk-status-* (style.css ~8793), which sets border-color and
   is built for a <select> on the Tracking page. color-mix() against the same
   five status tokens keeps this hex-free and theme-aware, unlike the
   .heat-band-* rules directly above (hardcoded dark-mode rgb literals). That
   is NOT legacy code — both were added on this same branch, .heat-band-*
   two commits earlier (9194f36) — it's a deliberate simplification for the
   3x3 heat grid's two-colour-mode fills, not a pattern to repeat when adding
   new status-coloured UI; prefer color-mix() as done here. */
.prop-risk-exec { white-space: nowrap; }
.risk-exec-pill {
    display: inline-block; font-size: calc(10px * var(--text-scale)); text-transform: uppercase; padding: 1px 6px;
    border-radius: 10px; font-weight: 600;
}
/* .risk-status-open (structurally unreachable: proposal.js's execution strip
   guards this pill with `r.status && r.status !== "open"`, so an "open" risk
   never renders one here — kept for symmetry with the other four statuses in
   the enum, not because anything can trigger it). */
.risk-exec-pill.risk-status-open { background: color-mix(in srgb, var(--accent-blue) 15%, transparent); color: var(--accent-blue); }
.risk-exec-pill.risk-status-mitigating { background: color-mix(in srgb, var(--yellow) 15%, transparent); color: var(--yellow); }
.risk-exec-pill.risk-status-materialised { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.risk-exec-pill.risk-status-closed { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.risk-exec-pill.risk-status-accepted { background: color-mix(in srgb, var(--grey) 15%, transparent); color: var(--grey); }
.risk-exec-owner { font-size: calc(11px * var(--text-scale)); color: var(--text-secondary); margin-left: 6px; }


/* ══════════════════════════════════════════════════════════
   SETTINGS MODAL (settings_modal.js)
   Fixed-size dialog; the tab bar is pinned, ONLY .settings-content scrolls.
   z-index 60 sits above the sidebar/topbar but BELOW .modal-overlay (100), so
   dialogs launched from inside settings (email account, templates, ...) stack on top.
   ══════════════════════════════════════════════════════════ */
.sidebar-settings-wrap {
    flex-shrink: 0;
    padding: 4px 16px 2px;
}
/* Same pill as .theme-toggle-btn so Settings / Dark / Licence / Stop read as one stack. */
.sidebar-settings-wrap .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 5px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}
.sidebar-settings-wrap .nav-link:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: var(--bg-hover);
}
.sidebar-settings-wrap .nav-icon {
    font-size: calc(13px * var(--text-scale));
    line-height: 1;
    width: auto;
}

.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.settings-overlay[hidden] { display: none; }

.settings-dialog {
    width: min(960px, 94vw);
    height: min(760px, 88vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.settings-dialog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px 20px 10px;
    background: var(--bg-secondary);
}
.settings-dialog-icon { display: inline-flex; font-size: 1.25rem; color: var(--text-secondary); line-height: 1; }
.settings-dialog-header h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.settings-dialog-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    padding: 2px 8px;
    border-radius: var(--radius);
}
.settings-dialog-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-dialog-close:focus-visible,
.settings-dialog .settings-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.settings-dialog-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.settings-dialog .settings-tab-bar {
    flex-shrink: 0;
    margin-bottom: 0;
    padding: 0 20px;
    background: var(--bg-secondary);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.settings-dialog .settings-tab { white-space: nowrap; flex: none; }

.settings-content-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.settings-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 24px;
}

/* Inside the narrower dialog: panels single-column, controls capped. */
.settings-dialog .settings-grid { grid-template-columns: minmax(0, 1fr); }
.settings-dialog .settings-panel { min-width: 0; }
.settings-dialog .settings-panel-body { min-width: 0; }
.settings-dialog .settings-panel .form-control,
.settings-dialog .settings-panel input[type="text"],
.settings-dialog .settings-panel input[type="password"],
.settings-dialog .settings-panel input[type="email"],
.settings-dialog .settings-panel input[type="number"],
.settings-dialog .settings-panel select {
    max-width: 100%;
    box-sizing: border-box;
}
.settings-dialog .form-row { flex-wrap: wrap; }
.settings-dialog table { max-width: 100%; }
.settings-dialog .settings-panel-body { overflow-x: auto; }

/* "more below" chevron */
.scroll-more {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    cursor: pointer;
    z-index: 2;
}
.scroll-more[hidden] { display: none; }
.scroll-more-glyph {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    animation: scroll-more-bounce 1.4s ease-in-out infinite;
}
@keyframes scroll-more-bounce {
    0%, 100% { transform: rotate(45deg) translate(-2px, -2px); }
    50% { transform: rotate(45deg) translate(1px, 1px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-more-glyph { animation: none; } }
.settings-dialog .settings-panel select { max-width: 360px; }


/* ── Command palette (Ctrl+K) ──────────────────────────── */
/* Not .modal-overlay on purpose: settings_modal.js closes any .modal-overlay on Escape.
   z-index 200: above .modal-overlay (100), below #toast-container (300). */
.palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    z-index: 200;
}

.palette-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 640px;
    max-width: 95vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#palette-input {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 1.05rem;
    background: transparent;
    color: var(--text-primary);
    border: none;
    border-bottom: 1px solid var(--border-default);
    outline: none;
}

#palette-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
}

.palette-group {
    display: block;
    padding: 8px 10px 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.palette-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
}

.palette-item.palette-option { padding-left: 28px; }
.palette-item:hover { background: var(--bg-hover); }
.palette-item.palette-selected {
    background: var(--bg-hover);
    outline: 1px solid var(--accent);
}
.palette-item.palette-unavailable { opacity: 0.55; }
.palette-slot { color: var(--accent); font-weight: 600; }
.palette-muted { color: var(--text-muted); font-size: 0.85rem; }
.palette-file-icon { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.palette-file-icon svg { width: 16px; height: 16px; }

#palette-preview {
    flex-shrink: 0;
    min-height: 1.4em;
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-default);
}
#palette-preview.palette-error { color: var(--red); }
.palette-confirm-summary { display: block; color: var(--text-primary); font-weight: 600; }
.palette-confirm-line { margin-top: 2px; }
.palette-confirm-btn { margin-top: 8px; }

.icon-paperclip { vertical-align: -0.125em; }
.drop-zone-icon .icon-paperclip { width: 1em; height: 1em; }

.mtg-item-nav { display: flex; align-items: center; gap: 6px; margin-right: auto; }


/* ── Documents page cards (same look as .fc-card on the TODOs page) ── */
.docs-card-list { display: flex; flex-direction: column; gap: 8px; }
.docs-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 10px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.docs-card:hover { border-color: var(--border-default); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.docs-card-main { flex: 1 1 260px; min-width: 0; }
.docs-card-title {
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 4px;
}
.docs-card-meta { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); }
.docs-card-target {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    margin-top: 2px;
}
.docs-card-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Feedback cards: sub-items (to-do items) ──────────── */
.fc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.fc-form-row > .form-group { min-width: 0; }
@media (max-width: 560px) {
    .fc-form-row { grid-template-columns: 1fr; }
}

.fc-board-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}
.fc-board-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    cursor: pointer;
}

.fc-sub-add { display: flex; gap: 8px; }
.fc-sub-add input { flex: 1; min-width: 0; }
.fc-sub-edit-list,
.fc-sub-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fc-sub-edit-list { max-height: 160px; overflow-y: auto; }
.fc-sub-edit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    font-size: calc(13px * var(--text-scale));
    color: var(--text-primary);
}
.fc-sub-edit-row span { overflow-wrap: anywhere; }
.fc-sub-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-primary);
}
.fc-sub-row label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.fc-sub-row.fc-sub-done label span { text-decoration: line-through; color: var(--text-muted); }
.fc-sub-row .fc-quick-btn { flex-shrink: 0; }
.fc-card-sub-list { margin: 0 0 8px; }
.fc-card-sub-count {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-muted);
    margin-bottom: 6px;
}
.fc-detail-subs { margin-top: 14px; }
.fc-detail-subs h4 {
    margin: 0 0 6px;
    font-size: calc(13px * var(--text-scale));
    color: var(--text-secondary);
}
.fc-detail-sub-add { display: flex; gap: 8px; margin-top: 8px; }
.fc-detail-sub-add input { flex: 1; min-width: 0; }

/* Dissemination: wide activity table scrolls inside its card */
#page-dissemination .wp-card-style { overflow-x: auto; }

/* ── Feedback card: corner delete (Icons trash, always visible) ── */
/* Requests list / mail queue: the same button, in flow instead of in a card corner */
.fc-card-delete.rq-del, .btn-icon.rq-del { position: static; flex-shrink: 0; }

/* Wide windows: stat cards and doughnuts span the full content width, equal
   widths, instead of the compact centred layout used on narrow windows. */
@media (min-width: 1500px) {
    .stat-grid .stat-card {
        flex: 1 1 0;
        width: auto;
        min-width: 210px;
    }

    .chart-grid {
        max-width: none;
    }

    .chart-card {
        flex: 0 0 calc((100% - 4 * 14px) / 5);
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Icon-only action buttons (edit, delete, documents): one shared size so the
   Actions column lines up. Icons come from Icons.svg() and inherit the colour. */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    vertical-align: middle;
}
.btn-icon .icon,
.btn-icon .icon-paperclip {
    width: 15px;
    height: 15px;
    flex: none;
}
/* Paperclip + count: same 28 px height as the round edit/delete buttons, pill-shaped for the count. */
.btn-icon.doclinks-btn { height: 28px; min-width: 28px; padding: 0 9px; border-radius: 14px; }

/* Shared icon-button variants (Icons.button): edit = pencil in a circle,
   done = green check, delete = red trash. Standalone (no .btn needed); the
   colours come from the theme tokens so both themes work. */
.btn-icon--edit,
.btn-icon--done,
.btn-icon--delete {
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-icon--edit { border-color: var(--border-default); }
/* Edit and card action buttons: same hover as the header-line buttons (.btn-icon-action): solid accent fill. */
.btn-icon--edit:hover,
.btn-icon--edit:focus-visible { color: var(--text-on-accent); border-color: var(--accent); background: var(--accent); }
.btn-icon--done { color: var(--green); }
.btn-icon--done:hover { background: var(--green-bg); border-color: var(--green-border); }
/* Delete = the Meetings toolbar look: outlined circle, muted trash, solid red with a white trash on hover. */
.btn-icon--delete { border-color: var(--border-default); }
.btn-icon--delete:hover,
.btn-icon--delete:focus-visible { color: var(--text-on-fill); border-color: var(--red); background: var(--red); }
.btn-icon--edit:focus-visible,
.btn-icon--done:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Icons.actionButton: icon-only circular action button. Muted at rest, fades to
   solid accent on hover and keyboard focus (red for .danger). The tooltip is the
   native title; the count badge keeps its space when empty (visibility). */
.btn-icon-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-icon-action .icon { width: 1em; height: 1em; }
/* Icon button that also carries a short text label (pill instead of circle). */
.btn-icon-action--labelled { width: auto; padding: 0 12px; gap: 6px; border-radius: 18px; }
.btn-icon-action--labelled .btn-icon-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.btn-icon-action:hover,
.btn-icon-action:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
    outline: none;
}
.btn-icon-action:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-icon-action.danger:hover,
.btn-icon-action.danger:focus-visible {
    background: var(--red);
    border-color: var(--red);
    color: var(--text-on-fill);
}
.btn-icon-action.danger:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 35%, transparent); }
.btn-icon-action:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-icon-action.is-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.btn-icon-action.is-primary:disabled { background: transparent; border-color: var(--border-default); color: var(--text-muted); }
.btn-icon-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--red);
    color: var(--text-on-fill);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}
.btn-icon-badge.is-empty { visibility: hidden; }
.btn-icon-sep { width: 1px; height: 22px; background: var(--border-default); flex: 0 0 auto; }
.btn-icon-action.hidden { display: none; }
.btn-icon-action[hidden] { display: none; }
.icon-menu-wrap { position: relative; display: inline-flex; }
.icon-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    display: none;
    min-width: 200px;
    padding: 4px;
    background: var(--bg-card, var(--bg-hover));
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.icon-menu.open { display: block; }
.icon-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.icon-menu button:hover,
.icon-menu button:focus-visible { background: var(--bg-hover); outline: none; }
.icon-menu .icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
    .btn-icon-action { transition: none; }
}

/* Compact percentage input in the budget WP detail table. */
.wp-pct-input {
    width: 65px;
    text-align: right;
    padding: 2px 4px;
    font-size: calc(12px * var(--text-scale));
}

/* Edit Project > Documents: one box per document space. */
.prj-space-row {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 10px;
    margin-bottom: 10px;
}


/* ── Monitoring: Export Charts as PNG dialog ─────────────────────────── */
.mex-modal { max-width: 640px; }
.mex-body { display: flex; flex-direction: column; gap: 18px; }
.mex-intro { margin: 0; }
.mex-section { display: flex; flex-direction: column; gap: 10px; }
.mex-section + .mex-section { padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.mex-section-head { display: flex; align-items: center; justify-content: space-between; }
.mex-section-title {
    margin: 0;
    font-size: calc(11px * var(--text-scale));
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.mex-section-actions { display: flex; gap: 6px; }
.mex-chart-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    max-height: 180px;
    overflow-y: auto;
}
.mex-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(13px * var(--text-scale));
    cursor: pointer;
}
.mex-fields { display: grid; gap: 12px 14px; align-items: end; }
.mex-fields-2 { grid-template-columns: 3fr 2fr; }
.mex-fields-4 { grid-template-columns: repeat(4, 1fr); }
.mex-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mex-field > label {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-muted);
}
.mex-field input:not([type="checkbox"]),
.mex-field select { width: 100%; height: 34px; box-sizing: border-box; }
.mex-field input[type="color"] { height: 34px; padding: 2px 4px; cursor: pointer; }
.mex-field-span2 { grid-column: span 2; }
.mex-field-check { justify-content: flex-end; min-height: 34px; }
@media (max-width: 560px) {
    .mex-fields-4 { grid-template-columns: 1fr 1fr; }
    .mex-chart-list { grid-template-columns: 1fr; }
}

/* ── F&T Portal preview panel (ft_preview.js; project and partner modals) ── */
.ft-preview {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}
.ft-preview-table { width: 100%; border-collapse: collapse; }
.ft-preview-table th {
    text-align: left;
    font-weight: 600;
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    padding: 4px 8px;
}
.ft-preview-row td {
    padding: 5px 8px;
    border-top: 1px solid var(--border-subtle);
    vertical-align: top;
}
/* Field and Current columns keep whole words; only the Portal value may break. */
.ft-preview-row td:nth-child(2),
.ft-preview-table th:nth-child(2) { white-space: nowrap; }
.ft-preview-row td:nth-child(3) { overflow-wrap: break-word; min-width: 70px; }
.ft-preview-row td:nth-child(4) { overflow-wrap: anywhere; }
.ft-preview-row.ft-preview-same { color: var(--text-secondary); opacity: 0.65; }
.ft-preview-tag {
    font-size: calc(11px * var(--text-scale));
    color: var(--text-secondary);
    margin-left: 6px;
}
.ft-preview-info {
    margin: 10px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--border-subtle);
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
    list-style: none;
}
.ft-preview-info li { margin: 2px 0; }
.ft-preview-info a { color: var(--accent-blue); }
.ft-preview-actions { display: flex; gap: 8px; margin-top: 10px; }
.ft-pick-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ft-pick-item {
    text-align: left;
    padding: 6px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
}
.ft-pick-item:hover { background: var(--bg-hover); border-color: var(--accent); }
.ft-pick-item small { display: block; color: var(--text-secondary); }
.ft-msg { margin-top: 8px; font-size: calc(13px * var(--text-scale)); color: var(--text-secondary); }
.ft-msg-warn { color: var(--accent); }

/* ── F&T Portal partner searches panel (partners.js) ── */
.ft-searches {
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}
.ft-searches > summary { cursor: pointer; font-weight: 600; }
.ft-searches-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ft-search-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--border-subtle);
}
.ft-search-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ft-search-meta, .ft-search-keywords {
    font-size: calc(12px * var(--text-scale));
    color: var(--text-secondary);
}
.ft-search-main a { color: var(--accent-blue); font-size: calc(12px * var(--text-scale)); }
.ft-search-item .btn { flex-shrink: 0; }
#pm-pic-result:not(:empty) { margin-bottom: 10px; }


/* ── Project modal: portal topic helpers ─────────────────── */
.prj-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.ft-topic-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 4px;
    color: var(--text-secondary);
}
.ft-topic-link:hover { color: var(--accent-text); }
.ft-topic-link.hidden { display: none; }
.ft-topic-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.ft-topic-overlay { z-index: 200; }
.ft-topic-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.ft-topic-error { color: var(--danger); margin-bottom: 8px; }
.ft-topic-content { line-height: 1.5; overflow-wrap: anywhere; }
.ft-topic-content h1, .ft-topic-content h2 { font-size: 1.25em; margin: 1em 0 0.4em; }
.ft-topic-content h3 { font-size: 1.1em; margin: 1em 0 0.4em; }
.ft-topic-content h4, .ft-topic-content h5, .ft-topic-content h6 { font-size: 1em; margin: 0.8em 0 0.3em; }
.ft-topic-content p { margin: 0.5em 0; }
.ft-topic-content ul, .ft-topic-content ol { margin: 0.5em 0; padding-left: 1.6em; }
.ft-topic-content ul { list-style: disc; }
.ft-topic-content ol { list-style: decimal; }
.ft-topic-content a { color: var(--accent-blue); text-decoration: underline; }
.ft-topic-content table { border-collapse: collapse; margin: 0.6em 0; max-width: 100%; }
.ft-topic-content th, .ft-topic-content td {
    border: 1px solid var(--border-default);
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}
.ft-topic-content .ft-topic-update-date {
    font-size: 0.85em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 2px;
}

/* ── Budget page: "How is this calculated?" modal and header bits ── */
.budget-custom-base {
    color: var(--yellow-text);
    font-weight: 600;
}
.budget-other-direct {
    cursor: help;
}
.modal.budget-calc-modal {
    width: 980px;
    max-width: 95vw;
}
.bcalc-section {
    margin-bottom: 26px;
}
.bcalc-section h3 {
    font-size: calc(14px * var(--text-scale));
    font-weight: 600;
    margin: 0 0 10px;
}
.bcalc-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.bcalc-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 200px;
    min-width: 180px;
}
.bcalc-arrow {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: calc(22px * var(--text-scale));
}
.bcalc-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: calc(12px * var(--text-scale));
}
.bcalc-title {
    font-weight: 600;
    color: var(--text-primary);
}
.bcalc-code {
    color: var(--accent-text);
    font-weight: 700;
}
.bcalc-value {
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
    color: var(--text-primary);
}
.bcalc-sub {
    color: var(--text-muted);
    margin-top: 2px;
}
.bcalc-in-base {
    border-color: var(--green);
    box-shadow: inset 3px 0 0 var(--green);
}
.bcalc-out-base {
    opacity: 0.55;
    border-style: dashed;
}
.bcalc-e {
    border-color: var(--accent);
}
.bcalc-final {
    border-color: var(--accent);
    background: var(--accent-subtle);
}
.bcalc-table th,
.bcalc-table td {
    text-align: left;
}
.bcalc-table tr.bcalc-current td {
    background: var(--accent-subtle);
    font-weight: 600;
}
.bcalc-override {
    margin: 10px 0 0;
}
.bcalc-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px 16px;
    margin-bottom: 12px;
}
.bcalc-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(13px * var(--text-scale));
}
.bcalc-rate-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.bcalc-rate-row input {
    width: 90px;
}
.bcalc-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.bcalc-sources {
    margin: 0;
    padding-left: 20px;
}
.bcalc-sources li {
    margin-bottom: 8px;
}

/* ── Settings panels with titled subsections (Email) ─────── */
.settings-subsection + .settings-subsection {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-default);
}
.settings-subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.settings-subsection-title {
    margin: 0;
    font-size: calc(13px * var(--text-scale));
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Scroll lock while a modal is open ───────────────────
   The page behind a modal must stay put: only the modal scrolls. Open =
   a .modal-overlay without .hidden (dynamic ones carry no .hidden at all),
   the settings dialog, the command palette, or an open side drawer. `scrollbar-gutter: stable`
   keeps the scrollbar's space so the page does not jump sideways. */
html:has(.modal-overlay:not(.hidden):not([hidden]),
         .settings-overlay:not([hidden]),
         .palette-overlay:not(.hidden):not([hidden]),
         .drawer.open:not(.hidden)) {
    overflow: hidden;
    scrollbar-gutter: stable;
}
.modal-overlay,
.settings-overlay,
.palette-overlay,
.modal,
.modal-body,
.settings-dialog-main {
    overscroll-behavior: contain;
}

/* A modal with tabs keeps one fixed height on every tab, so switching tabs
   never resizes the dialog. The body scrolls (see `.modal:has(> .modal-body)`). */
.modal.modal-tabbed {
    height: 90vh;
}

/* Partner searches on the portal: filter field above the result list. */
.ft-searches-filter { margin-bottom: 10px; }
.ft-searches-filter .text-sm { display: block; margin-top: 4px; }

/* Meetings: attendance-list preview. A fixed pixel height (about eight rows)
   so the dialog keeps its size whatever the participant count; the list
   scrolls under its sticky header. */
.mtg-att-preview {
    height: 300px;
    overflow: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 6px);
}
.mtg-att-table { width: 100%; border-collapse: collapse; }
.mtg-att-table th,
.mtg-att-table td {
    padding: 5px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}
.mtg-att-table th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
}
.mtg-att-table td.mtg-att-check,
.mtg-att-table th.mtg-att-check { width: 32px; text-align: center; }
.mtg-att-table .badge-dup-name {
    background: rgba(247, 201, 72, 0.15);
    color: var(--priority-medium);
    margin-left: 6px;
    cursor: help;
}
.mtg-att-table .mtg-att-muted { color: var(--text-muted); font-style: italic; }


/* ── Composer AI prompt: context select + Claude's note ─────────────── */
.msg-ai-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.msg-ai-actions label { margin: 0; }
.composer-note {
    margin-top: 8px; padding: 8px 10px; border-radius: 6px;
    border: 1px solid var(--yellow-border);
    background: var(--yellow-bg);
    font-size: 0.85rem;
}
.composer-note.hidden { display: none; }
.composer-note-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.composer-note-text { white-space: pre-wrap; }
.composer-note.important {
    border: 2px solid var(--red);
    background: color-mix(in srgb, var(--red) 16%, transparent);
    animation: composer-note-pulse 1.2s ease-in-out infinite;
}
@keyframes composer-note-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 70%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .composer-note.important {
        animation: none;
        background: color-mix(in srgb, var(--red) 28%, transparent);
    }
}

/* Signature previews (sandboxed iframes) follow the theme: the canvas is
   transparent over the field background; colours are injected into srcdoc. */
iframe.signature-preview {
    border: 0;
    background: transparent;
    color-scheme: normal;
    display: block;
}

/* -- F&T Portal details (Budget, lump sum) -- */
.fte-host { margin-top: 24px; min-height: 260px; }
.fte-note { margin-bottom: 12px; }
.fte-os-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.fte-os-field { display: flex; flex-direction: column; justify-content: flex-end; }
.fte-os-field label { display: block; margin-bottom: 4px; }
.fte-note textarea { width: 100%; }
.fte-note-meta { display: flex; justify-content: space-between; gap: 12px; }
.fte-status { min-width: 12em; text-align: right; }

/* ── Responsibility notices (design P13) ─────────────────────────────
   The Budget-page note reserves two lines so showing it never moves the
   layout. The acceptance dialog is NOT .modal-overlay: settings_modal.js
   closes those on Escape, and this one must stay until accepted.
   z-index 250: above .palette-overlay (200), below #toast-container (300). */
.budget-notice {
    margin: 0 0 8px;
    min-height: 3.9em;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-muted);
}
.draft-marker {
    font-style: italic;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}
.notice-overlay[hidden] { display: none; }
#responsibility-retry[hidden] { display: none; }
.notice-dialog {
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.notice-dialog h2 { margin: 0 0 6px; font-size: 1.1rem; }
.notice-dialog p { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.45; }
.notice-check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 0.9rem; }
.notice-check input { margin-top: 3px; }
.notice-error { min-height: 1.2em; margin: 8px 0 0; color: var(--red); font-size: 0.8rem; }
.notice-actions { display: flex; justify-content: flex-end; margin-top: 4px; }

/* WP x partner budget modal: navigation in the header, comment, note mark */
.wp-detail-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#wp-detail-title { margin: 0; white-space: nowrap; }
.wp-detail-comment { margin-top: 12px; }
.wp-detail-comment label { display: block; font-size: calc(12px * var(--text-scale)); margin-bottom: 4px; color: var(--text-secondary); }
.wp-detail-comment textarea { width: 100%; resize: vertical; }
.wp-comment-mark {
    font-size: 0.65rem;
    color: var(--text-secondary);
    border: 1px solid currentColor;
    border-radius: 8px;
    padding: 0 6px;
    white-space: nowrap;
}


/* ── Requests (partner portal, coordinator side) ───────── */
/* Full width: the review table and its controls use the whole page. Forms and notes keep their own narrower limits below. */
.rq-root { max-width: none; }
.rq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rq-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rq-h { margin: 0; font-size: calc(18px * var(--text-scale)); font-weight: 600; overflow-wrap: anywhere; }
.rq-sub { margin: 22px 0 10px; font-size: calc(14px * var(--text-scale)); font-weight: 600; color: var(--text-secondary); }
.rq-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rq-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); margin-bottom: 0; }
.rq-top .rq-tabs { border-bottom: 0; }
.rq-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 8px 14px; font: inherit; cursor: pointer; }
.rq-tab-badge { margin-left: 6px; }
.rq-tab-badge.rq-tab-badge-off { visibility: hidden; }
.rq-tab:hover { color: var(--text-primary); }
.rq-tab.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.rq-pane { min-height: 360px; padding-top: 16px; }
.rq-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.rq-table { width: 100%; border-collapse: collapse; }
.rq-table th { padding: 10px 14px; text-align: left; font-size: calc(12px * var(--text-scale)); font-weight: 600; color: var(--text-muted); background: var(--bg-secondary); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.rq-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); font-size: calc(13px * var(--text-scale)); vertical-align: middle; overflow-wrap: anywhere; }
.rq-table tr:last-child td { border-bottom: 0; }
.rq-row:hover td { background: var(--bg-hover); }
.rq-link { background: none; border: 0; padding: 0; color: var(--text-primary); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.rq-link:hover { color: var(--accent); }
.rq-row-badge { display: inline-block; margin-left: 8px; vertical-align: middle; }
.rq-bar { height: 4px; border-radius: 2px; background: var(--border-default); margin-top: 5px; max-width: 140px; overflow: hidden; }
.rq-bar-fill { height: 100%; background: var(--green); }
.rq-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 99px; font-size: calc(12px * var(--text-scale)); font-weight: 500; background: var(--grey-bg); color: var(--text-secondary); }
.rq-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rq-status-open, .rq-status-submitted, .rq-qs-sending { background: var(--accent-blue-dim); color: var(--accent-blue); }
.rq-status-accepted, .rq-qs-sent { background: var(--green-bg); color: var(--green); }
.rq-status-returned, .rq-status-draft, .rq-qs-queued { background: var(--yellow-bg); color: var(--yellow); }
.rq-qs-failed { background: var(--red-bg); color: var(--red); }
.rq-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: calc(11px * var(--text-scale)); border: 1px solid var(--border-default); color: var(--text-secondary); }
.rq-pill-ok { color: var(--green); border-color: var(--green-border); background: var(--green-bg); margin-left: 0; }
.rq-row-click { cursor: pointer; }
.rq-row-click:hover td { background: var(--bg-secondary); }
.rq-row-click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rq-portal-cell { min-width: 280px; white-space: nowrap; }   /* fixed room: no width change between states */
.rq-portal-ctl-row { display: flex; gap: 8px; align-items: center; }
.rq-portal-ctl { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 26px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); font: inherit; font-size: calc(12px * var(--text-scale)); font-weight: 500; line-height: 1; white-space: nowrap; }
.rq-pick-row, .rq-person-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rq-pick-row .rq-check { flex: 1 1 auto; min-width: 0; }
.rq-pick-row .rq-portal-ctl, .rq-person-row .rq-portal-ctl { flex: 0 0 auto; min-width: 128px; }
.rq-portal-ctl.rq-pill-ok { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
.rq-portal-ctl.rq-pill-muted { color: var(--text-muted); }
.rq-portal-ctl.rq-pill-bad { color: var(--red, #e5484d); border-color: var(--red, #e5484d); }
.rq-portal-btn { cursor: pointer; }
.rq-portal-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.rq-portal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rq-pill-warn { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
.rq-intro { max-width: 640px; padding: 28px 4px; }
.rq-intro h3 { margin: 0 0 8px; font-size: calc(18px * var(--text-scale)); }
.rq-intro ol { margin: 14px 0 0; padding-left: 20px; line-height: 1.7; }
.rq-help { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.rq-note-box { border-left: 3px solid var(--accent); background: var(--accent-subtle); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 16px; font-size: calc(13px * var(--text-scale)); max-width: 760px; }
.rq-form { max-width: 820px; }
.rq-two > .form-group { flex: 1 1 14em; }
.rq-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: calc(13px * var(--text-scale)); }
.rq-checks { display: flex; flex-direction: column; gap: 6px; }
.rq-scroll { max-height: 180px; overflow-y: auto; padding: 4px 0; }
.rq-set { border: 1px solid var(--border-default); border-radius: var(--radius); margin: 0 0 12px; padding: 8px 14px 12px; min-width: 0; }
.rq-set legend { padding: 0 6px; font-size: calc(12px * var(--text-scale)); color: var(--text-secondary); }
.rq-preview { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 12px 14px; min-height: 96px; margin-bottom: 8px; }
.rq-count { font-weight: 600; margin-bottom: 6px; }
.rq-warn { color: var(--yellow); font-size: calc(13px * var(--text-scale)); margin-bottom: 4px; }
.rq-note { color: var(--text-secondary); font-size: calc(13px * var(--text-scale)); margin-bottom: 4px; }
.rq-people { list-style: none; margin: 8px 0 0; padding: 0; max-height: 160px; overflow-y: auto; font-size: calc(13px * var(--text-scale)); }
.rq-people li { padding: 2px 0; }
.rq-presets { margin-bottom: 12px; }
.rq-qs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.rq-q { border: 1px solid var(--border-default); border-radius: var(--radius); padding: 12px; background: var(--bg-tertiary); display: flex; flex-direction: column; gap: 8px; }
.rq-q .field-row > select { flex: 0 0 12em; }
.rq-qtools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rq-qtools .rq-check { margin-right: auto; }
.rq-choices textarea { width: 100%; }
.rq-q-head { display: flex; align-items: center; gap: 8px; }
.rq-q-num { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.rq-drag-handle { background: none; border: 0; padding: 4px 6px; cursor: grab; color: var(--text-muted); border-radius: var(--radius); line-height: 1; flex-shrink: 0; }
.rq-drag-handle:active { cursor: grabbing; }
.rq-drag-handle:hover, .rq-drag-handle:focus-visible { color: var(--text-primary); outline: 2px solid var(--accent); outline-offset: 1px; }
.rq-q.dragging { opacity: 0.4; }
.rq-q.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.rq-q.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.rq-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rq-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 20px; margin-bottom: 14px; }
.rq-kv { display: flex; flex-direction: column; gap: 2px; }
.rq-k { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.rq-desc { max-width: 70ch; white-space: pre-wrap; }
.rq-qlist { padding-left: 20px; line-height: 1.7; margin-bottom: 16px; }
.rq-new { border: 1px solid var(--border-default); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rq-resps { display: flex; flex-direction: column; gap: 12px; }
.rq-resp { border: 1px solid var(--border-default); border-radius: var(--radius); background: var(--bg-tertiary); padding: 12px 14px; }
.rq-resp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rq-resp-head .rq-actions { margin-left: auto; }
/* A box with nothing under its head has no extra space below it: the name, status and button sit centred in the box. */
.rq-resp-head:last-child { margin-bottom: 0; }
.rq-resp-click { cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.rq-resp-click:hover { background: var(--bg-secondary); border-color: var(--accent); }
.rq-resp-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rq-qas { display: grid; gap: 8px; }
.rq-qa > div:last-child { white-space: pre-wrap; overflow-wrap: anywhere; }
.rq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-chip { border: 1px solid var(--border-strong); background: transparent; color: var(--text-secondary); padding: 3px 12px; border-radius: 99px; font: inherit; font-size: calc(12px * var(--text-scale)); cursor: pointer; }
.rq-chip.on { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
.rq-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.rq-wps { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.rq-tagpicker { min-height: 34px; }
.rq-tagpicker-note { min-height: 1.4em; margin-top: 4px; }
/* Reserve the slot (chip row + note line) so the async fill never moves the modal. */
#cm-tags-slot { min-height: 62px; }
.rq-bulk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.rq-pick { margin-right: 8px; }
@media (max-width: 640px) {
    .rq-top { align-items: flex-start; }
    .rq-pane .table-wrapper { overflow-x: auto; }
    .rq-table { min-width: 560px; }
}
.rq-two { align-items: flex-start; }
.rq-set .rq-checks:not(.rq-scroll):not(.rq-checks-list) { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; }
.rq-checks-list { flex-direction: column; gap: 6px; }
.rq-actions a.btn { text-decoration: none; }

/* Monitoring review (Requests > Answers). The banner slot keeps its height so a result never shifts the table. */
.rq-banner-slot { min-height: 44px; margin-bottom: 8px; }
.rq-banner { padding: 10px 14px; border-radius: var(--radius); font-size: calc(13px * var(--text-scale)); border: 1px solid var(--border-default); }
.rq-banner-ok { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.rq-banner-err { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.rq-review .rq-num, .rq-table .rq-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Decision cell: status, Keep/Return and the comment share one row while there is room; the comment drops below when not. The radio labels never wrap. */
.rq-review-cell { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 200px; }
.rq-review-cell .rq-decide { flex: 0 0 auto; flex-wrap: nowrap; gap: 14px; align-items: center; }
.rq-review-cell .rq-check { white-space: nowrap; flex: 0 0 auto; }
.rq-review-cell input[type=text] { flex: 1 1 150px; min-width: 130px; }
.rq-review-cell .rq-help { flex: 1 1 100%; }
.rq-decide { display: flex; gap: 16px; }
.rq-row-reason { margin-top: 4px; font-size: calc(12px * var(--text-scale)); color: var(--yellow); }
.rq-pill-flag-replaces, .rq-pill-flag-detailed, .rq-pill-flag-unknown { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
.rq-pill-flag-new, .rq-pill-flag-no_change { margin-left: 0; }
/* "EUR" and the flag pill never break inside the word ("EU/R", "Replace/s"). */
.rq-review .rq-unit, .rq-review .rq-flag { white-space: nowrap; }
.rq-review .rq-flag .rq-pill { margin-left: 0; }
/* Empty row in the header colour between the euro lines and the person-month lines. */
.rq-review tr.rq-sep td { padding: 0; height: 14px; background: var(--bg-secondary); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
/* Decision column: the Accepted/Returned status never breaks inside the word ("Returne / d"). */
.rq-review .rq-status { white-space: nowrap; overflow-wrap: normal; }
/* The "returned after acceptance" note sits in the no-wrap number cell: let it wrap and cap its width, otherwise it widens the whole table past the screen. */
.rq-review [data-role="after-acceptance"] { white-space: normal; max-width: 240px; margin-left: auto; text-align: right; }

/* Attendance Summary modal: fixed height so the layout stays still while it loads. */
.mtg-sum-body { height: 340px; overflow-y: auto; }
.mtg-sum-body h4 { margin: 10px 0 4px; }
.mtg-sum-body p { margin: 2px 0; }

/* ── Contact proposal inbox (partner portal phase 2) ──────────────────── */
/* The badge keeps its space when empty (visibility), so the toolbar never jumps. */
.cp-badge {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--red);
    color: var(--text-on-fill);
    font-size: calc(11px * var(--text-scale));
    font-weight: 700;
    text-align: center;
}
.cp-badge.is-empty { visibility: hidden; }
/* Fixed size: moving between the list and a review never resizes the dialog. */
.modal.cp-inbox-modal {
    display: flex;
    flex-direction: column;
    width: min(820px, 94vw);
    height: 80vh;
    max-height: 80vh;
}
.cp-inbox-modal .modal-header { flex-shrink: 0; }
.cp-inbox-modal .cp-inbox-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}
.cp-item-main { min-width: 0; overflow-wrap: anywhere; }
.cp-item-title { font-weight: 600; }
.cp-review-title { margin: 12px 0 8px; overflow-wrap: anywhere; }
.cp-notice, .cp-warning {
    margin: 8px 0;
    padding: 8px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border-default);
}
.cp-warning {
    background: var(--yellow-bg);
    border-color: var(--yellow-border);
}
.cp-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.cp-table th, .cp-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-default);
    vertical-align: top;
    overflow-wrap: anywhere;
}
.cp-table tr.cp-conflict td { background: var(--yellow-bg); border-bottom-color: var(--yellow-border); }
.cp-table tr.cp-conflict td:first-child { box-shadow: inset 4px 0 0 var(--yellow); }
.cp-table tr.cp-conflict .cp-conflict-note { color: var(--yellow-text, var(--text-muted)); font-weight: 600; }
.cp-conflict-note { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); }
.cp-comment-label { display: block; margin: 8px 0 4px; }
.cp-actions { display: flex; gap: 8px; margin-top: 12px; }
.ai-inbox-table td, .ai-inbox-table th { vertical-align: top; }
.ai-changed-count { margin: 8px 0; font-weight: 600; min-height: 1.5em; }
.ai-only-changed { display: block; margin: 0 0 8px; }
.ai-review-table { min-height: 120px; }
.cp-table tr.ai-changed td { background: var(--yellow-bg); border-bottom-color: var(--yellow-border); }
.cp-table tr.ai-changed td:first-child { box-shadow: inset 4px 0 0 var(--yellow); }
.cp-table td.ai-cell { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Monitoring trend card (monitoring_trend.js): same look as .mon-card, full grid width */
.mon-trend-card {
    grid-column: 1 / -1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.mon-trend-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-tertiary);
}
.mon-trend-title { font-size: calc(12px * var(--text-scale)); font-weight: 600; color: var(--text-primary); }
.mon-trend-controls { display: flex; align-items: center; gap: 8px; }
.mon-trend-toggle { display: inline-flex; gap: 2px; }
.mon-trend-toggle .btn.mon-trend-on { background: var(--bg-secondary); color: var(--text-primary); font-weight: 600; }
.mon-trend-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mon-trend-wrap { position: relative; height: 280px; width: 100%; min-width: 0; overflow: hidden; }
.mon-trend-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: calc(13px * var(--text-scale));
}
.mon-trend-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mon-trend-key { display: inline-flex; align-items: center; gap: 6px; }
.mon-trend-sw { display: inline-block; width: 16px; height: 0; border-top: 2px solid #1565C0; }
.mon-trend-sw-dash { border-top: 2px dashed #F5A623; }
.mon-trend-sw-full, .mon-trend-sw-hollow {
    width: 9px; height: 9px; border: 2px solid #1565C0; border-radius: 50%; background: #1565C0;
}
.mon-trend-sw-hollow { background: transparent; }
.mon-trend-gaps { margin: 0; min-height: 1.2em; }

/* Dashboard alert for due internal check-ins (hidden when empty). */
.dash-checkin-alerts { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.dash-checkin-alert {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px;
    background: var(--bg-active);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    font-size: calc(13px * var(--text-scale));
}

/* Settings dialog: smaller icon buttons inside list rows, and tab glyph icons */
.btn-icon-action--sm { width: 28px; min-width: 28px; height: 28px; font-size: 15px; }
.btn-icon-action--sm.is-busy { opacity: 0.45; }
.settings-dialog .settings-tab .icon { margin-right: 6px; vertical-align: -0.125em; }
label.btn-icon-action:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); outline: none; }

/* Expand/collapse chevrons and check marks are SVG icons now: centre them in their controls. */
.btn-collapse-wp, .btn-toggle-subtasks, .gantt-wp-toggle, .budget-expand-btn,
.plan-dv-wp-header .chevron { display: inline-flex; align-items: center; justify-content: center; }
.fc-rt-check .icon, .dg-cell-mark .icon, .dg-sent-status .icon { vertical-align: -0.15em; }

.status-dot-label {
    margin-left: 6px;
    font-size: calc(12px * var(--text-scale));
    text-transform: capitalize;
    vertical-align: middle;
    white-space: nowrap;
}

.chart-empty-note {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 28%;
    pointer-events: none;
}

/* Settings > My account: inline result message (space reserved so nothing jumps) */
.settings-account-msg { min-height: 1.4em; margin: 8px 0 0; }
.settings-account-msg.is-ok { color: var(--success); }
.settings-account-msg.is-error { color: var(--danger); }