/* ═══════════════════════════════════════════════════════════════
   ContractX Design System — SciKIQ Plaza Inspired
   Premium intelligence aesthetic: Navy + Teal + Gold
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Primary palette (SciKIQ Plaza) */
  --navy: #001F33;
  --navy-light: #003A5C;
  --blue: #003A5C;
  --blue-hover: #1A5276;
  --blue-light: rgba(0, 58, 92, 0.05);
  --blue-ring: rgba(0, 58, 92, 0.15);
  --teal: #008C8C;
  --teal-light: #00B2A9;
  --gold: #C4962C;
  --gold-light: #E8B84B;
  /* Neutrals */
  --black: #1A1A1A;
  --text: #3D3D3D;
  --text-light: #6B6B6B;
  --text-muted: #9B9B9B;
  --border: #E0DCD6;
  --border-light: #F4F2EF;
  --bg: #FAFBFC;
  --white: #FFFFFF;
  /* Status */
  --green: #1E8449;
  --green-bg: rgba(30, 132, 73, 0.06);
  --red: #C0392B;
  --red-bg: rgba(192, 57, 43, 0.06);
  --amber: #C4962C;
  --amber-bg: rgba(196, 150, 44, 0.06);
  --purple: #7C3AED;
  --purple-bg: rgba(124, 58, 237, 0.06);
  /* Aliases */
  --primary: var(--blue);
  --success: var(--green);
  --warning: var(--amber);
  --danger: var(--red);
  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  /* Radii — Plaza uses no radius (sharp edges) except modals */
  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.65; }
a { color: var(--blue); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--teal); }
img { max-width: 100%; }
strong { font-weight: 600; color: var(--navy); }
code { font-family: var(--mono); font-size: 0.85em; background: var(--border-light); padding: 2px 6px; }
pre { font-family: var(--mono); font-size: 13px; background: var(--border-light); padding: 16px; overflow-x: auto; line-height: 1.7; white-space: pre-wrap; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--border-light); }
::-webkit-scrollbar-thumb { background: #C9C2B6; }

/* ── Layout ── */
.app-layout { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--white); border-right: 1px solid var(--border); position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; }
.sidebar-logo { padding: 20px 24px; border-bottom: 2px solid var(--navy); }
.sidebar-logo h1 { font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -0.03em; }
.sidebar-logo span { color: var(--teal); }
.sidebar-nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 20px; font-size: 13px; font-weight: 500; color: var(--text-light); border-left: 3px solid transparent; transition: all 0.2s; cursor: pointer; text-decoration: none; }
.sidebar-link:hover { background: var(--border-light); color: var(--navy); }
.sidebar-link.active { color: var(--navy); background: rgba(0, 58, 92, 0.06); border-left-color: var(--navy); font-weight: 600; }
.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.5; }
.sidebar-link.active svg { opacity: 1; }

.topbar { height: 56px; background: #001F33; display: flex; align-items: center; padding: 0 40px; position: fixed; top: 0; left: 240px; right: 0; z-index: 30; }
.topbar-search { flex: 1; max-width: 420px; margin: 0 24px; }
.topbar-search input { width: 100%; padding: 7px 14px; border-radius: var(--radius-sm); border: none; background: rgba(255,255,255,0.1); color: #FFF; font-size: 13px; font-family: var(--font); }
.topbar-search input::placeholder { color: rgba(255,255,255,0.4); }
.topbar-search input:focus { outline: none; background: rgba(255,255,255,0.18); }
.topbar-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.topbar-actions a, .topbar-actions button { color: rgba(255,255,255,0.6); background: none; border: none; cursor: pointer; }
.topbar-actions a:hover { color: #FFF; }
.topbar-actions svg { width: 18px; height: 18px; }
.topbar-notif-bell { position: relative; display: inline-flex; }
.notif-badge { position: absolute; top: -6px; right: -6px; background: #DC2626; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; border: 2px solid var(--navy); }
.topbar-user { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.topbar-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; color: #FFF; font-size: 12px; font-weight: 600; }
.sidebar-toggle { display: none; background: none; border: none; color: #FFF; cursor: pointer; }

.main-content { margin-left: 240px; margin-top: 56px; padding: 28px 40px; min-height: calc(100vh - 56px); width: calc(100% - 240px); box-sizing: border-box; }

/* ── Typography (Plaza-inspired) ── */
h1 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--navy); }
h2 { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--navy); }
h3 { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--black); letter-spacing: -0.01em; }
h4 { font-size: 13px; font-weight: 600; color: var(--text); }
p { color: var(--text); }
.overline { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 4px; }
.subtitle { font-size: 14px; color: var(--text-light); margin-top: 2px; }

/* ── Page Header ── */
.page-header { margin-bottom: 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--navy); }
.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--blue); }

/* ── Cards ── */
.card { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--navy); }
.card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-body { padding: 20px 24px; }
.card-header h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: 0.01em; }
.card-accent-teal { border-left-color: var(--teal); }
.card-accent-gold { border-left-color: var(--gold); }
.card-accent-red { border-left-color: var(--red); }
.card-accent-green { border-left-color: var(--green); }

/* ── KPI Cards ── */
/* KPIs — Plaza unified strip style */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--border); background: var(--white); border-top: 3px solid var(--navy); margin-bottom: 24px; }
.kpi-card { padding: 20px 16px; border-right: 1px solid var(--border); text-align: center; }
.kpi-card:last-child { border-right: none; }
/* Standalone kpi-card (inside grid-2/3/4, not kpi-grid) — needs own background/border */
.grid-2 > .kpi-card, .grid-3 > .kpi-card, .grid-4 > .kpi-card {
  background: var(--white); border: 1px solid var(--border); border-right: 1px solid var(--border);
  border-top: 3px solid var(--navy); padding: 20px 20px; text-align: center;
}
.grid-2 > .kpi-card:nth-child(2), .grid-3 > .kpi-card:nth-child(2), .grid-4 > .kpi-card:nth-child(2) { border-top-color: var(--teal); }
.grid-2 > .kpi-card:nth-child(3), .grid-3 > .kpi-card:nth-child(3), .grid-4 > .kpi-card:nth-child(3) { border-top-color: var(--gold); }
.grid-2 > .kpi-card:nth-child(4), .grid-3 > .kpi-card:nth-child(4), .grid-4 > .kpi-card:nth-child(4) { border-top-color: #5B8C5A; }
.kpi-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--mono); }

