/* assets/css/task-tracker-theme.css
   "Government-Grade Portal" restyle — scoped strictly to the Task Tracker.
   Scope roots: #tab-projects, #taskEditModal, #projModal, #deleteProjModal.
   Loaded AFTER network-admin.css / project-templates.css so same-specificity
   rules here win by source order — no !important needed.
   External file — no inline <style> — required by this site's CSP. */

:root {
    /* Navy / brand blue */
    --tt-navy: #0f1f3d;
    --tt-blue: #4F81BD;
    --tt-blue-hover: #3f6ea3;
    --tt-blue-light: #7aafd4;
    --tt-blue-pale: #dce9f6;
    --tt-blue-pale2: #f0f6fc;
    /* Neutrals */
    --tt-steel: #E8EEF6;
    --tt-input-border: #c8d8eb;
    --tt-muted: #6b7a90;
    --tt-body: #1a1a2e;
    /* Status set */
    --tt-amber: #F0A500;      --tt-amber-bg: #fef3d0;  --tt-amber-text: #7a5200;
    --tt-green: #27ae60;      --tt-green-bg: #d4f3e4;  --tt-green-text: #1a7a45;
    --tt-red: #e74c3c;        --tt-red-dark: #c0392b;  --tt-red-bg: #fde8e6;   --tt-red-text: #a0281c;
    --tt-gray: #6b7a90;       --tt-gray-bg: #eef1f5;   --tt-gray-text: #48566b;
    /* Shadow */
    --tt-shadow: 0 2px 16px rgba(15,31,61,.10);
    /* Fonts */
    --tt-font-heading: 'Playfair Display', serif;
    --tt-font-stat: 'DM Serif Display', serif;
    --tt-font-body: 'DM Sans', sans-serif;
}

/* ── Base typography, scoped ─────────────────────────────────────────────── */
#tab-projects, #taskEditModal, #projModal, #deleteProjModal {
    font-family: var(--tt-font-body);
    color: var(--tt-body);
}
#tab-projects h2, #tab-projects h3,
#taskEditModal h2, #taskEditModal h3, #taskEditModal .na-c48,
#projModal h3, #deleteProjModal h3,
.tt-heading {
    font-family: var(--tt-font-heading);
    font-weight: 700;
    color: var(--tt-navy);
}
#tab-projects label, #taskEditModal label, #projModal label, #deleteProjModal label {
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tt-muted); font-family: var(--tt-font-body);
}
#tab-projects p, #taskEditModal p, #projModal p, #deleteProjModal p {
    font-weight: 300;
}

/* ── Cards: .panel is shared app-wide, so scope the override to our roots ── */
#tab-projects .panel, #taskEditModal .panel, #projModal .panel, #deleteProjModal .panel {
    background: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: var(--tt-shadow);
}
#tab-projects .panel-head, #taskEditModal .panel-head, #projModal .panel-head, #deleteProjModal .panel-head {
    border-bottom: 1px solid var(--tt-steel);
}
#tab-projects .panel-head h2, #taskEditModal .panel-head h2 { font-size: 14px; }

/* ── Modal overlay backdrops (ID selectors win by specificity, no class touched) ── */
#projModal, #deleteProjModal { background: rgba(15,31,61,.45); }
#projModal > div, #deleteProjModal > div {
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15,31,61,.22);
}

/* ── Buttons: .btn-save / .btn-reset are real semantic classes, scope-override ── */
#tab-projects .btn-save, #taskEditModal .btn-save, #projModal .btn-save, #deleteProjModal .btn-save {
    background: var(--tt-blue); color: #fff; font-weight: 600; border-radius: 8px; border: none;
    transition: background .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
#tab-projects h2, #taskEditModal h2 { display: flex; align-items: center; gap: 8px; }
/* pointer-events:none makes the icon purely decorative — without it, a click
   registered squarely on the glyph's own SVG path (e.g. the empty crossing-point
   of an "x" icon, which Lucide renders as two stroked lines with a transparent
   center) could fail to bubble as a click on the actual button/element wrapping
   it, depending on exactly which pixel was hit. Confirmed live on the Edit Task
   modal's predecessor-remove "x" button: clicking directly on the glyph did
   nothing, clicking the same 34x34 button just off-center worked. */
