/* ======================================================================
 * prism.css — Luminus Prism (internal PM) theme
 * ----------------------------------------------------------------------
 * Adapted from the Luminus Dashboard theme so both tools read as one
 * family. EVERYTHING themes from the :root tokens below — change a token
 * here, do NOT hardcode colors/fonts elsewhere in the app.
 * ====================================================================== */

:root {
    /* --- Brand color tokens (from luminus.agency) -------------------- */
    --color-primary: #010031;   /* deep navy — headings, logo, key numbers */
    --color-accent:  #00bef3;   /* cyan — borders, links, emphasis        */
    --color-text:    #383d45;   /* body copy — darker neutral for legibility */
    --color-bg:      #ffffff;   /* page background                        */
    --color-link:    #00bef3;

    /* Supporting tones — neutral grays, darker than the Luminus palette
       for legibility (text and hairlines stepped down in the same range) */
    --color-muted:   #5d6570;   /* secondary/label text                   */
    --color-surface: #ffffff;   /* card background                        */
    --color-line:    #d6dae0;   /* hairlines / table grid                 */
    --color-soft:    #f3f6f9;   /* table headers, quiet fills             */
    --color-page:    #f4f5f7;   /* faint gray canvas behind white cards   */
    --color-tint:    #fafbfc;   /* between canvas and white — control bars */
    --color-mist:    #fbfcfd;   /* halfway page<->white — workarea tabs, row hovers */

    /* Elevation — replaces hard accent rules with soft lift */
    --shadow-header: 0 1px 6px rgba(1, 0, 49, .10);
    --shadow-card:   0 1px 3px rgba(1, 0, 49, .05);

    /* Buttons (Scoro-style dark/light pair) — quiet, heavily reused */
    --color-slate:      #494F59;   /* dark button bg; row-title text     */
    --btn-dark-hover:   #383d45;
    --btn-light:        #f7f9fd;
    --btn-light-hover:  #e9edf3;
    --btn-radius:       3px;

    /* Status tones */
    --color-good:    #1e9e6a;
    --color-warn:    #d77a00;
    --color-alert:   #d23b3b;
    --color-idle:    #9aa3b0;

    /* --- Typography (Adobe Typekit: proxima-nova) ------------------- */
    --font-heading: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    --weight-heading: 700;
    --weight-body:    400;

    /* --- Shape & rhythm: sharp, flat, airy -------------------------- */
    --radius: 0;
    --border-width: 2px;
    --border-accent: var(--border-width) solid var(--color-accent);
    --border-primary: var(--border-width) solid var(--color-primary);
    --border-subtle: 1px solid var(--color-line);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
}

/* ----------------------------------------------------------------------
 * Base
 * -------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }        /* jump links glide */
.panel[id] { scroll-margin-top: var(--space-3); }

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

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    color: var(--color-primary);
    line-height: 1.2;
    margin: 0 0 var(--space-3);
}
h1 { font-size: 1.35rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; letter-spacing: .01em; }

a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Quiet links: inherit the surrounding text color (link affordance on hover) */
a.link-quiet { color: inherit; }
a.link-quiet:hover { color: var(--color-link); text-decoration: none; }

.muted { color: var(--color-muted); }
.small { font-size: .82rem; }

/* ----------------------------------------------------------------------
 * Layout shell
 * -------------------------------------------------------------------- */
.page { max-width: 1780px; margin: 0 auto;
        padding: 0 3rem var(--space-5); }
/* Header content aligns to the same container as the working area */
.topbar-inner { max-width: 1780px; margin: 0 auto; padding: 0 3rem;
                display: flex; align-items: center; gap: var(--space-3); width: 100%; }
@media (max-width: 1100px) {
    .page, .topbar-inner { padding-left: var(--space-4); padding-right: var(--space-4); }
}

.topbar {
    display: flex;
    padding: var(--space-2) 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-header);      /* soft lift off the gray canvas */
    margin-bottom: var(--space-3);
    /* Sticky: above page content + its dropdowns (30-60), below the
       fullscreen rich-text editor (80) and tooltips (9999). */
    position: sticky;
    top: 0;
    z-index: 70;
}
/* App-icon brand mark: navy rounded tile + the dark-bkg prism SVG
   (crisper than the raster apple-touch icon at this size) */
.topbar .brand-mark { width: 44px; height: 44px; border-radius: 10px;
    background: var(--color-primary); display: flex; align-items: center;
    justify-content: center; flex: none; }
.topbar .brand-mark img { width: 85%; height: auto; display: block; }
.topbar .spacer { flex: 1; }
.topbar .context { color: var(--color-muted); font-size: .9rem; }
.topbar .logout { margin-left: var(--space-3); font-size: .9rem; }

/* Primary navigation in the top bar */
.topnav { display: flex; gap: var(--space-3); margin-left: var(--space-3); flex-wrap: wrap; }
.topnav a { font-family: var(--font-heading); font-weight: var(--weight-heading);
            color: var(--color-primary); font-size: .9rem; padding: 4px 2px; border-bottom: 2px solid transparent; }
.topnav a:hover { text-decoration: none; border-bottom-color: var(--color-line); }
.topnav a.active { border-bottom-color: var(--color-accent); }

/* ----------------------------------------------------------------------
 * Forms & controls
 * -------------------------------------------------------------------- */
/* Field metrics match the buttons (.9rem, 3px radius) so controls and
   forms sit uniformly on one line height. Text-type inputs need 1px
   more vertically than selects/buttons to land at the same height. */
select,
input[type="date"], input[type="time"], input[type="number"], input[type="text"],
input[type="email"], input[type="password"], input[type="url"] {
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--color-text);
    padding: 5px 10px;
    border: var(--border-subtle);
    border-radius: var(--btn-radius);
    background: var(--color-bg);
}
/* With appearance:none (custom caret below), selects size like text
   inputs and take the same vertical padding. */
select,
input[type="date"], input[type="time"], input[type="number"], input[type="text"],
input[type="email"], input[type="password"], input[type="url"] {
    padding-top: 6px;
    padding-bottom: 6px;
}
/* The native calendar/clock widgets add ~2px — trim so they sit at 35px too */
input[type="date"], input[type="time"] { padding-top: 5px; padding-bottom: 5px; }
select:focus, input:focus { outline: none; border-color: var(--color-accent); }

/* Native selects: swap the OS arrow for the same clean caret the
   search-and-select dropdowns use, with matching breathing room. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5 5 7l3.5-3.5' fill='none' stroke='%235d6570' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

textarea {
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--color-text);
    padding: 6px 10px;
    border: var(--border-subtle);
    border-radius: var(--btn-radius);
    background: var(--color-bg);
    width: 100%;
    resize: vertical;
}
textarea:focus { outline: none; border-color: var(--color-accent); }

/* Comment stream (client/task detail pages) */
.comment { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-page); }
.comment:last-child { border-bottom: none; }
.comment-meta { font-size: .82rem; color: var(--color-muted); margin: 0 0 4px; }
.comment-meta strong { color: var(--color-primary); }
.comment-body { white-space: pre-wrap; margin: 0; font-size: 14px; }

/* Light button is the default (secondary actions everywhere);
   .btn--dark marks the primary action of a view. Deliberately quiet —
   these appear dozens of times per screen. */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-slate);
    background: var(--btn-light);
    border: 1px solid var(--color-line);
    border-radius: var(--btn-radius);
    padding: 5px 16px;
    cursor: pointer;
}
.btn:hover { background: var(--btn-light-hover); }
/* Anchor-buttons must not inherit the link hover underline. */
a.btn:hover, a.btn:focus { text-decoration: none; }

.btn--dark {
    color: #fff;
    background: var(--color-slate);
    border-color: var(--color-slate);
}
.btn--dark:hover { background: var(--btn-dark-hover); border-color: var(--btn-dark-hover); }

/* Disabled buttons gray out and lose their hover (e.g. Add Widget once
   every allowed widget is already on the Hub). */
.btn:disabled, .btn--dark:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { background: var(--btn-light); }
.btn--dark:disabled:hover { background: var(--color-slate); border-color: var(--color-slate); }

/* Inline field rows (e.g. contact add/edit). TOP-aligned on purpose:
   bottom alignment made fields jump upward when browser/extension
   autofill UI injected below a focused input. The button gets a
   margin matching the label height so it lines up with the inputs. */
.form-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.form-grid .field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-grid label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.form-grid > .btn { margin-top: 22px; }

.stack > * + * { margin-top: var(--space-4); }
/* The gap under the page title matches non-stack (list) pages */
.stack > .page-title + * { margin-top: var(--space-2); }

/* ----------------------------------------------------------------------
 * Top-level section pattern (reference: Contacts)
 * Title sits ON the gray canvas above the working area; inside the white
 * panel: controls row (+ New, filters, search) -> stats row -> table.
 * -------------------------------------------------------------------- */
.page-title { display: flex; align-items: baseline; justify-content: space-between;
              gap: var(--space-3); margin: 0 0 var(--space-2); }
.page-title h1 { margin: 0; }
.settings-link { display: inline-flex; align-items: center; gap: 6px;
                 font-weight: 600; font-size: .9rem; color: var(--color-slate); }
.settings-link:hover { color: var(--color-primary); text-decoration: none; }
.settings-link svg { color: var(--color-muted); }
/* Right side of the title row: Help (everyone) + the Settings dd (admins). */
.pt-tools { display: inline-flex; align-items: center; gap: 18px; }

.controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
                /* tinted band between the gray canvas and the white panel,
                   bled to the panel edges */
                background: var(--color-tint);
                margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
                padding: var(--space-3) var(--space-4);
                border-bottom: var(--border-subtle); }
.controls-row .spacer { flex: 1; }
.controls-row form { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Inline icon inside a button (e.g. the + on New) */
.btn .icon { display: inline-block; vertical-align: -1px; margin-right: 6px; }

/* ----------------------------------------------------------------------
 * Boxless filter dropdowns (controls row) — icon + label + caret trigger,
 * menu below. Two flavors: single-select (.dd-option rows) updates
 * immediately; multiselect (.dd-check rows) applies via its Filter button.
 * -------------------------------------------------------------------- */
.dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; flex: none; }

.dd { position: relative; display: inline-block; }
.dd-trigger {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; border-radius: var(--btn-radius);
    font-family: var(--font-body); font-weight: 600; font-size: .9rem;
    color: var(--color-text); padding: 5px 8px; cursor: pointer;
}
.dd-trigger:hover { background: var(--btn-light-hover); }
.dd-trigger .dd-icon, .dd-trigger .dd-caret { color: var(--color-muted); flex: none; }
.dd-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    min-width: 210px; background: var(--color-surface);
    border: var(--border-subtle); border-radius: 3px; padding: 4px;
    box-shadow: 0 4px 16px rgba(1, 0, 49, .14);
}
.dd.open .dd-menu { display: block; }
.dd-option {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; border-radius: 3px;
    padding: 8px 10px; font-family: var(--font-body);
    font-size: .9rem; color: var(--color-text);
    cursor: pointer; text-align: left;
}
/* People rows read the same everywhere (the modal pickers' style):
   avatar + small muted proxima name */
.dd-option .avatar + .verbatim, .dd-check .avatar + .verbatim,
.check-label .avatar + .verbatim {
    font-family: var(--font-body); font-size: .75rem;
    font-weight: 400; color: var(--color-muted);
}
.dd-option:hover { background: var(--color-soft); }
.dd-check {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; font-size: .9rem; color: var(--color-text);
    cursor: pointer; border-radius: 3px;
}
.dd-check:hover { background: var(--color-soft); }
.dd-foot {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 8px 6px 4px; border-top: var(--border-subtle); margin-top: 4px;
}
.dd-menu--right { left: auto; right: 0; }
/* Form-field dropdown ([data-field], class dd--field): the trigger is
 * styled as an input so it sits in .field stacks with real controls. */
.dd--field { display: block; }
.dd--field .dd-trigger {
    display: flex; width: 100%; justify-content: space-between;
    font-weight: 400; font-size: .9rem;
    border: var(--border-subtle); background: var(--color-bg);
    padding: 6px 10px;   /* matches text-input metrics (35px total) */
    /* buttons center text by default — a wrapped label (long
       project name in a narrow column) must stay left-aligned. */
    text-align: left; }
.dd--field .dd-trigger:hover { background: var(--color-bg); }
.dd--field.open .dd-trigger { border-color: var(--color-accent); }
.dd--field .dd-menu { width: 100%; }
/* Rich field labels/options carry an avatar beside the text */
.dd--field .dd-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dd--field .dd-label .verbatim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Searchable select: a .dd-search input atop a scrolling option list */
.dd-search {
    display: block; width: calc(100% - 8px); margin: 4px 4px 6px;
    border: var(--border-subtle); border-radius: 3px;
    font-family: var(--font-body); font-size: .875rem;
    color: var(--color-text); padding: 6px 8px;
}
.dd-options-scroll { max-height: 300px; overflow-y: auto; }
/* Plain navigation links inside a dropdown menu (e.g. Settings shortcuts) */
.dd-menu a.dd-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; font-size: .9rem; color: var(--color-text);
    border-radius: 3px;
}
.dd-menu a.dd-link:hover { background: var(--color-soft); text-decoration: none; }

/* ----------------------------------------------------------------------
 * Form field groups (Add/Edit views) — labeled groups laid out as
 * side-by-side COLUMNS; fields stack vertically inside each column at
 * full width, so nothing reflows when a field takes focus (the old
 * bottom-aligned wrap row shifted when autofill UI injected).
 * -------------------------------------------------------------------- */
.form-cols { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-start; }
.form-cols .field-group { flex: 1; min-width: 280px; max-width: 460px; }
.field-group .group-label {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-muted); margin: 0 0 var(--space-3);
}
.field-col { display: flex; flex-direction: column; gap: var(--space-3); }
.field-col .field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-col label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.field-col input, .field-col select { width: 100%; }
/* Short fields sharing one line inside a column (e.g. city/state/zip) */
.field-row { display: flex; gap: var(--space-2); }
.field-row .field { flex: 1; }
.field-row .field--xs { flex: 0 0 64px; }
.field-row .field--sm { flex: 0 0 96px; }
.form-actions { margin-top: var(--space-4); }

/* ----------------------------------------------------------------------
 * Status pill + in-list dropdown editor (statuses are DB rows with a
 * color; this component renders whatever the module defines)
 * -------------------------------------------------------------------- */
.status-cell { position: relative; display: inline-block; }
.status-pill {
    border: none; border-radius: var(--btn-radius);
    color: #fff; font-family: var(--font-body); font-weight: 600;
    font-size: .8rem; padding: 3px 10px; cursor: pointer; white-space: nowrap;
}
.status-menu {
    display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
    min-width: 180px; background: var(--color-surface);
    border: var(--border-subtle); border-radius: 3px; padding: 4px;
    box-shadow: 0 4px 16px rgba(1, 0, 49, .14); text-align: left;
}
.status-cell.open .status-menu { display: block; }
.status-option {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; border-radius: 3px;
    padding: 8px 10px; font-size: .9rem; color: var(--color-text);
    cursor: pointer; text-align: left;
}
.status-option:hover { background: var(--color-soft); }

.stats-row { display: flex; flex-wrap: wrap; justify-content: space-around;
             gap: var(--space-3); padding: var(--space-4) 0;
             border-bottom: var(--border-subtle); }
.stat { text-align: center; min-width: 110px; }
.stat .label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
               color: var(--color-muted); }
.stat .value { font-family: var(--font-heading); font-weight: var(--weight-heading);
               font-size: 1.6rem; color: var(--color-primary); }
.stat .value .sub { font-size: .85rem; color: var(--color-muted); font-weight: var(--weight-body); }
/* Stat numbers as jump links to their section */
.stat .value a { color: inherit; text-decoration: none; }
.stat .value a:hover { color: var(--color-link); }

/* Sortable column headers — click the title to sort, arrow marks current */
table.data thead th a { color: inherit; text-decoration: none; white-space: nowrap; }
table.data thead th a:hover { color: var(--color-accent); }

/* Main entity link in a list row: bold, matching the stat values above
   the table; blue only on hover — a table full of blue links is hard
   to scan. */
.row-title { font-weight: 700; color: var(--color-primary); }
.row-title:hover { color: var(--color-link); text-decoration: none; }

/* Quiet inline icon action (e.g. remove contact) */
.icon-btn { background: none; border: none; padding: 2px; cursor: pointer;
            color: var(--color-muted); vertical-align: middle; }
.icon-btn:hover { color: var(--color-alert); }

/* ----------------------------------------------------------------------
 * File dropzone — shared upload landing area (client / project / task /
 * quote file sections). Drag onto it or click/browse to pick manually.
 * -------------------------------------------------------------------- */
.dropzone {
    border: 2px dashed var(--color-line);
    border-radius: 4px;
    background: var(--color-tint);
    padding: var(--space-4);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.dropzone.dz-over { border-color: var(--color-accent); background: #eef9fe; }
.dropzone.dz-busy { pointer-events: none; }   /* stays readable — progress shows inside */

/* Per-file upload progress (animated fill; green when done) */
.dz-progress { margin-top: var(--space-3); text-align: left; }
.dz-file { display: flex; align-items: center; gap: 10px; padding: 4px 0;
           font-size: .85rem; color: var(--color-text); }
.dz-file .dz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A flex item's min-width defaults to its content width, so one long
   unbreakable filename widened the row, the zone, and its parent
   column (Tim, 2026-09-18). min-width:0 lets the ellipsis do its job;
   the zone itself is clamped so nothing inside can push it wider. */
.dropzone, .dz-progress { min-width: 0; max-width: 100%; overflow: hidden; }
.dz-file { min-width: 0; }
.dz-file .dz-bar { flex: 0 0 140px; height: 6px; background: var(--color-line);
                   border-radius: 3px; overflow: hidden; }
.dz-file .dz-fill { display: block; height: 100%; width: 0;
                    background: var(--color-accent); border-radius: 3px;
                    transition: width .25s ease; }
.dz-file.dz-done .dz-fill { background: var(--color-good); }

/* Collapsed add-forms revealed by a panel-head button */
.reveal { display: none; }
.reveal.open { display: block; }
/* While its target is open, the Add button reads as a Cancel link */
.btn.is-cancel { background: none; border-color: transparent; color: var(--color-link); }
.btn.is-cancel:hover { background: none; text-decoration: underline; }
.dropzone .dz-icon { color: var(--color-muted); display: block; margin: 0 auto 8px; }
.dropzone.dz-over .dz-icon { color: var(--color-accent); }
.dropzone p { margin: 0; color: var(--color-muted); font-size: .9rem; }
.dropzone p strong { color: var(--color-text); }
.dropzone .dz-browse {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: .9rem; color: var(--color-link); text-decoration: underline;
}

/* ----------------------------------------------------------------------
 * Modal (native <dialog>) — add-a-record popups (contacts now; tasks
 * and events later). Openers use [data-modal-open="#id"]; forms with
 * [data-modal-submit] post via fetch, close, and refresh the region.
 * -------------------------------------------------------------------- */
dialog.modal {
    border: none; border-radius: 4px; padding: var(--space-4);
    min-width: 440px; max-width: 92vw; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 12px 40px rgba(1, 0, 49, .28);
}
dialog.modal::backdrop { background: rgba(1, 0, 49, .30); }
/* Wide variant: multi-column forms (e.g. Modify Client's three groups) */
dialog.modal--wide { width: min(960px, 92vw); }
dialog.modal--xl { width: min(1200px, 94vw); }
.modal .modal-title { margin-bottom: var(--space-3); }
/* Full-width gray header bar for the larger add/edit modals */
.modal-bar { display: flex; align-items: center; justify-content: space-between;
             gap: var(--space-3);
             margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
             padding: 14px var(--space-4); background: var(--color-soft);
             border-bottom: 1px solid var(--color-line); }
.modal-bar .modal-title { margin: 0; }
.modal-x { background: none; border: none; cursor: pointer; padding: 4px;
           line-height: 0; color: var(--color-muted); border-radius: 3px; flex: none; }
.modal-x:hover { color: var(--color-text); }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

/* Collapsed create-form section, revealed by the + New control */
.new-form { display: none; padding: var(--space-3) 0; border-bottom: var(--border-subtle); }
.new-form.open { display: block; }

/* ----------------------------------------------------------------------
 * Panels
 * -------------------------------------------------------------------- */
.panel { padding: var(--space-4); background: var(--color-surface); box-shadow: var(--shadow-card); }
/* Side-by-side panels (e.g. Comments | Files on detail pages) */
.panel-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 980px) { .panel-cols { grid-template-columns: 1fr; } }
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
/* Detail-page header (entity title + status pill): ruled off from the
   content below. Reused by client / project / task / event views. */
.panel-head--rule {
    border-bottom: var(--border-subtle);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
}
.panel-head .section-title { margin: 0; }
/* Historical count beside a section title: "Quotes (15)" */
.section-title .count { font-size: .85em; font-weight: 400;
                        font-family: var(--font-body); color: var(--color-muted); }
.section-title { margin-top: var(--space-2); text-transform: capitalize; }
.section-title .muted { text-transform: none; }
/* User-entered names (clients, projects, people) render verbatim —
   capitalize would rewrite brand casing like "iRobot". */
.verbatim, .section-title.verbatim { text-transform: none; }

/* ----------------------------------------------------------------------
 * Tables — dense, legible
 * -------------------------------------------------------------------- */
table.data { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.data th, table.data td { border-bottom: 1px solid var(--color-page); padding: 8px 10px; text-align: right; font-variant-numeric: tabular-nums; vertical-align: top; }
table.data tbody td { padding-top: 13px; padding-bottom: 13px; }  /* rows breathe */
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { background: var(--color-soft); color: var(--color-primary);
                      font-weight: var(--weight-heading); border-bottom: var(--border-accent); }
table.data tfoot td { font-weight: var(--weight-heading); color: var(--color-primary);
                      border-top: var(--border-accent); background: var(--color-soft); }
.table-scroll { overflow-x: auto; }

/* ----------------------------------------------------------------------
 * Notes — informational, accent-tinted (NOT an error/alarm color)
 * -------------------------------------------------------------------- */
.notes {
    border: var(--border-subtle);
    border-left: var(--border-width) solid var(--color-accent);
    background: var(--color-soft);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.notes strong { color: var(--color-primary); font-family: var(--font-heading); }
.notes--warn { border-left-color: var(--color-warn); }

/* small inline pill */
.pill { display: inline-block; padding: 2px 8px; border: 1px dashed var(--color-idle);
        color: var(--color-idle); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }

/* ----------------------------------------------------------------------
 * Settings area — hub cards, module tabs, color swatches
 * -------------------------------------------------------------------- */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                 gap: var(--space-4); }
.settings-card { display: block; background: var(--color-surface); box-shadow: var(--shadow-card);
                 padding: var(--space-4); color: var(--color-text); }
.settings-card h3 { margin-bottom: 6px; }
.settings-card p { margin: 0; font-size: .9rem; color: var(--color-muted); }
a.settings-card:hover { text-decoration: none; box-shadow: 0 3px 12px rgba(1, 0, 49, .12); }
.settings-card.disabled { opacity: .55; }

.tabs { display: flex; gap: var(--space-3); border-bottom: var(--border-subtle);
        margin-bottom: var(--space-3); }
.tabs a { padding: 6px 2px; font-weight: 600; font-size: .95rem;
          color: var(--color-muted); border-bottom: 2px solid transparent; }
.tabs a:hover { text-decoration: none; color: var(--color-text); }
.tabs a.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }

.swatch { width: 16px; height: 16px; border-radius: 4px; display: inline-block;
          vertical-align: -3px; margin-right: 8px; }

/* Drag-to-reorder rows (tbody[data-sortable]) */
.drag-handle { cursor: grab; color: var(--color-muted); }
tr.dragging { opacity: .45; }
/* Fade per-cell (not the tr) so the status selector's cell can opt out:
   row-level opacity created a stacking context that painted the open
   status menu underneath the rows below it. */
tr.archived-row > td { opacity: .55; }
tr.archived-row > td:has(.status-cell) { opacity: 1; }

/* Topnav right side: icon cluster + user lockup pill (Scoro-style) */
.topnav-icons { display: flex; align-items: center; gap: 2px; margin-right: 10px; }
.topbar .icon-only { padding: 8px; border-radius: 50%; line-height: 0;
                     color: var(--color-muted); gap: 0; }
.topbar .icon-only:hover { background: var(--btn-light-hover); color: var(--color-text); }
.user-pill { display: inline-flex; align-items: center; gap: 10px;
             background: var(--color-soft); border-radius: 999px;
             padding: 4px 12px 4px 5px; }
.user-pill:hover { background: var(--btn-light-hover); }
.user-meta { display: flex; flex-direction: column; align-items: flex-start;
             line-height: 1.15; text-align: left; }
.user-name { font-family: var(--font-heading); font-weight: var(--weight-heading);
             font-size: .85rem; color: var(--color-primary); }
.user-co { font-size: .72rem; color: var(--color-muted); }

/* Header search dropdown + grouped results (shared with bookmark list) */
.nav-search { width: 340px; }
.nav-search-results { max-height: 420px; overflow-y: auto; }
.sr-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
            color: var(--color-muted); padding: 10px 10px 3px;
            font-weight: 700; }
.sr-item { display: flex; align-items: center; gap: 8px;
           padding: 7px 10px; border-radius: 3px;
           color: var(--color-text); font-size: .9rem; }
.sr-item:hover { background: var(--color-soft); text-decoration: none; }
.sr-item .sr-ico { flex: none; line-height: 0; color: var(--color-muted); }
.sr-item .sr-main { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }

/* Search-result variants: type filter chips under the field, colored
 * group headings with match counts, "N other matches" expander rows */
.sr-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 4px;
            border-bottom: 1px solid var(--color-page); margin-bottom: 4px; }
.sr-chip { display: inline-flex; align-items: center; gap: 6px; border: 0;
           background: var(--btn-light); color: var(--color-text);
           border-radius: var(--btn-radius); padding: 5px 10px;
           font-size: .78rem; font-weight: 600; cursor: pointer; }
.sr-chip:hover { background: var(--btn-light-hover); }
.sr-chip.active { background: var(--color-primary); color: #fff; }
.sr-chip-n { color: var(--color-muted); font-weight: 600; }
.sr-chip.active .sr-chip-n { color: rgba(255, 255, 255, .72); }
.sr-group--hit { color: var(--color-link); font-size: .74rem; }
.sr-count { color: var(--color-muted); font-weight: 600; text-transform: none; }
.sr-more { display: block; width: 100%; text-align: left; border: 0;
           background: none; cursor: pointer; padding: 7px 10px 9px 32px;
           border-radius: 3px; font-size: .85rem; color: var(--color-text);
           font-family: inherit; }
.sr-more:hover { background: var(--color-soft); }

/* Profile photo editor row */
.avatar-edit { display: flex; align-items: center; gap: var(--space-3); }

/* Circle user avatars: photo, or initials chip fallback */
.avatar { border-radius: 50%; object-fit: cover; flex: none;
          display: inline-block; vertical-align: middle;
          border: 2px solid #fff; box-sizing: content-box;
          box-shadow: 0 0 4px rgba(1, 0, 49, .16); }
.avatar--initials { background: var(--color-slate); color: #fff;
                    font-weight: 700; letter-spacing: .03em;
                    display: inline-flex; align-items: center;
                    justify-content: center; }

/* Users & Permissions: permission-set checkbox grid, cost-rate form,
 * and the read-only access list on My Settings */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
/* User expander: Cost Rate | Work Schedule side by side */
.uexp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--space-4) * 2); align-items: start; }
.uexp-cols--single { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
@media (max-width: 1100px) { .uexp-cols { grid-template-columns: 1fr; } }
.uexp-col table.subtable { width: 100%; min-width: 0; }
.uexp-title { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-muted); }
.cost-add { display: flex; align-items: flex-end; gap: var(--space-2);
            margin-top: var(--space-3); }
.cost-add .field { flex: none; width: 150px; }
.access-list { list-style: none; margin: 0; padding: 0; }
.access-list li { padding: 6px 0; border-bottom: 1px solid var(--color-page);
                  font-size: .9rem; }

/* Bookmarks dropdown: saved-view rows + the save-current form */
.bm-row { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 8px;
          border-radius: 3px; }
.bm-row .bm-drag { flex: none; line-height: 0; }
.bm-row.dragging { opacity: .45; }
/* The saved view the current URL matches: tinted row + bold name */
.bm-row--active { background: var(--color-soft);
                  box-shadow: inset 2px 0 0 var(--color-accent); }
.bm-row--active .bm-apply { font-weight: 700; color: var(--color-primary); }
.dd-menu a.bm-clear { border-top: 1px solid var(--color-page); margin-top: 4px;
                      padding-top: 9px; color: var(--color-muted); }
.dd-menu a.bm-clear:hover { color: var(--color-text); }
/* Topnav jump list: icon-led rows read as indented under the page labels */
.dd-menu a.bm-jump { padding-left: 18px; gap: 8px; }
.dd-menu a.bm-jump svg { flex: none; color: var(--color-muted); }
.bm-row:hover { background: var(--color-soft); }
.bm-row .bm-apply { flex: 1 1 auto; min-width: 0; padding: 7px 10px;
                    font-size: .9rem; color: var(--color-text); }
.bm-row .bm-apply:hover { text-decoration: none; color: var(--color-link); }
/* Star + trash sit together, flush right */
.bm-actions { display: flex; align-items: center; gap: 4px;
              flex: none; margin-left: auto; }
.bm-act { display: inline-flex; line-height: 0; flex: none; }
.bm-save { display: flex; gap: 8px; padding: 8px 6px 4px;
           border-top: var(--border-subtle); margin-top: 4px; }
.bm-save input[type="text"] { flex: 1; min-width: 0; }
/* Share toggle on own rows: gray net, accent-cyan once shared */
.bm-share.active { color: var(--color-accent); }
/* Shared rows (promoted default + flyout): owner rides the name */
.bm-shrow .bm-owner { margin-left: 8px; font-size: .74rem; color: var(--color-muted);
                      font-weight: 400; white-space: nowrap; }
/* Shared Bookmarks flyout — 2nd-level menu opening to the right,
 * above the Clear link. Hover-open (with the row as the bridge) plus
 * a click toggle (.open) for touch. */
.bm-fly { position: relative; }
.bm-fly-lk { display: flex; align-items: center; gap: 8px; width: 100%;
             padding: 8px 10px; border: 0; background: none; cursor: pointer;
             font: inherit; font-size: .9rem; color: var(--color-text);
             text-align: left; border-radius: 3px; }
.bm-fly-lk svg:first-child { color: var(--color-muted); flex: none; }
.bm-fly-lk .bm-fly-chev { margin-left: auto; color: var(--color-muted); }
.bm-fly:hover > .bm-fly-lk, .bm-fly.open > .bm-fly-lk { background: var(--color-soft); }
.bm-fly-menu { display: none; position: absolute; left: calc(100% - 4px); top: -6px;
               min-width: 280px; max-height: 340px; overflow-y: auto;
               background: #fff; border: var(--border-subtle); border-radius: 4px;
               box-shadow: 0 8px 24px rgba(28, 32, 66, .16); padding: 6px; z-index: 40; }
.bm-fly:hover > .bm-fly-menu, .bm-fly.open > .bm-fly-menu { display: block; }

/* ----------------------------------------------------------------------
 * Pipeline board (.pl) — one column per quote status, drag cards to move.
 * -------------------------------------------------------------------- */
.pl-board { display: flex; align-items: stretch;
            overflow-x: auto; padding-bottom: var(--space-2); }
.pl-col { flex: 1 0 250px; min-width: 250px; display: flex; flex-direction: column;
          background: var(--color-page); }
.pl-col:first-child { border-radius: 0 0 0 3px; }
.pl-col:last-child { border-radius: 0 0 3px 0; }
.pl-col-head { border-bottom: 3px solid var(--color-idle); padding: 10px 12px; }
.pl-col-name { font-family: var(--font-heading); font-weight: var(--weight-heading);
               color: var(--color-primary); }
.pl-col-meta { font-size: .8rem; color: var(--color-muted); margin-top: 2px; }
.pl-col-meta strong { color: var(--color-text); }
.pl-col-body { flex: 1; padding: 10px; display: flex; flex-direction: column;
               gap: 10px; min-height: 220px; }
.pl-col.pl-over { outline: 2px dashed var(--color-accent); outline-offset: -2px; }
.pl-card { background: var(--color-surface); box-shadow: var(--shadow-card);
           border-radius: 3px; padding: 12px 14px; cursor: grab; }
.pl-card.dragging { opacity: .45; }
.pl-card-top { display: flex; align-items: flex-start; justify-content: space-between;
               gap: 8px; margin-bottom: 6px; }
.pl-card-title { font-family: var(--font-heading); font-weight: var(--weight-heading);
                 color: var(--color-primary); font-size: .92rem; line-height: 1.3; }
.pl-card-title:hover { color: var(--color-link); text-decoration: none; }
.pl-card-meta { display: flex; align-items: center; gap: 6px; font-size: .82rem;
                color: var(--color-muted); margin-top: 3px; }
.pl-card-meta svg { flex: none; }
.pl-card-foot { display: flex; justify-content: space-between; align-items: baseline;
                margin-top: 10px; font-size: .85rem; }
.pl-card-sum { font-variant-numeric: tabular-nums; font-family: var(--font-heading);
               font-weight: var(--weight-heading); color: var(--color-primary); }

/* ----------------------------------------------------------------------
 * Quote line editor (.ql) — Scoro-style inline grid.
 * Columns: icons | service+description | hours | rate | amount.
 * -------------------------------------------------------------------- */
.ql-grid {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 96px 116px 120px;
    gap: 0 var(--space-2);
    align-items: start;
}
.ql-head {
    font-family: var(--font-heading); font-weight: var(--weight-heading);
    font-size: .85rem; color: var(--color-primary);
    background: var(--color-soft); padding: 8px 10px;
    border-bottom: var(--border-accent);
}
.ql-head .ql-num { text-align: right; }
.ql-row { padding: 12px 10px; border-bottom: 1px solid var(--color-line); }
.ql-row.dragging { opacity: .45; }
.ql-icons { display: flex; flex-direction: column; align-items: center; gap: 6px;
            padding-top: 4px; grid-row: 1 / 3; }
.ql-icons .drag-handle { line-height: 0; color: var(--color-muted); }
.ql-service { min-width: 0; }
.ql-cell input[type="number"] { width: 100%; text-align: right; }
.ql-amount { text-align: right; padding-top: 6px; font-variant-numeric: tabular-nums; }
/* Description runs from the service column through the end of Rate */
.ql-desc { grid-column: 2 / 5; margin-top: 6px; }
.ql-desc input { width: 100%; }
.ql-heading { background: var(--color-soft); }
/* Section grip: only offered once Group prices is on; member rows ride
 * hidden inside the heading while a section drag is in flight. */
.ql-heading .ql-drag-section { display: none; }
.ql-heading.ql-has-group .ql-drag-section { display: inline; }
.ql-pocket { display: none; }
/* Group total on a subheading reads as a heading figure */
.ql-heading .ql-amount { font-family: var(--font-heading); font-weight: var(--weight-heading);
                         color: var(--color-primary); }
/* Heading stack matches the line-item description width (cols 2–4);
 * the Amount column shows the group total when a flag is on. */
.ql-heading .ql-heading-main { grid-column: 2 / 5; display: flex;
                               flex-direction: column; align-items: stretch; gap: 8px; }
.ql-heading-input { width: 100%;
                    font-family: var(--font-heading); font-weight: var(--weight-heading);
                    background: transparent; border-color: transparent; }
.ql-heading-input:hover { border-color: var(--color-line); }
.ql-heading-input:focus { background: var(--color-bg); }
.ql-flags { display: flex; align-items: center; gap: 14px; flex: none; }
.ql-flags .check-label { font-size: .82rem; white-space: nowrap; padding: 0; }
.ql-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* Info tooltip: hover/focus the (i) to reveal the explainer */
/* Global styled tooltip (replaces native [title] bubbles — prism.js
   lifts titles to data-tip and floats this single node) */
.tooltip { position: fixed; z-index: 9999; display: none;
           max-width: 320px; padding: 6px 10px;
           background: var(--color-primary); color: #fff;
           font-family: var(--font-body); font-size: .78rem; line-height: 1.4;
           border-radius: 3px; box-shadow: 0 4px 16px rgba(1, 0, 49, .25);
           pointer-events: none; }
.tooltip.show { display: block; }

.info-tip { position: relative; color: var(--color-muted); line-height: 0;
            cursor: help; display: inline-block; }
.info-tip .tip-body {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    width: 360px; line-height: 1.45; padding: 12px 14px;
    background: var(--color-primary); color: #fff;
    font-size: .8rem; border-radius: 3px;
    box-shadow: 0 4px 16px rgba(1, 0, 49, .25);
}
.info-tip:hover .tip-body, .info-tip:focus .tip-body { display: block; }

/* Additional Costs (pass-through vendor items) under the line grid */
.ql-ac { margin-top: var(--space-4); border-top: 1px solid var(--color-line);
         padding-top: var(--space-3); }
.ql-ac-head { display: flex; align-items: center; gap: 8px; font-weight: 700;
              color: var(--color-primary); margin-bottom: 10px; }
.qac-grid { display: grid; grid-template-columns: 28px 1fr 130px 130px;
            gap: var(--space-2); align-items: center; }
.qac-cols span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
                 color: var(--color-muted); }
.qac-cols .ql-num { text-align: right; }
.qac-row { margin-top: 6px; }
.qac-row input[type="number"] { text-align: right; }

.ql-summary { margin-top: var(--space-4); display: flex; flex-direction: column;
              align-items: flex-end; gap: 10px; }
.ql-sumrow { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
             font-size: .95rem; }
.ql-sumlabel { color: var(--color-text); display: inline-flex; align-items: center; gap: 8px; }
.ql-sumlabel input[type="number"] { width: 78px; text-align: right; }
.ql-sumval { min-width: 130px; text-align: right; font-variant-numeric: tabular-nums;
             font-family: var(--font-heading); font-weight: var(--weight-heading);
             color: var(--color-primary); }
.ql-total { border-top: var(--border-subtle); padding-top: 10px; }
.ql-total .ql-sumlabel, .ql-total .ql-sumval { font-size: 1.05rem; }

/* Date-range dropdown body (two date fields above the Clear/Filter foot) */
.dd-dates { display: flex; gap: 10px; padding: 10px 12px 4px; }
.dd-dates .field label { font-size: .72rem; }
.dd-dates input[type="date"] { width: 140px; }

/* Grouped tables (Activities & Rates): full-width group heading rows,
 * chevron-expandable detail rows with a nested subtable. */
tr.group-row td { background: var(--color-soft); text-align: left;
                  font-family: var(--font-heading); font-weight: var(--weight-heading);
                  color: var(--color-primary); padding-top: 9px; padding-bottom: 9px; }
