/* Warehouse Genie minimal styles */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0;
  background: #f5f5f5;
}

nav {
  background: #1a3a5c;
  color: white;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 48px;
}

nav a { color: #cde; text-decoration: none; }
nav a:hover { color: white; }
nav .brand { font-weight: 700; font-size: 1.1em; color: white; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.75rem; flex: 1; }
nav .user-info { font-size: 12px; color: #aac; }
nav .user-info button { background: transparent; border: 1px solid #aac; color: #aac; padding: 2px 8px; cursor: pointer; border-radius: 3px; }

/* Inventory nav group — pure-CSS hover dropdown (no JS) */
nav .nav-group { position: relative; }
nav .nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  gap: 0;
  min-width: 150px;
  padding: 0.25rem 0;
  background: #1a3a5c;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 100;
}
nav .nav-group:hover .nav-submenu { display: flex; }
nav .nav-submenu li { padding: 0; }
nav .nav-submenu a { display: block; padding: 0.4rem 0.9rem; white-space: nowrap; }
nav .nav-submenu a:hover { background: #25527e; }

main { max-width: 1200px; margin: 1.5rem auto; padding: 0 1rem; }

h1, h2 { color: #1a3a5c; margin-top: 0; }

table { width: 100%; border-collapse: collapse; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #eee; }
th { background: #f0f4f8; font-weight: 600; }
th a { color: #1a3a5c; text-decoration: none; }
th a:hover { text-decoration: underline; }
tr:hover td { background: #f9fafb; }

.list-controls { margin-bottom: 1rem; display: flex; gap: 0.5rem; align-items: center; }
.list-controls input[type=text] { padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; width: 250px; }
.list-controls button, .list-controls a { padding: 6px 14px; background: #1a3a5c; color: white; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; }
.list-controls a { background: #6c757d; }

.flash { padding: 10px 16px; margin: 0 0 1rem; border-radius: 4px; }
.flash-error { background: #fee; border: 1px solid #f99; color: #c00; }
.flash-success { background: #efe; border: 1px solid #9c9; color: #060; }

.detail-card { background: white; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-radius: 4px; }
.detail-card h2 { border-bottom: 2px solid #e0e8f0; padding-bottom: 0.5rem; }
.field-group { display: grid; grid-template-columns: 200px 1fr; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.field-label { font-weight: 600; color: #555; padding-top: 4px; }
.field-value { padding: 4px 0; }

form .form-group { margin-bottom: 1rem; }
form label { display: block; font-weight: 600; margin-bottom: 4px; color: #555; }
form input, form select, form textarea { width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
form button[type=submit] { padding: 8px 20px; background: #1a3a5c; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
form button[type=submit]:hover { background: #254e82; }
.btn-secondary { background: #6c757d !important; }
.btn-danger { background: #c00 !important; }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #e8eef4; }
.login-box { background: white; padding: 2rem; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); width: 360px; }
.login-box h1 { text-align: center; margin-bottom: 0.25rem; }
.login-box h2 { text-align: center; font-weight: normal; color: #666; margin-top: 0; margin-bottom: 1.5rem; }
.login-box label { display: block; font-weight: 600; margin-bottom: 0.75rem; }
.login-box input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
.login-box button { display: block; width: 100%; padding: 10px; background: #1a3a5c; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 15px; margin-top: 1rem; }

a { color: #1a6ab8; }
a:hover { color: #0d4a8a; }

.back-link { margin-bottom: 1rem; display: inline-block; }

.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.badge-yes { background: #dfd; color: #060; }
.badge-no { background: #fee; color: #900; }
.badge-muted { background: #eee; color: #777; }
/* Historical operator-import lines (source='operator-import'): billed from the Camelot
   charges archive for demo completeness, NOT editable and NOT live-captured. Distinct
   from the green live badges and the red editable-operator badge. */
.badge-import { background: #ede7f6; color: #4527a0; }

/* ============================ Invoice Hub ============================ */
/* First polished product surface. Dense-but-scannable operations screen,
   built on the house navy (#1a3a5c) + white-card language. htmx / fetch only. */
.hub { max-width: 1360px; }
.hub-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.75rem; }
.hub-title h1 { margin: 0; font-size: 1.6rem; }
.hub-sub { color: #7a8aa0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.hub-monthbar select { padding: 6px 10px; border: 1px solid #c4cede; border-radius: 6px; font-size: 15px; font-weight: 600; color: #1a3a5c; background: #fff; margin-left: 4px; }

.hub-toggles { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.9rem; }
.seg { display: inline-flex; align-items: center; background: #eef2f7; border-radius: 8px; padding: 3px; gap: 2px; }
.seg-label { font-size: 0.75rem; color: #7a8aa0; padding: 0 8px; }
.seg-btn { padding: 5px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #4a5b70; text-decoration: none; }
.seg-btn:hover { color: #1a3a5c; }
.seg-btn.active { background: #1a3a5c; color: #fff; }

/* Top strip — the live "Kate email" */
.kate-strip { background: linear-gradient(180deg,#fff,#f7f9fc); border: 1px solid #e0e8f0; border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 1px 4px rgba(26,58,92,0.08); }
.kate-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.kate-title { font-weight: 700; color: #1a3a5c; font-size: 1.05rem; }
.kate-grand { margin-left: auto; color: #4a5b70; font-size: 0.95rem; }
.kate-grand strong { color: #0d2b47; font-size: 1.2rem; }
.kate-attention { color: #a8500a; font-weight: 700; background: #fff3e0; padding: 3px 10px; border-radius: 12px; }
.kate-clear { color: #1a7a3a; font-weight: 700; background: #e6f6ec; padding: 3px 10px; border-radius: 12px; }
/* v3 item #4: unconfirmed indicator — visually SECONDARY (muted) vs the attention badge. */
.kate-unconfirmed { color: #5a6b80; font-weight: 600; background: #eef2f7; border: 1px solid #dbe3ee; padding: 2px 10px; border-radius: 12px; font-size: 0.82rem; text-decoration: none; cursor: pointer; }
.kate-unconfirmed:hover { background: #e2e9f2; color: #1a3a5c; }
.kate-groups { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.kate-card { flex: 1 1 160px; min-width: 150px; background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; padding: 0.6rem 0.8rem; }
.kate-card-label { font-weight: 700; color: #1a3a5c; font-size: 0.85rem; }
.kate-card-total { font-size: 1.35rem; font-weight: 700; color: #0d2b47; margin: 2px 0; }
.kate-card-meta { font-size: 0.75rem; color: #8090a4; display: flex; gap: 6px; align-items: center; }
.kate-empty { color: #8090a4; font-style: italic; }

/* Status chips */
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px; background: #fff; border: 1px solid #d3dced; color: #4a5b70; text-decoration: none; font-size: 13px; font-weight: 600; }
.chip:hover { border-color: #1a3a5c; color: #1a3a5c; }
.chip.active { background: #1a3a5c; color: #fff; border-color: #1a3a5c; }
.chip-count { background: rgba(0,0,0,0.08); border-radius: 10px; padding: 0 7px; font-size: 11px; }
.chip.active .chip-count { background: rgba(255,255,255,0.22); }
.chip-warn { background: #fff3e0; color: #a8500a; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; }

/* Filter tokens */
.hub-filters { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; margin-bottom: 1rem; padding: 0.6rem 0.8rem; background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; }
.tok { padding: 5px 9px; border: 1px solid #cbd5e3; border-radius: 6px; font-size: 13px; }
.tok-wide { width: 220px; }
.tok-clear { color: #6c757d; font-size: 13px; text-decoration: none; }
.filter-note { color: #a8500a; font-size: 12px; font-style: italic; }

/* Filter LISTS (v3 item #7) — faceted tag lists (Client / Charge Category / Source) */
.fl { display: flex; align-items: baseline; gap: 8px; }
.fl-label { font-size: 12px; font-weight: 700; color: #5a6b80; text-transform: uppercase; letter-spacing: 0.02em; min-width: 118px; flex: 0 0 auto; padding-top: 3px; }
/* Tags grow HORIZONTALLY first, wrap to a new row only at the card wall (item #7). */
.fl-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 auto; }
.fl-tag { display: inline-flex; align-items: center; gap: 5px; background: #eef4fb; border: 1px solid #cddcef; color: #1a3a5c; border-radius: 14px; padding: 2px 6px 2px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.fl-x { color: #a8500a; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1; padding: 0 2px; }
.fl-x:hover { color: #c0392b; }
.fl-add-wrap { position: relative; display: inline-flex; }
.fl-add { width: 24px; height: 24px; padding: 0; line-height: 1; border-radius: 12px; background: #fff; color: #1a3a5c; border: 1px dashed #b9c6da; font-size: 16px; font-weight: 700; cursor: pointer; }
.fl-add:hover:not([disabled]) { background: #eef4fb; border-color: #2e6da4; }
.fl-add[disabled] { opacity: 0.4; cursor: default; }
.fl-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: #fff; border: 1px solid #d3dced; border-radius: 8px; box-shadow: 0 6px 20px rgba(13,43,71,0.18); padding: 6px; z-index: 140; min-width: 220px; }
.fl-search { width: 100%; padding: 6px 8px; border: 1px solid #cbd5e3; border-radius: 6px; font-size: 13px; margin-bottom: 6px; box-sizing: border-box; }
.fl-options { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.fl-option { padding: 5px 10px; border-radius: 6px; text-decoration: none; color: #4a5b70; font-size: 13px; cursor: pointer; }
.fl-option:hover { background: #eef4fb; color: #1a3a5c; }
.fl-empty { padding: 5px 10px; font-size: 13px; }
.fl-search-box { align-items: center; gap: 10px; }

/* v3 item #6 + polish item #3: column sort affordances. Polish #3b: the WHOLE column title is
   the click target (title + glyph wrapped in one <a>). Polish #3a: desc-first cycle
   (↕ unsorted → ▼ desc → ▲ asc → clear). */
.sort-aff { text-decoration: none; cursor: pointer; font-size: inherit; user-select: none;
            display: inline; color: inherit; }
.sort-aff:hover .sort-title { text-decoration: underline; }
.sort-aff .sort-glyph { font-size: 11px; margin-left: 3px; }
.sort-aff.unsorted .sort-glyph { color: #b9c6da; }
.sort-aff.unsorted:hover .sort-glyph { color: #2e6da4; }
.sort-aff.sorted .sort-glyph { color: #1a3a5c; font-weight: 700; }

/* Polish item #3c: per-client invoice-list sort bar (the middle drill level). */
.inv-sortbar { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px;
               font-size: 12px; color: #5a6b80; }
.inv-sortbar-label { font-weight: 600; }
.inv-sortbar .sort-aff .sort-title { color: #2e6da4; }

/* Read-only Camelot operational archive. */
.archive-note { display: inline-block; margin: 0 0 1rem; padding: .4rem .65rem;
  border: 1px solid #d7a84a; border-radius: 5px; background: #fff8e6; color: #704d08; font-size: .9rem; }
.archive-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; margin-bottom: 1rem; }
.archive-filters label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; font-weight: 600; }
.archive-piece-filters input { width: 8.5rem; }
.archive-summary, .archive-card { margin: 0 0 1rem; padding: .75rem; border: 1px solid #d9e1ea;
  border-radius: 6px; background: #f8fafc; }
.archive-card dl { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: 0; }
.archive-card dl div { min-width: 9rem; }
.archive-card dt { color: #607080; font-size: .75rem; text-transform: uppercase; }
.archive-card dd { margin: .2rem 0 0; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.camelot-table { white-space: nowrap; }
.archive-total { display: inline-block; margin-right: 1rem; font-weight: 700; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; }

/* Client table + drill */
.hub-table { border-radius: 8px; overflow: hidden; }
.hub-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: #5a6b80; }
.hub-table .num { text-align: right; }
.hub-table .money { font-variant-numeric: tabular-nums; font-weight: 600; }
.client-row { cursor: pointer; }
.client-row:hover td { background: #f2f7fc; }
.drill-toggle { color: #7a8aa0; width: 26px; text-align: center; }
.client-name .muted { color: #8090a4; font-weight: 400; }
.muted { color: #9aa7b8; }
/* Revenue semantics (feedback C#8): up = more revenue = GREEN, down = RED.
   v1 had these swapped (up rendered red). */
.delta-up { color: #1a7a3a; font-weight: 600; }
.delta-down { color: #c0392b; font-weight: 600; }
.co-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #fff; background: #4a6fa5; }
.co-1 { background: #2e6da4; } .co-2 { background: #6a4fa0; } .co-3 { background: #8a8a8a; }
/* Deterministic company palette (feedback A#4): co-c0..co-c7 via md5(code)%8. */
.co-c0 { background: #2e6da4; } .co-c1 { background: #6a4fa0; } .co-c2 { background: #1a7a3a; }
.co-c3 { background: #a8500a; } .co-c4 { background: #b03a5b; } .co-c5 { background: #0d7d8a; }
.co-c6 { background: #5a6b1a; } .co-c7 { background: #7a4a2a; }

/* Status badges (lifecycle) */
.status-draft { background: #fdecea; color: #b23c17; }
.status-needs-review { background: #fff3e0; color: #a8500a; }
.status-confirmed { background: #e3f0ff; color: #1a5fa8; }
.status-sent { background: #e6f6ec; color: #1a7a3a; }
.status-unpaid { background: #fbeaea; color: #b3261e; }
.status-paid { background: #eef7ec; color: #2e7d32; }

/* Drill: invoice + category + line tables */
.drill-container > td { background: #f7f9fc; padding: 0.5rem 0.75rem 0.9rem; }
.invoice-block { background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; margin-bottom: 0.6rem; padding: 0.6rem 0.8rem; }
/* Polish item #6: yellow flash outline on a just-created invoice card; settles after ~3s. */
.invoice-block.invoice-flash { animation: invoiceFlash 3s ease-out 1; }
@keyframes invoiceFlash {
  0%   { outline: 3px solid #f5c518; outline-offset: 2px; background: #fff8dd; box-shadow: 0 0 0 4px rgba(245,197,24,0.35); }
  70%  { outline: 3px solid #f5c518; outline-offset: 2px; background: #fffceb; box-shadow: 0 0 0 4px rgba(245,197,24,0.18); }
  100% { outline: 3px solid transparent; outline-offset: 2px; background: #fff; box-shadow: 0 0 0 4px rgba(245,197,24,0); }
}
.invoice-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.inv-id { font-weight: 700; color: #1a3a5c; }
.inv-total { margin-left: auto; font-weight: 700; color: #0d2b47; }
.inv-actions { display: inline-flex; gap: 4px; }
/* Round 3 item #2: the ONLY styling for the revert expand — pin the Edit/charges button to the
   mini-button intrinsic height so it keeps its box (matching Mark sent) when a sibling revert
   <details> expands the row. Round-3 reversed the round-2 polish (absolute-positioned reason
   form, flex-start stretch overrides) per Nimmy — this one declaration is all he wanted. */
.inv-actions > button.edit-charges { align-self: center; height: 26px; }
/* Lifecycle buttons are wrapped in forms, so center the flex item that owns the button. */
.inv-actions > form { align-self: center; height: 26px; }
.invoice-print { align-self: center; text-decoration: none; height: 26px; box-sizing: border-box; }
.invoice-line-preview { display: flex; flex-wrap: wrap; gap: 5px; margin: -0.2rem 0 0.45rem; }
.invoice-line-pill { display: inline-flex; gap: 5px; align-items: baseline; max-width: 520px; padding: 3px 8px; border: 1px solid #dbe5ef; border-radius: 6px; background: #f8fafc; color: #31445a; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-line-pill strong { color: #1a3a5c; }
.invoice-line-pill small { color: #526782; font-size: 11px; }
.invoice-line-pill em { color: #6a7a90; font-style: normal; font-variant-numeric: tabular-nums; }
.invoice-line-more { padding: 3px 8px; border-radius: 6px; background: #eef2f7; color: #5a6b80; font-size: 12px; font-weight: 700; }
.line-submeta { margin-top: 2px; color: #6a7a90; font-size: 11px; }
button.mini { padding: 3px 10px; font-size: 12px; background: #eef2f7; color: #1a3a5c; border: 1px solid #cbd5e3; border-radius: 5px; cursor: pointer; }
button.mini:hover { background: #dde6f1; }
.cat-table { box-shadow: none; margin: 0; }
.cat-table th { background: #eef2f7; font-size: 11px; }
.cat-row { cursor: pointer; }
.cat-row:hover td { background: #eef4fb; }
.type-tag { font-size: 11px; color: #6a7a90; background: #eef2f7; padding: 1px 7px; border-radius: 8px; }
.line-table { box-shadow: none; margin: 0.3rem 0; background: #fbfcfe; }
.line-table th { background: #f4f7fa; font-size: 11px; }
.line-table td { font-size: 13px; }
.notes { color: #8090a4; font-size: 11px; }

/* Provenance chips */
.prov-chip { font-size: 11px; padding: 1px 8px; border-radius: 8px; font-weight: 600; }
.prov-auto { background: #e3f0ff; color: #1a5fa8; }
.prov-archive, .prov-operator-import { background: #ede7f6; color: #4527a0; }
.prov-operator { background: #fff3e0; color: #a8500a; }
.prov-derived-pallets { background: #e3f0ff; color: #1a5fa8; }
.prov-manual { background: #e6f6ec; color: #1a7a3a; }
.hub-empty, .hub-table .hub-empty { text-align: center; color: #8090a4; padding: 1.5rem; font-style: italic; }

/* Close ceremony */
.close-bar { margin-top: 1rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid #e0e8f0; border-radius: 10px; display: flex; }
.close-bar form { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0; width: 100%; }
.close-btn { padding: 9px 22px; border: none; border-radius: 7px; font-weight: 700; font-size: 14px; cursor: pointer; color: #fff; }
.close-btn.ready { background: #1a7a3a; }
.close-btn.gated { background: #b0783a; }
.close-hint { color: #7a8aa0; font-size: 13px; }
.dismiss { font-size: 13px; color: #a8500a; }

/* Slide-over side panel */
.panel-overlay { position: fixed; inset: 0; background: rgba(13,43,71,0.35); opacity: 0; pointer-events: none; transition: opacity 0.18s; z-index: 200; }
.panel-overlay.open { opacity: 1; pointer-events: auto; }
.side-panel { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; background: #fff; box-shadow: -3px 0 16px rgba(13,43,71,0.2); transform: translateX(100%); transition: transform 0.2s ease; z-index: 201; padding: 1rem 1.1rem; overflow-y: auto; }
.side-panel.open { transform: translateX(0); }
.panel-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #1a3a5c; font-size: 1.1rem; border-bottom: 2px solid #e0e8f0; padding-bottom: 0.5rem; margin-bottom: 0.75rem; }
.mp-sub { color: #6a7a90; font-size: 13px; }
.mp-table { box-shadow: none; }
.mp-table th { background: #f4f7fa; font-size: 11px; }
.mp-add { margin-top: 1rem; border-top: 1px solid #eee; padding-top: 0.75rem; }
.mp-add h4 { margin: 0 0 0.5rem; color: #1a3a5c; }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.4rem; }
.mp-grid input, .mp-note { padding: 6px 9px; border: 1px solid #cbd5e3; border-radius: 6px; font-size: 13px; width: 100%; }
.mp-note { margin-bottom: 0.5rem; }
.mp-add button { padding: 8px 18px; background: #1a3a5c; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
/* v3 item #5: inline direct-edit of manual lines + saved-state feedback + Done footer */
.mp-editrow input.mp-num { width: 72px; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 5px; font-size: 13px; text-align: right; }
.mp-editrow input.mp-unit { width: 60px; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 5px; font-size: 13px; }
.mp-editrow input.mp-desc { display: block; margin-top: 3px; width: 96%; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 5px; font-size: 12px; }
.mp-rowactions { white-space: nowrap; display: flex; gap: 4px; }
.mp-saved { background: #e6f6ec; color: #1a7a3a; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; margin-left: 8px; }
.mp-just-saved td { animation: mp-saveflash 1.4s ease; }
@keyframes mp-saveflash { 0% { background: #d7f0df; } 100% { background: transparent; } }
.mp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; border-top: 1px solid #eee; padding-top: 0.7rem; }
.mp-foot-hint { font-size: 12px; }
.mp-done { padding: 8px 20px; }

/* Close summary one-pager */
.cs-banner h1 { color: #1a7a3a; }
.kate-onepager h3.cs-group { color: #1a3a5c; margin-top: 1.2rem; border-bottom: 1px solid #e0e8f0; padding-bottom: 4px; }
.cs-table { margin-bottom: 0.5rem; }
.cs-footer { font-size: 12px; margin-top: 1rem; }

/* ============================================================= */
/* AI Chat Agent v1 — drawer-first analyst chat (navy house style) */
/* ============================================================= */
.ai-launch { position: fixed; right: 20px; bottom: 20px; z-index: 150; background: #1a3a5c; color: #fff; border: none; border-radius: 24px; padding: 11px 20px; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(13,43,71,0.3); }
.ai-launch:hover { background: #0d2b47; }
.ai-drawer { display: flex; flex-direction: column; padding: 0; width: 460px; }
.ai-drawer #ai-drawer-body, .ai-drawer .ai-panel { height: 100%; }
.ai-loading { padding: 2rem; color: #7a8aa0; }

/* Scope 8 — full-page chat uses (nearly) the whole viewport width, minimal fixed padding. */
.ai-fullpage { max-width: 1400px; margin: 0.4rem auto; padding: 0 0.6rem; height: calc(100vh - 96px); }
.ai-fullpage .ai-panel { height: 100%; border: 1px solid #e0e8f0; border-radius: 10px; overflow: hidden; }

.ai-panel { display: flex; flex-direction: column; height: 100%; background: #fff; }
.ai-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem; border-bottom: 2px solid #e0e8f0; }
.ai-title { font-weight: 700; color: #1a3a5c; display: flex; align-items: center; gap: 8px; }
.ai-dot { width: 9px; height: 9px; border-radius: 50%; background: #1a7a3a; display: inline-block; }
.ai-model { font-size: 11px; font-weight: 500; color: #7a8aa0; background: #eef2f7; padding: 2px 7px; border-radius: 10px; }
.ai-head-right { display: flex; align-items: center; gap: 8px; }
.ai-meter { font-size: 12px; color: #4a5b70; background: #f4f7fa; border: 1px solid #e5ecf3; border-radius: 10px; padding: 2px 9px; }
.ai-meter-off { color: #6a7a90; }

.ai-controls { display: flex; gap: 6px; align-items: center; padding: 0.5rem 0.9rem; border-bottom: 1px solid #eef2f7; flex-wrap: wrap; }
.ai-controls .ai-newtopic-form { margin: 0; }
.ai-select, .ai-search { padding: 5px 9px; border: 1px solid #cbd5e3; border-radius: 6px; font-size: 13px; }
.ai-search { flex: 1; min-width: 120px; }

/* Scope 1 — denser bubbles: tighter padding, smaller gaps, wider column. */
/* Polish round #7 — wrapper hosts the scroll area + the floating jump-to-bottom button. */
.ai-stream-wrap { flex: 1; position: relative; display: flex; min-height: 0; }
.ai-stream { flex: 1; overflow-y: auto; padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ai-jump-bottom { position: absolute; right: 14px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #d3dced; background: #1a3a5c; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(13,43,71,0.25); z-index: 5; display: flex; align-items: center; justify-content: center; }
.ai-jump-bottom[hidden] { display: none; }
.ai-jump-bottom:hover { background: #0d2b47; }
.ai-msg { max-width: 92%; padding: 5px 10px; border-radius: 10px; font-size: 14px; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; }
.ai-msg-user { align-self: flex-end; background: #1a3a5c; color: #fff; border-bottom-right-radius: 4px; }
.ai-msg-assistant { align-self: flex-start; width: 92%; box-sizing: border-box; background: #f4f7fa; color: #22303f; border: 1px solid #e5ecf3; border-bottom-left-radius: 4px; }
/* Plain (non-markdown) bodies keep author newlines; markdown bodies are block HTML. */
.ai-msg-body:not(.ai-md) { white-space: pre-wrap; }

/* Scope 6 — rendered markdown inside assistant bubbles. */
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p { margin: 0.3rem 0; }
.ai-md h1, .ai-md h2, .ai-md h3, .ai-md h4 { margin: 0.5rem 0 0.3rem; line-height: 1.25; }
.ai-md h1 { font-size: 1.15em; } .ai-md h2 { font-size: 1.08em; } .ai-md h3 { font-size: 1em; } .ai-md h4 { font-size: 0.95em; }
.ai-md ul, .ai-md ol { margin: 0.3rem 0; padding-left: 1.3rem; }
.ai-md li { margin: 0.1rem 0; }
.ai-md code { background: #e7edf4; border-radius: 4px; padding: 0 4px; font-size: 0.9em; font-family: ui-monospace, monospace; }
.ai-md pre { background: #0d2b47; color: #dfe8f6; padding: 8px 10px; border-radius: 6px; overflow-x: auto; margin: 0.4rem 0; }
.ai-md pre code { background: none; color: inherit; padding: 0; }
.ai-md blockquote { margin: 0.4rem 0; padding: 2px 10px; border-left: 3px solid #cbd5e3; color: #4a5b70; }
.ai-md a { color: #1a5bbf; }
/* Polish round #3 — table shrinks to content (width: max-content) so a narrow table no longer
   leaves a full-bubble-width block with a mismatched background beside it; the wrapper stays
   scrollable for wide tables. background: transparent lets the bubble colour show through the
   empty gutter instead of a white box. */
.ai-md-table { border-collapse: collapse; margin: 0.4rem 0; font-size: 0.92em; display: block; overflow-x: auto; max-width: 100%; width: max-content; background: transparent; }
.ai-md-table th, .ai-md-table td { border: 1px solid #d3dced; padding: 3px 8px; text-align: left; vertical-align: top; }
.ai-md-table th { background: #eef2f7; font-weight: 700; }
/* Polish round #4 — horizontal rule / thematic break spanning the bubble width. */
.ai-md hr { border: none; border-top: 1px solid #d3dced; margin: 0.6rem 0; height: 0; }

/* Scope 7 — search-term highlight. */
.ai-msg mark { background: #ffe27a; color: inherit; padding: 0 1px; border-radius: 2px; }

/* Scope 2 — unmistakable "New topic" divider. */
.ai-boundary { text-align: center; margin: 8px 0 4px; position: relative; }
.ai-boundary::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid #d3dced; }
.ai-boundary-pill { position: relative; z-index: 1; background: #1a3a5c; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 12px; border-radius: 12px; }

/* Scope 4 — one folded transparency expander per assistant turn. */
.ai-tools-expander { margin-top: 5px; font-size: 12px; }
.ai-tools-summary { cursor: pointer; color: #1a3a5c; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px; border: 1px solid #d3dced; border-radius: 12px; background: #fff; }
.ai-tools-summary::-webkit-details-marker { display: none; }
.ai-expander-caret { transition: transform 0.12s ease; font-size: 10px; color: #7a8aa0; }
.ai-tools-expander[open] .ai-expander-caret { transform: rotate(90deg); }
.ai-tools { margin-top: 5px; display: flex; flex-direction: column; gap: 4px; }
.ai-tool { font-size: 12px; border: 1px solid #e0e8f0; border-radius: 6px; background: #fff; padding: 5px 7px; }
.ai-tool-err { border-color: #f0c2c2; background: #fff6f6; }
.ai-tool-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.ai-tool-name { font-weight: 700; color: #1a3a5c; }
.ai-tool-err .ai-tool-name { color: #a11; }
.ai-tool-summary { color: #6a7a90; }
.ai-tool-input { background: #0d2b47; color: #dfe8f6; padding: 8px; border-radius: 5px; overflow-x: auto; font-size: 11px; margin: 0 0 4px; white-space: pre-wrap; }
.ai-tool-meta { color: #7a8aa0; font-size: 11px; }

/* Chat fix round 2 / Item 2 — charts + export downloads as first-class in-message blocks. */
.ai-msg-artifacts { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ai-msg-chart { background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; padding: 6px; overflow-x: auto; }
.ai-msg-chart svg { display: block; max-width: 100%; height: auto; }
.ai-msg-export { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; text-decoration: none; font-size: 13px; font-weight: 600; color: #16405f; background: #eaf3fb; border: 1px solid #cfe0f2; border-radius: 8px; padding: 6px 12px; transition: background 0.12s; }
.ai-msg-export:hover { background: #dcecfa; }
.ai-msg-export-icon { font-size: 14px; }

/* Scope 3 — optimistic bubble working indicator + streaming activity lines. */
.ai-msg-pending { opacity: 0.96; }
/* Reserve one text line while empty. Bubble width is owned by .ai-msg-assistant above: without
   an explicit width, align-self:flex-start shrink-wraps the pending activity markup. */
.ai-msg-pending .ai-msg-body { min-height: 1.4em; line-height: 1.4; }
.ai-msg-body.ai-live { line-height: 1.4; }
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9aa8bc; animation: ai-blink 1.2s infinite ease-in-out both; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.ai-activity { margin-top: 4px; font-size: 12px; color: #6a7a90; font-style: italic; display: flex; align-items: center; gap: 6px; }
.ai-activity::before { content: '⚙'; font-style: normal; }
.ai-msg-error { align-self: flex-start; background: #fff6f6; border: 1px solid #f0c2c2; color: #a11; }

/* Scope 8 — per-user transcript text size. */
.ai-stream.ai-size-small .ai-msg { font-size: 12.5px; }
.ai-stream.ai-size-large .ai-msg { font-size: 16px; }
.ai-size-select { font-size: 12px; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 6px; color: #4a5b70; }
/* Polish round #8 — visible labels for the text-size / thinking-effort header controls. */
.ai-ctl-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #4a5b70; white-space: nowrap; }

/* Chat UI v2 — Batch 2: extended thinking effort control + collapsed thinking block. */
.ai-effort-select { font-size: 12px; padding: 4px 6px; border: 1px solid #cbd5e3; border-radius: 6px; color: #4a5b70; }
.ai-thinking { margin: 0 0 5px; font-size: 12.5px; }
.ai-thinking-summary { cursor: pointer; color: #6a5a80; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px dashed #cbc0dd; border-radius: 12px; background: #f7f4fb; }
.ai-thinking-summary::-webkit-details-marker { display: none; }
.ai-thinking-caret { transition: transform 0.12s ease; font-size: 10px; color: #9a8ab0; }
.ai-thinking[open] .ai-thinking-caret { transform: rotate(90deg); }
/* Polish round #1 — trim thinking-block whitespace to chat-bubble density. The body renders
   markdown (block <p>), so drop the pre-wrap (the live textContent view keeps pre-wrap via the
   .ai-thinking-live rule below) and collapse the inner first/last paragraph margins that were
   padding out the top and bottom. Tighter padding matches the bubbles. */
.ai-thinking-body { margin-top: 4px; padding: 5px 9px; border-left: 3px solid #d6cae8; background: #faf8fd; color: #5a5270; border-radius: 4px; }
.ai-thinking-body.ai-md .ai-thinking-seg > :first-child { margin-top: 0; }
.ai-thinking-body.ai-md .ai-thinking-seg > :last-child { margin-bottom: 0; }
/* Live streaming view is raw textContent (not markdown), so keep author newlines. */
.ai-thinking-live { white-space: pre-wrap; }
/* Same for the live answer bubble before the first progressive-markdown swap (review P3). */
.ai-msg-body.ai-live { white-space: pre-wrap; }
.ai-thinking-seg + .ai-thinking-seg { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e2d9ee; }

/* Scope 2/10 — transient toast (New topic feedback) + auto-grow textarea. */
.ai-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); background: #1a3a5c; color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 8px; box-shadow: 0 4px 14px rgba(13,43,71,0.3); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 400; pointer-events: none; }
.ai-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.ai-composer { display: flex; gap: 6px; padding: 0.7rem 0.9rem; border-top: 2px solid #e0e8f0; }
.ai-input { flex: 1; resize: none; padding: 8px 10px; border: 1px solid #cbd5e3; border-radius: 8px; font-size: 14px; font-family: inherit; max-height: 136px; line-height: 20px; }
.ai-send { background: #1a3a5c; color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-weight: 700; cursor: pointer; }
.ai-send:hover { background: #0d2b47; }
.ai-mini { background: #eef2f7; color: #1a3a5c; border: 1px solid #d3dced; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.ai-mini:hover { background: #e0e8f0; }
/* Chat fix round 2 / Item 7 — New-topic loading state (inline spinner + disabled). */
.ai-mini:disabled { cursor: default; opacity: 0.8; }
.ai-mini-loading { position: relative; padding-left: 24px; }
.ai-mini-loading::before { content: ''; position: absolute; left: 8px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 2px solid #9aa8bc; border-top-color: transparent; border-radius: 50%; animation: ai-spin 0.7s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-danger { background: #fdeaea; color: #a11; border-color: #f0c2c2; }
.ai-load-older { text-align: center; margin-bottom: 4px; }

/* Consent + admin */
.ai-consent, .ai-admin { max-width: 820px; margin: 1.5rem auto; }
.ai-consent-box { background: #f9fafb; border: 1px solid #e0e8f0; border-radius: 8px; padding: 1rem 1.2rem; margin: 1rem 0; }
.ai-consent-ver { color: #9aa8bc; font-size: 12px; margin-top: 0.5rem; }
.ai-admin-form { margin: 1rem 0; }
.ai-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0.75rem 0; }
.ai-admin-grid label, .ai-admin-form label { display: block; font-size: 13px; color: #4a5b70; }
.ai-admin-grid input, .ai-admin-form input, .ai-admin-form select, .ai-memory-text { width: 100%; padding: 7px 9px; border: 1px solid #cbd5e3; border-radius: 6px; font-family: inherit; font-size: 13px; }
.ai-switch { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1a3a5c; }
.ai-admin-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.ai-admin-table th { background: #f4f7fa; text-align: left; font-size: 12px; padding: 6px 8px; border-bottom: 2px solid #e0e8f0; }
.ai-admin-table td { padding: 6px 8px; border-bottom: 1px solid #eef2f7; font-size: 13px; vertical-align: top; }
.ai-dict-edit textarea { width: 100%; font-family: inherit; font-size: 12px; border: 1px solid #cbd5e3; border-radius: 5px; padding: 5px; }
.ai-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.ai-badge-baseline { background: #dfe8f6; color: #1a3a5c; }
.ai-badge-agent_note { background: #ede7f6; color: #4527a0; }
.ai-memory-text { font-family: ui-monospace, monospace; font-size: 12px; }

/* ============================================================= */
/* Invoice Hub v2 — command center, center modal, attention queue */
/* ============================================================= */
.hub-header { align-items: center; }
.hub-manage { display: flex; gap: 6px; }
.hub-manage .mini { background: #eef2f7; color: #1a3a5c; border: 1px solid #d3dced; border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.hub-manage .mini:hover { background: #e0e8f0; }
.hub-manage a.mini { text-decoration: none; display: inline-block; }

.param-controls { display: grid; grid-template-columns: 150px 110px minmax(280px, 1fr) auto; gap: 0.75rem; align-items: end; margin-bottom: 1rem; }
.param-controls label { margin: 0; font-size: 12px; color: #5a6b80; text-transform: uppercase; letter-spacing: 0.03em; }
.param-controls select { margin-top: 4px; }
.param-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.85rem; }
.param-summary > div { background: #fff; border: 1px solid #e0e8f0; border-radius: 8px; padding: 0.75rem 0.9rem; min-width: 0; }
.param-summary span:first-child { display: block; color: #7a8aa0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.param-summary strong { color: #0d2b47; }
.param-count { color: #5a6b80; font-size: 13px; margin: 0.35rem 0 0.6rem; }
.param-table th { white-space: nowrap; }
.param-table td { vertical-align: top; }
.param-table td:nth-child(1) { min-width: 240px; }
.param-muted { color: #7a8aa0; font-size: 12px; overflow-wrap: anywhere; }
.param-chip { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #eef2f7; color: #36506a; }
.param-chip-warn { background: #fff3e0; color: #8a5200; }
.param-missing { color: #a8500a; font-weight: 700; }

@media (max-width: 900px) {
  .param-controls { grid-template-columns: 1fr 1fr; }
  .param-controls label:nth-child(3), .param-controls button { grid-column: 1 / -1; }
  .param-summary { grid-template-columns: 1fr; }
}

/* Command-center overview title (feedback A#1; v3 item #1 two-row layout) */
.cc-title { margin: 0.25rem 0 1rem; color: #0d2b47; }
.cc-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cc-row-month { font-size: 1.55rem; font-weight: 800; margin-bottom: 0.35rem; }
.cc-month-label { font-weight: 700; color: #0d2b47; }
.cc-row-scope { font-size: 1.05rem; font-weight: 700; gap: 12px; }
.cc-seg-sm { font-size: 1rem; }
.cc-seg-wrap { position: relative; display: inline-flex; align-items: baseline; gap: 6px; }
.cc-seg { font: inherit; font-weight: 800; color: #1a3a5c; background: none; border: none; border-bottom: 2px dashed #b9c6da; cursor: pointer; padding: 0 2px 1px; }
.cc-seg:hover { color: #2e6da4; border-bottom-color: #2e6da4; }
.cc-seg-label { font-size: 0.68rem; font-weight: 600; color: #8090a4; text-transform: uppercase; letter-spacing: 0.03em; }
.cc-dot { color: #b9c6da; font-weight: 400; }
.cc-menu { position: absolute; top: 100%; left: 0; margin-top: 6px; background: #fff; border: 1px solid #d3dced; border-radius: 8px; box-shadow: 0 6px 20px rgba(13,43,71,0.18); padding: 6px; z-index: 120; min-width: 200px; max-height: 340px; overflow-y: auto; }
.cc-mi { display: block; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #4a5b70; text-decoration: none; cursor: pointer; }
.cc-mi:hover { background: #eef4fb; color: #1a3a5c; }
.cc-mi.active { background: #1a3a5c; color: #fff; }
.cc-menu-year { font-size: 11px; color: #9aa8bc; padding: 4px 8px 2px; text-transform: uppercase; }
.cc-menu-months { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-bottom: 4px; }
.cc-menu-months .cc-mi { text-align: center; padding: 5px 4px; }
.cc-spinner { margin-left: auto; font-size: 1rem; color: #2e6da4; }
.htmx-indicator { opacity: 0; transition: opacity 0.15s; }
.htmx-request .htmx-indicator, .htmx-indicator.htmx-request { opacity: 1; }
.cc-spinner.htmx-request { animation: cc-spin 0.7s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* Group cards as filters (feedback A#2) */
.kate-card { cursor: pointer; text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s; }
.kate-card:hover { border-color: #b9c6da; }
.kate-card.selected { border-color: #1a3a5c; box-shadow: 0 0 0 2px rgba(26,58,92,0.18); }
.kate-attention { cursor: pointer; border: none; font-family: inherit; }
.kate-attention:hover { filter: brightness(0.96); }
.showing-crumb { margin: -0.4rem 0 0.75rem; font-size: 13px; color: #4a5b70; background: #eef4fb; border: 1px solid #d3e0f0; border-radius: 16px; padding: 4px 12px; display: inline-block; }
.showing-crumb strong { color: #1a3a5c; }
.crumb-clear { margin-left: 8px; color: #a8500a; text-decoration: none; font-weight: 700; cursor: pointer; }

/* Scale dropdown (feedback A#4) */
.kate-overflow { display: flex; flex-direction: column; gap: 6px; }
.group-options { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.group-option { padding: 6px 10px; border-radius: 6px; text-decoration: none; color: #4a5b70; font-size: 13px; cursor: pointer; }
.group-option:hover { background: #eef4fb; }
.group-option.active { background: #1a3a5c; color: #fff; }

/* WARN visual treatment (feedback B#6) — left border tint + icon, restrained */
.warn-row td { background: #fffaf3; }
.client-row.warn-row:hover td { background: #fffaf3; }
.warn-row td:first-child { box-shadow: inset 3px 0 0 #e8a54a; }
.warn-ico { color: #a8500a; }
.warn-invoice { border-left: 3px solid #e8a54a; }
.warn-cat td { background: #fff6ec; }
.warn-line td { background: #fff6ec; }
.warn-jump { text-decoration: none; cursor: pointer; }
.warn-flash td { animation: warn-pulse 1.6s ease; }
@keyframes warn-pulse { 0%,100% { background: #fff6ec; } 30% { background: #ffe0b8; } }
.inv-name { font-weight: 700; color: #1a3a5c; }
.inv-id { color: #9aa8bc; font-size: 12px; }

/* Billing shadow-run comparison */
.shadow-controls { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: end; margin-bottom: 0.8rem; padding: 0.65rem; background: #fff; border: 1px solid #e5ecf3; border-radius: 8px; }
.shadow-controls label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 12px; color: #5a6b80; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.shadow-controls select, .shadow-controls input { min-width: 120px; padding: 7px 9px; border: 1px solid #c4cede; border-radius: 6px; background: #fff; color: #1a3a5c; font: inherit; }
.shadow-controls input { min-width: 150px; }
.shadow-controls .primary { padding: 8px 14px; border: 1px solid #1a3a5c; border-radius: 6px; background: #1a3a5c; color: #fff; font-weight: 700; cursor: pointer; }
.shadow-summary { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 0.65rem; margin-bottom: 0.55rem; }
.shadow-summary div { background: #fff; border: 1px solid #e0e8f0; border-radius: 8px; padding: 0.7rem 0.85rem; }
.shadow-summary span { display: block; color: #6c7d91; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.shadow-summary strong { display: block; margin-top: 0.2rem; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.shadow-run { min-width: 0; overflow-x: hidden; }
.shadow-summary-scroll, .shadow-detail-scroll { max-width: 100%; overflow-x: auto; }
.shadow-summary-scroll { border: 1px solid #e0e8f0; border-radius: 8px; background: #fff; }
.shadow-summary-scroll .shadow-table { min-width: 920px; table-layout: fixed; margin: 0; box-shadow: none; }
.shadow-summary-scroll .shadow-table thead th { position: sticky; top: 0; z-index: 2; }
.shadow-summary-scroll .drill-container > td { padding: 0.8rem; max-width: 0; }
.shadow-table .client-row { cursor: pointer; }
.shadow-table .client-row:hover td { background: #eef4fb; }
.shadow-sev-major td:first-child { box-shadow: inset 3px 0 0 #c0392b; }
.shadow-sev-minor td:first-child { box-shadow: inset 3px 0 0 #e8a54a; }
.shadow-sev-match td { background: #f3fbf6; }
.client-row.shadow-sev-match:hover td { background: #edf8f1; }
.shadow-sev-match td:first-child { box-shadow: inset 3px 0 0 #2f8f4f; }
.shadow-row-chip { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
.shadow-row-chip-red { background: #fde9e7; color: #9c2f24; }
.shadow-row-chip-yellow { background: #fff0d9; color: #8a5200; }
.shadow-row-chip-green { background: #e3f5e9; color: #176b38; }
.shadow-legend { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin: 0 0 0.65rem; color: #5a6b80; font-size: 12px; }
.shadow-legend span { display: inline-flex; align-items: center; gap: 5px; }
.shadow-legend-spacer { flex: 1; min-width: 16px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend-major { background: #c0392b; }
.legend-minor { background: #e8a54a; }
.legend-match { background: #2f8f4f; }
.shadow-note { margin-bottom: 0.75rem; }
.shadow-section-label { margin: 0.8rem 0 0.35rem; color: #36506a; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.shadow-bucket { margin: 0.5rem 0 1rem; border: 1px solid #e5ecf3; border-radius: 8px; overflow: hidden; background: #fff; }
.shadow-bucket-head { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; padding: 0.55rem 0.75rem; background: #f7f9fc; border-bottom: 1px solid #e5ecf3; }
summary.shadow-bucket-head { cursor: pointer; list-style: none; }
summary.shadow-bucket-head::-webkit-details-marker { display: none; }
.shadow-bucket-head span { color: #5a6b80; font-variant-numeric: tabular-nums; }
.shadow-line-table { margin: 0; }
.shadow-audit-table { width: max-content; min-width: 100%; table-layout: auto; }
.shadow-audit-table th, .shadow-audit-table td { vertical-align: top; white-space: nowrap; max-width: none; overflow-wrap: normal; }
.shadow-audit-table thead th { position: sticky; top: 0; z-index: 1; }
.shadow-audit-table tbody tr.shadow-pair-start td { border-top: 2px solid #8fa0b4; }
.shadow-audit-table tbody tr:first-child td { border-top-width: 1px; }
.shadow-camelot-row td { border-top: 1px dashed #d7e0ea; background: #fcfcfd; }
.shadow-audit-note { padding: 0.45rem 0.75rem; color: #5f7084; font-size: 12px; background: #fffdf5; border-bottom: 1px solid #e5ecf3; }
.shadow-line-meta { margin-top: 0.2rem; color: #5f7084; font-size: 12px; font-variant-numeric: tabular-nums; white-space: normal; min-width: 180px; max-width: 360px; overflow-wrap: anywhere; }
.shadow-status { display: inline-block; white-space: nowrap; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; background: #e8edf3; color: #36506a; }
.shadow-status-match .shadow-status { background: #e3f5e9; color: #176b38; }
.shadow-status-amount-diff .shadow-status { background: #fff0d9; color: #8a5200; }
.shadow-status-basis-diff .shadow-status { background: #e9f3ff; color: #205493; }
.shadow-status-missing-engine .shadow-status, .shadow-status-needs-data .shadow-status { background: #fde9e7; color: #9c2f24; }
.shadow-status-engine-extra .shadow-status { background: #e7f0ff; color: #205493; }
.shadow-status-raw-engine .shadow-status { background: #e7f0ff; color: #205493; }
.shadow-status-raw-camelot .shadow-status { background: #ede7f6; color: #4527a0; }
.shadow-status-operator-needed .shadow-status { background: #f0eaff; color: #62429b; }
.shadow-matched { margin-top: 1rem; border: 1px solid #d8e3ee; border-radius: 8px; background: #fff; overflow: hidden; }
.shadow-matched > summary { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.8rem; cursor: pointer; font-weight: 800; color: #1a3a5c; background: #f7f9fc; }
.shadow-matched > summary span { color: #5a6b80; font-weight: 600; font-variant-numeric: tabular-nums; }
.shadow-differences { border-color: #f0c77b; }
.shadow-differences > summary { background: #fff8ec; color: #7a4a00; }
.shadow-unmatched { border-color: #efb3ad; }
.shadow-unmatched > summary { background: #fff1ef; color: #9c2f24; }
.shadow-correct { border-color: #cfe8d7; }
.shadow-correct > summary { background: #f3fbf6; color: #176b38; }
.shadow-bucket-matched { margin: 0; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; }
.shadow-bucket-matched > summary { cursor: pointer; }
.shadow-no-activity-row td { background: #f8fafc; }
.shadow-no-activity { margin: 0; border-color: #d8e3ee; }
.shadow-no-activity > summary { background: #f7f9fc; color: #5a6b80; }
.shadow-no-activity-list { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; padding: 0.65rem 0.8rem; background: #fff; }
.shadow-no-activity-list span { color: #5a6b80; font-size: 12px; background: #eef2f7; border-radius: 10px; padding: 2px 8px; }
@media (max-width: 760px) {
  .shadow-summary { grid-template-columns: 1fr; }
}

/* Per-line provenance expand (feedback C#10) */
.line-exp span { cursor: pointer; }
.prov-detail { background: #f7f9fc; font-size: 12px; }
.prov-kv { color: #6a7a90; margin-left: 10px; }

/* Center modal (feedback E) */
.modal-overlay { position: fixed; inset: 0; background: rgba(13,43,71,0.45); opacity: 0; pointer-events: none; transition: opacity 0.16s; z-index: 300; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.center-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-48%) scale(0.98); opacity: 0; pointer-events: none; width: 560px; max-width: 94vw; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(13,43,71,0.32); z-index: 301; padding: 1.1rem 1.3rem; transition: opacity 0.16s, transform 0.16s; }
.center-modal.small { width: 440px; }
.center-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.modal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #1a3a5c; font-size: 1.1rem; border-bottom: 2px solid #e0e8f0; padding-bottom: 0.55rem; margin-bottom: 0.85rem; }
.center-modal .primary, .attn-form .primary, .ni-actions .primary { background: #1a3a5c; color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-weight: 700; cursor: pointer; }
.center-modal .mini, .attn-form .mini { background: #eef2f7; color: #1a3a5c; border: 1px solid #d3dced; border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer; }

/* Attention queue (feedback B#5) */
.attn-intro { color: #4a5b70; font-size: 13px; }
.attn-item { border: 1px solid #eadfce; background: #fffaf3; border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 0.7rem; }
.attn-cause { font-weight: 700; color: #1a3a5c; }
.attn-note-flag { font-weight: 500; color: #a8500a; margin-left: 8px; font-size: 12px; }
.attn-plain { color: #4a5b70; font-size: 13px; margin: 4px 0 8px; }
.attn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.attn-act summary { cursor: pointer; list-style: none; display: inline-block; padding: 4px 10px; border: 1px solid #d3dced; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 600; color: #1a3a5c; }
.attn-act summary::-webkit-details-marker { display: none; }
.attn-act[open] summary { background: #1a3a5c; color: #fff; }
.attn-form { margin-top: 8px; padding: 8px; background: #fff; border: 1px solid #e5ecf3; border-radius: 6px; }
.attn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.attn-grid label { font-size: 11px; color: #6a7a90; display: flex; flex-direction: column; }
.attn-grid input, .attn-reason { padding: 6px 8px; border: 1px solid #cbd5e3; border-radius: 5px; font-size: 13px; }
.attn-reason { width: 100%; margin-bottom: 6px; }
.attn-hint, .attn-foot { font-size: 11px; color: #8090a4; }
.mini-link { color: #2e6da4; cursor: pointer; text-decoration: none; font-size: 13px; }
.sup-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #eef2f7; font-size: 13px; }
.sup-reason { color: #6a7a90; }
.sup-rev { margin-left: auto; }

/* New invoice modal */
.ni-sub { color: #6a7a90; font-size: 13px; }
.ni-label { display: block; font-size: 13px; color: #4a5b70; margin: 0.6rem 0; }
.ni-label select { width: 100%; margin-top: 4px; }
.ni-actions { display: flex; gap: 8px; margin-top: 0.6rem; }

/* ================= Nav rework + unified audit feed (nav-audit-v1) ================= */
nav { min-height: 54px; height: auto; }
nav .brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
nav .brand-mark { width: auto; height: 28px; display: block; }
nav .primary-nav { align-items: stretch; align-self: stretch; gap: 0.25rem; }
nav .primary-nav > li { display: flex; align-items: stretch; }
nav .primary-nav > li > a { display: flex; align-items: center; padding: 0 0.65rem; border-bottom: 3px solid transparent; }
nav .primary-nav > li > a.active { color: #fff; font-weight: 800; border-bottom-color: #65c8ff; }
nav .nav-group:hover .nav-submenu, nav .nav-group:focus-within .nav-submenu { display: grid; }
nav .nav-mega { grid-template-columns: minmax(190px, 1fr) minmax(150px, .8fr); min-width: 410px; padding: .6rem; gap: .4rem; }
nav .nav-mega section { display: flex; flex-direction: column; }
nav .nav-mega section + section { border-left: 1px solid #42627f; padding-left: .4rem; }
nav .nav-mega strong { padding: .3rem .65rem; color: #8ed4fa; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
nav .nav-mega a { padding: .32rem .65rem; }
nav .nav-inventory-label { padding: .4rem .65rem .1rem; color: #9fb6ca; font-size: 11px; text-transform: uppercase; }
.login-logo { display: block; max-width: 280px; max-height: 140px; margin: 0 auto 1rem; }
.audit-intro { color: #6a7a90; margin: -.6rem 0 0; }
.audit-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.audit-controls input[type=search] { width: 280px; padding: 8px 10px; border: 1px solid #cbd5e3; border-radius: 6px; }
.audit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.audit-chips label, .audit-all { padding: 5px 11px; border: 1px solid #cbd5e3; border-radius: 16px; background: #fff; color: #36506a; cursor: pointer; text-decoration: none; font-weight: 600; }
.audit-chips label:has(input:checked), .audit-all.active { background: #1a3a5c; color: #fff; border-color: #1a3a5c; }
.audit-chips input { width: auto; margin-right: 3px; }
.audit-timeline { background: #fff; border: 1px solid #e0e8f0; border-radius: 8px; overflow: hidden; }
.audit-event { display: grid; grid-template-columns: 165px 1fr; gap: 18px; padding: 13px 16px; border-bottom: 1px solid #edf1f5; }
.audit-event:last-child { border-bottom: 0; }
.audit-event time { color: #6a7a90; font-size: 12px; padding-top: 3px; }
.audit-badge { display: inline-block; min-width: 54px; text-align: center; padding: 2px 7px; border-radius: 10px; margin-right: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; background: #e8edf3; color: #36506a; }
.audit-badge-billing { background: #e7f0ff; color: #205493; }.audit-badge-qbo { background: #e3f5e9; color: #176b38; }
.audit-badge-login { background: #f0eaff; color: #62429b; }.audit-badge-agent { background: #fff0d9; color: #8a5200; }
.audit-meta { margin-top: 3px; color: #7a8aa0; font-size: 12px; }.audit-event details { margin-top: 6px; }
.audit-event details summary { cursor: pointer; color: #2e6da4; font-size: 12px; }.audit-event pre { white-space: pre-wrap; background: #f6f8fa; padding: 8px; border-radius: 5px; }
.audit-empty { padding: 2rem; color: #7a8aa0; text-align: center; }.audit-older { display: block; width: max-content; margin: 1rem auto; }
@media (max-width: 1050px) {
  nav { padding: 0 .6rem; gap: .45rem; } nav .brand { font-size: 1em; } nav .user-info { max-width: 175px; }
  nav .primary-nav > li > a { padding: 0 .45rem; } nav .nav-mega { left: auto; right: 0; }
}
@media (max-width: 700px) { .audit-controls { align-items: stretch; flex-direction: column; }.audit-controls input[type=search] { width: 100%; }.audit-event { grid-template-columns: 1fr; gap: 4px; } }

@media print {
  nav,
  .shadow-controls,
  .hub-manage {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #111827;
  }

  .hub.shadow-print {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .shadow-print .hub-header,
  .shadow-print .shadow-summary,
  .shadow-print .shadow-bucket {
    break-inside: avoid;
  }

  .shadow-print .drill-container {
    display: table-row !important;
  }

  .shadow-print .table-scroll {
    overflow: visible;
  }

  .shadow-print table {
    font-size: 9px;
  }

  .shadow-print th,
  .shadow-print td {
    padding: 3px 4px;
  }

  .shadow-print .shadow-audit-note,
  .shadow-print .shadow-line-meta {
    color: #374151;
  }
}