.tt-icon { width: 15px; height: 15px; flex-shrink: 0; pointer-events: none; }
#tab-projects h2 .tt-icon, #taskEditModal h2 .tt-icon { width: 17px; height: 17px; }
#tab-projects .btn-save:hover, #taskEditModal .btn-save:hover, #projModal .btn-save:hover, #deleteProjModal .btn-save:hover {
    background: var(--tt-blue-hover);
}
#tab-projects .btn-reset, #taskEditModal .btn-reset, #projModal .btn-reset, #deleteProjModal .btn-reset {
    background: #fff; color: var(--tt-navy); border: 1px solid var(--tt-input-border); font-weight: 600; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px;
}
#tab-projects .btn-reset:hover, #taskEditModal .btn-reset:hover, #projModal .btn-reset:hover, #deleteProjModal .btn-reset:hover {
    background: var(--tt-blue-pale2);
}
#deleteProjModal .btn-save { background: var(--tt-red-dark); }
#deleteProjModal .btn-save:hover { background: #a0281c; }

/* ── Form fields: target by element type, not opaque na-cNNN classes ── */
#taskEditModal input[type="text"], #taskEditModal input[type="date"], #taskEditModal input[type="number"],
#taskEditModal input[type="email"], #taskEditModal input[type="tel"], #taskEditModal input[type="url"],
#taskEditModal select, #taskEditModal textarea,
#projModal input[type="text"], #projModal input[type="date"], #projModal input[type="number"],
#projModal input[type="email"], #projModal input[type="tel"], #projModal input[type="url"],
#projModal select, #projModal textarea,
#tab-projects .proj-search-input, #tab-projects select {
    height: 40px; border-radius: 6px; border: 1px solid var(--tt-input-border);
    padding: 8px 12px; font-size: 13px; color: var(--tt-body); font-family: var(--tt-font-body);
    background: #fff;
}
#taskEditModal textarea, #projModal textarea { height: auto; line-height: 1.5; }
#taskEditModal input:focus, #taskEditModal select:focus, #taskEditModal textarea:focus,
#projModal input:focus, #projModal select:focus, #projModal textarea:focus,
#tab-projects .proj-search-input:focus, #tab-projects select:focus {
    outline: none; border-color: var(--tt-blue); box-shadow: 0 0 0 3px rgba(79,129,189,.15);
}

