/* Estate Plan Studio — web frontend styles.
   Palette and fonts match the desktop app's actual on-screen UI
   (renderer/estate-plan-studio.html), not the separate letterhead branding
   used for generated Word documents. */

:root {
  --bg: #FAF8F2;
  --surface: #FFFFFF;
  --surface-2: #F3F0E7;
  --ink: #22271F;
  --muted: #6B7568;
  --line: #E3DFD1;
  --primary: #1F4D3A;
  --primary-light: #3D7A5C;
  --primary-wash: #EAF1EC;
  --accent: #B98A3E;
  --accent-wash: #F7EEDD;
  --danger: #A3402F;
  --danger-wash: #F6E9E6;
  --warning: #96660E;
  --warning-wash: #FBF1DC;
  --shadow: 0 1px 2px rgba(34, 39, 31, 0.06), 0 4px 16px rgba(34, 39, 31, 0.06);
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, .serif {
  font-family: 'Source Serif 4', Georgia, serif;
  margin: 0 0 8px;
}

.muted {
  color: var(--muted);
}

.error-text {
  color: #b3261e;
  min-height: 1.2em;
}

a {
  color: var(--primary);
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   Top navigation
--------------------------------------------------------------------- */

.topnav {
  background: var(--primary);
  color: #EFF5F1;
  box-shadow: var(--shadow);
}

.topnav-inner {
  /* Previously capped at max-width: 960px + margin: 0 auto — matching
     .page's content width, but that left equal empty gutters on both
     sides at any wider viewport, made worse-looking on the left (just the
     compact logo) than the right (nav links + user + Sign Out, filling
     out to the box's edge). Spanning the true full width of the bar and
     letting justify-content: space-between spread the three sections
     across it fixes the imbalance directly, independent of .page's own
     (unchanged) content-width constraint below. */
  width: 100%;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
}

/* The firm logo is a full-color wordmark (tree mark + "Legacy Planners" +
   tagline) designed for a light background, so it sits on its own white
   chip rather than directly on the dark green nav — works whether or not
   the source PNG turns out to have real transparency. Sized by height so
   the (wide, ~2.6:1) logo scales down as a unit; the tagline becomes
   illegible at this size, which is expected/fine — the tree icon + name
   are what needs to read at a glance. */
.brand-logo-chip {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 4px 8px;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  height: 30px;
  width: auto;
}

.brand-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* The center section of the attorney-facing header (see header.ejs) — the
   nav links only, separated from .topnav-actions (user name + Sign Out,
   still shared with portal-home.ejs's simpler client-portal header) so
   the two can sit at opposite ends of the full-width bar instead of
   bunched together as one right-aligned group. Wider gap than
   .topnav-actions's own — this is now the visually isolated middle
   section, not competing for space with anything else in the same row. */
.topnav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
}

.topnav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

.nav-link {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  opacity: 0.9;
}

.nav-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Grouped nav dropdowns ("Matters", "Practice") — the top nav grew to 11
   flat links (Clients/Contacts/Conflict Check/Forms Library/Bulk Add/
   Import/Lead Tracking/Billing/Settings on top of Dashboard/My Day) and
   started wrapping onto a second line, pushing the search box/user name/
   Sign Out off screen at normal widths. Same open/close interaction as
   .filter-dropdown (dashboard.js) but a plain link list, not a filter
   form — kept as its own lighter-weight component instead of overloading
   that one, see nav-dropdown.js. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  opacity: 0.9;
  cursor: pointer;
}

.nav-dropdown-btn:hover,
.nav-dropdown-btn[aria-expanded="true"] {
  opacity: 1;
  text-decoration: underline;
}

.nav-dropdown-caret {
  font-size: 10px;
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
}

.nav-dropdown-panel[hidden] {
  display: none;
}

.nav-dropdown-panel a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 500;
  font-size: 14px;
}

.nav-dropdown-panel a:hover {
  background: var(--surface-2);
}

.topnav-user {
  color: #EFF5F1;
}

.topnav-search-input {
  width: 180px;
  font-family: inherit;
  font-size: 13.5px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 7px;
  padding: 7px 10px;
}

