:root {
  --navy: #0d2b4e;
  --navy-light: #1a4a7a;
  --gold: #b8860b;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #e3e6ea;
  --text: #1c2230;
  --text-muted: #6b7280;
  --danger: #c0362c;
  --danger-bg: #fbeceb;
  --warning: #b06d00;
  --warning-bg: #fdf1de;
  --success: #1a7a4c;
  --success-bg: #e9f7ef;
  --info: #1c5aa8;
  --info-bg: #eaf2fc;
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--navy-light); text-decoration: none; }

.shell { display:flex; min-height:100vh; }
.sidenav { width: 250px; background: var(--navy); color: #fff; display:flex; flex-direction:column; padding: 1.25rem 0.9rem; flex-shrink:0; }
.brand { display:flex; align-items:center; gap:10px; margin-bottom: 1.5rem; padding: 0 0.4rem; }
.brand-mark { background: var(--gold); color: var(--navy); font-weight:700; font-size:14px; padding:6px 9px; border-radius:6px; }
.brand-title { font-weight:600; font-size:14px; line-height:1.2; }
.brand-sub { font-size:11px; color:#9fb4cc; }
.navlink { display:block; padding:9px 12px; border-radius:8px; color:#cfe0f2; font-size:13.5px; margin-bottom:2px; }
.navlink:hover { background: rgba(255,255,255,0.08); color:#fff; }
.navlink.active { background: var(--gold); color: var(--navy); font-weight:600; }
.nav-group { margin-bottom:2px; }
.nav-group-title {
  display:flex; align-items:center; cursor:pointer; list-style:none;
  padding:9px 12px; border-radius:8px; font-size:12.5px; font-weight:600;
  color:#9db8d4; letter-spacing:0.02em; user-select:none;
}
.nav-group-title:hover { background: rgba(255,255,255,0.06); color:#fff; }
.nav-group-title::-webkit-details-marker { display:none; }
.nav-group-title::before { content:"▸"; display:inline-block; width:14px; transition:transform 0.15s; }
.nav-group[open] > .nav-group-title::before { transform: rotate(90deg); }
.nav-group .navlink { padding-left:26px; font-size:13px; }
.nav-spacer { flex:1; }
.user-card { border-top:1px solid rgba(255,255,255,0.15); padding-top:0.9rem; margin-top:0.9rem; }
.user-name { font-size:13px; font-weight:600; }
.user-role { font-size:11.5px; color:#9fb4cc; margin-bottom:6px; }
.logout-link { display:block; font-size:12px; color:#f2c94c; margin-top:4px; }

.content { flex:1; padding: 1.75rem 2.25rem; max-width:1400px; }

.page-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.25rem; flex-wrap:wrap; gap:10px; }
.page-head h1 { margin:0 0 4px; font-size:22px; }
.page-sub { margin:0; color: var(--text-muted); font-size:13px; }

.btn { display:inline-block; padding:9px 16px; border-radius:8px; font-size:13.5px; font-weight:600; border:1px solid transparent; cursor:pointer; }
.btn-primary { background: var(--navy); color:#fff; }
.btn-primary:hover { background: var(--navy-light); }
.btn-secondary { background:#fff; border-color: var(--border); color:var(--text); }
.btn-ghost { background:transparent; color: var(--navy-light); border-color: var(--border); }
.btn-danger { background: var(--danger); color:#fff; }
.btn-danger:hover { opacity:0.9; }
.btn-sm { padding:6px 12px; font-size:12.5px; }
.btn-block { width:100%; text-align:center; }
.bulk-action-bar { display:flex; align-items:center; gap:10px; background:#f4f7fb; border:1px solid var(--border); border-radius:8px; padding:10px 14px; margin-bottom:12px; flex-wrap:wrap; }
.bulk-action-bar #bulk-selected-count { font-size:13px; font-weight:600; color:var(--text-muted); margin-right:6px; }
.bulk-reassign-group select { padding:7px 10px; border-radius:6px; border:1px solid var(--border); font-size:13px; }
.col-bulk-check { width:32px; text-align:center; }

.search-bar { display:flex; gap:8px; margin-bottom:1rem; }
.search-bar input { flex:1; max-width:340px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; }

.table-wrap { background: var(--surface); border:1px solid var(--border); border-radius:12px; overflow:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.clickable-row { cursor:pointer; }
.clickable-row:hover { background:#f4f7fb; }
.data-table th { text-align:left; background:#f8f9fb; color:var(--text-muted); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; font-size:11.5px; text-transform:uppercase; letter-spacing:0.02em; }
.sort-header { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:3px; cursor:pointer; user-select:none; }
.sort-header:hover { color:var(--navy); }
.sort-indicator { font-size:10px; color:var(--gold); font-weight:700; }
.sort-indicator sup { font-size:9px; margin-left:1px; }
.data-table td { padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:#fafbfc; }
.empty-row { text-align:center; color:var(--text-muted); padding:2rem !important; }
.col-actions { display:flex; gap:10px; }
.link-action { color: var(--navy-light); font-size:12.5px; font-weight:600; background:none; border:none; cursor:pointer; padding:0; }
.link-danger { color: var(--danger); }
.inline-form { display:inline; }

/* Dashboard "Highest-Priority Open Alerts" Condition column -- added 28
   Aug 2026 alongside the Phase 3 catastrophic-event alerting feature,
   whose "Cat Event Candidate Detected" wording runs noticeably longer
   than other trigger conditions and was forcing this table (and the
   whole page) to stretch full-width under .data-table td's blanket
   white-space:nowrap above. Collapsed by default via <details>/<summary>
   -- same pattern already used for the sidebar nav groups and
   training_view.html, rather than pulling in a JS library for something
   this simple. */
.data-table td.condition-cell { white-space:normal; max-width:360px; }
.condition-cell details summary { cursor:pointer; list-style:none; }
.condition-cell details summary::-webkit-details-marker { display:none; }
.condition-cell details summary::before { content:"▸ "; color:var(--navy-light); font-size:11px; }
.condition-cell details[open] summary::before { content:"▾ "; }
.condition-cell details:not([open]) .condition-text { display:inline-block; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.condition-cell details[open] .condition-text { white-space:normal; }

/* Same table, "Claim / Cat Event" column -- an auto-ingested cat event's
   name (Phase 3) can run just as long as a Condition. This one doesn't
   need the collapse-on-click treatment (it's just a short row label, not
   a paragraph to read in place), so it simply wraps within a fixed
   width instead of forcing the column -- and the table -- wider. */
.data-table td.claim-cat-cell { white-space:normal; max-width:220px; }

/* Every free-text column across the ~94 modules sharing module_list.html
   hits the exact same blanket white-space:nowrap problem as Condition/
   Claim-Cat above, just under different column keys -- Notes, Reason (STR
   Filing, Reserve Movements, Claim Reopen History), Description (used by
   several modules), Risk Description, Gap Description (Coverage Gaps),
   Participants, Methodology Notes, Data Categories Affected (Data Breach
   Register), Trigger Reason, Trigger Condition (Alert Tracker), Summary
   (Claim Communications), Source / Source Citation (Reinsurer Rating
   Alerts, Regulatory Submission Deadlines -- both explicitly ask the user
   to cite the actual regulation/circular, not just a code), and Deadline
   Description. Rather than adding a new one-off class every time another
   long-text column turns up cut off at the edge of the screen, this one
   generic class covers any column whose key is a genuinely free-text
   field (see the wrap_cols list in module_list.html) -- same fixed width
   for all of them, one class instead of a zoo of column-named ones.

   min-width added same day: max-width alone is only a ceiling, not a
   floor. On a table with several other wide-but-unbroken columns (e.g.
   Coverage Gaps' "Sub Class of Business"), the browser's default
   table-layout:auto happily starved this column down to near-nothing,
   wrapping almost one word per line instead of a readable paragraph.
   The floor keeps it from being squeezed that far. */
.data-table td.wrap-cell { white-space:normal; max-width:320px; min-width:220px; }

/* Uniformity fix (10 Sep 2026): plain wrapping alone left row heights all
   over the place -- a one-line Notes entry next to a paragraph-long Reason
   made the table look ragged. Anything within ~4 lines still just wraps in
   full above with no affordance at all; only entries long enough to blow
   past that get clamped to 4 lines with a "Show more" toggle, so the
   common case stays uniform and only genuine outliers need a click. Same
   <details>/<summary> disclosure pattern as the Condition column above,
   just clamping several lines instead of truncating to one. */
.wrap-cell details.clamp-details summary { cursor:pointer; list-style:none; }
.wrap-cell details.clamp-details summary::-webkit-details-marker { display:none; }
.wrap-cell details.clamp-details:not([open]) .clamp-text {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4;
  overflow:hidden;
}
.wrap-cell details.clamp-details[open] .clamp-text { display:block; }
.wrap-cell details.clamp-details summary::after { content:"Show more ▾"; display:block; margin-top:2px; color:var(--navy-light); font-size:11px; }
.wrap-cell details.clamp-details[open] summary::after { content:"Show less ▴"; }

.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:0.02em; background: var(--info-bg); color: var(--info); white-space:nowrap; }
.badge-critical, .badge-high, .badge-open, .badge-overdue { background: var(--danger-bg); color: var(--danger); }
.badge-medium, .badge-in-progress, .badge-referred-to-cuo { background: var(--warning-bg); color: var(--warning); }
.badge-low, .badge-closed, .badge-complete, .badge-settled, .badge-accepted, .badge-bound { background: var(--success-bg); color: var(--success); }
.badge-acknowledged, .badge-pending, .badge-actioned { background: var(--info-bg); color: var(--info); }
.badge-unverified, .badge-suspended, .badge-revoked, .badge-lapsed, .badge-expired { background: var(--danger-bg); color: var(--danger); }
.badge-expiring-soon { background: var(--warning-bg); color: var(--warning); }
.badge-valid { background: var(--success-bg); color: var(--success); }
.badge-not-submitted { background: var(--danger-bg); color: var(--danger); }
.badge-submitted, .badge-reviewed { background: var(--success-bg); color: var(--success); }
.badge-waived { background: var(--info-bg); color: var(--info); }

.record-form { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.5rem; max-width:640px; }
.form-row { margin-bottom:1rem; display:flex; flex-direction:column; gap:5px; }
.form-row label { font-size:12.5px; font-weight:600; color:var(--text-muted); }
.form-row input, .form-row select, .form-row textarea { padding:9px 11px; border:1px solid var(--border); border-radius:8px; font-size:13.5px; font-family:inherit; }
.form-actions { display:flex; gap:10px; margin-top:1.25rem; }

.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:1.75rem; }
.kpi-card { background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:1rem 1.1rem; }
.kpi-clickable { display:block; text-decoration:none; color:inherit; transition:transform 0.12s ease, box-shadow 0.12s ease; cursor:pointer; }
.kpi-clickable:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08); border-color:var(--navy, #1a2b4c); }
.kpi-label { font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.kpi-value { font-size:21px; font-weight:700; color: var(--navy); }
.kpi-critical .kpi-value { color: var(--danger); }

.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:14px; margin-bottom:1.75rem; }
.chart-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.25rem; }
.chart-card h3 { margin:0 0 0.75rem; font-size:14px; }

.panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.25rem; }
.panel h3 { margin:0 0 0.75rem; font-size:14px; }

.flash-stack { margin-bottom:1rem; display:flex; flex-direction:column; gap:8px; }
.flash { padding:10px 14px; border-radius:8px; font-size:13px; }
.flash-error { background: var(--danger-bg); color: var(--danger); }
.flash-success { background: var(--success-bg); color: var(--success); }
.flash-notice { background: rgba(176,109,0,0.10); color: var(--warning, #b06d00); border: 1px solid rgba(176,109,0,0.25); }

.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--navy) 0%, #143a63 100%); padding:1rem; }
.login-card { background:#fff; border-radius:16px; padding:2.25rem 2rem; width:100%; max-width:380px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.login-title { font-size:18px; text-align:center; margin:0 0 4px; color: var(--navy); }
.login-sub { text-align:center; color:var(--text-muted); font-size:13px; margin:0 0 1.25rem; }
.login-card form { display:flex; flex-direction:column; gap:6px; }
.login-card label { font-size:12.5px; font-weight:600; color:var(--text-muted); margin-top:6px; }
.login-card input { padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; }
.login-card button { margin-top:14px; }
.login-hint { font-size:11px; color:var(--text-muted); text-align:center; margin-top:1.25rem; line-height:1.6; }
.login-hint code { background:#f1f2f4; padding:1px 5px; border-radius:4px; }

@media (max-width: 860px) {
  .shell { flex-direction:column; }
  .sidenav { width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; }
  .nav-spacer { display:none; }
  .content { padding:1.25rem; }
}

/* ---------- Reports & Manual (print-friendly) ---------- */
.report-sheet { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2rem 2.25rem; max-width:980px; }
.report-letterhead { border-bottom:3px solid var(--navy); padding-bottom:14px; margin-bottom:1.5rem; }
.report-title { font-size:20px; font-weight:700; color:var(--navy); }
.report-sub { font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.report-h2 { font-size:15px; color:var(--navy); border-bottom:1px solid var(--border); padding-bottom:6px; margin:1.75rem 0 0.9rem; }
.report-note { font-size:12.5px; color:var(--text-muted); margin:-0.4rem 0 0.9rem; }
.report-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:0.5rem; }
.report-kpi { background:#f8f9fb; border:1px solid var(--border); border-radius:8px; padding:0.7rem 0.85rem; }
.rk-label { font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.rk-value { font-size:17px; font-weight:700; color:var(--navy); }
.report-table { width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:0.5rem; }
.report-table.small { font-size:11.5px; }
.report-table th { text-align:left; background:var(--navy); color:#fff; padding:7px 9px; font-size:11px; text-transform:uppercase; letter-spacing:0.02em; }
.report-table td { padding:6px 9px; border-bottom:1px solid var(--border); }
.report-table tr:nth-child(even) td { background:#f8f9fb; }
.report-checklist { list-style:none; padding:0; font-size:13px; line-height:2; }
.report-footer { margin-top:2rem; padding-top:12px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); text-align:center; }
.flow-strip { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:1rem; }
.flow-step { background:var(--navy); color:#fff; font-size:11px; font-weight:600; padding:8px 10px; border-radius:6px; flex:1; min-width:100px; text-align:center; }
.flow-num { display:block; color:var(--gold); font-weight:700; margin-bottom:2px; }
.report-option-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.report-option-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.4rem; }
.report-option-card h3 { margin:0 0 8px; font-size:15px; }
.report-option-card p { font-size:13px; color:var(--text-muted); margin:0 0 1rem; }
.client-report-form { display:flex; gap:8px; flex-wrap:wrap; }
.client-report-form select { flex:1; min-width:180px; padding:9px 10px; border:1px solid var(--border); border-radius:8px; font-size:13px; }

@media print {
  .sidenav, .no-print, .flash-stack { display:none !important; }
  .shell, .content { display:block !important; padding:0 !important; margin:0 !important; max-width:none !important; }
  body { background:#fff; }
  .report-sheet { border:none; padding:0; max-width:none; }
  .page-break { page-break-before:always; }
  .report-table th { background:#0d2b4e !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ---------- Change History ---------- */
.history-timeline { display:flex; flex-direction:column; gap:12px; max-width:900px; }
.history-entry { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; }
.history-head { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:12.5px; }
.history-action { font-weight:700; padding:2px 9px; border-radius:999px; background:var(--info-bg); color:var(--info); text-transform:capitalize; }
.history-action-create { background:var(--success-bg); color:var(--success); }
.history-action-delete { background:var(--danger-bg); color:var(--danger); }
.history-who { color:var(--text); font-weight:600; }
.history-when { color:var(--text-muted); margin-left:auto; }
.history-details { font-size:12.5px; color:var(--text-muted); margin:8px 0 0; }

/* ---------- Live Presence ---------- */
.presence-banner { display:flex; align-items:center; gap:8px; background:var(--warning-bg); color:var(--warning); border-radius:8px; padding:10px 14px; margin-bottom:1rem; font-size:13px; font-weight:600; }
.presence-dot { width:8px; height:8px; border-radius:50%; background:var(--warning); animation: pulse 1.4s infinite; flex-shrink:0; }
@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:0.3; } }
.presence-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--warning); font-weight:600; margin-left:8px; }
.presence-badge .presence-dot { width:6px; height:6px; }

/* ---------- Vendor Footer ---------- */
/* See multi-client-domain-branding-scoping.md section 8, 9 Sep 2026 --
   a small, constant credit line on every page across every client
   deployment, establishing Zenguard as the software's actual vendor
   (distinct from each client's own logo in the sidenav brand slot). */
.vendor-footer { text-align:center; font-size:11.5px; color:var(--text-muted); padding:14px 20px; }
.history-link { color: var(--text-muted); font-size:12.5px; font-weight:600; }