/* ── Buttons (Plaza) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; font-family: var(--font); white-space: nowrap; }
.btn-primary { background: var(--navy); color: #FFF; border-color: var(--navy); }
.btn-primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #FFF; }
.btn-secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: #FFF; }
.btn-ghost { background: transparent; color: var(--text-light); border-color: transparent; padding: 6px 10px; }
.btn-ghost:hover { color: var(--navy); background: var(--border-light); }
.btn-danger { background: var(--red); color: #FFF; border-color: var(--red); }
.btn-danger:hover { background: #A93226; }
.btn-success { background: var(--green); color: #FFF; border-color: var(--green); }
.btn-success:hover { background: #196F3D; }
.btn-warning { background: var(--amber); color: #FFF; border-color: var(--amber); }
.btn-teal { background: var(--teal); color: #FFF; border-color: var(--teal); }
.btn-teal:hover { background: var(--teal-light); }
.btn-sm { padding: 4px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.btn svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════
   FORMS — Minimal, Flat, Modern
   ══════════════════════════════════════════════════════════════ */
input, select, textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  border: 2px solid var(--border);
  transition: border-color 0.2s;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
}
input::placeholder, textarea::placeholder { color: #C9C2B6; font-style: italic; }
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; padding: 0; margin: 0;
  accent-color: var(--navy); cursor: pointer;
  display: inline-block; vertical-align: middle;
  appearance: auto; -webkit-appearance: auto;
}
.redline-checkbox { width: 20px !important; height: 20px !important; accent-color: var(--navy); }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748B' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
textarea { min-height: 88px; resize: vertical; }
input[type="file"] { padding: 7px 10px; background: var(--border-light); cursor: pointer; font-size: 13px; }
input[type="date"], input[type="datetime-local"] { cursor: pointer; }

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
small, .helptext, p.help, .form-group small { font-size: 12px; color: var(--text-muted); margin-top: 3px; display: block; }
ul.errorlist { list-style: none; padding: 0; margin: 3px 0 0; }
ul.errorlist li { color: var(--red); font-size: 12px; }
.text-error { color: var(--red); font-size: 12px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.form-full { grid-column: 1 / -1; }
.form-row { display: flex; gap: 12px; align-items: flex-end; }
.form-row .form-group { flex: 1; margin-bottom: 0; }

/* The .input class — same as native inputs */
.input { width: 100%; padding: 9px 12px; font-size: 14px; font-family: var(--font); color: var(--black); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.15s, box-shadow 0.15s; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }

/* ── Tables (Plaza) ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: left; padding: 9px 12px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); background: var(--border-light); border-bottom: 2px solid var(--navy); }
tbody td { padding: 10px 12px; color: var(--text); border-bottom: 1px solid #E8E4DE; vertical-align: middle; font-size: 13px; }
tbody tr:hover { background: rgba(0, 58, 92, 0.03); }
td.numeric { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--black); }
td.lbl { font-weight: 600; color: var(--navy); }

/* ── Pills / Badges (Plaza) ── */
.pill { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.pill-draft, .pill-cancelled, .pill-voided, .pill-disconnected, .pill-away, .pill-offline, .pill-not_imported { background: var(--border-light); color: var(--text-light); }
.pill-active, .pill-signed, .pill-fulfilled, .pill-approved, .pill-completed, .pill-compliant, .pill-connected, .pill-available, .pill-low, .pill-analyzed, .pill-imported, .pill-remediated { background: var(--green-bg); color: var(--green); }
.pill-in_negotiation, .pill-in_progress, .pill-pending, .pill-medium, .pill-pending_analysis, .pill-busy, .pill-submitted, .pill-sent, .pill-in_review, .pill-assigned { background: var(--amber-bg); color: var(--amber); }
.pill-internal_review, .pill-pending_approval, .pill-review, .pill-viewed { background: var(--purple-bg); color: var(--purple); }
.pill-pending_signature, .pill-signature, .pill-high { background: #FFF7ED; color: #C2410C; }
.pill-expired, .pill-terminated, .pill-breached, .pill-overdue, .pill-rejected, .pill-declined, .pill-blocked, .pill-non_compliant, .pill-non-compliant, .pill-error, .pill-critical, .pill-failed { background: var(--red-bg); color: var(--red); }
.pill-renewed, .pill-open, .pill-info { background: var(--blue-light); color: var(--blue); }
.pill-active { background: var(--blue) !important; color: #FFF !important; }
/* Generic color pills (used by world-class agent templates) */
.pill-green { background: var(--green-bg); color: var(--green); }
.pill-red { background: var(--red-bg); color: var(--red); }
.pill-amber { background: var(--amber-bg); color: var(--amber); }
.pill-blue { background: var(--blue-light); color: var(--blue); }
/* Text color utilities */
.text-green { color: var(--green) !important; }
.text-red { color: var(--red) !important; }
.text-amber { color: var(--amber) !important; }
.text-blue { color: var(--blue) !important; }
.text-error { color: var(--red) !important; }
.text-muted { color: var(--text-muted) !important; }

/* ── Risk Indicators ── */
.risk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.risk-dot.low { background: var(--green); } .risk-dot.medium { background: var(--amber); } .risk-dot.high { background: var(--red); } .risk-dot.critical { background: #991B1B; }
.risk-bar { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.risk-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }

/* ── Tabs (Plaza) ── */
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; gap: 0; overflow-x: auto; background: var(--white); }
.tab { padding: 14px 24px; font-size: 13px; font-weight: 500; color: var(--text-light); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; transition: all 0.2s; border: none; background: none; }
.tab:hover { color: var(--navy); background: var(--border-light); }
.tab.active { color: var(--navy); border-bottom-color: var(--navy); font-weight: 600; }
.tab-content { display: none; } .tab-content.active { display: block; }

/* ── Callouts ── */
/* ── Callouts (Plaza takeaway style) ── */
.callout { background: var(--border-light); border-left: 4px solid var(--gold); padding: 16px 22px; font-size: 14px; line-height: 1.65; margin: 12px 0; color: var(--text); }
.callout-warning { background: rgba(196, 150, 44, 0.06); border-left-color: var(--amber); }
.callout-danger { background: var(--red-bg); border-left-color: var(--red); }
.callout-success { background: var(--green-bg); border-left-color: var(--green); }
.callout-info { background: rgba(0, 140, 140, 0.06); border-left-color: var(--teal); }
.msg-box, .message-box { background: var(--blue-light); border-left: 3px solid var(--blue); padding: 12px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; line-height: 1.6; margin: 12px 0; }

/* ── Timeline ── */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-dot { position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); border: 2px solid var(--white); }
.timeline-dot.success { background: var(--green); } .timeline-dot.error { background: var(--red); } .timeline-dot.warning { background: var(--amber); }
.timestamp { font-size: 12px; color: var(--text-muted); }

/* ── Notifications / Toast ── */
.toast-container { position: fixed; top: 72px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 10px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-md); animation: slideIn 0.25s ease; max-width: 380px; }
.toast-success { background: var(--green); color: #FFF; } .toast-error { background: var(--red); color: #FFF; }
.toast-info { background: var(--blue); color: #FFF; } .toast-warning { background: var(--amber); color: #FFF; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Grids ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; }
.grid-8-4 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

/* ── Misc ── */
.upload-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 40px; text-align: center; cursor: pointer; transition: all 0.12s; }
.upload-area:hover { border-color: var(--blue); background: var(--blue-light); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 20px; }
.pagination a, .pagination span { padding: 6px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.pagination a:hover { background: var(--border-light); }
.pagination .current { background: var(--blue); color: #FFF; font-weight: 600; }

.empty-state { text-align: center; padding: 48px 20px; } .empty-state h3 { color: var(--text-light); } .empty-state p { color: var(--text-muted); font-size: 13px; margin-top: 4px; margin-bottom: 16px; }

.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; padding: 12px 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.auth-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px; width: 100%; max-width: 420px; }
.auth-card h1 { text-align: center; margin-bottom: 6px; } .auth-card .subtitle { text-align: center; margin-bottom: 28px; }

.review-banner { background: var(--amber-bg); border: 1px solid #FDE68A; border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 14px; }

.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal { background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 20px; } .modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }

.signature-pad { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); cursor: crosshair; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
  .sidebar.open { transform: translateX(0); }
  .topbar { left: 0; }
  .main-content { margin-left: 0; }
  .grid-2, .grid-8-4 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .sidebar-toggle { display: block; }
}

/* ── Tablet / Small Desktop (768px) ── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
  .sidebar.open { transform: translateX(0); }
  .topbar { left: 0; padding: 0 16px; }
  .main-content { margin-left: 0; padding: 20px 16px; }
  .sidebar-toggle { display: block; }

  /* Stack grids to single column */
  .grid-2, .grid-3, .grid-4, .grid-8-4 { grid-template-columns: 1fr; }

  /* Tables scroll horizontally */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; }

  /* Reduce font sizes */
  h1 { font-size: 20px; }
  h2 { font-size: 16px; }
  .kpi-value { font-size: 22px; }

  /* Stack page-header vertically */
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header-actions { width: 100%; }

  /* Cards full-width */
  .card { border-radius: var(--radius-sm); }

  /* KPI grid: 2 columns */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .kpi-grid-6 { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Forms single-column */
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; gap: 14px; }
  .field-row { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }

  /* Topbar search smaller */
  .topbar-search { max-width: 200px; margin: 0 12px; }

  /* Filter bar wrap */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar select, .filter-bar input { width: 100%; }

  /* Pipeline steps wrap */
  .pipeline { flex-wrap: wrap; }
  .pipeline-step { min-width: 45%; }

  /* Detail rows stack */
  .detail-row { flex-direction: column; gap: 2px; }
  .detail-label { width: 100%; }

  /* Auth card */
  .auth-card { padding: 28px 20px; margin: 16px; }

  /* Modal */
  .modal { max-width: 95vw; margin: 16px; }

  /* Touch-friendly tap targets */
  .btn, .sidebar-link, .tab, .pagination a, .pagination span {
    min-height: 44px;
    min-width: 44px;
  }
  .sidebar-link { padding: 12px 20px; }
  .tab { padding: 12px 16px; }
}

/* ── Phone (480px) ── */
@media (max-width: 480px) {
  .main-content { padding: 14px 10px; }
  .topbar { padding: 0 10px; }

  /* Further reduce padding */
  .card-body { padding: 14px; }
  .card-header { padding: 10px 14px; }
  .kpi-card { padding: 12px 14px; }
  .kpi-grid { gap: 8px; }

  /* Buttons full-width */
  .btn { width: 100%; justify-content: center; }
  .page-header-actions { flex-direction: column; }
  .page-header-actions .btn { width: 100%; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; }

  /* Hide less important table columns */
  table .col-hide-mobile { display: none; }
  table th:nth-child(n+4), table td:nth-child(n+4) { display: none; }

  /* KPI grid single column on very small screens */
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-grid-6 { grid-template-columns: 1fr; }

  /* Topbar adjustments */
  .topbar-search { display: none; }
  .topbar-user span { display: none; }

  /* Font sizes */
  h1 { font-size: 18px; }
  .kpi-value { font-size: 20px; }

  /* Touch-friendly sizing for all interactive elements */
  .btn, .sidebar-link, .tab, a, button,
  .pagination a, .pagination span,
  .pill-filter, select, input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
  }
  .btn { padding: 12px 16px; font-size: 14px; }
  .btn-sm { padding: 10px 12px; min-height: 44px; }
  .sidebar-link { padding: 14px 20px; font-size: 14px; }

  /* Chat adjustments */
  .chat-bubble { max-width: 90%; }

  /* Upload area */
  .upload-area { padding: 24px; }

  /* Tabs scroll */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Review banner */
  .review-banner { flex-direction: column; gap: 8px; text-align: center; }
}
/* ── Form Cards (McKinsey-style sectioned forms) ── */
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.form-section-header { padding: 12px 20px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--border-light); border-bottom: 1px solid var(--border); }
.form-section-body { padding: 20px; }
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field-full { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.field-row:last-child { margin-bottom: 0; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.checkbox-label input[type="checkbox"] { margin: 0; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 20px; }

/* ── Detail Fields ── */
.detail-row { display: flex; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.detail-row:last-child { border-bottom: none; }
.detail-label { width: 180px; flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; padding-top: 2px; }
.detail-value { flex: 1; font-size: 14px; color: var(--text); }

/* ── Stat Grid ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }

/* ── Pipeline Steps ── */
.pipeline { display: flex; gap: 0; }
.pipeline-step { flex: 1; text-align: center; padding: 14px 8px; }
.pipeline-dot { width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.pipeline-dot.done { background: var(--green); color: #FFF; }
.pipeline-dot.current { background: var(--blue); color: #FFF; }
.pipeline-dot.pending { background: var(--border); color: var(--text-muted); }
.pipeline-label { font-size: 12px; font-weight: 500; color: var(--text-light); }

/* ── Utility Classes (replace inline styles) ── */
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.p-0 { padding: 0; } .p-1 { padding: 8px; } .p-2 { padding: 16px; } .p-3 { padding: 24px; }
.gap-1 { gap: 8px; } .gap-2 { gap: 12px; } .gap-3 { gap: 16px; }
.flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.text-center { text-align: center; } .text-right { text-align: right; }
.text-sm { font-size: 13px; } .text-xs { font-size: 12px; } .text-lg { font-size: 18px; }
.text-muted { color: var(--text-muted); } .text-light { color: var(--text-light); }
.text-green { color: var(--green); } .text-red { color: var(--red); } .text-amber { color: var(--amber); } .text-blue { color: var(--blue); }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.w-full { width: 100%; } .max-w-sm { max-width: 420px; } .max-w-md { max-width: 600px; } .max-w-lg { max-width: 800px; }
.border-b { border-bottom: 1px solid var(--border-light); }
.rounded { border-radius: var(--radius); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.nowrap { white-space: nowrap; }
.hidden { display: none; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.block { display: block; }
.relative { position: relative; }
.self-center { align-self: center; }
.self-start { align-self: flex-start; }
.flex-1 { flex: 1; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.font-mono { font-family: var(--mono); }
.text-body { font-size: 14px; line-height: 1.6; color: var(--text); }
.pre-wrap { white-space: pre-wrap; }
.line-relaxed { line-height: 1.6; }
.line-loose { line-height: 1.7; }
.scroll-y { overflow-y: auto; }
.scroll-x { overflow-x: auto; }
.max-h-600 { max-height: 600px; }
.max-h-300 { max-height: 300px; }
.max-w-700 { max-width: 700px; }
.kpi-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.kpi-card-border-red { border-left: 3px solid var(--red); }
.kpi-card-border-amber { border-left: 3px solid var(--amber); }
.my-3 { margin-top: 24px; margin-bottom: 24px; }
.diff-add { background: var(--green-bg); padding: 1px 3px; border-radius: 2px; }
.diff-del { background: var(--red-bg); padding: 1px 3px; border-radius: 2px; }
.code-block { background: var(--border-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; font-size: 13px; }
.pill-filter { padding: 6px 16px; cursor: pointer; }
.upload-area-compact { padding: 32px; }
.my-half { margin-top: 4px; margin-bottom: 4px; }
.border-l-red { border-left: 4px solid var(--red); }
.border-l-amber { border-left: 4px solid var(--amber); }
.border-l-green { border-left: 4px solid var(--green); }
.border-l-muted { border-left: 4px solid var(--text-muted); }
.border-l-orange { border-left: 4px solid #E57A00; }
.pill-score-red { background: var(--red); color: #FFF; }
.pill-score-amber { background: #C08B00; color: #FFF; }
.pill-score-green { background: var(--green); color: #FFF; }
.detail-summary { cursor: pointer; color: var(--blue); font-weight: 500; }
.progress-wide { height: 20px; border-radius: 4px; width: 200px; }
.progress-tall { height: 8px; border-radius: 4px; width: 100px; }
.th-narrow { width: 30px; }

/* Card variants */
.card-flush { border: none; box-shadow: none; background: transparent; }
.card-compact .card-body { padding: 14px; }
.card-compact .card-header { padding: 10px 14px; }

/* Section divider */
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* Inline list */
.inline-list { display: flex; gap: 6px; flex-wrap: wrap; }

/* Badge group */
.badge-group { display: flex; gap: 4px; flex-wrap: wrap; }

/* Progress bar */
.progress { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.progress-fill.green { background: var(--green); }
.progress-fill.blue { background: var(--blue); }
.progress-fill.red { background: var(--red); }
.progress-fill.amber { background: var(--amber); }

/* Info pairs (label: value) */
.info-pair { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; }
.info-pair:last-child { border-bottom: none; }
.info-pair dt { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.info-pair dd { color: var(--black); font-weight: 500; }

/* Action links in tables */
table .actions { white-space: nowrap; }
table a { color: var(--blue); }
table a:hover { text-decoration: underline; }

/* Notification badge */
.notification-badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: #FFF; font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* Better empty states */
.no-data { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 13px; }
.no-data a { color: var(--blue); }

/* ── Activity Feed ── */
.activity-item { display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-light); }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: 6px; flex-shrink: 0; }
.activity-body { flex: 1; }

/* ── Progress bar (quota style) ── */
.progress-track { background: var(--border); height: 8px; border-radius: 4px; margin-top: 8px; }
.progress-track .progress-fill { height: 100%; border-radius: 4px; }

/* ── Star ratings ── */
.star-filled { color: var(--amber); }
.star-empty { color: var(--border); }

/* ── Extra utilities ── */
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.no-underline { text-decoration: none; }
.w-auto { width: auto; }

/* ── Comment Reply ── */
.comment-reply { margin-left: 24px; margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--border); }

/* ── Approval/Signature Row ── */
.approval-row .card-body { display: flex; align-items: center; justify-content: space-between; }

/* ── Clause Card ── */
.clause-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.clause-text { font-size: 14px; line-height: 1.6; color: var(--text); }
.clause-meta { font-size: 12px; color: var(--text-muted); margin-left: 8px; }

/* ── Search Results ── */
.search-input { flex: 1; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 15px; }
.search-score { font-size: 20px; font-weight: 600; }
.search-score-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
.search-excerpt { font-size: 13px; line-height: 1.6; color: var(--text); background: var(--border-light); padding: 12px; border-radius: var(--radius-sm); }
.search-example { font-size: 13px; color: var(--text); margin-bottom: 4px; }

/* ── Contract Value ── */
.value-lg { font-size: 20px; font-weight: 600; }
.score-xl { font-size: 36px; font-weight: 600; margin-bottom: 8px; }
.score-suffix { font-size: 16px; color: var(--text-muted); }

/* ── Approval Step Card ── */
.approval-step { flex: 1; min-width: 150px; padding: 1rem; border: 2px solid var(--border); border-radius: var(--radius); text-align: center; }
.approval-step.done { border-color: var(--green); }
.approval-step.current { border-color: var(--blue); }
.approval-step-title { font-weight: 600; margin-bottom: 0.25rem; }
.approval-step-name { font-size: 0.85rem; }
.approval-step-type { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.approval-step-status { font-weight: 600; margin-top: 0.5rem; }

/* ── Task Item Row ── */
.task-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border-light); }

/* ── Create Task Form ── */
.task-form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.task-form-row .input-grow { flex: 2; }
.task-form-row .input-auto { flex: 1; }
.task-form-actions { display: flex; gap: 0.5rem; }
.task-form-actions textarea { flex: 1; }

/* ── Detail Item ── */
.detail-item { margin-bottom: 0.5rem; }
.detail-description { margin-top: 1rem; }

/* ── Anomaly/Negotiate severity border ── */
.severity-critical { border-left: 4px solid var(--red); }
.severity-high { border-left: 4px solid #E57A00; }
.severity-medium { border-left: 4px solid var(--amber); }
.severity-low { border-left: 4px solid var(--text-muted); }
.action-escalate { border-left: 4px solid var(--red); }
.action-auto_modify { border-left: 4px solid var(--amber); }
.action-accept { border-left: 4px solid var(--green); }

/* ── AI Explanation ── */
.detail-toggle { cursor: pointer; color: var(--blue); font-weight: 500; }

/* ── Task Comment ── */
.task-comment { padding: 0.75rem 0; border-bottom: 1px solid var(--border-light); }

/* ── Progress Bar (larger variant) ── */
.progress-lg { height: 12px; border-radius: 6px; background: var(--border); overflow: hidden; }
.progress-lg .progress-fill { height: 100%; border-radius: 6px; transition: width 0.3s; }

/* ── Overdue indicator ── */
.overdue-label { color: var(--red); font-weight: 600; }

/* ── SME subtitle ── */
.sme-subtitle { color: var(--text-muted); font-size: 0.85rem; }

/* ── Audit log cells ── */
.audit-detail { font-size: 13px; color: var(--text-light); }
.audit-time { font-size: 13px; }

/* ── Contract content pre ── */
.contract-content { white-space: pre-wrap; font-size: 14px; line-height: 1.8; }

/* ── Risk category ── */
.risk-category { margin-top: 16px; }
.risk-issue { font-size: 13px; color: var(--text-light); margin-top: 4px; }

/* ── Agent duration ── */
.agent-duration { font-size: 12px; color: var(--text-muted); }

/* ── Compliance flag ── */
.compliance-flag { padding: 8px 12px; margin: 4px 0; font-size: 13px; }

/* ── Pill text-xs override ── */
.pill-xs { font-size: 0.7rem; }

/* ── Form group spacing ── */
.form-group-compact { margin-bottom: 1rem; }

/* ── Summary text ── */
.summary-text { margin-bottom: 1rem; font-size: 15px; }

/* ── Anomaly fields ── */
.anomaly-detail { margin: 0.25rem 0; }
.recommendation-text { margin: 0.25rem 0; color: var(--blue); }

/* ── Missing classes from agent cleanup ── */
.text-danger { color: var(--red); } .text-warning { color: var(--amber); } .text-success { color: var(--green); }
.text-brand { color: var(--blue); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.bar-track { height: 20px; background: var(--border); border-radius: 4px; overflow: hidden; position: relative; width: 200px; }
.bar-fill { height: 100%; border-radius: 4px; } .bar-danger { background: var(--red); } .bar-warning { background: var(--amber); } .bar-info { background: var(--blue); }
.confirm-delete-card { max-width: 480px; margin: 0 auto; }
.chat-container { display: flex; flex-direction: column; height: calc(100vh - 180px); }
.chat-messages { flex: 1; overflow-y: auto; }
.chat-input-bar { border-top: 1px solid var(--border); }
.chat-input { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 14px; font-family: var(--font); }
.chat-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
.chat-msg { margin-bottom: 1rem; display: flex; } .chat-msg.user { justify-content: flex-end; }
.chat-bubble { max-width: 70%; padding: 0.75rem 1rem; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.chat-msg.assistant .chat-bubble { background: var(--border-light); color: var(--black); }
.chat-msg.user .chat-bubble { background: var(--blue); color: #FFF; }
.notification-unread { border-left: 3px solid var(--blue); }
.text-right { text-align: right; }
.btn-full { width: 100%; justify-content: center; }
.auth-card-wide { max-width: 520px; }
.pre-wrap { white-space: pre-wrap; }
.border-t { border-top: 1px solid var(--border-light); }
.justify-center { justify-content: center; }
.line-relaxed { line-height: 1.8; }
.flex-2 { flex: 2; }
.font-mono { font-family: var(--mono); }
.comment-reply { margin-left: 24px; padding-left: 12px; border-left: 2px solid var(--border); margin-top: 8px; }
.severity-critical { border-left: 3px solid var(--red); } .severity-high { border-left: 3px solid #C2410C; }
.severity-medium { border-left: 3px solid var(--amber); } .severity-low { border-left: 3px solid var(--border); }
.action-escalate { border-left: 3px solid var(--red); } .action-auto_modify { border-left: 3px solid var(--amber); } .action-accept { border-left: 3px solid var(--green); }
.detail-toggle { cursor: pointer; color: var(--blue); font-weight: 500; font-size: 13px; }
.summary-text { font-size: 15px; margin-bottom: 1rem; }
.progress-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.progress-fill.blue { background: var(--blue); } .progress-fill.green { background: var(--green); }
.progress-fill.red { background: var(--red); } .progress-fill.amber { background: var(--amber); }

/* ── Alerts (Plaza alert-card style) ── */
.alert { display: flex; gap: 16px; padding: 16px 20px; border: 1px solid var(--border); background: var(--white); align-items: center; justify-content: space-between; margin-bottom: 8px; transition: all 0.2s; }
.alert:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.alert strong { display: block; font-size: 14px; color: var(--navy); }
.alert .text-sm { font-size: 12px; color: var(--text-light); }
.alert-danger { border-left: 4px solid var(--red); }
.alert-warning { border-left: 4px solid var(--gold); }
.alert-info { border-left: 4px solid var(--teal); }
.alert-success { border-left: 4px solid var(--green); }

/* ── Journey Cards (Plaza action-card style) ── */
.journey-card { padding: 18px 20px; border: 1px solid var(--border); border-top: 3px solid var(--teal); background: var(--white); transition: all 0.25s; cursor: pointer; }
.journey-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.journey-card h4 { font-size: 14px; color: var(--navy); margin-bottom: 4px; font-weight: 600; }
.journey-card p { margin-bottom: 10px; }
.journey-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.journey-step { font-size: 11px; padding: 3px 8px; background: var(--border-light); color: var(--text-light); border-radius: 10px; }
.journey-step-ai { background: var(--green-bg); color: var(--green); }
.journey-steps-list { padding-left: 18px; font-size: 14px; line-height: 2.2; color: var(--text); }
.journey-steps-list li { padding-left: 4px; }
.journey-steps-list strong { color: var(--black); }

/* ── Journey Flow (horizontal stepper) ── */
.journey-flow { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; }
.journey-flow-step { flex: 1; text-align: center; padding: 12px 8px; min-width: 110px; }
.journey-flow-num { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #FFF; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.journey-flow-label { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.journey-flow-desc { font-size: 10px; color: var(--text-muted); line-height: 1.4; }
.journey-flow-arrow { font-size: 20px; color: var(--border); flex-shrink: 0; padding: 14px 2px 0; }

/* Step flow (RFP detail) */
.step-flow { display: flex; gap: 2px; margin-bottom: 24px; }
.step-flow-item { flex: 1; padding: 10px 8px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.step-flow-item.done { background: var(--green-bg); color: var(--green); border-bottom: 3px solid var(--green); }
.step-flow-item.active { background: var(--navy); color: #FFF; border-bottom: 3px solid var(--navy); }
.step-flow-item.pending { background: var(--border-light); color: var(--text-muted); border-bottom: 3px solid var(--border); }

/* ── Redline Diff Styles ── */
.redline-remove { padding: 14px; background: var(--red-bg); border: 1px solid #E8C4C0; }
.redline-remove .overline { color: var(--red); }
.redline-remove p { font-size: 13px; line-height: 1.7; text-decoration: line-through; color: #7A1F1F; }
.redline-add { padding: 14px; background: var(--green-bg); border: 1px solid #B6D4C0; }
.redline-add .overline { color: var(--green); }
.redline-add p { font-size: 13px; line-height: 1.7; color: #0B4A2B; }
.redline-checkbox { width: 18px; height: 18px; accent-color: var(--navy); }
.redline-label { font-size: 15px; font-weight: 600; cursor: pointer; color: var(--navy); }
.stream-output { display: none; padding: 20px; background: var(--white); border: 1px solid var(--border); font-size: 14px; line-height: 1.8; max-height: 600px; overflow-y: auto; }
.stream-status-ok { color: var(--green); font-weight: 700; }
.stream-status-err { color: var(--red); font-weight: 700; }
.d-none { display: none; }

/* ── Obligation/Clause item row ── */
.ob-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.ob-row:last-child { border-bottom: none; }
.ob-main { flex: 1; }
.ob-actions { flex-shrink: 0; margin-left: 12px; display: flex; gap: 6px; align-items: center; }

/* ── Review Banner (collapsed) ── */
.review-banner { background: var(--border-light); border: 1px solid var(--border); border-left: 4px solid var(--gold); padding: 12px 16px; margin-bottom: 20px; font-size: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-banner svg { flex-shrink: 0; color: var(--gold); }
.review-banner p { flex: 1; margin: 0; }
.review-banner .btn { flex-shrink: 0; }
.review-banner .review-overflow { display: none; }

/* ── Utility ── */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 12px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-brand { color: var(--blue); }
.w-full { width: 100%; }
.btn-full { width: 100%; justify-content: center; }
.flex { display: flex; } .flex-col { flex-direction: column; } .gap-1 { gap: 6px; } .gap-2 { gap: 12px; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }

/* ── Markdown Render (McKinsey-grade typography) ── */
.md-content { font-family: var(--font); color: var(--text); }
.md-p { margin: 0 0 12px; line-height: 1.75; font-size: 14px; }
.md-h2 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--navy); letter-spacing: -0.02em; }
.md-h3 { font-size: 16px; font-weight: 700; color: var(--black); margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.md-h4 { font-size: 14px; font-weight: 650; color: var(--text); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.md-bold { font-weight: 650; color: var(--black); margin: 12px 0 4px; font-size: 13px; }
.md-hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.md-li { padding: 3px 0 3px 24px; position: relative; font-size: 14px; line-height: 1.7; }
.md-li-dot::before { content: '\2022'; position: absolute; left: 8px; color: var(--blue); font-weight: 700; }
.md-li-num { position: absolute; left: 0; color: var(--blue); font-weight: 700; font-size: 13px; }
.md-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.md-table th { background: var(--navy); color: #FFF; padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; }
.md-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.md-table tr:nth-child(even) { background: var(--border-light); }
.md-table tr:hover { background: var(--blue-light); }

/* ── Clause Accordion ── */
.clause-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; transition: background 0.1s; gap: 8px; }
.clause-header:hover { background: var(--border-light); }
.clause-body { padding: 0 16px 16px; }
.clause-chevron { color: var(--text-muted); }
.clause-content { line-height: 1.7; }

/* ── AI Evidence Trail ── */
.evidence-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; background: var(--purple-bg); color: var(--purple); vertical-align: middle; margin-left: 4px; letter-spacing: 0.03em; cursor: help; }
.evidence-box { margin-top: 6px; padding: 8px 10px; background: var(--border-light); border-radius: var(--radius-sm); border-left: 3px solid var(--purple); font-size: 12px; line-height: 1.6; }
.evidence-calc { display: block; font-weight: 600; color: var(--black); font-family: var(--mono); font-size: 12px; }
.evidence-quote { display: block; color: var(--text-light); font-style: italic; margin-top: 2px; }
.evidence-source { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }

/* ── Sidebar Section Labels ── */
.sidebar-section-label { padding: 20px 20px 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); }

/* ── Global Chat FAB & Panel ── */
.gchat-fab { position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%; background: var(--teal); color: #FFF; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(0,140,140,0.35); display: flex; align-items: center; justify-content: center; z-index: 1000; transition: transform 0.15s; }
.gchat-fab:hover { transform: scale(1.06); }
.gchat-fab svg { width: 22px; height: 22px; }
.gchat-panel { position: fixed; bottom: 86px; right: 24px; width: 400px; max-height: 500px; background: var(--white); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,0.15); z-index: 1000; display: none; flex-direction: column; overflow: hidden; }
.gchat-panel.gchat-open { display: flex; }
.gchat-hdr { padding: 14px 18px; background: #001F33; color: #FFF; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.gchat-hdr button { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 20px; }
.gchat-msgs { flex: 1; overflow-y: auto; padding: 14px; max-height: 320px; min-height: 160px; }
.gchat-msg { margin-bottom: 10px; max-width: 85%; }
.gchat-msg.gchat-user { margin-left: auto; text-align: right; }
.gchat-bubble { display: inline-block; padding: 9px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; }
.gchat-user .gchat-bubble { background: var(--blue); color: #FFF; border-bottom-right-radius: 4px; }
.gchat-bot .gchat-bubble { background: var(--border-light); color: var(--text); border-bottom-left-radius: 4px; }
.gchat-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 10px; }
.gchat-chip { padding: 4px 12px; border: 1px solid var(--border); background: var(--border-light); font-size: 11px; color: var(--text-light); cursor: pointer; font-family: var(--font); transition: all 0.2s; }
.gchat-chip:hover { border-color: var(--navy); color: var(--navy); background: var(--white); }
.gchat-input { display: flex; padding: 10px 12px; border-top: 1px solid var(--border); gap: 8px; }
.gchat-input input { flex: 1; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font); }
.gchat-input input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
.gchat-input button { padding: 9px 16px; background: var(--blue); color: #FFF; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 600; font-family: var(--font); }

/* ── Aliases for new templates (maps to existing design tokens) ── */
:root {
  --primary: var(--blue);
  --success: var(--green);
  --warning: var(--amber);
  --danger: var(--red);
}

/* Stats grid (alias for kpi-grid) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--border); background: var(--white); border-top: 3px solid var(--teal); margin-bottom: 24px; }
.stat-card { padding: 20px 16px; border-right: 1px solid var(--border); text-align: center; }
.stat-card:last-child { border-right: none; }
.stat-value { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.stat-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }

/* Form control (styled inputs/selects/textareas) */
.form-control { width: 100%; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font); color: var(--text); background: var(--white); transition: border-color 0.15s, box-shadow 0.15s; }
.form-control:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-ring); }
textarea.form-control { resize: vertical; min-height: 80px; line-height: 1.6; }
select.form-control { appearance: auto; cursor: pointer; }
.form-group label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; }

/* Table (for new templates that use class="table") */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); text-align: left; padding: 10px 16px; border-bottom: 2px solid var(--border); white-space: nowrap; }
.table td { padding: 10px 16px; border-bottom: 1px solid var(--border-light); color: var(--text); vertical-align: top; }
.table tr:hover { background: var(--border-light); }
.table a { font-weight: 500; }

/* Badge (alias for pill, used in construction templates) */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 100px; font-size: 11.5px; font-weight: 550; white-space: nowrap; }
.badge-success, .badge-active, .badge-compliant, .badge-completed, .badge-approved { background: var(--green-bg); color: var(--green); }
.badge-warning, .badge-pending, .badge-action_needed, .badge-in_progress, .badge-submitted, .badge-sme_review { background: var(--amber-bg); color: var(--amber); }
.badge-danger, .badge-overdue, .badge-non_compliant, .badge-failed, .badge-critical, .badge-expired, .badge-rejected { background: var(--red-bg); color: var(--red); }
.badge-info, .badge-open, .badge-active, .badge-received, .badge-analyzing, .badge-drafting { background: var(--blue-light); color: var(--blue); }
.badge-secondary, .badge-draft, .badge-planning, .badge-pending_signature { background: var(--border-light); color: var(--text-light); }

/* Content grid (generic responsive grid) */
.content-grid { display: grid; gap: 20px; }

/* Subtitle */
.subtitle { font-size: 14px; color: var(--text-light); margin-top: 4px; line-height: 1.5; }

/* Nav group labels for sidebar */
.nav-group-label { padding: 8px 20px 4px; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); user-select: none; }
.nav-divider { height: 1px; background: var(--border); margin: 6px 16px; }

/* Page actions */
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Inline form */
.inline { display: inline; }

/* Numeric alignment */
.numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* Text sizes */
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.text-muted { color: var(--text-muted); }
.text-red { color: var(--red); }
.text-amber { color: var(--amber); }
.text-green { color: var(--green); }
.font-semibold { font-weight: 600; }

/* No data state */
.no-data { text-align: center; color: var(--text-muted); padding: 24px; }

/* Empty state */
.empty-state { text-align: center; padding: 48px 20px; }
.empty-state h3 { color: var(--text-light); margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════════════
   PLAZA DESIGN SYSTEM OVERRIDES
   Exact styles from https://plaza.scikiq.org/
   ═══════════════════════════════════════════════════════════════ */

/* Import Plaza fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Source+Sans+3:wght@300;400;500;600;700&family=Source+Serif+4:wght@400;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Override base font to Plaza */
body { font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; }

/* Plaza headings use Playfair Display */
h1 { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; color: var(--navy); }
h2 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; color: var(--navy); }
.card-header h3 { font-family: 'Source Sans 3', sans-serif; font-size: 14px; font-weight: 700; }

/* Plaza exhibit/card = left navy accent */
.card { border-left: 4px solid var(--navy); position: relative; }
.card-accent-teal { border-left-color: var(--teal); }
.card-accent-teal::before { display: none; }
.card-accent-gold { border-left-color: var(--gold); }
.card-accent-red { border-left-color: var(--red); }
.card-accent-green { border-left-color: var(--green); }

/* Plaza KPI strip with individual top-border colors */
.kpi-grid .kpi-card { position: relative; }
.kpi-grid .kpi-card:nth-child(1) { border-top: 3px solid var(--navy); }
.kpi-grid .kpi-card:nth-child(2) { border-top: 3px solid var(--teal); }
.kpi-grid .kpi-card:nth-child(3) { border-top: 3px solid var(--gold); }
.kpi-grid .kpi-card:nth-child(4) { border-top: 3px solid #5B8C5A; }
.kpi-grid .kpi-card:nth-child(5) { border-top: 3px solid #8E6BAD; }
.kpi-grid .kpi-card:nth-child(6) { border-top: 3px solid var(--red); }
.kpi-value { font-family: 'Playfair Display', serif; }

/* Plaza takeaway = gold left border on warm gray */
.callout { background: var(--border-light); border-left: 4px solid var(--gold); padding: 16px 22px; }
.callout strong { color: var(--navy); }

/* Plaza inputs = 2px border, serif placeholder */
input, select, textarea { border: 2px solid var(--border); font-family: 'Source Sans 3', sans-serif; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); box-shadow: none; }
input::placeholder, textarea::placeholder { font-family: 'Source Serif 4', serif; font-style: italic; color: var(--text-muted); }

/* Plaza buttons */
.btn { font-family: 'Source Sans 3', sans-serif; letter-spacing: 0.3px; border: 2px solid transparent; }
.btn-primary { background: var(--navy); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-light); }
.btn-secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-teal { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-teal:hover { background: var(--teal-light); border-color: var(--teal-light); }

/* Plaza table = navy header border, warm gray backgrounds */
thead th { background: var(--border-light); border-bottom: 2px solid var(--navy); color: var(--navy); font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
td.n, .numeric { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; }
td.lbl { font-weight: 600; color: var(--navy); }

/* Plaza tabs */
.tab { font-family: 'Source Sans 3', sans-serif; }
.tab.active { border-bottom-color: var(--navy); color: var(--navy); }

/* Plaza pills/badges */
.pill { font-family: 'Source Sans 3', sans-serif; }

/* Plaza overline/caption */
.overline { font-family: 'Source Sans 3', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }

/* Plaza exhibit number badge */
.ex-num { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }

/* Plaza progress bar */
.progress-track { height: 8px; background: var(--border); position: relative; overflow: hidden; }
.progress-fill { height: 100%; transition: width 0.8s ease; }
.progress-fill.good { background: var(--green); }
.progress-fill.warn { background: var(--gold); }
.progress-fill.bad { background: var(--red); }

/* Plaza alert card */
.alert { border: 1px solid var(--border); background: var(--white); }
.alert .alert-sev { width: 8px; min-height: 40px; border-radius: 4px; flex-shrink: 0; }

/* Plaza serif for body text in results */
.rp-body, .qa-body, .md-content p { font-family: 'Source Serif 4', Georgia, serif; line-height: 1.75; }

/* Plaza monospace for numbers */
.kpi-sub, .kpi-d { font-family: 'JetBrains Mono', monospace; }

/* Plaza spinner */
.spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--navy); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-family: 'Source Serif 4', serif; font-size: 14px; color: var(--text-muted); font-style: italic; }

/* Plaza footer */
.foot { padding: 28px 0; margin-top: 40px; border-top: 2px solid var(--navy); display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }

@media print { .sidebar, .topbar, .btn, .filter-bar, .tabs { display: none !important; } .main-content { margin: 0; padding: 0; } }