.topnav-search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.topnav-search-input:focus {
  background: rgba(255, 255, 255, 0.22);
  outline: none;
}

.link-button, .inline-form button.link-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.link-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.inline-form {
  display: inline;
  margin: 0;
}

/* ---------------------------------------------------------------------
   Page layout
--------------------------------------------------------------------- */

.page {
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
}

.page-footer {
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 12.5px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}

/* ---------------------------------------------------------------------
   Login page
--------------------------------------------------------------------- */

.auth-card-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 60px;
}

.auth-card {
  max-width: 380px;
  width: 100%;
  text-align: center;
}

.auth-card h1 {
  color: var(--primary);
  font-size: 26px;
}

.auth-card p {
  margin-bottom: 24px;
}

.btn-primary {
  display: inline-block;
  background: var(--primary);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  width: 100%;
}

.btn-primary:hover {
  background: var(--primary-light);
}

/* Phase 8.6 — danger variant for Delete/Cancel/Void triggers */
.btn-danger {
  display: inline-block;
  background: var(--danger);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.btn-danger:hover {
  opacity: 0.9;
}

.btn-small {
  width: auto;
  padding: 9px 16px;
  font-size: 14px;
}

/* ---------------------------------------------------------------------
   Dashboard placeholder
--------------------------------------------------------------------- */

.dashboard h1 {
  color: var(--primary);
}

.dashboard .btn-primary {
  margin-top: 8px;
}

/* ---------------------------------------------------------------------
   Clients list
--------------------------------------------------------------------- */

.clients-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.clients-header h1 {
  margin: 0;
  color: var(--primary);
}

.client-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.client-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.client-card:hover {
  border-color: var(--primary-light);
}

.client-name {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--ink);
}

.client-meta {
  font-size: 13.5px;
  color: var(--muted);
  display: flex;
  gap: 8px;
}

.client-card-updated {
  text-align: right;
  font-size: 13px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.empty-state p.serif {
  color: var(--ink);
  font-size: 19px;
}

/* ---------------------------------------------------------------------
   Client detail page
--------------------------------------------------------------------- */

.back-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 18px;
}

.back-link:hover {
  text-decoration: underline;
}

.detail-header {
  margin-bottom: 20px;
}

.detail-header h1 {
  color: var(--primary);
}

.detail-subtitle {
  font-size: 15px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.dot {
  color: var(--line);
}

.hidden {
  display: none !important;
}

.detail-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.detail-header-top h1 {
  margin: 0;
}

.detail-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.detail-plandate {
  font-size: 14px;
  margin: 4px 0 0;
}

.special-provisions {
  margin-top: 16px;
}

.special-provisions p {
  margin: 8px 0 0;
  white-space: pre-wrap;
}

.btn-secondary {
  display: inline-block;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--primary-wash);
  border-color: var(--primary-light);
}

/* Client edit form */
.client-edit-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}

.form-row {
  margin-bottom: 16px;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 5px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 2px var(--primary-wash);
}

.form-row textarea {
  resize: vertical;
  font-family: inherit;
}

.form-row-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.form-row-group .form-row {
  flex: 1 1 160px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.save-status {
  font-size: 13.5px;
  font-weight: 600;
}

.save-status-pending {
  color: var(--muted);
}

.save-status-success {
  color: var(--primary);
}

.save-status-error {
  color: var(--danger);
}

/* Outlook Calendar Sync's live conflict warning (client-appointments.js) —
   advisory, not a blocking validation error, but still needs to read as
   more urgent than .muted body text. */
.availability-warning {
  color: var(--warning);
  font-weight: 600;
  font-size: 13.5px;
  margin: -4px 0 0;
}

/* Tabs — plain-JS show/hide, horizontally scrollable so they never wrap
   awkwardly or shrink illegibly on narrow screens. */
.tabs-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  scrollbar-width: thin;
}

.tab-button {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.tab-button:hover {
  color: var(--ink);
}

.tab-button.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.detail-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 22px;
  margin-bottom: 20px;
}

.detail-section > h3 {
  color: var(--primary);
  font-size: 16px;
  margin: 18px 0 8px;
}