tr.group-row .pill { margin-left: 8px; }
tr.group-row .icon-btn { margin-left: 6px; vertical-align: -1px; }
.expand-toggle svg { transition: transform .15s ease; }
.expand-toggle.open svg { transform: rotate(90deg); }
tr.expand-row { display: none; }
tr.expand-row.open { display: table-row; }
tr.expand-row > td { background: var(--color-tint); text-align: left;
                     padding: var(--space-3) var(--space-4); }
table.subtable { width: auto; min-width: 480px; font-size: .875rem; }
table.subtable th, table.subtable td { border-bottom-color: var(--color-line); }
table.subtable tbody td { padding-top: 8px; padding-bottom: 8px; }


/* Multiple buttons on a panel head */
.panel-head-actions { display: flex; align-items: center; gap: var(--space-2); }
.panel-head-actions .btn { text-decoration: none; }
.panel-head-actions .icon-btn { line-height: 0; }   /* svg baseline gap skews centering */

/* Danger action (e.g. Delete on a detail view) — bright red */
.btn--danger { background: var(--color-alert); border-color: var(--color-alert); color: #fff; }
.btn--danger:hover { background: #b83232; border-color: #b83232; color: #fff; }

/* Split button: main action + attached "..." segment opening a menu.
   The segment is also a .dd-trigger, whose boxless styling would strip
   the button chrome — re-assert it here (higher specificity). */
.btn-split { display: inline-flex; }
.btn-split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-split .btn-split-more { background: var(--btn-light); border: 1px solid var(--color-line);
                             border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
                             color: var(--color-slate); height: 100%;
                             margin-left: -1px; padding: 5px 9px; line-height: 0; }
.btn-split .btn-split-more:hover { background: var(--btn-light-hover); }
.btn-split .dd { display: flex; }

/* Breadcrumb masthead: ancestors link back up the chain; everything
   past the first level steps down (smaller, unbolded, lighter) */
.page-title .crumb { color: inherit; text-decoration: none; }
.page-title .crumb:hover { color: var(--color-link); }
.crumb-sep { color: var(--color-muted); font-weight: 400; font-size: .62em;
             margin: 0 10px; vertical-align: 2px; }
.page-title .crumb-sub { font-size: .74em; font-weight: 400;
                         color: var(--color-muted); }
.page-title a.crumb-sub:hover { color: var(--color-link); }

/* Sub-view tabs (e.g. Quote list | Quote templates). They live INSIDE
   the content panel, bled to its edges — a white tab band whose gray
   rule sits flush on the tinted controls band below it. */
.subnav { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-line); }
.panel > .subnav { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
                   padding: 12px var(--space-4) 0; }
.panel > .subnav + .controls-row { margin-top: 0; }
/* Tab bars with no filter row after them breathe on their own */
.panel > .subnav--gapped { margin-bottom: var(--space-4); }
.subnav-tab { display: inline-flex; align-items: center; gap: 8px;
              padding: 4px 2px 10px; margin-bottom: -1px; font-size: .92rem;
              font-weight: 600; color: var(--color-muted);
              border-bottom: 2px solid transparent; text-decoration: none; }
.subnav-tab:hover { color: var(--color-text); text-decoration: none; }
.subnav-tab.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }

/* Modal tabs (e.g. Project Settings | Budget Settings) */
.modal-tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-line);
              margin-bottom: var(--space-4); }
.mtab { background: none; border: none; cursor: pointer; padding: 4px 2px 10px;
        margin-bottom: -1px; font-family: var(--font-body); font-size: .92rem;
        font-weight: 600; color: var(--color-muted);
        border-bottom: 2px solid transparent; }
.mtab:hover { color: var(--color-text); }
.mtab.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.mtab-panel { display: none; }
.mtab-panel.active { display: block; }

/* Segmented control (Project type, Budget source) */
.seg { display: flex; border: 1px solid var(--color-line); border-radius: var(--btn-radius);
       overflow: hidden; }
.seg-opt { flex: 1; background: var(--btn-light); border: none; cursor: pointer;
           padding: 9px 14px; font-family: var(--font-body); font-size: .9rem;
           font-weight: 600; color: var(--color-muted);
           display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-line); }