/* ── KPI stat cards (.proj-card) ──────────────────────────────────────────── */
.proj-card {
    position: relative; background: #fff; border-radius: 10px; box-shadow: var(--tt-shadow);
    padding: 16px 14px 12px; overflow: hidden;
}
.proj-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tt-blue);
}
.proj-card-val { font-family: var(--tt-font-stat); font-size: 28px; font-weight: 400; color: var(--tt-navy); }
.proj-card-lbl { font-size: 11px; font-weight: 600; color: var(--tt-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.proj-breadcrumb { font-family: var(--tt-font-body); }
.proj-bc-link { color: var(--tt-blue); font-weight: 600; }
.proj-bc-link:hover { color: var(--tt-blue-hover); }
.proj-bc-current { color: var(--tt-navy); font-weight: 700; }
.proj-bc-sep, .proj-bc-tab { color: var(--tt-muted); }

/* ── Schedule Analysis panel ──────────────────────────────────────────────── */
.sched-row-label { color: var(--tt-muted); }
.sched-days-input, .sched-provider-sel {
    border: 1px solid var(--tt-input-border); border-radius: 6px; height: 32px; font-family: var(--tt-font-body);
}
.sched-ai-row { background: var(--tt-blue-pale2); border: 1px solid var(--tt-blue-pale); border-radius: 8px; }

/* ── Linear progress bars ─────────────────────────────────────────────────── */
.task-progress { background: var(--tt-steel); }
.task-progress-bar { background: var(--tt-blue); transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.task-progress-bar.done { background: var(--tt-green); }
.task-progress-bar.overdue { background: var(--tt-red); }
.task-progress-bar.blocked { background: var(--tt-red-dark); }
.task-progress-bar.cancelled { background: var(--tt-gray); }

/* ── Gantt / CPM chart ─────────────────────────────────────────────────────── */
.cg-track { background: var(--tt-steel); border-radius: 3px; }
.cg-bar-norm { background: var(--tt-blue); }
.cg-bar-crit { background: var(--tt-red-dark); }
.cg-row-crit .cg-lbl { color: var(--tt-red-dark); }
.cg-dot-norm { background: var(--tt-blue); }
.cg-dot-crit { background: var(--tt-red-dark); }
.cg-dot-today { background: var(--tt-red); }
.cg-today { background: var(--tt-red); }

/* ── Standalone form-field recipe (for elements appended outside the scoped
   containers above, e.g. the quick-edit popup which lives on document.body) ── */
.tt-input {
    height: 36px; border-radius: 6px; border: 1px solid var(--tt-input-border);
    padding: 6px 10px; font-size: 13px; color: var(--tt-body); font-family: var(--tt-font-body);
    background: #fff;
}
.tt-input:focus { outline: none; border-color: var(--tt-blue); box-shadow: 0 0 0 3px rgba(79,129,189,.15); }

/* ── Inline cell quick-edit (status/owner/dates/cost) ─────────────────────── */
.tt-inline-edit-trigger {
    cursor: pointer; border-bottom: 1px dashed transparent; padding-bottom: 1px;
}
.tt-inline-edit-trigger:hover { border-bottom-color: var(--tt-blue); color: var(--tt-blue-hover); }
span.tt-badge.tt-inline-edit-trigger:hover { box-shadow: 0 0 0 1px var(--tt-blue); border-bottom: none; }
.tt-quick-popup {
    position: absolute; z-index: 3000; background: #fff; border-radius: 10px;
    padding: 12px 14px; box-shadow: 0 8px 24px rgba(15,31,61,.18); min-width: 200px;
    font-family: var(--tt-font-body);
}
.tt-quick-popup-label { font-size: 10.5px; font-weight: 700; color: var(--tt-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.tt-quick-popup-row { margin-bottom: 10px; }
.tt-quick-popup-row .tt-input { width: 100%; }
.tt-quick-popup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tt-quick-popup-actions .tt-btn-primary, .tt-quick-popup-actions .tt-btn-outline-xs { justify-content: center; width: 100%; }
.tt-quick-popup-centered {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 3100; min-width: 280px;
}

/* ── Multi-select + bulk actions ──────────────────────────────────────────── */
.tt-row-checkbox { cursor: pointer; accent-color: var(--tt-blue); width: 15px; height: 15px; }
.task-row-selected { background: var(--tt-blue-pale2) !important; box-shadow: inset 3px 0 0 var(--tt-blue); }
.task-row-summary:focus, .task-row-leaf:focus { outline: 2px solid var(--tt-blue); outline-offset: -2px; }
.tt-bulk-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: var(--tt-navy); color: #fff; font-family: var(--tt-font-body);
}
.tt-bulk-count { font-size: 12px; font-weight: 700; margin-right: 6px; white-space: nowrap; }
.tt-bulk-bar .tt-btn-outline-xs { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.tt-bulk-bar .tt-btn-outline-xs:hover { background: rgba(255,255,255,.12); }
.tt-bulk-bar .tt-bulk-danger { border-color: var(--tt-red); color: #ffb4a8; }
.tt-bulk-bar .tt-bulk-danger:hover { background: var(--tt-red-dark); color: #fff; }
.tt-bulk-clear { background: none; border: none; color: rgba(255,255,255,.7); font-size: 12px; cursor: pointer; margin-left: auto; text-decoration: underline; font-family: var(--tt-font-body); }
.tt-bulk-clear:hover { color: #fff; }

/* ── Task table row badges ────────────────────────────────────────────────── */
.task-row-summary { background: var(--tt-blue-pale2); }
.pred-badge     { background: var(--tt-steel); color: var(--tt-navy); }
.resource-badge { background: var(--tt-blue-pale); color: var(--tt-blue-hover); }
.task-action-btn.insert:hover { color: var(--tt-blue-hover); background: var(--tt-blue-pale2); }

/* ── Status badges / pills (applied via new .tt-badge-* classes emitted by JS) ── */
.tt-badge {
    display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
    font-size: 11px; font-weight: 600; padding: 2px 10px; white-space: nowrap;
    font-family: var(--tt-font-body);
}
.tt-badge svg { width: 11px; height: 11px; }
.tt-badge-amber { background: var(--tt-amber-bg); color: var(--tt-amber-text); }
.tt-badge-blue  { background: var(--tt-blue-pale); color: var(--tt-blue-hover); }
.tt-badge-green { background: var(--tt-green-bg); color: var(--tt-green-text); }
.tt-badge-red   { background: var(--tt-red-bg); color: var(--tt-red-text); }
.tt-badge-gray  { background: var(--tt-gray-bg); color: var(--tt-gray-text); }

/* ── Section header bar (3 variants) ─────────────────────────────────────── */
.tt-section-header {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px 8px 0 0;
    font-family: var(--tt-font-heading); font-weight: 700; font-size: 13px;
}
.tt-section-header-primary  { background: var(--tt-blue); color: #fff; }
.tt-section-header-standard { background: var(--tt-blue-pale); color: var(--tt-navy); }
.tt-section-header-slate    { background: #2c3e50; color: #fff; }

/* ── KPI watermark icon ───────────────────────────────────────────────────── */
.tt-kpi-icon { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; opacity: .12; color: var(--tt-navy); }

/* ── Task Edit Drawer — right-side slide-in, not a centered modal. The tracker
   grid behind it stays fully visible and interactive (no dark backdrop); only
   the drawer card itself is clickable (pointer-events scoped back on below).
   Closes via Escape or the × button only — not by clicking the tracker,
   since a click there should just update the drawer to that row, per the
   drawer interaction spec. Toggled via .tt-drawer-open (see openTaskEditModal/
   closeTaskEditModal) instead of style.display, so the slide transition can run. ── */
#taskEditModal.na-c388 {
    display: flex; visibility: hidden; background: transparent;
    justify-content: flex-end; align-items: stretch; pointer-events: none;
    transition: visibility 0s linear .25s;
    /* Explicit, unambiguous z-index above the sticky page header (.topbar, z-index:10) — the
       base .na-c388 rule in network-admin.css already sets z-index:2100, which should already
       clear that, but a live test found clicks on drawer content (the beneficiary "+ Add Entry"
       button) landing on .topbar-row1 instead of the button underneath it. Setting it again here,
       on the more specific #taskEditModal.na-c388 selector, removes any doubt regardless of the
       exact cause (a stale CSS cache serving an older rule was the likely culprit, fixed by the
       version-bump alongside this, but this makes the drawer's stacking correct on its own). */
    z-index: 10000;
}
#taskEditModal.na-c388.tt-drawer-open {
    visibility: visible; transition: visibility 0s linear 0s;
}
#taskEditModal.na-c388 > .na-c397 {
    pointer-events: auto; max-width: 640px; width: 46vw; min-width: 560px;
    height: 100vh; max-height: 100vh; border-radius: 0;
    box-shadow: -8px 0 32px rgba(15,31,61,.18);
    transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
}
#taskEditModal.na-c388.tt-drawer-open > .na-c397 { transform: translateX(0); }

/* ── Task-edit-modal header — dark navy, matching the reference design (application
   review drawer): white title, muted-white subtitle, circular ghost close button. ── */
#taskEditModal .na-c54 { background: var(--tt-navy); border-bottom: none; padding: 20px 24px; }
#taskEditModal .na-c48 { color: rgba(255,255,255,.55); }
#taskEditModal .na-c49 { color: #fff; font-family: var(--tt-font-heading); font-size: 18px; }
#taskEditModal .na-c74 { color: rgba(255,255,255,.55); }
#taskEditModal .na-c79 {
    color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); border-radius: 999px;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-left: 12px;
}
#taskEditModal .na-c79:hover { color: #fff; background: rgba(255,255,255,.2); }

/* ── Completion display (Overview tab) — big serif percentage + accent-colored
   native range slider, matching the reference drawer's "COMPLETION / 100%" pattern. ── */
.tt-completion-val {
    font-family: var(--tt-font-stat); font-size: 34px; font-weight: 400; color: var(--tt-navy);
    line-height: 1.1; margin: 4px 0 10px;
}
.tt-completion-slider { accent-color: var(--tt-green); width: 100%; height: 20px; cursor: pointer; }

/* ── Callout card — bordered container for a primary call-to-action inside a
   drawer tab, matching the reference's "Review Complete Application" box. ── */
.tt-callout {
    border: 1px solid var(--tt-blue); border-radius: 10px; padding: 16px 18px;
    background: var(--tt-blue-pale2); text-align: center;
}
.tt-callout-icon { color: var(--tt-blue); margin-bottom: 6px; }
.tt-callout-icon .tt-icon { width: 20px; height: 20px; }
.tt-callout-title { font-family: var(--tt-font-heading); font-weight: 700; font-size: 14px; color: var(--tt-navy); margin-bottom: 4px; }
.tt-callout-desc { font-size: 12px; color: var(--tt-muted); margin-bottom: 12px; line-height: 1.5; }

/* ── Modern list/table for drawer entity lists (predecessors, assigned resources,
   criteria, issue log, risk register, reporting history, per-unit cost rows) —
   a clean bordered row list, replacing whatever ad-hoc chip/paragraph markup each
   list previously used. Structural only: each row is a flex line with consistent
   padding/dividers; content stays whatever each render function already builds. ── */
.tt-drawer-list { border: 1px solid var(--tt-steel); border-radius: 8px; overflow: hidden; }
.tt-drawer-list:empty { display: none; }
.tt-drawer-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 14px; font-size: 12.5px; border-bottom: 1px solid var(--tt-steel);
    background: #fff;
}
.tt-drawer-row:last-child { border-bottom: none; }
.tt-drawer-row:hover { background: var(--tt-blue-pale2); }
.tt-drawer-row-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tt-drawer-row-title { font-weight: 600; color: var(--tt-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-drawer-row-sub { color: var(--tt-muted); font-size: 11px; }
/* Fixed 34x34px box (not padding + negative margin — with .tt-drawer-row-head's flex `gap`,
   negative margins on adjacent buttons produced an uneven/overlapping hit area instead of a
   clean larger one, confirmed live: users still had to hunt around the icon for the real spot).
   An explicit width/height with the 15px icon centered inside gives every pixel of the visible
   box a real, predictable hit target, and gap still keeps neighboring buttons' boxes apart. */
.tt-drawer-row-action {
    background: none; border: none; color: var(--tt-muted); cursor: pointer;
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
.tt-drawer-row-action:hover, .tt-drawer-row-action:focus-visible {
    color: var(--tt-red-dark); background: var(--tt-blue-pale2, rgba(0,0,0,.06));
}
.tt-drawer-row-action:active { background: rgba(0,0,0,.12); }
.tt-drawer-empty { padding: 14px; text-align: center; color: var(--tt-muted); font-size: 12px; font-style: italic; }
/* Richer entries (issue log, risk register, reporting history) — a header line
   of meta chips, then a text/body line, stacked instead of one flat row. */
.tt-drawer-row-stacked { display: block; }
.tt-drawer-row-stacked .tt-drawer-row-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tt-drawer-row-stacked .tt-drawer-row-body { font-size: 12.5px; color: var(--tt-body); line-height: 1.5; }

/* ── Task-edit-modal tab strip (na-c184 = active, na-c61 = inactive — unique to this modal) ──
   Widening the drawer (above) should let all 6 tabs fit without scrolling on most screens,
   but na-c255 grew from 5 tabs to 6 without ever getting overflow handling — na-c255's plain
   flex/nowrap let the later tabs (Finance, then Intelligence) get silently clipped past the
   drawer's edge with nothing to reveal them on narrower viewports, so the scroll fallback stays.
   with no scrollbar to reveal them. Scroll horizontally instead, same hidden-scrollbar pattern
   already used by .proj-tab-bar for the same reason. */
.na-c255 { overflow-x: auto; scrollbar-width: none; }
.na-c255::-webkit-scrollbar { display: none; }
#taskEditModal .na-c184, #taskEditModal .na-c61 {
    font-family: var(--tt-font-body); border-bottom-width: 3px; border-bottom-style: solid;
    white-space: nowrap; flex-shrink: 0;
}

/* ── Project header meta bar (owner/client/funding/etc.) ──────────────────── */
#projInfoBar {
    background: var(--tt-blue-pale2);
    border-bottom: 1px solid var(--tt-steel);
    padding: 10px 20px;
}
.tt-meta-item {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tt-body);
    padding-right: 14px; margin-right: 4px; border-right: 1px solid var(--tt-steel);
    line-height: 1.4;
}
.tt-meta-item:last-child { border-right: none; }
.tt-meta-item .tt-icon { color: var(--tt-muted); }
.tt-meta-label { font-weight: 700; color: var(--tt-muted); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; margin-right: 2px; }
.tt-meta-value { color: var(--tt-body); font-weight: 500; }
.tt-meta-link { color: var(--tt-blue); text-decoration: none; }
.tt-meta-link:hover { color: var(--tt-blue-hover); text-decoration: underline; }
.tt-meta-code {
    font-family: monospace; font-size: 11px; background: var(--tt-steel); color: var(--tt-navy);
    padding: 2px 7px; border-radius: 4px; margin-right: 8px;
}
.tt-meta-desc {
    color: var(--tt-muted); font-style: italic; max-width: 280px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-size: 12px; vertical-align: middle;
}
.tt-btn-outline-xs {
    display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--tt-blue);
    color: var(--tt-blue); background: #fff; border-radius: 6px; padding: 3px 10px;
    font-size: 11px; font-weight: 600; cursor: pointer; font-family: var(--tt-font-body);
}
.tt-btn-outline-xs:hover { background: var(--tt-blue); color: #fff; }
.tt-btn-outline-xs .tt-icon { width: 12px; height: 12px; }
/* Unscoped primary button — for elements appended outside the scoped containers
   (e.g. the quick-edit popup on document.body), where #tab-projects .btn-save etc.
   wouldn't reach. */
.tt-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--tt-blue); color: #fff; font-weight: 600; border: none;
    border-radius: 6px; padding: 6px 14px; font-size: 12px; cursor: pointer;
    font-family: var(--tt-font-body); transition: background .15s;
}
.tt-btn-primary:hover { background: var(--tt-blue-hover); }

/* ── Proposal attachment bar ───────────────────────────────────────────────── */
.tracker-proposal-panel { background: #fff; border-bottom: 1px solid var(--tt-steel); padding: 10px 20px; }
.tp-label { color: var(--tt-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.tp-link, .tp-view-btn { color: var(--tt-blue); }
.tp-link:hover, .tp-view-btn:hover { color: var(--tt-blue-hover); }
.tp-empty-msg { color: var(--tt-muted); }
.tp-change-btn, .tp-add-btn {
    border: 1px solid var(--tt-blue); color: var(--tt-blue); background: #fff;
    border-radius: 6px; padding: 4px 12px; font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px; font-family: var(--tt-font-body);
}
.tp-change-btn:hover, .tp-add-btn:hover { background: var(--tt-blue); color: #fff; }
.tp-remove-btn {
    border: none; background: none; color: var(--tt-red-dark); font-weight: 700;
    padding: 4px 6px; display: inline-flex; align-items: center; gap: 4px; font-family: var(--tt-font-body);
}
.tp-remove-btn:hover { text-decoration: underline; }
.tp-label .tt-icon, .tp-change-btn .tt-icon, .tp-add-btn .tt-icon, .tp-remove-btn .tt-icon { width: 12px; height: 12px; }

/* ── Project Header / Executive Summary Bar / Workspace Panel ────────────────
   Layout hierarchy for the tracker: Header (identity) → Summary Bar (every
   metric, grouped) → Workspace Panel (mode nav + the active mode's content,
   the dominant element on the page). Kept to exactly these 3 bands plus the
   breadcrumb so the eye never has to restart down the page. ── */
.tt-project-header { margin-bottom: 12px; }

.tt-exec-bar {
    display: none; /* shown via JS (projectSummary.style.display), mirrors old na-c229 default */
    align-items: stretch; gap: 0; background: #fff; border-radius: 10px;
    box-shadow: var(--tt-shadow); padding: 14px 20px; margin-bottom: 12px; flex-wrap: wrap;
}
.tt-exec-group { display: flex; flex-direction: column; gap: 6px; padding: 0 22px; }
.tt-exec-group:first-child { padding-left: 0; }
.tt-exec-group-label {
    display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--tt-muted);
}
.tt-exec-stats { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; min-height: 34px; }
.tt-exec-stat { display: flex; flex-direction: column; }
.tt-exec-val { font-family: var(--tt-font-stat); font-size: 22px; font-weight: 400; color: var(--tt-navy); line-height: 1.1; }
.tt-exec-stat-warn .tt-exec-val { color: var(--tt-red-dark); }
/* Task drawer Finance tab — index/variance coloring applied directly to the
   value (not a parent .tt-exec-stat), so distinct class names from the
   parent-scoped .tt-exec-stat-warn above. */
.tt-fin-good { color: var(--tt-green) !important; }
.tt-fin-warn { color: var(--tt-amber) !important; }
.tt-fin-bad  { color: var(--tt-red-dark) !important; }
.tt-exec-lbl { font-size: 10px; font-weight: 600; color: var(--tt-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.tt-exec-divider { width: 1px; background: var(--tt-steel); flex-shrink: 0; align-self: stretch; margin: 2px 0; }

.tt-workspace-panel { margin-bottom: 0; }

/* Workspace navigation — primary mode switcher: a compact, centered group of
   buttons (Teams/Azure-DevOps-tab style), not stretched edge-to-edge. Grid
   keeps the group centered in the true middle while Trash stays pinned right. */
.proj-tab-bar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    background: #fff; border-bottom: none; padding: 8px 12px; gap: 4px;
    border-radius: 10px 10px 0 0; box-shadow: none; overflow-x: auto;
}
.proj-tab-group { display: flex; gap: 4px; grid-column: 2; }
.proj-ptab {
    flex: 0 0 auto; justify-content: center; padding: 10px 18px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; color: var(--tt-muted); bottom: 0;
    font-family: var(--tt-font-body); border: 1px solid transparent; white-space: nowrap;
}
.proj-ptab:hover { background: var(--tt-blue-pale2); color: var(--tt-navy); }
.proj-ptab.active { background: var(--tt-blue); color: #fff; }
.proj-ptab-sep { display: none; }
.proj-ptab-trash { grid-column: 3; justify-self: end; flex: 0 0 auto; color: var(--tt-muted); }
.proj-ptab-trash:hover { color: var(--tt-red-dark); background: var(--tt-red-bg); }
/* AI Hub — subtle emphasis (not flashy) signaling "intelligence lives here" */
#ptab-ai:not(.active) { color: #6d5bd0; }
#ptab-ai:not(.active):hover { background: #f2effa; color: #5a49b8; }

/* Task-grid toolbar — grouped clusters with clear separators */
.tracker-toolbar { gap: 14px; padding: 12px 16px; background: #fff; }
.tt-toolbar-group { display: flex; align-items: center; gap: 8px; }
.tt-toolbar-sep { width: 1px; align-self: stretch; background: var(--tt-steel); }
.tt-toolbar-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tt-muted); margin-right: 2px; }
.tracker-search-icon { color: var(--tt-muted); width: 14px; height: 14px; margin-right: -4px; }
.tracker-search { background: #fff; width: 220px; }
.tracker-filter-pill {
    background: #fff; border-color: var(--tt-input-border); color: var(--tt-muted);
    font-family: var(--tt-font-body); display: inline-flex; align-items: center; gap: 4px;
}
.tracker-filter-pill .tt-icon { width: 11px; height: 11px; }
.tracker-filter-pill:hover { border-color: var(--tt-blue); color: var(--tt-blue); }
.tracker-filter-pill.active { background: var(--tt-blue); color: #fff; border-color: var(--tt-blue); }

/* Sub-navigation within a workspace mode (Financials/Health) — secondary, kept as pill tabs */
.psubnav { background: var(--tt-blue-pale2); border-bottom: 1px solid var(--tt-steel); }
.psubtab { background: #fff; border-color: var(--tt-input-border); color: var(--tt-muted); font-family: var(--tt-font-body); }
.psubtab:hover { border-color: var(--tt-blue); color: var(--tt-blue); }
.psubtab.active { background: var(--tt-blue); color: #fff; border-color: var(--tt-blue); }