/* Probate Account form — keeps the running balance check visible while
   scrolling through all 7 schedules, since the whole point of the check is
   to catch a mismatch as items are entered, not just at the very end. */
.probate-balance-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.detail-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.detail-row:last-child {
  border-bottom: none;
}

/* A .detail-row used as a whole-row link (Global Search results) rather
   than a static div (every other .detail-row usage) — resets the global
   `a { color: var(--primary) }` back to normal row text, same reasoning as
   .matter-card's own color: var(--ink) reset. */
a.detail-row {
  color: var(--ink);
}

a.detail-row:hover {
  background: var(--surface-2);
}

.tag {
  display: inline-block;
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.tag-accent {
  background: var(--accent-wash);
  color: #8A6323;
}

.tag-muted {
  background: var(--surface-2);
  color: var(--muted);
}

/* County/DC deed recording requirements lookup (Forms Library) — a plain
   label/value card, server-rendered for DC's single static row and built
   client-side (same markup shape, see form-templates.js) for whichever MD
   county gets picked. */
.county-requirement-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-top: 10px;
  background: var(--surface-2);
}

.county-requirement-card h4 {
  margin: 0 0 10px;
}

.county-requirement-list {
  margin: 0;
}

.county-requirement-list dt {
  font-weight: 600;
  color: var(--muted);
  font-size: 13px;
  margin-top: 10px;
}

.county-requirement-list dt:first-child {
  margin-top: 0;
}

.county-requirement-list dd {
  margin: 2px 0 0;
}

/* Family */
.family-row {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.family-row-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.family-row-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.family-row-name {
  font-weight: 600;
}

.family-row-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.family-row-notes {
  font-size: 13.5px;
}

.family-row-actions {
  display: flex;
  gap: 16px;
}

/* Legal Research (AI roadmap Phase 3) */
.research-disclaimer {
  background: var(--warning-wash);
  color: var(--warning);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 16px;
}

#research-question {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 6px 0 10px;
}

#research-log {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.research-entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
}

.research-question {
  font-size: 14px;
  margin-bottom: 8px;
}

.research-answer {
  font-size: 13.5px;
  color: var(--ink);
  white-space: pre-wrap;
  line-height: 1.55;
}

.research-meta {
  margin-top: 8px;
  font-size: 12px;
}

/* Family Tree (AI roadmap Phase 2) */
.modal-wide {
  max-width: min(95vw, 1200px);
}

#family-tree-root {
  overflow-x: auto;
}

.family-tree-svg {
  display: block;
}

@media print {
  body * { visibility: hidden; }
  #family-tree-modal, #family-tree-modal * { visibility: visible; }
  #family-tree-modal {
    position: absolute;
    inset: 0;
    background: #fff;
    padding: 0;
    display: block;
  }
  #family-tree-modal .modal {
    max-width: none;
    max-height: none;
    box-shadow: none;
  }
  #family-tree-modal .modal-header,
  #family-tree-modal .modal-actions {
    display: none;
  }
}

.family-tree-svg .tree-line {
  stroke: var(--line);
  stroke-width: 2;
}

.tree-node-box {
  box-sizing: border-box;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.tree-node-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-node-relation {
  font-size: 12px;
  color: var(--primary-light);
  font-weight: 600;
}

.tree-node-tags {
  font-size: 11px;
  color: var(--muted);
}

.tree-node-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}

.tree-role-badge {
  display: inline-block;
  background: var(--accent-wash);
  color: #8A6323;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
}

.link-action {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}

.link-action:hover {
  text-decoration: underline;
}

.link-action-danger {
  color: var(--danger);
}

