/* ═══════════════════════════════════════════════
   FDF WIZARD — Base Stylesheet
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; font-size: 14px; background: #f4f6f9; color: #222; height: 100vh; display: flex; flex-direction: column; }

/* ── TOP BAR ─────────────────────────────────── */
.top-bar { background: #0B1D33; color: white; padding: 12px 24px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.app-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
.app-title-accent { color: #B8935A; }
.app-version { font-size: 11px; background: rgba(184,147,90,0.2); color: #B8935A; padding: 2px 8px; border-radius: 10px; }

/* ── LAYOUT ──────────────────────────────────── */
.layout { display: flex; flex: 1; overflow: hidden; }

/* ── SIDEBAR ─────────────────────────────────── */
.sidebar { width: 260px; background: #0B1D33; border-right: none; display: flex; flex-direction: column; padding: 20px 0; flex-shrink: 0; overflow-y: auto; }
.case-ref { padding: 0 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 12px; }
.case-ref label { display: block; font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.case-ref input { width: 100%; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; font-size: 13px; background: rgba(255,255,255,0.05); color: #fff; }
.case-ref input::placeholder { color: rgba(255,255,255,0.3); }
.case-ref input:focus { outline: none; border-color: #B8935A; box-shadow: 0 0 0 2px rgba(184,147,90,0.2); }
.nav-list { list-style: none; }

/* ── Base nav-item (shared defaults) ── */
.nav-item { padding: 10px 16px; cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.6); border-left: 3px solid transparent; transition: background 0.15s, color 0.15s; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.9); }
.nav-item.active { background: rgba(184,147,90,0.12); color: #fff; font-weight: bold; border-left-color: #B8935A; }

/* ── Divider line between tiers ── */
.nav-divider { list-style: none; height: 0; border-top: 1px solid rgba(255,255,255,0.08); margin: 6px 16px; }

/* ── Tier 5: Instruction item ("How to complete this form") ── */
.nav-item.nav-instruction { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.8); padding: 10px 16px; }
.nav-item.nav-instruction.active { background: rgba(184,147,90,0.12); border-left-color: #B8935A; color: #fff; }

/* ── Tier 1: Product header — FDF document ── */
.nav-item.nav-product-fdf { font-size: 14px; font-weight: 700; color: #B8935A; padding: 10px 16px; background: rgba(184,147,90,0.08); border-left: 3px solid #B8935A; }
.nav-item.nav-product-fdf:hover { background: rgba(184,147,90,0.12); }
.nav-item.nav-product-fdf.active { background: rgba(184,147,90,0.15); border-left-color: #B8935A; color: #B8935A; font-weight: bold; }

/* ── Tier 1: Product header — Accrual Calculator ── */
.nav-item.nav-product-accrual { font-size: 14px; font-weight: 700; color: #B8935A; padding: 10px 16px; background: rgba(184,147,90,0.08); border-left: 3px solid #B8935A; }
.nav-item.nav-product-accrual:hover { background: rgba(184,147,90,0.12); }
.nav-item.nav-product-accrual.active { background: rgba(184,147,90,0.15); color: #B8935A; border-left-color: #B8935A; font-weight: bold; }

/* ── Tier 2: FDF section headings (1–4, Oath) ── */
.nav-item.nav-section { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.75); padding: 10px 16px 10px 24px; }
.nav-item.nav-section.active { background: rgba(184,147,90,0.12); border-left-color: #B8935A; color: #fff; }

/* ── Tier 4: Wizard tools (Bank Statement Analysis, Annexures, Final Document) ── */
.nav-item.nav-wizard { font-size: 13px; font-style: italic; color: rgba(255,255,255,0.4); padding: 7px 16px 7px 40px; background: rgba(255,255,255,0.02); }
.nav-item.nav-wizard:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); }
.nav-item.nav-wizard.active { background: rgba(184,147,90,0.12); color: #B8935A; border-left-color: #B8935A; font-weight: bold; font-style: italic; }

/* ── CONTENT AREA ────────────────────────────── */
.content { flex: 1; overflow-y: auto; padding: 32px 40px; }
.fdf-section { display: none; }
.fdf-section.active-section { display: block; }
.fdf-section h1 { font-size: 20px; color: #1a3a5c; margin-bottom: 8px; }
.section-intro { color: #555; margin-bottom: 24px; line-height: 1.5; font-style: italic; }

/* ── PLACEHOLDER BOX ─────────────────────────── */
.placeholder-box { background: #fff8e1; border: 1px dashed #f0c040; border-radius: 6px; padding: 24px; color: #7a6000; font-size: 13px; }

/* ── FORM LEGEND ─────────────────────────────── */
.form-legend { background: #f8f9fa; border: 1px solid #dde3ea; border-radius: 6px; padding: 12px 16px; margin-bottom: 28px; font-size: 12px; color: #444; }
.form-legend strong { display: block; margin-bottom: 8px; color: #1a3a5c; font-size: 13px; }
.form-legend ul { padding-left: 18px; }
.form-legend ul li { margin-bottom: 5px; line-height: 1.5; }
.legend-tag { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 11px; font-weight: bold; margin-right: 4px; }
.legend-tag--grey { background: #f0f0f0; color: #555; font-style: italic; border: 1px solid #ccc; }
.legend-tag--dark { background: #f0f5ff; color: #1a3a5c; border-left: 3px solid #1a3a5c; }
.legend-tag--blue { background: #e8f4fd; color: #2e86c1; border-left: 3px solid #2e86c1; }
.legend-tag--orange { background: #fff8e1; color: #7a5000; border-left: 3px solid #f59e0b; }

/* ════════════════════════════════════════════════
   FORM FIELDS
   ════════════════════════════════════════════════ */
.form-group { margin-bottom: 24px; }
.field-label { display: block; font-weight: bold; font-size: 13px; color: #1a3a5c; margin-bottom: 6px; }
.field-hint { font-size: 12px; color: #555; font-style: italic; margin-bottom: 10px; line-height: 1.5; }
.field-input { width: 100%; padding: 8px 10px; border: 1px solid #ccd3db; border-radius: 4px; font-size: 13px; font-family: Arial, sans-serif; color: #222; background: #fff; }
.field-input:focus { outline: none; border-color: #1a3a5c; box-shadow: 0 0 0 3px rgba(26,58,92,0.1); }
.field-narrow  { max-width: 180px; }
.field-medium  { max-width: 380px; }
.field-textarea { min-height: 72px; resize: vertical; }

/* ── READONLY CALCULATED FIELDS ──────────────── */
.readonly-calc {
  background: #f0f5ff !important;
  color: #1a3a5c;        /* No !important — allows JS inline style to override for net worth */
  font-weight: bold !important;
  border-color: #b8cce4 !important;
  cursor: default !important;
}

/* ── DATE FIELD VALIDATION FEEDBACK ─────────────────── */
.date-feedback {
  display: block;
  font-size: 12px;
  margin-top: 4px;
}
.date-feedback--valid {
  color: #27ae60;
}
.date-feedback--invalid {
  color: #c0392b;
}
.date-feedback--info { color: #e67e22; }
@media print {
  .date-feedback { display: none !important; }
}

/* ── AUTO-CALCULATED BADGE ───────────────────── */
.calc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: normal;
  background: #d4edda;
  color: #155724;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

/* ── RADIO BUTTONS ───────────────────────────── */
.radio-group { display: flex; gap: 24px; flex-wrap: wrap; }
.radio-group--stacked { flex-direction: column; gap: 10px; }
.radio-option { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; color: #333; }
.radio-option input[type="radio"] { width: 16px; height: 16px; cursor: pointer; accent-color: #1a3a5c; }
.regime-other-input { display: none; margin-top: 10px; }

/* ── FDF TABLES ──────────────────────────────── */
.fdf-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.fdf-table th { background: #1a3a5c; color: white; padding: 8px 10px; text-align: left; font-weight: normal; font-size: 12px; text-transform: uppercase; }
.fdf-table td { border: 1px solid #dde3ea; padding: 3px; background: #fff; }
.fdf-table .row-num { background: #f4f6f9; color: #888; font-size: 11px; text-align: center; width: 28px; padding: 4px; }
.col-num { width: 28px; }
.col-date { width: 160px; }
.col-dob-dd, .col-dob-mm { width: 55px; min-width: 55px; }
.col-dob-yyyy { width: 70px; min-width: 70px; }
.col-caseno { width: 200px; }
.col-court { width: 320px; max-width: 320px; }
.col-amount { width: 160px; }
.table-input { width: 100%; border: none; padding: 6px 8px; font-size: 13px; font-family: Arial, sans-serif; background: transparent; color: #222; }
.table-input:focus { outline: none; background: #f0f5ff; }
.text-right { text-align: right; }

/* ── CURRENCY SELECT IN TABLES ───────────────── */
.table-select { width: 100%; border: none; padding: 5px 8px; font-size: 13px; font-family: Arial, sans-serif; background: transparent; color: #222; cursor: pointer; }
.table-select:focus { outline: none; background: #f0f5ff; }

/* ════════════════════════════════════════════════
   SUBSECTIONS
   ════════════════════════════════════════════════ */
.subsection { background: #fff; border: 1px solid #dde3ea; border-radius: 6px; padding: 24px 28px; margin-bottom: 28px; }
.subsection-heading { font-size: 15px; font-weight: bold; color: #1a3a5c; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #e8f0fb; }

/* ── DOCUMENT REQUIRED BOX ───────────────────── */
.doc-required { background: #f0f5ff; border-left: 3px solid #1a3a5c; padding: 10px 14px; font-size: 12px; color: #444; margin-bottom: 16px; line-height: 1.6; border-radius: 0 4px 4px 0; }

/* ── HELPFUL TIPS BOX ────────────────────────── */
.blue-box { background: #e8f4fd; border-left: 3px solid #2e86c1; padding: 10px 14px; font-size: 12px; color: #1a3a5c; margin-bottom: 20px; line-height: 1.6; border-radius: 0 4px 4px 0; }
.blue-box > strong:first-child { display: block; margin-bottom: 6px; }
.blue-box ul { margin: 0; padding-left: 18px; }
.blue-box ul li { margin-bottom: 4px; }

/* ── AMOUNT / CURRENCY FIELDS ────────────────── */
.amount-wrapper { display: flex; align-items: center; max-width: 280px; }
.currency-prefix { background: #e8f0fb; border: 1px solid #ccd3db; border-right: none; padding: 8px 10px; font-size: 13px; font-weight: bold; color: #1a3a5c; border-radius: 4px 0 0 4px; flex-shrink: 0; }
.amount-input { border-radius: 0 4px 4px 0 !important; text-align: right; }

/* ── TOTAL ROWS ───────────────────────────────── */
.total-row { display: flex; align-items: center; justify-content: space-between; background: #f4f6f9; border: 1px solid #dde3ea; border-radius: 4px; padding: 12px 16px; margin-top: 16px; gap: 16px; }
.total-row--highlight { background: #e8f0fb; border-color: #1a3a5c; }
.total-label { font-size: 13px; font-weight: bold; color: #1a3a5c; flex: 1; }
.total-input { font-weight: bold; color: #1a3a5c; }

/* ── SUMMARY PANELS ──────────────────────────── */
.summary-panel { background: #f8f9fa; border: 1px solid #dde3ea; border-radius: 4px; padding: 12px 16px; margin-top: 16px; display: none; }
.summary-panel-title { font-size: 11px; font-weight: bold; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #eee; }
.summary-row:last-child { border-bottom: none; }
.summary-row-label { color: #555; }
.summary-row-value { font-weight: bold; color: #1a3a5c; font-variant-numeric: tabular-nums; }

/* ── REPEATING BLOCKS ────────────────────────── */
.property-block,
.business-block,
.pension-block { background: #fafbfc; border: 1px solid #e4e9f0; border-radius: 4px; padding: 20px; margin-bottom: 16px; }

.property-block-header,
.business-block-header,
.pension-block-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #e4e9f0; }

.property-block-label,
.business-block-label,
.pension-block-label { font-size: 12px; font-weight: bold; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── BUTTONS ─────────────────────────────────── */
.add-block-btn { display: inline-flex; align-items: center; gap: 8px; background: #1a3a5c; color: white; border: none; border-radius: 4px; padding: 10px 18px; font-size: 13px; font-family: Arial, sans-serif; cursor: pointer; margin-top: 8px; transition: background 0.15s; }
.add-block-btn:hover { background: #2e5c8a; }
.add-row-btn { display: inline-flex; align-items: center; gap: 6px; background: none; color: #1a3a5c; border: 1px solid #1a3a5c; border-radius: 4px; padding: 6px 14px; font-size: 12px; font-family: Arial, sans-serif; cursor: pointer; margin-top: 8px; transition: background 0.15s; }
.add-row-btn:hover { background: #e8f0fb; }
.remove-block-btn { background: none; border: 1px solid #cc3333; color: #cc3333; border-radius: 4px; padding: 4px 10px; font-size: 11px; font-family: Arial, sans-serif; cursor: pointer; transition: background 0.15s; }
.remove-block-btn:hover { background: #fff0f0; }
.col-rate { width: 130px; }
/* ── SAVE STATUS INDICATOR ───────────────────── */
.save-status {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 10px;
  transition: all 0.3s;
}
.save-status.saving {
  color: #B8935A;
  background: rgba(184,147,90,0.15);
}
.save-status.saved {
  color: rgba(255,255,255,0.4);
}
.save-status.error {
  color: #ffaaaa;
}
.topbar-back-link {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: 2px 10px;
  white-space: nowrap;
}
.topbar-back-link:hover {
  color: rgba(255,255,255,0.8);
}
/* ── EMPLOYMENT / SELF-EMPLOYMENT BLOCKS ─────── */
.employment-block,
.selfemployment-block {
  background: #fafbfc;
  border: 1px solid #e4e9f0;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 16px;
}
.employment-block-header,
.selfemployment-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e9f0;
}
.employment-block-label,
.selfemployment-block-label {
  font-size: 12px;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.col-gross { width: 120px; }
/* ── N/A SUBSECTION STATE ────────────────────── */
.subsection.is-na .fdf-table,
.subsection.is-na .form-group,
.subsection.is-na .total-row,
.subsection.is-na .add-row-btn,
.subsection.is-na .add-block-btn,
.subsection.is-na .property-block,
.subsection.is-na .business-block,
.subsection.is-na .pension-block,
.subsection.is-na .employment-block,
.subsection.is-na .selfemployment-block,
.subsection.is-na .summary-panel,
.subsection.is-na .blue-box,
.subsection.is-na .doc-required,
.subsection.is-na .field-hint,
.subsection.is-na .section-intro,
.subsection.is-na .warning-box,
.subsection.is-na .amount-wrapper,
.subsection.is-na .subsection-heading-row .na-stamp {
  opacity: 0.4;
  pointer-events: none;
}

/* Keep the heading row itself visible and interactive except the stamp */
.subsection.is-na .subsection-heading-row {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Keep na-btn and subsection-heading interactive */
.subsection.is-na .na-btn,
.subsection.is-na .subsection-heading {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.na-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #aaa;
  color: #666;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
}
.na-btn:hover { background: #f4f4f4; }

/* N/A first-use hint popover */
.na-first-hint {
  position: relative;
  display: block;
  background: #fff8e1;
  border: 1px solid #f0b429;
  border-left: 4px solid #f0b429;
  border-radius: 5px;
  padding: 10px 14px;
  font-size: 12px;
  color: #5d4037;
  line-height: 1.5;
  margin-top: 8px;
  max-width: 380px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  z-index: 100;
  animation: na-hint-fade-in 0.2s ease;
}
@keyframes na-hint-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media print {
  .na-first-hint { display: none !important; }
  /* N/A sections print at full opacity — fields show N/A or R 0.00, not greyed out */
  .subsection.is-na .fdf-table,
  .subsection.is-na .form-group,
  .subsection.is-na .total-row,
  .subsection.is-na .property-block,
  .subsection.is-na .business-block,
  .subsection.is-na .pension-block,
  .subsection.is-na .employment-block,
  .subsection.is-na .selfemployment-block,
  .subsection.is-na .amount-wrapper {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  /* Hide the N/A button and N/A stamp badge in print — N/A sections print clean */
  .na-btn { display: none !important; }
  .na-stamp { display: none !important; }
}
.na-btn.active {
  background: #fff3cd;
  border-color: #e0a800;
  color: #7a5000;
  font-weight: bold;
}

.na-stamp {
  display: none;
  font-size: 11px;
  font-weight: bold;
  color: #7a5000;
  background: #fff3cd;
  border: 1px solid #e0a800;
  border-radius: 3px;
  padding: 2px 8px;
  margin-left: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.subsection.is-na .na-stamp { display: inline-block; }

.subsection-heading-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8f0fb;
}
.subsection-heading-row .subsection-heading {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  flex: 1;
}
/* ── SECTION 3.1 EXPENSES TABLE ──────────────── */
.expense-group-header td {
  background: #1a3a5c;
  color: white;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 10px;
}

.expense-total-row td {
  background: #e8f0fb;
  font-weight: bold;
  font-size: 13px;
  color: #1a3a5c;
  padding: 8px 6px;
}

.expense-label { font-size: 12px; padding: 4px 8px; color: #333; }
.col-expense-total   { width: 130px; }
.col-expense-pct     { width: 72px; }
.col-expense-calc    { width: 120px; }

.expense-pct-input {
  width: 100%;
  border: none;
  padding: 5px 4px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  text-align: center;
  background: #fffbf0;
  color: #222;
}
.expense-pct-input:focus { outline: none; background: #fff3cd; }

.expense-calc-input {
  width: 100%;
  border: none;
  padding: 5px 6px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  text-align: right;
  background: #f0f0f0;
  color: #555;
  cursor: default;
}

.expense-total-input {
  width: 100%;
  border: none;
  padding: 5px 6px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  text-align: right;
  background: #fff;
  color: #222;
}
.expense-total-input:focus { outline: none; background: #f0f5ff; }

.bank-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2e86c1;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  margin-top: 12px;
  opacity: 0.5;
  cursor: not-allowed;
}
.bank-apply-btn.ready { opacity: 1; cursor: pointer; }
.bank-apply-btn.ready:hover { background: #1a6fa0; }
/* ── SIDEBAR: non-clickable header ── */
/* ── SIDEBAR: "2. Financial Details" header (non-clickable) ── */
.nav-item.nav-header {
  font-weight: 700;
  font-size: 14px;
  color: #1a3a5c;
  cursor: default;
  padding: 10px 16px 4px 24px;
  pointer-events: none;
  border-left: 3px solid transparent;
}
/* ── SIDEBAR: Tier 3 — FDF sub-items (Assets, Liabilities, etc.) ── */
.nav-item.nav-child {
  padding-left: 40px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* ── SUBSECTION sub-heading (4.1.1, 4.1.2) ── */
h3.subsection-subheading {
  font-size: 13px;
  font-weight: 600;
  color: #1a3a5c;
  margin: 16px 0 8px;
  font-family: Arial, sans-serif;
}

/* ── Large textarea ── */
.field-textarea--large {
  min-height: 120px;
}

/* ── Warning box (Oath section) ── */
.warning-box {
  background: #fff8e1;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.6;
  color: #444;
}
.warning-box > strong:first-child { display: block; margin-bottom: 8px; font-size: 14px; color: #7a5000; }
.warning-box p { margin: 6px 0; }

/* ── Oath text block ── */
.oath-text {
  font-size: 13px;
  line-height: 1.8;
  color: #222;
}
.oath-inline-input {
  display: inline-block;
  width: 260px;
  margin: 0 6px;
  vertical-align: middle;
}
/* v22: oath structural elements (base/screen) — print refines these */
.oath-declaration { margin-bottom: 16px; }
.oath-sig-line { border-bottom: 1px solid #555; width: 60%; max-width: 420px; margin: 36px 0 6px 0; }
.oath-commissioner { margin: 12px 0; }
.oath-field-label { font-size: 12px; font-weight: bold; margin: 16px 0 4px 0; }
.oath-input-line { border-bottom: 1px solid #555; width: 60%; max-width: 380px; margin: 0 0 8px 0; }
.oath-attorney-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.oath-attorney-table td { border: 1px solid #555; padding: 12px; font-size: 12px; vertical-align: top; }
.oath-attorney-label { width: 45%; font-weight: bold; }
.oath-attorney-blank { height: 60px; }
.oath-readonly-notice {
  font-style: italic;
  color: #666;
  margin: 12px 0;
}
.oath-commissioner {
  margin-top: 24px;
  border-top: 1px solid #ccc;
  padding-top: 16px;
  font-size: 13px;
  line-height: 1.8;
}
.oath-commissioner ol {
  margin: 12px 0 12px 24px;
  line-height: 2.2;
}
.oath-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.oath-attorneys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.oath-sign-line {
  border-bottom: 1px solid #333;
  margin-top: 40px;
}
.oath-sign-line--tall {
  margin-top: 72px;
}

/* ── Wizard-only panels (not printed) ── */
.wizard-only-panel { border: 2px dashed #2e86c1; background: #f0f8ff; }
.wizard-only-panel .subsection-heading { color: #2e86c1; }

/* ── Print: hide wizard-only elements ── */
/* ═══════════════════════════════════════════════════════════════
   BANK STATEMENT ANALYSER — CSS additions
   Append this entire block to the bottom of css/style.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Zones ─────────────────────────────────────────────────────── */
.bank-zone {
  margin-bottom: 28px;
}
.bank-zone--apply {
  padding: 20px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  text-align: center;
}
.bank-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* ── Warning banners ────────────────────────────────────────────── */
.bank-warning-banner {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-left: 4px solid #e67e22;
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #5a3e00;
}
.bank-period-warning {
  background: #f0f4ff;
  border: 1px solid #aac4ff;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 12px;
  color: #2c3e7a;
  margin-bottom: 14px;
}

/* ── Zone 1 action buttons row ─────────────────────────────────── */
.bank-zone1-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bank-unsaved-notice {
  background: #ffeeba;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  color: #856404;
  margin-bottom: 10px;
}
.bank-success-notice {
  background: #d4edda;
  border: 1px solid #28a745;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: #155724;
  margin-bottom: 10px;
}

/* ── Bank selector button group ─────────────────────────────────── */
.bank-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.bank-select-btn {
  padding: 7px 14px;
  border: 2px solid #1a3c6b;
  border-radius: 4px;
  background: #fff;
  color: #1a3c6b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bank-select-btn:hover {
  background: #e8f0fb;
}
.bank-select-btn.active {
  background: #1a3c6b;
  color: #fff;
}

/* ── PDF notice box ─────────────────────────────────────────────── */
.bank-pdf-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  color: #5a3e00;
  margin-top: 10px;
  line-height: 1.7;
}
.bank-pdf-notice a {
  color: #1a3c6b;
}

/* ── Upload status flash ────────────────────────────────────────── */
.bank-upload-status {
  background: #d4edda;
  border: 1px solid #28a745;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  color: #155724;
  margin-top: 8px;
}

/* ── Generic bank table ─────────────────────────────────────────── */
.bank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bank-table th,
.bank-table td {
  border: 1px solid #dee2e6;
  padding: 6px 10px;
  vertical-align: middle;
}
.bank-table th {
  background: #1a3c6b;
  color: #fff;
  font-weight: 600;
  text-align: left;
}
.bank-table tbody tr:nth-child(even) {
  background: #f8f9fa;
}
.bank-table tbody tr:hover {
  background: #eef2fb;
}

/* ── Review table (transactions) ───────────────────────────────── */
.bank-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bank-review-table th,
.bank-review-table td {
  border: 1px solid #dee2e6;
  padding: 5px 8px;
  vertical-align: middle;
}
.bank-review-table th {
  background: #f0f0f0;
  font-weight: 600;
}
.bank-review-table tbody tr:hover {
  background: #f8f0e8;
  cursor: default;
}
.tx-desc {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tab bar ────────────────────────────────────────────────────── */
.bank-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #1a3c6b;
  margin-bottom: 0;
  padding-bottom: 0;
}
.bank-tab-btn {
  padding: 10px 22px;
  border: none;
  background: #e8edf5;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 2px solid #dee2e6;
  border-bottom: 2px solid #dee2e6;
  margin-right: 4px;
  transition: background 0.15s, color 0.15s;
  position: relative;
  bottom: -2px;
}
.bank-tab-btn:hover:not(.active) {
  background: #d8e4f5;
  color: #1a3c6b;
}
.bank-tab-btn.active {
  background: #fff;
  color: #1a3c6b;
  border-color: #1a3c6b;
  border-bottom-color: #fff;
  font-size: 14px;
  padding-bottom: 12px;
  z-index: 1;
}

/* ── Count badge on tabs ────────────────────────────────────────── */
.bank-count-badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 7px;
  margin-left: 5px;
  min-width: 20px;
  text-align: center;
}
.bank-tab-btn.active .bank-count-badge {
  background: rgba(255,255,255,0.3);
}

/* ── Status badges ──────────────────────────────────────────────── */
.bank-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.bank-badge--red    { background: #fde8e8; color: #c0392b; }
.bank-badge--amber  { background: #fef3cd; color: #856404; }
.bank-badge--green  { background: #d4edda; color: #155724; }
.bank-badge--blue   { background: #d0e4ff; color: #1a3c6b; }
.bank-badge--grey   { background: #e9ecef; color: #495057; }

/* ── Filters row ────────────────────────────────────────────────── */
.bank-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
}
.bank-filter-select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  margin-left: 4px;
}
.bank-filter-input {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  width: 180px;
}

/* ── Categorised grouping ───────────────────────────────────────── */
.bank-group {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  margin-bottom: 6px;
  overflow: hidden;
}
.bank-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8f9fa;
  flex-wrap: wrap;
}
.bank-group-merchant {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
}
.bank-group-meta {
  font-size: 11px;
  color: #555;
}
.bank-group-rows {
  border-top: 1px solid #dee2e6;
}

/* ── Panel container ─────────────────────────────────────────────── */
.bank-panel {
  max-height: 480px;
  overflow-y: auto;
  border: 2px solid #1a3c6b;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
  margin-bottom: 14px;
}

/* ── Filters row (sits between tab bar and panel) ───────────────── */
.bank-filters {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 2px solid #1a3c6b;
  border-top: none;
  border-bottom: 1px solid #dee2e6;
  font-size: 12px;
  margin-bottom: 0;
}

/* ── Apply main button ───────────────────────────────────────────── */
.bank-apply-main-btn {
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 5px;
}

/* ── Side Panel ──────────────────────────────────────────────────── */
.bank-side-panel {
  position: fixed;
  top: 0;
  right: -440px;
  width: 420px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 1000;
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
}
.bank-side-panel.open {
  right: 0;
}
.bank-side-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bank-side-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #1a3c6b;
  color: #fff;
  font-size: 14px;
}
.bank-sp-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}
.bank-sp-detail {
  padding: 12px 16px;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
}
.bank-sp-row {
  display: flex;
  gap: 8px;
  margin-bottom: 5px;
  font-size: 12px;
}
.bank-sp-label {
  color: #666;
  min-width: 80px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 1px;
}
.bank-sp-search-wrap {
  padding: 8px 12px;
  border-bottom: 1px solid #dee2e6;
}
.bank-sp-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
}
.bank-sp-row-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.sp-row-option {
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.1s;
}
.sp-row-option:hover {
  background: #eef2fb;
}
.sp-row-option.sp-row-selected {
  background: #d0e4ff;
  font-weight: 600;
}
.sp-row-special {
  color: #555;
  font-style: italic;
  background: #fafafa;
}
.bank-sp-footer {
  padding: 10px 16px;
  border-top: 1px solid #dee2e6;
  background: #f8f9fa;
}

/* ── Modals ──────────────────────────────────────────────────────── */
.bank-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bank-modal {
  background: #fff;
  border-radius: 6px;
  padding: 24px 28px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  max-height: 90vh;
  overflow-y: auto;
}
.bank-modal--wide {
  max-width: 680px;
}
.bank-modal h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #1a3c6b;
}
.bank-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ── Municipal split fields ──────────────────────────────────────── */
.bank-municipal-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.bank-municipal-fields label {
  flex: 1;
  min-width: 140px;
  font-size: 12px;
  color: #555;
}
.bank-split-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  font-size: 13px;
  margin-top: 4px;
  box-sizing: border-box;
}
.bank-mun-remainder {
  margin-top: 12px;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 12px;
}

/* ── Primary / secondary buttons (used throughout bank analyser and modals) ── */
.btn-primary {
  background: #1a3a5c;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 9px 20px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover:not(:disabled) { background: #2e5c8a; }
.btn-primary:disabled {
  background: #b0bec5;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.7;
}
.btn-secondary {
  background: #fff;
  color: #1a3a5c;
  border: 1px solid #1a3a5c;
  border-radius: 5px;
  padding: 9px 20px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover:not(:disabled) { background: #e8f0fb; }
.btn-secondary:disabled {
  border-color: #b0bec5;
  color: #b0bec5;
  cursor: not-allowed;
}

/* ── Small buttons ──────────────────────────────────────────────── */
.btn-small {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #1a3c6b;
  background: #fff;
  color: #1a3c6b;
}
.btn-small:hover {
  background: #eef2fb;
}
.btn-danger {
  border-color: #c0392b;
  color: #c0392b;
}
.btn-danger:hover {
  background: #fde8e8;
}

/* ── Locked nav item ─────────────────────────────────────────────── */
.nav-item--locked {
  color: rgba(255,255,255,0.3) !important;
  cursor: not-allowed !important;
  font-style: italic;
  opacity: 0.65;
}
.nav-item--locked:hover {
  background: transparent !important;
}

/* ── Admin panel ─────────────────────────────────────────────────── */
#section-admin {
  /* Completely hidden in print */
}

/* ── Print: hide bank analyser and admin entirely ─────────────────── */
@media print {
  #section-bankstatements,
  #section-admin,
  .bank-side-panel,
  .bank-modal-overlay {
    display: none !important;
  }
}

/* ── Suggestion chip (Needs Review one-click confirm) ───────────── */
.bank-suggestion-chip {
  display: inline-block;
  background: #d0e4ff;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #aac4ff;
  transition: background 0.15s, transform 0.1s;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.bank-suggestion-chip:hover {
  background: #b0d0ff;
  transform: scale(1.02);
}

/* ── Drag and drop upload zone ───────────────────────────────────── */
.bank-drop-zone {
  border: 2px dashed #1a3c6b;
  border-radius: 6px;
  padding: 20px 16px;
  text-align: center;
  background: #f8f9ff;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  margin-top: 6px;
}
.bank-drop-zone:hover,
.bank-drop-active {
  background: #e8f0fb !important;
  border-color: #e67e22 !important;
  border-style: solid !important;
}
.bank-drop-zone-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bank-drop-icon {
  font-size: 22px;
}
.bank-drop-text {
  font-size: 13px;
  color: #444;
}
.bank-drop-browse-btn {
  display: inline-block;
  padding: 5px 14px;
  background: #1a3c6b;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.bank-drop-browse-btn:hover {
  background: #16336b;
}

/* ── Session help text (Export/Import explanation) ──────────────── */
.bank-session-help {
  background: #f0f4ff;
  border: 1px solid #aac4ff;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12px;
  color: #333;
  margin-bottom: 14px;
  line-height: 1.7;
}
.bank-session-help code {
  background: #e0e8ff;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
}

/* ══ ADMIN NAV ITEM ══ */
.nav-item--locked {
  opacity: 0.5;
  cursor: pointer;
}
.nav-item--locked:hover {
  opacity: 0.75;
}

/* ══ ADMIN SECTION — hidden in print ══ */
@media print {
  #section-admin {
    display: none !important;
  }
}

/* ══ SIDEBAR ADMIN FOOTER ══ */
/* Pushes the admin panel link to the very bottom of the sidebar,
   visually separated from the product navigation */
.sidebar-admin-footer {
  margin-top: auto;
  padding-top: 8px;
}
.sidebar-admin-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0 16px 4px 16px;
}
.nav-admin {
  font-size: 12px;
  color: rgba(255,255,255,0.5) !important;
  letter-spacing: 0.3px;
}
.nav-admin:hover {
  color: rgba(255,255,255,0.7) !important;
}

/* ══ BANK-TAB (used on review tabs, admin tabs, bank selector tabs) ══ */
/* Distinct from .bank-tab-btn — this class is used on all wizard tab buttons */
.bank-tab {
  padding: 9px 20px;
  border: 2px solid #c5cae9;
  border-bottom: none;
  background: #eef0fb;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  margin-right: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
  bottom: -2px;
}
.bank-tab:hover:not(.active) {
  background: #dde0f5;
  color: #1a237e;
  border-color: #9fa8da;
}
.bank-tab.active {
  background: #1a237e;
  color: #fff;
  border-color: #1a237e;
  font-weight: 700;
  z-index: 1;
}
.bank-tab.active .bank-badge {
  background: rgba(255,255,255,0.3);
  color: #fff;
}

/* Bank selector buttons are a flat button-group style, not tab-style */
.bank-select-btn {
  padding: 8px 18px;
  border: 2px solid #c5cae9;
  background: #eef0fb;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  margin-right: 6px;
  margin-bottom: 6px;
  transition: background 0.15s, color 0.15s;
}
.bank-select-btn:hover:not(.active) {
  background: #dde0f5;
  color: #1a237e;
}
.bank-select-btn.active {
  background: #1a237e;
  color: #fff;
  border-color: #1a237e;
  font-weight: 700;
}

/* ══ BANK ANALYSER — missing utility classes ══ */
.bank-warning-box {
  background: #fff8e1;
  border: 1px solid #ffb300;
  border-left: 4px solid #ff9800;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #5d4037;
}

/* Modal backdrop + box (used by bank analyser modals) */
.bank-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bank-modal-box {
  background: #fff;
  border-radius: 10px;
  padding: 28px 32px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}

/* ════════════════════════════════════════════════
   WELCOME / LANDING PAGE
   ════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────── */
.welcome-hero {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  background: linear-gradient(135deg, #1a3a5c 0%, #1e4976 60%, #16304e 100%);
  border-radius: 12px;
  padding: 40px 40px 36px;
  margin-bottom: 36px;
  color: #fff;
}
.welcome-hero-text { flex: 1; }
.welcome-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #93b8d8;
  margin-bottom: 10px;
  font-weight: 600;
}
.welcome-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.welcome-subtitle {
  font-size: 14px;
  color: #c8dcee;
  line-height: 1.7;
  max-width: 380px;
}
.welcome-hero-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  width: 240px;
}
.welcome-tool-card {
  border-radius: 8px;
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid transparent;
}
.welcome-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.welcome-tool-card--fdf {
  background: #fff;
  color: #1a3a5c;
}
.welcome-tool-card--accrual {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.welcome-tool-card-icon { font-size: 22px; margin-bottom: 6px; }
.welcome-tool-card-label {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 5px;
}
.welcome-tool-card--fdf .welcome-tool-card-label { color: #1a3a5c; }
.welcome-tool-card--accrual .welcome-tool-card-label { color: #fff; }
.welcome-tool-card-desc {
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.welcome-tool-card--fdf .welcome-tool-card-desc { color: #555; }
.welcome-tool-card--accrual .welcome-tool-card-desc { color: #c8dcee; }
.welcome-tool-card-cta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.welcome-tool-card--fdf .welcome-tool-card-cta { color: #1a3a5c; }
.welcome-tool-card--accrual .welcome-tool-card-cta { color: #93c9b0; }

/* ── Section headings ─────────────────────────── */
.welcome-section-heading {
  font-size: 17px;
  font-weight: 700;
  color: #1a3a5c;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e0e8f0;
}

/* ── Which tool grid ──────────────────────────── */
.welcome-which-tool { margin-bottom: 32px; }
.welcome-which-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.welcome-which-card {
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.welcome-which-title {
  font-weight: 700;
  font-size: 13px;
  color: #1a3a5c;
  margin-bottom: 12px;
}
.welcome-which-list {
  padding-left: 18px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #333;
  line-height: 1.7;
}
.welcome-which-list li { margin-bottom: 5px; }
.welcome-which-note {
  background: #f4f7fb;
  border-left: 3px solid #1a3a5c;
  padding: 9px 12px;
  font-size: 12px;
  color: #444;
  line-height: 1.6;
  border-radius: 0 4px 4px 0;
}

/* ── Document checklist ───────────────────────── */
.welcome-checklist-wrapper { margin-bottom: 32px; }
.welcome-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.welcome-checklist-group {
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  overflow: hidden;
}
.welcome-checklist-group-header {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 10px 16px;
}
.welcome-checklist-group-header--fdf {
  background: #1a3a5c;
  color: #fff;
}
.welcome-checklist-group-header--accrual {
  background: #0f6e56;
  color: #fff;
}
.welcome-checklist {
  list-style: none;
  padding: 12px 16px;
  font-size: 12px;
  color: #333;
  line-height: 1.6;
}
.welcome-checklist li {
  padding: 5px 0;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.welcome-checklist li:last-child { border-bottom: none; }
.welcome-badge-required {
  display: inline-block;
  flex-shrink: 0;
  background: #1a3a5c;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 2px;
}
.welcome-badge-tip {
  display: inline-block;
  flex-shrink: 0;
  background: #e1f5ee;
  color: #0f6e56;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 2px;
}

/* ── Glossary toggle ──────────────────────────── */
.welcome-glossary-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f4f7fb;
  border: 1px solid #dde3ea;
  border-radius: 6px 6px 6px 6px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
  color: #1a3a5c;
  cursor: pointer;
  margin-bottom: 0;
  user-select: none;
  transition: background 0.15s;
}
.welcome-glossary-toggle:hover { background: #e8f0fb; }
.welcome-glossary-arrow { font-size: 12px; color: #888; }

/* ── Print: hide welcome decorative elements ──── */
@media print {
  .welcome-hero,
  .welcome-which-tool,
  .welcome-checklist-wrapper,
  .welcome-glossary-toggle { display: none !important; }
}

/* ════════════════════════════════════════════════
   BANK ANALYSER — 3-LEVEL CATEGORISED PANEL
   ════════════════════════════════════════════════ */
.bank-l1-group { border:1px solid #dde3ea; border-radius:6px; margin-bottom:8px; overflow:hidden; }
.bank-l1-header { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#1a3a5c; color:#fff; }
.bank-l1-name { font-weight:700; font-size:13px; flex:1; }
.bank-l1-meta { font-size:12px; color:#b8d0e8; white-space:nowrap; }
.bank-l1-expand { background:rgba(255,255,255,0.15) !important; color:#fff !important; border:1px solid rgba(255,255,255,0.25) !important; font-size:11px !important; padding:3px 10px !important; white-space:nowrap; }
.bank-l1-expand:hover { background:rgba(255,255,255,0.28) !important; }
.bank-l1-body { background:#fafbfc; }
.bank-l1-group--fees { border-color:#e0e0e0; opacity:0.85; }
.bank-l1-header--fees { background:#757575; }
.bank-l2-group { border-bottom:1px solid #eaedf0; }
.bank-l2-group:last-child { border-bottom:none; }
.bank-l2-header { display:flex; align-items:center; gap:10px; padding:8px 14px 8px 22px; background:#f0f4f8; cursor:pointer; }
.bank-l2-header:hover { background:#e6edf5; }
.bank-l2-name { font-weight:600; font-size:12px; color:#1a3a5c; flex:1; }
.bank-l2-meta { font-size:11px; color:#666; white-space:nowrap; }
.bank-l2-expand { font-size:10px !important; padding:2px 8px !important; }
.bank-l2-rows { padding:0 0 0 22px; background:#fff; }

/* ════════════════════════════════════════════════
   WELCOME PAGE V2 — hero redesign
   ════════════════════════════════════════════════ */
.welcome-hero-v2 {
  background: linear-gradient(135deg, #1a3a5c 0%, #1e4976 60%, #16304e 100%);
  border-radius: 12px;
  padding: 40px 40px 36px;
  margin-bottom: 32px;
  color: #fff;
  text-align: center;
}
.welcome-eyebrow-v2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #93b8d8;
  margin-bottom: 12px;
  font-weight: 600;
}
.welcome-title-v2 {
  font-size: 38px;
  font-weight: 800;
  color: #fff !important;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.welcome-subtitle-v2 {
  font-size: 15px;
  color: #c8dcee;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 32px;
}
.welcome-cards-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}
.welcome-card-v2 {
  border-radius: 10px;
  padding: 28px 28px 24px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: left;
}
.welcome-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}
.welcome-card-v2--fdf {
  background: #fff;
  color: #1a3a5c;
  border: 2px solid transparent;
}
.welcome-card-v2--accrual {
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.3);
  color: #fff;
}
.welcome-card-icon-v2 { font-size: 32px; margin-bottom: 12px; display: block; }
.welcome-card-title-v2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.welcome-card-v2--fdf .welcome-card-title-v2 { color: #1a3a5c; }
.welcome-card-v2--accrual .welcome-card-title-v2 { color: #fff; }
.welcome-card-desc-v2 {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.welcome-card-v2--fdf .welcome-card-desc-v2 { color: #555; }
.welcome-card-v2--accrual .welcome-card-desc-v2 { color: #c8dcee; }
.welcome-card-cta-v2 {
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  padding: 7px 16px;
  border-radius: 5px;
}
.welcome-card-v2--fdf .welcome-card-cta-v2 {
  background: #1a3a5c;
  color: #fff;
}
.welcome-card-v2--accrual .welcome-card-cta-v2 {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}

/* ── Sidebar: Financial Details toggle ─────────── */
.nav-fd-toggle {
  cursor: pointer !important;
  pointer-events: all !important;
  font-weight: 700;
  font-size: 14px;
  color: #1a3a5c;
  padding: 10px 16px 4px 24px;
  border-left: 3px solid transparent;
  user-select: none;
}
.nav-fd-toggle:hover { background: rgba(26,58,92,0.07); }
.nav-fd-chevron { font-size: 10px; float: right; margin-right: 4px; }

/* ── Checklist checkboxes ───────────────────────── */
.checklist-item-label {
  display: block;
  cursor: pointer;
  width: 100%;
  overflow: hidden; /* clearfix for floated checkbox */
}
.checklist-cb {
  float: left;
  margin-top: 3px;
  margin-right: 8px;
  width: 15px;
  height: 15px;
  accent-color: #1a3a5c;
  cursor: pointer;
}
.checklist-cb:checked + * {
  color: #555;
  opacity: 0.7;
}
/* Keep Required and Tip badges fully visible when checklist item is ticked */
.checklist-cb:checked + .welcome-badge-required {
  color: #fff;
  background: #1a3a5c;
  opacity: 1;
}
.checklist-cb:checked + .welcome-badge-tip {
  color: #0f6e56;
  background: #e1f5ee;
  opacity: 1;
}

/* ── Section nav bar (Next/Previous) ────────────── */
.section-nav-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 20px; border-top: 1px solid #e8ecf0; }
@media print { .section-nav-bar { display: none !important; } }

/* ── Checklist group: lighter, less overwhelming ── */
.welcome-checklist-group {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}
.welcome-checklist {
  list-style: none;
  padding: 10px 14px;
  margin: 0;
}
.welcome-checklist li {
  padding: 5px 0;
  border-bottom: 1px solid #f4f6f8;
  color: #333;
  line-height: 1.5;
  font-size: 13px;
}
.welcome-checklist li:last-child { border-bottom: none; }


/* ── Bank review tables: controlled overflow in fixed-layout sub-tables ── */
/* Only applied when table-layout:fixed is set inline on the table element */
.bank-review-table th,
.bank-review-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── Annexures system ─────────────────────────────────────────────────────── */

/* Upload zone inside doc-required boxes */
.annex-upload-zone {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px dashed #1a3a5c;
  border-radius: 4px;
}

.annex-upload-btn {
  margin-right: 8px;
  background: #1a3a5c;
  color: #fff;
  border-color: #1a3a5c;
}

/* In-form badge: shows "Annexure" with no number (number hidden until print) */
.annex-box-pill {
  display: inline-block;
  background: #1a3a5c;
  color: #fff;
  border-radius: 3px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
}

.annex-cite-btn {
  background: #fff;
  color: #1a3a5c;
  border-color: #1a3a5c;
}

.annex-cite-btn:hover {
  background: #f0f4f8;
}

.annex-section-badge {
  display: inline-block;
  margin-left: 6px;
  background: #e65100;
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
  vertical-align: middle;
}

/* 📎 icon on predefined field labels */
.annex-field-icon {
  display: inline-block;
  margin-left: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.annex-field-icon:hover {
  opacity: 1;
}

/* ── Section-level standalone paperclip attachment points ──────────────── */
.annex-section-clip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 0;
  background: #f8fafc;
  border: 1px dashed #b0c4de;
  border-radius: 4px;
  font-size: 13px;
  color: #555;
  flex-wrap: wrap;
}
.annex-clip-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.annex-clip-btn:hover {
  opacity: 1;
}
.annex-clip-label {
  font-weight: 600;
  color: #1a3a5c;
}
.annex-clip-status {
  color: #999;
  font-style: italic;
  font-size: 12px;
}
.annex-clip-badge {
  flex-basis: 100%;
}
/* N/A state: grey out the clip */
.subsection.is-na .annex-section-clip {
  opacity: 0.4;
  pointer-events: none;
}

/* Field-level citation badge shown below a field on screen */
.annex-field-badge-list {
  margin-top: 6px;
}
.annex-field-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: 4px;
  margin-right: 8px;
}
.annex-field-badge-desc {
  color: #444;
}
.annex-field-uncite-btn {
  background: none;
  border: none;
  color: #c0392b;
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
}
.annex-field-uncite-btn:hover {
  color: #922b21;
}

/* Mobile warning — CSS-driven fallback (JS also sets display:block) */
@media (max-width: 500px) {
  #mobile-warning { display: block !important; }
  .layout { flex-direction: column; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* Bug #29 fix: print rule MUST appear AFTER the mobile rule above.
   Both use !important — later rule wins. This ensures mobile warning
   never appears in print regardless of screen width. */
@media print {
  #mobile-warning { display: none !important; }
}

/* ═══════════════════ FINAL DOCUMENT TAB ═══════════════════ */

/* Progress bar track already inline — just add transition detail */
#finaldoc-progress-bar {
  transition: width 0.4s ease, background 0.4s ease;
}

/* Checklist table rows that are clickable */
#finaldoc-checklist-body tr[onclick]:hover {
  background: #f0f5ff !important;
}

/* Milestone input */
#finaldoc-milestone-input {
  width: 280px;
}

/* Audit log export button */
#admin-audit-log details summary::-webkit-details-marker { display: none; }

/* Hide Final Document tab in print */
@media print {
  #section-finaldoc { display: none !important; }
}

/* ── Annexure print references — hidden on screen, shown in print ── */

/* Field-level print ref: right-aligned, small, next to the field */
.annex-print-ref {
  display: none; /* hidden on screen */
}

/* Section-level print ref (doc-required box sections) */
.annex-section-print-ref {
  display: none; /* hidden on screen */
}

/* Screen-only elements: hidden in print */
@media print {
  .annex-screen-only      { display: none !important; }
  .annex-field-badge-list { display: block !important; } /* container still shows for print ref */
  .annex-field-icon       { display: none !important; }
  .annex-hover-btn        { display: none !important; }

  /* Section-level standalone paperclips: hide interactive elements, show only print ref */
  .annex-section-clip {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 2px 0 !important;
  }
  .annex-clip-btn         { display: none !important; }
  .annex-clip-label       { display: none !important; }
  .annex-clip-status      { display: none !important; }
  /* The .annex-clip-badge container shows — it holds the .annex-print-ref */

  /* Field-level print ref */
  .annex-print-ref {
    display: block;
    text-align: right;
    font-size: 11px;
    font-style: italic;
    color: #333;
    margin-top: 2px;
  }

  /* Section-level print ref — right-aligned after doc-required block */
  .annex-section-print-ref {
    display: block;
    text-align: right;
    font-size: 11px;
    font-style: italic;
    color: #333;
    margin-top: 4px;
    margin-bottom: 8px;
  }
}

/* Table row annexure button — shown on row hover */
.annex-col-header {
  background: #1a3a5c;
  width: 28px;
}

.annex-row-cell {
  width: 28px;
}

.annex-row-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 1px 3px;
  opacity: 0.5;
  transition: opacity 0.15s;
}

tr:hover .annex-row-btn {
  display: inline-block;
}

.annex-row-btn:hover {
  opacity: 1;
}

/* Print: row annexure ref — shown in print, hidden on screen */
.annex-row-print-ref {
  display: none;
  font-size: 10px;
  font-style: italic;
  color: #333;
  white-space: nowrap;
}

@media print {
  .annex-col-header { display: none !important; }
  .annex-row-btn    { display: none !important; }
  .annex-row-print-ref {
    display: inline;
  }
  /* Only show the annex-row-cell when it has content */
  .annex-row-cell:not(:empty) {
    font-size: 10px;
    font-style: italic;
    text-align: right;
    padding: 2px 4px;
  }
}

/* General hover "+ Annexure" button — appears on hover/focus */
.annex-hover-btn {
  display: none;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  border: 1px dashed #1a3a5c;
  border-radius: 3px;
  background: #fff;
  color: #1a3a5c;
  cursor: pointer;
  vertical-align: middle;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.annex-hover-btn:hover,
.annex-hover-btn--visible {
  display: inline-block;
  opacity: 1;
  background: #f0f4f8;
}
/* Show on parent form-group hover */
.form-group:hover .annex-hover-btn {
  display: inline-block;
}

/* Drag-and-drop highlight */
.annex-master-row.annex-drag-over {
  background: #e8f0fe;
  outline: 2px dashed #1a3a5c;
}

.annex-drag-handle {
  cursor: grab;
}

.annex-drag-handle:active {
  cursor: grabbing;
}

/* Hide annexure upload zones, badges and modals in print */
@media print {
  .annex-upload-zone { display: none !important; }
  .annex-section-badge { display: none !important; }
  #annex-desc-modal,
  #annex-cite-modal { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   SPRINT 5 — MODE SELECTOR (Litigation / Mediation)
   ═══════════════════════════════════════════════════ */

/* ── Mode landing page cards ── */
.mode-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(184,147,90,0.25);
  border-radius: 4px;
  padding: 32px 28px;
  width: 280px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.mode-card:hover, .mode-card:focus {
  border-color: #B8935A;
  background: rgba(184,147,90,0.08);
  transform: translateY(-2px);
  outline: none;
}
.mode-card-icon {
  font-size: 28px;
  color: #B8935A;
  margin-bottom: 12px;
}
.mode-card-title {
  font-family: Georgia, 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px 0;
}
.mode-card-for {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin: 0 0 16px 0;
}
.mode-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.mode-card-features li {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.mode-card-features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #B8935A;
  font-size: 0.75rem;
}
.mode-card-price {
  font-size: 0.85rem;
  font-weight: 600;
  color: #B8935A;
  padding-top: 12px;
  border-top: 1px solid rgba(184,147,90,0.15);
}
.mode-coming-soon-tag {
  font-size: 0.65rem;
  background: rgba(184,147,90,0.2);
  color: #B8935A;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Top bar mode indicator ── */
.topbar-mode-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.03em;
}
.topbar-mode-change {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  margin-left: 6px;
  cursor: pointer;
}
.topbar-mode-change:hover {
  color: rgba(255,255,255,0.6);
}

/* ── Sidebar Coming Soon items ── */
.nav-coming-soon {
  color: rgba(255,255,255,0.25) !important;
  cursor: default !important;
  pointer-events: none;
  font-style: italic;
}
.coming-soon-badge {
  font-size: 9px;
  background: rgba(184,147,90,0.2);
  color: #B8935A;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
  font-style: normal;
}

/* ── Mode visibility classes ──
   These are toggled by applyWizardMode() in app.js.
   In Mediation mode: elements with .mediation-hide are hidden.
   In Litigation mode: elements with .litigation-hide are hidden.
   The body gets class .mode-mediation or .mode-litigation. */
body.mode-mediation .mediation-hide { display: none !important; }
body.mode-litigation .litigation-hide { display: none !important; }

/* ── Print: also hide mode-hidden sections ── */
@media print {
  body.mode-mediation .mediation-hide { display: none !important; }
  body.mode-mediation #section-cover,
  body.mode-mediation #section-other,
  body.mode-mediation #section-oath,
  body.mode-mediation #section-annexures { display: none !important; }
  /* Hide mode landing page and trial gate in print */
  #mode-landing, #trial-gate { display: none !important; }
}

/* ═══════════════════════════════════════════════
   SPRINT 5b — MATTER MANAGEMENT (Mediation)
   ═══════════════════════════════════════════════ */

/* ── Matter list rows ── */
.matter-list-row {
  display: grid;
  grid-template-columns: 90px 1fr 130px 110px 110px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s;
  align-items: center;
}
.matter-list-row:hover {
  background: rgba(184,147,90,0.07);
}
.matter-list-id {
  font-size: 0.8rem;
  font-weight: 700;
  color: #B8935A;
  letter-spacing: 0.04em;
}
.matter-list-name {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}
.matter-list-ref {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}
.matter-list-date {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}
.matter-list-status {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Party cards on the dashboard ── */
.matter-party-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(184,147,90,0.2);
  border-radius: 4px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.matter-party-card:hover {
  border-color: rgba(184,147,90,0.5);
  background: rgba(184,147,90,0.05);
}
.matter-party-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #B8935A;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.matter-party-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.matter-party-card-id {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  font-family: monospace;
  letter-spacing: 0.05em;
}
.matter-party-card-btn {
  margin-top: 12px;
  background: #B8935A;
  color: #0B1D33;
  border: none;
  padding: 10px 18px;
  border-radius: 3px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
}
.matter-party-card-btn:hover {
  background: #c9a46a;
}

/* ── Privacy lock icon — instant CSS tooltip (replaces slow native title) ── */
.matter-privacy-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  font-size: 0.75rem;
  margin-left: 4px;
  opacity: 0.65;
  vertical-align: middle;
}
.matter-privacy-tooltip:hover {
  opacity: 1;
}
.matter-privacy-tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: 260px;
  background: #1a3a5c;
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 400;
  border-radius: 4px;
  padding: 10px 13px 12px;
  position: absolute;
  z-index: 200;
  /* Position below the icon so mouse travels down into the tooltip naturally */
  top: calc(100% + 4px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  border: 1px solid rgba(184,147,90,0.2);
  transition: opacity 0.1s ease;
  pointer-events: none;
}
/* Invisible bridge from icon down to tooltip box — prevents hover gap */
.matter-privacy-tooltip-text::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.matter-privacy-tooltip:hover .matter-privacy-tooltip-text,
.matter-privacy-tooltip-text:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* ── Party context bar — shown inside a mediation party's FDF ── */
#party-context-bar {
  width: 100%;
  z-index: 100;
  background: #0d2640;
  border-bottom: 2px solid #B8935A;
  padding: 0;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  min-height: 48px;
  flex-shrink: 0;
}
.party-ctx-all-matters {
  background: #B8935A;
  color: #0B1D33;
  border: none;
  padding: 0 22px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.03em;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background 0.15s;
  flex-shrink: 0;
}
.party-ctx-all-matters:hover {
  background: #c9a46a;
}
.party-ctx-divider {
  width: 1px;
  background: rgba(184,147,90,0.3);
  flex-shrink: 0;
}
.party-ctx-info {
  flex: 1;
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.party-ctx-matter-name {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.party-ctx-current {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
}
.party-ctx-current strong {
  color: #B8935A;
}
.party-ctx-switch {
  background: transparent;
  color: #B8935A;
  border: none;
  border-left: 1px solid rgba(184,147,90,0.3);
  padding: 0 22px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.party-ctx-switch:hover {
  background: rgba(184,147,90,0.1);
  color: #c9a46a;
}
@media print {
  #party-context-bar { display: none !important; }
}

/* ── Print: hide matter screens ── */
@media print {
  #matter-list-screen,
  #matter-create-screen,
  #matter-dashboard-screen { display: none !important; }
  #sidebar-back-to-matter   { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════
   PRINT LAYOUT — FDF WIZARD v1 — Sprint 4 Item 39
   ALL rules below are @media print only.
   Screen UI is completely unaffected.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   PRINT LAYOUT — FDF WIZARD — Consolidated Clean Rewrite
   Based on: 2026 FDF Blank Template plain text spec
   ALL rules below are @media print only.
   Screen UI is completely unaffected.
   ═══════════════════════════════════════════════════════════════════ */

@media print {

  /* ══════════════════════════════════════════════════════════════════
     1. PAGE SETUP
     A4 portrait. Margins match blank template visual.
     Page numbers top-centre as per template.
     ══════════════════════════════════════════════════════════════════ */
  @page {
    size: A4 portrait;
    margin: 23mm 23mm 25mm 23mm;
    @top-center {
      content: counter(page);
      font-family: Arial, sans-serif;
      font-size: 12pt;
      color: #000;
    }
  }

  /* Print-build version stamp — proof the new CSS actually loaded.
     Shows only in Cmd+P preview; hidden on screen. Stripped before the final court FDF. */
  .print-build-stamp {
    display: block !important;
    position: fixed;
    top: 5mm;
    right: 6mm;
    font-family: Arial, sans-serif !important;
    font-size: 6pt !important;
    color: #bbbbbb !important;
    letter-spacing: 0.04em;
    z-index: 99999;
  }
  .print-build-stamp::after {
    content: "PRINT BUILD v23 — 2026-06-04";
  }


  /* ══════════════════════════════════════════════════════════════════
     2. GLOBAL PRINT TYPOGRAPHY
     Match blank template exactly: Arial 10pt, tight line spacing.
     Target body + named elements only — NOT * — so layout rules
     are never overridden by a blanket font-size declaration.
     ══════════════════════════════════════════════════════════════════ */
  body {
    font-family: Arial, sans-serif !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
    color: #000 !important;
    background: transparent !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  p, li, td, th, label, input, textarea, span {
    font-family: Arial, sans-serif !important;
    font-size: 12pt !important;
    color: #000 !important;
    background: transparent !important;
    line-height: 1.5 !important;
  }

  b, strong { font-weight: bold !important; }
  u { text-decoration: underline !important; }
  i, em { font-style: italic !important; }


  /* ══════════════════════════════════════════════════════════════════
     3. LAYOUT — full-width print, no clipping
     ══════════════════════════════════════════════════════════════════ */
  .layout  { display: block !important; overflow: visible !important; height: auto !important; }
  .content { margin: 0 !important; padding: 0 !important; overflow: visible !important; height: auto !important; }

  /* Show ALL fdf-sections — active-section class irrelevant in print */
  .fdf-section { display: block !important; page-break-before: auto; padding: 0 !important; }
  .fdf-section:first-child { page-break-before: avoid; }

  /* Hide all wizard chrome */
  .sidebar, .top-bar, #party-context-bar { display: none !important; }
  .section-nav-bar { display: none !important; }
  #mode-landing, #trial-gate { display: none !important; }

  /* Hide wizard-only sections */
  #section-howtoread,
  #section-financial-details,
  #section-bankstatements,
  #section-annexures,
  #section-finaldoc,
  #section-accrual,
  #section-admin,
  #section-glossary { display: none !important; }

  /* Hide mediation-mode sections */
  body.mode-mediation .mediation-hide { display: none !important; }
  body.mode-mediation #section-cover,
  body.mode-mediation #section-other,
  body.mode-mediation #section-oath,
  body.mode-mediation #section-annexures { display: none !important; }

  /* Hide matter management screens */
  #matter-list-screen,
  #matter-create-screen,
  #matter-dashboard-screen,
  #sidebar-back-to-matter { display: none !important; }


  /* ══════════════════════════════════════════════════════════════════
     4. HIDE ALL WIZARD-ONLY UI ELEMENTS
     Tips, hints, buttons, badges, annexure clips — none in the FDF
     ══════════════════════════════════════════════════════════════════ */
  .blue-box,
  .warning-box,
  .placeholder-box,
  .doc-required,
  .field-hint,
  .section-intro,
  .form-legend,
  .wizard-only,
  .wizard-only-panel,
  .na-btn,
  .na-first-hint,
  .na-stamp,
  .add-row-btn,
  .add-block-btn,
  .remove-block-btn,
  .bank-apply-btn,
  .calc-badge,
  .annex-section-clip,
  .annex-col-header,
  .date-feedback,
  #expenses-download-csv-btn,
  .lodging-incl-cell,
  .lodging-incl-label,
  #mobile-warning { display: none !important; }

  /* N/A sections: restore to full opacity in print */
  .subsection.is-na .fdf-table,
  .subsection.is-na .form-group,
  .subsection.is-na .total-row,
  .subsection.is-na .property-block,
  .subsection.is-na .business-block,
  .subsection.is-na .pension-block,
  .subsection.is-na .employment-block,
  .subsection.is-na .selfemployment-block,
  .subsection.is-na .amount-wrapper { opacity: 1 !important; pointer-events: auto !important; }


  /* ══════════════════════════════════════════════════════════════════
     5. SUBSECTIONS — strip all wizard styling
     ══════════════════════════════════════════════════════════════════ */
  .subsection {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 8pt !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
  }

  .subsection-heading-row {
    display: block !important;
    border-bottom: none !important;
    margin-bottom: 2pt !important;
    padding-bottom: 0 !important;
  }

  .subsection-heading,
  h2.subsection-heading {
    font-size: 12pt !important;
    font-weight: bold !important;
    color: #000 !important;
    text-transform: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 2pt !important;
    line-height: 1.5 !important;
  }

  h3.subsection-subheading {
    font-size: 12pt !important;
    font-weight: bold !important;
    color: #000 !important;
    margin: 4pt 0 2pt !important;
  }


  /* ══════════════════════════════════════════════════════════════════
     6. SECTION HEADINGS (h1)
     Template: bold, uppercase, same size as body but heavier weight.
     "1  GENERAL INFORMATION" — caps, bold, no extra size.
     ══════════════════════════════════════════════════════════════════ */
  #section-cover h1,
  #section-general h1,
  #section-assets h1,
  #section-liabilities h1,
  #section-income h1,
  #section-summaries h1,
  #section-expenses h1,
  #section-other h1,
  #section-oath h1 {
    font-size: 13pt !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: #000 !important;
    margin-bottom: 6pt !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.5 !important;
  }


  /* ══════════════════════════════════════════════════════════════════
     7. FIELD INPUTS — strip all wizard styling
     Show as underline only (border-bottom), no box, no background.
     ══════════════════════════════════════════════════════════════════ */
  .field-input {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
    box-shadow: none !important;
  }

  /* Auto-calculated (readonly) fields — same treatment */
  .readonly-calc {
    background: transparent !important;
    color: #000 !important;
    font-weight: normal !important;
    border-color: #000 !important;
  }


  /* ══════════════════════════════════════════════════════════════════
     8. TABLES — keep borders, strip colours
     ══════════════════════════════════════════════════════════════════ */
  .fdf-table { width: 100%; border-collapse: collapse; margin-top: 16pt !important; margin-bottom: 16pt !important; }
  .fdf-table td, .fdf-table th { border: 1px solid #999 !important; }
  .fdf-table th {
    background: transparent !important;
    color: #000 !important;
    font-weight: bold !important;
    font-size: 11pt !important;
    text-transform: uppercase !important;
  }
  .fdf-table td.annex-row-cell { border: none !important; background: transparent !important; padding: 0 !important; }
  .fdf-table .row-num { background: transparent !important; }

  .table-input {
    border: none !important;
    background: transparent !important;
    padding: 2pt 4pt !important;
    width: 100% !important;
  }


  /* ══════════════════════════════════════════════════════════════════
     9. TOTAL ROWS — strip wizard styling, match template format
     Template: plain text, no box, tight spacing.
     ══════════════════════════════════════════════════════════════════ */
  .total-row {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 3pt 0 !important;
    margin-top: 4pt !important;
    margin-bottom: 6pt !important;
  }

  .total-row .total-label {
    display: inline !important;
    font-weight: bold !important;
  }

  .total-row .amount-wrapper {
    display: inline-flex !important;
    align-items: baseline !important;
    width: auto !important;
    max-width: none !important;
  }

  .currency-prefix {
    background: transparent !important;
    border: none !important;
    font-weight: bold !important;
    padding: 0 2pt 0 0 !important;
    flex-shrink: 0 !important;
  }

  .total-row .total-input {
    width: 100pt !important;
    flex: none !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }

  /* Wizard screen-only label/br inside total-row — hide in print
     (the total-row-amount-label is show/hide toggled by screen CSS) */
  .total-row-amount-label { display: none !important; }
  .total-row br { display: none !important; }


  /* ══════════════════════════════════════════════════════════════════
     10. AMOUNT WRAPPERS (in form-groups, not total rows)
     R prefix + value stay together.
     ══════════════════════════════════════════════════════════════════ */
  .amount-wrapper {
    display: inline-flex !important;
    align-items: baseline !important;
    max-width: none !important;
  }

  .amount-input {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
    width: 100pt !important;
    flex: none !important;
  }


  /* ══════════════════════════════════════════════════════════════════
     11. PROPERTY / BUSINESS / PENSION / EMPLOYMENT BLOCKS
     Strip all wizard card styling.
     ══════════════════════════════════════════════════════════════════ */
  .property-block,
  .business-block,
  .pension-block,
  .employment-block,
  .selfemployment-block {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 6pt !important;
  }

  .property-block-header,
  .business-block-header { display: none !important; }
  /* Pension headers SHOW in print — the Master prints "PENSION INTEREST n" headings */
  .pension-block-header {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    margin: 8pt 0 2pt 0 !important;
  }
  .pension-block-header .remove-block-btn { display: none !important; }
  .pension-block-label { font-size: 12pt !important; color: #000 !important; }

  .employment-block-header,
  .selfemployment-block-header { display: none !important; }

  /* Summary panels — hide (wizard-only calculated display) */
  .summary-panel { display: none !important; }


  /* ══════════════════════════════════════════════════════════════════
     12. PREVENT ORPHANED HEADINGS AND MID-ROW BREAKS
     ══════════════════════════════════════════════════════════════════ */
  h1, h2, h3 { page-break-after: avoid !important; }
  tr { page-break-inside: avoid !important; }


  /* ══════════════════════════════════════════════════════════════════
     ── COVER PAGE (page 1) ──────────────────────────────────────────
     Template: centred header, case no right, party boxes, TO THE JUDGE,
     Party making disclosure line, obligations bullets, two bordered boxes,
     party name underlines at bottom.
     ══════════════════════════════════════════════════════════════════ */

  /* Hide wizard-only warning box */
  #section-cover .warning-box { display: none !important; }

  /* Cover title — centred */
  #section-cover > div[style*="text-align:center"] {
    text-align: center !important;
    margin-bottom: 8pt !important;
  }

  /* Party name bordered boxes — ⅓ width each, pinned to outer margins, border kept */
  #section-cover > div:has(#cover-applicant-name) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 0 !important;
    margin-bottom: 8pt !important;
  }
  #section-cover > div:has(#cover-applicant-name) > div {
    flex: 0 0 33% !important;
    max-width: 33% !important;
    padding: 4pt 6pt !important;
    border: 1px solid #000 !important;
    line-height: 1.5 !important;
  }
  #section-cover > div[style*="grid-template-columns"] > div .field-input {
    margin-bottom: 2pt !important;
    padding: 0 !important;
  }
  #section-cover > div[style*="grid-template-columns"] > div p {
    font-size: 11pt !important;
    margin: 0 !important;
  }

  /* Party making financial disclosure — inline */
  #section-cover .form-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6pt !important;
    margin-bottom: 6pt !important;
  }
  #section-cover .form-group .field-label {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    font-weight: bold !important;
  }
  #section-cover .form-group .field-input {
    flex: 1 !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }

  /* Perjury and legal advice bordered boxes */
  #section-cover div[style*="border:1px solid #555"] {
    border: 1px solid #000 !important;
    padding: 6pt 10pt !important;
    margin-bottom: 8pt !important;
  }
  #section-cover div[style*="border:1px solid #555"] p {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Print-break spans for controlled line breaks in cover text */
  .print-break::after { content: '\A'; white-space: pre; }


  /* ══════════════════════════════════════════════════════════════════
     ── SECTION 1 — GENERAL INFORMATION (page 2) ────────────────────
     Template: every field on one line, label:__________
     1.7 regime box on its own line below the label.
     1.12 description inline with number, no separate heading.
     ══════════════════════════════════════════════════════════════════ */

  /* All form-groups in section 1: flex row, label + input on same line */
  #section-general .form-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6pt !important;
    margin-bottom: 4pt !important;
    flex-wrap: nowrap !important;
  }

  #section-general .form-group .field-label {
    display: inline !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Text inputs — inline, extend to fill remaining width */
  #section-general .form-group > .field-input:not(textarea) {
    display: inline !important;
    flex: 1 !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Override field-narrow / field-medium — all extend to margin */
  #section-general .field-narrow,
  #section-general .field-medium {
    max-width: none !important;
    width: auto !important;
    flex: 1 !important;
  }

  /* Hide regime-other input — same specificity as field-input rule above */
  #section-general .form-group > input.regime-other-input,
  #section-general .form-group > .field-input.regime-other-input {
    display: none !important;
    flex: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }

  /* 1.3 Residential Address textarea — inline with label */
  #section-general .form-group--address {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  #section-general .form-group--address .field-label {
    white-space: nowrap !important;
    padding-top: 1pt !important;
    flex-shrink: 0 !important;
  }
  #section-general .form-group--address #address {
    flex: 1 !important;
    display: inline-block !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    resize: none !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: auto !important;
    white-space: pre-wrap !important;
    padding: 0 !important;
  }

  /* 1.6 Marriage type — radio options on one line */
  #section-general .radio-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 12pt !important;
    flex-wrap: nowrap !important;
  }
  .radio-option input[type="radio"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #annex-marriage-cert { display: none !important; }

  /* 1.7 Matrimonial Property Regime — label then box below on own line */
  #section-general .form-group:has(.radio-group--stacked) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3pt !important;
  }

  #section-general .radio-group--stacked {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4pt !important;
    border: 1px solid #000 !important;
    padding: 4pt !important;
    width: 100% !important;
  }

  #section-general .radio-group--stacked .radio-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    font-size: 11pt !important;
    gap: 3pt !important;
    border-right: 1px solid #aaa !important;
    padding-right: 3pt !important;
    line-height: 1.2 !important;
  }

  #section-general .radio-group--stacked .radio-option:last-child {
    border-right: none !important;
  }

  /* Hide regime-other input when empty */
  .regime-other-input { display: none !important; }
  input.regime-other-input[value]:not([value=""]) {
    display: block !important;
    font-size: 12pt !important;
  }

  /* 1.11 Children table — gap above, merge DOB columns */
  #section-general .subsection:first-of-type {
    margin-top: 18pt !important;
  }

  /* Gap between 1.11 and 1.12 */
  #section-general .subsection:first-of-type + .subsection {
    margin-top: 8pt !important;
  }

  /* 1.11 DOB column merge — hide MM and YYYY columns */
  #children-table th.col-dob-mm,
  #children-table th.col-dob-yyyy,
  #children-table td.col-dob-mm,
  #children-table td.col-dob-yyyy {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #children-table th.col-dob-dd {
    width: 100pt !important;
    text-align: left !important;
    font-size: 0 !important;
  }
  #children-table th.col-dob-dd::after {
    content: "DATE OF BIRTH (DD / MM / YYYY)";
    font-size: 11pt !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
  }
  #children-table td.col-dob-dd {
    width: 100pt !important;
  }

  /* 1.12 — hide "Other court cases" heading, show field-hint as the heading
     "1.12  Details of any other pending..." inline as per template */
  #subsection-1-12 .subsection-heading { display: none !important; }
  #subsection-1-12 .field-hint-1-12 {
    display: block !important;
    font-size: 12pt !important;
    font-weight: bold !important;
    font-style: normal !important;
    color: #000 !important;
    margin-bottom: 4pt !important;
  }
  .print-only-1-12-num { display: inline !important; }

  /* Show 1.12 field-hint only (field-hint is globally hidden above) */
  #section-general .subsection .field-hint {
    display: block !important;
    font-size: 12pt !important;
    font-style: normal !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-bottom: 4pt !important;
  }


  /* ══════════════════════════════════════════════════════════════════
     ── SECTION 2 — ASSETS ──────────────────────────────────────────
     Template: tight inline fields, doc-required boxes visible,
     headings inline with descriptions, total rows as plain text.
     ══════════════════════════════════════════════════════════════════ */

  /* Assets h1 — two-line: "2. FINANCIAL DETAILS" / "CAPITAL – ASSETS" */
  /* The <br> in HTML handles the line break. text-transform handles caps. */

  /* Section financial-details landing: hide in print */
  #section-financial-details { display: none !important; }

  /* Hide the "no assets" wizard-only helper */
  #section-assets .wizard-only { display: none !important; }

  /* Show doc-required boxes — these ARE part of the official FDF */
  #section-assets .doc-required {
    display: block !important;
    font-size: 11pt !important;
    font-style: italic !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    background: transparent !important;
    padding: 4pt 8pt !important;
    margin-top: 4pt !important;
    margin-bottom: 6pt !important;
    border-radius: 0 !important;
  }

  /* Show field-hints in assets (bold description paragraphs) */
  #section-assets .subsection .field-hint {
    display: inline !important;
    font-size: 12pt !important;
    font-style: normal !important;
    font-weight: bold !important;
    color: #000 !important;
    margin-bottom: 4pt !important;
  }

  /* Subsection heading + field-hint inline as per template:
     "2.1 FAMILY HOME: Complete this section..." */
  #section-assets .subsection-heading-row {
    display: block !important;
    margin-bottom: 0 !important;
  }
  #section-assets .subsection-heading {
    display: inline !important;
    text-transform: uppercase !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  #section-assets .subsection-heading::after { content: " "; }

  /* Assets form-groups — label + input inline */
  #section-assets .form-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6pt !important;
    margin-bottom: 4pt !important;
    flex-wrap: nowrap !important;
  }

  #section-assets .form-group .field-label {
    display: inline !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }

  #section-assets .form-group > .field-input:not(textarea) {
    display: inline !important;
    flex: 1 !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }

  /* Amount wrapper in form fields — R and value stay together */
  #section-assets .form-group .amount-wrapper {
    display: inline-flex !important;
    flex: none !important;
    align-items: baseline !important;
  }
  #section-assets .form-group .currency-prefix {
    background: transparent !important;
    border: none !important;
    padding: 0 2pt 0 0 !important;
    flex-shrink: 0 !important;
    font-weight: bold !important;
  }
  #section-assets .form-group .amount-input {
    width: 100pt !important;
    flex: none !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }

  /* Mortgage bank/account and who-pays — input below label */
  #section-assets .form-group:has(#fh-bond-bank),
  #section-assets .form-group:has(#fh-bond-who),
  #section-assets .form-group:has(#op-bond-bank),
  #section-assets .form-group:has(#op-bond-who) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2pt !important;
  }
  #section-assets .form-group:has(#fh-bond-bank) > .field-input,
  #section-assets .form-group:has(#op-bond-bank) > .field-input {
    width: 100% !important;
    flex: unset !important;
  }

  /* Who pays — two inputs on one line */
  #section-assets .form-group:has(#fh-bond-who) > div,
  #section-assets .form-group:has(#op-bond-who) > div {
    display: flex !important;
    flex-direction: row !important;
    gap: 12pt !important;
    width: auto !important;
  }
  #section-assets .form-group:has(#fh-bond-who) input,
  #section-assets .form-group:has(#op-bond-who) input {
    width: 140pt !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }

  /* Hide wizard-only fields (share %, equity calc, interest calc) */
  #section-assets .form-group:has(#fh-share),
  #section-assets .form-group:has(#op-share),
  #section-assets .form-group:has(#fh-equity),
  #section-assets .form-group:has(#op-equity),
  #section-assets .form-group:has(#op-interest) { display: none !important; }

  /* TOTAL (A) and TOTAL (B) rows — two-line format matching template:
     Line 1: "TOTAL value of your interest in the family home:"
     Line 2: "TOTAL (A) Amount R:" + short input line              */
  #section-assets .total-row {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 3pt 0 !important;
    margin-top: 6pt !important;
    margin-bottom: 10pt !important;
  }
  #section-assets .total-row .total-label {
    display: inline !important;
    font-weight: bold !important;
    font-size: 12pt !important;
    margin-bottom: 2pt !important;
  }
  /* (A)/(B)/(C): label already ends "Amount R:", so hide the duplicate R prefix in print */
  #section-assets .total-row:has(#total-a) .currency-prefix,
  #section-assets .total-row:has(#total-b) .currency-prefix,
  #section-assets .total-row:has(#total-c) .currency-prefix { display: none !important; }
  #section-assets .total-row .total-row-amount-label {
    display: inline !important;
    font-weight: bold !important;
  }
  #section-assets .total-row .total-label br { display: block !important; }
  #section-assets .total-row .amount-wrapper {
    display: inline-flex !important;
    width: auto !important;
    align-items: baseline !important;
  }
  #section-assets .total-row .currency-prefix {
    display: inline !important;
    font-weight: bold !important;
    background: transparent !important;
    border: none !important;
    padding: 0 2pt 0 0 !important;
  }
  #section-assets .total-row .total-input {
    width: 100pt !important;
    flex: none !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }

  /* Inline total rows (C1, C2, C3 etc.) — single line format:
     "TOTAL value of your interest in ALL accounts (C1) Amount R: ___" */
  #section-assets .total-row--inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4pt !important;
    border-top: 1px solid #000 !important;
    background: transparent !important;
    padding: 3pt 0 !important;
    margin-top: 4pt !important;
    margin-bottom: 8pt !important;
  }
  #section-assets .total-row--inline .total-label {
    display: inline !important;
    font-weight: bold !important;
    flex-shrink: 1 !important;
  }
  #section-assets .total-row--inline .currency-prefix { display: none !important; }
  #section-assets .total-row--inline .amount-wrapper {
    display: inline-flex !important;
    flex: none !important;
    width: auto !important;
  }
  #section-assets .total-row--inline .total-input {
    width: 100pt !important;
    flex: none !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }

  /* Page breaks — match template page structure */
  /* 2.1 and 2.2 on page 3 together, no break between them */
  #section-assets .subsection {
    /* page-break-before: avoid REMOVED (v18) — it was overriding the forced breaks
       on 2.3/2.7/2.9 in the print engine. Forced breaks below now win unopposed. */
    page-break-inside: avoid !important;
  }
  /* ═══════════════════════════════════════════════════════════════════
     MASTER PAGE-BREAK MAP (v17) — sections flow continuously; these force
     each page start to match the blank FDF template page-for-page.
     ═══════════════════════════════════════════════════════════════════ */
  /* Section-level page starts (P2, P3, P14, P19; P15 expenses handled below) */
  #section-general,
  #section-assets,
  #section-summaries,
  #section-oath {
    page-break-before: always !important; break-before: page !important;
  }
  /* Assets subsection starts (P4,5,6,7) — scoped to beat the .subsection avoid above */
  #section-assets #brk-2-3,
  #section-assets #subsection-2-5,
  #section-assets #brk-2-7,
  #section-assets #brk-2-9 {
    page-break-before: always !important; break-before: page !important;
    page-break-inside: auto !important;
  }
  /* Assets mid-content starts (P8 Pension Interest 1, P9 the 2.11 other-assets table) */
  #section-assets #brk-pension-1,
  #section-assets #brk-2-11-table {
    page-break-before: always !important; break-before: page !important;
    page-break-inside: auto !important;
  }
  /* Liabilities / income / other mid-content starts (P10, P11, P12, P13, P18) */
  #brk-2-13-include,
  #brk-2-14-bonuses,
  #brk-2-15-drawings,
  #brk-2-17,
  #brk-4-3 {
    page-break-before: always !important; break-before: page !important;
  }
  /* Expense-table mid-table starts (P16 Parking, P17 Reading Material) */
  #expenses-table .brk-expense-page {
    page-break-before: always !important; break-before: page !important;
  }

  /* Hide summary panels and add-block buttons */
  #section-assets .summary-panel { display: none !important; }
  #section-assets .add-block-btn { display: none !important; }

  /* Spacing between doc-required and content */
  #section-assets .doc-required { margin-top: 4pt !important; margin-bottom: 6pt !important; }


  /* ══════════════════════════════════════════════════════════════════
     ── SECTION 2 — INCOME 2.14 & 2.15 (pages 10–12) ────────────────
     Word-style 2-column table. MERGED TOP (heading + instruction +
     Documentation box, full width), then two columns: label LEFT
     (wraps), input line RIGHT, aligned. Totals are special — see end.
     Only 2.14 & 2.15 use .form-group; 2.16–2.18 are tables (untouched).
     Left-column width (currently 66%) is the calibration knob for the
     wrap points (IRP5: / less / contributions) / occasional / employer). (v20)
     ══════════════════════════════════════════════════════════════════ */

  /* MERGED TOP ROW — show instruction line + Documentation box, but only
     for 2.14 & 2.15 (the only Income subsections that contain a doc box). */
  #section-income .doc-required {
    display: block !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #000 !important;
    padding: 4pt 6pt !important;
    margin: 4pt 0 6pt 0 !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
  }
  #section-income .subsection:has(.doc-required) .field-hint {
    display: block !important;
    font-weight: bold !important;
    font-size: 12pt !important;
    color: #000 !important;
    margin: 2pt 0 4pt 0 !important;
  }

  /* "Employer 1" / "Business 1" sub-headers are not in the Master — hide */
  #section-income .employment-block-header,
  #section-income .selfemployment-block-header { display: none !important; }

  /* ── THE TWO COLUMNS (field rows) ── */
  #section-income .form-group {
    display: grid !important;
    grid-template-columns: 66% 1fr !important;
    column-gap: 10pt !important;
    align-items: end !important;
    margin-bottom: 5pt !important;
  }
  #section-income .form-group .field-label {
    display: block !important;
    font-weight: bold !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
  }
  /* Right column — text inputs as an underline filling the column */
  #section-income .form-group > .field-input:not(textarea) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }
  #section-income .field-narrow,
  #section-income .field-medium { max-width: none !important; width: 100% !important; }

  /* Right column — textareas (Address, bonuses, benefits) as underline */
  #section-income .form-group > textarea.field-input,
  #section-income .form-group > .field-textarea {
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    resize: none !important;
    overflow: hidden !important;
    min-height: 16pt !important;
    height: auto !important;
    padding: 0 2pt !important;
    white-space: pre-wrap !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
  }

  /* Right column — amount fields (R prefix + value) */
  #section-income .form-group .amount-wrapper {
    display: flex !important;
    align-items: baseline !important;
    width: 100% !important;
    max-width: none !important;
  }
  #section-income .form-group .currency-prefix {
    display: inline !important;
    font-weight: bold !important;
    background: transparent !important;
    border: none !important;
    padding: 0 2pt 0 0 !important;
    flex-shrink: 0 !important;
  }
  #section-income .form-group .amount-input {
    flex: 1 1 auto !important;
    width: auto !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }

  /* ── TOTALS (special) ──
     Both: "Amount R:" sits on its OWN line, with the input inline after it
     (the label already says "...Amount R:", so the duplicate R prefix is
     hidden). 2.14 = description confined to the left column; 2.15 =
     description merged across the full width. */
  #section-income .total-row .total-row-amount-label {
    display: inline !important;
    font-weight: bold !important;
  }
  #section-income .total-row .total-label br { display: block !important; }
  #section-income .total-row .amount-wrapper {
    display: inline-flex !important;
    width: auto !important;
    align-items: baseline !important;
  }
  #section-income .total-row:has(#total-h) .currency-prefix,
  #section-income .total-row:has(#total-i) .currency-prefix { display: none !important; }
  #section-income .total-row .total-input {
    width: 120pt !important;
    flex: none !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2pt !important;
  }
  /* 2.14 TOTAL (H): description wraps inside the LEFT column */
  #section-income .total-row:has(#total-h) .total-desc {
    display: inline-block !important;
    max-width: 66% !important;
    font-weight: bold !important;
  }
  /* 2.15 TOTAL (I): description merged across the full width */
  #section-income .total-row:has(#total-i) .total-desc {
    display: inline-block !important;
    max-width: 100% !important;
    font-weight: bold !important;
  }

  /* Let subsections flow; the forced page breaks (bonuses/drawings/2.17) still win */
  #section-income .subsection { page-break-inside: auto !important; }


  /* ══════════════════════════════════════════════════════════════════
     ── SECTION 3 — MAINTENANCE (pages 15–17) ───────────────────────
     Template: instruction paragraph then table. Tight layout.
     ══════════════════════════════════════════════════════════════════ */
  #section-expenses .section-intro {
    display: block !important;
    font-style: normal !important;
    font-size: 12pt !important;
    color: #000 !important;
    margin-bottom: 6pt !important;
  }

  #section-expenses { page-break-before: always !important; break-before: page !important; }
  #section-expenses .subsection {
    margin-top: 0 !important;
    page-break-inside: auto !important;   /* v21: let the 3.1 table flow onto page 15 instead of being shoved whole to p16 */
  }

  /* Hide CSV button and Self% column */
  #expenses-download-csv-btn { display: none !important; }
  /* Self% column hidden in print — collapse to ZERO WIDTH consistently (the
     cells stay in place, NOT display:none) so the column count stays 5 across
     thead, tbody and the full-width group-header colspans, keeping every row's
     edges aligned. (v23 — fixes the header overlap from the v22 mismatch.) */
  #expenses-table col.col-expense-pct { width: 0 !important; }
  #expenses-table th:nth-child(3),
  #expenses-table td:nth-child(3) {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
  }
  .expense-pct-input { display: none !important; }

  /* Expenses table — match template column headers */
  #expenses-table th {
    background: transparent !important;
    color: #000 !important;
    font-size: 11pt !important;
    border: 1px solid #000 !important;
    text-transform: uppercase !important;
  }

  .expense-group-header td {
    background: transparent !important;
    color: #000 !important;
    font-weight: bold !important;
    border-top: 1px solid #000 !important;
    border-bottom: none !important;
    padding: 2pt 4pt !important;
  }

  #expenses-table td {
    border: 1px solid #999 !important;
    padding: 1pt 3pt 0 3pt !important;   /* v22: bottom padding 0 to claw back row height */
    font-size: 11pt !important;
  }
  /* v22: trim the number inputs' vertical padding (5px screen default) — not the line-height */
  #expenses-table .expense-calc-input,
  #expenses-table .expense-total-input {
    padding-top: 1.5pt !important;
    padding-bottom: 1.5pt !important;
  }

  .expense-total-row td {
    background: transparent !important;
    color: #000 !important;
    font-weight: bold !important;
    border-top: 2px solid #000 !important;
  }

  /* Lodging-included column — hide in print */
  .fdf-table td.lodging-incl-cell,
  td.lodging-incl-cell { border: none !important; background: transparent !important; padding: 0 !important; }
  #expenses-table thead th:last-child { border: none !important; background: transparent !important; }
  .lodging-incl-cb { display: none !important; }
  .lodging-incl-label { display: none !important; }


  /* ══════════════════════════════════════════════════════════════════
     ── SECTION 4 — OTHER INFORMATION (page 18) ─────────────────────
     Template: plain text questions, open text boxes for answers.
     ══════════════════════════════════════════════════════════════════ */
  #section-other .field-textarea,
  #section-other .field-textarea--large,
  #section-other textarea.field-input {
    display: block !important;
    width: 100% !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    resize: none !important;
    overflow: hidden !important;
    min-height: 104pt !important;   /* v22: ~4 text rows taller; text stays at top, space below */
    height: auto !important;
    padding: 4pt 6pt !important;
    font-size: 12pt !important;
    white-space: pre-wrap !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
  }

  #section-other .field-hint {
    display: block !important;
    font-size: 12pt !important;
    color: #000 !important;
    margin-bottom: 3pt !important;
  }

  #section-other .subsection-heading {
    font-size: 12pt !important;
    font-weight: bold !important;
  }


  /* ══════════════════════════════════════════════════════════════════
     ── OATH / AFFIRMATION (page 19) ────────────────────────────────
     Template: plain text, blank lines for signing, commissioner table.
     ══════════════════════════════════════════════════════════════════ */
  #section-oath .blue-box  { display: none !important; }
  #section-oath .warning-box { display: none !important; }
  #section-oath div[style*="background:#fdf0f0"] { display: none !important; }
  #section-oath div[style*="background:#fff3e0"] { display: none !important; }

  .oath-inline-input {
    display: inline !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 4pt !important;
    width: 140pt !important;
  }

  #section-oath .oath-text {
    border: 1px solid #000 !important;
    padding: 10pt 14pt !important;
  }
  /* SIGNED line + Commissioner input lines — short underlines, not full width, no box */
  #section-oath .oath-sig-line,
  #section-oath .oath-input-line {
    border-bottom: 1px solid #000 !important;
    width: 300pt !important;
    max-width: 90% !important;
    height: 0 !important;
  }
  #section-oath .oath-field-label {
    font-size: 11pt !important;
    font-weight: bold !important;
    margin: 8pt 0 2pt 0 !important;
  }
  /* Attorney / Received — the ONLY internal cell outlines; vertical 3-row grid */
  #section-oath .oath-attorney-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10pt !important;
  }
  #section-oath .oath-attorney-table td {
    border: 1px solid #000 !important;
    padding: 8pt 10pt !important;
    font-size: 11pt !important;
    vertical-align: top !important;
  }
  #section-oath .oath-attorney-label { width: 45% !important; font-weight: bold !important; }
  #section-oath .oath-attorney-blank { height: 44pt !important; }


  /* ══════════════════════════════════════════════════════════════════
     ── ADDRESS FIELD ────────────────────────────────────────────────
     ══════════════════════════════════════════════════════════════════ */
  #address {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }


  /* ══════════════════════════════════════════════════════════════════
     ── DATE FEEDBACK ────────────────────────────────────────────────
     ══════════════════════════════════════════════════════════════════ */
  .date-feedback { display: none !important; }

  /* ══════════════════════════════════════════════════════════════════
     ── N/A BUTTON AND STAMP ─────────────────────────────────────────
     ══════════════════════════════════════════════════════════════════ */
  .na-btn { display: none !important; }
  .na-stamp { display: none !important; }

  /* ══════════════════════════════════════════════════════════════════
     ── SUMMARIES (2.19, 2.20) ───────────────────────────────────────
     Strip wizard colour-coding from net worth row.
     ══════════════════════════════════════════════════════════════════ */
  #section-summaries .total-row--highlight {
    background: transparent !important;
    border: none !important;
  }

}
/* ═══ END PRINT CSS — Sprint 4 Item 39 ═══ */

/* Screen: hide the print-break span completely (zero size, no effect) */
.print-break { display: inline; font-size: 0; line-height: 0; }

/* Screen: hide the TOTAL (A/B) "Amount in R:" second-line label — print-only */
.total-row-amount-label { display: none; }
.total-row br { display: none; }

/* Screen: hide the 1.12 number prefix — only shows in print */
.print-only-1-12-num { display: none; }

/* Screen: hide the print-build version stamp — it only appears in Cmd+P preview */
.print-build-stamp { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   PRECEDENT-BASED RULE BOOK — section-rulebook
   ═══════════════════════════════════════════════════════════════════ */

/* Individual entry card */
.rb-entry {
  border: 1px solid #dde3ea;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}

/* Header row: ref code + badge side by side */
.rb-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* C1, C2 ... reference code */
.rb-ref {
  font-size: 11px;
  font-weight: 700;
  color: #6b7a8d;
  background: #f0f4f8;
  border-radius: 3px;
  padding: 2px 6px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Main rule text */
.rb-text {
  font-size: 13px;
  color: #1a3a5c;
  line-height: 1.55;
  margin: 0 0 4px 0;
}

/* Source citation line */
.rb-source {
  font-size: 11px;
  color: #6b7a8d;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

/* "Why this matters" callout box */
.rb-why {
  margin-top: 8px;
  background: #fef9ec;
  border-left: 3px solid #B8935A;
  padding: 8px 10px;
  font-size: 12px;
  color: #4a3000;
  line-height: 1.5;
  border-radius: 0 4px 4px 0;
}

/* Vertical legend list inside the intro box */
.rb-legend {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
}
.rb-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #1a3a5c;
  padding: 3px 0;
  line-height: 1.4;
}

/* Version stamp — prominent, sits above the intro box */
.rb-version-stamp {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a3a5c;
  color: #fff;
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 14px;
}
.rb-version-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B8935A;
  white-space: nowrap;
}
.rb-version-date {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* Status badges */
.rb-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.rb-badge--verified  { background: #e6f4ea; color: #1e6b35; }
.rb-badge--form      { background: #e8f0fe; color: #1a3a9c; }
.rb-badge--convention{ background: #f1f3f4; color: #4a4a5a; }
.rb-badge--open      { background: #fff3e0; color: #8a4a00; }
.rb-badge--wizard    { background: #f3e8fd; color: #5a1a8a; }

/* Hide the entire rulebook when printing — it is a reference tool, not part of the FDF */
@media print {
  #section-rulebook { display: none !important; }
}
/* ═══ END RULE BOOK CSS ═══ */