/* network-admin.css — extracted from pages/network-admin.html for CSP hardening (issue #4) */
:root {
--ink: #0f2433; --ink-soft: #3e5566; --paper: #fbfaf6; --paper-2: #f1ede3;
--accent: #7a2a3a; --teal: #1f6f6b; --line: #e3dccb; --error: #c0392b;
--success: #1f6f6b; --radius: 10px;
--shadow: 0 4px 20px rgba(15,36,51,.09);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #F8FAFC; color: var(--ink); line-height: 1.6; min-height: 100vh; }
/* ── TOPBAR ── */
.topbar { background: var(--ink); color: #fff; position: sticky; top: 0; z-index: 10; }
.topbar-row1 { padding: 0 24px; height: 52px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); }
.topbar-row1 h1 { font-size: 15px; font-weight: 700; }
.topbar-row2 { padding: 0 24px; height: 44px; display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; }
.topbar-row2::-webkit-scrollbar { display: none; }
.topbar a { color: rgba(255,255,255,.65); font-size: 13px; text-decoration: none; }
.topbar a:hover { color: #fff; }
/* Tab buttons in the main nav strip */
.nav-tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.65); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color .15s, border-color .15s; font-family: inherit; }
.nav-tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-tab.active { color: #fff; border-bottom-color: #c9a84c; }
/* External tool links */
.nav-ext { display: inline-flex; align-items: center; gap: 5px; padding: 0 14px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); text-decoration: none; white-space: nowrap; flex-shrink: 0; border-left: 1px solid rgba(255,255,255,.1); transition: color .15s; }
.nav-ext:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); }
.nav-divider { width: 1px; background: rgba(255,255,255,.15); margin: 10px 6px; flex-shrink: 0; }
/* Tab content panes */
.tab-section { display: none; }
.tab-section.active { display: block; }
/* ── PROJECTS TAB — full-viewport panel ── */
#tab-projects { margin: -24px -32px -80px; }
#tab-projects > .panel {
border-radius:0; border-left:none; border-right:none; border-top:none;
margin-bottom:0; height:calc(100vh - 96px);
display:flex; flex-direction:column; max-width:none;
}
#tab-projects > .panel > .panel-head { flex-shrink:0; }
#tab-projects > .panel > #projectSummary { flex-shrink:0; }
#tab-projects > .panel > #projectBody { flex:1; min-height:0; overflow-y:auto; padding:0; }
#projectListPanel { display:flex; flex-direction:column; height:100%; }
#projectListPanel .panel { flex:1; min-height:0; display:flex; flex-direction:column; }
#projectListPanel .panel-body { flex:1; min-height:0; overflow-y:auto; }
#proj-table tbody tr:hover { background:var(--paper-2); }
/* ── ANALYTICS TAB ── */
#tab-analytics {
--navy:#0f1f3d; --navy-mid:#162b52; --navy-soft:#1e3a6e;
--blue:#4F81BD; --blue-lt:#7aafd4; --blue-pale:#dce9f6;
--amber:#F0A500; --amber-lt:#fef3d0; --amber-dark:#b87a00;
--green:#27ae60; --green-lt:#d4f3e4; --green-dark:#1a7a45;
--red:#e74c3c; --red-lt:#fde8e6; --red-dark:#a0281c;
--purple:#7c3aed; --purple-lt:#ede9fe;
--teal:#0891b2; --teal-lt:#cffafe;
--steel:#E8EEF6; --muted:#8fa3bc; --muted-dark:#5a7089;
--text:#1a2d4a; --white:#fff; --bg:#f4f7fb;
--radius:10px; --shadow:0 1px 12px rgba(15,31,61,.09); --shadow-lg:0 6px 28px rgba(15,31,61,.14);
font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
background:var(--bg); min-height:calc(100vh - 96px); color:var(--text);
margin:-24px -32px -80px; padding:0;
}
#tab-analytics .an-inner-tab-bar { background:var(--white); border-bottom:1px solid var(--steel); padding:0 28px; display:flex; gap:0; }
#tab-analytics .an-inner-tab { padding:12px 18px; font-size:13px; font-weight:500; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; display:flex; align-items:center; gap:6px; margin-bottom:-1px; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; }
#tab-analytics .an-inner-tab:hover { color:var(--navy); }
#tab-analytics .an-inner-tab.active { color:var(--blue); border-bottom-color:var(--blue); font-weight:600; }
#tab-analytics .an-tab-count { background:var(--blue-pale); color:var(--blue); font-size:11px; font-weight:700; padding:1px 7px; border-radius:10px; }
#tab-analytics .an-main { padding:24px 28px 48px; }
#tab-analytics .an-panel { display:none; }
#tab-analytics .an-panel.active { display:block; }
#tab-analytics .kpi-row { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:20px; }
#tab-analytics .kpi { background:var(--white); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
#tab-analytics .kpi::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius) var(--radius) 0 0; }
#tab-analytics .kpi.blue::after { background:var(--blue); }
#tab-analytics .kpi.amber::after { background:var(--amber); }
#tab-analytics .kpi.green::after { background:var(--green); }
#tab-analytics .kpi.red::after { background:var(--red); }
#tab-analytics .kpi.purple::after { background:var(--purple); }
#tab-analytics .kpi.teal::after { background:var(--teal); }
#tab-analytics .kpi-lbl { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
#tab-analytics .kpi-val { font-family:'DM Serif Display',serif; font-size:30px; line-height:1; color:var(--navy); }
#tab-analytics .kpi-val sup { font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; color:var(--muted); vertical-align:super; margin-left:2px; }
#tab-analytics .kpi-sub { font-size:11px; color:var(--muted); margin-top:5px; }
#tab-analytics .delta { font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:2px; padding:2px 6px; border-radius:4px; margin-top:4px; }
#tab-analytics .delta.up { background:var(--green-lt); color:var(--green-dark); }
#tab-analytics .delta.warn { background:var(--amber-lt); color:var(--amber-dark); }
#tab-analytics .delta.down { background:var(--red-lt); color:var(--red-dark); }
#tab-analytics .delta.info { background:var(--blue-pale); color:var(--blue); }
#tab-analytics .g2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
#tab-analytics .g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:16px; }
#tab-analytics .g12 { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-bottom:16px; }
#tab-analytics .g21 { display:grid; grid-template-columns:1fr 1.6fr; gap:16px; margin-bottom:16px; }
#tab-analytics .card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
#tab-analytics .ch { padding:14px 18px 12px; border-bottom:1px solid var(--steel); display:flex; align-items:center; justify-content:space-between; }
#tab-analytics .ct { font-size:13.5px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:8px; }
#tab-analytics .cdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
#tab-analytics .cs { font-size:12px; color:var(--muted); }
#tab-analytics .cb { padding:16px 18px; }
#tab-analytics .cb-sm { padding:10px 18px; }
#tab-analytics .pill { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap; }
#tab-analytics .pill.complete { background:var(--green-lt); color:var(--green-dark); }
#tab-analytics .pill.active { background:var(--blue-pale); color:var(--blue); }
#tab-analytics .pill.at-risk { background:var(--amber-lt); color:var(--amber-dark); }
#tab-analytics .pill.overdue { background:var(--red-lt); color:var(--red-dark); }
#tab-analytics .pill.planned { background:var(--steel); color:var(--muted); }
#tab-analytics .pill.milestone { background:var(--purple-lt); color:var(--purple); }
#tab-analytics .pill::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7; }
#tab-analytics .hbar-wrap { display:flex; flex-direction:column; gap:8px; }
#tab-analytics .hbar-item { display:flex; align-items:center; gap:10px; font-size:12.5px; }
#tab-analytics .hbar-label { min-width:120px; color:var(--text); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-analytics .hbar-track { flex:1; height:8px; background:var(--steel); border-radius:4px; overflow:hidden; }
#tab-analytics .hbar { height:100%; border-radius:4px; transition:width 1.2s cubic-bezier(.4,0,.2,1); width:0%; }
#tab-analytics .hbar-val { min-width:50px; text-align:right; font-size:12px; font-weight:600; color:var(--navy); }
#tab-analytics .prog-track { height:5px; background:var(--steel); border-radius:3px; overflow:hidden; margin-top:4px; }
#tab-analytics .prog-fill { height:100%; border-radius:3px; }
#tab-analytics .funnel { display:flex; flex-direction:column; gap:8px; }
#tab-analytics .funnel-step { display:flex; align-items:center; gap:12px; }
#tab-analytics .funnel-bar-wrap { flex:1; height:28px; background:var(--steel); border-radius:6px; overflow:hidden; position:relative; }
#tab-analytics .funnel-bar { height:100%; border-radius:6px; display:flex; align-items:center; padding-left:10px; font-size:12px; font-weight:600; color:white; transition:width 1.2s cubic-bezier(.4,0,.2,1); width:0%; }
#tab-analytics .funnel-label { font-size:12.5px; color:var(--text); min-width:130px; }
#tab-analytics .funnel-count { min-width:24px; font-size:13px; font-weight:700; color:var(--navy); text-align:right; }
#tab-analytics .data-table { width:100%; border-collapse:collapse; font-size:13px; }
#an-proj-table { table-layout: fixed; }
#an-proj-table .an-proj-col-name { width: 220px; }
#an-proj-table .an-proj-col-status { width: 110px; }
#an-proj-table .an-proj-col-owner { width: 110px; }
#an-proj-table .an-proj-col-start { width: 88px; }
#an-proj-table .an-proj-col-finish { width: 88px; }
#an-proj-table .an-proj-col-tasks { width: 60px; }
#an-proj-table .an-proj-col-progress { width: 130px; }
#an-proj-table .an-proj-col-budget { width: 90px; }
#an-proj-table .an-proj-col-actions { width: 120px; }
#an-proj-table td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-proj-action-btn { padding: 2px 8px; font-size: 11px; cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 4px; color: inherit; transition: background .1s; margin-right: 3px; }
.an-proj-action-btn:hover { background: rgba(255,255,255,.18); }
.an-proj-action-del { color: #fca5a5; border-color: rgba(220,38,38,.3); }
#tab-analytics .data-table thead tr { background:var(--navy); }
#tab-analytics .data-table th { padding:10px 14px; text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.65); }
#tab-analytics .data-table th:first-child { color:white; }
#tab-analytics .data-table tbody tr { border-bottom:1px solid var(--steel); cursor:pointer; transition:background .1s; }
#tab-analytics .data-table tbody tr:hover { background:#f0f5fa; }
#tab-analytics .data-table td { padding:11px 14px; vertical-align:middle; }
#tab-analytics .data-table td:first-child { font-weight:600; color:var(--navy); }
#tab-analytics .sub-text { font-size:11px; color:var(--muted); display:block; margin-top:1px; font-weight:400; }
#tab-analytics .num-cell { font-family:'DM Serif Display',serif; font-size:17px; color:var(--navy); }
#tab-analytics .num-sub { font-family:'DM Sans',sans-serif; font-size:11px; color:var(--muted); }
#tab-analytics .donut-wrap { display:flex; align-items:center; gap:20px; }
#tab-analytics .donut-legend { display:flex; flex-direction:column; gap:7px; flex:1; }
#tab-analytics .legend-item { display:flex; align-items:center; gap:8px; font-size:12.5px; }
#tab-analytics .legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
#tab-analytics .legend-label { flex:1; color:var(--text); }
#tab-analytics .legend-val { font-weight:700; color:var(--navy); font-size:13px; }
#tab-analytics .tl-mini { position:relative; padding-left:18px; }
#tab-analytics .tl-mini::before { content:''; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:linear-gradient(to bottom,var(--blue),var(--steel)); }
#tab-analytics .tl-mini-item { position:relative; padding:0 0 14px 16px; font-size:12.5px; }
#tab-analytics .tl-mini-item:last-child { padding-bottom:0; }
#tab-analytics .tl-mini-dot { position:absolute; left:-13px; top:4px; width:10px; height:10px; border-radius:50%; border:2px solid var(--white); }
#tab-analytics .tl-mini-dot.done { background:var(--green); }
#tab-analytics .tl-mini-dot.active { background:var(--blue); box-shadow:0 0 0 3px rgba(79,129,189,.25); }
#tab-analytics .tl-mini-dot.future { background:var(--steel); border-color:var(--muted); }
#tab-analytics .tl-mini-dot.overdue { background:var(--red); }
#tab-analytics .tl-mini-event { font-weight:600; color:var(--navy); }
#tab-analytics .tl-mini-date { font-size:11px; color:var(--muted); margin-top:1px; }
#tab-analytics .brow { display:flex; justify-content:space-between; align-items:center; padding:11px 18px; border-bottom:1px solid var(--steel); }
#tab-analytics .brow:last-child { border-bottom:none; }
#tab-analytics .brow.total { background:var(--navy); padding:14px 18px; border-radius:0 0 var(--radius) var(--radius); }
#tab-analytics .brow.total .blabel { color:rgba(255,255,255,.7); font-weight:600; }
#tab-analytics .brow.total .bval { color:white; font-size:20px; }
#tab-analytics .blabel { font-size:13px; color:var(--text); }
#tab-analytics .blabel small { display:block; font-size:11px; color:var(--muted); margin-top:1px; }
#tab-analytics .bval { font-family:'DM Serif Display',serif; font-size:18px; color:var(--navy); }
#tab-analytics .budget-block { }
#tab-analytics .an-loader { display:flex; align-items:center; justify-content:center; gap:12px; padding:48px; color:var(--muted); font-size:14px; }
#tab-analytics .an-spinner { width:22px; height:22px; border:3px solid var(--steel); border-top-color:var(--blue); border-radius:50%; animation:anSpin .7s linear infinite; }
@keyframes anSpin { to { transform:rotate(360deg); } }
@media(max-width:1200px) { #tab-analytics .kpi-row { grid-template-columns:repeat(3,1fr); } }
@media(max-width:900px) { #tab-analytics .kpi-row { grid-template-columns:repeat(2,1fr); } #tab-analytics .g2,#tab-analytics .g3,#tab-analytics .g12,#tab-analytics .g21 { grid-template-columns:1fr; } }
/* ── ANALYTICS PROJECT DRAWER ── */
#an-proj-drawer {
position:fixed; top:0; right:0; bottom:0; width:1100px; max-width:95vw;
background:#fff; box-shadow:-4px 0 32px rgba(15,31,61,.18);
z-index:500; display:flex; flex-direction:column;
transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1);
}
#an-proj-drawer.open { transform:translateX(0); }
#an-proj-drawer-backdrop {
position:fixed; inset:0; background:rgba(15,31,61,.25); z-index:499;
display:none; backdrop-filter:blur(1px);
}
#an-proj-drawer-backdrop.open { display:block; }
.an-drawer-head { padding:18px 20px 14px; border-bottom:1px solid #E8EEF6; display:flex; align-items:flex-start; gap:12px; flex-shrink:0; background:#0f1f3d; color:#fff; }
.an-drawer-title { flex:1; font-size:15px; font-weight:700; line-height:1.3; color:#fff; }
.an-drawer-edit-toggle { padding:6px 14px; border-radius:7px; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background .15s; font-family:inherit; }
.an-drawer-edit-toggle:hover { background:rgba(255,255,255,.25); }
#an-proj-drawer:not(.an-drawer-view-mode) .an-drawer-edit-toggle { background:#4F81BD; }
.an-drawer-close { width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s; }
.an-drawer-close:hover { background:rgba(255,255,255,.25); }
.an-drawer-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.an-drawer-footer { padding:14px 20px; border-top:1px solid #E8EEF6; display:flex; gap:8px; flex-shrink:0; }
/* flex-shrink:0 is load-bearing, not decoration: .an-drawer-body is a column flex
container with limited height, and per the flexbox spec a flex item with any
overflow other than "visible" loses its automatic min-content-size floor (its
effective min-height becomes 0). Without this, flexbox was free to squash each
expanded section down to a sliver to fit the available space, and overflow:hidden
silently clipped away everything below that — a real card holding real extracted
text rendered as an near-empty box with no scrollbar to reveal what was missing. */
.an-drawer-section { border:1px solid #E8EEF6; border-radius:10px; overflow:hidden; flex-shrink:0; }
.an-drawer-section-header { width:100%; display:flex; align-items:center; gap:8px; padding:11px 14px; background:#f4f7fb; border:none; cursor:pointer; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#1a2d4a; text-align:left; font-family:inherit; }
.an-drawer-section-header:hover { background:#eaf1fa; }
.an-drawer-section-chevron { display:inline-block; font-size:10px; color:#8fa3bc; transition:transform .15s; }
.an-drawer-section.collapsed .an-drawer-section-chevron { transform:rotate(-90deg); }
.an-drawer-section-count { margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.03em; color:#8fa3bc; background:#e8eef6; padding:2px 8px; border-radius:10px; }
.an-drawer-section-count.has-data { color:#1a7a4c; background:#d4f3e4; }
.an-drawer-section-body { padding:16px 14px; display:flex; flex-direction:column; gap:14px; }
.an-drawer-section.collapsed .an-drawer-section-body { display:none; }
.an-field-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#8fa3bc; margin-bottom:5px; }
/* Label grows a small ✓/— marker reflecting its paired field's state, driven purely by
CSS (:has the general-sibling combinator, since the .an-field-view div is inserted right
after the input, not immediately after the label) — no per-field JS bookkeeping needed. */
.an-field-label:has(~ .an-field-view:not(.empty))::after { content:' ✓'; color:#27ae60; }
.an-field-label:has(~ .an-field-view.empty)::after { content:' — not found'; color:#c0392b; text-transform:none; letter-spacing:0; font-weight:600; }
.an-field-input { width:100%; padding:8px 10px; border:1.5px solid #E8EEF6; border-radius:8px; font-size:13px; font-family:inherit; color:#1a2d4a; background:#fff; transition:border-color .15s, background .15s; line-height:1.5; }
.an-field-input:focus { outline:none; border-color:#4F81BD; }
.an-field-input[readonly] { background:#f4f7fb; color:#8fa3bc; }
/* A field that actually holds a value (extracted or typed) reads as visibly "filled" —
without this, a long extracted paragraph and a genuinely empty box look identical at a
glance, and collapsed-vs-empty becomes impossible to tell apart. */
.an-field-input:not(:placeholder-shown) { border-color:#bcd6ee; background:#f7fafd; }
textarea.an-field-input { resize:none; overflow-y:hidden; min-height:90px; }
.an-field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* ── Review (view) mode vs. Edit mode ──────────────────────────────────────────────
Default state is VIEW: this screen exists to review what extraction found, not to
present an empty-looking form. Every editable field gets a paired read-only
.an-field-view div (injected once by JS, see initDrawerFieldViews) that shows the
field's actual value as plain wrapped text — a real block element, so long extracted
paragraphs (summaries, indicators, risks) are simply readable, no auto-grow/scrollHeight
tricks required. The underlying input/textarea is hidden, not removed, so editing still
works against the exact same element/value once the user clicks Edit. */
.an-field-view { display:none; font-size:14px; line-height:1.6; color:#1a2d4a; white-space:pre-wrap; word-break:break-word; padding:6px 0; }
.an-field-view.empty { color:#b0472f; font-style:italic; font-size:12.5px; }
.an-field-view.empty::before { content:'⚠ '; }
#an-proj-drawer.an-drawer-view-mode .an-field-view { display:block; }
#an-proj-drawer.an-drawer-view-mode .an-field-input:not(select) { display:none; }
#an-proj-drawer.an-drawer-view-mode select.an-field-input { max-width:220px; }
.an-drawer-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:4px; }
.an-drawer-badge.local { background:rgba(79,129,189,.2); color:#4F81BD; }
.an-drawer-badge.dv { background:rgba(124,58,237,.2); color:#7c3aed; }
.an-btn-primary { flex:1; padding:9px 16px; background:#4F81BD; border:none; border-radius:8px; color:#fff; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s; }
.an-btn-primary:hover { background:#3a6fa8; }
.an-btn-primary:disabled { opacity:.6; cursor:default; }
.an-btn-tasks { flex:1; padding:9px 16px; background:#f4f7fb; border:1.5px solid #E8EEF6; border-radius:8px; color:#1a2d4a; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:6px; }
.an-btn-tasks:hover { background:#dce9f6; border-color:#4F81BD; color:#4F81BD; }
.an-drawer-err { font-size:12px; color:#e74c3c; padding:8px 10px; background:#fde8e6; border-radius:6px; display:none; }
.an-drawer-saved { font-size:12px; color:#27ae60; padding:8px 10px; background:#d4f3e4; border-radius:6px; display:none; }
.an-drawer-extract-status { font-size:11px; color:#8fa3bc; margin-top:6px; min-height:14px; }
.an-drawer-extract-status.err { color:#e74c3c; }
.an-drawer-extract-status.ok { color:#27ae60; }
.an-drawer-sync-note { font-size:10.5px; color:#8fa3bc; line-height:1.4; }
.an-currency-hint { font-size:10px; font-weight:400; text-transform:none; letter-spacing:0; color:#b7c3d4; }
/* ── LOCK SCREEN ── */
.lock-screen { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 96px); }
.lock-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 48px 40px; max-width: 380px; width: 100%; box-shadow: var(--shadow); text-align: center; }
.lock-icon { font-size: 40px; margin-bottom: 16px; }
.lock-card h2 { font-size: 22px; margin-bottom: 8px; }
.lock-card p { color: var(--ink-soft); font-size: 14px; margin-bottom: 24px; }
.lock-input { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-family: inherit; margin-bottom: 12px; }
.lock-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,111,107,.1); }
.btn-lock { width: 100%; padding: 12px; background: var(--teal); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.btn-lock:hover { opacity: .88; }
.lock-error { color: var(--error); font-size: 13px; margin-top: 8px; display: none; }
/* ── ADMIN SHELL ── */
.admin-shell { display: none; max-width: none; width: 100%; margin: 0; padding: 24px 32px 80px; }
.admin-shell.visible { display: block; }
/* ── PANEL — card with true rounded edges ── */
.panel {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 2px 16px rgba(15,36,51,.07);
margin-bottom: 20px;
overflow: hidden; /* clips table to panel's border-radius */
}
.panel-head {
padding: 16px 24px;
border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
}
.panel-head h2 { font-size: 15px; font-weight: 700; }
.panel-head p { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
/* Panel body with padding — for forms, settings, non-table content */
.panel-body { padding: 20px 24px; }
/* Panel body flush — table goes edge-to-edge, panel border-radius clips it */
.panel-body-flush { padding: 0; }
/* ── ITEM EDITOR ── */
.item-list { display: flex; flex-direction: column; gap: 16px; }
.item-card { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: var(--paper-2); position: relative; }
.item-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.item-drag { cursor: grab; color: var(--ink-soft); font-size: 18px; user-select: none; }
.item-emoji-input { width: 52px; font-size: 22px; text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: var(--paper); }
.item-id { font-size: 11px; color: var(--ink-soft); font-family: monospace; background: rgba(0,0,0,.05); padding: 2px 6px; border-radius: 4px; }
.item-remove { margin-left: auto; background: none; border: none; color: var(--error); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.item-remove:hover { background: rgba(192,57,43,.08); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.field-row.cols-1 { grid-template-columns: 1fr; }
.field-group { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.field-input, .field-select { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; background: var(--paper); color: var(--ink); width: 100%; }
.field-input:focus, .field-select:focus { outline: none; border-color: var(--teal); }
.add-item-btn { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1.5px dashed var(--line); border-radius: 10px; background: none; color: var(--ink-soft); font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; justify-content: center; transition: border-color .2s, color .2s; }
.add-item-btn:hover { border-color: var(--teal); color: var(--teal); }
/* ── ACTIONS ── */
.action-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-save { padding: 12px 28px; background: var(--teal); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.btn-save:hover { opacity: .88; }
.btn-save:disabled { opacity: .45; cursor: not-allowed; }
.btn-reset { padding: 12px 20px; background: transparent; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; cursor: pointer; }
.btn-reset:hover { border-color: var(--ink); color: var(--ink); }
.save-msg { font-size: 13px; color: var(--success); display: none; }
.save-err { font-size: 13px; color: var(--error); display: none; }
/* ── PREVIEW ── */
.preview-list { display: flex; flex-direction: column; gap: 8px; }
.preview-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.preview-item .pi-emoji { font-size: 18px; }
.preview-item .pi-title { font-size: 14px; font-weight: 600; }
.preview-item .pi-desc { font-size: 12px; color: var(--ink-soft); }
.preview-item .pi-badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pi-badge.open { background: rgba(31,111,107,.1); color: var(--teal); }
.pi-badge.soon { background: rgba(0,0,0,.06); color: var(--ink-soft); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
/* ── SUBMISSION TABLES ── */
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab-btn { padding: 10px 18px; background: none; border: none; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: color .15s, border-color .15s; }
.tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.reg-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.reg-count { font-size: 12px; color: var(--ink-soft); background: rgba(0,0,0,.06); padding: 2px 8px; border-radius: 999px; }
.btn-csv { padding: 6px 14px; background: transparent; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.btn-csv:hover { border-color: var(--teal); color: var(--teal); }
.btn-pdf-dl { padding: 4px 10px; background: var(--accent); color: #fff; border: none; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-pdf-dl:hover { opacity: .85; }
.btn-pdf-dl:disabled { opacity: .5; cursor: wait; }
.btn-reload { padding: 6px 14px; background: transparent; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.btn-reload:hover { border-color: var(--ink); color: var(--ink); }
/* ── TABLE WRAP — overflow scrolls horizontally; panel clips to border-radius ── */
.table-wrap { overflow-x: auto; overflow-y: visible; }
/* ── REG TABLE — reference-quality clean styling ── */
table.reg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.reg-table thead tr { background: #f5f4f0; }
.reg-table th {
text-align: left; padding: 11px 16px;
background: #f5f4f0;
border-bottom: 1.5px solid var(--line);
font-size: 10.5px; font-weight: 700; color: #7a8898;
text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
}
.reg-table td { padding: 12px 16px; border-bottom: 1px solid #ede9df; vertical-align: middle; }
.reg-table tr:last-child td { border-bottom: none; }
.reg-table tbody tr { transition: background .1s; }
.reg-table tbody tr:hover td { background: rgba(31,111,107,.04); cursor: pointer; }
.reg-table tbody tr.rfp-selected td { background: #ecfdf5; border-left: 3px solid var(--teal); }
.reg-table tbody tr.rfp-selected td:first-child { border-left: none; }
.reg-table .mono { font-family: monospace; font-size: 11px; color: var(--ink-soft); }
.reg-table .trunc { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.reg-table .badge-yes { display: inline-flex; align-items: center; gap: 5px; background: rgba(31,111,107,.10); color: #0f6b55; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.reg-table .badge-yes::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; flex-shrink: 0; }
.reg-table .badge-no { display: inline-flex; align-items: center; gap: 5px; background: rgba(192,57,43,.09); color: var(--error); font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.reg-table .badge-no::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--error); flex-shrink: 0; }
/* RFP filter pills */
.rfp-filter-btn { padding: 5px 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink-soft); cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.rfp-filter-btn:hover { background: var(--paper-2); color: var(--ink); }
.rfp-filter-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.rfp-cnt { display: inline-block; background: rgba(255,255,255,.25); border-radius: 999px; font-size: 10px; padding: 0 5px; margin-left: 2px; min-width: 16px; text-align: center; }
.rfp-filter-btn:not(.active) .rfp-cnt { background: var(--paper-2); color: var(--ink-soft); }
.tbl-empty { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 36px 16px; }
/* Detail drawer */
.drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 100; }
.drawer-overlay.open { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--paper); box-shadow: -4px 0 24px rgba(0,0,0,.12); z-index: 101; overflow-y: auto; padding: 28px 28px 48px; transform: translateX(100%); transition: transform .25s ease; }
.drawer.open { transform: translateX(0); }
.drawer-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink-soft); }
.drawer h3 { font-size: 16px; margin-bottom: 4px; }
.drawer .d-sub { font-size: 12px; color: var(--ink-soft); font-family: monospace; margin-bottom: 20px; }
.d-section { margin-top: 18px; }
.d-section h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 10px; }
.d-row { display: flex; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.d-label { min-width: 130px; color: var(--ink-soft); flex-shrink: 0; }
.d-val { color: var(--ink); word-break: break-word; }
.lookup-wrap { position: relative; }
.lookup-dropdown {
display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0;
background: #fff; border: 1px solid var(--line); border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,.12); z-index: 200; max-height: 220px; overflow-y: auto;
}
.lookup-dropdown.open { display: block; }
.lookup-item { padding: 8px 12px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line); }
.lookup-item:last-child { border-bottom: none; }
.lookup-item:hover { background: rgba(31,111,107,.1); }
.lookup-item.muted { color: var(--ink-soft); cursor: default; font-style: italic; }
.lookup-item.muted:hover { background: none; }
/* ── TEAM TABLE (project Team tab: one flat roster table, not a stack of
per-type sections — see buildResourcePanel()) ── */
.team-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.team-title { font-size: 13px; font-weight: 700; }
.team-sub { font-size: 11px; font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
.team-scroll { overflow-x: auto; }
.team-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.team-table thead th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2); white-space: nowrap; }
.team-table thead th.num { text-align: right; }
.team-table tbody td { padding: 8px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.team-table tbody tr:last-child td { border-bottom: none; }
.team-rname { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.team-ricon { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }
.team-rrole { color: var(--ink-soft); font-size: 11.5px; margin-top: 1px; }
.team-locked { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-soft); background: var(--paper-2); padding: 3px 8px; border-radius: 5px; }
.team-cost-edit { display: flex; align-items: center; gap: 4px; }
.team-cost-edit select, .team-cost-edit input { font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; background: #fff; color: var(--ink); }
.team-cost-edit input.rate { width: 76px; text-align: right; }
.team-alloc { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.team-alloc input { width: 46px; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; text-align: right; }
.team-dim { color: var(--ink-soft); }
.team-chips { display: flex; flex-wrap: wrap; gap: 3px; max-width: 260px; }
.team-icon-btn { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); width: 24px; height: 24px; border-radius: 5px; cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.team-icon-btn:hover { border-color: #e08a7d; color: var(--error); }
.team-icon-btn.disabled { opacity: .5; cursor: default; }
.team-icon-btn.disabled:hover { border-color: var(--line); color: var(--ink-soft); }
/* "+ Add" anchored panel — one mechanism (search, then an optional one-off-create link),
not two separate always-visible controls */
.team-add-wrap { position: relative; }
.team-add-panel { display: none; position: absolute; top: calc(100% + 6px); right: 0; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 12px; z-index: 30; }
.team-add-panel.open { display: block; }
.team-add-divider { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.team-add-divider::before, .team-add-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.team-add-oneoff { width: 100%; font: inherit; font-size: 12.5px; text-align: left; padding: 7px 9px; border: 1px dashed var(--line); border-radius: 6px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.team-add-oneoff:hover { border-color: var(--teal); color: var(--teal); }
.team-foot { padding: 8px 16px 12px; font-size: 11px; color: var(--ink-soft); }
/* ── PROJECT TRACKER ── */
.proj-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 18px; min-width: 100px; text-align: center; }
.proj-card-val { font-size: 22px; font-weight: 700; color: var(--ink); }
.proj-card-lbl { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.task-progress { width: 100%; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; min-width: 60px; }
.task-progress-bar { height: 100%; border-radius: 3px; background: var(--teal); transition: width .3s; }
.task-progress-bar.done { background: #16a34a; }
.task-progress-bar.overdue { background: var(--error); }
.outline-indent { display: inline-block; }
.task-row-summary { background: var(--paper-2); font-weight: 600; }
.task-row-leaf td { font-size: 12px; }
tr.dnd-over td { background: #dbeafe !important; border-top: 2px solid #2563eb; }
.pred-badge { display: inline-block; font-size: 10px; background: rgba(31,111,107,.1); color: var(--teal); border-radius: 4px; padding: 1px 6px; margin: 1px 2px 1px 0; white-space: nowrap; }
.resource-badge { display: inline-block; font-size: 11px; background: rgba(122,42,58,.08); color: var(--accent); border-radius: 4px; padding: 2px 7px; margin: 1px 2px 1px 0; white-space: nowrap; }
/* ── PROJECT TAB BAR ── */
.proj-tab-bar { display:flex; align-items:stretch; gap:2px; padding:12px 16px 0; border-bottom:2px solid var(--line); background:var(--paper); overflow-x:auto; scrollbar-width:none; flex-shrink:0; }
.proj-tab-bar::-webkit-scrollbar { display:none; }
.proj-ptab { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; font-size:12px; font-weight:600; color:var(--ink-soft); background:none; border:1px solid transparent; border-bottom:none; border-radius:6px 6px 0 0; cursor:pointer; white-space:nowrap; font-family:inherit; transition:color .15s, background .15s; position:relative; bottom:-2px; }
.proj-ptab:hover { color:var(--ink); background:var(--paper-2); }
.proj-ptab.active { color:var(--teal); border-color:var(--line); border-bottom-color:var(--paper); background:var(--paper); font-weight:700; }
.proj-ptab-sep { width:1px; background:var(--line); margin:6px 4px; align-self:stretch; flex-shrink:0; }
.proj-ptab-trash { margin-left:auto; display:inline-flex; align-items:center; padding:4px 10px; font-size:13px; color:var(--ink-soft); background:none; border:none; cursor:pointer; border-radius:6px; transition:color .15s; flex-shrink:0; }
.proj-ptab-trash:hover { color:var(--error); background:rgba(192,57,43,.07); }
/* ── PROJECT SUB-TABS (inside Financials / Health) ── */
.psubnav { display:flex; gap:4px; padding:10px 16px; background:var(--paper-2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.psubtab { padding:5px 14px; font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:20px; cursor:pointer; font-family:inherit; transition:background .15s, color .15s, border-color .15s; white-space:nowrap; }
.psubtab:hover { border-color:var(--teal); color:var(--teal); }
.psubtab.active { background:var(--teal); color:#fff; border-color:var(--teal); }
/* ── TRACKER TOOLBAR ── */
.tracker-toolbar { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--paper); flex-wrap:wrap; }
.tracker-search { padding:5px 10px; border:1px solid var(--line); border-radius:6px; font-size:12px; font-family:inherit; background:var(--paper-2); color:var(--ink); width:200px; }
.tracker-search:focus { outline:none; border-color:var(--teal); background:#fff; }
.tracker-filter-pill { padding:4px 12px; font-size:11px; font-weight:600; border:1px solid var(--line); border-radius:20px; background:var(--paper); color:var(--ink-soft); cursor:pointer; font-family:inherit; transition:background .15s, color .15s; white-space:nowrap; }
.tracker-filter-pill:hover { border-color:var(--teal); color:var(--teal); }
.tracker-filter-pill.active { background:var(--teal); color:#fff; border-color:var(--teal); }
/* ── EVM MINI CARDS (inside tracker) ── */
.evm-strip { display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--line); background:#fafaf8; }
.evm-card { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:8px 12px; min-width:88px; text-align:center; cursor:default; }
.evm-card-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); margin-bottom:3px; }
.evm-card-val { font-size:15px; font-weight:700; }
/* ── TASK ROW IMPROVEMENTS ── */
.task-row-summary { background:var(--paper-2); font-weight:600; }
.task-row-summary td { border-top:1px solid var(--line); }
tbody tr[data-taskid]:hover td { background:rgba(31,111,107,.04); cursor:pointer; }
.task-action-btn { background:none; border:none; cursor:pointer; padding:3px 5px; border-radius:5px; color:var(--ink-soft); font-size:13px; line-height:1; transition:color .15s, background .15s; }
.task-action-btn:hover { color:var(--ink); background:var(--paper-2); }
.task-action-btn.danger:hover { color:var(--error); background:rgba(192,57,43,.08); }
.task-action-btn.insert:hover { color:#2563eb; background:#eff6ff; }
.task-action-btn.drag { cursor:grab; }
tr.dnd-dragging td { opacity:.35; background:var(--paper-2) !important; }
/* ── TASK CONTEXT MENU ── */
#taskCtxMenu { position:fixed; z-index:9999; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.15); padding:4px 0; min-width:180px; display:none; }
.ctx-item { display:flex; align-items:center; gap:8px; padding:7px 14px; font-size:12px; font-weight:500; color:var(--ink); cursor:pointer; white-space:nowrap; }
.ctx-item:hover { background:var(--paper-2); }
.ctx-item.danger:hover { background:rgba(192,57,43,.07); color:var(--error); }
.ctx-item.disabled { color:var(--ink-soft); cursor:default; pointer-events:none; }
.ctx-sep { height:1px; background:var(--line); margin:3px 0; }
/* ── PORTFOLIO IMPROVEMENTS ── */
.portfolio-source-local { display:inline-block; font-size:10px; background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; border-radius:3px; padding:1px 5px; }
.portfolio-source-dv { display:inline-block; font-size:10px; background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; border-radius:3px; padding:1px 5px; }
/* ── PROGRESS QUICK-EDIT ── */
.progress-quick-edit { display:inline-flex; align-items:center; gap:3px; font-size:11px; min-width:28px; text-align:right; cursor:pointer; border-radius:4px; padding:1px 3px; }
.progress-quick-edit:hover { background:var(--paper-2); text-decoration:underline; }
/* ── SOLICITATIONS TAB (scoped) ── */
/* Scoped solicitation styles */
.sol-selector-card {
background:#1a1a2e;border-radius:10px;padding:24px 28px;margin-bottom:24px;color:#fff;
}
.sol-selector-step { font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#c9a84c;margin-bottom:4px; }
.sol-selector-heading { font-size:18px;font-weight:600;margin-bottom:16px;color:#fff; }
.sol-selector-row { display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:end; }
.sol-selector-row select {
background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.25);color:#fff;
border-radius:8px;padding:10px 14px;font-size:14px;font-family:inherit;width:100%;
}
.sol-selector-row select:focus { outline:none;border-color:#c9a84c; }
.sol-selector-row select option { background:#1a1a2e;color:#fff; }
.sol-current-chip {
margin-top:10px;padding:8px 14px;background:rgba(201,168,76,.15);
border:1px solid rgba(201,168,76,.3);border-radius:8px;
display:none;align-items:center;gap:10px;
}
.sol-current-chip.visible { display:flex; }
.sol-current-chip-dot { width:8px;height:8px;border-radius:50%;background:#c9a84c;flex-shrink:0; }
.sol-current-chip-name { font-size:13px;color:#f0d98a;font-weight:500; }
.sol-current-chip-ref { font-size:12px;color:rgba(255,255,255,.45);margin-left:auto; }
.sol-meta-grid { display:grid;grid-template-columns:1fr 1fr;gap:0 20px; }
.sol-meta-grid .full { grid-column:1/-1; }
.sol-status-row { display:flex;gap:12px;align-items:center; }
.sol-doc-table { width:100%;border-collapse:collapse;font-size:13px; }
.sol-doc-table th { text-align:left;padding:9px 14px;font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid var(--line);white-space:nowrap; }
.sol-doc-table td { padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle; }
.sol-doc-table tr:last-child td { border-bottom:none; }
.sol-primary-chip { display:inline-flex;align-items:center;gap:4px;background:#dcfce7;color:#166534;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px; }
.sol-upload-zone {
border:2px dashed var(--line);border-radius:8px;padding:24px 16px;text-align:center;cursor:pointer;
transition:border-color .2s,background .2s;margin-bottom:14px;
}
.sol-upload-zone:hover,.sol-upload-zone.dragover { border-color:#c9a84c;background:rgba(201,168,76,.04); }
.sol-upload-zone input[type="file"] { display:none; }
.btn-gold-sol { background:#c9a84c;color:#1a1a2e;border:none;border-radius:6px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit; }
.btn-gold-sol:hover { background:#b89440; }
.btn-gold-sol:disabled { opacity:.5;cursor:not-allowed; }
@media(max-width:760px){.sol-selector-row{grid-template-columns:1fr;}.sol-meta-grid{grid-template-columns:1fr;}}
/* ── Inline-style conversions (auto-generated for CSP cleanup) ── */
.na-c1 { font-size:11px;color:var(--ink-soft); }
.na-c2 { width:100%;margin-top:3px; }
.na-c3 { font-size:12px;font-weight:600;color:var(--ink-soft); }
.na-c4 { display:flex;flex-direction:column;gap:6px;margin-bottom:14px; }
.na-c5 { font-size:12px;font-weight:600;display:block;margin-bottom:4px; }
.na-c6 { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);display:block;margin-bottom:5px; }
.na-c7 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);display:block;margin-bottom:4px; }
.na-c8 { width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;font-family:inherit;color:var(--ink); }
.na-c9 { font-size:10px;color:var(--ink-soft);display:block;margin-bottom:3px; }
.na-c10 { grid-column:1/-1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:4px;margin-top:6px;margin-bottom:2px; }
.na-c11 { width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;box-sizing:border-box; }
.na-c12 { display:none; }
.na-c13 { width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;box-sizing:border-box; }
.na-c14 { grid-column:1/-1; }
.na-c15 { font-size:11px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:3px; }
.na-c16 { padding:8px 14px; }
.na-c17 { background:var(--line);color:var(--ink-soft);border:none; }
.na-c18 { width:100%;margin-top:4px; }
.na-c19 { font-size:12px;font-weight:600; }
.na-c20 { font-size:12px;color:var(--ink-soft);display:block;margin-bottom:4px; }
.na-c21 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;align-items:center;justify-content:center; }
.na-c22 { max-width:160px; }
.na-c23 { padding:0; }
.na-c24 { display:flex;gap:8px;align-items:center; }
.na-c25 { max-width:220px; }
.na-c26 { font-size:28px;margin-bottom:8px; }
.na-c27 { flex:1; }
.na-c28 { background:var(--blue); }
.na-c29 { padding:8px 18px;font-size:13px; }
.na-c30 { padding:7px 14px;font-size:13px; }
.na-c31 { display:none;padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:14px; }
.na-c32 { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);display:block;margin-bottom:8px; }
.na-c33 { display:inline-block;padding:7px 16px;font-size:13px;text-decoration:none; }
.na-c34 { font-size:12px; }
.na-c35 { font-size:15px; }
.na-c36 { display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer; }
.na-c37 { width:100%;margin-top:3px;height:55px;resize:vertical; }
.na-c38 { background:none;border:1px solid var(--line);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:12px; }
.na-c39 { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.na-c40 { font-size:12px;font-weight:600;margin-bottom:2px; }
.na-c41 { border:1px solid var(--border);border-radius:10px;padding:20px 22px; }
.na-c42 { margin:0 0 6px;font-size:15px;color:var(--ink); }
.na-c43 { margin:0 0 14px;font-size:13px;color:var(--ink-soft); }
.na-c44 { font-size:12px;color:var(--error);display:none; }
.na-c45 { padding:7px 16px;font-size:13px; }
.na-c46 { width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:13px;box-sizing:border-box; }
.na-c47 { margin:0 0 6px; }
.na-c48 { font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin-bottom:3px; }
.na-c49 { font-size:15px;font-weight:700; }
.na-c50 { font-size:12px;color:var(--ink-soft);margin:0 0 16px; }
.na-c51 { display:flex;align-items:center;gap:8px; }
.na-c52 { font-size:12px;color:var(--error);margin-bottom:10px;display:none; }
.face-report-downloads { display:flex; gap:8px; flex-wrap:wrap; padding:12px 0 4px; border-top:1px solid var(--line); margin-top:8px; }
.na-c53 { width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px; }
.na-c54 { padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0; }
.na-c55 { display:flex;gap:10px;justify-content:flex-end; }
.na-c56 { width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px; }
.na-c57 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:10px; }
.na-c58 { font-size:11px;display:none;margin-top:4px; }
.na-c59 { font-size:12px;color:var(--success);display:none; }
.na-c60 { display:none;overflow-y:auto;padding:18px 20px;flex:1;flex-direction:column;gap:14px; }
.na-c61 { padding:10px 16px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--ink-soft);font-size:12px;font-weight:600;cursor:pointer;margin-bottom:-1px; }
.na-c62 { background:var(--amber); }
.na-c63 { width:100%; }
.na-c64 { width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;box-sizing:border-box; }
.na-c65 { font-size:12px;padding:5px 10px;background:#4a7c59;color:#fff;border:none;border-radius:6px;cursor:pointer; }
.na-c66 { flex:1;min-width:220px; }
.na-c67 { width:100px; }
.na-c68 { max-width:240px; }
.na-c69 { width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:7px;font-size:12px; }
.na-c70 { flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;box-sizing:border-box; }
.na-c71 { font-size:11px;max-width:180px; }
.na-c72 { margin-bottom:12px; }
.na-c73 { display:flex;gap:8px; }
.na-c74 { font-size:11px;color:var(--ink-soft);margin-top:4px; }
.na-c75 { padding:20px 24px; }
.na-c76 { width:110px; }
.na-c77 { padding:40px;text-align:center;color:var(--ink-soft);font-size:13px; }
.na-c78 { font-size:11px;font-weight:700;color:#374151;margin-bottom:8px; }
.na-c79 { background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-soft);padding:2px 6px;border-radius:6px;margin-left:12px; }
.na-c80 { color:#dc2626; }
.na-c81 { margin-bottom:16px; }
.na-c82 { display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-soft);white-space:nowrap; }
.na-c83 { max-width:140px; }
.na-c84 { display:flex;gap:8px;margin-top:6px; }
.na-c85 { font-size:18px; }
.na-c86 { font-size:13px;font-weight:600; }
.na-c87 { display:none;padding:20px 24px;border-top:1px solid var(--line); }
.na-c88 { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }
.na-c89 { font-size:12px;padding:5px 10px;background:transparent;color:#6b7280;border:1px solid #d1d5db;border-radius:6px;cursor:pointer; }
.na-c90 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:8px 0 12px; }
.na-c91 { display:flex;align-items:flex-start;gap:8px;min-width:180px;flex:1;padding:8px 12px 8px 0; }
.na-c92 { font-size:14px;font-weight:600; }
.na-c93 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900;align-items:center;justify-content:center; }
.na-c94 { width:130px; }
.na-c95 { flex-direction:column;align-items:flex-start;gap:12px; }
.na-c96 { display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
.na-c97 { width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:7px;font-size:12px;box-sizing:border-box; }
.na-c98 { flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:12px;box-sizing:border-box; }
.na-c99 { padding:18px 24px;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px; }
.na-c100 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px; }
.na-c101 { font-size:16px;margin:0; }
.na-c102 { padding:7px 14px;font-size:13px;background:var(--teal); }
.na-c103 { max-width:130px; }
.na-c104 { padding:14px 24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;justify-content:space-between;position:sticky;bottom:0;background:#fff; }
.na-c105 { width:95px; }
.na-c106 { font-size:12px;padding:5px 12px;background:transparent;border:1px solid var(--line);border-radius:6px;cursor:pointer;color:var(--ink-soft); }
.na-c107 { overflow-x:auto; }
.na-c108 { padding:7px 10px;border:1px solid var(--line);border-radius:7px;font-size:12px; }
.na-c109 { background:var(--purple); }
.na-c110 { display:none; }
.na-c111 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px; }
.na-c112 { font-weight:400; }
.na-c113 { padding:7px 14px;font-size:13px;background:var(--paper);color:var(--ink);border:1px solid var(--line); }
.na-c114 { background:#fff;border-radius:12px;width:100%;max-width:480px;margin:20px;box-shadow:0 8px 40px rgba(0,0,0,.2); }
.na-c115 { display:none;width:90px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;box-sizing:border-box; }
.na-c116 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;align-items:center;justify-content:center;overflow-y:auto;padding:20px; }
.na-c117 { padding:24px; }
.na-c118 { border:none;border-radius:0; }
.na-c119 { display:flex;align-items:flex-start;gap:8px;min-width:180px;flex:1;padding:8px 12px; }
.na-c120 { padding:18px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff;z-index:1; }
.na-c121 { width:100%;accent-color:var(--teal); }
.na-c122 { display:flex;align-items:center;gap:10px;margin-bottom:8px; }
.na-c123 { padding:8px 14px;background:var(--accent,#2563eb);color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap; }
.na-c124 { padding:7px 14px;font-size:13px;background:transparent;border:1px solid var(--line);border-radius:6px;cursor:pointer;color:var(--ink-soft); }
.na-c125 { font-size:12px;color:#1a7a4a;margin-right:4px;display:none; }
.na-c126 { border-top:1px solid var(--line);padding-top:12px; }
.na-c127 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2100;align-items:center;justify-content:center; }
.na-c128 { font-size:11px;color:var(--ink-soft);white-space:nowrap; }
.na-c129 { border-top:1px solid #E8EEF6;padding-top:14px; }
.na-c130 { padding:7px 16px;background:transparent;border:1px solid var(--line);border-radius:7px;font-size:13px;cursor:pointer; }
.na-c131 { display:flex;align-items:center;gap:10px; }
.na-c132 { width:90px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:12px;box-sizing:border-box; }
.na-c133 { background:#fff;border-radius:12px;width:100%;max-width:740px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.25); }
.na-c134 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px; }
.na-c135 { max-width:200px; }
.na-c136 { display:flex;gap:8px;justify-content:flex-end; }
.na-c137 { padding:20px 24px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between; }
.na-c138 { display:flex;justify-content:space-between;align-items:flex-start;width:100%;flex-wrap:wrap;gap:8px; }
.na-c139 { font-size:12px;color:var(--error);margin-right:4px;display:none; }
.na-c140 { max-width:190px; }
.na-c141 { padding:12px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-shrink:0; }
.na-c142 { margin-top:16px; }
.na-c143 { margin:0 0 16px;font-size:16px;font-weight:700; }
.na-c144 { display:flex;flex-direction:column;gap:6px; }
.na-c145 { margin-bottom:14px; }
.na-c146 { grid-column:1/-1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:2px; }
.na-c147 { text-align:center;color:var(--ink-soft); }
.na-c148 { padding:12px 24px 20px;display:flex;gap:8px;justify-content:flex-end; }
.na-c149 { padding:7px 16px;background:var(--teal);color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer; }
.na-c150 { font-size:12px;display:none; }
.na-c151 { padding:8px 20px; }
.na-c152 { background:var(--green); }
.na-c153 { background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-soft); }
.na-c154 { font-size:12px;padding:4px 8px;border:1.5px solid var(--steel);border-radius:6px;color:var(--navy);background:var(--white);font-family:'DM Sans',sans-serif; }
.na-c155 { padding:6px 20px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13px;cursor:pointer; }
.na-c156 { font-size:13px;font-weight:700;margin-bottom:14px;color:var(--ink); }
.na-c157 { display:flex;gap:6px;margin-bottom:8px; }
.na-c158 { font-size:12px;color:#1a7a4a;display:none; }
.na-c159 { display:flex;align-items:flex-end; }
.na-c160 { margin:0 0 8px;font-size:15px;font-weight:700;color:var(--ink); }
.na-c161 { background:#f0f4ff;color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:12px; }
.na-c162 { display:flex;align-items:center;gap:12px;min-width:0;flex:1; }
.na-c163 { width:80px; }
.na-c164 { display:none;margin-top:0;border-top:2px solid var(--teal);background:#fafaf8; }
.na-c165 { color:#dc2626;font-size:12px;margin:0;padding:0 20px 4px;display:none;flex-shrink:0; }
.na-c166 { padding:8px 18px;font-size:13px;background:var(--accent); }
.na-c167 { background:var(--paper);border-radius:12px;padding:24px 28px;width:100%;max-width:380px;box-shadow:0 8px 32px rgba(0,0,0,.18); }
.na-c168 { padding:6px 20px;background:var(--accent,#2563eb);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer; }
.na-c169 { font-size:12px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:var(--paper);font-family:inherit; }
.na-c170 { display:none;border-top:1px solid var(--line); }
.na-c171 { display:flex;gap:6px;flex-wrap:wrap;align-items:center; }
.na-c172 { width:50px; }
.na-c173 { font-size:12px;color:#0369a1; }
.na-c174 { padding:6px 20px;background:#dc2626;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer; }
.na-c175 { display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;white-space:nowrap; }
.na-c176 { font-size:12px;color:var(--ink-soft);white-space:nowrap;min-width:50px; }
.na-c177 { font-size:13px;color:var(--ink-soft);margin:10px 0 20px; }
.na-c178 { width:32px; }
.na-c179 { display:none;background:#f8fafc;padding:16px 20px; }
.na-c180 { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px; }
.na-c181 { display:none;font-size:11px;color:var(--ink-soft);margin:4px 0; }
.na-c182 { display:none;padding:16px 24px;border-top:1px solid var(--line); }
.na-c183 { display:flex;flex-direction:column;gap:8px; }
.na-c184 { padding:10px 16px;border:none;border-bottom:2px solid var(--accent,#2563eb);background:transparent;color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;margin-bottom:-1px; }
.na-c185 { display:none;margin-bottom:10px;font-size:13px; }
.na-c186 { width:60px; }
.na-c187 { display:grid;gap:12px; }
.na-c188 { font-size:13px;color:var(--ink-soft);margin-bottom:20px; }
.na-c189 { display:flex;gap:8px;flex-shrink:0;margin-top:4px; }
.na-c190 { padding:6px 14px;font-size:12px;background:#16a34a; }
.na-c191 { padding:7px 16px;background:var(--accent,#2563eb);color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer; }
.na-c192 { border-color:rgba(31,111,107,.35); }
.na-c193 { display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:10px;background:#f3f4f6;color:#374151; }
.na-c194 { background:#f0f7ff;border:1px solid #b0ccee;border-radius:8px;padding:12px 16px;font-size:13px;color:#1a3a5e;margin-bottom:16px; }
.na-c195 { font-size:18px;color:#dc2626; }
.na-c196 { grid-column:1/-1;display:flex;gap:24px;flex-wrap:wrap; }
.na-c197 { margin-bottom:14px;display:flex;flex-direction:column;gap:6px; }
.na-c198 { display:flex;gap:6px;align-items:center; }
.na-c199 { display:flex;flex-wrap:wrap;gap:20px; }
.na-c200 { background:var(--paper);border-radius:12px;max-width:640px;width:92%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3); }
.na-c201 { background:var(--red); }
.na-c202 { display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);border-radius:6px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap; }
.na-c203 { margin:0;font-size:16px;font-weight:700;color:#dc2626; }
.na-c204 { font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em; }
.na-c205 { min-width:0; }
.na-c206 { margin-bottom:16px;font-size:13px;color:var(--ink,#1e293b);max-height:280px;overflow-y:auto; }
.na-c207 { flex:1;padding:7px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px; }
.na-c208 { padding:7px 16px;background:var(--teal,#0d9488);color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer; }
.na-c209 { width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;resize:vertical;box-sizing:border-box; }
.na-c210 { display:flex;gap:12px;flex-wrap:wrap;align-items:center; }
.na-c211 { padding:7px 16px;font-size:13px;background:#7c3aed; }
.na-c212 { flex:1;padding:10px 16px;font-size:11px;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:.04em;border-bottom:3px solid transparent;cursor:default; }
.na-c213 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8fa3bc;margin-bottom:10px; }
.na-c214 { font-size:13px;font-weight:500;color:var(--teal);margin-top:8px;display:none; }
.na-c215 { width:100%;resize:vertical; }
.na-c216 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2050;align-items:center;justify-content:center; }
.na-c217 { margin-top:20px;border:1px solid #e9d5ff;border-radius:8px;overflow:hidden; }
.na-c218 { overflow-y:auto;padding:16px 20px;flex:1; }
.na-c219 { background:#fff;border-radius:12px;width:100%;max-width:680px;margin:20px;padding:24px;box-shadow:0 8px 40px rgba(0,0,0,.2);max-height:90vh;overflow:auto; }
.na-c220 { font-size:12px;color:#1a7a4a;align-self:center;display:none; }
.na-c221 { display:flex;gap:0;flex-wrap:wrap; }
.na-c222 { flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px; }
.na-c223 { font-size:11px;color:var(--ink-soft);margin-top:1px; }
.na-c224 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:8px; }
.na-c225 { display:none;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--paper-2);font-size:12px; }
.na-c226 { display:flex;align-items:center;gap:4px; }
.na-c227 { padding:7px 14px;font-size:13px;background:var(--ink-soft);color:#fff; }
.na-c228 { font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em; }
.na-c229 { display:none;padding:12px 20px;border-bottom:1px solid var(--line); }
.na-c230 { display:none;margin:0;border-top:2px solid var(--teal);background:#fafaf8; }
.na-c231 { display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none; }
.na-c232 { font-size:12px;color:var(--ink-soft);margin:0 0 12px; }
.na-c233 { flex-wrap:wrap;gap:8px;margin-bottom:0; }
.na-c234 { background:var(--paper,#fff);border-radius:10px;padding:24px;max-width:520px;width:94%;box-shadow:0 8px 32px rgba(0,0,0,.22);max-height:90vh;overflow-y:auto; }
.na-c235 { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#faf5ff;cursor:pointer;user-select:none; }
.na-c236 { font-size:12px;display:none;align-self:center; }
.na-c237 { font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px; }
.na-c238 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px; }
.na-c239 { display:none;color:#dc2626;font-size:13px;margin-top:10px; }
.na-c240 { font-size:12px;color:#6b21a8; }
.na-c241 { max-width:180px;max-height:60px;display:none;border:1px solid #bae6fd;border-radius:4px;padding:4px;background:#fff; }
.na-c242 { margin:0 0 18px;font-size:15px;font-weight:700;color:var(--ink); }
.na-c243 { padding:8px 18px;font-size:13px;background:#7c3aed; }
.na-c244 { font-size:13px;color:var(--ink-soft); }
.na-c245 { font-size:12px;font-weight:700;color:#6b21a8;text-transform:uppercase;letter-spacing:.06em; }
.na-c246 { display:flex;background:#166534; }
.na-c247 { font-size:11px;max-width:220px; }
.na-c248 { font-size:12px;color:var(--ink-soft);padding:8px 0; }
.na-c249 { padding:7px 20px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13px;cursor:pointer; }
.na-c250 { background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:12px; }
.na-c251 { font-size:12px;font-weight:700;color:#0369a1;text-transform:uppercase;letter-spacing:.06em; }
.na-c252 { padding:7px 16px;border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;background:transparent;color:var(--ink-soft);font-size:12px;font-weight:600;cursor:pointer;margin-right:4px; }
.na-c253 { display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
.na-c254 { display:none;padding:10px 14px;border-radius:6px;font-size:13px;margin:14px 20px 0; }
.na-c255 { display:flex;border-bottom:1px solid var(--line);padding:0 20px;flex-shrink:0;background:var(--paper); }
.na-c256 { display:none;margin-top:20px; }
.na-c257 { padding:7px 20px;background:var(--accent,#2563eb);color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer; }
.na-c258 { width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;font-family:inherit;color:var(--ink);resize:vertical; }
.na-c259 { display:flex;gap:8px;align-items:center;flex-shrink:0; }
.na-c260 { display:none;margin-top:16px; }
.na-c261 { display:flex;gap:8px;margin-top:8px;flex-wrap:wrap; }
.na-c262 { width:100%;margin-top:3px;height:50px;resize:vertical; }
.na-c263 { margin:0;font-size:16px;font-weight:700; }
.na-c264 { margin:0; }
.na-c265 { padding:5px 14px;font-size:12px;flex-shrink:0; }
.na-c266 { margin-top:24px; }
.na-c267 { font-size:18px;color:#16a34a; }
.na-c268 { display:none;margin-top:8px;border:1px solid var(--line);border-radius:7px;max-height:160px;overflow-y:auto; }
.na-c269 { max-width:180px; }
.na-c270 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2200;align-items:center;justify-content:center; }
.na-c271 { background:var(--paper,#fff);border-radius:12px;max-width:560px;width:94%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.28); }
.na-c272 { display:contents; }
.na-c273 { font-size:12px;color:#4b1d96;margin-bottom:12px; }
.na-c274 { display:inline-block;background:#0078d4;color:#fff;padding:10px 24px;border-radius:6px;font-size:14px;font-weight:600;text-decoration:none;letter-spacing:.02em; }
.na-c275 { padding:6px 12px;font-size:12px; }
.na-c276 { background:#fff;border-radius:12px;width:100%;max-width:400px;margin:20px;padding:28px 24px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.2); }
.na-c277 { background:var(--teal); }
.na-c278 { display:flex;flex-direction:column;gap:10px;margin-bottom:14px; }
.na-c279 { background:#fff;border-radius:12px;width:100%;max-width:560px;margin:20px;padding:24px;box-shadow:0 8px 40px rgba(0,0,0,.2);max-height:90vh;overflow:auto; }
.na-c280 { display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end; }
.na-c281 { display:none;padding:16px 24px;background:#f8fafc;border-bottom:1px solid var(--line); }
.na-c282 { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px; }
.na-c283 { font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.na-c284 { background:var(--error);border:none; }
.na-c285 { font-size:11px;color:var(--ink-soft);margin-bottom:4px; }
.na-c286 { padding:7px 14px;font-size:13px;background:var(--sage);color:#fff; }
.na-c287 { font-size:12px;color:var(--ink-soft);white-space:nowrap; }
.na-c288 { display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px; }
.na-c289 { color:rgba(255,255,255,.55);font-size:12px;text-decoration:none;padding:4px 10px;border:1px solid rgba(255,255,255,.2);border-radius:6px; }
.na-c290 { background:var(--navy); }
.na-c291 { width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:12px;box-sizing:border-box;resize:vertical;margin-bottom:8px; }
.na-c292 { padding:7px 20px;background:var(--accent,#2563eb);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer; }
.na-c293 { font-size:36px;margin-bottom:12px; }
.na-c294 { width:100%;margin-top:3px;height:65px;resize:vertical; }
.na-c295 { padding:8px 12px;font-size:12px;white-space:nowrap; }
.na-c296 { display:flex;align-items:center;justify-content:space-between; }
.na-c297 { display:none;padding:16px 24px;border-bottom:1px solid var(--line); }
.na-c298 { color:var(--ink-soft);font-size:12px;align-self:center; }
.na-c299 { margin-top:20px; }
.na-c300 { background:#fff;border-radius:12px;width:100%;max-width:480px;margin:20px;padding:24px;box-shadow:0 8px 40px rgba(0,0,0,.2);max-height:90vh;overflow:auto; }
.na-c301 { border:none;background:none;cursor:pointer;font-size:20px;color:var(--ink-soft); }
.na-c302 { background:var(--paper,#fff);border-radius:10px;padding:24px;max-width:500px;width:94%;box-shadow:0 8px 32px rgba(0,0,0,.22); }
.na-c303 { display:flex;justify-content:flex-end;gap:10px;margin-top:20px; }
.na-c304 { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px; }
.na-c305 { display:none;color:rgba(255,255,255,.55);font-size:12px;text-decoration:none;padding:4px 10px;border:1px solid rgba(255,255,255,.2);border-radius:6px; }
.na-c306 { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f0f9ff;cursor:pointer;user-select:none; }
.na-c307 { padding:9px 14px;font-size:13px; }
.na-c308 { display:flex;gap:10px;justify-content:flex-end;margin-top:18px; }
.na-c309 { display:flex;gap:8px;margin-top:14px;align-items:center; }
.na-c310 { border:1px solid var(--line);border-radius:8px;padding:14px; }
.na-c311 { width:28px;height:28px;border-radius:50%;background:#fef3c7;color:#92400e;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0; }
.na-c312 { display:flex;gap:16px;flex-wrap:wrap; }
.na-c313 { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.na-c314 { max-width:260px; }
.na-c315 { padding:8px 16px;background:var(--accent,#2563eb);color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap; }
.na-c316 { background:#b45309;color:#fff; }
.na-c317 { padding:7px 14px;font-size:13px;background:#4a7c59;color:#fff; }
.na-c318 { padding:8px 18px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13px;cursor:pointer; }
.na-c319 { background:#f0fdf4;padding:16px 20px; }
.na-c320 { width:80px;text-align:center; }
.na-c321 { display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.na-c322 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px; }
.na-c323 { padding:7px 14px;font-size:13px;background:var(--accent); }
.na-c324 { padding:16px 20px;background:#faf5ff;display:none; }
.na-c325 { max-width:300px;font-size:13px; }
.na-c326 { display:flex;flex-direction:column;gap:10px;max-width:540px; }
.na-c327 { background:#fff;color:#374151;border:1px solid var(--line);display:none; }
.na-c328 { width:24px; }
.na-c329 { width:100%;resize:vertical;font-size:12px; }
.na-c330 { display:flex;gap:8px;align-items:flex-end; }
.na-c331 { max-width:120px; }
.na-c332 { margin-top:4px;font-size:10px;color:var(--ink-soft); }
.na-c333 { font-size:12px;color:var(--ink-soft);padding:16px 0; }
.na-c334 { font-size:11px;color:#6b21a8; }
.na-c335 { display:flex;flex-direction:column;gap:6px;margin-bottom:16px; }
.na-c336 { display:flex;align-items:center;gap:10px;flex-shrink:0; }
.na-c337 { display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px; }
.na-c338 { display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start; }
.na-c339 { flex:1;padding:10px 16px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.04em;border-bottom:3px solid #4ade80;cursor:default; }
.na-c340 { resize:vertical; }
.na-c341 { display:flex;gap:8px;margin-top:4px; }
.na-c342 { background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin-bottom:16px; }
.na-c343 { font-size:10px;color:#6b7280; }
.na-c344 { display:flex;gap:0;padding:0 0 0 0;border-bottom:1px solid var(--line);margin-bottom:-1px; }
.na-c345 { display:none;border:1px solid #bbf7d0;border-radius:10px;overflow:hidden;margin-bottom:16px; }
.na-c346 { padding:7px 14px;font-size:13px;background:var(--ink-soft); }
.na-c347 { background:#7c3aed;color:#fff; }
.na-c348 { color:#1e40af; }
.na-c349 { font-size:12px;padding:5px 12px;background:#0369a1;color:#fff;border:none;border-radius:6px;cursor:pointer; }
.na-c350 { font-weight:600;color:#fff;white-space:nowrap; }
.na-c351 { padding:7px 14px;font-size:13px;background:#0f6f6b;color:#fff; }
.na-c352 { background:var(--paper,#fff);border-radius:10px;padding:24px;max-width:480px;width:94%;box-shadow:0 8px 32px rgba(0,0,0,.18); }
.na-c353 { padding:16px 18px 16px 34px; }
.na-c354 { display:none;grid-column:1/-1; }
.na-c355 { margin-bottom:8px; }
.na-c356 { padding:0;overflow-x:auto; }
.na-c357 { font-weight:500;font-size:13px; }
.na-c358 { display:inline-flex;align-items:center;gap:5px;padding:6px 14px;background:var(--blue);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap; }
.na-c359 { padding:16px 20px;background:#f0f9ff;display:none; }
.na-c360 { background:var(--line);color:var(--ink-soft);border:none;padding:7px 14px;font-size:13px; }
.na-c361 { padding:7px 16px;border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;background:transparent;color:var(--ink-soft);font-size:12px;font-weight:600;cursor:pointer; }
.na-c362 { color:#dc2626;font-size:12px;margin:8px 0 0;display:none; }
.na-c363 { padding:12px 18px; }
.na-c364 { background:var(--paper-2); }
.na-c365 { display:flex;gap:10px;justify-content:center; }
.na-c366 { background:var(--paper,#fff);border-radius:10px;padding:24px;max-width:560px;width:95%;box-shadow:0 8px 32px rgba(0,0,0,.18); }
.na-c367 { display:none;align-items:center;gap:8px;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:12px; }
.na-c368 { display:none;color:#dc2626;font-size:12px; }
.na-c369 { font-size:12px;color:#374151;margin-bottom:6px; }
.na-c370 { padding:12px 20px; }
.na-c371 { display:none;color:#dc2626;font-size:12px;margin-top:10px;font-weight:600; }
.na-c372 { font-size:13px; }
.na-c373 { display:flex;flex-direction:column;gap:0; }
.na-c374 { background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:7px;padding:7px 14px;font-size:12px;cursor:pointer; }
.na-c375 { color:#dc2626; }
.na-c376 { display:flex;gap:8px;margin-bottom:10px;align-items:center; }
.na-c377 { background:#dc2626;border-color:#dc2626;padding:7px 16px;font-size:13px; }
.na-c378 { font-size:12px;color:rgba(255,255,255,.65);display:block;margin-bottom:6px; }
.na-c379 { padding:6px 14px;font-size:12px; }
.na-c380 { padding:7px 14px;font-size:13px;background:#7c3aed; }
.na-c381 { display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:rgba(201,168,76,.2);border:1px solid rgba(201,168,76,.4);color:#f0d98a;border-radius:6px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap; }
.na-c382 { border:1px solid var(--line);border-radius:8px;padding:14px;flex-shrink:0; }
.na-c383 { max-height:220px;overflow-y:auto; }
.na-c384 { display:none;margin-top:0;border-top:3px solid var(--teal); }
.na-c385 { padding:7px 18px;font-size:13px; }
.na-c386 { margin-top:20px;border:1px solid #bae6fd;border-radius:8px;overflow:hidden; }
.na-c387 { display:flex;align-items:center;gap:6px; }
.na-c388 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2100;align-items:center;justify-content:center; }
.na-c389 { display:none;margin-bottom:16px; }
.na-c390 { padding:20px;text-align:center;color:var(--ink-soft); }
.na-c391 { display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;margin-bottom:16px; }
.na-c392 { font-size:12px;min-width:700px; }
.na-c393 { font-size:10px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em; }
.na-c394 { padding:16px; }
.na-c395 { width:100%;padding:7px 8px;border-radius:7px;font-size:12px;font-weight:600;text-align:center;background:#f3f4f6;color:#374151; }
.na-c396 { padding:8px;font-size:12px;color:var(--ink-soft); }
.na-c397 { background:var(--paper);border-radius:12px;max-width:720px;width:94%;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3); }
.na-c398 { background:var(--paper);border-radius:12px;padding:24px 28px;width:100%;max-width:560px;box-shadow:0 8px 32px rgba(0,0,0,.18);max-height:90vh;overflow-y:auto; }
.na-c399 { background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:7px;padding:7px 14px;font-size:12px;cursor:pointer; }
.na-c400 { display:grid;gap:10px; }
.na-c401 { width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;flex-shrink:0; }
.na-c402 { overflow-y:auto;padding:18px 20px;flex:1;display:flex;flex-direction:column;gap:18px; }
.na-c403 { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.na-c404 { display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap; }
.na-c405 { max-width:110px; }
.na-c406 { grid-column:1/-1;display:flex;gap:20px;flex-wrap:wrap; }
.na-c407 { margin-bottom:20px; }
.na-c408 { font-size:11px;color:#0369a1;background:#e0f2fe;border-radius:6px;padding:8px 12px;margin-bottom:14px;line-height:1.8; }
.na-c409 { padding:7px 20px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:13px;cursor:pointer; }
.na-c410 { background:#0f6f6b;color:#fff; }
.na-c411 { overflow-y:auto;padding:18px 20px;flex:1;display:flex;flex-direction:column;gap:16px; }
.na-c412 { padding:7px 16px;border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;background:var(--accent,#2563eb);color:#fff;font-size:12px;font-weight:600;cursor:pointer;margin-right:4px; }
.na-c413 { font-size:12px;color:var(--ink-soft);margin-bottom:14px; }
.na-c414 { grid-column:1/-1;display:none;gap:12px 20px;grid-template-columns:1fr 1fr; }
.na-c415 { display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px; }
.na-c416 { font-size:12px;padding:5px 12px;background:#7c3aed;color:#fff;border:none;border-radius:6px;cursor:pointer; }
.na-c417 { font-size:13px;font-weight:600;color:#166534;margin-bottom:4px; }
.na-c418 { font-size:11px;font-weight:600;color:var(--ink-soft);margin-right:2px; }
.na-c419 { border-top:1px solid var(--steel); }
.na-c420 { color:#3e5566; }
.na-c421 { width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;box-sizing:border-box;margin-bottom:8px; }
.na-c422 { font-size:11px;color:#6b7280;font-style:italic; }
.na-c423 { margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px solid var(--steel,#E8EEF6);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--muted,#8fa3bc);cursor:pointer;font-family:inherit; }
.na-c424 { padding:28px;text-align:center;color:var(--ink-soft);font-size:13px; }
.na-c425 { margin-top:12px; }
/* z-index raised from 2100 to clear #taskEditModal's drawer (z-index:10000, see
task-tracker-theme.css) — this is the delete-confirmation modal (#deleteImpactModal)
triggerSoftDelete opens for every delete action including ones fired FROM WITHIN
the open task drawer (e.g. removing an issue-log entry). At 2100 it opened correctly
but rendered entirely behind the drawer, invisible — which read as "delete does
nothing" for any delete action taken while the drawer was open. */
.na-c426 { display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10500;align-items:center;justify-content:center; }
.na-c427 { width:28px;height:28px;border-radius:50%;background:#fce7f3;color:#9d174d;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0; }
.na-c428 { display:grid;grid-template-columns:360px 1fr;gap:20px;align-items:start; }
.na-c429 { display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line);flex-shrink:0; }
.na-c430 { color:var(--teal); }
.na-c431 { width:28px;height:28px;border-radius:50%;background:#dcfce7;color:#166534;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0; }
.na-c432 { display:none;margin-top:12px; }
.na-c433 { width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;box-sizing:border-box;resize:vertical; }
.na-c434 { margin-bottom:0; }
.na-c435 { display:flex;gap:8px;justify-content:flex-end;margin-top:20px; }
.na-c436 { width:28px;height:28px;border-radius:50%;background:#dbeafe;color:#1e40af;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0; }
/* === Hover states for inline-handler-free icon buttons (CSP hardening, issue #4) === */
.icon-fade-btn { opacity: .5; }
.icon-fade-btn:hover { opacity: 1; }
.trash-icon-btn-hover:hover { color: #ef4444; }
.blob-item-hover:hover { background: #f0f4ff; }
/* ═══════════════════════════════════════════════════════════════════
DESIGN REFRESH — wider shell, polished tables, compact button system
═══════════════════════════════════════════════════════════════════ */
/* Data table (analytics/procurement inner tables) polished */
.data-table { font-size: 12.5px; }
/* ── Compact toolbar button system ── */
.tbtn {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px;
font-size: 12px; font-weight: 600;
border-radius: 7px; border: 1.5px solid transparent;
cursor: pointer; font-family: inherit; white-space: nowrap;
transition: background .13s, border-color .13s, color .13s, opacity .13s;
line-height: 1.4;
user-select: none;
}
.tbtn-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.tbtn-primary:hover { opacity: .88; }
.tbtn-secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
.tbtn-secondary:hover { background: rgba(31,111,107,.08); }
.tbtn-outline {
background: var(--paper);
color: var(--ink-soft);
border-color: var(--line);
}
.tbtn-outline:hover { border-color: #aaa; color: var(--ink); background: var(--paper-2); }
.tbtn-outline.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.tbtn-ghost {
background: transparent; color: var(--ink-soft);
border-color: transparent; padding: 5px 9px;
}
.tbtn-ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
.tbtn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
/* button groups */
.tbtn-group { display: inline-flex; align-items: center; gap: 4px; }
.tbtn-segmented { display: inline-flex; align-items: center; }
.tbtn-segmented .tbtn {
border-radius: 0; border-right-width: 0;
}
.tbtn-segmented .tbtn:first-child { border-radius: 7px 0 0 7px; }
.tbtn-segmented .tbtn:last-child { border-radius: 0 7px 7px 0; border-right-width: 1.5px; }
/* ── Finance toolbar layout ── */
.fin-toolbar {
padding: 11px 24px;
border-bottom: 1px solid var(--line);
background: #faf9f5;
display: flex; flex-direction: column; gap: 9px;
}
.fin-filter-row,
.fin-action-row {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.fin-action-spacer { flex: 1; min-width: 12px; }
.fin-sep { width: 1px; height: 22px; background: var(--line); flex-shrink: 0; margin: 0 3px; }
.fin-search-box { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.fin-search-icon {
position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
font-size: 12px; pointer-events: none; user-select: none; opacity: .55;
}
.fin-search-input {
width: 100%; padding: 5px 10px 5px 28px;
border: 1.5px solid var(--line); border-radius: 7px;
font-size: 12px; font-family: inherit; background: var(--paper);
color: var(--ink); transition: border-color .15s; height: 30px;
}
.fin-search-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,111,107,.08); }
.fin-search-input::placeholder { color: #aab3bc; }
.fin-select {
padding: 4px 10px; border: 1.5px solid var(--line); border-radius: 7px;
font-size: 12px; font-family: inherit; background: var(--paper);
color: var(--ink); cursor: pointer; transition: border-color .15s;
height: 30px; appearance: auto;
}
.fin-select:focus { outline: none; border-color: var(--teal); }
.fin-select--sm { max-width: 130px; }
.fin-select--md { max-width: 170px; }
/* ── Month/Year picker — a single button that shows the current selection
(year, or "Mon YYYY") right inside it, opening a modern floating calendar
popover instead of relying on the native widget. ── */
.fin-month-picker { position: relative; flex-shrink: 0; }
.fin-month-picker-btn {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
font-weight: 600; white-space: nowrap;
}
.fin-month-picker-popup {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
width: 240px; background: var(--paper); border: 1px solid var(--line);
border-radius: 12px; box-shadow: 0 8px 28px rgba(15,36,51,.16);
padding: 12px;
}
.fin-month-picker-nav {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.fin-month-picker-nav-btn {
width: 26px; height: 26px; border: none; border-radius: 6px;
background: transparent; color: var(--ink-soft); font-size: 15px;
cursor: pointer; line-height: 1;
}
.fin-month-picker-nav-btn:hover { background: var(--paper-2); color: var(--ink); }
#finMonthPickerYearLabel { font-size: 13px; font-weight: 700; color: var(--ink); }
.fin-month-picker-whole-year {
display: block; width: 100%; margin-bottom: 8px; padding: 6px 0;
border: 1.5px solid var(--line); border-radius: 7px; background: var(--paper-2);
color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer;
}
.fin-month-picker-whole-year:hover { border-color: var(--teal); color: var(--teal); }
.fin-month-picker-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.fin-month-picker-cell {
padding: 7px 0; border: 1.5px solid transparent; border-radius: 7px;
background: var(--paper-2); color: var(--ink); font-size: 12px; font-weight: 500;
cursor: pointer; font-family: inherit;
}
.fin-month-picker-cell:hover { border-color: var(--teal); }
.fin-month-picker-cell--active { background: var(--teal); color: #fff; font-weight: 700; }
.fin-check-group { display: flex; align-items: center; gap: 12px; margin-left: 2px; }
.fin-check {
display: flex; align-items: center; gap: 5px;
font-size: 12px; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
}
.fin-check input[type=checkbox] {
accent-color: var(--teal); width: 13px; height: 13px; cursor: pointer;
}
.fin-sync-status { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
/* ── Basic/Advanced mode toggle — pill switch in its own bordered chip so it
doesn't blend into the (now light-gray, borderless) header zone. ── */
.fin-mode-toggle { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fin-mode-switch {
display: inline-flex; align-items: center; gap: 8px;
background: #fff; border: 1px solid var(--fj-border, #E2E8F0); border-radius: 999px;
padding: 7px 14px 7px 12px;
font-size: 12px; font-weight: 600; color: var(--fj-text, #0F172A); cursor: pointer; white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.fin-mode-switch input[type=checkbox] {
/* visually hidden but still accessible/clickable — the track+thumb below is the visible control */
position: absolute; top: 0; left: 0; opacity: 0; width: 34px; height: 20px; margin: 0; cursor: pointer;
}
.fin-mode-switch-track {
position: relative; flex-shrink: 0;
width: 34px; height: 20px; border-radius: 999px;
background: #CBD5E1; transition: background .15s;
}
.fin-mode-switch-wrap { position: relative; width: 34px; height: 20px; flex-shrink: 0; }
.fin-mode-switch-track::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
transition: transform .15s;
}
.fin-mode-switch input[type=checkbox]:checked ~ .fin-mode-switch-track,
.fin-mode-switch:has(input:checked) .fin-mode-switch-track { background: var(--teal); }
.fin-mode-switch input[type=checkbox]:checked ~ .fin-mode-switch-track::after,
.fin-mode-switch:has(input:checked) .fin-mode-switch-track::after { transform: translateX(14px); }
.fin-mode-switch input[type=checkbox]:focus-visible ~ .fin-mode-switch-track { outline: 2px solid var(--teal); outline-offset: 2px; }
body.journal-basic-mode .advanced-only { display: none !important; }
/* ── Payment status badge (Paid / Not Paid) — distinct from workflow Status.
Pill shape (999px radius) matches the Azure Portal / Fluent badge style. ── */
.fin-paid-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
white-space: nowrap;
}
.fin-paid-badge--yes { background: #d1fae5; color: #065f46; }
.fin-paid-badge--no { background: #f3f4f6; color: #6b7280; }
.fin-payment-modal-box { max-width: 420px; }
.fin-count-badge {
font-size: 11px; background: rgba(0,0,0,.06); color: var(--ink-soft);
padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
/* ── Bank Match modal (bank statement upload + line-by-line matching) ── */
.bank-stmt-modal-box { max-width: 900px; }
.bank-stmt-hidden { display: none; }
.bank-stmt-hint { color: var(--ink-soft); margin-top: 4px; }
.bank-stmt-summary {
display: flex; flex-wrap: wrap; gap: 16px;
padding: 12px 20px; background: var(--paper-2); border-bottom: 1px solid var(--line);
font-size: 12px; color: var(--ink-soft);
}
.bank-stmt-summary strong { color: var(--ink); }
.bank-stmt-num { text-align: right; }
#bsLinesTable td, #bsLinesTable th { font-size: 12px; }
.bank-stmt-match-select { display: block; width: 100%; max-width: 260px; font-size: 12px; padding: 3px 6px; }
.bank-stmt-manual-search { margin-top: 4px; }
.bank-stmt-near-miss {
margin-top: 4px; font-size: 11px; color: #92400e; background: #fef3c7;
border-radius: 4px; padding: 3px 6px; max-width: 260px;
}
.bank-stmt-matched-tag {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 600; color: #065f46; background: #d1fae5;
padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════════════════
EXPENSE JOURNALS — dashboard re-architecture
Scoped to .fin-modern-panel (descendant selectors) so the Invoices sub-tab
and the rest of the admin app — which share .panel, .tbtn, .fin-toolbar,
.fin-select, etc. — are unaffected. The Finance sub-tab nav (.na-c344 /
.na-c412 family) IS shared between Journals and Invoices by design — it's
the switcher between them — so that piece is fixed globally on purpose.
══════════════════════════════════════════════════════════════════════════ */
.fin-modern-panel {
--fj-bg: #F8FAFC;
--fj-surface: #FFFFFF;
--fj-primary: #0F766E;
--fj-success: #16A34A;
--fj-info: #2563EB;
--fj-warning: #D97706;
--fj-danger: #DC2626;
--fj-purple: #7C3AED;
--fj-text: #0F172A;
--fj-text-soft: #64748B;
--fj-border: #E2E8F0;
--fj-radius: 12px;
--fj-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
background: var(--fj-bg);
max-width: 1600px; margin: 0 auto;
padding: 24px 24px 60px;
display: flex; flex-direction: column; gap: 20px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Icon sprite — visually hidden holder for defs, no external request */
.fin-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fin-icon { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.fin-kpi-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* ── Zone 1: Header — no card, no border, just hierarchy ── */
.fin-header-zone { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fin-page-title {
font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--fj-text); line-height: 1.15;
}
.fin-page-subtitle {
font-size: 14px; font-weight: 400; color: var(--fj-text-soft); margin-top: 6px;
}
/* ── Zone 2: Filters + Actions — one lightweight card, single compressed row ── */
.fin-modern-panel .fin-toolbar {
background: var(--fj-surface);
border: 1px solid var(--fj-border);
border-radius: var(--fj-radius);
padding: 10px 14px;
}
.fin-modern-panel .fin-toolbar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fin-modern-panel .fin-check { flex-shrink: 0; }
.fin-modern-panel .fin-search-box { flex: 1 1 340px; min-width: 340px; max-width: 480px; }
.fin-modern-panel .fin-search-input,
.fin-modern-panel .fin-select {
border: 1.5px solid var(--fj-border);
border-radius: 10px;
background: var(--fj-surface);
color: var(--fj-text);
height: 34px;
}
.fin-modern-panel .fin-search-icon { color: var(--fj-text-soft); left: 10px; opacity: 1; }
.fin-modern-panel .fin-search-input { padding-left: 32px; }
.fin-modern-panel .fin-month-picker-popup {
border: 1px solid var(--fj-border); border-radius: var(--fj-radius);
box-shadow: 0 8px 28px rgba(15,23,42,.14); background: var(--fj-surface);
}
.fin-modern-panel #finMonthPickerYearLabel,
.fin-modern-panel .fin-month-picker-cell { color: var(--fj-text); }
.fin-modern-panel .fin-month-picker-cell { background: #F1F5F9; }
.fin-modern-panel .fin-month-picker-cell:hover { border-color: var(--fj-primary); }
.fin-modern-panel .fin-month-picker-cell--active { background: var(--fj-primary); color: #fff; }
.fin-modern-panel .fin-month-picker-whole-year { background: #F1F5F9; border-color: var(--fj-border); color: var(--fj-text); }
.fin-modern-panel .fin-month-picker-whole-year:hover { border-color: var(--fj-primary); color: var(--fj-primary); }
.fin-modern-panel .fin-search-input:focus,
.fin-modern-panel .fin-select:focus { border-color: var(--fj-primary); box-shadow: 0 0 0 3px rgba(15,118,110,.10); outline: none; }
.fin-modern-panel .fin-check input[type=checkbox] { accent-color: var(--fj-primary); }
.fin-modern-panel .fin-sep { background: var(--fj-border); }
/* View selector (List / By Month) — segmented control, not a button */
.fin-view-switch {
display: inline-flex; align-items: center; gap: 2px;
background: #F1F5F9; border-radius: 8px; padding: 2px; flex-shrink: 0;
}
.fin-view-btn {
display: inline-flex; align-items: center; gap: 5px;
height: 28px; padding: 0 11px; border: none; border-radius: 6px;
background: transparent; color: var(--fj-text-soft, #64748B);
font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s;
}
.fin-view-btn:hover { color: var(--fj-text, #0F172A); }
.fin-view-btn.active { background: #fff; color: var(--fj-text, #0F172A); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
/* Action buttons: one filled primary, everything else outline/ghost */
.fin-modern-panel .tbtn {
border-radius: 8px; height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 600;
}
.fin-modern-panel .tbtn-primary { background: var(--fj-primary); border-color: var(--fj-primary); box-shadow: 0 1px 2px rgba(15,118,110,.25); }
.fin-modern-panel .tbtn-primary:hover { background: #0d6058; opacity: 1; }
.fin-modern-panel .tbtn-outline {
background: var(--fj-surface); color: var(--fj-text-soft); border-color: var(--fj-border);
}
.fin-modern-panel .tbtn-outline:hover { background: #F1F5F9; color: var(--fj-text); border-color: #CBD5E1; }
.fin-modern-panel .tbtn-ghost { color: var(--fj-text-soft); padding: 0 10px; }
.fin-modern-panel .tbtn-ghost:hover { background: #F1F5F9; color: var(--fj-text); }
.fin-modern-panel .fin-sync-status { color: var(--fj-text-soft); }
/* ── Zone 3: KPI metrics — ONE compact panel, 3x2 grid of cells, real
size/color hierarchy instead of six equal-weight cards. Total Amount,
Amount Paid and Approved lead (larger, colored); Transactions, Pending,
Variance are quieter (smaller, muted color) — only 2 cards (Paid=green,
Approved=blue) carry a saturated accent, per "only 1-2 should pull
visual attention." Total Amount leads via size, not color (dark neutral). ── */
.fin-kpi-wrap { display: none; }
.fin-kpi-panel {
display: grid; grid-template-columns: repeat(3, 1fr);
background: var(--fj-surface); border-radius: 16px; box-shadow: var(--fj-shadow);
}
.fin-kpi-cell {
display: flex; flex-direction: column; justify-content: center; gap: 5px;
padding: 18px 22px;
border-right: 1px solid var(--fj-border);
border-bottom: 1px solid var(--fj-border);
}
.fin-kpi-cell:nth-child(3n) { border-right: none; }
.fin-kpi-cell:nth-last-child(-n+3) { border-bottom: none; }
.fin-kpi-cell .fin-kpi-icon { color: var(--fj-text-soft); opacity: .45; margin-bottom: 2px; }
.fin-kpi-icon--success { color: var(--fj-success) !important; opacity: 1 !important; }
.fin-kpi-icon--info { color: var(--fj-info) !important; opacity: 1 !important; }
.fin-kpi-icon--purple { color: var(--fj-purple) !important; opacity: .7 !important; }
.fin-kpi-val { font-weight: 700; color: var(--fj-text); line-height: 1.1; white-space: nowrap; }
.fin-kpi-val--sm { font-size: 20px; font-weight: 600; color: var(--fj-text-soft); }
.fin-kpi-val--md { font-size: 26px; }
.fin-kpi-val--lg { font-size: 30px; letter-spacing: -.01em; }
.fin-kpi-val--success { color: var(--fj-success); }
.fin-kpi-val--info { color: var(--fj-info); }
.fin-kpi-val--purple { color: #6D28D9; font-weight: 600; }
.fin-kpi-lbl { font-size: 11px; font-weight: 600; color: var(--fj-text-soft); text-transform: uppercase; letter-spacing: .06em; }
.fin-kpi-sub { font-weight: 700; color: var(--fj-success); text-transform: none; letter-spacing: normal; margin-left: 2px; }
@media (max-width: 720px) {
.fin-kpi-panel { grid-template-columns: repeat(2, 1fr); }
.fin-kpi-cell:nth-child(3n) { border-right: 1px solid var(--fj-border); }
.fin-kpi-cell:nth-child(2n) { border-right: none; }
.fin-kpi-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--fj-border); }
.fin-kpi-cell:nth-last-child(-n+2) { border-bottom: none; }
}
/* ── Table zone: own card, starts immediately beneath KPIs, sticky header ── */
.fin-table-zone {
background: var(--fj-surface, #fff);
border: 1px solid var(--fj-border, #E2E8F0);
border-radius: var(--fj-radius, 12px);
box-shadow: var(--fj-shadow, 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04));
overflow: hidden;
}
.fin-modern-panel .panel-body-flush { background: var(--fj-surface); }
.fin-modern-panel .reg-table th {
position: sticky; top: 0; z-index: 2;
font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: var(--fj-text-soft); background: #F8FAFC; border-bottom: 1px solid var(--fj-border);
}
.fin-modern-panel .reg-table td { border-bottom: 1px solid var(--fj-border); color: var(--fj-text); }
.fin-modern-panel .reg-table tbody tr:nth-child(even) td { background: #FBFCFD; }
.fin-modern-panel .reg-table tr:hover td { background: #F1F5F9; }
.fin-modern-panel #finJournalDetail.panel {
max-width: none; margin: 0;
background: var(--fj-surface); border: 1px solid var(--fj-border); border-top: 3px solid var(--fj-primary);
border-radius: var(--fj-radius); box-shadow: var(--fj-shadow);
}
.fin-modern-panel #finJournalDetail .panel-head { background: var(--fj-surface); }
/* ── Financial Report tab: same card/button/select language as Journals ── */
.fin-modern-panel.fr-tab-panel { padding: 24px 24px 60px; }
.fin-modern-panel .fr-section {
background: var(--fj-surface); border: 1px solid var(--fj-border);
border-radius: var(--fj-radius); box-shadow: var(--fj-shadow);
margin-bottom: 0;
}
.fin-modern-panel .fr-section-head { border-bottom: 1px solid var(--fj-border); }
.fin-modern-panel .fr-section-title { color: var(--fj-text); font-size: 15px; }
.fin-modern-panel .fr-annotation { color: var(--fj-text-soft); }
.fin-modern-panel .fr-badge,
.fin-modern-panel .fr-report-badge { background: #F1F5F9; color: var(--fj-text-soft); }
.fin-modern-panel .fr-select {
border: 1.5px solid var(--fj-border); border-radius: 8px; background: var(--fj-surface); color: var(--fj-text);
font-size: 13px; padding: 8px 12px;
}
.fin-modern-panel .fr-select:focus { border-color: var(--fj-primary); box-shadow: 0 0 0 3px rgba(15,118,110,.10); outline: none; }
.fin-modern-panel .fr-btn { border-radius: 8px; }
.fin-modern-panel .fr-btn-primary { background: var(--fj-primary); box-shadow: 0 1px 2px rgba(15,118,110,.25); }
.fin-modern-panel .fr-btn-primary:hover { background: #0d6058; }
.fin-modern-panel .fr-btn-outline { border-color: var(--fj-primary); color: var(--fj-primary); }
.fin-modern-panel .fr-btn-outline:hover { background: #F0FDFA; }
.fin-modern-panel .fr-btn-ghost { border-color: var(--fj-border); color: var(--fj-text-soft); }
.fin-modern-panel .fr-btn-ghost:hover { border-color: #CBD5E1; color: var(--fj-text); }
.fin-modern-panel .fr-context-actions { border-top: 1px solid var(--fj-border); }
@media (max-width: 900px) {
.fin-modern-panel { padding: 16px; gap: 16px; }
.fin-modern-panel .fin-search-box { min-width: 0; max-width: none; width: 100%; }
.fin-page-title { font-size: 26px; }
.fin-kpi-cell { padding: 14px 16px; }
.fin-kpi-val--lg { font-size: 26px; }
.fin-kpi-val--md { font-size: 22px; }
}
/* ── Finance sub-tabs — clean segmented navigation ──
Rewritten together with finTab() in network-admin.js, which now toggles
a `.active` class instead of setting inline background/color styles —
the previous mix of inline JS styles fighting !important CSS is what
caused the disconnected/broken-outline look. */
.na-c344 {
display: inline-flex; padding: 4px; gap: 2px;
background: #F1F5F9; border: none; border-radius: 10px;
margin-bottom: 20px;
}
.na-c412, .na-c252, .na-c361 {
padding: 8px 16px;
font-size: 12.5px; font-weight: 600;
border: none; border-radius: 7px;
background: transparent;
color: #64748B;
cursor: pointer;
font-family: inherit;
transition: color .15s, background .15s, box-shadow .15s;
white-space: nowrap;
outline: none;
}
.na-c412:hover, .na-c252:hover, .na-c361:hover { color: #0F172A; }
.na-c412:focus-visible, .na-c252:focus-visible, .na-c361:focus-visible { box-shadow: 0 0 0 2px #0F766E; }
.na-c412.fin-subtab-active, .na-c252.fin-subtab-active, .na-c361.fin-subtab-active {
background: #fff; color: #0F766E; font-weight: 700;
box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 0 -2px 0 #0F766E;
}
/* ── Panel head tighter when no inline controls ── */
.panel-head-title-only {
padding: 16px 24px;
border-bottom: none;
}
.panel-head-title-only h2 { font-size: 15px; font-weight: 700; }
.panel-head-title-only p { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
/* ── Summary cards refresh ── */
.na-c297 { padding: 12px 20px; background: #faf9f5; border-bottom: 1px solid var(--line); }
/* ── Task-edit modal: per-unit resource row & cost total (CSP: no inline style="") ── */
.na-c500 { padding:32px;text-align:center; }
.na-c501 { display:none;margin-top:8px;padding:8px 12px;background:rgba(31,111,107,.07);border-radius:7px;align-items:center;gap:10px;flex-wrap:wrap; }
.na-c502 { font-size:13px;font-weight:500;flex:1; }
.na-c503 { font-size:12px;color:var(--ink-soft); }
.na-c504 { width:80px;padding:5px 8px;border:1.5px solid var(--line);border-radius:6px;font-size:13px;text-align:right; }
.na-c505 { font-size:13px;font-weight:600;min-width:70px;text-align:right; }
.na-c506 { margin-top:8px; }
.na-c507 { display:none;margin-top:10px;padding:8px 12px;background:rgba(31,111,107,.07);border-radius:7px;font-size:13px;font-weight:600;color:var(--teal); }
.na-c312 { display: flex; gap: 10px; flex-wrap: wrap; }
.proj-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 10px;
padding: 11px 18px;
min-width: 100px;
text-align: center;
box-shadow: 0 1px 5px rgba(15,36,51,.05);
flex: 1;
}
.proj-card-val { font-size: 20px; font-weight: 700; color: var(--ink); }
.proj-card-lbl { font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
@media (max-width: 900px) {
.admin-shell { padding: 0 12px 60px; }
.fin-toolbar { padding: 10px 16px; }
}
/* ── Proposal Content Viewer (pv-*) ─────────────────────────────────────────── */
.pv-toggle-btn {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; color: var(--ink-soft);
text-transform: uppercase; letter-spacing: .05em;
background: var(--paper-2); border: 1px solid var(--line);
border-radius: 6px; cursor: pointer; padding: 7px 14px; margin-bottom: 0;
transition: background .15s;
}
.pv-toggle-btn:hover { background: var(--line); }
.pv-container { display: none; margin-top: 14px; }
.pv-container.open { display: block; }
.pv-wrap { font-size: 13px; line-height: 1.6; color: var(--navy); }
.pv-sec-hdr {
display: flex; align-items: center; gap: 10px;
margin: 22px 0 10px; padding-bottom: 7px;
border-bottom: 2px solid var(--line);
}
.pv-badge {
font-size: 11px; font-weight: 700; background: #1f6f6b; color: #fff;
border-radius: 50%; width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv-sec-title { font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .07em; }
.pv-field { margin-bottom: 12px; }
.pv-field-lbl { font-size: 10px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.pv-field-val { font-size: 13px; color: var(--navy); word-break: break-word; }
.pv-inline { display: inline-block; min-width: 200px; margin-right: 24px; vertical-align: top; margin-bottom: 10px; }
.pv-prose {
white-space: pre-wrap; font-size: 13px; background: var(--paper-2);
border-radius: 6px; padding: 10px 14px; border: 1px solid var(--line);
max-height: 220px; overflow-y: auto;
}
.pv-pill {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; padding: 3px 10px; border-radius: 999px;
margin: 3px; font-weight: 500;
}
.pv-pill-yes { background: #dcfce7; color: #166534; }
.pv-pill-no { background: #f3f4f6; color: #6b7280; }
.pv-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; overflow: hidden; border-radius: 6px; }
.pv-tbl th { background: #0f2433; color: #fff; padding: 7px 10px; text-align: left; font-size: 11px; white-space: nowrap; }
.pv-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pv-tbl tr:nth-child(even) td { background: #f9fafb; }
.pv-tbl-wrap { overflow-x: auto; margin-bottom: 10px; }
.pv-empty { font-size: 12px; color: var(--ink-soft); font-style: italic; margin: 4px 0 10px; }
.na-divider { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
/* ── Portfolio improvements ────────────────────────────────────────────────── */
.proj-search-input {
padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
font-size: 13px; font-family: inherit; width: 220px; background: #fff;
transition: border-color .15s;
}
.proj-search-input:focus { outline: none; border-color: var(--teal); }
.proj-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.proj-sortable:hover { background: rgba(31,111,107,.06); }
.proj-sort-icon { font-size: 11px; color: var(--teal); }
.proj-row { cursor: pointer; transition: background .1s; }
.proj-row:hover td { background: rgba(31,111,107,.04); }
.proj-row-overdue td:first-child { border-left: 3px solid #dc2626; }
.proj-row-atrisk td:first-child { border-left: 3px solid #d97706; }
#proj-table { table-layout: fixed; width: 100%; }
#proj-table th.proj-col-name { width: 200px; }
#proj-table th.proj-col-status { width: 100px; }
#proj-table th.proj-col-owner { width: 110px; }
#proj-table th.proj-col-client { width: 110px; }
#proj-table th.proj-col-start { width: 88px; }
#proj-table th.proj-col-finish { width: 88px; }
#proj-table th.proj-col-tasks { width: 56px; }
#proj-table th.proj-col-done { width: 68px; }
#proj-table th.proj-col-budget { width: 88px; }
#proj-table th.proj-col-health { width: 44px; }
#proj-table th.proj-col-actions { width: 116px; }
.proj-name-cell { font-weight: 500; font-size: 13px; }
.proj-name-cell .proj-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.proj-source-label { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.proj-meta-cell { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-date-cell { font-size: 12px; white-space: nowrap; }
.proj-num-cell { text-align: center; font-size: 12px; }
.proj-actions-cell { white-space: nowrap; }
.proj-row-actions { display: none; } /* legacy — no longer used */
.proj-action-btn { padding: 2px 7px; font-size: 11px; cursor: pointer; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; transition: background .1s; line-height: 1.4; margin-right: 2px; }
.proj-action-btn:hover { background: var(--paper-3, #e5e7eb); }
.proj-action-del { color: #dc2626; border-color: #fecaca; }
.delete-proj-warn { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.proj-pct { font-size: 12px; font-weight: 600; }
.proj-pct-done { color: #16a34a; }
.proj-pct-mid { color: var(--teal); }
.proj-pct-low { color: #d97706; }
.proj-pct-none { color: var(--ink-soft); font-weight: 400; }
.proj-health-dot { font-size: 14px; }
.proj-health-red { color: #dc2626; }
.proj-health-amber { color: #d97706; }
.proj-health-green { color: #16a34a; }
.proj-health-muted { color: var(--line); }
/* ── Schedule analysis improvements ────────────────────────────────────────── */
.sched-error { color: var(--error); font-size: 13px; }
.sched-summary { margin-bottom: 10px; font-size: 13px; }
.sched-empty { color: var(--ink-soft); font-size: 13px; }
.sched-ai-result {
padding: 12px 14px; background: #faf5ff; border: 1px solid #e9d5ff;
border-radius: 8px; white-space: pre-wrap; line-height: 1.6; font-size: 13px;
}
#schedAnalysisResult[data-computing]::before {
content: attr(data-computing);
display: block; padding: 8px 0; color: var(--teal);
font-size: 13px; font-weight: 500;
}
/* ── Analytics pagination ───────────────────────────────────────────────────── */
.an-pagination {
display: flex; align-items: center; gap: 8px; padding: 10px 14px;
border-top: 1px solid var(--steel); font-size: 12px; color: var(--muted-dark);
background: #f8fafc; border-radius: 0 0 8px 8px;
}
.an-pag-info { flex: 1; }
.an-pag-pages { font-size: 12px; color: var(--muted-dark); }
.an-pag-btn {
padding: 4px 12px; border: 1px solid var(--steel); border-radius: 6px;
background: #fff; font-size: 12px; cursor: pointer; font-family: inherit;
color: var(--text); transition: background .1s;
}
.an-pag-btn:hover:not(:disabled) { background: var(--blue-pale); }
.an-pag-btn:disabled { opacity: .4; cursor: not-allowed; }
.an-loader-text { font-size: 12px; color: var(--muted-dark); }
.an-cell-muted { font-size: 12px; color: var(--muted-dark); }
.an-prog-cell { min-width: 80px; font-size: 12px; }
/* ── Breadcrumbs ───────────────────────────────────────────────────────────── */
.proj-breadcrumb {
display: flex; align-items: center; gap: 6px;
padding: 8px 24px; background: var(--paper-2);
border-bottom: 1px solid var(--line); font-size: 12px;
}
.proj-bc-link {
background: none; border: none; cursor: pointer; color: var(--teal);
font-size: 12px; font-family: inherit; padding: 0;
text-decoration: underline; text-underline-offset: 2px;
}
.proj-bc-link:hover { color: var(--ink); }
.proj-bc-sep { color: var(--ink-soft); font-size: 11px; }
.proj-bc-current { font-weight: 600; color: var(--ink); }
.proj-bc-tab { color: var(--ink-soft); }
/* ── Risk register toolbar ─────────────────────────────────────────────────── */
.risk-register-toolbar {
padding: 10px 0 6px; display: flex; gap: 10px; align-items: center;
}
.risk-add-btn {
padding: 7px 18px; font-size: 12px; border-radius: 7px;
}
/* ── Export CSV button ─────────────────────────────────────────────────────── */
.an-export-btn {
padding: 5px 12px; border: 1px solid var(--steel); border-radius: 6px;
background: #fff; font-size: 11px; font-weight: 600; cursor: pointer;
font-family: inherit; color: var(--text); white-space: nowrap;
transition: background .1s; margin-left: 4px;
}
.an-export-btn:hover { background: var(--blue-pale); }
/* ── Task description field ─────────────────────────────────────────────────── */
.task-desc-textarea {
width: 100%; min-height: 72px; border: 1px solid var(--line);
border-radius: 7px; padding: 8px 10px; font-size: 13px;
font-family: inherit; resize: vertical; transition: border-color .15s;
background: var(--paper);
}
.task-desc-textarea:focus { outline: none; border-color: var(--teal); }
.field-hint { font-weight: 400; color: var(--ink-soft); font-size: 11px; }
/* Task description tooltip on tracker row */
.task-desc-tip {
position: relative; display: inline-block;
}
.task-desc-tip::after {
content: attr(data-desc);
position: absolute; left: 0; top: 100%; z-index: 50;
background: #1e293b; color: #fff; font-size: 11px; line-height: 1.5;
padding: 6px 10px; border-radius: 6px; white-space: pre-wrap;
max-width: 300px; pointer-events: none; opacity: 0;
transition: opacity .15s; box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.task-desc-tip:hover::after { opacity: 1; }
/* ── Analytics milestone window filter ─────────────────────────────────────── */
.an-ms-filter {
display: flex; align-items: center; gap: 4px;
}
.an-ms-label { font-size: 11px; color: var(--muted-dark); margin-right: 4px; }
.an-ms-btn {
padding: 3px 10px; border: 1px solid var(--steel); border-radius: 5px;
background: #fff; font-size: 11px; font-weight: 600; cursor: pointer;
font-family: inherit; color: var(--muted-dark); transition: all .1s;
}
.an-ms-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.an-ms-btn:hover:not(.active) { background: var(--blue-pale); }
/* ── CPM Gantt timeline ─────────────────────────────────────────────────────── */
.cpm-gantt { font-size: 11px; margin-bottom: 6px; }
.cpm-gantt-header { display: flex; align-items: center; margin-bottom: 4px; font-size: 10px; color: var(--ink-soft); }
.cpm-gantt-row { display: flex; align-items: center; margin-bottom: 3px; }
.cpm-gantt-lbl-col { min-width: 160px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; font-size: 11px; color: var(--ink); }
.cpm-gantt-lbl-crit { color: #9333ea; font-weight: 700; }
.cpm-gantt-track-col { flex: 1; height: 16px; position: relative; }
.cpm-gantt-track-bg { background: #f1f5f9; border-radius: 4px; overflow: visible; }
.cpm-gantt-bar { position: absolute; top: 2px; height: 12px; border-radius: 3px; opacity: .85; transition: opacity .15s; }
.cpm-gantt-bar:hover { opacity: 1; }
.cpm-gantt-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #ef4444; opacity: .6; z-index: 2; pointer-events: none; }
.cpm-gantt-d-start { position: absolute; left: 0; bottom: -14px; font-size: 9px; color: var(--ink-soft); }
.cpm-gantt-d-end { position: absolute; right: 0; bottom: -14px; font-size: 9px; color: var(--ink-soft); }
.cpm-gantt-legend { margin-top: 20px; font-size: 10px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cpm-gantt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
/* ── CPM section layout (replaces inline style= to satisfy CSP) ─────────────── */
.cpm-section-diagram { margin-bottom: 14px; }
.cpm-section-details { margin-bottom: 14px; }
.cpm-date-details { margin-bottom: 10px; font-size: 11px; }
.cpm-details-summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #64748b; user-select: none; padding: 6px 0; }
.cpm-summary-muted { font-weight: 400; }
.cpm-gantt-wrap { margin-top: 8px; }
/* CPM Gantt bar colours via CSS classes (not inline background) */
.cpm-gantt-bar-crit { background: #9333ea; }
.cpm-gantt-bar-norm { background: #94a3b8; }
.cpm-dot-crit { background: #9333ea; }
.cpm-dot-norm { background: #94a3b8; margin-left: 12px; }
.cpm-dot-today { background: #ef4444; margin-left: 12px; }
/* ── Risk modal improvements ────────────────────────────────────────────────── */
.risk-exposure-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.risk-adv-toggle { background: none; border: none; font-size: 11px; color: var(--teal); cursor: pointer; font-family: inherit; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.risk-adv-fields { background: var(--paper-2); border-radius: 7px; padding: 10px 12px; margin-bottom: 8px; }
.risk-adv-note { font-size: 11px; color: var(--ink-soft); margin: 0 0 8px; }
/* ── Cdot colour variants (avoids inline style= attributes) ─────────────────── */
.cdot-teal { background: var(--teal); }
.cdot-blue { background: var(--blue); }
.cdot-purple { background: var(--purple); }
/* Resource panel layout helpers ─────────────────────────────────────────────── */
.card-flush { padding: 0 !important; } /* replaces style="padding:0" on .cb */
.card-mt { margin-top: 16px; } /* replaces style="margin-top:16px" on .card */
.tbl-empty-lg { padding: 32px !important; }
/* ── CPM diagram container ─────────────────────────────────────────────────── */
.cpm-diagram-wrap {
overflow-x: auto;
overflow-y: auto;
max-height: 420px;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.cpm-truncate-note {
margin-top: 8px; padding: 7px 12px;
background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 7px;
font-size: 11px; color: #7c3aed;
}
.cpm-ref-wrap { margin-top: 10px; font-size: 11px; color: #475569; }
.cpm-ref-title { display: block; margin-bottom: 6px; font-size: 11px; }
.cpm-ref-table { border-collapse: collapse; width: 100%; font-size: 11px; }
.cpm-ref-head { border-bottom: 2px solid #e2e8f0; text-align: left; color: #64748b; }
.cpm-ref-head th { padding: 4px 10px; }
.cpm-ref-table td { padding: 4px 10px; border-bottom: 1px solid #f1f5f9; }
.cpm-ref-crit { background: #faf5ff; }
.cpm-ref-lbl { font-weight: 700; color: #9333ea; }
/* ── CPM Gantt v2 — readable primary view ──────────────────────────────────── */
.cpm-gantt-primary { margin-bottom: 12px; }
.cpm-section-diagram-collapsed { max-height: 200px; }
.cpm-gantt-v2 { font-size: 12px; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
/* Each row: label + bar track */
.cg-row { display: flex; align-items: center; margin-bottom: 3px; }
.cg-row-crit .cg-lbl { font-weight: 700; color: #6d28d9; }
.cg-lbl { min-width: 220px; max-width: 220px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
padding-right: 10px; font-size: 11px; color: #374151; flex-shrink: 0; }
.cg-lbl-spacer { min-width: 220px; flex-shrink: 0; }
.cg-track { flex: 1; height: 20px; position: relative;
background: #f1f5f9; border-radius: 4px; }
.cg-bar { position: absolute; top: 2px; height: 16px;
border-radius: 3px; display: flex; align-items: center;
overflow: hidden; min-width: 2px; }
.cg-bar-crit { background: #7c3aed; }
.cg-bar-norm { background: #94a3b8; }
.cg-bar-lbl { font-size: 9px; font-weight: 600; color: #fff;
padding: 0 4px; white-space: nowrap; overflow: hidden;
text-overflow: clip; line-height: 16px; }
.cg-today { position: absolute; top: 0; bottom: 0; width: 2px;
background: #ef4444; opacity: 0.7; z-index: 2; pointer-events: none; }
/* Axis row */
.cg-axis { display: flex; align-items: center; margin-bottom: 6px; }
.cg-axis-track { position: relative; height: 18px; background: transparent; }
.cg-today-axis { top: 0; height: 18px; }
.cg-axis-start { position: absolute; left: 0; font-size: 10px; color: #64748b; }
.cg-axis-mid { position: absolute; left: 50%; transform: translateX(-50%);
font-size: 10px; color: #64748b; }
.cg-axis-end { position: absolute; right: 0; font-size: 10px; color: #64748b; }
/* Legend */
.cg-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 10px; font-size: 10px; color: #64748b; }
.cg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.cg-dot-crit { background: #7c3aed; }
.cg-dot-norm { background: #94a3b8; }
.cg-dot-today { background: #ef4444; margin-left: 6px; }
.cg-legend-dates { margin-left: auto; font-size: 10px; color: #94a3b8; }
/* ── Schedule analysis toolbar layout ──────────────────────────────────────── */
.sched-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.sched-ai-row { background: #faf5ff; border-radius: 8px; padding: 8px 10px; border: 1px solid #e9d5ff; }
.sched-row-label { font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; min-width: 64px; }
.sched-days-input { width: 60px; font-size: 12px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; }
.sched-provider-sel { font-size: 12px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-family: inherit; }
/* ── AI modal base (shared by pred + future modals) ────────────────────────── */
.ai-modal-overlay { display: flex; align-items: flex-start; justify-content: center; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 300; padding: 32px 16px; overflow-y: auto; }
.ai-modal-overlay[hidden] { display: none; }
.ai-modal-card { background: #fff; border-radius: 14px; width: 100%; max-width: 700px; box-shadow: 0 20px 60px rgba(0,0,0,.22); display: flex; flex-direction: column; }
.ai-modal-header { background: #0c1829; border-radius: 14px 14px 0 0; padding: 18px 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ai-modal-title { color: #fff; font-size: 16px; font-weight: 700; }
.ai-modal-sub { color: rgba(255,255,255,.5); font-size: 11px; margin-top: 3px; }
.ai-modal-close { background: none; border: none; color: rgba(255,255,255,.5); font-size: 20px; cursor: pointer; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.ai-modal-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.ai-modal-body { padding: 16px 20px; overflow-y: auto; max-height: 60vh; }
.ai-modal-footer { padding: 12px 20px; border-top: 1px solid #f1f5f9; display: flex; align-items: center; gap: 10px; }
.ai-btn-apply { padding: 9px 20px; font-size: 13px; }
.ai-status { font-size: 12px; color: #16a34a; flex: 1; }
.ai-count-badge { font-size: 11px; color: #7c3aed; font-weight: 600; margin-left: auto; }
.ai-sm-btn { padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; color: #374151; white-space: nowrap; }
.ai-sm-btn:hover { background: #f1f5f9; }
.ai-sm-ghost { color: #94a3b8; }
/* ── Predecessor suggestion modal ──────────────────────────────────────────── */
.pred-ctrl-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pred-list { display: flex; flex-direction: column; gap: 6px; }
.pred-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: background .1s; }
.pred-item:hover { background: #f8fafc; }
.pred-item input { margin-top: 3px; flex-shrink: 0; accent-color: #0891b2; width: 15px; height: 15px; cursor: pointer; }
.pred-item-body { flex: 1; min-width: 0; }
.pred-item-link { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.pred-from { font-weight: 600; color: #1e293b; }
.pred-arrow { color: #0891b2; font-weight: 700; font-size: 11px; white-space: nowrap; }
.pred-to { font-weight: 600; color: #1e293b; }
.pred-lag { font-size: 10px; background: #fef3c7; color: #92400e; padding: 1px 6px; border-radius: 10px; }
.pred-reason { font-size: 11px; color: #64748b; line-height: 1.4; }
.pred-empty { padding: 32px; text-align: center; color: #94a3b8; font-size: 13px; }
/* ── Health & Recovery analysis output ─────────────────────────────────────── */
.ha-wrap { border-radius: 10px; overflow: hidden; border: 1px solid #e2e8f0; font-size: 12px; }
.ha-header { display: flex; align-items: flex-start; gap: 14px; padding: 16px; }
.ha-header[data-sev="on_track"] { background: #f0fdf4; border-bottom: 3px solid #16a34a; }
.ha-header[data-sev="minor_risk"] { background: #fffbeb; border-bottom: 3px solid #d97706; }
.ha-header[data-sev="at_risk"] { background: #fff7ed; border-bottom: 3px solid #ea580c; }
.ha-header[data-sev="critical"] { background: #fef2f2; border-bottom: 3px solid #dc2626; }
.ha-icon { font-size: 28px; flex-shrink: 0; }
.ha-header-body { flex: 1; min-width: 0; }
.ha-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.ha-summary { font-size: 12px; color: #475569; line-height: 1.5; }
.ha-dates { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.ha-date-block { text-align: right; }
.ha-date-lbl { display: block; font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.ha-date-val { font-size: 13px; font-weight: 700; color: #1e293b; }
.ha-variance { font-weight: 700; }
.ha-behind { color: #dc2626; }
.ha-ahead { color: #16a34a; }
.ha-immediate { padding: 12px 16px; background: #fff8f0; border-bottom: 1px solid #fed7aa; }
.ha-risks { padding: 12px 16px; background: #fafafa; border-bottom: 1px solid #e2e8f0; }
.ha-section-title { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.ha-action-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.ha-action-list li { font-size: 12px; color: #374151; line-height: 1.4; }
.ha-urgent li { color: #9a3412; font-weight: 500; }
.ha-scenario { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.ha-scenario:last-of-type { border-bottom: none; }
.ha-scenario-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ha-scenario-name { font-size: 13px; font-weight: 700; color: #1e293b; }
.ha-scenario-date { font-size: 11px; color: #64748b; }
.ha-scenario-cost { font-size: 11px; font-weight: 600; color: #7c3aed; margin-left: auto; }
.ha-scenario-desc { font-size: 12px; color: #475569; margin: 0 0 8px; line-height: 1.4; }
.ha-footer { padding: 8px 16px; background: #f8fafc; font-size: 10px; color: #94a3b8; }
/* ── Project Portfolio toolbar (merged Projects+Analytics) ─────────────────── */
.portfolio-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; background: var(--paper-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.portfolio-toolbar-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.portfolio-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.portfolio-btn { padding: 7px 16px; font-size: 12px; border-radius: 7px; }
.portfolio-btn-purple { background: #7c3aed; }
.portfolio-btn-muted { background: #475569; }
/* ── Blob picker with upload ───────────────────────────────────────────────── */
.blob-upload-zone { border: 2px dashed var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; text-align: center; }
.blob-upload-label { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.blob-upload-icon { font-size: 24px; }
.blob-upload-text { font-size: 13px; font-weight: 600; color: var(--teal); }
.blob-upload-hint { font-size: 11px; color: var(--ink-soft); }
.blob-upload-zone:hover { border-color: var(--teal); background: rgba(31,111,107,.04); }
.blob-file-input { position: absolute; left: -9999px; opacity: 0; }
.blob-upload-status { margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.blob-upload-ok { color: #16a34a; }
.blob-upload-err { color: #dc2626; }
.blob-list-head { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.blob-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; border-radius: 6px; font-size: 12px; }
.blob-item:hover { background: var(--paper-2); }
.blob-item-icon { flex-shrink: 0; }
.blob-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blob-item-meta { font-size: 10px; color: var(--ink-soft); flex-shrink: 0; }
.blob-loading { color: var(--ink-soft); font-size: 12px; padding: 8px 0; }
.blob-empty { color: var(--ink-soft); font-size: 12px; padding: 8px 0; font-style: italic; }
.blob-warn { color: #dc2626; font-size: 12px; padding: 8px 0; }
/* ── Tracker proposal panel ───────────────────────────────────────────────── */
.tracker-proposal-panel { padding: 6px 18px; background: var(--paper-2); border-top: 1px solid var(--line); }
.tp-has-proposal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.tp-no-proposal { display: flex; align-items: center; gap: 10px; }
.tp-label { font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.tp-link { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-empty-msg { font-size: 12px; color: var(--ink-soft); font-style: italic; }
.tp-add-btn, .tp-change-btn { padding: 4px 12px; border: 1px solid var(--teal); border-radius: 6px; background: #fff; color: var(--teal); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; }
.tp-add-btn:hover, .tp-change-btn:hover { background: var(--teal); color: #fff; }
.tp-remove-btn { padding: 4px 10px; border: 1px solid #fca5a5; border-radius: 6px; background: #fff; color: #dc2626; font-size: 11px; cursor: pointer; font-family: inherit; }
.tp-remove-btn:hover { background: #fee2e2; }
/* ── Global blob / proposal picker overlay ─────────────────────────────────── */
.blob-picker-overlay { display:flex; align-items:flex-start; justify-content:center; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:3000; padding:40px 16px; overflow-y:auto; }
.blob-picker-overlay[hidden] { display:none; }
.blob-picker-modal { background:#fff; border-radius:12px; width:100%; max-width:520px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; }
.blob-picker-header { background:#0c1829; padding:16px 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.blob-picker-title { color:#fff; font-size:15px; font-weight:700; }
.blob-picker-sub { color:rgba(255,255,255,.5); font-size:11px; margin-top:2px; }
.blob-picker-close { background:none; border:none; color:rgba(255,255,255,.5); font-size:18px; cursor:pointer; padding:2px 6px; border-radius:4px; flex-shrink:0; }
.blob-picker-close:hover { color:#fff; background:rgba(255,255,255,.1); }
.blob-picker-body { padding:16px 20px; max-height:70vh; overflow-y:auto; }
/* Analytics drawer proposal row */
.an-proposal-row { display:flex; gap:8px; align-items:center; }
.an-proposal-input { flex:1; min-width:0; }
.an-proposal-browse-btn { padding:7px 12px; border:1px solid var(--teal); border-radius:6px; background:#fff; color:var(--teal); font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; flex-shrink:0; }
.an-proposal-browse-btn:hover { background:var(--teal); color:#fff; }
.tp-view-btn { background: none; border: none; color: var(--teal); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-size: 12px; font-family: inherit; padding: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-view-btn:hover { color: var(--ink); }
.blob-item::after { content: "Select →"; font-size: 10px; color: var(--teal); opacity: 0; margin-left: auto; flex-shrink: 0; }
.blob-item:hover::after { opacity: 1; }
/* ── Equipment Inventory ─────────────────────────────────────────────────── */
.eq-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.eq-scan-split { display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; border: 1px solid var(--teal); }
.eq-ai-scan-btn { border-radius: 0; border: none; background: var(--teal); color: #fff; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.eq-ai-scan-btn:hover { background: #0f766e; }
.eq-provider-sel { border: none; border-left: 1px solid rgba(255,255,255,.3); background: #0f766e; color: #fff; font-size: 12px; padding: 0 8px; cursor: pointer; }
.eq-provider-sel option { background: #1e293b; }
.eq-kw-scan-btn { padding: 6px 12px; font-size: 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--ink-soft); white-space: nowrap; }
.eq-kw-scan-btn:hover { border-color: var(--teal); color: var(--teal); }
#eq-table { table-layout: fixed; }
#eq-table th.eq-col-num { width: 56px; }
#eq-table th.eq-col-code { width: 90px; }
#eq-table th.eq-col-name { width: 180px; }
#eq-table th.eq-col-date { width: 95px; }
#eq-table th.eq-col-proj { width: 110px; }
#eq-table th.eq-col-sup { width: 120px; }
#eq-table th.eq-col-qty { width: 45px; }
#eq-table th.eq-col-ser { width: 100px; }
#eq-table th.eq-col-cond { width: 80px; }
#eq-table th.eq-col-loc { width: 120px; }
#eq-table th.eq-col-amt { width: 85px; }
#eq-table th.eq-col-act { width: 90px; }
#eq-table td { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eq-table td:nth-child(3) { font-weight: 500; }
.eq-condition-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.eq-cond-new { background: #dcfce7; color: #166534; }
.eq-cond-good { background: #dbeafe; color: #1e40af; }
.eq-cond-used { background: #fef9c3; color: #854d0e; }
.eq-cond-poor { background: #fee2e2; color: #991b1b; }
.eq-cond-dead { background: #f3f4f6; color: #6b7280; }
/* Scan panel */
.eq-scan-panel { padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--paper-2); max-height: 480px; overflow-y: auto; }
.eq-scan-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.eq-scan-title { font-weight: 600; font-size: 13px; }
.eq-scan-hint { font-size: 11px; color: var(--ink-soft); }
.eq-scan-item { padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 6px; transition: border-color .15s; }
.eq-scan-item:hover { border-color: var(--teal); }
.eq-scan-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.eq-scan-row2 { display: flex; align-items: center; gap: 8px; }
.eq-scan-desc { flex: 1; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-scan-meta { flex: 1; font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-scan-amt { font-size: 12px; font-weight: 600; color: var(--teal); white-space: nowrap; }
.eq-scan-actions { display: flex; gap: 4px; flex-shrink: 0; }
.eq-scan-add { font-size: 11px; padding: 3px 10px; background: var(--teal); color: #fff; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.eq-scan-add:hover { background: #0f766e; }
.eq-scan-ai { font-size: 11px; padding: 3px 9px; background: #7c3aed; color: #fff; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.eq-scan-ai:hover { background: #6d28d9; }
.eq-scan-empty { font-size: 13px; color: var(--ink-soft); text-align: center; padding: 16px 0; }
.eq-scan-close { margin-top: 8px; font-size: 12px; color: var(--ink-soft); text-decoration: underline; cursor: pointer; background: none; border: none; }
/* Confidence badges */
.eq-conf-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.eq-conf-high { background: #dcfce7; color: #166534; }
.eq-conf-mid { background: #fef9c3; color: #854d0e; }
.eq-conf-low { background: #fee2e2; color: #991b1b; }
/* AI result */
.eq-ai-result { margin-top: 6px; padding: 8px 10px; border-radius: 5px; background: #f0f9ff; border: 1px solid #bae6fd; }
.eq-ai-thinking { font-size: 12px; color: var(--ink-soft); font-style: italic; }
.eq-ai-verdict { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; }
.eq-ai-yes { background: #f0fdf4; border-color: #bbf7d0; border-radius: 5px; padding: 8px; }
.eq-ai-no { background: #fef2f2; border-color: #fecaca; border-radius: 5px; padding: 8px; }
.eq-ai-icon { font-size: 14px; flex-shrink: 0; }
.eq-ai-detail { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.eq-ai-cat { font-size: 11px; color: var(--ink-soft); }
.eq-ai-reason { font-size: 11px; color: var(--ink-soft); font-style: italic; flex: 1; }
.eq-ai-err { font-size: 11px; color: var(--error); }
/* Multi-item / split dialog */
.eq-multi-inner { max-width: 520px; }
.eq-multi-desc { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; line-height: 1.5; }
.eq-multi-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.eq-multi-opt { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; background: var(--paper-2); border: 2px solid var(--line); border-radius: 8px; cursor: pointer; text-align: left; transition: border-color .15s; }
.eq-multi-opt:hover { border-color: var(--teal); background: #f0fdf4; }
.eq-multi-opt-title { font-size: 13px; font-weight: 600; }
.eq-multi-opt-desc { font-size: 11px; color: var(--ink-soft); }
.eq-multi-cancel { font-size: 12px; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.eq-mp-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.eq-mp-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; }
.eq-mp-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.eq-mp-meta { font-size: 11px; color: var(--ink-soft); margin-left: 20px; }
.eq-split-rows { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; margin-bottom: 4px; }
.eq-split-row { display: flex; align-items: center; gap: 8px; }
.eq-split-num { font-size: 12px; font-weight: 600; color: var(--ink-soft); width: 28px; flex-shrink: 0; }
.eq-split-serial { width: 140px; flex-shrink: 0; }
.eq-split-loc { flex: 1; }
/* Journal receipt bar (modal) */
.eq-journal-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.eq-journal-bar-label { font-size: 12px; color: #1e40af; font-weight: 600; white-space: nowrap; }
.eq-journal-txn { font-size: 12px; font-family: monospace; color: #1e40af; background: #dbeafe; padding: 1px 6px; border-radius: 4px; }
.eq-journal-scan-btn { font-size: 12px; padding: 4px 12px; flex-shrink: 0; }
.eq-journal-status { font-size: 11px; color: var(--ink-soft); }
.eq-scan-receipt { font-size: 11px; padding: 3px 9px; background: #1d4ed8; color: #fff; border: none; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.eq-scan-receipt:hover { background: #1e40af; }
.eq-receipt-read-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #d1fae5; color: #065f46; white-space: nowrap; flex-shrink: 0; }
.eq-doc-warn { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #fef9c3; color: #854d0e; white-space: nowrap; flex-shrink: 0; }
.eq-scan-qty { font-size: 11px; font-weight: 700; color: var(--teal); background: #f0fdf4; padding: 1px 7px; border-radius: 999px; border: 1px solid #bbf7d0; white-space: nowrap; }
/* Receipt scanner */
.eq-receipt-zone { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paper-2); border: 1.5px dashed var(--line); border-radius: 8px; margin-bottom: 14px; cursor: pointer; transition: border-color .15s; }
.eq-receipt-zone:hover, .eq-receipt-zone.eq-receipt-loading { border-color: var(--teal); }
.eq-receipt-label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
.eq-receipt-icon { font-size: 20px; flex-shrink: 0; }
.eq-receipt-text { font-size: 13px; font-weight: 600; }
.eq-receipt-hint { font-size: 11px; color: var(--ink-soft); }
.eq-receipt-file { display: none; }
.eq-receipt-prov { flex-shrink: 0; font-size: 11px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.eq-receipt-result { margin-bottom: 14px; }
.eq-receipt-scanning { font-size: 12px; color: var(--ink-soft); font-style: italic; padding: 8px 0; }
.eq-receipt-err { font-size: 12px; color: var(--error); padding: 8px 0; }
.eq-receipt-extracted { border: 1px solid #bbf7d0; border-radius: 8px; background: #f0fdf4; padding: 12px 14px; }
.eq-receipt-extracted-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.eq-receipt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 10px; }
.eq-rf { display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.eq-rf-full { grid-column: 1 / -1; }
.eq-rf-label { font-weight: 600; color: var(--ink-soft); white-space: nowrap; min-width: 56px; font-size: 11px; }
.eq-rf-val { color: var(--ink); }
.eq-receipt-apply { font-size: 12px; padding: 5px 14px; }
/* Modal form */
.eq-modal-inner { max-width: 680px; width: 100%; }
.eq-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.eq-field { display: flex; flex-direction: column; gap: 4px; }
.eq-field label { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.eq-field-full { grid-column: 1 / -1; }
.eq-amount-row { display: flex; gap: 6px; }
.eq-cur-sel { width: 72px; flex-shrink: 0; }
/* ── Financial Report Tab ────────────────────────────────────────────────── */
/* Default-hidden: only finTab() in network-admin.js should reveal these (via
inline style.display, which overrides this). Without this, landing on the
Finance tab without clicking a sub-tab first (default tab, invoice email
deep link) rendered all three finance sub-panels stacked at once — Financial
Report's Project/Settings sections and Invoices appearing below Journals. */
#fpanel-budget, #fpanel-invoices { display: none; }
.fr-tab-panel { padding: 20px 24px 40px; }
.fr-section { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.fr-section-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.fr-section-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.fr-annotation { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.6; max-width: 580px; }
.fr-section-body { padding: 16px 20px; }
.fr-mgr { padding: 0 20px; }
.fr-loading { padding: 24px 0; text-align: center; color: var(--ink-soft); font-size: 13px; }
/* Report pills */
.fr-report-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fr-report-pill { padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; border: 2px solid var(--line); background: var(--paper-2); color: var(--ink); transition: all .15s; user-select: none; }
.fr-report-pill:hover { border-color: var(--teal); }
.fr-report-pill.active { border-color: var(--teal); background: var(--teal); color: #fff; }
.fr-report-pill.draft { border-style: dashed; border-color: var(--teal); color: var(--teal); background: #fff; }
.fr-report-pill.draft.active { background: var(--teal); color: #fff; border-style: solid; }
.fr-report-pill-new { padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; border: 2px dashed var(--line); color: var(--ink-soft); background: transparent; transition: all .15s; }
.fr-report-pill-new:hover { border-color: var(--teal); color: var(--teal); }
/* Badge in headings */
.fr-report-badge { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); margin-left: 8px; vertical-align: middle; }
.fr-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); vertical-align: middle; }
/* Buttons */
.fr-btn { padding: 8px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all .15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.fr-btn-primary { background: var(--teal); color: #fff; }
.fr-btn-primary:hover { background: #0f766e; }
.fr-btn-outline { background: #fff; border: 1.5px solid var(--teal); color: var(--teal); }
.fr-btn-outline:hover { background: #f0fdf4; }
.fr-btn-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--ink-soft); }
.fr-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.fr-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
/* Project row */
.fr-project-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-period-select { min-width: 200px; }
.fr-context-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; }
.fr-select { padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 7px; font-size: 13px; min-width: 260px; background: #fff; }
.fr-select:focus { outline: none; border-color: var(--teal); }
.fr-file-label { cursor: pointer; }
.fr-file-label input { display: none; }
/* Budget Overview sub-sections */
.fr-sub { border-top: 1px solid var(--line); padding: 16px 20px; }
.fr-sub:first-child { border-top: none; }
.fr-sub-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-bottom: 12px; }
.fr-status-bar { font-size: 12px; padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; line-height: 1.5; }
.fr-status-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.fr-status-warn { background: #fefce8; border: 1px solid #fde68a; color: #92400e; }
.fr-status-info { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.fr-kpi-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fr-kpi { flex: 1; min-width: 140px; background: #f5f3ee; border-radius: 8px; padding: 12px 14px; }
.fr-kpi-highlight { background: #eef6f3; }
.fr-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 4px; }
.fr-kpi-value { font-size: 18px; font-weight: 700; color: var(--ink); }
/* Insights tab — segmented pill toggle (e.g. aging-threshold selector) */
.ins-pill { font-size: 11px; font-weight: 600; padding: 4px 12px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: 999px; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; }
.ins-pill:hover { background: var(--paper-2); }
.ins-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Budget settings strip (categories + donor folder — collapsed by default) */
/* Transaction journal table */
.fr-journal-table { table-layout: fixed; }
.fr-journal-table th { font-size: 11px; }
.fr-journal-cat-row td { background: var(--teal) !important; color: #fff !important; font-weight: 700; font-size: 12px; }
.fr-journal-sub-row td { background: var(--paper-2) !important; font-weight: 600; font-size: 12px; }
.fr-journal-sub-row td:last-child { text-align: right; font-family: monospace; }
.fr-journal-grand-row td { background: #0f2433 !important; color: #fff !important; font-weight: 700; font-size: 13px; }
.fr-journal-grand-row td:last-child { text-align: right; font-family: monospace; }
/* ── Invoice modal — full rebuild matching invoice.html ─────────────────── */
.im-modal-inner { max-width: 820px; width: 96vw; max-height: 90vh; overflow-y: hidden; display: flex; flex-direction: column; }
.im-form-body { flex: 1; overflow-y: auto; padding: 4px 24px 16px; }
.im-header-row { display: flex; align-items: center; gap: 16px; flex: 1; }
.im-type-row { display: flex; align-items: center; gap: 6px; }
.im-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--teal); border-bottom: 1px solid var(--line); padding-bottom: 4px; margin: 18px 0 10px; }
.im-grid { display: grid; gap: 10px; }
.im-cols-2 { grid-template-columns: 1fr 1fr; }
.im-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.im-field { display: flex; flex-direction: column; gap: 4px; }
.im-field label { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.im-col-all { grid-column: 1 / -1; }
.im-col-2 { grid-column: span 2; }
/* Line items */
.im-line-items-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 4px; }
.im-li-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.im-li-table th { background: #f5f3ee; padding: 7px 10px; text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.im-li-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); }
.im-li-table tr:last-child td { border-bottom: none; }
.im-li-table input { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 4px 6px; font-size: 12px; font-family: inherit; box-sizing: border-box; }
.im-li-table input:focus { outline: none; border-color: var(--teal); }
.im-li-cost { max-width: 90px; }
.im-li-qty { max-width: 60px; }
.im-li-del { background: none; border: none; color: var(--error); cursor: pointer; font-size: 14px; padding: 2px 6px; }
.im-li-footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--paper-2); }
.im-add-row-btn { background: none; border: 1px solid var(--teal); color: var(--teal); border-radius: 5px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-weight: 600; }
.im-add-row-btn:hover { background: var(--teal); color: #fff; }
.im-grand-total { font-size: 13px; font-weight: 600; }
/* Payment method tabs */
.im-method-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.im-method-tab { padding: 6px 14px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--paper-2); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.im-method-tab:hover { border-color: var(--teal); }
.im-method-tab.active { border-color: var(--teal); background: var(--teal); color: #fff; }
.im-hidden-select { display: none; }
.im-payment-panel { display: none; }
.im-panel-visible { display: block; }
.im-panel-note { font-size: 12px; color: var(--ink-soft); padding: 8px 0; margin: 0; }
/* Bank transfer sub-tabs (national / international) */
.im-bank-subtabs { display: flex; gap: 6px; margin-bottom: 12px; }
.im-bank-tab { padding: 4px 14px; border-radius: 5px; border: 1.5px solid var(--line); background: var(--paper-2); font-size: 12px; font-weight: 600; cursor: pointer; }
.im-bank-tab.active { border-color: var(--teal); background: var(--teal); color: #fff; }
.im-bank-section { display: none; }
.im-bank-section.im-active { display: block; }
/* Attachment delete button */
.im-attach-delete-btn { display: none; margin-top: 6px; padding: 3px 10px; font-size: 11px; border: 1px solid var(--error,#dc2626); color: var(--error,#dc2626); background: none; border-radius: 5px; cursor: pointer; }
.im-attach-delete-btn:not(.im-hidden-select) { display: inline-block; }
/* Helper sizing classes (replaces inline style="") */
.im-type-label { margin: 0 8px 0 0; }
.im-type-select { width: 120px; }
.im-narrow-field { max-width: 260px; }
.im-sig-name-field { max-width: 340px; margin-bottom: 12px; }
.im-sig-hint { font-size: 11px; color: var(--ink-soft); }
/* Payment section (paid-status fields) — shown via JS adding .im-visible */
.im-payment-section { display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
.im-payment-section.im-visible { display: grid; }
.na-c374--hidden { display: none !important; }
/* ── Invoice modal attachment ────────────────────────────────────────────── */
.im-attach-zone { border: 1.5px dashed var(--line); border-radius: 8px; padding: 12px 16px; background: var(--paper-2); }
.im-attach-label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.im-attach-icon { font-size: 20px; }
.im-attach-text { font-size: 13px; font-weight: 600; }
.im-attach-hint { font-size: 11px; color: var(--ink-soft); }
.im-attach-input { display: none; }
.im-attach-status { font-size: 12px; color: var(--ink-soft); margin-top: 6px; min-height: 16px; }
/* ── Invoice modal signature pad ─────────────────────────────────────────── */
.im-sig-section { display: flex; flex-direction: column; gap: 6px; }
.im-sig-wrap { border: 1.5px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.im-sig-canvas { display: block; width: 100%; height: 120px; touch-action: none; cursor: crosshair; }
.im-sig-clear { align-self: flex-start; padding: 4px 12px; font-size: 11px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; color: var(--ink-soft); }
.im-sig-clear:hover { border-color: var(--error); color: var(--error); }
/* ── Finance receipt scan UI ─────────────────────────────────────────────── */
.fin-receipt-zone { border: 1.5px dashed var(--line); border-radius: 8px; padding: 12px 16px; background: var(--paper-2); transition: border-color .15s; }
.fin-receipt-zone:hover { border-color: var(--teal); }
.fin-receipt-result { margin-top: 10px; }
.fin-receipt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 10px 0; }
.fin-rf { display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.fin-rf-label { font-weight: 600; color: var(--ink-soft); font-size: 11px; white-space: nowrap; min-width: 100px; }
.fin-rf-full { grid-column: 1 / -1; }