.form-row-checkboxes {
  display: flex;
  gap: 24px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.checkbox-label input {
  width: auto;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.family-edit-form {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  width: 100%;
}

/* Fiduciaries */
.fiduciary-group {
  padding: 18px 22px;
}

.fiduciary-group-title {
  font-size: 17px;
  color: var(--primary);
  margin-top: 0;
}

.fiduciary-role {
  margin-bottom: 16px;
}

.fiduciary-role:last-child {
  margin-bottom: 0;
}

.fiduciary-role-label {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
  margin-bottom: 6px;
}

.fiduciary-nominee-list {
  margin: 0;
  padding-left: 20px;
}

.fiduciary-nominee-list li {
  padding: 3px 0;
}

.fiduciary-nominee-name {
  font-weight: 600;
}

.fiduciary-nominee-relation {
  font-size: 13.5px;
}

.fiduciary-nominee-display {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.fiduciary-nominee-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.nominee-edit-form {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 4px 0;
  max-width: 380px;
}

/* Bequests & Residuary */
.residuary-row-share {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.residuary-note {
  font-size: 13px;
  margin-top: 2px;
}

.row-actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

.inline-edit-form {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 10px 0;
}

/* Assets */
.asset-row-name {
  font-weight: 600;
}

.asset-row-action {
  text-align: right;
  max-width: 320px;
}

/* ---------------------------------------------------------------------
   Annual review wizard
--------------------------------------------------------------------- */

.wizard-steps {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.review-locked-banner {
  margin-top: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.wizard-step {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 5px;
  padding: 4px 10px;
}

.wizard-step-active {
  color: #FFFFFF;
  background: var(--primary);
}

.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.wizard-actions form {
  margin: 0;
}

.life-change-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.life-change-item {
  flex: 1.1;
  font-weight: 600;
  padding-top: 8px;
}

.life-change-fields {
  flex: 2;
  display: flex;
  gap: 10px;
}

.life-change-fields select {
  flex: 0 0 130px;
}

.life-change-fields textarea {
  flex: 1;
  resize: vertical;
}

.life-change-row .save-status {
  flex: 0 0 60px;
  padding-top: 10px;
}

.fiduciary-review-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.fiduciary-review-label {
  flex: 1.1;
  padding-top: 4px;
}

.fiduciary-review-name {
  font-weight: 600;
}

.fiduciary-review-row .life-change-fields {
  flex: 2;
}

.fiduciary-review-row .save-status {
  flex: 0 0 60px;
  padding-top: 10px;
}

/* ---------------------------------------------------------------------
   Responsive — iPhone Safari / small screens
--------------------------------------------------------------------- */

@media (max-width: 480px) {
  .detail-header-top {
    flex-wrap: wrap;
  }

  .detail-header-actions {
    flex-wrap: wrap;
  }

  .wizard-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .life-change-row,
  .fiduciary-review-row {
    flex-direction: column;
    gap: 8px;
  }

  .life-change-fields {
    flex-direction: column;
  }

  .life-change-fields select {
    flex: 0 0 auto;
  }

  .life-change-row .save-status,
  .fiduciary-review-row .save-status {
    padding-top: 0;
  }

  .form-row-group {
    flex-direction: column;
    gap: 0;
  }

  .form-actions {
    flex-wrap: wrap;
  }

  .form-row-checkboxes {
    flex-direction: column;
    gap: 8px;
  }

  .family-edit-form {
    padding: 14px;
  }

  .client-edit-form {
    padding: 16px;
  }

  .topnav-inner {
    padding: 10px 14px;
  }

  .brand {
    gap: 8px;
  }

  .brand-logo-chip {
    padding: 3px 6px;
  }

  .brand-logo {
    height: 24px;
  }

  /* At this width, logo + full wordmark + Sign In/Out risks crowding or
     wrapping — the logo already contains "Legacy Planners", so it carries
     the brand on its own here; the product name reappears once there's
     room (desktop and wider tablets/phones). */
  .brand-name {
    display: none;
  }

  .topnav-links {
    gap: 10px;
    font-size: 13px;
  }

  .topnav-actions {
    gap: 10px;
    font-size: 13px;
  }

  .page {
    padding: 24px 16px;
  }

  .card {
    padding: 24px;
  }

  .auth-card-wrap {
    padding-top: 24px;
  }

  .clients-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .client-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 18px;
  }

  .client-card-updated {
    flex-direction: row;
    gap: 6px;
    text-align: left;
  }

  .detail-section {
    padding: 6px 16px;
  }

  .fiduciary-group {
    padding: 16px;
  }

  .detail-row,
  .asset-row,
  .residuary-row,
  .trigger-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .asset-row-action {
    text-align: left;
    max-width: none;
  }

  .residuary-row-share {
    flex-direction: row;
  }
}

/* ---------------------------------------------------------------------
   Questionnaire Module
--------------------------------------------------------------------- */

.public-topbar {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 14px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.public-topbar .brand-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  color: var(--primary);
  font-size: 17px;
}

.questionnaire-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.progress-pill {
  background: var(--primary-wash);
  color: var(--primary);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
}

.portal-status-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 12px;
}

.portal-account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}

.pill {
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
}

.pill-active {
  background: var(--primary-wash);
  color: var(--primary);
}

.pill-revoked {
  background: var(--danger-wash);
  color: var(--danger);
}

.pill-pending {
  background: var(--muted-wash, #eee);
  color: var(--muted);
}

.field-hint {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin: -8px 0 12px;
}

.section-note {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 16px;
}

.radio-group,
.checkbox-group {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.radio-group label,
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink);
}

.repeater-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.repeater-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface-2);
}

.repeater-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.repeater-item-header .repeater-item-title {
  font-weight: 600;
  color: var(--primary);
}

.required-mark {
  color: var(--danger);
}

.error-list {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}

.error-list p {
  margin: 0 0 6px;
  font-weight: 600;
}

.error-list ul {
  margin: 0;
  padding-left: 20px;
}

.attorney-note-box {
  border: 1px dashed var(--danger);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: #FBEFEC;
  margin-bottom: 20px;
}

.attorney-note-box > .attorney-note-label {
  color: var(--danger);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  display: block;
}

.video-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  margin-bottom: 14px;
  opacity: 0.7;
}