.seg-opt:hover { background: var(--btn-light-hover); }
.seg-opt.active { background: #e5f8fe; color: var(--color-primary); }

/* Project color bank + custom hex */
.color-grid { display: grid; grid-template-columns: repeat(9, 26px); gap: 6px; }
.color-swatch { width: 26px; height: 26px; border-radius: 5px; border: 2px solid transparent;
                cursor: pointer; padding: 0; }
.color-swatch.active { border-color: var(--color-primary); }
.color-hex { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.color-hex input[type="text"] { width: 110px; }
.color-chip { width: 20px; height: 20px; border-radius: 5px; flex: none;
              border: 1px solid var(--color-line); }

/* Team member picker (checkbox grid with avatars) */
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.team-grid .check-label { padding: 4px 0; }

/* Projects list: color-coded briefcase (hover = edit), stacked
   name/client cell, layered progress bar */
.proj-brief { background: none; border: 0; padding: 2px; cursor: pointer;
              line-height: 0; vertical-align: top; margin: 2px 8px 0 0; }
span.proj-brief { cursor: default; }
.proj-brief .pf-pencil { display: none; color: var(--color-muted); }
.proj-brief:hover .pf-brief { display: none; }
.proj-brief:hover .pf-pencil { display: inline-block; }
span.proj-brief:hover .pf-brief { display: inline-block; }
.proj-cell { display: inline-block; vertical-align: top; }
.proj-client { display: block; font-size: .85rem; color: var(--color-muted);
               margin-top: 1px; }

/* Historical tables (client page): latest-10 with a centered gray pull
   tab hanging off the closing rule; expanded = full list in a
   scrollable body + the tab flips to Collapse */
.hist-wrap .hist-extra { display: none; }
.hist-wrap.open .hist-extra { display: table-row; }
/* Expanded cap is set inline by prism.js (collapsed height + a few
   rows) so it always grows slightly; long lists scroll inside */
.hist-wrap.open .hist-body { overflow-y: auto; }
.hist-tab-row { border-top: 3px solid var(--color-tint); }
.hist-tab { display: block; margin: 0 auto; cursor: pointer;
            background: var(--color-tint); color: var(--color-muted);
            border: 1px solid var(--color-line); border-top: none;
            border-radius: 0 0 6px 6px; padding: 3px 14px;
            font-family: var(--font-body); font-size: .75rem; font-weight: 600; }
.hist-tab:hover { background: var(--btn-light-hover); color: var(--color-text); }

/* Projects rows: the two-line name cell hugs the top; every other
   column centers vertically against it */
.proj-table tbody td { vertical-align: middle; }
.proj-table tbody td:first-child { vertical-align: top; }

/* Group By rows: group title + closing "Total N projects" sub-row */
tr.pgroup-head td { text-align: left; padding: 18px 10px 8px;
                    border-bottom: 1px solid var(--color-line); }
tr.pgroup-head td, tr.pgroup-head a { font-size: 1.2rem; font-weight: 400;
                    color: var(--color-link); }
tr.pgroup-head a:hover { text-decoration: none; color: var(--color-primary); }
tr.pgroup-total td { text-align: left; font-weight: 700; font-size: .82rem;
                     color: var(--color-text); padding: 8px 10px 12px 42px;
                     border-bottom: 1px solid var(--color-line); }

.pbar { display: flex; width: 140px; height: 5px; border-radius: 3px;
        overflow: hidden; }
.pb { height: 100%; flex: none; }
.pb-done { background: #2f80ed; }
.pb-over { background: var(--color-alert); }
.pb-plan { background: repeating-linear-gradient(45deg, #2f80ed 0 3px, rgba(47, 128, 237, .22) 3px 6px); }
.pb-overbook { background: repeating-linear-gradient(45deg, #d23b3b 0 3px, rgba(210, 59, 59, .22) 3px 6px); }
.pb-rest { background: #e4e8ee; }

/* Project color dot (lists + view header) */
.proj-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
            flex: none; vertical-align: -1px; margin-right: 2px;
            background: var(--color-line); }
/* Overlapping avatar stack (team column) */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { margin-left: -7px; border: 2px solid #fff; box-sizing: content-box; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .more { margin-left: 4px; font-size: .78rem; color: var(--color-muted); }

/* Project view hero: project color as the card's left border; number +
   editable status pill sit above the title, meta row below (PM › team
   cluster, client, dates + overdue pill, progress bar) */
.proj-hero { border-left: 4px solid var(--color-line); }
.ph-top { display: flex; align-items: flex-start; justify-content: space-between;
          gap: var(--space-3); }
.ph-id { display: inline-flex; align-items: center; gap: 10px; }
.ph-no { font-size: .85rem; font-weight: 600; color: var(--color-muted); }
.ph-title { margin: 8px 0 16px; font-size: 1.45rem; color: var(--color-primary); }
.ph-meta { display: flex; align-items: center; flex-wrap: wrap;
           gap: 10px 26px; }
.ph-piece { display: inline-flex; align-items: center; gap: 7px; }
.ph-icon { flex: none; color: var(--color-muted); }
.ph-chev { flex: none; color: var(--color-muted); }
.ph-piece .row-title { font-weight: 400; }   /* client name unbolded */
.ph-date-over { color: var(--color-alert); font-weight: 700; }
.ph-overdue { background: var(--color-alert); color: #fff; border-radius: 10px;
              padding: 1px 8px; font-size: .72rem; font-weight: 700;
              white-space: nowrap; }
.ph-progress .pbar { width: 180px; }

/* Attached quotes: right edge of the meta row, under the Modify
   buttons — doc icon + linked title with the total right-aligned
   beneath it */
.ph-quotes { margin-left: auto; display: flex; flex-direction: column;
             align-items: flex-end; gap: 8px; }
.ph-quote-row { display: flex; flex-direction: column;
                align-items: flex-end; gap: 2px; }
.ph-quote-row .row-title { display: inline-flex; align-items: center; gap: 8px;
                           font-size: .875rem; }
.ph-quote-row .row-title svg { flex: none; color: var(--color-muted); }
.ph-quote-sum { font-size: .8rem; color: var(--color-muted); white-space: nowrap; }

/* Metric boxes panel (below the hero): icon + label, big value, muted
   "% of total" sub; .bad flips a value/sub red when overtracked /
   overcost / overdue */
.ph-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.panel.ph-stats { padding: 0; }   /* boxes own their padding; dividers run full height */
/* Hugs the hero above it — a tighter gap than the page stack's */
.stack > .ph-stats { margin-top: var(--space-2); }
.ph-stat { padding: 15px; border-left: var(--border-subtle); }
.ph-stat:first-child { border-left: none; }
.ph-stat-label { display: flex; align-items: center; gap: 7px;
                 font-size: .8rem; font-weight: 600; color: var(--color-text); }
.ph-stat-label svg { flex: none; color: var(--color-muted); }
.ph-stat-value { margin-top: 7px; font-family: var(--font-heading);
                 font-size: 1.35rem; font-weight: 700; line-height: 1.1;
                 color: var(--color-primary); }
.ph-stat-value .unit { font-size: .8rem; font-weight: 600; color: var(--color-muted); }
.ph-stat-sub { margin-top: 3px; font-size: .78rem; color: var(--color-muted); }
.ph-stat-value.bad, .ph-stat-sub.bad { color: var(--color-alert); }

/* Team cluster = boxless dropdown trigger; menu edits members in place */
.ph-people > .avatar { display: block; }
/* The dd wrapper's text line-box is taller than the avatars and floats
   them off middle — collapse it so the cluster centers with the PM */
.ph-team, .wa-asg-wrap .dd { line-height: 0; }
.ph-team .dd-trigger { padding: 0; border: 0; background: none; line-height: 0; }
.ph-team .dd-trigger:hover .avatar { border-color: var(--color-soft); }
.ph-add-member { width: 26px; height: 26px; border-radius: 50%; flex: none;
                 display: inline-flex; align-items: center; justify-content: center;
                 box-sizing: content-box;   /* 26 + 2px ring = avatar outer size */
                 border: 2px dashed var(--color-muted); color: var(--color-muted);
                 background: #fff; }
.ph-team .dd-trigger:hover .ph-add-member { color: var(--color-text);
                 border-color: var(--color-text); }
.ph-team-menu { min-width: 240px; padding: 10px 12px; }
.ph-team-list { max-height: 260px; overflow-y: auto; }
.ph-team-apply { border-top: var(--border-subtle); margin-top: 8px;
                 padding-top: 10px; text-align: right; }

/* ----------------------------------------------------------------------
 * Project work area: full-width section below the hero/metrics with a
 * two-tier tab nav (Tasks / Events / Budget / Time / Details / Comments
 * + Planner shortcut right). Panes swap client-side; state in the hash.
 * -------------------------------------------------------------------- */
.workarea { margin-top: var(--space-4); background: var(--color-surface); }
.workarea .wa-inner { padding: 0 3rem; }
.page--flush { padding-bottom: 0; }   /* page that hands off to the workarea */
.wa-t1 { background: var(--color-mist); }
.wa-t1 .wa-inner { display: flex; align-items: center; gap: 6px; position: relative; }
/* Soft "curved" divider under tier 1: thin at the ends, deepest at the
   middle, spanning the tabs' interior width (Tasks through Planner) */
.wa-t1 .wa-inner::after {
    content: ""; position: absolute; left: 3rem; right: 3rem; top: 100%;
    height: 6px; pointer-events: none; z-index: 1;
    background: radial-gradient(ellipse 92% 100% at 50% 0,
                rgba(1, 0, 49, .09), transparent 80%);
}
.wa-tab, .wa-subtab, .wa-planner {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-weight: 600; color: var(--color-muted);
    text-decoration: none;
}
.wa-tab svg, .wa-subtab svg, .wa-planner svg { flex: none; }
.wa-tab { font-size: .85rem; padding: 16px 14px 14px; border-bottom: 2px solid transparent; }
.wa-tab:hover, .wa-subtab:hover { color: var(--color-link); }
.wa-tab.active { color: var(--color-primary); }
.wa-tab.active svg { color: var(--color-link); }
/* No second tier (Time / Details / Comments): the tier-1 tab takes
   the blue underline the subtabs would otherwise carry */
.wa--no-t2 .wa-tab.active { border-bottom-color: var(--color-accent); }
.wa-planner { margin-left: auto; font-size: .8rem; padding: 16px 0; color: var(--color-link); }
.wa-planner:hover { color: var(--color-primary); }
.wa-t2 { background: var(--color-mist); border-bottom: 1px solid var(--color-page); }
.wa-t2.wa-t2--bare { display: none; }
.wa-t2-group { display: flex; align-items: center; gap: 6px; }
.wa-t2-group[hidden] { display: none; }   /* display:flex beats [hidden] */
.wa-subtab { font-size: .775rem; padding: 12px 14px;
             border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wa-subtab.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.wa-subtab.active svg { color: var(--color-link); }
.wa-body { padding: var(--space-4) 0 var(--space-5); min-height: 320px; }
.wa-pane { display: none; }
.wa-pane.active { display: block; }
.wa-head { display: flex; align-items: center; justify-content: space-between;
           gap: var(--space-3); margin-bottom: var(--space-2); }
.wa-head .section-title { margin: 0; }
.wa-head-controls { display: flex; align-items: center; gap: var(--space-2); }
.wa-empty { display: flex; flex-direction: column; align-items: flex-start;
            gap: 10px; padding: var(--space-3) 0; }

/* Task list table */
.wa-sortbtn { background: none; border: none; cursor: pointer; padding: 0;
              font: inherit; color: inherit; white-space: nowrap; }
.wa-sortbtn:hover { color: var(--color-accent); }
/* Active sort direction caret (set is-asc/is-desc from the page JS) */
.wa-sortbtn.is-asc::after, .wa-sortbtn.is-desc::after {
    font-size: .55rem; margin-left: 4px; vertical-align: 1px; }
.wa-sortbtn.is-asc::after { content: "\25B2"; }
.wa-sortbtn.is-desc::after { content: "\25BC"; }
table.wa-tasks thead th { font-size: .8rem; }   /* wide tables: smaller headers */
table.wa-tasks tbody td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px;
                          font-size: .8rem; }
table.wa-tasks tbody tr:hover td { background: var(--color-mist); }
.wa-asg-wrap { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.wa-asg-wrap .ph-chev { flex: none; }
table.wa-tasks td.wa-title { text-align: left; min-width: 220px; }
.wa-cm-cell { width: 80px; }
.wa-cmbtn { display: inline-flex; align-items: center; gap: 5px;
            background: none; border: none; cursor: pointer; padding: 4px 6px;
            font-family: var(--font-body); font-size: .775rem;
            color: var(--color-muted); border-radius: 3px; }
.wa-cmbtn:hover { color: var(--color-link); }

/* Priority indicator before the title: red/yellow/blue check, gray once
   done; hover flips it to a pencil (opens the task modal, coming soon) */
.wa-title-wrap { display: flex; align-items: center; gap: 9px; }
.wa-pri { background: none; border: none; cursor: pointer; padding: 2px;
          line-height: 0; flex: none; }
.wa-pri .pri-pencil { display: none; color: var(--color-muted); }
.wa-pri:hover .pri-check { display: none; }
.wa-pri:hover .pri-pencil { display: inline; }
.wa-pri--high   { color: var(--color-alert); }
.wa-pri--medium { color: #e8a13d; }
.wa-pri--normal { color: #2f80ed; }
.wa-pri--done   { color: #c3c9d1; }

.ph-team-trigger:hover { background: none; }   /* avatar clusters: no pill hover */

/* Set-as-default stars: gold when active, gray outline otherwise
   (task Show filter + bookmarks dropdown) */
.wa-show-opt, .ev-show-opt, .tl-show-opt { display: flex; align-items: center;
               justify-content: space-between; gap: 16px; }
.wa-star, .bm-star { color: var(--color-line); line-height: 0; padding: 2px; }
.wa-star:hover, .bm-star:hover { color: #e8c93d; }
.wa-star.active, .bm-star.active { color: #e8c93d; }
.wa-star.active svg path { fill: currentColor; }

/* Row quick actions (Add Time Entry / Start Timer): appear on hover,
   pinned to the column's right edge so assignee count never moves them */
.wa-rowact { display: inline-flex; align-items: center; gap: 2px;
             margin-left: auto; opacity: 0; transition: opacity .12s; }
table.wa-tasks tr:hover .wa-rowact { opacity: 1; }
.wa-ico { background: none; border: none; cursor: pointer; padding: 4px;
          line-height: 0; color: var(--color-muted); border-radius: 3px; }
.wa-ico:hover { color: var(--color-link); }
table.wa-tasks td.wa-act-cell { text-align: left; white-space: nowrap; }
.wa-act-trigger { display: inline-flex; align-items: center; gap: 7px;
                  font-weight: 400; font-size: .775rem; padding: 4px 6px; }
.wa-act-trigger svg { color: var(--color-muted); flex: none; }
.wa-prog { width: 135px; }
/* Progress cell: % label rides above the bar, right-aligned to the
   fill's end (min-width keeps tiny percentages readable) */
.wa-pbar { display: inline-block; }
.wa-pbar .pbar { width: 115px; }
.wa-pct { display: block; min-width: 34px; text-align: right; white-space: nowrap;
          font-size: .72rem; font-weight: 700; color: #2f80ed; margin-bottom: 3px; }
.wa-pct.bad { color: var(--color-alert); }
/* Tighter column gaps for the wide task table */
table.wa-tasks th, table.wa-tasks td { padding-left: 7px; padding-right: 7px; }
.wa-due-cell { width: 90px; white-space: nowrap; }
/* Dates render as smart text; a transparent date input overlays it and
   opens the native calendar on click */
.wa-datewrap { position: relative; display: inline-block; }
.wa-datewrap input.wa-date { position: absolute; inset: 0; width: 100%;
    height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0;
    margin: 0; }
.wa-datewrap:hover .wa-date-text:not(.wa-date--over) { color: var(--color-link); }
.wa-date--over { color: var(--color-alert); font-weight: 700; }
table.wa-tasks input.wa-dur {
    border: 1px solid transparent; border-radius: 3px; background: none;
    font-family: var(--font-body); font-size: .775rem; color: var(--color-text);
    padding: 4px 6px; box-shadow: none; width: 64px; text-align: right;
}
table.wa-tasks input.wa-dur:hover {
    border-color: var(--color-line); background: var(--color-bg); }
table.wa-tasks input.wa-dur:focus {
    border-color: var(--color-accent); background: var(--color-bg); outline: none; }
.wa-dur-cell { width: 84px; }
.wa-neg { color: var(--color-alert); font-weight: 700; }
.wa-done-cell { width: 52px; }
.wa-done { background: none; border: none; cursor: pointer; padding: 2px;
           line-height: 0; color: var(--color-line); border-radius: 50%; }
.wa-done:hover { color: var(--color-link); }
.wa-done.is-done { color: #b9dfc4; cursor: default; }
.wa-done[disabled] { cursor: default; color: var(--color-line); opacity: .5; }

/* ----------------------------------------------------------------------
 * In-form people picker (helpers.php people_picker): responsible
 * avatar › assignee cluster, staged into ordinary form inputs.
 * -------------------------------------------------------------------- */
.pp-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.pp-row .dd { line-height: 0; }
.pp-row .ph-chev { flex: none; }
/* Flex every layer of the face/cluster chain — inline baselines made
   stacked avatars ride a few px high of the manager circle */
.pp-row .dd-trigger { display: inline-flex; align-items: center; }
.pp-row [data-pp-mgr-face], .pp-row [data-pp-cluster] { display: inline-flex;
    align-items: center; }

/* Retainer fields: one clean three-up row */
[data-pf-retainer] { display: flex; gap: var(--space-2); }
[data-pf-retainer] .field { flex: 1 1 0; min-width: 0; }
[data-pf-retainer] .field input, [data-pf-retainer] .field select { width: 100%; }

/* Project color: dot row (with the upcoming project ID) above the name */
.pf-color-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.pf-color-row .dd { line-height: 0; flex: none; }
.pf-next-id { font-size: .85rem; font-weight: 600; color: var(--color-muted); }
.pf-color-trigger { padding: 2px; border: 0; background: none; }
.pf-color-trigger:hover { background: none; }
.pf-color-dot { display: block; width: 22px; height: 22px; border-radius: 50%;
                border: 2px solid #fff; box-shadow: 0 0 4px rgba(1, 0, 49, .18);
                background: #c3c9d1; }
.pf-color-menu { padding: 10px; min-width: 246px; }
.pf-color-menu .color-grid { margin-bottom: 8px; }
.pf-color-actions { display: flex; justify-content: space-between; gap: 8px;
                    border-top: var(--border-subtle); margin-top: 10px; padding-top: 10px; }

/* ----------------------------------------------------------------------
 * Minimal rich-text editor (helpers.php rte_field)
 * -------------------------------------------------------------------- */
.rte { border: var(--border-subtle); border-radius: 3px; background: var(--color-bg); position: relative; }
.rte-linkpop { position: absolute; z-index: 60; display: flex; align-items: center; gap: 6px;
    background: #fff; border: var(--border-subtle); border-radius: 5px;
    box-shadow: 0 6px 24px rgba(1, 0, 49, .18); padding: 8px; }
.rte-linkpop input[type="text"] { width: 240px; }
.rte-linkpop .btn { padding: 4px 10px; font-size: .78rem; }
.rte-linkpop [hidden] { display: none; }
.rte-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px;
           border-bottom: var(--border-subtle); background: var(--color-tint); }
.rte-bar select.rte-format {   /* outguns .field-col select { width:100% } */
              border: var(--border-subtle); border-radius: 3px; background: #fff;
              font-family: var(--font-body); font-size: .72rem; color: var(--color-text);
              padding: 2px 4px; margin-right: 4px;
              width: auto; flex: 0 0 auto; }
.rte-sp { flex: 1; }
.rte-bar button { background: none; border: none; border-radius: 3px; cursor: pointer;
                  min-width: 24px; height: 24px; padding: 0 5px;
                  font-family: var(--font-body); font-size: .8rem;
                  color: var(--color-muted); line-height: 1; }
.rte-bar button:hover { background: var(--color-soft); color: var(--color-text); }
.rte-area { min-height: 132px; max-height: 300px; overflow-y: auto;
            padding: 8px 10px; font-size: .875rem; line-height: 1.5;
            color: var(--color-text); outline: none; }
.rte-area:focus { box-shadow: inset 0 0 0 1px var(--color-accent); border-radius: 0 0 3px 3px; }
.rte-area ul, .rte-area ol { margin: 4px 0; padding-left: 22px; }
.rte-area p { margin: 0 0 6px; }
.rte-area h1 { font-size: 1.15rem; margin: 8px 0 6px; }
.rte-area h2 { font-size: 1.02rem; margin: 8px 0 5px; }
.rte-area h3 { font-size: .92rem; margin: 6px 0 4px; }
.rte-area blockquote { margin: 6px 0; padding: 2px 12px;
                       border-left: 3px solid var(--color-line);
                       color: var(--color-muted); }
.rte-area a { color: var(--color-link); }
/* Fullscreen: lift the editor over the dialog */
.rte--full { position: fixed; inset: 4vh 6vw; z-index: 80; display: flex;
             flex-direction: column; box-shadow: 0 12px 48px rgba(1, 0, 49, .3); }
.rte--full .rte-area { flex: 1; max-height: none; }
/* Code view: the mirrored textarea becomes the editor */
.rte--code .rte-area { display: none; }
.rte textarea[name] { display: none; }
.rte--code textarea[name] { display: block; width: 100%; min-height: 140px;
             border: 0; padding: 8px 10px; background: var(--color-soft);
             font-family: ui-monospace, Menlo, monospace; font-size: .75rem;
             color: var(--color-text); resize: vertical; outline: none; }
.rte--full.rte--code textarea[name] { flex: 1; }

/* ----------------------------------------------------------------------
 * Add/Modify Task modal (task_form.php)
 * -------------------------------------------------------------------- */
/* Duration | (gap) | Start + Due right-aligned at date width */
.tf-dates-row .field--date { flex: 0 0 150px; }
.tf-dates-row .field--date:nth-child(2) { margin-left: auto; }
.tf-cols { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-5); }
@media (max-width: 900px) { .tf-cols { grid-template-columns: 1fr; } }
.tf-done-row { display: flex; align-items: center; gap: 10px;
               margin-top: var(--space-3); }
/* Retroactive time entry: 70% note | 30% (user / time+date), no labels */
.tf-te { display: none; margin-top: var(--space-2); }
.tf-te.open { display: block; }
.tf-te-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 8px;
              align-items: stretch; }
.tf-te-grid textarea { resize: none; min-height: 0; height: 100%; }
.tf-te-side { display: flex; flex-direction: column; gap: 8px; }
.tf-te-mini { display: flex; gap: 8px; }
.tf-te-mini input { min-width: 0; }
.tf-te-mini input[name="te_duration"] { width: 35%; }
.tf-te-mini input[name="te_date"] { width: 65%; padding-left: 7px; padding-right: 4px; }
/* Add Time Entry modal (task-row clock icon): bar title truncates the
   task name; form is [user face | 2-row note | time/date column] with
   a Done-checkbox + Save footer. */
dialog.te-modal { width: min(620px, 92vw); }
.te-bar-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; }
.te-bar-title > span:first-child { flex: none; }
.te-bar-task { font-weight: 400; color: var(--color-muted); min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-grid { display: flex; gap: 10px; align-items: stretch; }
.te-grid .te-user-col { flex: none; align-self: flex-start; }
.te-grid .pp-solo { padding: 0; }
.te-grid textarea { flex: 1; min-width: 0; resize: none; min-height: 0; }
.te-when { flex: none; width: 124px; display: flex; flex-direction: column; gap: 8px; }
.te-when input { width: 100%; min-width: 0; }
.te-when input[name="te_date"] { padding-left: 7px; padding-right: 4px; }
.te-foot { display: flex; justify-content: flex-end; align-items: center;
           gap: var(--space-3); margin-top: var(--space-3); }
/* Task's activity + frozen rate: plain text, left-aligned with the
   description box (56px = face column + grid gap) */
.te-foot .te-act { margin-left: 56px; margin-right: auto; font-size: .8rem; }

/* ----------------------------------------------------------------------
 * Task detail page (task.php): gray header + attached white info band
 * (aligned thirds), then Details, then Time Entries | Comments+Files.
 * -------------------------------------------------------------------- */
.td-panel { padding: 0; overflow: visible; }
.td-head, .td-info { display: grid; grid-template-columns: 1fr 1fr 1fr;
                     gap: var(--space-4); padding: var(--space-4); }
.td-head { background: var(--color-tint); }
.td-title-row { display: flex; align-items: flex-start; gap: 8px; }
.td-pri { cursor: default; padding: 2px; flex: none; margin-top: 2px; line-height: 0; }
.td-title { margin: 0; font-size: 1.15rem; line-height: 1.35; }
.td-substat { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-left: 27px; }
.td-act { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; }
.td-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-content: start; }
.td-dates--3 { grid-template-columns: 1fr 1fr 1fr; }
.td-date-label { display: flex; align-items: center; gap: 6px; font-size: .78rem;
                 color: var(--color-muted); }
.td-date-label svg { flex: none; }
/* Value indents past the label's icon so both texts left-align */
.td-date-value { margin-top: 5px; font-weight: 600; padding-left: 19px; }
/* Predecessor / successor link row under each date */
.td-assoc { display: flex; align-items: center; gap: 6px; margin-top: 18px;
            font-size: .82rem; min-width: 0; }
.td-assoc-ico { flex: none; line-height: 0; color: var(--color-muted);
                background: none; border: none; padding: 0; }
button.td-assoc-ico { cursor: pointer; }
.td-assoc-ico .ico-trash { display: none; color: var(--color-alert); }
button.td-assoc-ico:hover .ico-link { display: none; }
button.td-assoc-ico:hover .ico-trash { display: inline; }
.td-assoc .row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-assoc .dd-trigger.td-assoc-trigger { padding: 0 2px; font-size: .82rem;
    font-weight: 400; color: var(--color-muted); }
.td-assoc .dd-trigger.td-assoc-trigger:hover { background: none; color: var(--color-link); }
.td-assoc-none { padding: 8px 10px; font-size: .82rem; }
/* Date-sensitive values: overdue = red day count; starting today/
   tomorrow = blue label. Both reveal the actual date on hover. */
.td-over, .td-soon { font-weight: 700; position: relative; cursor: default; }
.td-over { color: var(--color-alert); }
.td-soon { color: #2f80ed; }
.td-soon:hover .td-tip { display: inline-flex; }
.td-soon .td-tip-diamond { color: #2f80ed; }
.td-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
          transform: translateX(-50%); align-items: center; gap: 7px;
          background: var(--color-surface); color: var(--color-text);
          font-weight: 600; font-size: .85rem; white-space: nowrap;
          padding: 8px 12px; border-radius: 4px;
          box-shadow: 0 4px 18px rgba(1, 0, 49, .22); z-index: 30; }
.td-over:hover .td-tip { display: inline-flex; }
.td-tip-diamond { color: var(--color-alert); line-height: 0; }
.td-actions { display: flex; align-items: flex-start; justify-content: flex-end;
              gap: 8px; flex-wrap: wrap; }
.td-actions .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.td-done-form { display: inline; }
.btn--blue { color: #fff; background: var(--color-link); border-color: var(--color-link); }
.btn--blue:hover { background: #00a9d8; border-color: #00a9d8; }

/* Info band: people (names + logged totals under the circles) */
.td-people { display: flex; align-items: flex-start; gap: 10px; }
.td-people .ph-chev { flex: none; margin-top: 11px; color: var(--color-muted); }
.td-person { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 40px; }
/* Task-detail header cluster doubles as the PM/assignee dropdown trigger */
.td-person-btn { display: flex; align-items: flex-start; gap: 10px; background: none;
    border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 6px; }
.td-person-btn:hover { background: var(--color-mist); }
.td-person-name { font-size: .75rem; }
.td-person-time { font-size: .72rem; }
/* Info band: client / project / quote links */
.td-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.td-link { display: inline-flex; align-items: center; gap: 8px; }
.td-link svg { color: var(--color-muted); flex: none; }
.td-link-group { display: flex; flex-direction: column; gap: 3px; }
.td-link-sub { margin-left: 22px; font-size: .8rem; }
/* Info band: hours progress toward the task's planned allocation */
.td-prog { display: flex; align-items: center; gap: var(--space-4); }
.td-prog-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.td-prog-main .pbar { width: 100%; }
.td-prog-lbl { font-size: .78rem; }
.td-prog-pct { text-align: center; flex: none; }
.td-pct { font-size: 1.05rem; font-weight: 700; color: var(--color-slate); }
.td-pct--over { color: var(--color-alert); }
.td-prog-pct .muted { font-size: .78rem; }

.td-desc { font-size: 14px; }
.td-desc > :first-child { margin-top: 0; }
.td-desc > :last-child { margin-bottom: 0; }
/* Event modal attendee COLUMN (Scoro style): faces on top, segmented
   team rows below — hover gray, selected blue + check, red busy dot. */
.ef-cols3 { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
@media (max-width: 1100px) { .ef-cols3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .ef-cols3 { grid-template-columns: 1fr; } }
/* min-height = one populated face row (31px avatar + name), so the
   first selection never jumps the list below. */
.ef-att-faces { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
    min-height: 59px; padding-bottom: 8px; margin-bottom: 10px;
    border-bottom: var(--border-subtle); }
.ef-seg-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-link); margin: 10px 0 4px; }
.ef-seg:first-child .ef-seg-label { margin-top: 0; }
.ef-team-col { display: flex; flex-direction: column; }
/* The list scrolls so the guests field below never sinks out of view. */
.ef-attcol [data-pp-team] { max-height: 330px; overflow-y: auto; }
/* label. prefix outweighs the later generic .check-label padding rule */
label.ef-att-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px;
    border-radius: 4px; cursor: pointer; }
.ef-att-row + .ef-att-row { border-top: 1px solid var(--color-soft); }
.ef-att-row:hover { background: var(--color-mist); }
.ef-att-row:has(input:checked) { background: #e8f1fd; }
.ef-att-row input[type="checkbox"] { display: none; }
.ef-att-check { margin-left: auto; padding-left: 6px; color: #2f80ed; visibility: hidden; }
/* Hover previews the checkmark in gray; selection turns it blue. */
.ef-att-row:hover .ef-att-check { visibility: visible; color: var(--color-muted); }
.ef-att-row:has(input:checked) .ef-att-check { visibility: visible; color: #2f80ed; }
.ef-guests-field { margin-top: 14px; padding-top: 12px; border-top: var(--border-subtle);
    display: flex; flex-direction: column; gap: 6px; }
.ef-team-col label.pp-inactive { display: none; }
.ef-team-col label.pp-inactive:has(input:checked),
.ef-team-col label.pp-inactive.pp-show,
.ef-team-col label.pp-inactive.pp-tenure { display: flex; }
.ef-att-av { position: relative; display: inline-flex; }
.ef-att-busy { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--color-alert); border: 1.5px solid #fff; }
.att-face { position: relative; }
.ef-att-busy--face { top: 0; right: 2px; width: 10px; height: 10px; }

/* Departed users in pickers: hidden unless already on the record
   (checked) or the picked date sits inside their employment window
   (.pp-tenure, toggled by the modal scripts). */
.ph-team-list label.pp-inactive { display: none; }
.ph-team-list label.pp-inactive:has(input:checked),
.ph-team-list label.pp-inactive.pp-tenure { display: flex; }
.dd-options-scroll .pp-mgr-opt.pp-inactive { display: none; }
.dd-options-scroll .pp-mgr-opt.pp-inactive.pp-tenure { display: flex; }

/* Comment folds: old threads hide behind a top pull tab; long stale
   reply chains fold mid-thread. prism.js toggles + auto-expands for
   #comment-N jumps. */
.cm-list .cm-folded { display: none; }
.cm-list.cm-fold-open > .cm-thread.cm-folded { display: block; }
.cm-thread.cm-fold-open > .cm-reply-row.cm-folded { display: block; }
/* Top fold tab sits flush against the section head's rule. */
.cm-fold-tab { border-top: 0; margin: -10px 0 12px; }
.cm-rfold-tab { margin: 4px 0 4px 52px; }

/* Non-working days (part-time schedule / full-day time off): faint
   striped column — visually off the table and never a drop target. */
.pl-cell--off .pl-cellbody, .hw-plday--off .hw-plday-body {
    /* same thin-stripe language as .pl-overstripe, mirrored so "off"
       never reads as "overbooked" */
    background: repeating-linear-gradient(-45deg,
        rgba(1, 0, 49, .07) 0 2px, transparent 2px 8px);
    opacity: .65;
}
.pl-cell--off .pl-net { color: var(--color-muted); }
.hw-plday--off .hw-plday-h { opacity: .55; }

/* Calendar > Unassigned Recordings: the three assign pickers per row */
.cal-rec-assigns { display: flex; gap: 14px; flex-wrap: wrap; }
.cal-rec-assigns form { display: flex; gap: 6px; align-items: center; }
.cal-rec-assigns select { max-width: 220px; padding: 4px 6px; border: var(--border-subtle);
    border-radius: 3px; font-family: var(--font-body); font-size: .8rem; }

/* Unassigned-recordings strip: breathe between rows so each Attach
   button reads with its own title. */
.ml-unassigned .ml-item + .ml-item { margin-top: 2px; border-top: 1px solid var(--color-soft); padding-top: 6px; }
.ml-unassigned .ml-item { padding-bottom: 4px; }

/* Rendered rich text (Details + comments) wears the editor's quote
   look — the RTE's Quote button was invisible outside the editor. */
.td-desc blockquote, .cm-body blockquote {
    margin: 6px 0; padding: 2px 12px;
    border-left: 3px solid var(--color-line);
    color: var(--color-muted); }

/* Bottom: Time Entries (60) | Comments + Files (40) */
/* minmax(0, …fr): bare fr tracks floor at min-content, so revealing
   folded comments (long links) used to widen the column and squeeze
   Time Entries. Locked ratios never move. */
.td-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--space-4) * 2); align-items: start; }
@media (max-width: 980px) { .td-cols { grid-template-columns: 1fr; } }
/* The side stack is a grid too — pin its implicit column so a panel's
   min-content (a long URL) can never burst past the column. */
.td-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.td-te-controls { display: flex; align-items: center; gap: 10px; }
/* The Add split-button is a dd whose trigger looks like the light btn */
.td-add .dd-trigger { color: var(--color-slate); background: var(--btn-light);
                      border: 1px solid var(--color-line); padding: 5px 14px; }
.td-add .dd-trigger:hover { background: var(--btn-light-hover); }
.td-add .dd-option { display: flex; align-items: center; gap: 8px; }
.td-add .dd-option svg { color: var(--color-muted); flex: none; }
/* Show filter: stars pin to the option's right edge */
[data-te-show] .dd-option, [data-users-view] .dd-option { display: flex; align-items: center; gap: 8px; min-width: 150px; }
[data-te-show] .wa-star, [data-users-view] .wa-star { margin-left: auto; }
/* Comments / Files / Time Entries: rule the section head off from
   the content */
#comments .panel-head, #files .panel-head,
#te-panel > .panel-head { border-bottom: 1px solid var(--color-line);
                          padding-bottom: 10px; }
/* …but once entries exist the table's own header row takes over —
   the divider would double up. */
#te-panel:has(.td-te-table) > .panel-head { border-bottom: 0; padding-bottom: 0; }

/* ----------------------------------------------------------------------
 * Global comments component: avatar | (name · timestamp / body / hover
 * controls); replies indent to the parent's content column.
 * -------------------------------------------------------------------- */
.cm-thread { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-page); }
.cm { display: flex; gap: 12px; }
.cm .avatar { flex: none; }
.cm-main { flex: 1; min-width: 0; }
/* Reply indent = parent avatar (40) + gap (12); ruled off from the
   comment above like top-level threads are from each other */
.cm-reply-row { padding-left: 52px; margin-top: var(--space-3); }
.cm-reply-row .cm { border-top: 1px solid var(--color-page); padding-top: var(--space-3); }
.cm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cm-name { font-weight: 600; color: var(--color-primary); }
.cm-time { font-size: .78rem; color: var(--color-muted); white-space: nowrap; }
.cm-time:hover { color: var(--color-link); }
/* anywhere (not break-word): long URLs must count as breakable in
   min-content sizing, or they overflow fixed grid tracks. */
.cm-body { margin-top: 4px; font-size: 14px; overflow-wrap: anywhere; }
.cm-body > :first-child { margin-top: 0; }
.cm-body > :last-child { margin-bottom: 0; }
.cm-mention { color: var(--color-link); font-weight: 600; cursor: pointer; }
.cm-controls { display: flex; justify-content: flex-end; align-items: center; gap: 14px;
               margin-top: 6px; min-height: 20px; opacity: 0; transition: opacity .12s; }
.cm:hover > .cm-main > .cm-controls { opacity: 1; }
.cm-ctl { display: inline-flex; align-items: center; gap: 5px; background: none; border: none;
          cursor: pointer; color: var(--color-muted); font-size: .8rem;
          font-family: var(--font-body); padding: 2px 4px; border-radius: 3px; }
.cm-ctl:hover { color: var(--color-link); }
.cm-controls form { display: inline; line-height: 0; }
/* Comment-shaped composer: avatar | name + Cancel / RTE / Post. Sits
   at the end of the list; Edit moves it inline into the comment. */
.cm-composer { margin-top: var(--space-3); }
/* Add mode (at the list end): rule under the pop-in area */
#cm-home .cm-composer { padding-bottom: var(--space-3);
                        border-bottom: 1px solid var(--color-page); }
/* Reply mode: the composer sits in an indented reply row (it inherits
   the reply border/padding via .cm-reply-row .cm) with the small face */
.cm-reply-row .cm-composer > .avatar { width: 26px !important; height: 26px !important;
                                       font-size: .6rem !important; }
/* .cm's display:flex would beat the hidden attribute's UA rule */
.cm-composer[hidden] { display: none; }
.cm-composer .rte-area:empty::before { content: "Use the @-sign to tag and notify users";
                                       color: var(--color-muted); pointer-events: none; }
.cm-cancel-link { display: inline-flex; align-items: center; gap: 5px; background: none;
                  border: none; cursor: pointer; color: var(--color-muted);
                  font-family: var(--font-body); font-size: .8rem; padding: 2px 4px;
                  margin-left: auto; white-space: nowrap; }
.cm-cancel-link:hover { color: var(--color-link); }
/* Inline edit: the comment's own avatar/name stay; hide the composer's */
.cm-composer--inline { border: none !important; margin-top: 4px; padding: 0 !important; }
.cm-composer--inline > .avatar, .cm-composer--inline [data-cm-composer-head] { display: none; }
.cm--editing > .cm-main > .cm-body, .cm--editing > .cm-main > .cm-controls,
.cm--editing > .cm-main > .cm-head .cm-time { display: none; }
.cm-ctx { font-size: .8rem; margin-bottom: 6px; }
.cm-composer-actions { display: flex; justify-content: flex-end; gap: var(--space-2);
                       margin-top: var(--space-2); }
/* Floating @-search menu, positioned at the caret */
.cm-mention-menu { z-index: 60; background: var(--color-surface); border: var(--border-subtle);
                   border-radius: 3px; box-shadow: 0 8px 24px rgba(1, 0, 49, .15);
                   padding: 4px; display: none; min-width: 180px; }
.cm-mention-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
                  background: none; border: none; padding: 6px 10px; cursor: pointer;
                  font-family: var(--font-body); font-size: .85rem; border-radius: 3px; }
.cm-mention-opt .avatar { flex: none; }
.cm-mention-opt:hover, .cm-mention-opt.active { background: var(--color-soft); }
/* Entry rows hug the left (date · initials chip · edit · activity);
   duration + done flag sit on the right edge. */
table.td-te-table { font-size: 14px; }
table.td-te-table tbody tr:hover td { background: var(--color-mist); }
table.td-te-table tbody td { padding-top: 9px; padding-bottom: 9px; }
.td-te-table .td-te-date { width: 1%; white-space: nowrap; padding-right: 10px; }
.td-te-table .td-te-user { width: 1%; padding-right: 6px; line-height: 0; text-align: left; }
.td-te-table .td-te-edit-cell { width: 1%; padding-right: 10px; line-height: 0; text-align: left; }
.td-te-table .td-te-act { text-align: left; }
.td-te-table .td-te-act .td-te-note { display: block; font-size: .8rem; margin-top: 2px; }
.td-te-table .td-te-dur { width: 1%; text-align: right; font-weight: 600; white-space: nowrap; }
.td-te-table .td-te-flag { width: 34px; text-align: center; }
/* Timer icon that becomes a pencil on hover — opens the edit modal */
.td-te-edit { background: none; border: none; cursor: pointer; padding: 2px;
              line-height: 0; color: var(--color-muted); border-radius: 3px; }
.td-te-edit .ico-pencil { display: none; color: var(--color-muted); }
.td-te-edit:hover .ico-timer { display: none; }
.td-te-edit:hover .ico-pencil { display: inline; }
.td-te-toggle { background: none; border: none; cursor: pointer; padding: 2px;
                line-height: 0; color: #c3c9d1; border-radius: 3px; }
.td-te-toggle.is-done { color: #2f80ed; }
.td-te-toggle:not(:disabled):hover { color: var(--color-link); }
.td-te-toggle:disabled { cursor: default; }
/* Edit mode: delete control under the logger's face */
.te-user-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.te-user-col .icon-btn { line-height: 0; color: var(--color-muted); }
/* Right padding lines the sums' values up under the Duration column
   (done-flag column 34px + cell paddings) */
.td-te-sums { display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
              margin-top: var(--space-3); font-size: .9rem; padding-right: 54px; }
.td-te-sums strong { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------
 * Tasks page (the personal task hub): metrics bar, grouped task list
 * with nested scheduled time-entry rows.
 * -------------------------------------------------------------------- */
button.subnav-tab { background: none; border: none; border-bottom: 2px solid transparent;
                    cursor: pointer; font-family: var(--font-body); }
.tk-metrics { display: flex; justify-content: space-around; gap: var(--space-4);
              padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line);
              text-align: center; }
/* Same light-gray all-caps metric titles as the Quotes/Contacts stats. */
.tk-metric .label { font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--color-muted); }
.tk-metric-value { font-size: 1.5rem; font-weight: 700; color: var(--color-primary);
                   margin-top: 2px; font-variant-numeric: tabular-nums; }
.tk-metric-value .unit { font-size: .8rem; font-weight: 600; color: var(--color-muted); }
.tk-table { border-collapse: collapse; width: 100%; min-width: 1240px;
            table-layout: fixed; font-size: 14px; }
.tk-table td { padding: 9px 10px; vertical-align: middle; }
.tk-group .tk-ghead td { padding: 26px 10px 8px; border-bottom: 1px solid var(--color-line); }
/* Group titles match the Projects list group heads (1.2rem, regular) */
.tk-gname { color: var(--color-link); font-weight: 400; font-size: 1.2rem; }
.tk-th { text-align: right; font-size: .75rem; color: var(--color-muted); white-space: nowrap; }
.tk-row td, .tk-sub td { border-bottom: 1px solid var(--color-page); }
.tk-row:hover td, .tk-sub:hover td { background: var(--color-mist); }
.tk-project a { color: var(--color-muted); }
.tk-project a:hover { color: var(--color-link); text-decoration: none; }
.tk-title:hover { text-decoration: none; }
.tk-project { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
/* breathing room between the people cluster and the task/entry column */
.tk-table .tk-main { text-align: left; padding-left: 22px; }
.tk-main .wa-pri { vertical-align: -3px; }
/* subrow content indents so the timer lines up with the task title
   (base pad 22 + pri button 18 + inline gap 4) */
.tk-sub-main { padding-left: 44px !important; }
.tk-title { font-weight: 700; color: var(--color-primary); }
.tk-title:hover { color: var(--color-link); }
.tk-due { text-align: right; white-space: nowrap; }
.tk-due-soon { color: #2f80ed; }
.tk-remain { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-remain--over { color: var(--color-alert); }
.tk-doneflag { text-align: right; white-space: nowrap; }
/* nested scheduled time-entry rows */
.tk-sub-ini { text-align: center; }
.tk-sub-ini span { font-size: .72rem; font-weight: 700; letter-spacing: .05em;
                   color: var(--color-muted); }
.tk-sub-main { color: var(--color-text); }
.tk-timer { position: relative; display: inline-block; line-height: 0;
            color: var(--color-muted); vertical-align: -2px; margin-right: 7px; }
/* the entry's timer wears the parent task's priority color */
.tk-timer--high   { color: var(--color-alert); }
.tk-timer--medium { color: #e8a13d; }
.tk-timer--normal { color: #2f80ed; }
.tk-timer-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: -8px;
                flex-direction: column; gap: 5px; background: var(--color-surface);
                color: var(--color-text); font-size: .82rem; line-height: 1.3;
                white-space: nowrap; padding: 10px 14px; border-radius: 4px;
                box-shadow: 0 4px 18px rgba(1, 0, 49, .22); z-index: 30; text-align: left; }
.tk-timer:hover .tk-timer-tip { display: inline-flex; }
/* values dark, labels + bolt stay muted */
.tk-tt-line { display: flex; align-items: center; gap: 6px; color: var(--color-primary); }
.tk-tt-line svg { color: var(--color-muted); flex: none; }
.tk-te-link { background: none; border: none; cursor: pointer; padding: 0;
              font-family: var(--font-body); font-size: 14px; color: var(--color-primary); }
.tk-te-link:hover { color: var(--color-link); }
.tk-sub-date { text-align: left; white-space: nowrap; font-size: .85rem; }
/* Task hover card: rich preview off the priority check (click still
   opens the edit modal). position:fixed escapes the table-scroll clip;
   the JS anchors it to the check and flips up near the bottom. */
.tk-pv-wrap { position: relative; display: inline-block; }
.tk-pv { display: none; position: fixed; z-index: 45; width: 560px; max-width: 92vw;
         background: var(--color-surface); border-radius: 6px; cursor: default;
         box-shadow: 0 12px 40px rgba(1, 0, 49, .28); text-align: left;
         font-size: 14px; font-weight: 400; line-height: 1.4; }
.tk-pv-head { padding: 16px 18px 14px; border-radius: 6px 6px 0 0; position: relative;
              box-shadow: 0 4px 10px rgba(1, 0, 49, .07); }
.tk-pv-r1 { display: flex; align-items: center; gap: 8px; }
.tk-pv-r1 .wa-pri { flex: none; padding: 2px; }
.tk-pv-title { font-weight: 700; font-size: 1.05rem; color: var(--color-primary);
               flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
.tk-pv-title:hover { text-decoration: none; color: var(--color-link); }
.tk-pv-cluster { flex: none; }
.tk-pv-r2 { display: flex; align-items: center; gap: 16px; margin-top: 12px;
            padding-left: 2px; flex-wrap: wrap; }
.tk-pv-dates { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.tk-pv-cal { line-height: 0; }
.tk-pv-red { color: var(--color-alert); }
.tk-pv-act { display: inline-flex; align-items: center; gap: 6px; }
.tk-pv-act .muted { line-height: 0; }
.tk-pv-body { padding: 16px 18px 18px; }
.tk-pv-body .td-prog { margin-bottom: 16px; }
.tk-pv-links { display: flex; gap: 24px; margin-bottom: 12px; }
.tk-pv-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600;
              color: var(--color-primary); min-width: 0; }
.tk-pv-link .muted { line-height: 0; flex: none; }
.tk-pv-link:hover { text-decoration: none; color: var(--color-link); }
.tk-pv-desc { max-height: 180px; overflow-y: auto; }
/* Topnav jump list: draggable page groups */
.bmg-head { display: flex; align-items: center; gap: 7px; }
.bmg-drag { cursor: grab; color: var(--color-line); line-height: 0; }
.bmg-head:hover .bmg-drag { color: var(--color-muted); }
.bmg.dragging { opacity: .45; }

/* Board cards: right-aligned due reference in the chips row */
.wa-card-due { margin-left: auto; font-size: .72rem; white-space: nowrap;
               align-self: center; padding-left: 8px; }
.wa-card-due .td-over { font-size: .72rem; }
/* Tasks board cards: remaining line + linked project under the bar */
.wa-card-remaining { font-size: .72rem; margin: 5px 0 7px; }
.wa-card-remaining strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.wa-card-proj { display: flex; align-items: center; gap: 6px; margin-bottom: 9px;
                font-size: .75rem; color: var(--color-text); min-width: 0; }
.wa-card-proj:hover { text-decoration: none; color: var(--color-link); }
.wa-card-proj .verbatim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-card-proj-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
/* group sum line */
.tk-gsum td { padding: 10px; }
.tk-gsum-label { text-align: right; font-weight: 600; white-space: nowrap; }
.tk-gsum-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------
 * Project work area — Details tab: Project Details (inline RTE editor)
 * | Client Data (folder links, files, related contacts).
 * -------------------------------------------------------------------- */
.pd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-4) * 2);
           align-items: start; }
@media (max-width: 980px) { .pd-cols { grid-template-columns: 1fr; } }
.pd-head { display: flex; align-items: center; justify-content: space-between;
           gap: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--color-line);
           padding-bottom: 10px; min-height: 42px; }
.pd-head--ruled { margin-top: var(--space-4); }
.pd-view { font-size: 14px; }
.pd-edit-actions { display: flex; justify-content: flex-end; gap: var(--space-2);
                   margin-top: var(--space-2); }
[data-pd-form][hidden], [data-pd-view][hidden], [data-pd-edit][hidden] { display: none; }
/* Folder links */
.pd-links { display: flex; flex-direction: column; gap: 10px; }
.pd-link { display: flex; align-items: center; gap: 9px; font-size: 14px; min-width: 0; }
.pd-link-ico { line-height: 0; flex: none; }
.pd-link-url { color: var(--color-link); overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; min-width: 0; }
/* Related Contacts Add: the gray box button, not the bare dd trigger */
.pd-ct-add.dd-trigger { color: var(--color-slate); background: var(--btn-light);
                        border: 1px solid var(--color-line); padding: 5px 14px; }
.pd-ct-add.dd-trigger:hover { background: var(--btn-light-hover); }
/* Related contacts */
.pd-cts { display: flex; flex-direction: column; }
.pd-ct { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
         border-bottom: 1px solid var(--color-page); }
.pd-ct-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-ct-name { display: inline-flex; align-items: center; gap: 6px; }
.pd-ct-name svg { color: var(--color-muted); flex: none; }
.pd-ct-title { margin-left: 20px; font-size: .8rem; }
.pd-ct-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
               font-size: .85rem; white-space: nowrap; }
.pd-ct-phone { color: var(--color-muted); }
.pd-ct .pd-ct-del { opacity: 0; transition: opacity .12s; margin-top: 3px; }
.pd-ct:hover .pd-ct-del { opacity: 1; }
/* Client type icon: gray circular-arrows (ongoing) / briefcase (project) */
.ct-type { display: inline-block; color: #aab4c4; line-height: 0;
           vertical-align: -2px; margin-right: 5px; }

/* Project modal — Billing Settings tab: flat-rate milestone schedule */
.pf-ms-head, .pf-ms-row { display: grid; grid-template-columns: 1fr 130px 155px 26px;
                          gap: var(--space-2); align-items: center; }
.pf-ms-head span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
                   color: var(--color-muted); }
.pf-ms-head { margin-bottom: 6px; }
.pf-ms-row + .pf-ms-row { margin-top: 6px; }
.pf-ms-row input { min-width: 0; }
.pf-ms-del { background: none; border: none; cursor: pointer; padding: 4px;
             line-height: 0; color: var(--color-muted); border-radius: 3px; }
.pf-ms-del:hover { color: var(--color-danger, #d9534f); }
.pf-ms-add { margin-top: 10px; }

/* Project modal — Phases & Milestones tab: draggable priority list */
.pf-ph-cols, .pf-ph-row { display: grid; align-items: center; gap: var(--space-2);
    grid-template-columns: 18px 22px 26px 1fr 148px 148px 148px 26px; }
.pf-ph-colordd { line-height: 0; }
.pf-ph-colorbtn { background: none; border: 1px solid var(--color-line); border-radius: 4px;
    cursor: pointer; padding: 4px; line-height: 0; }
.pf-ph-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    background: #c3c9d1; }
.pf-ph-colormenu { padding: 10px; }
.pf-ph-cols span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-muted); }
.pf-ph-cols { margin-bottom: 6px; }
.pf-ph-list { max-height: 340px; overflow-y: auto; }
.pf-ph-row { padding: 3px 0; background: var(--color-surface); }
.pf-ph-row.is-dragging { opacity: .45; }
.pf-ph-row input { min-width: 0; }
.pf-ph-drag { color: var(--color-muted); cursor: grab; line-height: 0;
    display: inline-flex; justify-content: center; }
.pf-ph-ico { color: #aab4c4; line-height: 0; display: inline-flex; justify-content: center; }
.pf-ph-del { color: var(--color-muted); }
.pf-ph-del:hover { color: var(--color-danger, #d9534f); }

/* Project modal: folder-link fields under the Details RTE */
.pf-link-row { display: flex; align-items: center; gap: 9px; }
.pf-link-row + .pf-link-row { margin-top: 8px; }
.pf-link-ico { line-height: 0; color: var(--color-muted); flex: none; }
.pf-link-row input { flex: 1; min-width: 0; }

/* Quote-line-managed activity: locked until the line is unlinked */
.dd--locked .dd-trigger { background: var(--color-soft); color: var(--color-muted);
                          cursor: default; }
.dd--locked .dd-caret { visibility: hidden; }

/* Activity picker options: name + rate left, group right */
.tf-act-opt { display: flex; align-items: center; justify-content: space-between;
              gap: 14px; }
.tf-act-opt .tf-act-name { white-space: nowrap; }
.tf-act-opt .tf-act-group { flex: none; }
/* Status hugs the right end of its row */
.field-row .tf-status-field { flex: 0 0 auto; margin-left: auto; text-align: right; }
.tf-title-row { display: flex; align-items: center; gap: 10px; }
.tf-title-row input { flex: 1; }
.tf-pri { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.tf-pri-opt { background: none; border: 1px solid transparent; border-radius: 3px;
              cursor: pointer; padding: 4px; line-height: 0; opacity: .35; }
.tf-pri-opt:hover { opacity: .75; }
.tf-pri-opt.active { opacity: 1; border-color: var(--color-line);
                     background: var(--color-soft); }
.tf-quotes { line-height: 1.5; }
.tf-quote-row { color: var(--color-text); font-weight: 600; }
/* Line picker: quote/heading group rows + name/avail/activity options */
.tf-line-head { padding: 8px 10px 3px; font-size: .7rem; font-weight: 700;
                letter-spacing: .05em; text-transform: uppercase;
                color: var(--color-muted); }
.tf-line-head--quote { color: var(--color-primary); border-top: var(--border-subtle);
                       margin-top: 4px; }
.tf-line-opt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.tf-line-opt .tf-line-name { flex: 1; min-width: 0; }
.tf-line-opt .tf-avail { font-weight: 700; font-size: .8rem; }
.tf-avail.good { color: #2d9b43; }
.tf-avail.bad { color: var(--color-alert); }
.tf-line-opt .tf-line-sub { flex-basis: 100%; font-size: .75rem;
                            color: var(--color-muted); }

/* ----------------------------------------------------------------------
 * Task board: one column per work-item status, drag cards to restatus.
 * -------------------------------------------------------------------- */
.wa-board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr));
            gap: 0; overflow-x: auto; }   /* stretch: lanes share the tallest height */
.wa-col { display: flex; flex-direction: column; }
.wa-col-head { padding: 9px 12px;   /* square top; color bar underneath */
               border-bottom: 3px solid var(--color-line); }
.wa-col-name { font-weight: 700; font-size: .85rem; color: var(--color-primary); }
.wa-col-meta { font-size: .72rem; color: var(--color-text); margin-top: 1px; }
.wa-col-meta strong { font-weight: 700; }
.wa-col-meta span { color: var(--color-muted); margin-left: 4px; }
.wa-col-body { min-height: 140px; padding: 10px; display: flex; flex: 1;
               flex-direction: column; gap: 10px;
               background: var(--color-page); }  /* same lane gray as Pipeline */
.wa-col:first-child .wa-col-body { border-radius: 0 0 0 4px; }
.wa-col:last-child .wa-col-body { border-radius: 0 0 4px 0; }
.wa-col.drop .wa-col-body { outline: 2px dashed var(--color-accent); outline-offset: -2px; }

.wa-card { background: var(--color-surface); border: var(--border-subtle);
           border-left: 3px solid var(--color-line); border-radius: 5px;
           box-shadow: var(--shadow-card); padding: 10px 12px 9px; }
.wa-card[draggable="true"] { cursor: grab; }
.wa-card.dragging { opacity: .45; }
.wa-card-title { display: flex; align-items: flex-start; gap: 8px; }
.wa-card-title .wa-pri { margin-top: 1px; }
.wa-card-title .row-title { font-size: .8rem; line-height: 1.35; }
.wa-card-bar { margin: 9px 0 8px; }
.wa-card-bar .pbar { width: 100%; }
.wa-card-people { display: flex; align-items: center; }
.wa-chip-trigger { padding: 0; border: 0; background: none; line-height: 0;
                   display: inline-flex; align-items: center;
                   gap: 0; }   /* base .dd-trigger gap would pad the chips apart */
.wa-chip-trigger:hover { background: none; }
.wa-card-people .dd { line-height: 0; }
.wa-chip { display: inline-flex; align-items: center; justify-content: center;
           height: 21px; min-width: 26px; padding: 0 7px;
           background: #b9c0cb; color: #fff; border-radius: 3px;
           font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.wa-chip + .wa-chip { margin-left: 2px; }
.wa-chip-trigger:hover .wa-chip { background: #9aa3b1; }
/* PM chip: angled right side pointing at the assignees */
.wa-chip--pm { border-radius: 3px 0 0 3px; position: relative; margin-right: 11px; }
.wa-chip--pm::after { content: ""; position: absolute; left: 100%; top: 0;
    border-top: 10.5px solid transparent; border-bottom: 10.5px solid transparent;
    border-left: 7px solid #b9c0cb; }
.wa-chip-trigger:hover .wa-chip--pm::after { border-left-color: #9aa3b1; }
.wa-chip--ghost { background: none; border: 1.5px dashed var(--color-muted);
                  color: var(--color-muted); }
.wa-chip-trigger:hover .wa-chip--ghost { background: none; color: var(--color-text);
                  border-color: var(--color-text); }

/* Pipeline lifespan strip (quote view): days per stage, color-coded by
   status, then the running total / closed-in figure */
.qp-strip { display: flex; align-items: center; justify-content: center;
            flex-wrap: wrap; gap: var(--space-4);
            padding: var(--space-4) 0 var(--space-2);
            border-top: var(--border-subtle); margin-top: var(--space-4); }
.qp-seg { text-align: center; min-width: 140px; }
.qp-label { font-size: .85rem; font-weight: 700; color: var(--color-text); }
.qp-val { font-size: 1.35rem; color: var(--color-muted); margin-top: 2px;
          font-variant-numeric: tabular-nums; }
.qp-bar { height: 4px; border-radius: 2px; margin-top: 10px; opacity: .55; }
.qp-bar--total { background: var(--color-accent); }
.qp-seg--fresh .qp-label { color: var(--color-line); }
.qp-seg--fresh .qp-bar { visibility: hidden; }
.qp-sep { color: var(--color-line); flex: none; }
.qp-div { width: 2px; height: 44px; border-radius: 1px;
          background: var(--color-line); flex: none; }

/* Quote view (read-only intermediary): header name beside the number,
   read-only field values, line-item table with subheading bands */
.qv-name { font-weight: 500; color: var(--color-text); }
.ro-val { font-size: .92rem; color: var(--color-text); padding: 6px 0 2px; }
.qv-author { display: inline-flex; align-items: center; gap: 8px; }
.qv-lines .qv-heading td { background: var(--color-soft); font-weight: 700;
                           color: var(--color-primary); }
.qv-service { font-weight: 700; color: var(--color-primary); }
.qv-desc, .qv-heading-notes { display: block; font-weight: 400; font-size: .85rem;
                              color: var(--color-muted); margin-top: 2px; }
.qv-heading-flags { display: block; font-weight: 400; font-size: .74rem;
                    color: var(--color-muted); margin-top: 3px; letter-spacing: .02em; }

/* Checkbox rows in modal forms */
.check-label { display: flex; align-items: center; gap: 10px;
               font-size: .9rem; color: var(--color-text); cursor: pointer;
               padding: 2px 0; }
.check-label input[type="checkbox"] { width: 15px; height: 15px; margin: 0;
                                      accent-color: var(--color-accent); flex: none; }

/* ----------------------------------------------------------------------
 * Login / user switcher
 * -------------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.login-card { width: 100%; max-width: 400px; border: var(--border-primary); padding: 0; }
/* Navy header cap (ported from Luminus Dashboard's login): spectrum
   mark + white-inverted wordmark + "PROJECT MANAGEMENT" in white caps.
   Background matches the card's navy border so it reads as one top. */
.login-head { background: var(--color-primary); padding: var(--space-4); text-align: center; }
.login-head-icon { display: block; width: 20%; height: auto; margin: 0 auto 15px; }
/* Luminus wordmark is solid navy (#010031); invert to white for navy. */
.login-head-logo { display: block; width: 30%; height: auto; margin: 0 auto 5px;
    filter: brightness(0) invert(1); }
.login-head-title { color: #fff; text-transform: uppercase;
    font-family: var(--font-heading); font-weight: var(--weight-heading);
    font-size: 1rem; letter-spacing: .1em; }
.login-body { padding: var(--space-4); }

.dev-switcher { margin-top: var(--space-4); padding-top: var(--space-3);
                border-top: var(--border-subtle); }

.user-list { list-style: none; margin: 0; padding: 0; }
.user-list li + li { margin-top: var(--space-2); }
.user-btn {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    width: 100%; text-align: left;
    font-family: var(--font-body); font-size: .95rem; color: var(--color-text);
    background: var(--color-bg); border: var(--border-subtle); border-radius: var(--radius);
    padding: 10px 14px; cursor: pointer;
}
.user-btn:hover { border-color: var(--color-accent); }
.user-btn .name { font-family: var(--font-heading); font-weight: var(--weight-heading); color: var(--color-primary); }

/* ----------------------------------------------------------------------
 * Project > Events — date-grouped list + Add/Modify Event modal extras
 * -------------------------------------------------------------------- */
table.ev-table { width: 100%; }
table.ev-table tbody td { padding: 9px 10px; text-align: left;
                          font-size: 14px; vertical-align: middle; }
.ev-group .ev-row:hover td { background: var(--color-mist); }

.ev-when { width: 96px; white-space: nowrap; }
.ev-time { display: inline-block; min-width: 62px; text-align: center;
           padding: 3px 8px; border-radius: 6px; background: var(--color-alert);
           color: #fff; font-weight: 700; font-size: .78rem; }
/* Time pills are ALL red now (Tim, 2026-08-30 — the green-future /
   red-past split read as a status and confused; red matches the
   calendar lockups and Scoro's look). The --future/--past classes
   still ride the markup for the client-side Past/Future filters. */
.ev-end { display: block; color: var(--color-muted); font-size: .78rem;
          margin-top: 3px; text-align: center; min-width: 62px;
          box-sizing: border-box; padding: 0 8px; width: fit-content; }

.ev-act { width: 220px; }
.ev-actbtn { display: inline-flex; align-items: center; gap: 7px;
             border: 0; background: none; padding: 0; cursor: pointer;
             font-family: var(--font-body); font-size: 14px;
             color: var(--color-text); }
.ev-actbtn svg { color: var(--color-muted); flex: none; }
.ev-actbtn:hover { color: var(--color-primary); text-decoration: none; }

.ev-title { border: 0; background: none; padding: 0; cursor: pointer;
            font-family: var(--font-body); font-size: 14px; font-weight: 700;
            color: var(--color-primary); text-align: left; }
.ev-title:hover { color: var(--color-link); text-decoration: none; }

.ev-people { text-align: right !important; width: 220px; }

/* Date group heads read as section breaks: bold, dark, extra gap.
   (table.ev-table tbody td sets padding at (0,1,3) — match it.) */
table.ev-table tbody tr.ev-ghead td { font-weight: 700;
                 color: var(--color-text); padding-top: 42px; }
/* the FIRST VISIBLE group hugs the title row — evApplyShow tags it,
   since Show filters can hide the literal first tbody */
table.ev-table tbody.ev-group--first tr.ev-ghead td { padding-top: 9px; }

/* Event attendee faces: 20% larger circle, first name under (full
   name stays as the avatar tooltip) */
.att-stack { display: inline-flex; gap: 12px; }
.att-face { display: inline-flex; flex-direction: column;
            align-items: center; gap: 3px; }
.att-name { font-size: .72rem; font-weight: 400;
            color: var(--color-text); line-height: 1; }

/* Event modal: Date + Time row, Duration + Recurring row, hidden
   Repeating row */
.ef-when-row .field--date { flex: 0 0 170px; }
.ef-when-row .field:not(.field--date) { flex: 0 0 130px; }
.ef-dur-row { align-items: flex-end; }
.ef-dur-row .field { flex: 0 0 150px; }
.ef-recur-check { white-space: nowrap; margin: 0 0 9px 6px; }
.ef-until-word { color: var(--color-muted); font-size: .85rem; margin: 0 2px 10px; }

/* ----------------------------------------------------------------------
 * Event detail page (event.php)
 * -------------------------------------------------------------------- */
.ed-head { grid-template-columns: auto auto 1fr auto; align-items: center; }
.ed-when { display: flex; align-items: center; gap: 14px; }
.ed-cal { width: 54px; border-radius: var(--btn-radius); overflow: hidden; text-align: center;
          background: #fff; border: 1px solid var(--color-line); flex: none;
          cursor: default; }
.ed-cal-mon { display: block; background: var(--color-alert); color: #fff;
              font-size: .7rem; font-weight: 700; letter-spacing: .04em;
              padding: 3px 0 2px; }
.ed-cal-day { display: block; font-family: var(--font-heading); font-weight: 700;
              font-size: 1.45rem; color: var(--color-primary); padding: 3px 0 5px;
              line-height: 1.1; }
.ed-dow { font-weight: 700; color: var(--color-text); line-height: 1.25; }
.ed-slot { font-size: .85rem; color: var(--color-text); line-height: 1.25; }
.ed-dur { font-size: .8rem; line-height: 1.25; }
.ed-sep { width: 1px; align-self: stretch; background: var(--color-line); }
.ed-main { min-width: 0; }
.ed-act { margin-top: 8px; }
.ed-actions { display: flex; align-items: center; }

/* Info band: attendees 40% | bold links 60% */
.ed-info { grid-template-columns: 2fr 3fr; }
.ed-att { display: flex; flex-direction: column; align-items: flex-start;
          gap: 16px; }
.ed-att .ed-conf { font-weight: 700; color: var(--color-text);
                   align-items: flex-start; max-width: 100%; }
.ed-att .ed-conf svg { margin-top: 2px; }
.ed-conf-url { min-width: 0; word-break: break-all; white-space: normal;
               text-align: left; }
.ed-att .ed-conf:hover { color: var(--color-link); }
.ed-att .att-name { font-size: .8rem; }
.ed-links { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ed-links .td-link { font-weight: 700; color: var(--color-text); }
.ed-links .td-link:hover { color: var(--color-link); }
.ed-ext { color: var(--color-idle); line-height: 0; margin-left: 2px; }

/* Event list rows link to the detail page */
.ev-row { cursor: pointer; }

/* Tasks list: drag-reorder within a group (per-user day order) */
.tk-project { white-space: nowrap; }
.tk-drag { display: inline-block; vertical-align: -2px; margin-right: 7px;
           opacity: 0; cursor: grab; color: var(--color-idle); }
.tk-row:hover .tk-drag { opacity: .8; }
.tk-drag:active { cursor: grabbing; }
.tk-row.dragging td, .tk-sub.dragging td { opacity: .45; }

/* ----------------------------------------------------------------------
 * Time tracker (topnav [data-timer])
 * -------------------------------------------------------------------- */
.tm-trigger--live { width: auto; padding: 0 4px; }
/* the pill replaces the icon — the round icon hover doesn't fit it */
.topbar .icon-only.tm-trigger--live:hover { background: none; }
.tm-trigger--live:hover .tm-pill { background: var(--btn-light-hover); }
.tm-pill { display: inline-flex; align-items: center; gap: 7px;
           background: var(--btn-light); border: 1px solid var(--color-line);
           border-radius: 999px; padding: 4px 12px;
           font-size: .82rem; font-weight: 700; color: var(--color-primary);
           font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
          background: var(--color-alert); }

.tm-menu { min-width: 460px; padding: 10px 0 4px; }
.tm-menu .dd-search { margin: 0 12px 8px; width: calc(100% - 24px); }
.tm-list { max-height: 480px; overflow-y: auto; }

.tm-task { border-top: var(--border-subtle); border-left: 3px solid transparent; }
.tm-task--active { border-left-color: var(--color-alert); background: var(--color-mist); }

.tm-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; }
.tm-row--task { padding-left: 9px; }
.tm-pri { flex: none; }
.tm-names { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-title { font-weight: 700; color: var(--color-primary); font-size: .88rem;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-title:hover { color: var(--color-link); text-decoration: none; }
.tm-proj { display: inline-flex; align-items: center; gap: 5px;
           font-size: .76rem; color: var(--color-muted); min-width: 0; }
.tm-proj svg { flex: none; }
.tm-proj:hover { color: var(--color-link); text-decoration: none; }
.tm-net { font-weight: 700; font-size: .84rem; color: var(--color-primary);
          white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm-neg { color: var(--color-alert); }

.tm-cir { display: inline-flex; align-items: center; justify-content: center;
          width: 28px; height: 28px; flex: none; border-radius: 50%;
          border: 1px solid var(--color-line); background: none;
          color: var(--color-muted); cursor: pointer; }
.tm-cir:hover { border-color: var(--color-accent); color: var(--color-primary); }
.tm-cir--pause { background: var(--color-slate); border-color: var(--color-slate);
                 color: #fff; }
.tm-cir--pause:hover { background: var(--btn-dark-hover); color: #fff; }

.tm-entry { padding-left: 34px; border-top: 1px dashed var(--color-line); }
.tm-eedit { flex: none; }
/* priority color beats the td-te-edit muted default (task-list mirror) */
.tm-eedit.wa-pri--high   { color: var(--color-alert); }
.tm-eedit.wa-pri--medium { color: #e8a13d; }
.tm-eedit.wa-pri--normal { color: #2f80ed; }
.tm-elabel { flex: 1; min-width: 0; font-size: .82rem; color: var(--color-text);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-etime { font-weight: 700; font-size: .84rem; color: var(--color-primary);
            white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm-entry--active { background: #fdf3f2; }
.tm-entry--active .tm-etime { font-size: 1.02rem; }

/* Tasks list: hover timer dropdowns (task row + entry subrows) */
.tk-rowtimer { opacity: 0; margin-left: auto; }
.tk-row:hover .tk-rowtimer, .tk-rowtimer.open { opacity: 1; }
.tk-rowtimer-btn { background: none; border: 0; padding: 2px; cursor: pointer;
                   line-height: 0; color: var(--color-muted); border-radius: 3px; }
.tk-rowtimer-btn:hover { color: var(--color-primary); }
.tk-timer .dd-trigger.tk-timer-btn { background: none; border: 0; padding: 0;
                                     cursor: pointer; line-height: 0; color: inherit; }
.tk-timer.open .tk-timer-tip { display: none !important; }

/* Tasks list row-timer trigger: sized/colored like the done circle,
   hugging the checkmark side of the cluster cell */
.tk-rowtimer-btn { color: #c3c9d1; }
.tk-rowtimer-btn svg { width: 22px; height: 22px; }
.tk-rowtimer { margin-right: -6px; }

/* Task view entries table: the running entry reads live */
.td-te-table tr.td-te-row--live td { background: #fdf3f2; }
.td-te-edit--live .ico-timer { color: var(--color-alert); }
.td-te-dur--live { font-weight: 700; font-size: 1.02rem; color: var(--color-primary);
                   font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-te-livectl { display: inline-flex; gap: 6px; }

/* Tasks list subrows: entry time aligned under the Remaining column,
   live counter while tracking */
.tk-sub-time { text-align: right; font-variant-numeric: tabular-nums;
               white-space: nowrap; }
.tk-sub-live { font-weight: 700; color: var(--color-primary); white-space: nowrap; }

/* Row-timer trigger mirrors the mark-done circle's hover (color
   only — no gray dd-trigger backdrop) */
.tk-rowtimer-btn:hover { color: var(--color-link); background: none; }

/* Task view: tracker controls share the done-toggle format and the
   done icons line up in one right-aligned column */
.td-te-table .td-te-flag { text-align: right; white-space: nowrap; }
.td-te-livectl { display: inline-flex; align-items: center; }

/* Active pause control: filled gray circle w/ white bars, matching
   the header dropdown's pause button */
.td-te-pause { color: var(--color-slate); }
.td-te-pause:not(:disabled):hover { color: var(--btn-dark-hover); }

/* Tasks list: the actively tracking entry row wears the faint red
   tint (same signal as the task view table + header menu) */
.tk-sub--live td, .tk-sub--live:hover td { background: #fdf3f2; }

/* ----------------------------------------------------------------------
 * Calendar (calendar.php) — day/week flow columns + month grid
 * -------------------------------------------------------------------- */
.cal-controls { margin-bottom: 14px; }

.cal-head { display: grid; grid-template-columns: 1fr auto 1fr;
            align-items: center; gap: 12px; margin-bottom: 18px;
            padding-bottom: 14px; border-bottom: var(--border-subtle); }
.cal-title { margin: 0; font-size: 1.35rem; font-weight: 400;
             color: var(--color-primary); }
.cal-title strong { font-weight: 700; }
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.cal-nav-link { color: var(--color-muted); font-size: .9rem; }
.cal-nav-link:hover { color: var(--color-link); text-decoration: none; }
.cal-jump-wrap { display: inline-flex; align-items: center; gap: 6px;
                 color: var(--color-muted); }
.cal-jump { border: none; background: none; padding: 2px; width: 140px;
            font-size: .85rem; color: var(--color-muted); cursor: pointer; }
.cal-head-actions { display: flex; justify-content: flex-end; }

/* Week/day columns */
.cal-grid { display: grid; gap: 0; }
.cal-grid--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid--1 { grid-template-columns: minmax(0, 520px); justify-content: center; }
.cal-col { min-width: 0; padding: 0 10px; }
.cal-col + .cal-col { border-left: 1px solid var(--color-soft); }

.cal-colhead { position: relative; text-align: center; padding: 6px 0 12px; }
.cal-colname { font-size: 1.15rem; font-weight: 400; color: var(--color-text); }
.cal-colhead--today .cal-colname { font-weight: 700; }
.cal-wknd .cal-colname, .cal-wknd.cal-colhead .cal-colname,
.cal-month-num.cal-wknd { color: var(--color-alert); }
.cal-addday { display: none; position: absolute; left: 50%; top: 2px;
              transform: translateX(-50%); }
.cal-colhead:hover .cal-colname { visibility: hidden; }
.cal-colhead:hover .cal-addday { display: inline-block; }

.cal-hour { display: flex; align-items: baseline; gap: 7px;
            color: var(--color-muted); font-size: .78rem; padding: 3px 4px 12px;
            border-top: 1px solid #eef0f4; font-variant-numeric: tabular-nums; }
.cal-hour-lbl, .cal-hour-q { background: none; border: none; padding: 0;
            font: inherit; color: inherit; cursor: default; }
button.cal-hour-lbl, .cal-hour-q { cursor: pointer; }
button.cal-hour-lbl:hover, .cal-hour-q:hover { color: var(--color-link); }
.cal-hour-q { display: none; color: var(--color-idle); }
.cal-hour:hover .cal-hour-q { display: inline; }

/* Event cards */
.cal-ev { background: #eef1f8; border-radius: 6px; padding: 10px;
          margin: 8px 0; display: flex; flex-direction: column; gap: 4px;
          font-size: .8rem; }
.cal-ev-r1 { display: flex; align-items: center; justify-content: space-between;
             gap: 6px; }
.cal-ev-when { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cal-ev .ev-time { min-width: 0; flex: none; padding: 2px 7px;
                   font-size: .72rem; border-radius: 4px; }
.cal-ev-end { color: var(--color-text); font-size: .78rem; flex: none; }
.cal-ev-r1right { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.cal-ev-people .avatar { margin-left: -6px; border-width: 1.5px; }
.cal-ev-people .avatar:first-child { margin-left: 0; }
.cal-ev-people .more { margin-left: 2px; font-size: .68rem; color: var(--color-muted); }
.cal-more { width: 0; opacity: 0; overflow: hidden;
            transition: width .18s ease, opacity .18s ease; }
.cal-ev:hover .cal-more, .cal-more.open { width: 20px; opacity: 1; overflow: visible; }
.cal-more-btn { background: none; border: none; padding: 2px; cursor: pointer;
                line-height: 0; color: var(--color-muted); border-radius: 3px; }
.cal-more-btn:hover { color: var(--color-primary); background: none; }
.cal-more .dd-menu { min-width: 210px; }

.cal-ev-title { font-weight: 700; color: var(--color-primary);
                font-size: .85rem; line-height: 1.35; overflow-wrap: break-word; }
.cal-ev-title:hover { color: var(--color-link); text-decoration: none; }
.cal-ev-conf { display: flex; align-items: center; gap: 5px;
               color: var(--color-link); min-width: 0; }
.cal-ev-conf svg { flex: none; }
.cal-ev-conf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-desc { color: var(--color-muted); line-height: 1.35; font-size: .74rem;
                overflow-wrap: anywhere; }   /* imported Zoom descriptions open with unbreakable URLs */
.cal-ev-meta { display: flex; align-items: center; gap: 6px;
               color: var(--color-text); min-width: 0; font-size: .74rem; }
.cal-ev-meta svg { flex: none; color: var(--color-muted); }
.cal-ev-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cal-ev-meta:hover { color: var(--color-link); text-decoration: none; }

/* Month grid */
.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-month-dow { text-align: center; font-size: .78rem; color: var(--color-muted);
                 padding: 6px 0 10px; }
.cal-month-cell { min-height: 112px; border: 1px solid #eef0f4; margin: -1px 0 0 -1px;
                  padding: 6px; min-width: 0; }
.cal-month-cell--out { background: var(--color-mist); }
.cal-month-cell--out .cal-month-num { color: var(--color-idle); }
.cal-month-cell--today .cal-month-num { font-weight: 700; color: var(--color-primary); }
.cal-month-num { font-size: .95rem; color: var(--color-text); margin-bottom: 6px; }
.cal-month-ev { display: flex; align-items: center; gap: 5px; padding: 2px 0;
                font-size: .76rem; color: var(--color-text); min-width: 0; }
.cal-month-ev span.verbatim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-month-ev:hover { color: var(--color-link); text-decoration: none; }
.ev-time--mini { min-width: 0; flex: none; padding: 1px 5px; font-size: .68rem; border-radius: 3px; }

/* Metrics sit at the panel's foot: separator ABOVE, none below */
.cal-metrics { border-bottom: none; border-top: var(--border-subtle);
               margin-top: 20px; padding-bottom: 6px; }

/* Calendar: quarter-spaced hour rows (clock progression). Left pad =
   card padding (10) + start-pill padding (7) so the label lines up
   with the TIME TEXT inside the pill, not the pill's edge. */
.cal-hour { padding-left: 17px; }
.cal-hour-lbl, .cal-hour-q { flex: 1 1 25%; text-align: left; }
.cal-hour-q { display: none; }

/* Calendar: day utilization (bar + tasks/time row + detail popup) */
.cal-util { margin-bottom: 4px; }
.cal-ubar { display: flex; height: 6px; border-radius: 3px; overflow: hidden;
            background: var(--color-soft); }
.cal-useg { display: block; height: 100%; }
.cal-useg--done      { background: #2f80ed; }
.cal-useg--sched     { background: repeating-linear-gradient(45deg, #2f80ed 0 3px, rgba(47, 128, 237, .22) 3px 6px); }
.cal-useg--overdone  { background: var(--color-alert); }
.cal-useg--oversched { background: repeating-linear-gradient(45deg, #d23b3b 0 3px, rgba(210, 59, 59, .22) 3px 6px); }

.cal-usum { display: block; }
.cal-urow { display: flex; width: 100%; justify-content: space-between;
            align-items: center; gap: 8px; background: none; border: none;
            padding: 8px 2px; cursor: pointer; font-family: var(--font-body);
            font-size: .85rem; color: var(--color-text); }
.cal-urow:hover { color: var(--color-primary); }
.cal-u--none { color: var(--color-idle); }
.cal-utime { font-variant-numeric: tabular-nums; }

.cal-udetail { min-width: 430px; max-width: 480px; padding: 6px 0; }
.cal-utable { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cal-utable th { text-align: left; font-size: .72rem; color: var(--color-muted);
                 font-weight: 400; padding: 6px 12px; border-bottom: var(--border-subtle); }
.cal-utable td { padding: 8px 12px; vertical-align: top; text-align: left; }
.cal-utable tr + tr td { border-top: 1px solid #f0f2f6; }
.cal-ut-ev td { font-weight: 600; color: var(--color-text); }
.cal-ut-ev svg { vertical-align: -2px; color: var(--color-muted); margin-right: 4px; }
.cal-ut-dash { color: var(--color-idle); }
.cal-ut-pri { padding: 2px; margin-right: 5px; vertical-align: -2px; line-height: 0; }
.cal-ut-title { font-weight: 700; color: var(--color-primary); }
.cal-ut-title:hover { color: var(--color-link); text-decoration: none; }
.cal-ut-proj { padding-left: 24px; margin-top: 3px; font-size: .78rem; }
.cal-ut-proj a { color: var(--color-text); display: inline-flex;
                 align-items: center; gap: 5px; }
.cal-ut-proj a:hover { color: var(--color-link); text-decoration: none; }
.cal-ut-proj svg { color: var(--color-muted); flex: none; }
.cal-ut-te td:first-child { padding-left: 24px; }
.cal-ut-telabel { color: var(--color-text); }
.cal-ut-te .td-te-edit { margin-right: 5px; vertical-align: -3px; }
.cal-ut-te .td-te-toggle { padding: 0 2px; }

/* ======================================================================
 * Planner — per-user rows × day/week columns, proportional time blocks
 * ==================================================================== */
.pl-head { display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; padding: 14px 0 12px; border-bottom: 1px solid var(--color-line); }
.pl-views { display: flex; justify-content: flex-end; }
.pl-seg { display: inline-block; border: 1px solid var(--color-line); background: var(--btn-light);
    padding: 6px 18px; font-size: .8rem; color: var(--color-text); text-decoration: none; }
.pl-seg + .pl-seg { border-left: 0; }
.pl-seg:first-child { border-radius: var(--btn-radius) 0 0 var(--btn-radius); }
.pl-seg:last-child { border-radius: 0 var(--btn-radius) var(--btn-radius) 0; }
.pl-seg:hover { background: var(--btn-light-hover); text-decoration: none; }
.pl-seg.active { background: #fff; color: var(--color-primary); font-weight: 700; }

/* Grid: one header row + a row per user; first column is the person. */
.pl-mrow, .pl-hrow, .pl-row { display: grid; }
.pl-month { font-weight: 700; color: var(--color-primary); font-size: .85rem;
    padding: 10px 10px 0; white-space: nowrap; overflow: hidden; }
.pl-h { padding: 8px 8px; font-size: .8rem; color: var(--color-muted);
    border-left: 1px solid #e6e9f2; white-space: nowrap; overflow: hidden; }
.pl-h--today { color: var(--color-primary); font-weight: 700; }
.pl-h .pl-h-day { font-weight: 600; }
.pl-hrow { border-bottom: 1px solid var(--color-line); }
/* Team members separate with a gap, not borders (columns keep their
   vertical hairlines). */
.pl-row + .pl-row { margin-top: 5px; }

/* Person column: photo in a booked-% ring, name, %, available time —
   on a quiet gray, one step lighter than the day columns. */
.pl-user { padding: 18px 8px; text-align: center; background: var(--color-soft); }
.pl-ring { position: relative; width: 58px; height: 58px; margin: 0 auto; }
.pl-ring svg { position: absolute; inset: 0; }
.pl-ring .avatar { position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); }
.pl-user-name { font-weight: 700; color: var(--color-primary); margin-top: 8px;
    font-size: .88rem; line-height: 1.25; }
.pl-user-pct { font-weight: 700; font-size: .8rem; color: var(--color-text); margin-top: 4px; }
.pl-user-net { font-size: .76rem; color: var(--color-muted); margin-top: 1px; }

/* Day/week cell: lavender well, blocks stack from the top; the zone
   past capacity is diagonally striped with a red net pill at the line. */
.pl-cell { border-left: 1px solid #e6e9f2; display: flex; flex-direction: column;
    background: #f1f2f8; min-width: 0; position: relative; }
.pl-cellbody { position: relative; flex: 1; padding: 4px 4px 2px; }
.pl-cellbody .pl-blk, .pl-cellbody .pl-mini { position: relative; z-index: 1; }
/* The z-index:1 stacking context would let LATER blocks paint over an
   open popup — lift the hovered block above its siblings. */
.pl-blk:has(.pl-pv.open), .pl-mini:has(.pl-pv.open) { z-index: 60; }
.pl-overstripe { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
    background: repeating-linear-gradient(45deg, rgba(1, 0, 49, .07) 0 2px, transparent 2px 8px); }
.pl-net { position: relative; z-index: 1; padding: 4px 8px 10px; text-align: center;
    font-size: .76rem; color: var(--color-muted); }
.pl-netpill { display: inline-block; background: var(--color-alert);
    color: #fff; font-weight: 700; border-radius: 999px; padding: 2px 11px; }

/* Day-view block: white card, project-color left border (events slate). */
.pl-blk { background: #fff; border-radius: 4px; border-left: 3px solid var(--color-slate);
    box-shadow: var(--shadow-card); margin-bottom: 3px; overflow: hidden; cursor: pointer; }
.pl-blk:hover { background: var(--color-mist); }
/* NOTE: never opacity on the block itself — it creates a stacking
   context that traps the fixed .pl-pv popup beneath later siblings.
   Dim the content (day blocks) or overlay-lighten (minis) instead. */
.pl-blk.pl-blk--dim > :not(.pl-pv) { opacity: .75; }
.pl-mini.pl-blk--dim { box-shadow: inset 0 0 0 99px rgba(255, 255, 255, .4); }
.pl-blk.dragging, .pl-mini.dragging { opacity: .45; }
.pl-r1 { display: flex; align-items: flex-start; gap: 4px; padding: 4px 6px 0; }
.pl-r1 .ev-time { min-width: 0; flex: none; padding: 1px 6px; font-size: .68rem; border-radius: 3px; }
.pl-title { flex: 1; min-width: 0; font-size: .75rem; font-weight: 600;
    color: var(--color-primary); line-height: 1.3; }
/* Icons keep their gap reserved (visibility, not display) so the
   title doesn't reflow when they pop in; locked blocks render no
   .pl-acts at all, so they keep the full width. */
.pl-acts { display: inline-flex; visibility: hidden; gap: 1px; flex: none; }
.pl-blk:hover .pl-acts { visibility: visible; }
.pl-act-btn { border: 0; background: none; padding: 2px 3px; color: var(--color-muted);
    cursor: pointer; border-radius: 3px; line-height: 0; }
.pl-act-btn:hover { background: var(--btn-light-hover); color: var(--color-primary); }
.pl-meta { display: flex; align-items: flex-start; gap: 4px; padding: 2px 6px 0;
    font-size: .68rem; color: var(--color-muted); line-height: 1.3; }
.pl-meta svg { flex: none; margin-top: 1px; }

/* Weeks/months block: bare faded-color bar (hover popup carries info). */
/* NOTE: no filter here — a filter on the block would become the
   containing block for its fixed-position .pl-pv popup. */
.pl-mini { border-radius: 3px; margin-bottom: 2px; cursor: pointer; }
.pl-mini:hover { box-shadow: inset 0 0 0 99px rgba(1, 0, 49, .08); }

/* Project-deadline diamond (top right of the table, on the last day
   column's bottom corner) + its hover popup. */
.pl-hrow { position: relative; }
/* Padding widens the hover hit area and the popup starts flush at the
   box edge (top:100%) — no dead gap, so the mouse can reach it. */
.pl-ddl { position: absolute; right: -1px; bottom: -10px; z-index: 6;
    line-height: 0; padding: 4px; }
.pl-ddl > svg { color: var(--color-alert); cursor: pointer; display: block; }
.pl-ddl-pop { display: none; position: absolute; top: 100%; right: 0;
    background: #fff; border: 1px solid var(--color-line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(1, 0, 49, .18); padding: 14px 16px;
    min-width: 320px; max-height: 320px; overflow-y: auto; }
.pl-ddl:hover .pl-ddl-pop { display: block; }
.pl-ddl-title { font-weight: 700; color: var(--color-primary); font-size: .88rem;
    margin-bottom: 10px; }
.pl-ddl-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px;
    font-size: .82rem; line-height: 1.3; }
.pl-ddl-row:last-child { margin-bottom: 0; }
.pl-ddl-row svg { flex: none; margin-top: 1px; }
.pl-ddl-row a { flex: 1; min-width: 0; color: var(--color-text); }
.pl-ddl-row a:hover { color: var(--color-link); text-decoration: none; }
.pl-ddl-date { flex: none; color: var(--color-muted); }

/* Info hover popup (fixed-position, viewport-aware via JS). */
.pl-pv { display: none; position: fixed; z-index: 70; background: #fff; cursor: default;
    border: 1px solid var(--color-line); border-radius: 6px; padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(1, 0, 49, .18); min-width: 230px; max-width: 300px; }
.pl-pv-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px;
    font-size: .8rem; color: var(--color-text); line-height: 1.35; }
.pl-pv-row:last-child { margin-bottom: 0; }
.pl-pv-row svg { flex: none; margin-top: 2px; color: var(--color-muted); }
.pl-pv-title { font-weight: 700; color: var(--color-primary); }
a.pl-pv-lnk { color: var(--color-primary); }
a.pl-pv-lnk:hover { color: var(--color-link); text-decoration: none; }
a.pl-pv-conf { color: var(--color-text); word-break: break-all; }
a.pl-pv-conf:hover { color: var(--color-link); text-decoration: none; }

/* ======================================================================
 * Project > Events > Calendar — month grid, main-Calendar event cards
 * ==================================================================== */
.pgc-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    margin-bottom: 14px; }
.pgc-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--color-primary); }
.pgc-jump { border: none; background: none; padding: 2px; width: 140px;
    font-size: .85rem; color: var(--color-muted); cursor: pointer; }

.pgc-grid { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr));
    border: 1px solid var(--color-line); border-radius: 4px; }
.pgc-hcell { padding: 10px 8px; text-align: center; font-weight: 700; font-size: .85rem;
    color: var(--color-primary); background: var(--color-tint);
    border-bottom: 1px solid var(--color-line); }
.pgc-hcell--wknd { color: var(--color-alert); }
.pgc-wk { background: var(--color-tint); border-top: 1px solid #e6e9f2;
    padding-top: 12px; text-align: center; font-weight: 600; font-size: .85rem;
    color: var(--color-muted); }
.pgc-cell { position: relative; border-top: 1px solid #e6e9f2; border-left: 1px solid #e6e9f2;
    min-height: 130px; padding: 34px 8px 8px; min-width: 0; }
.pgc-cell--wknd { background: var(--color-mist); }
.pgc-num { position: absolute; top: 6px; right: 6px; background: var(--color-soft);
    border-radius: 4px; padding: 2px 8px; font-size: .8rem; font-weight: 600;
    color: var(--color-primary); }
.pgc-cell--out .pgc-num { color: var(--color-muted); background: none; }
.pgc-num--today { background: var(--color-primary); color: #fff; }
.pgc-add { position: absolute; top: 6px; left: 6px; display: none; align-items: center;
    justify-content: center; width: 22px; height: 22px; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid var(--color-accent); border-radius: 4px;
    color: var(--color-accent); }
.pgc-cell:hover .pgc-add { display: inline-flex; }
/* The cell that would take the new event highlights with the + (the
   :has gate keeps the border away from read-only users). */
.pgc-cell:has(.pgc-add):hover { box-shadow: inset 0 0 0 1px var(--color-accent); }
.pgc-add:hover { background: var(--color-accent); color: #fff; }
.pgc-cell .cal-ev { margin-bottom: 6px; }
.pgc-cell .cal-ev:last-child { margin-bottom: 0; }

/* ======================================================================
 * Project > Time — the Time Log (entries + event person-hours)
 * ==================================================================== */
.pgt-table tbody td { vertical-align: top; text-align: left; }
.pgt-date a { color: var(--color-text); }
.pgt-date a:hover { color: var(--color-link); text-decoration: none; }
.pgt-user span { font-size: .8rem; font-weight: 600; color: var(--color-muted);
    cursor: default; }
.pgt-ico { line-height: 0; }
/* Task-priority color on the resting timer icon (pencil stays muted). */
.td-te-edit.wa-pri--high .ico-timer   { color: var(--color-alert); }
.td-te-edit.wa-pri--medium .ico-timer { color: #e8a13d; }
.td-te-edit.wa-pri--normal .ico-timer { color: #2f80ed; }
.pgt-title { font-weight: 700; color: var(--color-primary); }
.pgt-title:hover { color: var(--color-link); text-decoration: none; }
.pgt-desc { color: var(--color-text); font-size: .82rem; margin-top: 3px;
    max-width: 480px; line-height: 1.45; }
.pgt-act { color: var(--color-text); }
.pgt-contact a { font-weight: 700; color: var(--color-primary); }
.pgt-contact a:hover { color: var(--color-link); text-decoration: none; }
/* Right alignment must out-rank the pane's tbody-td left reset. */
.pgt-table tbody td.pgt-dur, .pgt-table tbody td.pgt-cost,
.pgt-dur, .pgt-cost { text-align: right; white-space: nowrap; }
.pgt-multi { color: var(--color-muted); cursor: default; line-height: 0; display: inline-block; }
.pgt-dur-mult { font-size: .75rem; color: var(--color-muted); margin-top: 2px; }
/* Show-filtered rows stay hidden even expanded (beats .open .hist-extra). */
.pgt-table tbody tr.tl-hidden { display: none !important; }
tr.pgt-total td { border-top: 2px solid var(--color-line); font-weight: 700;
    color: var(--color-text); padding-top: 12px; padding-bottom: 14px;
    text-align: right; }

/* ======================================================================
 * Project > Budget > Quoted vs Actual (.qa-*)
 * ==================================================================== */
.qa-quotes { text-align: right; }
.qa-quote-row + .qa-quote-row { margin-top: 6px; }
.qa-quote-sum { color: var(--color-muted); font-size: .8rem; margin-top: 2px; }
.qa-th-sub { display: block; font-weight: 400; font-size: .72rem;
    color: var(--color-muted); text-transform: none; margin-top: 1px; }
/* Compact rows — quote-heavy projects stack a LOT of budget lines. */
.qa-table tbody td { text-align: left; vertical-align: top; font-size: .82rem;
    padding-top: 5px; padding-bottom: 5px; }
.qa-table tr.qa-ghead td { background: var(--color-soft); font-weight: 700;
    color: var(--color-primary); padding: 8px 12px; font-size: .84rem; }
.qa-svc-l1 { display: flex; align-items: center; gap: 8px; }
.qa-svc-l1 svg { color: var(--color-muted); flex: none; }
.qa-svc-l1 a { color: var(--color-text); }
.qa-svc-l1 a:hover { color: var(--color-link); text-decoration: none; }
.qa-svc-l2 { color: var(--color-muted); font-size: .72rem; margin: 2px 0 0 22px;
    cursor: default; }
.qa-prog .pbar { max-width: 140px; margin-top: 5px; }
.qa-table tbody td.qa-qty, .qa-table tbody td.qa-money,
.qa-table tfoot td.qa-qty, .qa-table tfoot td.qa-money { text-align: right; white-space: nowrap; }
.qa-l2 { color: var(--color-muted); font-size: .72rem; margin-top: 2px; }
.qa-red { color: var(--color-alert); }
tr.qa-total td { border-top: 2px solid var(--color-line); font-weight: 700;
    color: var(--color-text); padding-top: 12px; padding-bottom: 14px; }
tr.qa-total .qa-l2 { font-weight: 400; }

/* Quantity hover popup: combined bar + the bucket's tasks/events. */
.qa-qty { position: relative; }
.qa-pv { display: none; position: fixed; z-index: 70; background: #fff; cursor: default;
    border: 1px solid var(--color-line); border-radius: 8px; padding: 14px 18px;
    box-shadow: 0 10px 28px rgba(1, 0, 49, .18); min-width: 360px; max-width: 430px;
    text-align: left; white-space: normal; font-weight: 400; }
.qa-pv-head { display: flex; align-items: center; gap: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--color-line); }
.qa-pv-n { flex: none; font-size: .92rem; color: var(--color-text); }
.qa-pv-bar { flex: 1; }
.qa-pv-row { display: flex; align-items: center; gap: 10px; padding: 10px 0;
    border-bottom: 1px solid var(--color-soft); }
.qa-pv-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.qa-pv-ini { flex: none; width: 26px; font-size: .78rem; font-weight: 600;
    color: var(--color-muted); }
.qa-pv-multi { flex: none; width: 26px; color: var(--color-muted); line-height: 0; }
.qa-pv-cal { flex: none; color: var(--color-muted); line-height: 0; padding: 0 2px; }
.qa-pv-pri { flex: none; }
.qa-pv-name { flex: 1; min-width: 0; font-weight: 700; color: var(--color-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-pv-name:hover { color: var(--color-link); text-decoration: none; }
.qa-pv-name--done { color: var(--color-muted); }
.qa-pv-time { flex: none; color: var(--color-text); font-size: .84rem; }

/* ======================================================================
 * Project > Budget > Budget Health (.bh-*)
 * ==================================================================== */
.bh-chart { min-height: 120px; overflow-x: auto; }
.bh-svg { display: block; }
.bh-axis { font-family: var(--font-body); font-size: 11px; fill: var(--color-muted); }
.bh-budget-lbl { fill: #0f8d81; font-weight: 700; }
.bh-today { fill: var(--color-alert); font-weight: 700; letter-spacing: .04em; }
.bh-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px;
    margin-top: 10px; font-size: .78rem; color: var(--color-text); }
/* Legend keys toggle their series on/off. */
.bh-key { display: inline-flex; align-items: center; gap: 7px; border: 0;
    background: none; padding: 3px 5px; font: inherit; color: inherit;
    cursor: pointer; border-radius: 4px; }
.bh-key:hover { background: var(--btn-light-hover); }
.bh-key--off { opacity: .38; text-decoration: line-through; }

/* Budget | Time switcher (burn chart) */
.bh-seg { display: inline-flex; }
.bh-seg button { border: 1px solid var(--color-line); background: var(--btn-light);
    padding: 5px 16px; font: inherit; font-size: .8rem; color: var(--color-text);
    cursor: pointer; }
.bh-seg button + button { border-left: 0; border-radius: 0 var(--btn-radius) var(--btn-radius) 0; }
.bh-seg button:first-child { border-radius: var(--btn-radius) 0 0 var(--btn-radius); }
.bh-seg button:hover { background: var(--btn-light-hover); }
.bh-seg button.active { background: #fff; color: var(--color-primary); font-weight: 700; }
.bh-swatch { display: inline-block; width: 16px; border-radius: 2px; }
.bh-swatch--dot { width: 9px; height: 9px; border-radius: 50%; }
.bh-swatch--dash { width: 16px; height: 0; border-top: 2px dashed currentColor; }
.bh-swatch--stripe { width: 14px; height: 12px; border-radius: 2px;
    background: repeating-linear-gradient(45deg, currentColor 0 3px, transparent 3px 6px); }

.bh-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 22px; }
.bh-stat { border: 1px solid var(--color-line); border-radius: 6px; padding: 14px 16px;
    background: #fff; box-shadow: var(--shadow-card); }
/* Same icon/title/metric lockup as the project header stats. */
.bh-stat-label { display: flex; align-items: center; gap: 7px; font-size: .8rem;
    font-weight: 600; color: var(--color-text); }
.bh-stat-label svg { flex: none; color: var(--color-muted); }
.bh-stat-value { font-size: 1.35rem; font-weight: 700; color: var(--color-primary);
    margin-top: 7px; line-height: 1.1; }
.bh-stat-value .unit { font-size: .8rem; font-weight: 400; color: var(--color-muted); }
.bh-stat-sub { font-size: .75rem; color: var(--color-muted); margin-top: 2px; }
.bh-red { color: var(--color-alert); }

.bh-tip { position: fixed; z-index: 80; display: none; background: #fff; pointer-events: none;
    border: 1px solid var(--color-line); border-radius: 8px; padding: 12px 14px;
    box-shadow: 0 10px 28px rgba(1, 0, 49, .18); min-width: 220px; font-size: .82rem; }
.bh-tip-title { font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.bh-tip-row { display: flex; justify-content: space-between; gap: 18px; padding: 2px 0;
    color: var(--color-text); }
.bh-tip-row b { font-weight: 700; }
.bh-tip-row em { font-style: normal; font-weight: 700; }

/* ======================================================================
 * Overdue time-entry reminder modal (.od-*) — topnav, page-load nag
 * ==================================================================== */
.od-modal { max-width: 560px; }
.od-blurb { margin: 0 0 14px; color: var(--color-text); font-size: .88rem; line-height: 1.5; }
.od-list { max-height: 320px; overflow-y: auto; border-top: 1px solid var(--color-line); }
.od-group { padding: 10px 2px 12px; border-bottom: 1px solid var(--color-line); }
.od-task { display: flex; align-items: center; gap: 8px; min-width: 0; }
.od-task .wa-pri { flex: none; cursor: default; }
.od-title { font-weight: 700; color: var(--color-primary); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.od-title:hover { color: var(--color-link); text-decoration: none; }
.od-proj { flex: none; font-size: .78rem; max-width: 170px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.od-te { display: flex; align-items: center; gap: 8px; padding: 6px 0 0 30px;
    font-size: .82rem; color: var(--color-text); }
.od-te svg { flex: none; color: var(--color-muted); }
.od-te-act { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.od-te-date { flex: none; color: var(--color-alert); font-weight: 600; }
.od-te-dur { flex: none; width: 46px; text-align: right; }
.od-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.od-go { background: #2f80ed; border-color: #2f80ed; color: #fff; }
.od-go:hover { background: #2569c4; border-color: #2569c4; color: #fff; text-decoration: none; }

/* Planner user multi-select */
.pl-ulist { max-height: 260px; overflow-y: auto; }
.pl-ulist .check-label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.ph-team-apply .pl-uall { margin-right: auto; padding-left: 4px; }

/* ======================================================================
 * Notifications (.nf-*) — bell badge, dropdown feed, history page
 * ==================================================================== */
.nf-bell { position: relative; }
.nf-count { position: absolute; top: 1px; right: 3px; background: var(--color-alert);
    color: #fff; font-size: .62rem; font-weight: 700; line-height: 1;
    border-radius: 999px; padding: 3px 5px; min-width: 10px; text-align: center; }
.nf-dd { width: 400px; padding: 0; }
.nf-head { display: flex; justify-content: flex-end; padding: 8px 12px;
    border-bottom: 1px solid var(--color-line); }
.nf-allread { display: inline-flex; align-items: center; gap: 6px; border: 0;
    background: none; padding: 2px 4px; font: inherit; font-size: .8rem;
    color: var(--color-muted); cursor: pointer; border-radius: 4px; }
.nf-allread:hover { color: var(--color-primary); background: var(--btn-light-hover); }
.nf-scroll { max-height: 480px; overflow-y: auto; }
.nf-row { display: flex; gap: 12px; padding: 12px 14px 12px 11px;
    border-bottom: 1px solid var(--color-line); border-left: 3px solid transparent;
    color: var(--color-text); }
.nf-row:hover { background: var(--color-mist); text-decoration: none; }
.nf-row.nf-unread { border-left-color: var(--color-alert); }
.nf-ava { position: relative; flex: none; width: 40px; height: 40px; }
.nf-ava .avatar { box-shadow: 0 1px 4px rgba(1, 0, 49, .18); border: 2px solid #fff; }
.nf-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; border: 2px solid #fff; }
.nf-badge--comment { background: #a99ae6; }
.nf-badge--done { background: #4da3e8; }
.nf-badge--completed { background: #3b6fe0; }   /* the team's handoff */
.nf-badge--attention { background: #e5484d; }   /* the PM's red flag  */
.nf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nf-title { font-weight: 700; color: var(--color-primary); font-size: .88rem; }
.nf-ent { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .82rem; }
.nf-ent-name { flex: 0 1 50%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--color-text); }
.nf-ent-proj { flex: 0 1 50%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--color-muted); display: inline-flex;
    align-items: center; gap: 5px; }
.nf-ent-proj svg { flex: none; }
.nf-preview { font-size: .82rem; color: var(--color-text); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
.nf-foot { display: flex; align-items: center; justify-content: space-between;
    margin-top: 2px; }
.nf-when { font-size: .75rem; color: var(--color-muted); }
.nf-toggle { border: 0; background: none; padding: 2px 4px; font: inherit;
    font-size: .75rem; color: var(--color-muted); cursor: pointer; border-radius: 4px; }
.nf-toggle:hover { color: var(--color-primary); background: var(--btn-light-hover); }
.nf-viewall { display: block; text-align: center; padding: 10px;
    border-top: 1px solid var(--color-line); font-size: .85rem; }

/* History page rows */
.nf-page { border-top: 1px solid var(--color-line); }
.nf-prow { display: flex; align-items: flex-start; gap: 16px; padding: 14px 10px 14px 8px;
    border-bottom: 1px solid var(--color-line); border-left: 3px solid transparent;
    color: var(--color-text); }
.nf-prow:hover { background: var(--color-mist); text-decoration: none; }
.nf-prow.nf-unread { border-left-color: var(--color-alert); }
.nf-pava { flex: none; }
.nf-pava .avatar { box-shadow: 0 1px 4px rgba(1, 0, 49, .15); }
.nf-ptype { flex: none; margin-top: 13px; }
.nf-pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px;
    padding-top: 3px; }
.nf-pinfo { font-weight: 700; color: var(--color-primary); }
.nf-ppreview { font-size: .85rem; color: var(--color-text); line-height: 1.45; }
.nf-pwhen { flex: none; display: flex; flex-direction: column; align-items: flex-end;
    gap: 9px; padding-top: 3px; font-size: .82rem; color: var(--color-muted); }
.nf-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 0;
    background: #c3c9d1; cursor: pointer; padding: 0; }
.nf-dot--unread { background: var(--color-alert); }
.nf-more-row { border-top: 3px solid var(--color-tint); padding-bottom: 6px; }
.nf-ptype--comment { color: #a99ae6; }
.nf-ptype--done { color: #4da3e8; }
.nf-ptype--completed { color: #3b6fe0; }
.nf-ptype--attention { color: #e5484d; }

/* Persistent overdue-entries banner (dropdown top + page top). */
.nf-odbar { display: block; background: var(--color-alert); color: #fff; font-weight: 700;
    font-size: .82rem; text-align: center; padding: 9px 14px; }
.nf-odbar:hover { background: #b93030; color: #fff; text-decoration: none; }
.nf-odbar--page { border-radius: 4px; margin-bottom: 12px; }

/* Landing on a #comment-N anchor (notification jumps, permalinks)
   tints the referenced comment so the eye finds it. */
.cm:target { background: #fdf6e3; border-radius: 6px;
    box-shadow: 0 0 0 6px #fdf6e3; }
.nf-toggle { display: inline-flex; align-items: center; gap: 5px; }
.nf-toggle svg { flex: none; }

/* ======================================================================
 * Files (.fl-* list, .fd-* manage page)
 * ==================================================================== */
/* table.data tbody td (0,1,3) beats a bare class chain — match it. */
table.fl-table tbody td { text-align: left; vertical-align: top;
    padding-top: 5px; padding-bottom: 5px; }
.fl-name a > span { font-weight: 700; color: var(--color-primary); }
.fl-qform { justify-content: flex-end; }
.fl-daterange { min-width: 230px; padding: 10px 12px; }
.fl-dr-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: .82rem; }
.fl-dr-row > span { width: 36px; }
.fl-sub { padding-left: 24px; font-size: .75rem; margin-top: -2px; }
.fl-name a { line-height: 1.35; }
.fl-sub a { color: var(--color-muted); display: inline-flex;
    align-items: center; gap: 4px; }
.fl-sub a svg { flex: none; }
.fl-sub a:hover { color: var(--color-link); text-decoration: none; }
.fl-sub-sep { color: var(--color-muted); margin: 0 6px; }
table.fl-table tbody td.fl-check, .fl-table thead th:first-child { text-align: center; }
.fl-cb { margin-top: 4px; }   /* level with the file-name line */
.fl-owner span { font-size: .8rem; font-weight: 600; color: var(--color-muted); cursor: default; }
.fl-name a { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); min-width: 0; }
.fl-name a:hover { color: var(--color-link); text-decoration: none; }
.fl-name .fl-ico { flex: none; }
.fl-table tbody td.fl-size { text-align: right; color: var(--color-muted); white-space: nowrap; }
table.fl-table tbody td.fl-mod { text-align: center; }   /* out-specify the td reset */
.fl-pencil { color: var(--color-muted); display: inline-block; line-height: 0; padding: 4px; border-radius: 4px; }
.fl-pencil:hover { color: var(--color-primary); background: var(--btn-light-hover); }
.fl-table tbody td.fl-date { text-align: right; color: var(--color-muted); white-space: nowrap; }

.fl-bulk[hidden] { display: none; }   /* [hidden] loses to display:flex */
.fl-bulk { display: flex; align-items: center; gap: 12px; background: var(--color-soft);
    border: 1px solid var(--color-line); border-radius: 6px; padding: 8px 14px;
    margin-bottom: 12px; }
.fl-bulk-n { font-size: .82rem; font-weight: 700; color: var(--color-primary); }
.fl-bulk-del { color: #fff; background: var(--color-alert); border-color: var(--color-alert); }
.fl-bulk-del:hover { color: #fff; background: #b93030; border-color: #b93030; }

/* Manage page */
.fd-head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px;
    border-bottom: 1px solid var(--color-line); }
.fd-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem;
    font-weight: 700; color: var(--color-primary); min-width: 0; }
.fd-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fd-delete { color: #fff; background: var(--color-alert); border-color: var(--color-alert); }
.fd-delete:hover { background: #b93030; border-color: #b93030; color: #fff; }
.fd-cols { display: flex; gap: 36px; padding-top: 22px; }
.fd-form { flex: 0 1 60%; }
.fd-fieldrow { display: flex; align-items: flex-start; gap: 18px; padding: 12px 0;
    border-bottom: 1px solid var(--color-soft); }
.fd-lbl { flex: none; width: 110px; font-weight: 700; font-size: .85rem;
    color: var(--color-text); padding-top: 6px; }
.fd-nameinput { flex: 0 1 340px; }
.fd-links { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.fd-link { display: inline-flex; align-items: center; gap: 8px; }
.fd-link-ico { color: var(--color-muted); line-height: 0; }
.fd-link a { color: var(--color-text); font-weight: 600; }
.fd-link a:hover { color: var(--color-link); text-decoration: none; }
.fd-unlink { visibility: hidden; border: 0; background: none; padding: 2px;
    line-height: 0; color: var(--color-muted); cursor: pointer; }
.fd-link:hover .fd-unlink { visibility: visible; }
.fd-unlink:hover { color: var(--color-alert); }
.fd-ownerpick { flex: 0 1 340px; padding-top: 2px; }
.fd-save { display: flex; justify-content: center; padding-top: 22px; }
.fd-stats { flex: 1; background: #eef6fb; border-radius: 8px; padding: 22px 26px;
    align-self: flex-start; }
.fd-stat { display: flex; gap: 18px; padding: 9px 0; font-size: .88rem; }
.fd-stat-lbl { flex: none; width: 130px; font-weight: 700; color: var(--color-text); }

/* ----------------------------------------------------------------------
 * Reports (rp-) — sidebar of shortcuts + dashboard grid / report frame
 * -------------------------------------------------------------------- */
.rp-layout { display: flex; gap: var(--space-3); align-items: flex-start; }
.rp-side { flex: 0 0 264px; display: flex; flex-direction: column; gap: var(--space-3); }
.rp-main { flex: 1; min-width: 0; }

/* Count card */
.rp-count { padding: 18px 20px; }
.rp-count-n { font-family: var(--font-heading); font-weight: 700; font-size: 2.1rem;
    line-height: 1.1; color: var(--color-primary); }
.rp-count-lbl { color: var(--color-muted); font-size: .88rem; }
.rp-count-lk { display: inline-block; margin-top: 10px; font-weight: 700; font-size: .88rem; }

/* Shortcut groups */
.rp-side-nav { padding: 6px 20px 14px; }
.rp-side-h { font-family: var(--font-heading); font-weight: 700; font-size: .95rem;
    color: var(--color-primary); padding: 14px 0 4px; }
.rp-side-lk { display: block; padding: 7px 0; font-size: .9rem; color: var(--color-text);
    border-bottom: 1px solid var(--color-soft); }
.rp-side-lk:last-child { border-bottom: 0; }
.rp-side-lk:hover { color: var(--color-link); text-decoration: none; }
.rp-side-lk.is-active { color: var(--color-link); font-weight: 700; }

/* Dashboard: section headings + category cards grid */
.rp-sec-h { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
    color: var(--color-link); margin: 0 0 4px; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-line); }
.rp-sec-blurb { color: var(--color-muted); font-size: .9rem; margin: 10px 0 18px; }
.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 1100px) { .rp-grid { grid-template-columns: repeat(2, 1fr); } }
.rp-cat { display: flex; flex-direction: column; border: var(--border-subtle);
    border-radius: 6px; overflow: hidden; background: var(--color-surface); }
.rp-cat-hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: var(--rt); color: var(--rc);
    font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.rp-cat-ic { display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; background: #fff; border-radius: 8px; line-height: 0; }
.rp-cat-bd { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.rp-cat-desc { margin: 0 0 12px; font-size: .88rem; color: var(--color-text); }
.rp-cat-lk { margin-top: auto; align-self: flex-start; color: var(--rc);
    font-weight: 700; font-size: .88rem; }
.rp-cat-lk:hover { color: var(--rc); text-decoration: underline; }

/* Bookmarked reports list */
.rp-bm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 40px; margin-top: 8px; }
.rp-bm-lk { display: flex; align-items: center; gap: 9px; padding: 6px 0;
    font-size: .9rem; color: var(--color-text); }
.rp-bm-lk svg { color: var(--color-idle); flex: none; }
.rp-bm-lk:hover { color: var(--color-link); text-decoration: none; }
.rp-bm-empty { margin: 10px 0 4px; font-size: .9rem; }

/* Unbuilt-report frame: labeled ghost zones (filters/metrics/chart/table) */
.rp-shell-note { margin: 0; font-size: .9rem; }
.rp-ghost { display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--color-line); background: var(--color-tint);
    color: var(--color-idle); font-weight: 600; font-size: .88rem; letter-spacing: .02em; }
.rp-ghost--filters { height: 54px; }
.rp-ghost--metrics { height: 92px; }
.rp-ghost--chart   { height: 280px; }
.rp-ghost--table   { height: 220px; }

/* Reports library modal (rl-) — category side filter + card grid.
   Openers: [data-rl-open="<cat|all>"]. Count-card + category-card
   triggers are buttons styled as links. */
button.rp-count-lk, button.rp-cat-lk { border: 0; background: none; padding: 0;
    font-family: inherit; cursor: pointer; text-align: left; }
button.rp-count-lk { color: var(--color-link); }
.rp-count-lk:hover { text-decoration: underline; }

/* Fixed-height modal; the card grid scrolls, the categories stay put */
dialog.rl-modal { width: min(1180px, 94vw); height: min(780px, 90vh); overflow: hidden; }
dialog.rl-modal[open] { display: flex; flex-direction: column; }
.rl-modal .modal-bar { flex: none; }
.rl-body { display: flex; gap: var(--space-4); flex: 1; min-height: 0; }
.rl-cats { flex: 0 0 190px; display: flex; flex-direction: column; gap: 2px; }
.rl-cats-h { font-family: var(--font-heading); font-weight: 700; font-size: .95rem;
    color: var(--color-primary); margin-bottom: 8px; }
.rl-cat { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: left;
    font-family: inherit; font-size: .9rem; color: var(--color-text); }
.rl-cat:hover { background: var(--color-soft); }
.rl-cat.is-active { background: var(--rt, var(--color-soft)); font-weight: 700; }
.rl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: var(--rc, var(--color-idle)); }
.rl-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3); align-content: start; overflow-y: auto; padding-right: 6px; }
@media (max-width: 1100px) { .rl-grid { grid-template-columns: repeat(2, 1fr); } }
.rl-card { display: flex; flex-direction: column; padding: 16px;
    border: var(--border-subtle); border-radius: 6px; background: var(--color-surface);
    color: var(--color-text); }
.rl-card[hidden] { display: none; }
.rl-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-card);
    color: var(--color-text); text-decoration: none; }
.rl-card-t { font-family: var(--font-heading); font-weight: 700; font-size: .98rem;
    color: var(--color-primary); margin-bottom: 6px; }
.rl-card-d { margin: 0 0 14px; font-size: .86rem; color: var(--color-muted); }
.rl-tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.rl-tag { display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 600; background: var(--rt); color: var(--rc); }

/* Summary report (rs-) — bar lists, legend lists + donuts, N-more tabs */
.rs-sec { margin-top: var(--space-4); }
/* Section headings match the Task List group style (.tk-gname) */
.rs-h { font-family: var(--font-body); font-weight: 400; font-size: 1.2rem;
    color: var(--color-link); margin: 0 0 2px; padding-bottom: 7px;
    border-bottom: 1px solid var(--color-line); }

/* Bar rows (People / Projects / Contacts): name | hours | [%] | bar.
   The name + metric columns fill the first 60%, the bar the last 40%,
   so hours/% line up vertically with the legend lists below. */
.rs-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px calc(40% - 18px);
    gap: 18px; align-items: center; padding: 5px 0;
    border-bottom: 1px solid var(--color-soft); font-size: .9rem; }
.rs-rows--util .rs-row { grid-template-columns: minmax(0, 1fr) 110px 90px calc(40% - 18px); }
.rs-row .rs-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.rs-row .rs-name a { color: var(--color-text); }
.rs-row .rs-name a:hover { color: var(--color-link); text-decoration: none; }
.rs-row--un .rs-name { color: var(--color-muted); font-weight: 400; }
.rs-hrs, .rs-pct { text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.rs-barcell { line-height: 0; }
.rs-bar { display: inline-block; height: 14px; background: #5cb85c;
    border-radius: 2px; min-width: 2px; }

/* Legend rows (Activity groups / types): swatch + name | hours | [%].
   The list is exactly 60% wide so its metric columns share the bar
   rows' vertical rhythm; the donut centers in the remaining 40%. */
.rs-flex { display: flex; align-items: flex-start; }
.rs-list { flex: 0 0 60%; min-width: 0; }
.rs-donut { flex: 1; display: flex; justify-content: center; padding-top: 10px; }
.rs-lrow { display: grid; grid-template-columns: 20px minmax(0, 1fr) 110px;
    gap: 18px; align-items: center; padding: 5px 0;
    border-bottom: 1px solid var(--color-soft); font-size: .9rem; }
.rs-rows--util .rs-lrow { grid-template-columns: 20px minmax(0, 1fr) 110px 90px; }
.rs-lrow .rs-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.rs-sw { width: 13px; height: 13px; border-radius: 3px; }
.rs-lrow[hidden], .rs-row[hidden] { display: none; }

/* Pull tab: reveal rows beyond the first 10 */
.rs-more-row { border-top: 3px solid var(--color-tint); text-align: center; }
.rs-more { display: inline-block; margin: 0 auto; cursor: pointer; border: none;
    background: var(--btn-light); color: var(--color-muted); font-family: inherit;
    font-size: .78rem; font-weight: 600; padding: 3px 18px 5px;
    border-radius: 0 0 6px 6px; }
.rs-more:hover { background: var(--btn-light-hover); color: var(--color-text); }

/* Filter dropdown rows with active checkmark */
.rs-dlink { display: flex; align-items: center; gap: 8px; }
.rs-dlink.is-active { font-weight: 700; color: var(--color-link); }
.rs-cksp { width: 12px; flex: none; }
.rs-daterange { border-top: 1px solid var(--color-line); margin-top: 6px; padding-top: 8px; }

/* Donut slice hover popup (platform-standard fixed tooltip card) */
.rs-donutsvg path, .rs-donutsvg circle { cursor: pointer; }
.rs-donutsvg path:hover, .rs-donutsvg circle:hover { opacity: .88; }
.rs-pop { position: fixed; z-index: 80; display: none; align-items: center; gap: 8px;
    background: var(--color-surface); border: 1px solid var(--color-line);
    border-radius: 6px; box-shadow: 0 6px 20px rgba(1, 0, 49, .18);
    padding: 7px 12px; font-size: .85rem; pointer-events: none; white-space: nowrap; }
.rs-pop.open { display: flex; }
.rs-pop-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.rs-pop strong { color: var(--color-primary); }
.rs-pop-val { color: var(--color-muted); }

/* Team performance report (rt-) — sticky user column, columns 2+ scroll */
.rt-wrap { overflow-x: auto; }
table.rt-table { min-width: 1080px; }
table.rt-table thead th { text-align: right; white-space: nowrap; }
table.rt-table thead th:first-child { text-align: left; }
table.rt-table th:first-child, table.rt-table td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--color-surface);
    min-width: 220px; box-shadow: 8px 0 10px -8px rgba(1, 0, 49, .16); }
table.rt-table thead th:first-child { background: var(--color-soft); }
table.rt-table tbody td, table.rt-table tfoot td { white-space: nowrap; }
table.rt-table tbody td { padding-top: 9px; padding-bottom: 9px; }
.rt-user { display: inline-flex; align-items: center; gap: 12px;
    font-weight: 700; color: var(--color-primary); }

/* Event modal: recurring-series scope banner (top, above the columns;
   Luminus-blue outline so it can't be missed) — governs Save + Delete */
.ef-scope { display: flex; align-items: center; justify-content: center; gap: 22px;
    flex-wrap: wrap; margin-bottom: var(--space-3); padding: 11px 16px;
    border: var(--border-accent); border-radius: 6px; font-size: .9rem; }
.ef-scope[hidden] { display: none; }   /* [hidden] loses to flex */
.ef-scope-lbl { color: var(--color-primary); font-weight: 700; }
.ef-scope .check-label { font-size: .9rem; }

/* Delete Event sits left of Cancel/Save in the actions row */
.modal-actions .ef-delete { margin-right: auto; }
.modal-actions .ef-delete[hidden] { display: none; }

/* "Show Recurring Settings" reveal link (edit mode, series members) —
   reopens the Repeating fields to rebuild the series from this event */
/* rides the flex-end .ef-dur-row: bottom margin levels it with the
   inputs, same trick as .ef-recur-check */
.ef-recur-link { border: 0; background: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: .85rem; font-weight: 600;
    color: var(--color-link); margin: 0 0 10px 6px; white-space: nowrap; }
.ef-recur-link:hover { text-decoration: underline; }
.ef-recur-link[hidden] { display: none; }

/* Event title {…} variable inserter — label row with the dd right.
   NOTE: the menu rows are <button class="dd-link">, which the global
   ".dd-menu a.dd-link" rule does NOT style — give them the full row
   treatment here (and never zero the wrapper line-height: the menu
   inherits it and every row collapses into an overlap). */
.ef-lblrow { display: flex; align-items: center; justify-content: space-between; }
.ef-var-btn { border: 0; background: none; padding: 0 2px; cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem; font-weight: 700; color: var(--color-muted); line-height: 1; }
.ef-var-btn:hover { color: var(--color-link); }
/* explicit width: the in-dialog fixed-position JS writes an inline
   min-width of the (tiny) trigger, which would beat a CSS min-width */
.ef-var-menu { width: 245px; }
.ef-var-menu .dd-link { display: flex; align-items: center;
    justify-content: space-between; gap: 16px; width: 100%;
    border: 0; background: none; cursor: pointer; text-align: left;
    padding: 8px 10px; border-radius: 3px;
    font-family: var(--font-body); font-size: .9rem; line-height: 1.4;
    color: var(--color-text); }
.ef-var-menu .dd-link:hover { background: var(--color-soft); }
.ef-var-code { color: var(--color-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .76rem; }

/* Task modal recurrence: repeating fields get their own row (the dates
   row already holds three fields); link/checkbox level with inputs */
.tf-dates-row { align-items: flex-end; }
.tf-dates-row .ef-recur-check { margin: 0 0 9px 6px; white-space: nowrap; }
.tf-repeat-row { align-items: flex-end; }
.tf-repeat-row .field { flex: 0 0 170px; }

/* ----------------------------------------------------------------------
 * Utilization report (ut-) — person × period heat grid
 * -------------------------------------------------------------------- */
.ut-seg { display: inline-flex; border: var(--border-subtle); border-radius: 6px;
    overflow: hidden; background: var(--btn-light); }
.ut-seg-btn { padding: 7px 18px; font-size: .88rem; font-weight: 600;
    color: var(--color-text); }
.ut-seg-btn:hover { background: var(--btn-light-hover); text-decoration: none; color: var(--color-text); }
.ut-seg-btn.is-active { background: var(--color-slate); color: #fff; }
.ut-seg-btn.is-active:hover { color: #fff; }

.ut-wrap { overflow-x: auto; margin-top: var(--space-3); }
.ut-table { border-collapse: collapse; width: 100%; }
.ut-table th, .ut-table td { border-bottom: 1px solid var(--color-soft); }
.ut-table thead th { padding: 10px 12px; text-align: right; white-space: nowrap;
    border-bottom: 1px solid var(--color-line); }
.ut-ph { display: block; font-weight: 700; color: var(--color-primary); font-size: .92rem; }
.ut-psub { display: block; font-weight: 400; font-size: .72rem; color: var(--color-muted); }
.ut-table th:first-child, .ut-table td:first-child { position: sticky; left: 0; z-index: 2;
    background: var(--color-surface); min-width: 300px; text-align: left; }
/* Divider shadow: per-cell gradient strips (top/bottom overdraw the
   row borders) read as ONE flush edge — box-shadow pinches per cell */
.ut-table th:first-child::after, .ut-table td:first-child::after { content: '';
    position: absolute; top: -1px; bottom: -1px; right: -8px; width: 8px;
    background: linear-gradient(to right, rgba(1, 0, 49, .10), transparent);
    pointer-events: none; }
.ut-uhead { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
    color: var(--color-primary); }
.ut-user { padding: 14px 16px 14px 4px; }
.ut-uwrap { display: flex; align-items: center; gap: 12px; }
.ut-umain { flex: 1; min-width: 0; }
.ut-uname { display: flex; align-items: baseline; gap: 12px; font-weight: 700;
    color: var(--color-primary); font-size: .92rem; }
.ut-backlog { margin-left: auto; color: var(--color-alert); font-weight: 700;
    font-size: .8rem; cursor: default; }
.ut-bar { position: relative; display: flex; height: 22px; margin-top: 5px;
    border-radius: 5px; background: var(--color-soft); cursor: default; }
.ut-bar > span:first-child { border-radius: 5px 0 0 5px; }
.ut-bar > span { overflow: hidden; }
/* Range-totals tooltip, same treatment as the site's bar tooltips
   (.tk-timer-tip): white card floating above on hover */
.ut-bartip { display: none; position: absolute; bottom: calc(100% + 8px); left: 0;
    z-index: 30; flex-direction: column; gap: 6px; padding: 10px 14px;
    background: var(--color-surface); color: var(--color-text);
    font-size: .82rem; line-height: 1.3; white-space: nowrap; border-radius: 4px;
    box-shadow: 0 4px 18px rgba(1, 0, 49, .22); cursor: default; }
.ut-bar:hover .ut-bartip { display: inline-flex; }
.ut-bartip > span { display: flex; align-items: center; gap: 4px; }
.ut-bartip strong { margin-left: auto; padding-left: 16px;
    color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ut-bar > span { display: flex; align-items: center; min-width: 0; }
.ut-seg-done    { background: #2bb8a3; }
.ut-seg-sched   { background: #a6e4d9; }
.ut-seg-avail   { background: #eef1f6; border-radius: 0 5px 5px 0; }
.ut-seg-unsched { background: #f2d06b; }
.ut-seg-lbl { padding: 0 8px; font-size: .74rem; font-weight: 600; white-space: nowrap;
    color: var(--color-text); overflow: hidden; text-overflow: ellipsis; }
.ut-seg-lbl--on { color: #fff; }
.ut-key { display: inline-block; width: 11px; height: 11px; border-radius: 50%;
    margin-right: 7px; vertical-align: -1px; }
.ut-key--done { background: #2bb8a3; } .ut-key--sched { background: #a6e4d9; }
.ut-key--avail { background: #eef1f6; border: 1px solid var(--color-line); }
.ut-key--unsched { background: #f2d06b; }
.ut-legend { display: flex; gap: 26px; padding: 14px 4px 2px; font-size: .84rem;
    color: var(--color-muted); }

.ut-cell { position: relative; padding: 14px 12px; text-align: right;
    vertical-align: middle; min-width: 106px; }
.ut-fill { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
    background: rgba(43, 184, 163, .13); pointer-events: none; }
.ut-h { position: relative; z-index: 1; display: block; font-weight: 700;
    color: var(--color-primary); font-size: .92rem; font-variant-numeric: tabular-nums; }
.ut-p { position: relative; z-index: 1; display: block; font-size: .78rem;
    color: var(--color-muted); font-variant-numeric: tabular-nums; }
.ut-cell--tot .ut-h { font-size: .95rem; }
.ut-totlbl { font-weight: 700; color: var(--color-muted); text-align: right !important;
    padding-right: 18px; }
.ut-table tfoot td { border-top: 2px solid var(--color-line); border-bottom: 0; }

/* Hover card: person-bar breakdown OR lazy per-project table */
.ut-pop { position: fixed; z-index: 90; display: none; width: 560px; max-width: 92vw;
    background: var(--color-surface); border: 1px solid var(--color-line);
    border-radius: 8px; box-shadow: 0 10px 34px rgba(1, 0, 49, .22); padding: 10px 14px; }
.ut-pop.open { display: block; }
.ut-poph, .ut-poprow, .ut-popfoot { display: grid;
    grid-template-columns: minmax(0, 1fr) 76px 86px 96px 76px; gap: 10px; align-items: center; }
.ut-poph { padding: 4px 2px 8px; border-bottom: 1px solid var(--color-line);
    font-size: .74rem; color: var(--color-muted); }
.ut-poph span, .ut-poprow > span:not(.ut-popproj),
.ut-popfoot > span:not(.ut-popbarwrap) { text-align: right; }
.ut-poph span:first-child { text-align: left; }
.ut-poprows { max-height: 280px; overflow-y: auto; }
.ut-poprow { padding: 8px 2px; border-bottom: 1px solid var(--color-soft);
    font-size: .85rem; font-variant-numeric: tabular-nums; }
.ut-poprow a { color: var(--color-text); }
.ut-poprow a:hover { color: var(--color-link); text-decoration: none; }
.ut-popproj { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ut-popdot { flex: none; width: 10px; height: 10px; border-radius: 3px; margin-top: 4px; }
.ut-popnames { display: flex; flex-direction: column; min-width: 0; }
.ut-popnames a { font-weight: 700; color: var(--color-primary); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.ut-popclient { font-weight: 400 !important; font-size: .76rem; color: var(--color-muted) !important; }
.ut-poptot { font-weight: 700; color: var(--color-primary); }
.ut-popfoot { padding: 9px 2px 2px; font-size: .85rem; font-weight: 700;
    color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ut-popbarwrap { position: relative; display: flex; flex-direction: column;
    gap: 5px; align-items: flex-start; }
/* the footer bar carries the same breakdown tooltip as the person bar */
.ut-popbar:hover + .ut-bartip { display: inline-flex; }
/* mini stacked bar: same segments as the person bars (track = available) */
.ut-popbar { display: flex; width: 200px; max-width: 100%; height: 7px;
    border-radius: 4px; background: var(--color-soft); overflow: hidden; }
.ut-popbar > span { height: 100%; }
.ut-popbarwrap .muted { font-weight: 400; }

/* ----------------------------------------------------------------------
 * Detailed work report (dw-) — filter chips + grouped work-atom table
 * -------------------------------------------------------------------- */
/* Top bar: the dropdown cluster wraps WITHIN its own flex box so it
   never crowds the search slot on the right */
.dw-bar-filters { display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px var(--space-3); flex: 1; min-width: 0; }
.controls-row form.dw-qform { flex: 0 0 auto; margin-left: auto;
    align-self: flex-start; }

/* Active filters: a slightly darker band glued under the top bar —
   visually part of the controls, separated from metrics/chart */
.dw-chips { display: flex; flex-wrap: wrap; gap: 10px;
    margin: 0 calc(-1 * var(--space-4));
    padding: 10px var(--space-4); background: var(--color-soft);
    border-bottom: var(--border-subtle); }
.dw-chip { display: inline-flex; align-items: center; background: var(--color-surface);
    border: var(--border-subtle); border-radius: 6px; padding-right: 4px; }
.dw-chip .dd-trigger { background: none; }
.dw-chip .dd-trigger:hover { background: var(--btn-light-hover); }
.dw-chip-x { display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 4px; color: var(--color-muted);
    font-size: 1rem; line-height: 1; }
.dw-chip-x:hover { background: var(--btn-light-hover); color: var(--color-alert);
    text-decoration: none; }

.dw-tablewrap { overflow-x: auto; margin-top: 6px; }
.dw-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.dw-table th, .dw-table td { padding: 5px 10px; text-align: right;
    border-bottom: 1px solid var(--color-soft); font-variant-numeric: tabular-nums;
    white-space: nowrap; }
.dw-table th.dw-desc, .dw-table td.dw-desc { text-align: left; white-space: normal; }
.dw-table thead th { background: var(--color-soft); color: var(--color-primary);
    font-weight: 700; border-bottom: var(--border-accent); }
.dw-ghead td { padding: 22px 10px 6px; font-size: 1.05rem; font-weight: 400;
    text-align: left; border-bottom: 1px solid var(--color-line); }
.dw-ghead a, .dw-ghead span { color: var(--color-link); }
.dw-ghead a:hover { text-decoration: underline; }
.dw-item { font-weight: 700; color: var(--color-primary); }
.dw-item:hover { color: var(--color-link); text-decoration: none; }
.dw-sub { display: block; font-size: .75rem; color: var(--color-muted); }
.dw-gtotal td { font-weight: 700; color: var(--color-primary);
    background: var(--color-tint); }
.dw-gtotal td:first-child { text-align: right; }
.dw-table tfoot td { font-weight: 700; color: var(--color-primary);
    border-top: 2px solid var(--color-line); border-bottom: 0; }
.dw-table tfoot td:first-child { text-align: right; }

/* Detailed report chart: stacked navy bars, horizontal scroll if wide.
   Hovering a segment focuses it — everything else fades. */
.dw-chart { overflow-x: auto; margin-top: 10px; padding: 4px 0 0;
    border-bottom: 1px solid var(--color-soft); }
.dw-chartsvg [data-dw-seg] { cursor: pointer; transition: opacity .12s; }
.dw-chartsvg.dw-focus [data-dw-seg] { opacity: .18; }
.dw-chartsvg.dw-focus [data-dw-seg].dw-hot { opacity: 1; }

/* Chart hover card: bold group line, then segment + hours */
.dw-cpop { position: fixed; z-index: 90; display: none; max-width: 380px;
    background: var(--color-surface); border: 1px solid var(--color-line);
    border-radius: 8px; box-shadow: 0 8px 28px rgba(1, 0, 49, .2);
    padding: 11px 15px; font-size: .86rem; pointer-events: none; }
.dw-cpop.open { display: block; }
.dw-cpop strong { display: block; color: var(--color-primary); margin-bottom: 4px; }
.dw-cpop-line { display: flex; gap: 18px; align-items: baseline; color: var(--color-muted); }
.dw-cpop-line b { margin-left: auto; color: var(--color-primary); white-space: nowrap;
    font-variant-numeric: tabular-nums; }

/* Detailed report View pickers (columns / summary metrics, draggable) */
.dwv-menu { min-width: 260px; }
.dwv-h { font-weight: 700; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-muted); padding: 10px 10px 4px; }
.dwv-row { display: flex; align-items: center; gap: 4px; padding: 2px 6px;
    border-radius: 3px; }
.dwv-row:hover { background: var(--color-soft); }
.dwv-grip { color: var(--color-idle); cursor: grab; line-height: 0; padding: 4px 2px; }
.dwv-row .check-label { flex: 1; font-size: .88rem; }
.dwv-chart { margin: 2px 10px 6px; font-size: .88rem; }
.dw-neg { color: var(--color-alert); font-weight: 700; }

/* View options sub-heading (chart metric radios) */
.dwv-h--sub { text-transform: none; letter-spacing: 0; font-size: .8rem;
    padding-top: 6px; color: var(--color-text); }
.dw-table thead th a { color: inherit; text-decoration: none; white-space: nowrap; }
.dw-table thead th a:hover { color: var(--color-accent); }

/* Report date dropdowns: grouped preset list (Day/Week/Month/…) that
   scrolls; the custom From/To block stays pinned below it */
.dd-datelist { max-height: 360px; overflow-y: auto; min-width: 210px; }
.dd-dategrp { padding: 9px 10px 3px; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--color-idle); }

/* Comparison badges: color-coded arrow + % that swaps to the NET
   change on hover (CSS-only swap) */
.dw-cmpbadge { display: inline-flex; align-items: center; gap: 6px;
    font-size: .84rem; font-weight: 600;
    font-variant-numeric: tabular-nums; cursor: default;
    color: var(--color-muted); }   /* stat stays gray; the ARROW carries color */
.dw-cmpbadge .dw-cmparrow { line-height: 0; }
.dw-cmp--up .dw-cmparrow { color: var(--color-good); }
.dw-cmp--down .dw-cmparrow { color: var(--color-alert); }
.dw-cmp--flat .dw-cmparrow { color: var(--color-idle); }
.dw-cmpbadge .dw-cmpnet { display: none; }
.dw-cmpbadge:hover .dw-cmppct { display: none; }
.dw-cmpbadge:hover .dw-cmpnet { display: inline; }
.dw-table th.dw-cmpcol { width: 100px; }

/* Metrics variant: arrow stacked ABOVE a gray stat, fixed box so the
   %↔net hover swap never shifts the row; label+value left-align */
.dw-metric--cmp { display: flex; align-items: center; justify-content: center;
    gap: 4px; text-align: left; }
.dw-cmpbadge--stack { flex-direction: column; gap: 4px; width: 92px;
    flex: none; text-align: center; font-size: .84rem; }
.dw-cmpbadge--stack .dw-cmparrow svg { width: 16px; height: 16px; }
.dw-cmpbadge--stack .dw-cmppct, .dw-cmpbadge--stack .dw-cmpnet { white-space: nowrap; }
.dw-cmpbadge--stack:hover .dw-cmppct { display: none; }
.dw-cmpbadge--stack:hover .dw-cmpnet { display: inline; }
.dw-cmpinf { vertical-align: -1px; margin: 0 1px; }

/* ==== Invoicing report (iv-) — client bars + month grid, sticky
   name/Total columns, months scroll (utilization pattern) ==== */
/* Capped scroller so the month header can stick (the Revenue report's
   pattern); separate borders — collapsed ones scroll with the content
   and leak a sliver above the sticky header. */
.iv-wrap { overflow: auto; margin-top: var(--space-3);
    max-height: calc(100vh - 300px); min-height: 260px; }
.iv-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.iv-table th, .iv-table td { border-bottom: 1px solid var(--color-soft);
    padding: 9px 12px; text-align: right; white-space: nowrap; font-size: .85rem; }
.iv-table thead th { border-bottom: 1px solid var(--color-line);
    color: var(--color-primary); font-weight: 700;
    position: sticky; top: 0; z-index: 3; background: var(--color-surface); }
.iv-table thead th:first-child, .iv-table thead th:nth-child(2) { z-index: 4; }
.iv-mh { display: block; font-weight: 700; font-size: .92rem; }
.iv-msub { display: block; font-weight: 400; font-size: .72rem; color: var(--color-muted); }
/* Sticky left panel: name column + row-total column (shadow on the 2nd) */
.iv-table th:first-child, .iv-table td:first-child { position: sticky; left: 0;
    z-index: 2; background: var(--color-surface); width: 320px; min-width: 320px;
    max-width: 320px; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.iv-table th:nth-child(2), .iv-table td:nth-child(2) { position: sticky; left: 320px;
    z-index: 2; background: var(--color-surface); min-width: 96px; }
/* Same flush gradient divider as the utilization sticky column */
.iv-table th:nth-child(2)::after, .iv-table td:nth-child(2)::after { content: '';
    position: absolute; top: -1px; bottom: -1px; right: -8px; width: 8px;
    background: linear-gradient(to right, rgba(1, 0, 49, .10), transparent);
    pointer-events: none; }
.iv-hhead { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; }
/* Client header bar spans both panels (gray carries into the sticky cells) */
.iv-crow td { background: #f1f3f7; border-bottom-color: var(--color-line); }
.iv-crow td:first-child, .iv-crow td:nth-child(2) { background: #f1f3f7; }
.iv-client { font-weight: 700; color: var(--color-primary); font-size: .92rem;
    text-decoration: none; }
.iv-client:hover { text-decoration: underline; }
.iv-crow .iv-money { font-weight: 600; }
.iv-proj { padding-left: 26px !important; }
.iv-kind { margin-left: 8px; font-size: .72rem; color: var(--color-muted);
    text-transform: uppercase; letter-spacing: .05em; }
/* Pre-billed retainers: the bookkeeper invoices these at period start. */
.iv-kind--pre { margin-left: 4px; color: #a06b00; background: #fdf3dd;
    padding: 1px 7px; border-radius: 3px; }
.iv-money--tot { font-weight: 700; }
/* Footer: client-type + billing-kind subtotals, then the grand total */
.iv-table tfoot td { border-bottom: 0; }
.iv-table tfoot tr:first-child td { border-top: 2px solid var(--color-line); }
.iv-totlbl { font-weight: 700; color: var(--color-muted); }
.iv-trow--grp td { border-top: 1px solid var(--color-line); }
.iv-trow--grand td { border-top: 2px solid var(--color-line); font-size: .92rem; }
.iv-trow--grand .iv-totlbl { color: var(--color-primary); }
/* The grand Total row pins to the scroller's bottom (Revenue-report
   pattern) — the type/kind subtotal rows above it scroll normally.
   Corner cells layer over the sticky name/Total columns. */
.iv-table .iv-trow--grand td { position: sticky; bottom: 0; z-index: 3;
    background: var(--color-surface); }
.iv-table .iv-trow--grand td:first-child,
.iv-table .iv-trow--grand td:nth-child(2) { z-index: 4; }

/* Invoicing chart: kind legend under the stacked bars */
.iv-legend { display: flex; gap: 26px; padding: 6px 4px 2px; font-size: .84rem;
             color: var(--color-muted); justify-content: center; }
.iv-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.iv-key { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ==== Revenue report (rv-) — entity/client rows on the invoicing
   month grid, capped scroller with sticky header + sticky bottom
   Total row (both sticky-left columns keep working in the corners) ==== */
.rv-wrap { overflow: auto; margin-top: var(--space-3);
    max-height: calc(100vh - 300px); min-height: 260px; }
.rv-table thead th { position: sticky; top: 0; z-index: 3;
    background: var(--color-surface); }
.rv-table thead th:first-child, .rv-table thead th:nth-child(2) { z-index: 4; }
.rv-table tfoot td { position: sticky; bottom: 0; z-index: 3;
    background: var(--color-surface); }
.rv-table tfoot td:first-child, .rv-table tfoot td:nth-child(2) { z-index: 4; }
.rv-trow--grand td { border-top: 2px solid var(--color-line);
    font-size: .92rem; font-weight: 700; }
/* Collapsed borders scroll with the content and leak a row sliver
   above the sticky header — separate borders keep the corners tight */
.rv-table { border-collapse: separate; border-spacing: 0; }
/* Thinner sticky name column than invoicing's (titles PHP-truncate
   with full-name tooltips); Total column follows the new offset. */
.rv-table th:first-child, .rv-table td:first-child { width: 280px;
    min-width: 280px; max-width: 280px; }
.rv-table th:nth-child(2), .rv-table td:nth-child(2) { left: 280px; }
.rv-trow--grand .iv-totlbl { color: var(--color-primary); }
/* Legend swatch for the hatched Quotes segment */
.rv-key--hatch { background: repeating-linear-gradient(45deg,
    hsl(237, 62%, 55%) 0 2px, hsl(237, 62%, 90%) 2px 6px); }
.rv-key--proj { background: hsl(237, 62%, 34%); }
.co-key--exp { background: #b7c0d3; }   /* Cost report's Expenses segment */
/* Margin report: negative money + the % sub-line on Total cells */
.mg-neg, .iv-money.mg-neg, .iv-money--tot.mg-neg { color: var(--color-alert); }
.mg-pct { display: block; font-weight: 400; font-size: .72rem; color: var(--color-muted); }
/* vs the Settings target margins: green at/above target, red below */
/* PTO admin (settings_users.php > PTO Requests) */
.pto-req { border: 1px solid var(--color-line); border-radius: 8px; padding: 12px 14px; margin-bottom: var(--space-2); }
.pto-req-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pto-req-days { font-weight: 700; color: var(--color-primary); }
.pto-req-bal { margin-left: auto; font-size: .8rem; color: var(--color-muted); }
.pto-req-bal.pto-neg { color: var(--color-alert); font-weight: 600; }
.pto-req-plan { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.pto-slot { border: 1px dashed #b9a7e8; background: #f7f4fd; border-radius: 6px;
    padding: 4px 10px; font-size: .78rem; }
.pto-req-actions { display: flex; gap: 8px; }
.pto-req-status--approved { color: var(--color-good); font-weight: 600; }
.pto-req-status--denied { color: var(--color-alert); font-weight: 600; }
.nf-badge--pto { background: #6d5bd0; }

/* My PTO (pto.php) — one panel, two columns; stats-row up top */
.pto-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
    align-items: start; margin-top: var(--space-4); }
@media (max-width: 1100px) { .pto-cols { grid-template-columns: 1fr; } }
.pto-neg { color: var(--color-alert) !important; }
.pto-consent { align-items: flex-start; border: 1px solid var(--color-line); border-radius: 6px;
    padding: 10px 12px; background: var(--color-canvas); color: var(--color-muted); font-size: .84rem; }
.pto-consent input { margin-top: 3px; flex: none; }

/* Attendee RSVP badges (event page, synced events) */
.att-face { position: relative; }
.att-rsvp { position: absolute; right: -2px; top: 24px; width: 16px; height: 16px;
    border-radius: 50%; border: 2px solid var(--color-surface);
    display: inline-flex; align-items: center; justify-content: center; }

/* Menu Order (profile.php) — drag-sortable main-nav list */
.nav-order { list-style: none; margin: 0; padding: 0; max-width: 340px; }
.nav-order-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border: 1px solid var(--color-line); background: var(--color-surface);
    margin-bottom: 4px; border-radius: 6px; cursor: grab; font-size: .88rem; }
.nav-order-item svg { color: var(--color-muted); flex: none; }
.nav-order-item.is-dragging { opacity: .45; }
.nav-order-vis { margin-left: auto; border: 1px solid var(--color-line); background: var(--btn-light);
    border-radius: var(--btn-radius); padding: 2px 10px; font-size: .72rem; cursor: pointer;
    color: var(--color-good); font-weight: 600; }
.nav-order-vis .nav-vis-off { display: none; color: var(--color-muted); }
.nav-order-item--hidden .nav-order-vis .nav-vis-on { display: none; }
.nav-order-item--hidden .nav-order-vis .nav-vis-off { display: inline; }
.nav-order-item--hidden { opacity: .55; }

/* Client insights (notes + Services & Financial History, gated) */
.viz-client-notes { margin-top: var(--space-3); }
.viz-note { margin: 0; white-space: pre-line; font-size: .88rem; }
.viz-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.viz-half { flex: 1 1 320px; }
.viz-third { flex: 1 1 260px; min-width: 0; }
.viz-two-thirds { flex: 2 1 420px; min-width: 0; }
.viz-center { text-align: center; }
.viz-sub { margin: 0 0 var(--space-2); font-size: .82rem; font-weight: 600; color: var(--color-text); }
/* donut on top, legend UNDERNEATH (horizontal, wrapping) */
.viz-chart { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.viz-donut { flex: none; }
.viz-legend { list-style: none; margin: 0; padding: 0; font-size: .82rem;
    display: flex; flex-wrap: wrap; justify-content: center; column-gap: 14px; }
.viz-legend li { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.viz-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* NB: table.data tbody td ("rows breathe", 13px) outspecifies plain
   class selectors — these must carry the table.data prefix to win. */
table.data.viz-annual thead th { padding: 4px 8px; }
table.data.viz-annual tbody td { padding: 3px 8px; vertical-align: middle; }
table.data.viz-annual tbody td:last-child { padding-top: 1px; padding-bottom: 1px; }   /* override input stays in line */
.viz-ovr { color: #e08a00; font-weight: 700; cursor: help; }
.viz-ovr-in { width: 92px; font-size: .78rem; padding: 2px 6px; border: 1px solid var(--color-line); border-radius: 4px; }
.viz-notecell { font-size: .8rem; white-space: nowrap; }
.viz-addyear { display: flex; gap: 6px; align-items: center; margin: var(--space-2) 0; }
.viz-addyear input[name="amount"] { margin-left: auto; }
.viz-subrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.viz-subrow .viz-sub { margin: 0; }
.viz-tabs { display: flex; gap: 0; margin-bottom: var(--space-2); }
.viz-subrow .viz-tabs { margin-bottom: 0; }
.viz-tab { border: 1px solid var(--color-line); background: var(--btn-light); padding: 5px 12px;
    font-size: .78rem; cursor: pointer; color: var(--color-text); }
.viz-tab + .viz-tab { border-left: 0; border-radius: 0 var(--btn-radius) var(--btn-radius) 0; }
.viz-tab:first-child { border-radius: var(--btn-radius) 0 0 var(--btn-radius); }
.viz-tab.active { background: #fff; color: var(--color-primary); font-weight: 700; }   /* matches .pl-seg.active (Days/Weeks/Months) */
.viz-tabpane { height: 240px; overflow-y: auto; border: 1px solid var(--color-line); }
table.data.viz-svc-table tbody td { padding: 3px 10px; font-size: .8rem; vertical-align: middle; }
.viz-barcell { width: 34%; }
.viz-bar { display: block; height: 8px; min-width: 2px; background: #4d7cfe; border-radius: 2px; }
.viz-svc-plain { list-style: none; margin: 0; padding: 6px 10px; font-size: .8rem; }
.viz-svc-plain li { padding: 3px 0; border-bottom: 1px solid var(--color-soft, #f0f2f6); }

/* Row-height toggle (Planner header + My Week widget title bar) */
/* stretch = the icon segs match the text segs' height exactly */
.pl-right { display: flex; justify-content: flex-end; align-items: stretch; gap: 10px; }
.pl-right .pl-views { justify-content: flex-start; }
.pl-rh .pl-seg { display: inline-flex; align-items: center; padding: 0 10px; }
.hw-rh--on { color: var(--color-accent); background: var(--color-canvas); border-radius: 4px; }

.mg-pct--good { color: var(--color-good); font-weight: 600; }
.mg-pct--near { color: #e08a00; font-weight: 600; }   /* within 5pts of target — good, not failing */
.mg-pct--bad  { color: var(--color-alert); font-weight: 600; }
.mg-key--line { height: 3px; border-radius: 2px; background: var(--color-accent);
    align-self: center; }
.mg-key--rev { background: hsl(237, 62%, 34%); }
.mg-key--cost { background: #d77a00; }
.mg-key--target { background: repeating-linear-gradient(90deg, #8d96a5 0 4px, transparent 4px 8px); }
/* Budget vs Actual report: summary tiles + the burn-bar % column */
.ba-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--space-3) 0; }
.ba-tile { flex: 1 1 150px; min-width: 150px; padding: 12px 16px;
    border: 1px solid var(--color-line); border-radius: var(--radius);
    background: var(--color-surface); }
.ba-tlabel { display: block; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.ba-tval { display: block; margin-top: 3px; font-size: 1.15rem; font-weight: 700;
    color: var(--color-primary); font-variant-numeric: tabular-nums; }
/* Standalone table (no month scroll, so none of iv-table's sticky) */
.ba-wrap { overflow-x: auto; }
.ba-table { border-collapse: collapse; width: 100%; }
.ba-table th, .ba-table td { border-bottom: 1px solid var(--color-soft);
    padding: 9px 12px; text-align: right; white-space: nowrap; font-size: .85rem; }
.ba-table thead th { border-bottom: 1px solid var(--color-line);
    color: var(--color-primary); font-weight: 700; }
.ba-table th:nth-child(-n+3), .ba-table td:nth-child(-n+3) { text-align: left; }
.ba-table tfoot td { border-bottom: 0; }
.ba-table tfoot tr:first-child td { border-top: 2px solid var(--color-line); }
.ba-table th.ba-num { text-align: right; }
.ba-table td.ba-pct, .ba-table th.ba-pcth { text-align: left; }
.ba-table .ba-pct { min-width: 150px; max-width: 190px; }
.ba-table .ba-pct .pbar { margin-bottom: 3px; }
.ba-pctv { font-size: .78rem; font-weight: 600; color: var(--color-muted);
    font-variant-numeric: tabular-nums; }
.ba-pctv.mg-neg { color: var(--color-alert); }
.ba-pill { cursor: default; pointer-events: none; }

/* Pipeline report: stage × month-window table, raw over weighted */
.pp-pager { display: flex; justify-content: center; gap: 22px; margin: var(--space-3) 0; }
.pp-page { font-size: .85rem; color: var(--color-muted); text-decoration: none; }
.pp-page:hover { color: var(--color-accent); }
.pp-page.is-active { color: var(--color-primary); font-weight: 700; }
/* Fixed layout: the Stage column takes its set width and the six data
   columns split the rest evenly, so paging months never reflows. */
.pp-table { border-collapse: collapse; width: 100%; table-layout: fixed; min-width: 850px; }
.pp-table th, .pp-table td { border: 1px solid var(--color-soft);
    padding: 10px 14px; text-align: right; white-space: nowrap; font-size: .85rem;
    overflow: hidden; text-overflow: ellipsis; }
.pp-table thead th { background: #f1f3f7; color: var(--color-primary);
    font-weight: 700; font-size: .95rem; text-align: center;
    border-left-color: #fff; border-right-color: #fff; }
.pp-table th.pp-stageh { width: 160px; }
.pp-year { display: block; font-weight: 400; font-size: .68rem; color: var(--color-muted); }
.pp-table td.pp-stage { text-align: left; position: relative; padding-right: 20px; }
/* Gray cells separate with WHITE dividers (header cells side-by-side,
   stage cells stacked); their edges against white cells stay soft. */
.pp-table tbody tr:not(.pp-trow) td.pp-stage { background: #f1f3f7;
    border-top-color: #fff; border-bottom-color: #fff; }
.pp-band { position: absolute; right: 0; top: -1px; bottom: -1px; width: 4px; }
.pp-prob { display: block; font-size: .7rem; color: var(--color-muted); text-align: right; }
.pp-raw { display: block; font-size: .76rem; color: var(--color-muted);
    font-variant-numeric: tabular-nums; }
.pp-wt { display: block; font-weight: 600; font-size: .98rem; color: var(--color-primary);
    font-variant-numeric: tabular-nums; }
.pp-grand { font-weight: 700; }
.pp-trow .pp-wt { font-weight: 700; }
.pp-cell a { color: inherit; text-decoration: none; display: block; }
.pp-cell a:hover .pp-wt { color: var(--color-accent); }

/* Success report: per-user table with green share bars */
.qs-table { border-collapse: collapse; width: 100%; }
.qs-table th, .qs-table td { border-bottom: 1px solid var(--color-soft);
    padding: 10px 12px; white-space: nowrap; font-size: .85rem; text-align: left; }
.qs-table thead th { border-bottom: 1px solid var(--color-line);
    color: var(--color-primary); font-weight: 700; }
.qs-table th.qs-num, .qs-table td.qs-num { text-align: right;
    font-variant-numeric: tabular-nums; }
.qs-section td { color: var(--color-accent); font-weight: 700; font-size: .92rem;
    border-bottom-color: var(--color-line); }
.qs-user { display: flex; align-items: center; gap: 8px; }
.qs-tot { font-weight: 700; color: var(--color-primary); }
.qs-table th.qs-barh { width: 220px; }
.qs-barc { min-width: 160px; }
.qs-bar { display: block; height: 14px; border-radius: 3px; background: #5cb85c; }
.qs-table tfoot td { border-bottom: 0; border-top: 2px solid var(--color-line); }
.qs-totlbl { text-align: right; font-weight: 700; color: var(--color-muted); }

/* Activity report: day-grouped feed of time entries + issued quotes */
.ar-table { border-collapse: collapse; width: 100%; }
.ar-table th, .ar-table td { border-bottom: 1px solid var(--color-soft);
    padding: 10px 12px; font-size: .85rem; text-align: left; }
.ar-table thead th { border-bottom: 1px solid var(--color-line);
    color: var(--color-primary); font-weight: 700; }
.ar-table th.ar-num, .ar-table td.ar-num { text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums; }
.ar-day td { padding-top: 22px; font-weight: 700; font-size: .95rem;
    color: var(--color-primary); border-bottom-color: var(--color-line); }
.ar-act { font-weight: 600; color: var(--color-primary); }
.ar-item { display: block; font-size: .78rem; color: var(--color-muted);
    max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-tot { font-weight: 700; color: var(--color-primary); }
.ar-table tfoot td { border-bottom: 0; border-top: 2px solid var(--color-line); }
.ar-totlbl { text-align: right; font-weight: 700; color: var(--color-muted); }

/* Client Quality (owner-only): scored table + client.php score form */
.cq-form { display: flex; gap: 12px; align-items: flex-end; margin-top: var(--space-3); }
.cq-form .field--sm { max-width: 110px; }
.cq-table { border-collapse: collapse; width: 100%; }
.cq-table th, .cq-table td { border-bottom: 1px solid var(--color-soft);
    padding: 8px 11px; white-space: nowrap; font-size: .85rem; text-align: left; }
.cq-table thead th { border-bottom: 1px solid var(--color-line);
    color: var(--color-primary); font-weight: 700; cursor: pointer; user-select: none; }
.cq-table thead th:hover { color: var(--color-accent); }
.cq-table thead th.cq-desc::after { content: ' ▾'; font-size: .7rem; }
.cq-table thead th.cq-asc::after { content: ' ▴'; font-size: .7rem; }
.cq-goal { font-weight: 400; font-size: .7rem; color: var(--color-muted); }
.cq-table th.cq-num, .cq-table td.cq-num { text-align: right;
    font-variant-numeric: tabular-nums; }
.cq-total td { background: var(--color-primary); color: #fff; font-weight: 700; }
.cq-total td.cq-good, .cq-total td.cq-warn, .cq-total td.cq-bad { color: #fff; }
.cq-good { background: #d9efe3; }
.cq-warn { background: #fdf3d9; }
.cq-bad  { background: #fadfdf; }
.cq-conc { background: #f8c471; }   /* revenue-concentration orange */
.cq-total td.cq-good { background: #2e7d52; }
.cq-total td.cq-warn { background: #b07c10; }
.cq-total td.cq-bad  { background: #c0392b; }
.cq-charth { margin: var(--space-4) 0 var(--space-2); font-size: 1.02rem;
    color: var(--color-primary); }

/* Quote page: attach-to-project controls */
.qp-attached { display: flex; align-items: center; gap: 8px; }
.qp-attach { display: flex; gap: 8px; }
.qp-attach select { flex: 1; min-width: 0; }

/* ---- The Hub: widget grid ------------------------------------------ */
.hub-bar { display: flex; justify-content: space-between; align-items: center; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
    align-items: start; }
.hw { background: var(--color-surface); border: 1px solid var(--color-line);
    border-radius: var(--radius); overflow: hidden; }
.hw--full { grid-column: 1 / -1; }
.hw--dragging { opacity: .45; }
.hw-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px;
    border-bottom: 1px solid var(--color-soft); cursor: grab; background: #fafbfd; }
.hw-head:active { cursor: grabbing; }
.hw-grip { color: var(--color-muted); flex: none; }
.hw-title { margin: 0; font-size: .92rem; color: var(--color-primary); }
.hw-acts { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.hw:hover .hw-acts { opacity: 1; }
.hw-act { border: 0; background: none; color: var(--color-muted); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 3px 5px; border-radius: 4px; }
.hw-act:hover { color: var(--color-primary); background: var(--color-soft); }
.hw-body { padding: 12px 14px; font-size: .85rem; }
.hw-empty { margin: 4px 0; color: var(--color-muted); font-size: .85rem; }
.hw-list { list-style: none; margin: 0; padding: 0; }
.hw-list li { display: flex; align-items: center; gap: 9px; padding: 6px 0;
    border-bottom: 1px solid var(--color-soft); min-width: 0; }
.hw-list li:last-child { border-bottom: 0; }
.hw-list a.link-quiet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-sub { color: var(--color-muted); font-size: .76rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.hw-num { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap;
    font-weight: 600; color: var(--color-primary); font-size: .82rem; }
.hw-late { color: var(--color-alert) !important; }
.hw-good { color: var(--color-good) !important; }
.hw-time { color: var(--color-muted); font-size: .76rem; white-space: nowrap; min-width: 74px; }
.hw-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-muted); text-decoration: none;
    border: 1px solid var(--color-line); border-radius: 9px; padding: 1px 7px; flex: none; }
.hw-tag--warn { color: #b07c10; border-color: #ecd9a8; background: #fdf6e0; }
.hw-tag--bad { color: var(--color-alert); border-color: #f2c4c4; background: #fdeaea; }
.hw-struck { text-decoration: line-through; color: var(--color-muted); }
.hw-done { width: 20px; height: 20px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--color-line); background: #fff; color: transparent;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hw-done:hover { border-color: var(--color-good); color: var(--color-good); }
.hw-done.is-done { border-color: var(--color-good); background: var(--color-good);
    color: #fff; cursor: default; }
.hw-meter { flex: 1; height: 9px; border-radius: 5px; background: var(--color-soft);
    overflow: hidden; min-width: 50px; }
.hw-meter > span { display: block; height: 100%; background: hsl(237, 62%, 45%); }
.hw-meter--warn > span { background: #e8a13d; }
.hw-meter--over > span { background: var(--color-alert); }
.hw-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
/* My Hours This Week: the gantt-style Full Week bar */
.hw-hoursw-title { font-size: 1.05rem; margin-bottom: 8px; display: block; }
.hw-weekbar { display: flex; height: 24px; border-radius: 7px; overflow: hidden;
    background: var(--color-soft); }
.hw-weekbar-seg { display: block; height: 100%; min-width: 8px; }
.hw-weekbar-seg--a { background: hsl(237, 62%, 45%); }
.hw-weekbar-seg--b { background: hsl(237, 62%, 62%); }
.hw-days { display: flex; flex-direction: column; gap: 6px; }
.hw-day { display: flex; align-items: center; gap: 9px; }
.hw-day--today .hw-day-lbl { color: var(--color-accent); font-weight: 700; }
.hw-day-lbl { min-width: 34px; font-size: .78rem; color: var(--color-muted); }
.hw-day-val { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums;
    font-size: .8rem; font-weight: 600; color: var(--color-primary); }
.hw-foot { margin: 10px 0 0; font-size: .76rem; color: var(--color-muted); }
.hw-big { font-size: 1.55rem; font-weight: 700; color: var(--color-primary);
    margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.hw-big-lbl { display: block; font-size: .74rem; font-weight: 400;
    color: var(--color-muted); text-transform: uppercase; letter-spacing: .05em; }
.hw-pair { display: flex; align-items: baseline; gap: 14px; padding: 8px 0;
    border-bottom: 1px solid var(--color-soft); font-variant-numeric: tabular-nums; }
.hw-pair:last-of-type { border-bottom: 0; }
.hw-pair-lbl { min-width: 96px; font-size: .78rem; color: var(--color-muted); }
.hw-pri { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #9e9e9e; }
.hw-pri--urgent { background: #e5484d; }
.hw-pri--high { background: #e8a13d; }
.hw-pri--normal { background: #5b8def; }
.hw-pri--low { background: #b7c0d3; }
.hw-cols { display: flex; gap: 14px; align-items: flex-end; padding: 4px 2px 0; }
.hw-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hw-col-bar { width: 100%; max-width: 66px; height: 110px; background: var(--color-soft);
    border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; }
.hw-col-bar > span { display: block; width: 100%; }
.hw-col-val { font-size: .8rem; font-weight: 700; color: var(--color-primary); }
.hw-col-lbl { font-size: .76rem; color: var(--color-muted); }
.hw-col-sub { font-size: .7rem; color: var(--color-muted); }
.hw-table { border-collapse: collapse; width: 100%; }
.hw-table th, .hw-table td { padding: 7px 8px; font-size: .82rem; text-align: left;
    border-bottom: 1px solid var(--color-soft); white-space: nowrap; }
.hw-table thead th { color: var(--color-primary); font-weight: 700;
    border-bottom-color: var(--color-line); }
.hw-table th.hw-r, .hw-table td.hw-r { text-align: right; }
.hw-table td.hw-r .hw-meter { display: inline-block; width: 120px; min-width: 120px;
    flex: none; vertical-align: middle; }
.hw-table td.hw-r .hw-num { display: inline-block; min-width: 44px; }
/* Overdue TEs: the timer-icon edit lead */
.hw-te-timer { width: 26px; height: 26px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--color-line); background: #fff; color: var(--color-muted);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hw-te-timer:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hub-pick { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.hub-pick-row { display: flex; align-items: center; gap: 12px; padding: 9px 6px;
    border-bottom: 1px solid var(--color-soft); }
.hub-pick-row:last-child { border-bottom: 0; }
.hub-pick-txt { display: flex; flex-direction: column; gap: 1px; }
.hub-pick-row .btn { margin-left: auto; flex: none; }
/* Uniform heights (short/medium/tall; bodies scroll past the cap) —
   applies to every widget so rows always line up. */
.hw.hw-h-short .hw-body { height: 170px; overflow-y: auto; }
.hw.hw-h-medium .hw-body { height: 270px; overflow-y: auto; }
.hw.hw-h-tall .hw-body { height: 480px; overflow-y: auto; }
/* Expand/collapse — full-width widgets only (half widths use the height
   cycle instead). Collapsed shows just the header bar; chevron flips. */
.hw--half [data-hw-collapse] { display: none; }
.hw.hw--collapsed .hw-body { display: none; }
.hw--collapsed [data-hw-height] { display: none; }
[data-hw-collapse] svg { transition: transform .12s; }
.hw--collapsed [data-hw-collapse] svg { transform: rotate(180deg); }
.hw-donut { flex: none; transform: rotate(-90deg); }
.hw-bigrow { display: flex; align-items: center; gap: 14px; }
/* Fixed name column so meters/bars align uniformly */
.hw-name { display: inline-block; width: 190px; min-width: 190px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.hw-mcol { min-width: 74px; text-align: right; font-variant-numeric: tabular-nums;
    font-size: .8rem; white-space: nowrap; }
.hw-moneybar { flex: 1; min-width: 60px; }
/* Revenue vs Cost: two full-width clusters, text column + donut —
   each cluster stretches so no dead space hugs the widget edges */
.hw-rc2 { display: flex; gap: 48px; padding: 8px 4px 4px; width: 100%; }
.hw-rc2-col { flex: 1; display: flex; align-items: center;
    justify-content: space-between; gap: 20px; min-width: 0; }
.hw-rc2-left { display: flex; flex-direction: column; gap: 4px; }
.hw-rc2-title { font-size: .95rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-primary); }
.hw-rc2-pct { font-size: 1.7rem; font-weight: 700; color: var(--color-primary);
    font-variant-numeric: tabular-nums; }
.hw-rc2-nums { font-size: .85rem; color: var(--color-primary);
    font-variant-numeric: tabular-nums; }
.hw-rc2 .hw-donut { width: 128px; height: 128px; }
/* Task-List-style widget groups */
.hw-tk { border-collapse: collapse; width: 100%; }
.hw-tk .hw-tk-ghead td { padding: 14px 8px 6px; border-bottom: 1px solid var(--color-line); }
.hw-tk tbody:first-child .hw-tk-ghead td { padding-top: 2px; }
.hw-tk .hw-tk-ghead .tk-gname { font-size: 1.05rem; }
.hw-tk-row td { padding: 7px 8px; border-bottom: 1px solid var(--color-soft);
    font-size: .85rem; vertical-align: middle; }
.hw-tk-lead { width: 34px; white-space: nowrap; }
.hw-tk-proj { width: 220px; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.hw-tk-proj a { color: var(--color-text); text-decoration: none; }
.hw-tk-proj a:hover { color: var(--color-accent); }
.hw-tk-main a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.hw-tk-main a:hover { color: var(--color-accent); }
.hw-tk-right { text-align: right; white-space: nowrap; width: 120px;
    font-variant-numeric: tabular-nums; }
/* Pipeline widget: the board scrolls inside the widget; columns
   stretch equally so the gray fills the space */
/* Hub boards (pipeline_snapshot / my_board). The WIDGET BODY is the
   scroll container (.hw.hw-h-* .hw-body caps + overflow-y auto), so the
   wrap must NOT scroll itself — a nested overflow:auto wrap that never
   reached its own max-height made sticky heads anchor to a box that
   didn't move (Tim, 2026-09-11). With the wrap transparent to
   overflow, each .pl-col stretches the full board height and the heads
   pin to the body's top edge while cards scroll under them. The head
   background is rendered OPAQUE (tint over --color-page) in the PHP. */
.hw-plwrap { overflow: visible; }
/* .pl-board's own overflow-x:auto (the full Pipeline page) would make the
   BOARD the sticky container — it never scrolls vertically, so heads
   would never move. In the hub the widget body scrolls both axes. */
.hw-plwrap .pl-board { overflow: visible; }
.hw-plwrap .pl-col-head { position: sticky; top: -12px; z-index: 2; }  /* -12 = .hw-body padding-top, so the head meets the body's edge */
.hw-plboard { min-height: 100%; }
.hw-plboard .pl-col-body { min-height: 160px; }
/* My Week: the Planner's day view for one user — gray day columns
   run full height and even, like the Planner's cells */
.hw-plweek { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: 100%; }
.hw-plday { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.hw-plday-h { font-size: .8rem; font-weight: 700; color: var(--color-primary);
    padding: 4px 2px 7px; border-bottom: 1px solid var(--color-line); margin-bottom: 7px;
    flex: none; }
.hw-plday-h.is-today { color: var(--color-accent); }
.hw-plday-body { flex: 1; display: flex; flex-direction: column; gap: 6px;
    background: var(--color-page); border-radius: 6px; padding: 7px;
    min-height: 60px; overflow-y: auto; }
.hw-plday-empty { display: none; }
.hw-plweek .pl-blk { cursor: pointer; flex: none; }
/* Task-List widget: trim the group head spacing for widget scale and
   let the table fit the widget (the page table's 1240px min would
   force a scrollbar in here) */
.hw-tkfull { min-width: 0; }
.hw-tkfull .tk-ghead td { padding-top: 12px; }
.hw-tkfull tbody:first-of-type .tk-ghead td { padding-top: 2px; }
/* Upcoming Events: the Project page's event rows — the project page's
   padding rules are scoped to table.ev-table, so this table sets its
   own, plus a soft separator between events for readability. */
.hw-evtable { border-collapse: collapse; width: 100%; }
.hw-evtable tbody td { padding: 10px; text-align: left; vertical-align: middle; }
.hw-evtable .ev-row + .ev-row td { border-top: 1px solid var(--color-soft); }
/* My Week: the Utilization report's day cells, sized for a widget */
.hw-utweek { border-collapse: collapse; width: 100%; table-layout: fixed; }
.hw-utweek thead th { padding: 8px 10px; text-align: right; white-space: nowrap;
    border-bottom: 1px solid var(--color-line); }
.hw-utweek thead th.is-today .ut-ph { color: var(--color-accent); }
.hw-utweek td.ut-cell { border-bottom: 1px solid var(--color-soft);
    border-left: 1px solid var(--color-soft); min-width: 0; }
.hw-utweek td.ut-cell:first-child { border-left: 0; }
@media (max-width: 900px) { .hub-grid { grid-template-columns: 1fr; } }

/* Chart hover card: one row per segment + the bold column total */
.rv-cpop-row { display: flex; align-items: center; gap: 7px; margin-top: 3px;
    color: var(--color-muted); min-width: 180px; }
.rv-cpop-row b { margin-left: auto; padding-left: 22px; white-space: nowrap;
    color: var(--color-primary); }
.rv-cpop-row--tot b { font-size: .95rem; }

/* Event client guests (display-only emails + pulled-back RSVP) */
.ed-guests { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ed-guest { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border: 1px dashed var(--color-line); border-radius: 14px; font-size: .8rem;
    color: var(--color-muted); }
.ed-rsvp { font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; }
.ed-rsvp--accepted { color: var(--color-good); }
.ed-rsvp--declined { color: var(--color-alert); }
.ed-rsvp--tentative { color: #e8a13d; }
.ed-rsvp--none { color: var(--color-muted); font-style: italic; }
.ed-gcal { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem;
    color: var(--color-good); align-self: center; }

/* ==== Company Data & Logo settings (sc-) ==== */
.sc-cols { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.sc-col { flex: 1; min-width: 320px; max-width: 560px; }
.sc-col--logo { flex: 0 1 340px; }
.sc-col textarea { width: 100%; resize: vertical; }
.sc-logo { border: 1px solid var(--color-line); border-radius: 6px; background: #fff;
    padding: 18px; display: flex; align-items: center; justify-content: center;
    min-height: 110px; }
.sc-logo img { max-width: 100%; max-height: 90px; }
.sc-actions { margin-top: var(--space-3); }
.sc-remove { margin-top: 10px; }
.sc-margins { max-width: 720px; }
.sc-mlabel { font-weight: 700; color: var(--color-primary); text-align: left !important; }
.sc-mcell { white-space: nowrap; }
.sc-mcell input { width: 84px; text-align: right; }

/* ==== Task Bundles (tb-) — reusable sequenced task templates:
   accordion bundle rows, task table w/ drag order + predecessor
   connectors + row-editable people/status, day-offset modal ==== */
.tb-add { display: flex; align-items: center; gap: 10px; margin-top: var(--space-3);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-soft); }
.tb-add[hidden] { display: none; }   /* display:flex must not defeat [hidden] */
.tb-list { margin-top: var(--space-3); }
.tb-bundle { border-bottom: 1px solid var(--color-soft); }
.tb-head { display: flex; align-items: center; gap: 10px; padding: 10px 4px; }
.tb-caret { background: none; border: 0; cursor: pointer; padding: 2px; line-height: 0;
    color: var(--color-muted); }
.tb-caret svg { transition: transform .15s ease; }
.tb-caret.is-open svg { transform: rotate(90deg); }
.tb-name { background: none; border: 0; cursor: pointer; padding: 0; font: inherit;
    font-weight: 700; font-size: .95rem; color: var(--color-primary); }
.tb-name:hover { color: var(--color-link); }
.tb-rename input { font: inherit; font-weight: 700; padding: 2px 6px; }
.tb-meta { font-size: .78rem; color: var(--color-muted); white-space: nowrap; }
.tb-head .spacer { flex: 1; }
.tb-iform { display: inline-flex; line-height: 0; }
.tb-ico { background: none; border: 0; cursor: pointer; padding: 5px; line-height: 0;
    color: #9aa3b1; border-radius: 5px; }
.tb-ico:hover { background: var(--btn-light-hover); color: var(--color-primary); }
.tb-ico--on { color: #27ae60; }
.tb-ico--on:hover { color: #1e8a4c; }
.tb-ico--danger:hover { color: var(--color-alert); }
.tb-ico--hover { visibility: hidden; }
.tb-head:hover .tb-ico--hover { visibility: visible; }
.tb-newtask { margin-left: 6px; }
.tb-tasks { padding: 0 4px 14px 26px; }
.tb-none { margin: 4px 0 0; }
.tb-table th, .tb-table td { white-space: nowrap; }
table.tb-table td { vertical-align: middle; }
.tb-c-drag { width: 22px; }
.tb-c-no { width: 34px; text-align: center !important; }
.tb-c-pred { width: 96px; text-align: center !important; }
.tb-c-del { width: 30px; }
.tb-num { color: var(--color-muted); }
.tb-trow.tb-dragging { opacity: .45; }
.tb-con { display: inline-flex; padding: 3px; cursor: crosshair; line-height: 0;
    border-radius: 50%; }
.tb-con:hover, .tb-con--hot { background: #e7f1fd; }
.tb-con--hot svg rect { stroke: #2f80ed; fill: #cfe3fb; }
.tb-prednum { background: none; border: 0; font: inherit; font-size: .84rem;
    color: var(--color-text); min-width: 20px; cursor: pointer; padding: 1px 3px;
    border-radius: 4px; }
.tb-prednum:not(:disabled):hover { background: #fdeaea; color: var(--color-alert); }
.tb-prednum:disabled { cursor: default; color: var(--color-muted); }
.tb-linksvg { position: fixed; inset: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 96; }
.tb-who { text-align: left !important; }
.tb-who > * { vertical-align: middle; }
.tb-whobtn { background: none; border: 0; padding: 1px; cursor: pointer; line-height: 0;
    border-radius: 50%; }
.tb-who-sep { color: var(--color-muted); margin: 0 4px; }
.tb-badge { width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; border: 1.5px dashed #aab4c4;
    color: var(--color-muted); font-size: .62rem; font-weight: 700; letter-spacing: .03em; }
.tb-badge--ghost { font-size: 0; }
.tb-respdd .dd-menu, .tb-asgdd .dd-menu { min-width: 220px; max-height: 300px; overflow: auto; }
.tb-title { text-align: left !important; }
.tb-pri { background: none; border: 0; cursor: pointer; padding: 2px; line-height: 0;
    vertical-align: middle; margin-right: 6px; }
.tb-pri--ro { cursor: default; }
.tb-pri .pf-pencil, .tb-pri svg + svg { display: none; }
.tb-pri:not(.tb-pri--ro):hover svg:first-child { display: none; }
.tb-pri:not(.tb-pri--ro):hover svg + svg { display: inline; color: var(--color-muted); }
.tb-title-t { font-weight: 600; color: var(--color-primary); }
/* Bundle-task modal — rides the task-form field system (.field-col
   labels etc.) in a two-column body */
.tb-modal { width: min(860px, 94vw); }
/* No extra inset: the dialog's own padding aligns the body with the
   modal-bar title (the bar cancels it with negative margins) */
.tb-mbody { display: flex; gap: 30px; align-items: flex-start; }
.tb-mcol { flex: 1; min-width: 0; }
.tb-mcol--side { flex: 0 0 250px; }
.tb-modal textarea { width: 100%; resize: vertical; }
.tb-modal .field--sm { flex: 0 0 96px; }
.tb-titlerow { display: flex; align-items: center; gap: 8px; }
.tb-priseg { display: inline-flex; gap: 2px; }
.tb-prib { background: none; border: 1px solid transparent; border-radius: 5px;
    cursor: pointer; padding: 4px; line-height: 0; opacity: .4; }
.tb-prib.is-active { opacity: 1; border-color: var(--color-line);
    background: var(--btn-light); }
.tb-prib:hover { opacity: 1; }
/* Dates row above the title: duration left, day offsets right */
.tb-dates-spacer { flex: 1; }
.tb-dates-row .field--days { flex: 0 0 92px; }
/* Faux avatar for the relatable Responsible modes (Task creator / PM)
   — .avatar-classed so the people-picker face swap picks it up */
.tb-fauxav { display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1.5px dashed #aab4c4; color: var(--color-muted);
    background: #fff; font-size: .58rem; font-weight: 700; letter-spacing: .02em; }

/* Task List ⋯ menu + Add Task Bundle picker */
.wa-more { display: inline-flex; }
.wa-more-btn { padding: 8px 9px; line-height: 0; background: var(--btn-light);
    border: 1px solid var(--color-line); }
.wa-more-btn:hover { background: var(--btn-light-hover); }
.tb-apply { width: min(440px, 92vw); }
.tb-apply-body { padding: var(--space-4); display: flex; flex-direction: column;
    gap: var(--space-3); }
.tb-apply .dd--field { width: 100%; }
.tb-apply .dd--field .dd-trigger { width: 100%; justify-content: space-between; }
.tb-apply .dd-menu { width: 100%; }
.tb-apply .dd-option { display: flex; align-items: center; gap: 9px; width: 100%; }
.tb-apply .dd-option .tb-apply-meta { font-size: .78rem; color: var(--color-muted);
    margin-left: auto; white-space: nowrap; }
/* Start date: label left, field right, one tidy row */
.tb-apply-date-row { display: flex; align-items: center; justify-content: space-between;
    gap: 14px; }
.tb-apply-date-row label { margin: 0; }

/* ==== Budget > Profit table (pfp-) — income vs costs at a glance:
   Budgeted / Earned / To Recognize / Invoiced to Date / To Invoice ==== */
.pfp-table th, .pfp-table td { text-align: right; white-space: nowrap; }
.pfp-table th:first-child, .pfp-table td:first-child { text-align: left; }
.pfp-lbl { font-weight: 700; color: var(--color-primary); }
.pfp-sub .pfp-lbl { font-weight: 400; color: var(--color-text); padding-left: 22px; }
.pfp-sub td { background: #fafbfd; }
.pfp-total td { border-top: 2px solid var(--color-line); font-weight: 700; }
.pfp-sublbl, .pfp-subval { display: block; font-weight: 400; font-size: .74rem;
    color: var(--color-muted); }
.pfp-neg { color: var(--color-alert); }
.pfp-h { display: inline-flex; align-items: center; gap: 5px; }
.pfp-i { display: inline-flex; color: var(--color-muted); line-height: 0; }

/* ==== Project Timeline (pt-) — the Projects section's gantt-style
   tab: static left column (toggle + type icon + name/dates stack),
   day-unit timeline (left: calc(var(--gpd) * var(--o))) with one
   Done/Remaining/Overdue bar per project/phase, counts label, hover
   card, weeks/quarters/years views + zoom/fit/today ==== */
.pt-toolbar { display: flex; justify-content: flex-end; align-items: center;
    gap: 12px; margin-top: var(--space-3); }
.pt-zoom { display: inline-flex; gap: 0; }
.pt-zbtn { background: var(--btn-light); border: 1px solid var(--color-line);
    cursor: pointer; padding: 6px 10px; line-height: 0; color: var(--color-muted);
    display: inline-flex; align-items: center; }
.pt-zbtn:hover { background: var(--btn-light-hover); color: var(--color-primary); }
.pt-zoom .pt-zbtn + .pt-zbtn { border-left: 0; }
.pt-zoom .pt-zbtn:first-child { border-radius: var(--btn-radius) 0 0 var(--btn-radius); }
.pt-zoom .pt-zbtn:last-child { border-radius: 0 var(--btn-radius) var(--btn-radius) 0; }
.pt-views { display: inline-flex; border: 1px solid var(--color-line);
    border-radius: var(--btn-radius); overflow: hidden; }
.pt-vbtn { background: var(--btn-light); border: 0; cursor: pointer;
    padding: 6px 14px; font: inherit; font-size: .82rem; color: var(--color-text); }
.pt-vbtn + .pt-vbtn { border-left: 1px solid var(--color-line); }
.pt-vbtn:hover { background: var(--btn-light-hover); }
.pt-vbtn.is-active { background: var(--color-slate); color: #fff; }

.pt { display: flex; margin-top: 12px; border: 1px solid var(--color-line);
    border-radius: 4px; overflow: hidden; position: relative; }
.pt::after { content: ''; position: absolute; left: 340px; top: 0; bottom: 0;
    width: 8px; background: linear-gradient(to right, rgba(1, 0, 49, .10), transparent);
    z-index: 3; pointer-events: none; }
.pt-left { flex: 0 0 340px; max-width: 340px; overflow: hidden;
    border-right: 1px solid var(--color-line); background: var(--color-surface); z-index: 2; }
.pt-lhead { display: flex; align-items: center; height: 52px; padding: 0 12px;
    border-bottom: 1px solid var(--color-line); font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted);
    position: relative; z-index: 4; background: var(--color-surface); }
/* Rows top-align so the arrow + type icon line up with the TITLE
   line, not the center of the name/dates stack */
.pt-lrow { display: flex; align-items: flex-start; gap: 8px; height: 48px;
    padding: 7px 10px 0 8px; border-bottom: 1px solid var(--color-soft); }
.pt-lrow--phase { padding-left: 30px; background: #fafbfd; }
/* Arrow + icon render as title-line-height boxes so their glyphs
   center on the TITLE line no matter the zoom/line metrics */
.pt-tog { background: none; border: 0; cursor: pointer; padding: 0 2px;
    color: var(--color-muted); flex: none; height: 19px;
    display: inline-flex; align-items: center; }
.pt-tog svg { transition: transform .15s ease; }
.pt-tog.is-open svg { transform: rotate(90deg); }
.pt-tog--none { width: 14px; }
.pt-picon { display: inline-flex; flex: none; line-height: 0; height: 19px;
    align-items: center; }
.pt-lmain { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pt-name { font-size: .8125rem; font-weight: 600; color: var(--color-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.pt-name:hover { color: var(--color-link); text-decoration: none; }
.pt-ldates { font-size: .7rem; color: var(--color-muted); white-space: nowrap; }

.pt-scroll { flex: 1; min-width: 0; overflow-x: auto; }
.pt-canvas { position: relative; min-width: 100%; }
.pt-head { height: 52px; position: relative; border-bottom: 1px solid var(--color-line);
    background: var(--color-tint); z-index: 4; }
.pt-h1, .pt-h2 { position: relative; height: 26px; }
.pt-h1 span, .pt-h2 span { position: absolute; top: 0; height: 26px; overflow: hidden;
    left: calc(var(--gpd) * var(--o)); width: calc(var(--gpd) * var(--w));
    display: flex; align-items: center; padding-left: 8px; white-space: nowrap;
    font-size: .78rem; color: var(--color-muted); border-left: 1px solid var(--color-line); }
.pt-h1 span { font-weight: 700; color: var(--color-primary); }
.pt-body { position: relative; }
.pt-grid { position: absolute; inset: 0; pointer-events: none; }
.pt-grid span { position: absolute; top: 0; bottom: 0;
    left: calc(var(--gpd) * var(--o)); width: calc(var(--gpd) * var(--w));
    border-left: 1px solid #eef0f5; }
/* Current date: dotted vertical guide */
.pt-today-line { position: absolute; top: 0; bottom: 0; width: 0;
    left: calc(var(--gpd) * var(--o)); border-left: 2px dotted #6f9fe8;
    opacity: .7; z-index: 1; }
.pt-rrow { position: relative; height: 48px; border-bottom: 1px solid var(--color-soft); }
.pt-rrow--phase { background: #fafbfd; }

/* Start ▶ / due ◆ markers flank the bar at the project's own dates —
   a light circle chip keeps them visible over grid lines */
.pt-flag { position: absolute; top: 50%; line-height: 0;
    left: calc(var(--gpd) * var(--o)); transform: translate(-115%, -50%);
    width: 24px; height: 24px; border-radius: 50%; background: #eceff4;
    display: flex; align-items: center; justify-content: center; }
.pt-flag--due { transform: translate(15%, -50%); }

/* The bar: a gantt-style rounded rectangle wearing the status-bar
   palette — solid blue done, blue-diagonal scheduled, red overdue */
.pt-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 22px;
    left: calc(var(--gpd) * var(--o)); width: calc(var(--gpd) * var(--w));
    display: flex; overflow: hidden; border-radius: 4px; background: #e4e8ee; }
.pt-rrow--phase .pt-bar { height: 15px; border-radius: 3px; }
.pt-seg { height: 100%; flex: none; }
.pt-seg--done { background: #2f80ed; }
.pt-seg--rem  { background: repeating-linear-gradient(45deg, #2f80ed 0 3px, rgba(47, 128, 237, .22) 3px 6px); }
.pt-seg--over { background: var(--color-alert); }
.pt-bar-lbl { position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: .72rem; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; pointer-events: none; }
.pt-rrow--phase .pt-bar-lbl { font-size: .66rem; }
.pt-hidden { display: none !important; }

/* Hover card: counts + thin done-ratio bar on the title row, then the
   logged items (linked) */
.pt-card { position: fixed; z-index: 95; width: 330px; background: #fff;
    border: 1px solid var(--color-line); border-radius: 8px; padding: 10px 12px;
    box-shadow: 0 10px 30px rgba(1, 0, 49, .18); }
.pt-card-hd { display: flex; align-items: center; gap: 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--color-soft); }
.pt-card-hd strong { font-size: .84rem; color: var(--color-primary); white-space: nowrap; }
.pt-mini { flex: 1; height: 4px; border-radius: 2px; background: #e6eaf0; overflow: hidden; }
.pt-mini span { display: block; height: 100%; background: #2f80ed; }
.pt-card-list { max-height: 280px; overflow: auto; margin-top: 6px; }
.pt-crow { display: flex; align-items: center; gap: 8px; padding: 5px 4px;
    font-size: .8rem; color: var(--color-text); text-decoration: none; border-radius: 4px; }
.pt-crow:hover { background: #f3f5fa; text-decoration: none; }
.pt-cwho { flex: none; display: inline-flex; line-height: 0; width: 20px;
    justify-content: center; }
.pt-cwho--ev { color: #8d96a5; }
.pt-noface { width: 20px; height: 20px; border-radius: 50%; background: #edf0f5;
    display: inline-block; }
.pt-ci { flex: none; display: inline-flex; line-height: 0; color: #8d96a5; }
.pt-cn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-ct { flex: none; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* Quote view: Additional Costs section under the line items */
.qv-ac { margin-top: var(--space-4); }
.qv-ac-title { font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.qv-ac-table { max-width: 560px; }

/* Project Task List: phase group headers + milestone markers (same
   family as the Tasks list group titles, dates right-aligned) */
.wa-tasks .wa-phead td { padding: 26px 10px 8px; text-align: left;
    border-bottom: 1px solid var(--color-line); }
.wa-tasks .wa-pgroup:first-of-type .wa-phead td { padding-top: 12px; }
.wa-ph-line { display: flex; align-items: center; gap: 10px; }
.wa-ph-ico { color: #aab4c4; line-height: 0; flex: none; }
.wa-ph-dates { margin-left: auto; color: var(--color-muted); font-size: .88rem;
    white-space: nowrap; }

/* Project Events calendar: phase bars (bleed edge-to-edge so runs read
   as one bar across the row) + milestone diamonds */
.pgc-ph { display: block; height: 5px; margin: 0 -8px 3px; opacity: .85; }
.pgc-ph--s { margin-left: 2px; border-radius: 3px 0 0 3px; }
.pgc-ph--e { margin-right: 2px; border-radius: 0 3px 3px 0; }
.pgc-ph--s.pgc-ph--e { border-radius: 3px; }
.pgc-ph-lbl { display: block; font-size: .68rem; font-weight: 700; line-height: 1.2;
    margin: -1px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgc-ms { display: flex; align-items: center; gap: 4px; font-size: .72rem;
    font-weight: 700; color: var(--color-primary); margin: 0 0 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgc-ms svg { flex: none; }
.pgc-cell--out .pgc-ph { opacity: .35; }
.pgc-cell--out .pgc-ph-lbl, .pgc-cell--out .pgc-ms { opacity: .5; }

/* Burn chart phase/milestone labels (same family as the Budget label) */
.bh-ph-lbl { font-weight: 700; }

/* ==== Project Gantt (gt-) — static left column, day-unit timeline that
   rescales via --gpd (px per day); bars/dots position with
   left: calc(var(--gpd) * var(--o)) ==== */
.gt { display: flex; margin-top: var(--space-3); border: 1px solid var(--color-line);
      border-radius: 4px; overflow: hidden; }
.gt-left { flex: 0 0 360px; max-width: 360px; overflow: hidden; border-right: 1px solid var(--color-line);
           background: var(--color-surface); z-index: 2; }
/* Divider shadow lives on the container (gt-left clips overflow) —
   one strip at the fixed 360px column edge, matching the reports */
.gt { position: relative; }
.gt::after { content: ''; position: absolute; left: 360px; top: 0; bottom: 0;
    width: 8px; background: linear-gradient(to right, rgba(1, 0, 49, .10), transparent);
    z-index: 3; pointer-events: none; }
.gt-lhead { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px 0 12px;
    border-bottom: 1px solid var(--color-line); font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.gt-lhead span:first-child { flex: 1; }
.gt-lrow { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 12px;
    border-bottom: 1px solid var(--color-soft); }
.gt-lname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.gt-lname-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; font-size: .8125rem; color: var(--color-primary); font-weight: 600; }
.gt-lrow--l2 .gt-lname { padding-left: 16px; }
.gt-lrow--l3 .gt-lname { padding-left: 42px; }
/* Tasks & events read lighter than project/phase rows */
.gt-lrow--task .gt-lname-t, .gt-lrow--event .gt-lname-t {
    color: var(--color-muted); font-weight: 400; }
.gt-lplan { flex: 0 0 72px; text-align: right; font-size: .82rem;
    color: var(--color-muted); white-space: nowrap; }
.gt-lface { flex: 0 0 40px; display: flex; justify-content: flex-end; }
.gt-noface { display: inline-block; width: 26px; height: 26px; border-radius: 50%;
    border: 1px dashed var(--color-line); }
.gt-tog { background: none; border: 0; cursor: pointer; padding: 2px; line-height: 0;
    color: var(--color-muted); flex: none; }
.gt-tog svg { transition: transform .15s ease; transform: rotate(90deg); }
.gt-tog.is-collapsed svg { transform: rotate(0deg); }
.gt-tog--none { width: 14px; }
.gt-hidden { display: none !important; }

.gt-scroll { flex: 1; min-width: 0; overflow-x: auto; }
.gt-canvas { position: relative; min-width: 100%; }
.gt-head { height: 52px; position: relative; border-bottom: 1px solid var(--color-line);
    background: var(--color-tint); }
.gt-h1, .gt-h2 { position: relative; height: 26px; }
.gt-h1 span, .gt-h2 span { position: absolute; top: 0; height: 26px; overflow: hidden;
    left: calc(var(--gpd) * var(--o)); width: calc(var(--gpd) * var(--w));
    display: flex; align-items: center; padding-left: 8px; white-space: nowrap;
    font-size: .78rem; color: var(--color-muted); border-left: 1px solid var(--color-line); }
.gt-h1 span { font-weight: 700; color: var(--color-primary); }
.gt-body { position: relative; }
.gt-grid { position: absolute; inset: 0; pointer-events: none; }
.gt-grid span { position: absolute; top: 0; bottom: 0;
    left: calc(var(--gpd) * var(--o)); width: calc(var(--gpd) * var(--w));
    border-left: 1px solid #eef0f5; }
.gt-today { position: absolute; top: 0; bottom: 0; width: 0;
    left: calc(var(--gpd) * var(--o)); border-left: 1px solid #d23b3b;
    opacity: .55; z-index: 1; }
.gt-rrow { position: relative; height: 40px; border-bottom: 1px solid var(--color-soft); }

.gt-bar { position: absolute; top: 4px; height: 32px; border-radius: 4px;
    left: calc(var(--gpd) * var(--o)); width: calc(var(--gpd) * var(--w));
    display: flex; align-items: center; justify-content: center; }
.gt-bar-title { font-size: .75rem; font-weight: 700; color: var(--color-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px;
    position: relative; z-index: 1; }
/* Too narrow for its title: push the title out to the bar's right */
.gt-bar--tight { overflow: visible; }
.gt-bar--tight .gt-bar-title { position: absolute; left: 100%; top: 50%;
    transform: translateY(-50%); margin-left: 8px; padding: 0;
    font-size: .6875rem; font-weight: 600; color: var(--color-muted);
    overflow: visible; }
.gt-bar--project.gt-bar--tight .gt-bar-title { color: var(--color-muted); }
.gt-bar--project .gt-bar-title { color: var(--color-primary); }
.gt-bar--phase { background: #fff; border: 1px solid var(--color-line); }
.gt-bar--task { background: #e3e6ec; }
.gt-bar--loose { background: rgba(47, 128, 237, .08);
    border: 1px dashed rgba(47, 128, 237, .5); }
.gt-ext { position: absolute; top: 4px; height: 32px; box-sizing: border-box;
    left: calc(var(--gpd) * var(--o)); width: calc(var(--gpd) * var(--w));
    background: rgba(47, 128, 237, .06); border: 1px dashed rgba(47, 128, 237, .45);
    border-left: 0; border-radius: 0 4px 4px 0; }
.gt-strip { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px;
    display: flex; border-radius: 0 0 4px 4px; overflow: hidden; }
.gt-strip-done { background: #2f80ed; }
.gt-strip-over { background: #d23b3b; }
.gt-dia { position: absolute; top: 11px; line-height: 0;
    left: calc(var(--gpd) * var(--o)); transform: translateX(-50%); }
.gt-evico { position: absolute; top: 12px; line-height: 0; color: #5c6bc0;
    left: calc(var(--gpd) * var(--o)); transform: translateX(-50%); }
.gt-lbl { position: absolute; top: 0; height: 40px; display: inline-flex;
    align-items: center; left: calc(var(--gpd) * var(--o) + 8px);
    font-size: .6875rem; color: var(--color-muted); white-space: nowrap;
    text-decoration: none; }
.gt-lbl--ms { left: calc(var(--gpd) * var(--o) + 14px); }
a.gt-lbl:hover { color: var(--color-link); }
.gt-lbl--bare { left: 8px; }
.gt-dot { position: absolute; top: 50%; border-radius: 50%; background: #2f80ed;
    left: calc(var(--gpd) * (var(--o) + 0.5)); transform: translate(-50%, -50%);
    opacity: .85; cursor: pointer; z-index: 2; }
.gt-dot:hover { opacity: 1; box-shadow: 0 0 0 3px rgba(47, 128, 237, .25); }
.gt-flag { position: absolute; top: 12px; line-height: 0;
    left: calc(var(--gpd) * var(--o)); }
/* Zoom cluster: [−][View: dd][+]  [fit] — joined borders */
.gt-zoom { display: flex; align-items: stretch; }
.gt-zbtn { background: var(--btn-light); border: 1px solid var(--color-line);
    cursor: pointer; padding: 6px 10px; line-height: 0; color: var(--color-muted);
    display: inline-flex; align-items: center; }
.gt-zbtn:hover { background: var(--btn-light-hover); color: var(--color-primary); }
.gt-zbtn--out { border-radius: var(--btn-radius) 0 0 var(--btn-radius); border-right: 0; }
.gt-zbtn--in { border-radius: 0 var(--btn-radius) var(--btn-radius) 0; border-left: 0; }
.gt-viewdd { display: inline-flex; }
.gt-viewdd .dd-trigger { border-radius: 0; background: var(--btn-light);
    border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line);
    font-size: .85rem; padding: 5px 10px; height: 100%; }
.gt-zfit { margin-left: 12px; border-radius: var(--btn-radius); }
.gt-zpop { margin-left: 12px; border-radius: var(--btn-radius); }
.gt-flag--start { transform: translateX(-115%); }
.gt-flag--due { transform: translateX(30%); }

/* TE hover card: avatar | clock→pencil | activity | 0h 00m */
.gt-pop { position: fixed; z-index: 95; display: none; align-items: center; gap: 12px;
    padding: 10px 16px; background: var(--color-surface); border-radius: 6px;
    box-shadow: 0 6px 24px rgba(1, 0, 49, .25); font-size: .92rem;
    color: var(--color-primary); white-space: nowrap; }
.gt-pop.open { display: inline-flex; }
.gt-pop-ico { position: relative; width: 20px; height: 20px; line-height: 0;
    color: var(--color-muted); display: inline-flex; align-items: center;
    justify-content: center; }
.gt-pop-pencil { position: absolute; inset: -4px; display: none; background: none;
    border: 0; cursor: pointer; color: var(--color-link); align-items: center;
    justify-content: center; }
.gt-pop:hover .gt-pop-clock { visibility: hidden; }
.gt-pop:hover .gt-pop-pencil { display: inline-flex; }
.gt-pop-act { font-weight: 600; }
.gt-pop-time { color: var(--color-muted); }

/* Gantt popup: full-window dialog (20px gap) hosting the SAME chart
   node; the zoom cluster relocates into the modal bar. */
.gt-modal { width: calc(100vw - 40px); max-width: calc(100vw - 40px);
    height: calc(100vh - 40px); max-height: calc(100vh - 40px); }
.gt-modal[open] { display: flex; flex-direction: column; }
.gt-modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.gt-modal-body .gt { margin-top: 0; }
.gt-zoom--modal { margin-left: auto; margin-right: 14px; }
.gt-zoom--modal .gt-zpop { display: none; }
.gt-modal .modal-bar { flex: none; }

/* Detail-page Files tables: type icon before the filename (same
   file_icon() set as the top-level Files section) */
.fl-inline { display: inline-flex; align-items: center; gap: 7px; }
.fl-inline .fl-ico { flex: none; }

/* Gantt: retainer billing-period badges (row 0) + guide lines */
.gt-per { position: absolute; top: 50%; left: calc(var(--gpd) * var(--o));
    transform: translate(-50%, -50%);
    width: 26px; height: 26px; border-radius: 50%; background: #d5efeb;
    color: #0f8d81; display: inline-flex; align-items: center;
    justify-content: center; z-index: 2; cursor: default; }
.gt-perline { position: absolute; top: 0; bottom: 0; width: 0;
    left: calc(var(--gpd) * var(--o)); border-left: 1px solid #57c7b8;
    opacity: .3; }
.gt-lrow--periods .gt-lname-t { color: var(--color-muted); font-weight: 600;
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; }

/* ============================================================
   Help wiki (help.php, hp-)
   ============================================================ */
.hp-layout { display: flex; gap: var(--space-2); align-items: flex-start; }
.hp-side { flex: 0 0 264px; max-width: 264px; position: sticky; top: 76px;
    max-height: calc(100vh - 100px); overflow-y: auto; }
.hp-filter { width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem;
    padding: 6px 10px; border: 1px solid var(--color-line); border-radius: 4px;
    margin-bottom: 12px; }
.hp-filter:focus { outline: none; border-color: var(--color-primary); }
.hp-gname { font-weight: 700; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--color-muted); margin: 14px 0 4px; }
.hp-group:first-of-type .hp-gname { margin-top: 0; }
.hp-link { display: block; padding: 5px 8px; border-radius: 4px; font-size: .9rem;
    font-weight: 600; color: var(--color-slate); text-decoration: none; }
.hp-link:hover { background: var(--color-mist); text-decoration: none; }
.hp-link.is-active { background: var(--color-soft); color: var(--color-primary); }
.hp-main { flex: 1; min-width: 0; padding: 28px 34px 22px; }
.hp-crumb { text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    font-size: .72rem; }
.hp-title { margin: 2px 0 14px; font-size: 1.5rem; }
.hp-lead { font-size: .98rem; line-height: 1.65; color: var(--color-slate); }
.hp-h2 { font-size: 1.08rem; margin: 26px 0 10px; }
.hp-main p, .hp-main li { line-height: 1.6; font-size: .92rem; }
.hp-steps { margin: 8px 0 8px 4px; padding-left: 20px; }
.hp-steps > li { margin: 7px 0; }
.hp-steps ul { margin-top: 6px; }
.hp-list { margin: 8px 0; padding-left: 20px; }
.hp-list > li { margin: 6px 0; }
.hp-tip { margin: 18px 0 6px; padding: 12px 16px; border-radius: 6px;
    background: var(--color-soft); border-left: 3px solid var(--color-primary);
    font-size: .9rem; line-height: 1.6; }
.hp-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.hp-table th, .hp-table td { text-align: left; vertical-align: top;
    padding: 9px 12px; border-bottom: 1px solid var(--color-soft);
    font-size: .9rem; line-height: 1.55; }
.hp-table th { width: 190px; font-weight: 700; color: var(--color-slate);
    white-space: nowrap; }
.hp-table tr:last-child th, .hp-table tr:last-child td { border-bottom: 0; }
.hp-main code { background: var(--color-mist); border-radius: 3px;
    padding: 1px 5px; font-size: .85em; }
.hp-shot { margin: 14px 0; }
.hp-shot img { max-width: 100%; border: 1px solid var(--color-line);
    border-radius: 6px; }
.hp-shot figcaption { margin-top: 5px; font-size: .8rem; color: var(--color-muted); }
.hp-shot-slot { margin: 14px 0; padding: 14px 16px; border: 1.5px dashed
    var(--color-line); border-radius: 6px; color: var(--color-muted);
    font-size: .82rem; }
.hp-pager { display: flex; gap: 16px; margin-top: 34px; padding-top: 14px;
    border-top: 1px solid var(--color-soft); }
.hp-pglink { font-weight: 600; font-size: .88rem; }
@media (max-width: 900px) {
    .hp-layout { flex-direction: column; }
    .hp-side { position: static; flex-basis: auto; max-width: none; width: 100%;
        max-height: none; }
}

/* ============================================================
   Status Table (projects_status.php, pw-) + Status Log
   ============================================================ */
.pw-head { display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin: 18px 0 10px; flex-wrap: wrap; }
.pw-title { margin: 0; font-size: 1.15rem; }
.pw-now { font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #1e9e6a; background: #e5f6ee;
    padding: 2px 8px; border-radius: 3px; vertical-align: 2px; margin-left: 8px; }
.pw-nav { display: flex; align-items: center; gap: 14px; font-weight: 600;
    font-size: .9rem; }
.pw-nav .pw-dis { color: var(--color-muted); pointer-events: none; }
.pw-date { font: inherit; font-size: .85rem; padding: 3px 8px;
    border: 1px solid var(--color-line); border-radius: 4px; }
.pw-wrap { overflow-x: auto; }
.pw-table { width: 100%; min-width: 1080px; border-collapse: collapse; }
.pw-table th { text-align: left; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-muted); padding: 8px 10px;
    border-bottom: 2px solid var(--color-line); white-space: nowrap; }
.pw-table td { padding: 5px 10px; border-bottom: 1px solid var(--color-line);
    border-right: 1px solid var(--color-soft); vertical-align: top; font-size: .85rem; }
/* The textarea supplies its own padding — a padded cell would double it
   and misalign the text against the other columns. */
.pw-table td.pw-notecell { padding: 1px 2px; }
.pw-table td:last-child, .pw-table th:last-child { border-right: 0; }
.pw-table th { border-right: 1px solid var(--color-soft); }
/* Uncategorized section: collapsed by default — header click toggles */
tbody.pw-collapsed tr:not(.pw-sec) { display: none; }
.pw-sec--toggle td { cursor: pointer; user-select: none; }
.pw-caret { background: none; border: 0; cursor: pointer; color: inherit;
    padding: 0 7px 0 0; line-height: 0; vertical-align: -1px; }
.pw-caret svg { transition: transform .15s ease; }
tbody:not(.pw-collapsed) .pw-caret svg { transform: rotate(90deg); }
.pw-sec-n { font-weight: 400; color: var(--color-muted); margin-left: 4px; }
.pw-sec td { background: #e4e8ef; font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--color-slate);
    padding: 7px 10px; border-right: 0; border-bottom-color: var(--color-line); }
.pw-clientcell a { font-weight: 600; display: block; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.pw-proj { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.pw-proj .ct-type { flex: none; margin-top: 1px; }
.pw-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 200px; display: block; min-width: 0; }
.pw-money { white-space: nowrap; }
.pw-used { font-weight: 700; }
.pw-bar { display: block; height: 5px; border-radius: 3px; background: var(--color-soft);
    margin-top: 5px; max-width: 150px; overflow: hidden; }
.pw-bar-in { display: block; height: 100%; background: #2f80ed; border-radius: 3px; }
.pw-bar--over { background: var(--color-alert); }
.pw-dates { white-space: nowrap; }
.pw-late { color: var(--color-alert); font-weight: 700; }
.pw-input { width: 100%; box-sizing: border-box; font: inherit; font-size: .85rem;
    line-height: 1.45; border: 1px solid transparent; border-radius: 4px;
    background: transparent; padding: 5px 8px; resize: none; overflow: hidden;
    min-height: 26px; }
.pw-input:hover { border-color: var(--color-line); }
.pw-input:focus { outline: none; border-color: var(--color-primary); background: #fff; }
.pw-wc { text-align: center; }
.pw-wc input { width: 15px; height: 15px; accent-color: #d99a00; cursor: pointer; }
.pw-row--client td { background: #fdf6e3; }
.pw-row--client .pw-input:focus { background: #fff; }
.pw-x { text-align: center; }
.pw-hide { border: 0; background: none; color: var(--color-muted); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 2px 5px; border-radius: 4px;
    visibility: hidden; }
.pw-row:hover .pw-hide { visibility: visible; }
.pw-hide:hover { color: var(--color-alert); background: var(--color-soft); }
.pw-row .pw-restore { display: none; }
.pw-row--hidden td { opacity: .55; }
.pw-row--hidden .pw-hide { display: none; }
.pw-row--hidden .pw-restore { display: inline-block; visibility: visible; }
.pw-row.pw-saved td { background: #eef7f1; transition: background .5s; }
.pw-foot { display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 10px 2px 2px; }
.pw-showhidden { border: 0; background: none; cursor: pointer; font: inherit;
    font-size: .85rem; font-weight: 600; }

/* Status Log (project.php pane) — the Status Table minus the client /
   project / with-client columns; weeks descend as rows. */
.pw-table--log { min-width: 760px; }
.pw-weekcell { font-weight: 700; white-space: nowrap; }
.pw-weekcell .muted { font-weight: 400; }
.pw-pill-static { cursor: default; pointer-events: none; }

/* ---------------------------------------------------------------------------
   Leads (leads.php + repurposed pipeline.php board) — month-grouped
   tracker table with outcome tints and per-month subtotal rows. */
.notice { border-radius: 4px; padding: 9px 14px; font-size: .85rem; margin: 12px 0 0; }
.notice--warn { background: #fdf3e2; border: 1px solid #e8c98a; color: #7a5a17; }
.leads-table td { white-space: nowrap; }
/* table.data tbody td ("rows breathe", 13px) outspecifies plain classes
   — match it to tighten the tracker rows. Rows center vertically, and
   the row border steps up to the hairline tone (--color-page was
   indistinguishable from the ghosted tint). */
table.data.leads-table tbody td {
    padding-top: 3px; padding-bottom: 3px;
    vertical-align: middle;
    border-bottom-color: var(--color-line);
}
/* The rep avatar sets the row height — trim its cell to the bone. */
table.data.leads-table tbody td.lead-rep-td { padding-top: 1px; padding-bottom: 1px; }
.leads-table .lead-row td .muted.small { display: block; white-space: nowrap; }
.lead-month td {
    background: var(--color-primary); color: #fff; font-weight: 700;
    font-size: .82rem; letter-spacing: .02em; padding: 5px 12px;
}
.lead-month td .muted { color: rgba(255, 255, 255, .65); }
.lead-subtotal td { background: #fff; color: #111; font-weight: 700; font-size: .82rem; }
/* The fat white border reads as a margin before the next month bar.
   NB: table.data th/td's border rule outspecifies .lead-subtotal td. */
table.data.leads-table tr.lead-subtotal td { border-bottom: 12px solid #fff; }
/* Won rows go solid — white text/icons, bold — while the dead outcomes
   (KO'd / Lost / Ghosted) keep their faint tints but strike through and
   gray out, so wins pop and dead leads recede at a glance. */
tr.lead--won td { background: #5cb85c; color: #fff; font-weight: 700; }
tr.lead--won td a, tr.lead--won td .row-title { color: #fff; }
tr.lead--won td .muted, tr.lead--won td .muted.small { color: rgba(255, 255, 255, .8); }
tr.lead--won .ind-icon, tr.lead--won:hover .ind-icon { color: #fff; }
tr.lead--won .status-pill { background: #fff !important; color: #3d8b3d !important; }
tr.lead--won .lp-dd .lp-trigger:hover { background: rgba(255, 255, 255, .18); }
tr.lead--won .lp-dd .lp-trigger .dd-caret { color: rgba(255, 255, 255, .8); }
tr.lead--won .lr-none { border-color: rgba(255, 255, 255, .6); color: #fff; }
tr.lead--lost td { background: rgba(229, 72, 77, .09); }
tr.lead--koed td { background: rgba(224, 138, 0, .09); }
tr.lead--ghosted td, tr.lead--referred_out td { background: rgba(120, 120, 130, .08); }
tr.lead--koed td, tr.lead--lost td, tr.lead--ghosted td { text-decoration: line-through; }
tr.lead--koed td, tr.lead--koed td a, tr.lead--koed td .row-title,
tr.lead--koed td .muted, tr.lead--koed td .muted.small { color: #8a5a00; }
tr.lead--lost td, tr.lead--lost td a, tr.lead--lost td .row-title,
tr.lead--lost td .muted, tr.lead--lost td .muted.small { color: #a03338; }
tr.lead--ghosted td, tr.lead--ghosted td a, tr.lead--ghosted td .row-title,
tr.lead--ghosted td .muted, tr.lead--ghosted td .muted.small { color: #63676d; }
tr.lead--referred_out td { color: var(--color-muted); }
.lead-row .status-pill { font-size: .72rem; padding: 2px 8px; }

/* Industry icon column: stroke glyph per client category, name in the
   tooltip. Rows warm the icon to navy on hover. */
.lead-ind-th, .lead-ind-td { width: 34px; text-align: center; }
.lead-ind-th span { color: var(--color-muted); line-height: 0; display: inline-flex; }
.ind-icon { color: var(--color-muted); line-height: 0; display: inline-flex; cursor: help; }
.lead-row:hover .ind-icon { color: var(--color-primary); }

/* In-row rep picker: bare avatar trigger + searchable user menu. */
.lead-rep-td { text-align: center; }
.lr-dd .lr-trigger {
    border: none; background: none; padding: 2px; cursor: pointer;
    border-radius: 50%; line-height: 0;
}
.lr-dd .lr-trigger:hover { box-shadow: 0 0 0 2px var(--color-accent); }
.lr-none {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px dashed var(--color-line); color: var(--color-muted);
    font-size: .8rem; font-weight: 700;
}
.lr-opt {
    display: flex; align-items: center; gap: 8px; width: 100%;
    border: none; background: none; text-align: left; cursor: pointer;
    padding: 6px 10px; border-radius: 3px; font-size: .85rem;
    font-family: var(--font-body); color: var(--color-text); white-space: nowrap;
}
.lr-opt:hover { background: var(--color-soft); }
.lr-dd .dd-search { margin: 4px 6px 6px; width: calc(100% - 12px); }

/* In-row probability picker: 5% steps. Trigger reads as plain text. */
.lp-dd .lp-trigger {
    border: none; background: none; padding: 2px 4px; cursor: pointer;
    font-family: var(--font-body); font-size: inherit; color: inherit;
    font-variant-numeric: tabular-nums; border-radius: 3px;
    display: inline-flex; align-items: center; gap: 4px;
}
.lp-dd .lp-trigger:hover { background: var(--color-soft); }
.lp-dd .lp-trigger .dd-caret { color: var(--color-muted); }
.lp-dd .dd-menu { min-width: 90px; }
.lp-opt {
    display: block; width: 100%; border: none; background: none;
    text-align: right; cursor: pointer; padding: 5px 14px;
    border-radius: 3px; font-size: .85rem; font-family: var(--font-body);
    color: var(--color-text); font-variant-numeric: tabular-nums;
}
.lp-opt:hover { background: var(--color-soft); }
.lp-opt--cur { font-weight: 700; color: var(--color-primary); }
.hw-plmore { display: block; text-align: center; font-size: .78rem; color: var(--color-muted); padding: 6px 0 2px; }

/* Success report breakdown tables (Source / Industry / Wins by Month) —
   the tracker's summary boxes. Rows shade green by share of wins. */
.ls-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; align-items: start; }
@media (max-width: 1200px) { .ls-sec { grid-template-columns: 1fr; } }
.ls-chart { display: flex; justify-content: center; padding-top: 26px; }
.ls-mini-title { font-size: .92rem; color: var(--color-primary); margin: 0 0 8px; }
table.data.ls-table { width: 100%; }
table.data.ls-table tbody td { padding-top: 4px; padding-bottom: 4px; font-size: .82rem; }
table.data.ls-table thead th { font-size: .74rem; }
.ls-table .ind-icon { vertical-align: -3px; }
.ls-table tr.ls-total td { font-weight: 700; border-top: 2px solid var(--color-line); }

/* Trend report (Sales): section titles, wide year tables, filled line
   charts with the shared chart legends. */
.lt-sec { font-size: .95rem; color: var(--color-primary); margin: 30px 0 10px; }
.lt-sec:first-child { margin-top: 4px; }
table.data.lt-table td, table.data.lt-table th { white-space: nowrap; }
.lt-chartwrap { margin-top: 14px; }
.lt-legend { justify-content: center; margin-top: 2px; }
table.data.lt-table tbody tr:hover td { background: var(--color-soft); }
.dw-cpop-line b { margin-left: auto; }
.lead-month { scroll-margin-top: 84px; }   /* month anchors clear the sticky topbar */

/* Lead modal Closing section (lead_form.php): client link/convert +
   split-off quote list. */
.ldc { border-top: 1px solid var(--color-line); margin-top: 16px; padding-top: 12px; }
.ldc-title { font-size: .85rem; color: var(--color-primary); margin: 0 0 8px; }
.ldc-row { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin-bottom: 6px; flex-wrap: wrap; }
.ldc-pick { position: relative; }
.ldc-pick input { width: 100%; max-width: 340px; }
/* The two closing paths, side by side at 50% */
/* stretch (not start): both gray boxes fill the row height */
.ldc-opts2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4); align-items: stretch; margin-bottom: 8px; }
@media (max-width: 900px) { .ldc-opts2 { grid-template-columns: 1fr; } }
.ldc-opt-box { background: var(--color-soft); border-radius: 4px; padding: 12px 14px; }
.ldc-opt-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-muted); margin-bottom: 8px; }
.ldc-opts { max-height: 230px; overflow-y: auto; }
.ldc-opt, .ldc-qopt { display: block; width: 100%; text-align: left; background: none;
    border: none; padding: 7px 10px; font-family: var(--font-body); font-size: .88rem;
    color: var(--color-text); cursor: pointer; border-radius: 3px; }
.ldc-opt:hover, .ldc-qopt:hover { background: var(--color-soft); }
.ldc-attachq { margin: 8px 0 0 10px; display: inline-block; vertical-align: middle; min-width: 240px; }
.ldc-convert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--color-soft); border-radius: 4px; padding: 8px 12px; margin-bottom: 6px; font-size: .85rem; }
.ldc-quotes { margin-top: 8px; }
.ldc-quote { display: flex; align-items: center; gap: 10px; font-size: .85rem; padding: 3px 0; }
.ldc-qtotal { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.ldc-newquote { margin-top: 8px; display: inline-block; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Project Tables ("Tables", migration 71): the #wa-tables work-area
   pane on project.php — tabs > labeled tables > custom columns.
   Cells edit via the floating .tbl-pop editor. */
/* Layout: static table-list sidebar (toggleable) + the grids. JS shows
   ONE table at a time by default ("All tables" shows the old view).
   The toggle is a control tab sitting off the panel's top right. */
.tbl-layout { display: flex; gap: 0; align-items: flex-start; position: relative;
    padding-top: 8px; }   /* the pull tab overhangs from this band */
/* Pull tab OVERHANGING off the panel's divider — square, no top border,
   exactly as tall as the band so its bottom-left corner meets the
   divider's top. Floats over the layout, never pushing the grid. */
.tbl-side-toggle { position: absolute; top: 0; left: 195px; width: 38px; height: 30px;
    display: flex; align-items: center; justify-content: center; gap: 3px;
    border: 1px solid var(--color-line); border-left: none; border-top: none;
    border-radius: 0; background: var(--color-surface); color: var(--color-muted); cursor: pointer; }
.tbl-side-toggle:hover { color: var(--color-primary); background: var(--color-mist); }
.tbl-layout.tbl-side-closed .tbl-side-toggle { left: 0; border-left: 1px solid var(--color-line); }
.tbl-layout:not(.tbl-side-closed) .tbl-tgl-r { display: none; }
.tbl-layout.tbl-side-closed .tbl-tgl-l { display: none; }

.tbl-side { position: sticky; top: 12px; flex: 0 0 195px; max-height: 82vh;
    display: flex; flex-direction: column; gap: 8px; background: var(--color-surface);
    padding: 0 14px 0 0; }
.tbl-side-addbtn { justify-content: center; }
.tbl-side-search { width: 100%; }
.tbl-side-list { overflow-y: auto; min-height: 0; }
.tbl-side-item { display: flex; align-items: center; gap: 4px; padding: 7px 6px 7px 9px;
    border-radius: 4px; cursor: pointer; font-size: .86rem; color: var(--color-primary); }
.tbl-side-item:hover { background: var(--color-mist); }
.tbl-side-item.active { background: var(--color-soft); font-weight: 700; }
.tbl-side-item[data-table="0"] { border-bottom: 1px solid var(--color-line);
    border-radius: 4px 4px 0 0; margin-bottom: 2px; }
.tbl-side-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-side-menu { border: none; background: none; cursor: pointer; color: var(--color-muted);
    font-size: .9rem; line-height: 1; padding: 1px 4px; border-radius: 3px; visibility: hidden; }
.tbl-side-drag { color: var(--color-muted); cursor: grab; font-size: .68rem; visibility: hidden; }
.tbl-side-item:hover .tbl-side-menu, .tbl-side-item:hover .tbl-side-drag { visibility: visible; }
.tbl-side-menu:hover { color: var(--color-primary); background: var(--color-soft); }
.tbl-layout.tbl-side-closed .tbl-side { display: none; }
.tbl-sidemenu { position: absolute; z-index: 96; display: none; min-width: 150px;
    background: #fff; border: var(--border-subtle); border-radius: 5px;
    box-shadow: 0 6px 24px rgba(1, 0, 49, .18); padding: 4px; }
.tbl-sidemenu.open { display: block; }

.tbl-main { flex: 1; min-width: 0; padding-left: 10px; }
.tbl-layout:not(.tbl-side-closed) .tbl-main { border-left: 1px solid var(--color-line); }

/* Active pt-tab caret menu + inline tab link */
.tbl-tabwrap { display: inline-flex; align-items: center; gap: 5px; }
.tbl-tabwrap > a { color: inherit; text-decoration: none; font: inherit; }
.tbl-tabcaret { border: none; background: none; cursor: pointer; color: var(--color-muted);
    padding: 2px 3px; display: inline-flex; align-items: center; }
.tbl-tabcaret:hover { color: var(--color-primary); }

/* Every wrap keeps its top margin — the first one must clear the
   30px pull tab overhanging the 8px layout band. */
.tbl-tablewrap { margin-top: 22px; }

/* Table full-view dialog (borrows the Gantt full-modal sizing) */
.tbl-full-modal .tbl-tablewrap { margin-top: 0; }
.tbl-full-modal .tbl-tablehead { padding-top: 0; }
.tbl-full-modal .tbl-popbtn { display: none; }

/* ---------------------------------------------------------------------------
   Client portal (portal.php, migration 72) + staff-side feedback UI.
   pfb-* pieces are shared: the portal renders them server-side, the
   staff grid's thread pop (.tbl-fbpop) builds them in JS. */
.tbl-eye { margin-left: 5px; color: var(--color-muted); vertical-align: -2px; }
.subnav-tab.active .tbl-eye { color: var(--color-accent); }
.tbl-fbh { white-space: nowrap; }
.tbl-fbcell { white-space: nowrap; }
.tbl-fb { border: none; background: none; cursor: pointer; padding: 2px 4px;
    border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; }
.tbl-fb:hover { background: var(--color-soft); }
.tbl-fbcount { font-variant-numeric: tabular-nums; }
.tbl-fbpop { position: absolute; z-index: 96; display: none; width: 340px;
    background: #fff; border: var(--border-subtle); border-radius: 5px;
    box-shadow: 0 6px 24px rgba(1, 0, 49, .18); padding: 10px; }
.tbl-fbpop.open { display: block; }
.tbl-fbpop-list { max-height: 260px; overflow-y: auto; }

.pfb-badge { display: inline-block; border-radius: 10px; padding: 1px 9px;
    font-size: .76rem; font-weight: 600; white-space: nowrap; }
.pfb-badge--ok { background: #d1f7c4; color: #0b1d05; }
.pfb-badge--chg { background: #ffeab6; color: #3b2501; }
/* The client's main action — pinned to the right edge while the row
   scrolls, with a mirrored gradient divider. */
.pfb-cell, .pfb-th { position: sticky; right: 0; z-index: 2; background: var(--color-surface); }
table.data.portal-grid thead .pfb-th { background: var(--color-soft); }
.pfb-cell::before, .pfb-th::before { content: ''; position: absolute; top: -1px; bottom: -1px;
    left: -8px; width: 8px; background: linear-gradient(to left, rgba(1, 0, 49, .10), transparent);
    pointer-events: none; }
.pfb-cell { min-width: 230px; }
.pfb-th { white-space: nowrap; }
.pfb-actions { display: flex; gap: 6px; margin-top: 6px; }
.pfb-btn { font-size: .74rem; padding: 3px 9px; }
.pfb-btn--ok:hover { border-color: #2b8a3e; color: #2b8a3e; }
.pfb-thread { margin-top: 8px; font-size: .82rem; }
/* Disclosure caret AFTER the label, not the default leading triangle */
.pfb-thread summary { cursor: pointer; color: var(--color-muted); list-style: none;
    display: inline-flex; align-items: center; gap: 6px; }
.pfb-thread summary::-webkit-details-marker { display: none; }
.pfb-thread summary::after { content: '\25B8'; font-size: .7rem; }
.pfb-thread[open] summary::after { content: '\25BE'; }
.pfb-thread[open] summary { color: var(--color-primary); }
.pfb-comments { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px;
    max-height: 240px; overflow-y: auto; }
.pfb-comment { background: var(--color-soft); border-radius: 6px; padding: 6px 9px; }
.pfb-comment--staff { background: var(--color-mist); }
.pfb-comment-meta { font-size: .72rem; color: var(--color-muted); }
.pfb-comment-body { white-space: pre-line; margin-top: 2px; }
.pfb-reply { display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
    align-items: stretch; }
.pfb-reply textarea { width: 100%; font-size: .82rem; }
.pfb-reply .btn { align-self: flex-end; }

.portal-body { background: var(--color-page); }
.portal-top { display: flex; align-items: center; gap: 16px; padding: 12px 26px;
    background: var(--color-primary); color: #fff; }
.portal-top .spacer { flex: 1; }
.portal-top .muted { color: rgba(255, 255, 255, .65); }
.portal-logo { height: 22px; width: auto;
    filter: brightness(0) invert(1); }   /* the source SVG is navy */
.portal-top-title { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem;
    color: rgba(255, 255, 255, .75); }
.portal-projects { display: flex; gap: 12px; }
.portal-proj { color: rgba(255, 255, 255, .75); text-decoration: none; font-size: .88rem; }
.portal-proj.active, .portal-proj:hover { color: #fff; }
.portal-page { max-width: 1500px; margin: 22px auto; padding: 0 24px; }
.portal-page .panel > .subnav--gapped { margin-bottom: 0; }
.portal-list { margin: 0; padding-left: 20px; }
.portal-list li { margin: 6px 0; }
.portal-tablewrap:first-of-type { margin-top: 18px; }
.portal-grid .ptc-ro { min-width: 110px; max-width: 340px; text-align: left; }
.portal-grid .ptc-ro .ptc-in { white-space: pre-wrap; font-size: .84rem; }
/* The portal grid has no drag-handle column: freeze its FIRST column
   only. The extra .tbl-grid class outguns the staff grid's frozen-pair
   rules, which sit LATER in this file. */
table.data.tbl-grid.portal-grid th:first-child, table.data.tbl-grid.portal-grid tbody td:first-child {
    left: 0; min-width: 170px; }
table.data.tbl-grid.portal-grid th:nth-child(2), table.data.tbl-grid.portal-grid tbody td:nth-child(2) {
    position: static; min-width: 110px; background: transparent; }
table.data.tbl-grid.portal-grid th:first-child::after, table.data.tbl-grid.portal-grid tbody td:first-child::after {
    content: ''; position: absolute; top: -1px; bottom: -1px; right: -8px; width: 8px;
    background: linear-gradient(to right, rgba(1, 0, 49, .10), transparent); pointer-events: none; }
table.data.tbl-grid.portal-grid th:nth-child(2)::after, table.data.tbl-grid.portal-grid tbody td:nth-child(2)::after {
    display: none; }
table.data.tbl-grid.portal-grid thead th:nth-child(2) { background: var(--color-soft); }
.tbl-tablehead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding-top: 10px; }
.tbl-label { flex: 1; min-width: 120px; font-weight: 700; font-size: .95rem;
    color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid transparent; background: none; padding: 3px 6px; border-radius: 3px; }
.tbl-label:hover, .tbl-label:focus { border-color: var(--color-line); background: #fff; }
.tbl-labelro { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem;
    color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-rowcount { white-space: nowrap; }
/* Sticky columns need per-cell borders that travel with the cell —
   collapsed borders paint in the table layer and stay behind on
   scroll, leaving a 1px reveal between the frozen columns. */
table.data.tbl-grid { border-collapse: separate; border-spacing: 0; }
table.data.tbl-grid tbody td { padding: 5px 8px; vertical-align: top; border-bottom-color: var(--color-line); }
table.data.tbl-grid th { text-align: left; white-space: nowrap; }
/* Vertical cell separators */
table.data.tbl-grid th, table.data.tbl-grid tbody td { border-right: 1px solid var(--color-line); }
table.data.tbl-grid th:last-child, table.data.tbl-grid tbody td:last-child { border-right: none; }
/* Frozen first column (drag handle + first data column) with the same
   flush gradient divider the report sticky columns use (.ut-table). */
table.data.tbl-grid th:first-child, table.data.tbl-grid tbody td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--color-surface); }
table.data.tbl-grid th:nth-child(2), table.data.tbl-grid tbody td:nth-child(2) {
    position: sticky; left: 18px; z-index: 2; background: var(--color-surface); min-width: 170px; }
table.data.tbl-grid thead th:first-child, table.data.tbl-grid thead th:nth-child(2) {
    background: var(--color-soft); z-index: 3; }
table.data.tbl-grid th:nth-child(2)::after, table.data.tbl-grid tbody td:nth-child(2)::after {
    content: ''; position: absolute; top: -1px; bottom: -1px; right: -8px; width: 8px;
    background: linear-gradient(to right, rgba(1, 0, 49, .10), transparent); pointer-events: none; }
.tbl-grid .ptc { cursor: pointer; min-width: 110px; max-width: 340px; text-align: left; }
/* Whole-row hover (must also repaint the frozen columns' solid bg) */
table.data.tbl-grid tbody tr:hover td { background: var(--color-mist); }
.tbl-grid .ptc-in { white-space: pre-wrap; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 6; -webkit-box-orient: vertical; font-size: .84rem; }
.tbl-grid .ptc--date .ptc-in, .tbl-grid .ptc--select .ptc-in { white-space: nowrap; }
.tbl-pill { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: .76rem;
    font-weight: 600; margin: 1px 2px 1px 0; white-space: nowrap; }
.tbl-dragh { width: 18px; min-width: 18px; color: var(--color-muted); cursor: grab; font-size: .7rem; text-align: center; }
table.data.tbl-grid .tbl-dragh { padding-left: 4px; padding-right: 4px; }
/* box-sizing is border-box: .tbl-dragh's 18px IS its full width, so the
   second sticky column pins at left:18px — keep the two in sync. */
.tbl-rowx { width: 26px; text-align: center; }
.tbl-delrow, .tbl-addfile, .tbl-file-x, .tbl-optx {
    border: none; background: none; cursor: pointer; color: var(--color-muted);
    font-size: .9rem; padding: 1px 5px; border-radius: 3px; }
.tbl-delrow:hover, .tbl-file-x:hover { color: #c92a2a; background: var(--color-soft); }
.tbl-addfile { border: 1px dashed var(--color-line); font-size: .8rem; margin-top: 3px; }
.tbl-addfile:hover { color: var(--color-primary); border-color: var(--color-primary); }
.tbl-addrow { margin-top: 8px; }
.tbl-dragging { opacity: .4; }
.tbl-file { display: flex; align-items: center; gap: 4px; margin: 2px 0; }
.tbl-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 5px;
    border: 1px solid var(--color-line); cursor: zoom-in; }
.tbl-thumb:hover { box-shadow: 0 2px 10px rgba(1, 0, 49, .22); }
.tbl-filelink { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; max-width: 200px; white-space: nowrap; }
.tbl-addtab { border: none; background: none; cursor: pointer; }

/* Media lightbox overlay */
.tbl-lightbox { position: fixed; inset: 0; z-index: 210; display: none; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; padding: 34px;
    background: rgba(1, 0, 49, .82); cursor: zoom-out; }
.tbl-lightbox.open { display: flex; }
.tbl-lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 6px;
    background: #fff; box-shadow: 0 12px 44px rgba(0, 0, 0, .5); cursor: default; }
.tbl-lightbox-cap { display: flex; align-items: center; gap: 16px; color: #fff; font-size: .86rem; }
.tbl-lightbox-cap a { color: #fff; }

/* Upload modal dropzone */
.tbl-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 2px dashed var(--color-line); border-radius: 8px; padding: 38px 24px;
    text-align: center; cursor: pointer; color: var(--color-muted); min-width: 360px;
    max-width: 100%; overflow-wrap: anywhere; }
.tbl-dropzone:hover, .tbl-dropzone--over { border-color: var(--color-accent);
    color: var(--color-primary); background: var(--color-mist); }

.tbl-pop { position: absolute; z-index: 95; display: none; width: 340px;
    background: #fff; border: var(--border-subtle); border-radius: 5px;
    box-shadow: 0 6px 24px rgba(1, 0, 49, .18); padding: 10px; }
.tbl-pop.open { display: block; }
.tbl-pop textarea, .tbl-pop input[type="date"] { width: 100%; }
.tbl-pop textarea { min-height: 130px; font-size: .85rem; }
.tbl-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.tbl-pop-opts { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

.tbl-colman { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.tbl-colrow { border: 1px solid var(--color-line); border-radius: 5px; padding: 6px 10px; }
.tbl-colhead { display: flex; align-items: center; gap: 10px; }
.tbl-coldragh { color: var(--color-muted); cursor: grab; font-size: .68rem; }
.tbl-colhead .spacer { flex: 1; }   /* pushes ×/Save/caret to the right edge */
.tbl-coltype { font-size: .74rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
/* Collapsed by default: just drag handle · name · type · caret. Expand
   to reach Multi, options, Delete, and Save. */
.tbl-colrow:not(.open) .tbl-colmulti,
.tbl-colrow:not(.open) .tbl-coldel,
.tbl-colrow:not(.open):not(.dirty) .tbl-colsave,
.tbl-colrow:not(.open) .tbl-opts { display: none; }   /* an edited (dirty) row shows Save even collapsed */
.tbl-colcaret svg { transition: transform .12s ease; }
.tbl-colrow.open .tbl-colcaret svg { transform: rotate(180deg); }
.tbl-opts { margin-top: 8px; display: flex; flex-direction: column; gap: 5px;
    padding-left: 19px; }   /* lines the options up with the title field */
.tbl-optrow { display: flex; align-items: center; gap: 8px; }
.tbl-optadd { align-self: flex-start; }
.tbl-colnew { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    border-top: 1px solid var(--color-line); padding-top: 12px; }
/* .check-label's display rule would beat the [hidden] UA style */
.tbl-newmulti[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Ongoing Accounts report (og-, ?r=ongoing-accounts, migration 76) —
   the Annual/Monthly Accounts sheet: Overview grid + year tabs. */
.og-wrap { overflow-x: auto; }
/* Overview: capped scroller so BOTH axes stick — header row on top,
   client column on the left (the rv-table pattern). */
.og-wrap--ov { max-height: calc(100vh - 250px); overflow: auto; }
.og-wrap--ov thead th { position: sticky; top: 0; z-index: 3;
    /* collapsed borders don't travel with sticky cells — the accent
       underline rides an inset shadow instead */
    border-bottom: none; box-shadow: inset 0 -2px 0 0 var(--color-accent); }
.og-wrap--ov thead .og-name { z-index: 4; }
.og-table th, .og-table tbody td { text-align: right; white-space: nowrap; }
.og-table .og-name { position: sticky; left: 0; z-index: 2; background: var(--color-surface);
    text-align: left; min-width: 220px; font-weight: 600; }
.og-table tbody .og-name { padding-right: 12px; }
.og-table tbody .og-name .og-tenchip { float: right; margin-left: 8px; }
.og-table thead .og-name { background: var(--color-soft); }
.og-table .og-name::after { content: ''; position: absolute; top: -1px; bottom: -1px;
    right: -8px; width: 8px; background: linear-gradient(to right, rgba(1, 0, 49, .10), transparent);
    pointer-events: none; }
table.data.og-table tbody td { padding-top: 6px; padding-bottom: 6px;
    font-size: .85rem; }   /* outguns table.data's 13px/.9rem */
tr:not(.og-total) > td.og-bcell { background: var(--color-soft); }
.og-total td { font-weight: 700; background: var(--color-primary); color: #fff; }
.og-total td.og-good { background: #d1f7c4; color: #0b3d1d; }
.og-total td.og-warn { background: #ffeab6; color: #5c4300; }
.og-total td.og-bad { background: #ffdce5; color: #7a1330; }
.og-total .og-name { background: var(--color-primary); color: #fff; }
.og-section td { background: var(--color-soft); font-weight: 700; text-align: left;
    text-transform: uppercase; letter-spacing: .05em; font-size: .78rem;
    color: var(--color-primary); position: sticky; left: 0; }
.og-tenchip { display: inline-block; min-width: 22px; padding: 1px 5px; border-radius: 10px;
    font-size: .74rem; font-weight: 700; text-align: center; }
/* Tenure bands (Tim): 1 = gray, 2–3 = yellow, 4+ = green */
.og-ten--green { background: #d1f7c4; color: #0b3d1d; }
.og-ten--yellow { background: #ffeab6; color: #5c4300; }
.og-ten--gray { background: #e5e9f0; color: #444; }
.og-pct, .og-ret { font-variant-numeric: tabular-nums; }
/* Colored BLOCKS like the sheet's conditional formatting (Tim). */
td.og-good { background: #d1f7c4; color: #0b3d1d; }
td.og-warn { background: #ffeab6; color: #5c4300; }
td.og-bad { background: #ffdce5; color: #7a1330; }
span.og-good { background: #d1f7c4; color: #0b3d1d; padding: 2px 9px; border-radius: 10px; font-weight: 600; }
span.og-bad { background: #ffdce5; color: #7a1330; padding: 2px 9px; border-radius: 10px; font-weight: 600; }
table.data.og-table tbody td.og-ret.og-newbiz { background: #6741d9; color: #fff;
    font-weight: 700; font-size: .85rem; text-align: center; }
.og-ret { border-left: 1px solid var(--color-line); border-right: 1px solid var(--color-line);
    font-size: .82rem; }
tr:not(.og-total) > td.og-ret:not(.og-good):not(.og-warn):not(.og-bad):not(.og-newbiz) { background: #fafbfd; }
.og-total .og-ret { background: var(--color-primary); }
.og-offnote { text-align: right !important; color: var(--color-muted); font-style: italic;
    white-space: normal; min-width: 260px; max-width: 480px; }
.og-blank { background: var(--color-surface); }
.og-nextyear { color: var(--color-muted); }

.og-yearbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.og-yearbar .spacer { flex: 1; }
.og-add { display: flex; gap: 6px; align-items: center; }
.og-edit input[type="text"], .og-edit input[type="number"] { width: 96px; text-align: right;
    border: 1px solid transparent; background: none; border-radius: 3px; padding: 2px 5px;
    font-variant-numeric: tabular-nums; font-size: .85rem; }
.og-edit input:hover, .og-edit input:focus { border-color: var(--color-line); background: #fff; }
.og-amcell select { border: 1px solid transparent; background: none; max-width: 110px;
    font-size: .8rem; padding: 1px 2px; height: 22px; }
.og-amcell select:hover, .og-amcell select:focus { border-color: var(--color-line); background: #fff; }
.og-mo { font-size: .82rem; }
.og-ytable tfoot td { font-weight: 700; }
.og-meta { display: flex; align-items: center; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.og-targetform { display: flex; gap: 14px; align-items: center; }
.og-targetform label { display: flex; gap: 8px; align-items: center; font-size: .84rem;
    color: var(--color-muted); }
.og-targetform input[type="number"] { width: 110px; }
.og-metastats { display: flex; gap: 16px; align-items: center; font-size: .9rem; }

/* ---------------------------------------------------------------------------
   Accounts Performance report (ap-, ?r=accounts-performance) — per-AM
   book: stacked retained/lost bar chart, then table + donut per AM. */
.ap-group { margin-top: 26px; }
.ap-ghead { display: flex; align-items: center; gap: 10px; padding-bottom: 8px;
    border-bottom: var(--border-accent); margin-bottom: 10px; }
.ap-gname { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
    color: var(--color-primary); }
.ap-split { display: flex; gap: 28px; align-items: flex-start; }
.ap-tablewrap { flex: 1; min-width: 0; }
.ap-donut { flex: 0 0 190px; text-align: center; padding-top: 6px; }
table.data.ap-table thead th { text-align: right; }
table.data.ap-table thead th:first-child { text-align: left; }
.ap-pill { display: inline-block; border-radius: 10px; padding: 1px 10px;
    font-size: .76rem; font-weight: 600; white-space: nowrap; }
.ap-pill--ret { background: #d5dcf5; color: #1c2c56; }
.ap-pill--lost { background: #ffdce5; color: #7a1330; }
.ap-chart-head { display: flex; justify-content: flex-end; margin: 14px 0 2px; }
.ap-seg { display: inline-flex;
    border: 1px solid var(--color-line); border-radius: var(--btn-radius); overflow: hidden; }
.ap-segbtn { background: var(--btn-light); border: 0; cursor: pointer;
    padding: 5px 13px; font: inherit; font-size: .8rem; color: var(--color-text); }
.ap-segbtn + .ap-segbtn { border-left: 1px solid var(--color-line); }
.ap-segbtn:hover { background: var(--btn-light-hover); }
.ap-segbtn.is-active { background: var(--color-slate); color: #fff; }

/* Contacts-list deep links (category + count cells): read as plain
 * text, reveal as links on hover. */
.ct-lk { color: var(--color-text); }
.ct-lk:hover { color: var(--color-link); text-decoration: none; }

/* Client Quality panel: table + trend chart as percentage columns */
.cq-flex { display: flex; gap: 4%; align-items: flex-start; flex-wrap: wrap; }
.cq-flex > table { flex: 0 1 42%; min-width: 320px; }
.cq-chart { flex: 1 1 46%; min-width: 320px; padding-top: 4px; }
.portal-gear { display: inline-flex; align-items: center; gap: 7px;
    text-decoration: none; }
.portal-gear svg { flex: none; }

/* Password strength meter (pw_meter() in helpers.php) */
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pw-meter-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--color-soft);
    overflow: hidden; display: block; }
.pw-meter-bar i { display: block; height: 100%; border-radius: 3px; width: 0;
    transition: width .18s ease, background .18s ease; }
.pw-meter-lbl { font-size: .74rem; font-weight: 700; min-width: 44px; text-align: right; }

/* ----------------------------------------------------------------------
 * Meeting logs (Fathom, migration 80) — ml- on the project Details >
 * Meetings subtab and the event page's Meeting Recording panel.
 * -------------------------------------------------------------------- */
.ml-card { border: var(--border-subtle); border-radius: 5px; padding: 14px 16px;
    margin: 0 0 14px; background: var(--color-surface); }
.ml-head { display: flex; align-items: flex-start; gap: 12px; }
.ml-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ml-links { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.ml-watch { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ml-summary { margin-top: 10px; font-size: .875rem; line-height: 1.5;
    max-height: 220px; overflow-y: auto; padding-right: 6px; }
.ml-summary a { color: inherit; text-decoration: underline;
    text-decoration-color: var(--color-line); text-underline-offset: 2px; }
.ml-summary a:hover { color: var(--color-link); text-decoration-color: currentColor; }
.ml-sec-label { font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-muted); margin: 14px 0 6px; }
.ml-highlights { margin: 0; padding-left: 18px; font-size: .875rem; }
.ml-highlights li { margin: 3px 0; }
.ml-items { display: flex; flex-direction: column; gap: 4px; }
.ml-item { display: flex; align-items: center; gap: 12px; padding: 6px 10px;
    border-radius: 4px; background: var(--color-soft); font-size: .875rem; }
.ml-item--ignored .ml-item-txt { color: var(--color-muted); text-decoration: line-through; }
.ml-item-txt { min-width: 0; }
.ml-item-act { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ml-btn { padding: 3px 10px; font-size: .78rem; }
.ml-pill { display: inline-block; border-radius: 10px; padding: 1px 10px;
    font-size: .74rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.ml-pill--task { background: #d5dcf5; color: #1c2c56; }
.ml-pill--ignored { background: var(--color-line); color: var(--color-muted); }
.ml-transcript { margin-top: 12px; }
.ml-transcript summary { cursor: pointer; font-size: .82rem; color: var(--color-muted); }
.ml-tr-body { max-height: 380px; overflow-y: auto; margin-top: 8px; padding: 10px 12px;
    background: var(--color-soft); border-radius: 4px; font-size: .84rem; }
.ml-tr-body p { margin: 0 0 10px; }
.ml-tr-who { font-weight: 700; color: var(--color-primary); margin-right: 6px; }
.ml-todo { border: 1px solid var(--border-accent, #2bb8d6); border-left-width: 3px;
    border-radius: 5px; padding: 10px 14px 12px; margin-bottom: 16px; }
.ml-unassigned { margin-top: 18px; border-top: var(--border-subtle); padding-top: 10px; }
/* Action-item triage icons: done-check circle + crossed-eye hide */
.ml-tri { color: var(--color-muted); padding: 2px; }
.ml-tri:hover { color: var(--color-link); }
.ml-pill--done { background: #d1f7c4; color: #0b3d1d; }
.ml-item--done .ml-item-txt { color: var(--color-muted); }
/* Collapsible meeting cards (project Meetings subtab; default closed) */
.ml-card--coll > .ml-head { cursor: pointer; user-select: none; }
.ml-caret { flex: none; color: var(--color-muted); line-height: 0; padding-top: 4px; }
.ml-caret svg { transition: transform .15s ease; }
.ml-card--open > .ml-head .ml-caret svg { transform: rotate(90deg); }
.ml-card--coll > .ml-body { display: none; }
.ml-card--coll.ml-card--open > .ml-body { display: block; }
.ef-zoom { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: .82rem; }
.ef-zoom .ef-zoom-host { max-width: 260px; font-size: .82rem; padding: 3px 6px; }

/* Duration quick-pick menu (input.dur focus — see prismDurMenuOpen) */
.durdd {
    position: fixed; z-index: 320; overflow-y: auto; padding: 4px;
    background: var(--color-surface); border: 1px solid var(--color-line);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(1, 0, 49, .16);
}
.durdd-opt {
    display: block; width: 100%; position: relative; text-align: left;
    background: none; border: none; border-radius: 3px; cursor: pointer;
    padding: 5px 12px 5px 26px; font-family: var(--font-body);
    font-size: .8125rem; color: var(--color-text); white-space: nowrap;
}
.durdd-opt:hover { background: var(--color-mist); }
.durdd-opt.is-cur { font-weight: 600; color: var(--color-primary); }
.durdd-opt.is-cur::before {
    content: '\2713'; position: absolute; left: 9px; top: 5px;
    color: var(--color-accent); font-weight: 700;
}

/* Sign in with Google (login.php, gated on gsso_enabled) */
.login-or {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 0; color: var(--color-muted); font-size: .8rem;
}
.login-or::before, .login-or::after {
    content: ''; flex: 1; height: 1px; background: var(--color-line);
}
.btn--google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; background: #fff; color: var(--color-text);
    border: 1px solid var(--color-line); font-weight: 600;
}
.btn--google:hover { background: var(--color-soft); }

/* Event modal: the Repeating settings panel revealed under Duration
   (data-ef-repeat). Soft container; fields wrap within column 1 so
   the freq / monthly-pattern / until trio never bleeds into the
   attendee column. */
.ef-repeat-row {
    display: flex; flex-wrap: wrap; gap: 8px 12px;
    margin: -6px 0 14px; padding: 10px 12px;
    background: var(--color-soft); border: 1px solid var(--color-line);
    border-radius: 6px;
}
.ef-repeat-row .field { flex: 1 1 130px; margin: 0; }
.ef-repeat-row .field label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .02em;
    color: var(--color-muted);
}
.ef-repeat-row select, .ef-repeat-row input { width: 100%; }

/* "Select all" on the Project members segment (event attendee column) */
.ef-seg-label { display: flex; align-items: baseline; justify-content: space-between; }
.ef-seg-all {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-family: var(--font-body); font-size: .7rem; font-weight: 600;
    letter-spacing: .02em; text-transform: none; color: var(--color-accent);
}
.ef-seg-all:hover { text-decoration: underline; }

/* "Last project #" hint beside the create-modal name label */
.pf-lastno { float: right; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* task_unblocked notifications (migration 94) — teal "go" */
.nf-badge--unblocked { background: #2bb8a3; }
.nf-ptype--unblocked { color: #2bb8a3; }

/* Retainer billing-period editor (project modal Budget Settings) */
.pf-pbp-head, .pf-pbp-row {
    display: grid; grid-template-columns: 1fr 150px 90px;
    gap: 8px; align-items: center;
}
.pf-pbp-head {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-muted); margin-bottom: 4px;
}
/* The period list is a SCROLL WELL — make that unmistakable: bordered
   inset box, an always-visible scrollbar (macOS overlay bars hide
   otherwise), and scroll shadows that appear only when content
   continues past an edge (background-attachment local trick). */
.pf-pbp-list {
    max-height: 280px; overflow-y: auto; margin-bottom: 14px;
    border: 1px solid var(--color-line); border-radius: 4px;
    padding: 4px 10px;
    background:
        linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top,
        linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom,
        radial-gradient(farthest-side at 50% 0, rgba(1, 0, 49, .14), transparent) top,
        radial-gradient(farthest-side at 50% 100%, rgba(1, 0, 49, .14), transparent) bottom;
    background-repeat: no-repeat;
    background-size: 100% 26px, 100% 26px, 100% 10px, 100% 10px;
    background-attachment: local, local, scroll, scroll;
}
.pf-pbp-list::-webkit-scrollbar { width: 10px; }
.pf-pbp-list::-webkit-scrollbar-thumb {
    background: #c3cad4; border-radius: 5px; border: 2px solid #fff;
}
.pf-pbp-list::-webkit-scrollbar-thumb:hover { background: #a9b2bf; }
.pf-pbp-list::-webkit-scrollbar-track { background: transparent; }
.pf-pbp-row { padding: 3px 0; }
.pf-pbp-lbl { font-size: .85rem; }
.pf-pbp-row--skip .pf-pbp-lbl,
.pf-pbp-row--skip input[type="number"] { opacity: .45; text-decoration: line-through; }
.pf-pbp-skip { white-space: nowrap; margin: 0; }

/* Pre-billed retainer: amber dot (the old tag got clipped by the
   sticky column's ellipsis) — tooltip carries the meaning. */
.iv-predot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: #e0a521; margin: 0 2px; vertical-align: 1px; }

/* Copy-to-clipboard: the project-name button sits in the row indent,
   revealed on row hover; money cells copy their raw number on click. */
.iv-proj { position: relative; }
/* Inner flex line: name truncates mid-row; kind + pre-bill dot pinned */
.iv-projline { display: flex; align-items: center; gap: 7px; min-width: 0; }
.iv-projline .ct-type, .iv-projline .iv-kind, .iv-projline .iv-predot { flex: none; }
.iv-projline .iv-kind { margin-left: 0; }
.iv-projname { flex: 0 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.iv-copy { position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    border: 0; background: none; padding: 2px; cursor: pointer;
    color: var(--color-muted); display: none; }
.iv-copy:hover { color: var(--color-accent); }
.iv-table tbody tr:hover .iv-copy { display: inline-block; }
.iv-table td[data-copy] { cursor: pointer; }

/* Transient "Copied" feedback chip (prism.js data-copy handler) */
.copied-chip { position: fixed; z-index: 400; background: var(--color-primary);
    color: #fff; font-size: .72rem; font-weight: 600; padding: 3px 9px;
    border-radius: 4px; pointer-events: none; opacity: 0;
    transition: opacity .15s; }
.copied-chip.on { opacity: 1; }

/* Row hover highlight across the month-grid reports (Invoicing /
   Revenue / Cost / Margin — all share iv-table). Wins over the sticky
   cells' opaque surface backgrounds; client header bars excluded. */
.iv-table tbody tr:not(.iv-crow):hover td { background: #f2f6fa; }

/* "Invoiced" check-off circles on the Invoicing report (migration 97):
   gray outline -> filled blue, the time-entry done-toggle language. */
.iv-invmark { border: 0; background: none; padding: 0 0 0 6px; cursor: pointer;
    color: var(--color-idle); vertical-align: -2px; }
.iv-invmark:hover { color: #2f80ed; }
.iv-invmark .mk-on { display: none; }
.iv-invmark.is-on { color: #2f80ed; }
.iv-invmark.is-on .mk-off { display: none; }
.iv-invmark.is-on .mk-on { display: inline; }

.viz-donut path, .viz-donut circle { transition: opacity .12s; }

/* Donut slices join the bar-chart hover contract: white .dw-cpop card,
   non-hovered slices dim, the hot slice stays full. */
.viz-donut.dw-focus [data-dw-seg] { opacity: .18; }
.viz-donut.dw-focus [data-dw-seg].dw-hot { opacity: 1; }

/* ---- PTO Overview tab (settings_users.php?tab=overview) ---- */
.pto-ov .pto-ov-who { display: inline-flex; align-items: center; gap: 8px; }
.pto-ov .pto-ov-big { font-weight: 700; font-size: 1rem; }
.pto-ov tr.pto-ov--off td { color: var(--color-muted); }
.pto-ov tr.pto-ov--off td:first-child strong { color: inherit; }
.pto-ov tfoot th { border-top: 2px solid var(--color-line); }

/* ---- To-Do lists (includes/todo.php; project To-Do tab + task page) ---- */
.todo { width: 100%; }
.todo-foot { margin: 6px 0 0; }
.todo .link-btn { background: none; border: 0; padding: 0; color: var(--color-muted); cursor: pointer; font: inherit; }
.todo .link-btn:hover { color: var(--color-link); }
/* collapsible block (task page) */
.todo-coll-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.todo-caret { color: var(--color-muted); line-height: 0; }
.todo-caret:hover { color: var(--color-link); }
.todo-caret svg { transition: transform .15s ease; }
.todo-coll--closed .todo-caret svg { transform: rotate(-90deg); }
.section-title .count[data-todo-count] { text-transform: none; }
.todo-coll--closed .todo-coll-body { display: none; }
.todo-coll .todo-coll-body { margin-top: 6px; }
.todo-item { padding: 5px 10px 5px 6px; }
.todo-item.is-dragging { opacity: .45; }
.todo-grip { color: var(--color-muted); cursor: grab; line-height: 0; padding: 4px 2px; flex: none; }
.todo-grip:active { cursor: grabbing; }
.todo-item--done .todo-txt { text-decoration: line-through; }
.todo-item .icon-btn.small { color: var(--color-muted); }
.todo-item .icon-btn.small:hover { color: var(--color-link); }
.todo-txt.is-editing { outline: 2px solid var(--color-accent, #2bb8d6); outline-offset: 2px; border-radius: 3px;
    background: var(--color-surface); padding: 0 4px; text-decoration: none; color: inherit; }
.todo-hidden { margin-top: 8px; opacity: .75; }
.todo-item--hidden .todo-txt { color: var(--color-muted); }
.todo-add { display: flex; gap: 8px; margin-top: 10px; }
.todo-add input { flex: 1; }
.todo-empty { margin: 4px 0; }
/* task modal opt-in row */
.tf-todo-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 2px; }
.tf-todo-row .tf-todo-tpl { max-width: 260px; font-size: .85rem; padding: 3px 6px; }
/* project modal template picker */
.pf-todo-tpl { margin: 4px 0 0 24px; }
/* settings: templates */
.tt-kind { display: inline-block; border-radius: 10px; padding: 1px 10px; font-size: .74rem; font-weight: 600; }
.tt-kind--project { background: #d5dcf5; color: #1c2c56; }
.tt-kind--task { background: #d1f7c4; color: #0b3d1d; }
.tt-row--off td { color: var(--color-muted); }
.tt-items { max-width: none; }

/* Work-area tab count badge (To-Do remaining) — the bell's red .nf-count look, inline */
.wa-tab-badge { display: inline-block; background: var(--color-alert); color: #fff;
    font-size: .62rem; font-weight: 700; line-height: 1; border-radius: 999px; padding: 3px 5px;
    min-width: 10px; text-align: center; vertical-align: 1px; text-transform: none; }

/* ---- Task Review (task_review.php, tr-) + subnav count badge ---- */
.subnav-badge { display: inline-block; margin-left: 5px; background: var(--color-alert); color: #fff;
    font-size: .62rem; font-weight: 700; line-height: 1; border-radius: 999px; padding: 3px 5px;
    min-width: 10px; text-align: center; vertical-align: 1px; }
.tr-sec { margin-top: var(--space-4); }
.tr-sec:first-of-type { margin-top: 0; }
.tr-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.tr-sec-head .muted { font-size: .85rem; }
.tr-table { width: 100%; }
.tr-table tbody td { text-align: left; vertical-align: middle; }
.tr-table th { text-align: left; }
.tr-table th.tr-r, .tr-table td.tr-r { text-align: right; white-space: nowrap; }
.tr-table tr.tr-phead td { background: var(--color-soft); font-weight: 700; padding: 6px 10px; }
.tr-table tr.tr-phead .muted { font-weight: 400; margin-left: 8px; }
.tr-faces { display: inline-flex; align-items: center; gap: 2px; }
.tr-faces .avatar { margin-right: -6px; border: 2px solid var(--color-surface); }
.tr-title { font-weight: 600; text-decoration: none; color: inherit; }
.tr-title:hover { color: var(--color-link); }
.tr-idle { font-variant-numeric: tabular-nums; }
.tr-idle--old { color: var(--color-alert); font-weight: 700; }
.tr-empty { color: var(--color-muted); padding: 10px 0; }
.tr-table .status-pill { cursor: default; }

/* Recurring row wraps so the span hint drops UNDER the fields (a flex row kept it as a skinny column) */
.tf-repeat-row { flex-wrap: wrap; }
.tf-repeat-row .tf-repeat-hint { flex-basis: 100%; margin-top: 2px; }

/* event_invite notifications: "someone scheduled you" — slate blue */
.nf-badge--event { background: #5b7fd6; }
.nf-ptype--event { color: #5b7fd6; }

/* project modal: suggested code is a click-to-insert button styled as the muted hint */
button.pf-lastno { background: none; border: 0; padding: 0; font: inherit; color: var(--color-muted); cursor: pointer; text-transform: none; }
button.pf-lastno:hover [data-pf-code-val] { color: var(--color-link); text-decoration: underline; }

/* My Task Board widget: five status columns in one full-width widget */
.hw-tkboard .pl-col { flex: 1 1 190px; min-width: 190px; }
.hw-tkboard .pl-card-top { display: flex; align-items: flex-start; justify-content: flex-start; gap: 6px; }  /* the pipeline card's space-between pushed the title right */
.hw-tkboard .pl-card-top .wa-pri { flex: none; margin-top: 1px; }
.hw-tkboard .pl-card-title { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.hw-tkboard .pl-card-meta { color: var(--color-muted); font-size: .78rem; }

/* Notification prefs (Profile settings) + the Task Added kind */
.nf-badge--assigned { background: #8a63d2; }
.nf-ptype--assigned { color: #8a63d2; }
.nfp-list { list-style: none; margin: 0; padding: 0; }
.nfp-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
            border-bottom: 1px solid var(--color-page); }
.nfp-item:last-child { border-bottom: none; }
.nfp-item input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; flex: none; cursor: pointer; }
.nfp-item label { cursor: pointer; }
.nfp-name { font-weight: 600; color: var(--color-primary); font-size: .9rem; }
.nfp-desc { display: block; color: var(--color-muted); font-size: .8rem; margin-top: 1px; }

/* Profile settings: Notifications | Menu Order as equal-height boxes —
   the panels stretch, the forms flex-column, and the field-group grows
   so both Save rows sit on the same baseline. */
.panel-cols--stretch { align-items: stretch; }
.panel-cols--stretch .panel { display: flex; flex-direction: column; }
.panel-cols--stretch .panel > form { display: flex; flex-direction: column; flex: 1; }
.panel-cols--stretch .panel > form > .field-group { flex: 1; }
.panel-cols--stretch .nav-order { max-width: none; }
/* First panel: Profile | Access | Change Password — three even columns */
.profile-cols .field-group { max-width: none; }

/* Import from Google Calendar (⋯ beside Add Event, PM+) */
.gi-modal { width: min(540px, 92vw); }
.gi-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.gi-body .field { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.gi-body .field input { width: 100%; }
.gi-modal .modal-actions { padding: 0 var(--space-4) var(--space-4); margin-top: 0; }
.ed-ext { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 9px;
          border-radius: 999px; background: #eef3fb; color: #3b5fa3; font-size: .74rem; font-weight: 600;
          vertical-align: middle; cursor: default; }
.cal-head-actions, .panel-head-actions { gap: var(--space-2); }

/* Monthly Reporting checklist (Calendar > Monthly Reporting, rep-) —
   the To-Do look grouped by the client's target week. */
.rep-head { margin-top: 4px; }
.rep-summary { font-size: .9rem; font-weight: 600; margin-left: auto; margin-right: 18px; }
.rep-group { margin-top: 14px; }
.rep-gname { margin: 0 0 6px; font-size: .95rem; font-weight: 700; }
.rep-gname .muted { font-weight: 600; font-size: .82rem; margin-left: 6px; }
.rep-row .rep-name { font-weight: 600; color: inherit; text-decoration: none; }
.rep-row .rep-name:hover { color: var(--color-link); }
.rep-row .rep-pref { font-size: .85rem; }
.rep-row--hidden .rep-txt { color: var(--color-muted); text-decoration: line-through; }
.rep-row--done .rep-txt, .rep-row--scheduled .rep-txt { color: var(--color-muted); }
.rep-add { display: inline-flex; align-items: center; gap: 6px; }
.ml-pill--sched { background: #d1f7c4; color: #0b3d1d; text-decoration: none; }
.ml-pill--sched:hover { background: #bff0ad; }
.rep-compact-head { display: flex; align-items: center; gap: 6px; padding: 2px 0 6px; font-size: .9rem; }
.rep-compact-head .link-quiet { margin-left: auto; }
.rep--compact .rep-group { margin-top: 10px; }
.rep-x { font-size: 1.15rem; line-height: 1; color: var(--color-muted); }
.rep-x:hover { color: var(--color-alert); }

/* Event modal — Client Guests contact picker (dual entry with the free-text emails). */
.ef-guest-dd .dd-trigger:disabled { color: var(--color-muted); cursor: default; background: var(--color-bg); }
.ef-guest-opt .ef-guest-email { margin-left: auto; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ef-guest-none { padding: 8px 10px; margin: 0; }
.ml-pill--pending { background: #fbe7c3; color: #7a4b00; }
.rep-req.is-on { color: #c97a06; }
.rep-req.is-on:hover { color: #7a4b00; }

/* Files blocks: select column + Download Selected (file_sel_*). */
table.data th.fsel-c, table.data td.fsel-c { width: 28px; padding-right: 0; text-align: left; }
.fsel-c input { margin: 0; vertical-align: middle; cursor: pointer; }
.fsel-dl { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: .875rem; color: var(--color-accent); text-decoration: none; white-space: nowrap; }
.fsel-dl:hover { text-decoration: underline; }
.fsel-dl[hidden] { display: none; }
table.data th.fsel-c + th, table.data td.fsel-c + td { text-align: left; }

/* Long text blocks (task Details): OPEN by default (Tim, 2026-10-06 —
   a clamp risks someone missing instructions). Only text taller than
   the 600px threshold gets the hist-tab pull tab; collapsing caps it
   at 600px with a fade + "Show N more lines", and the choice is the
   user's saved default for every long Details block. */
.clamp.is-long:not(.open) .clamp-body { max-height: 600px; overflow: hidden; position: relative; }
.clamp.is-long:not(.open) .clamp-body::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-surface, #fff)); pointer-events: none; }
.clamp .clamp-tab-row { margin-top: 8px; }
/* Collapsed-only red callout, left-aligned just above the tab's rule —
   so a collapsed brief can't read as complete (Tim, 2026-10-06). */
.clamp .clamp-flag { display: none; }
.clamp.is-long:not(.open) .clamp-flag {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-family: var(--font-body); font-size: .8125rem; font-weight: 700;
    color: var(--color-alert); }
.clamp .clamp-flag:hover { text-decoration: underline; }
.clamp.is-long:not(.open) .clamp-tab-row { margin-top: 4px; }
.clamp .clamp-tab-row[hidden] { display: none; }