.submitted-banner {
  background: var(--primary-wash);
  border: 1px solid var(--primary-light);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  color: var(--primary);
  font-weight: 600;
}

.copy-link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.copy-link-row input {
  flex: 1;
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink);
}

@media (max-width: 480px) {
  .repeater-item {
    padding: 12px;
  }

  .radio-group,
  .checkbox-group {
    flex-direction: column;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------
   Contact Cards (Phase 5)
--------------------------------------------------------------------- */

.contacts-filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.contacts-filter-bar input[type="text"],
.contacts-filter-bar select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
}

.contacts-pagination {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.pagination-link {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
}

.pagination-link.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.contact-new-card {
  max-width: 640px;
  text-align: left;
}

.tab-subheading {
  margin-top: 24px;
  margin-bottom: 4px;
  font-size: 17px;
}

.detail-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.contact-details-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

.contact-photo-card {
  text-align: center;
}

.contact-photo-preview {
  width: 160px;
  height: 160px;
  margin: 0 auto 12px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.address-row-display,
.contact-detail-row-display,
.bank-account-row-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.document-upload-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.document-row {
  gap: 12px;
}

@media (max-width: 720px) {
  .contact-details-layout {
    grid-template-columns: 1fr;
  }
}

/* Client list search (Phase 6) */
.clients-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.clients-search-form input[type="search"] {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
}

.client-linked-contacts {
  font-size: 13px;
  margin-top: 4px;
}

/* Contact <-> Client linking (Phase 6) */
.contact-link-row,
.contact-link-existing-row,
#contact-links-add-row,
.contact-link-replace-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-link-existing-row {
  flex-direction: column;
  align-items: stretch;
}

.contact-link-display {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contact-link-replace-row:not(.hidden) {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.typeahead {
  position: relative;
  flex: 1 1 220px;
  min-width: 200px;
}

.typeahead-input {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
}

.typeahead-input:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 2px var(--primary-wash);
}

.typeahead-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
}

.typeahead-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 8px 12px;
  cursor: pointer;
}

.typeahead-item:hover {
  background: var(--surface-2);
}

.typeahead-empty {
  padding: 8px 12px;
  font-size: 13px;
}

.typeahead-create-new {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.typeahead-create-new:hover {
  text-decoration: underline;
}

.relationship-type-input {
  flex: 1 1 200px;
  min-width: 180px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
}

/* Tasks (Phase 7a) */
.task-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.task-row-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.task-row-disabled {
  opacity: 0.6;
}

.task-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
}

.task-row-description {
  font-size: 13.5px;
}

.task-name-completed {
  text-decoration: line-through;
  color: var(--muted);
}

.task-row-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Tag color variants (Phase 7c — overdue/renewal indicators) */
.tag-danger {
  background: var(--danger-wash);
  color: var(--danger);
}

.tag-warning {
  background: var(--warning-wash);
  color: var(--warning);
}

/* Send Email — attachments (New Email attachment support) */
.attachment-source-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.attachment-picker {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  max-height: 180px;
  overflow-y: auto;
  background: var(--surface-2);
}

.attachment-picker input[type="search"] {
  margin-bottom: 6px;
}

.attachment-picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 13px;
}

.attachment-picker-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 1;
}

.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 6px 3px 12px;
  font-size: 12.5px;
}

.attachment-chip .attachment-chip-source {
  color: var(--muted);
  font-size: 11px;
}

.attachment-chip button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  padding: 2px 4px;
}

.attachment-chip button:hover {
  color: var(--danger);
}

.attachment-size-meter {
  font-size: 12px;
  color: var(--muted);
}

.attachment-size-meter.attachment-size-warn {
  color: var(--warning);
  font-weight: 600;
}

.attachment-size-meter.attachment-size-over {
  color: var(--danger);
  font-weight: 600;
}

/* Forms Library catalog (MD/DC Probate Forms + Deeds launch points) */
.form-catalog-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}

.form-catalog-row {
  border-bottom: 1px solid var(--line);
}

.form-catalog-row:last-child {
  border-bottom: none;
}

.form-catalog-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}

.form-catalog-toggle:hover {
  background: var(--surface-2);
}

.form-catalog-expand {
  padding: 12px 14px 16px;
  background: var(--surface-2);
}

.form-catalog-start-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.form-catalog-start-form select {
  flex: 1 1 auto;
  min-width: 180px;
}

.form-catalog-start-form.form-row-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---------------------------------------------------------------------
   Matter Dashboard (Phase 7c)
---------------------------------------------------------------------- */

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-header h1 {
  margin: 0;
}

.dashboard-header-actions {
  display: flex;
  gap: 10px;
}

.dashboard-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  margin-bottom: 24px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.filter-group-wide {
  flex: 1 1 260px;
}

.filter-group-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dashboard-search-input {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  margin-bottom: 8px;
}

.filter-group-wide select {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 12px;
  margin-bottom: 8px;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

/* Dropdown filter bar (Stage / Matter Type / Overdue / Engagement) — the
   checkboxes/radios inside each popover are the exact same inputs the
   always-expanded layout used before (same names/values), just relocated;
   this only adds the button + popover chrome around them. Uses the app's
   existing green accent (--primary/--primary-light/--primary-wash), the
   same one already used for .btn-secondary and .filter-group-title, not a
   new palette. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.filter-dropdown {
  position: relative;
}

.filter-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.filter-dropdown-btn:hover {
  background: var(--primary-wash);
  border-color: var(--primary-light);
}

.filter-badge {
  background: var(--primary);
  color: #FFFFFF;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
}

.filter-dropdown-caret {
  color: var(--muted);
  font-size: 11px;
}

.filter-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}

/* `.filter-dropdown-panel`'s own `display: flex` above has the same
   specificity (0,1,0) as the browser's built-in `[hidden] { display: none }`
   rule, and author styles win ties over user-agent styles regardless of
   source order — so without this override, the `hidden` attribute (which
   dashboard.js toggles to open/close each popover) was never actually
   hiding anything visually, even though the attribute itself was set
   correctly. This is why every panel appeared open simultaneously
   regardless of what the JS did. Higher specificity (0,2,0) restores the
   attribute's actual effect. */
.filter-dropdown-panel[hidden] {
  display: none;
}

.matter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.matter-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.matter-card:hover {
  border-color: var(--primary-light);
}

.matter-card-overdue {
  border-left-color: var(--danger);
}

.matter-card-due-soon {
  border-left-color: var(--warning);
}

.matter-card-top,
.matter-card-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.matter-card-number {
  font-weight: 700;
  color: var(--primary);
  min-width: 70px;
}

.matter-card-client {
  font-size: 16px;
  font-weight: 600;
  flex: 1 1 auto;
}

.matter-card-next-task {
  font-size: 13.5px;
  flex: 1 1 auto;
}

@media (max-width: 720px) {
  .dashboard-filters {
    flex-direction: column;
    gap: 16px;
  }

  .matter-card-top,
  .matter-card-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Touch-friendly tap targets on mobile — the whole card is the tap
     target already (it's an <a>), this just gives checkboxes/links inside
     the filter form enough room per the kickoff's 44px guidance. */
  .filter-group .checkbox-label {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Stack the filter-bar buttons full-width, one per row, rather than a
     separate mobile component — same reflowing-layout approach the rest
     of this file already uses instead of distinct mobile/desktop templates. */
  .filter-dropdown {
    width: 100%;
  }

  .filter-dropdown-btn {
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
  }

  .filter-dropdown-panel {
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
  }

  .filter-dropdown-panel .checkbox-label {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------
   Send Email modal (Part 1 Phase 2) — first true modal overlay in this
   app; the renewal-setup form above uses an inline form instead.
--------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: var(--surface);
  border-radius: 10px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal-large {
  max-width: 900px;
  height: 90vh;
}

.modal-large .modal-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#document-preview-iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 0;
}

.document-preview-docx {
  flex: 1 1 auto;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  background: #fff;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 0;
  color: var(--primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
}

.modal-close:hover {
  color: var(--ink);
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.modal-actions .btn-primary {
  width: auto;
}

#send-email-body-editor {
  background: var(--surface);
  border-radius: 7px;
}

#send-email-body-editor .ql-container {
  min-height: 220px;
  max-height: 360px;
  overflow-y: auto;
  font-family: inherit;
  font-size: 14.5px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

#send-email-body-editor .ql-toolbar {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.email-preview {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 16px;
  min-height: 220px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
}

.email-preview.hidden,
#send-email-body-editor.hidden {
  display: none;
}

/* Phase 10 — Billing & Accounting dashboard stat cards */
.stat-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 20px 0 32px;
}

.trend-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.stat-card-label {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-card-value {
  font-family: 'Source Serif 4', serif;
  font-size: 28px;
  font-weight: 700;
  margin-top: 4px;
}

.stat-card-value.stat-card-trust {
  color: var(--primary);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.data-table th {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Phase 10 Hardening — reconciliation status card */
.reconciliation-card.reconciliation-ok {
  border-left: 4px solid var(--primary);
}

.reconciliation-card.reconciliation-bad {
  border-left: 4px solid var(--danger);
  background: var(--danger-wash);
}

/* Trust Reconciliation Phase 1 — per-client balances */
.client-trust-table tr.client-trust-negative td {
  background: var(--danger-wash);
  color: var(--danger);
  font-weight: 600;
}

.client-trust-unattributed {
  margin-top: 12px;
  font-size: 13px;
}

/* Phone-width top menu: the links wrap onto their own row under the logo and
   the Matters/Practice dropdowns open full width below the bar (tap, not hover). */
@media (max-width: 720px) {
  .topnav { position: relative; }
  .topnav-inner { flex-wrap: wrap; row-gap: 8px; }
  .topnav-links { order: 3; width: 100%; flex-wrap: wrap; gap: 8px 18px; }
  .topnav-actions { margin-left: auto; }
  .nav-dropdown { position: static; }
  .nav-dropdown-panel {
    left: 8px; right: 8px; top: 100%; min-width: 0; max-height: 70vh; overflow-y: auto;
  }
  .nav-dropdown-panel a { padding: 12px 10px; }
  .data-table { display: block; overflow-x: auto; }
}

/* Follow-up Reminder modal: quick-date buttons under the date field */
.followup-quick-dates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Matters is now a link (the list) with a small arrow for the other matter tools */
.nav-dropdown { display: inline-flex; align-items: center; }
.nav-dropdown .nav-matters-link { padding-right: 2px; }
.nav-dropdown .nav-dropdown-caret-only { padding-left: 2px; }