/* =====================================================================================
   PWC UI: shared design tokens and responsive building blocks
   -------------------------------------------------------------------------------------
   Mobile first. Nothing here assumes a screen size:
     * sizes are fluid (clamp) and grids auto-fit, so layouts rearrange themselves;
     * every tappable control is at least 44px, and inputs are 16px so iPhones do not zoom;
     * tables turn into readable cards on narrow screens (see pwc-ui.js);
     * safe-area insets keep content clear of notches and the home bar;
     * motion is switched off for people who ask for less of it.
   Brand colours and fonts are unchanged. Fonts are served from this site (assets/fonts).
   ===================================================================================== */

:root {
  color-scheme: light;

  /* brand */
  --sage: #4a6741; --sage-light: #6b8f61; --sage-dark: #2e4229;
  --cream: #f5f0e8; --warm-white: #fdfaf4; --gold: #87613a; --gold-light: #d4b896;
  --charcoal: #2a2a2a; --muted: #595959; --stone: #e8e0d4; --white: #fff;
  --error: #a52c22; --success: #1e7a3e; --warning: #a54f00;

  /* type: fluid between a small phone and a wide desktop; never below 12px */
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.03rem + 0.45vw, 1.35rem);
  --fs-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);

  /* space */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;
  --gutter: clamp(1rem, 3.5vw, 2rem);

  /* shape */
  --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(42, 42, 42, 0.06), 0 1px 3px rgba(42, 42, 42, 0.08);
  --shadow-2: 0 6px 20px rgba(42, 42, 42, 0.12);
  --shadow-3: 0 14px 40px rgba(42, 42, 42, 0.18);

  /* touch and safe areas (notch, home bar) */
  --tap: 2.75rem;
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
  --nav-h: 0px;                      /* the portal sets this to the bottom bar's height on small screens */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  min-width: 20rem; min-height: 100vh; min-height: 100dvh;
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.55;
  color: var(--charcoal); background: var(--cream);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
[hidden] { display: none !important; }   /* the hidden attribute must always win over a component's display rule */
img, svg, video, canvas { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--sage-dark); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-3); top: -4rem; z-index: 1000; padding: var(--sp-3) var(--sp-4); background: var(--sage-dark); color: #fff; border-radius: var(--radius-sm); text-decoration: none; }
.skip-link:focus { top: var(--sp-3); }

/* ---- layout helpers: arrange themselves to whatever space there is ---- */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--sp-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--sp-3)); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 15rem)), 1fr)); gap: var(--grid-gap, var(--sp-4)); }
.hide-sm { display: none; }
@media (min-width: 40rem) { .hide-sm { display: revert; } .show-sm { display: none !important; } }

/* ---- buttons: always a comfortable tap target ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0.6rem 1.1rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 500 var(--fs-xs)/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.1s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-sm { min-height: 2.5rem; padding: 0.4rem 0.9rem; }
@media (pointer: coarse), (max-width: 63.99rem) { .btn-sm { min-height: var(--tap); } }
.btn-sage { background: var(--sage); color: #fff; }
.btn-sage:hover { background: var(--sage-dark); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #6f4f2e; }
.btn-outline { background: transparent; color: var(--sage-dark); border-color: var(--sage); }
.btn-outline:hover { background: var(--sage); color: #fff; }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #8a241c; }
.btn.is-busy { opacity: 0.78; cursor: wait; }
.btn.is-busy::after {
  content: ''; width: 0.75em; height: 0.75em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: pwc-spin 0.75s linear infinite;
}
@keyframes pwc-spin { to { transform: rotate(360deg); } }

/* ---- forms: stack on narrow screens, sit side by side when there is room ---- */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-label { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.form-input, .form-select, .form-textarea {
  width: 100%; min-height: var(--tap); padding: 0.65rem 0.9rem;
  border: 1px solid #cfc6b8; border-radius: var(--radius-sm); background: var(--cream); color: var(--charcoal);
  font-family: var(--font-body); font-size: max(16px, 1rem);          /* 16px stops iPhones zooming into the field */
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--sage); background: #fff; outline: 2px solid var(--sage-light); outline-offset: 1px; }
.form-textarea { min-height: 6rem; resize: vertical; }
.control-sm { min-height: 2.5rem; padding: 0.4rem 0.8rem; font-size: var(--fs-sm); }
@media (pointer: coarse), (max-width: 63.99rem) { .control-sm { min-height: var(--tap); font-size: max(16px, 1rem); } }

/* ---- badges ---- */
.badge { display: inline-block; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.badge-green { background: rgba(74, 103, 65, 0.12); color: var(--sage-dark); }
.badge-gold { background: rgba(184, 150, 110, 0.18); color: #6f4f2e; }
.badge-gray { background: var(--stone); color: var(--muted); }
.badge-red { background: rgba(192, 57, 43, 0.1); color: var(--error); }

/* ---- panels and stat cards ---- */
.panel { background: #fff; border-radius: var(--radius-sm); margin-bottom: var(--sp-5); box-shadow: var(--shadow-1); }
.panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--stone); }
.panel-title { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--sage-dark); }
.panel-body { padding: var(--sp-5); container-type: inline-size; overflow-x: auto; }   /* a container for the table cards below; also a safety net on very old browsers */
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.panel-actions .control { flex: 1 1 9rem; min-width: 0; max-width: 16rem; }
@media (max-width: 40rem) {
  .panel-header { padding: var(--sp-4); }
  .panel-body { padding: var(--sp-4); }
  .panel-actions { width: 100%; }
  .panel-actions .control { max-width: none; }
  .panel-actions .btn { flex: 1 1 auto; }
}
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.stat-card { background: #fff; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm); border-top: 3px solid var(--sage); box-shadow: var(--shadow-1); min-width: 0; }
.stat-card.gold { border-top-color: var(--gold); }
.stat-card.warn { border-top-color: var(--warning); }
.stat-label { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2); }
.stat-value { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--sage-dark); line-height: 1; overflow-wrap: anywhere; }
.stat-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); }

/* ---- data tables: a normal table when there is room, a stack of cards when there is not ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th { text-align: left; padding: 0.7rem 1rem; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--stone); background: var(--cream); white-space: nowrap; }
.data-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--stone); vertical-align: top; overflow-wrap: anywhere; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--cream); }
.client-name { font-weight: 500; color: var(--sage-dark); }

@container (max-width: 46rem) {
  .data-table.is-responsive, .data-table.is-responsive tbody { display: block; }
  /* header row stays for screen readers, hidden from view: each card repeats its own labels */
  .data-table.is-responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  /* as many cards per row as fit: one on a phone, two on a tablet, and so on */
  .data-table.is-responsive tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--sp-3); padding: var(--sp-3); }
  .data-table.is-responsive tr { display: flex; flex-direction: column; margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-3); background: #fff; border: 1px solid var(--stone); border-radius: var(--radius); box-shadow: var(--shadow-1); }
  .data-table.is-responsive tbody tr:hover td { background: transparent; }
  .data-table.is-responsive td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: 0.4rem 0; border: 0; text-align: right; min-width: 0; }
  .data-table.is-responsive td::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .data-table.is-responsive td[data-label=""]::before { display: none; }
  /* the card's title: the first column unless the table says otherwise with data-primary-col="n" */
  .data-table.is-responsive td[data-primary] { order: -1; display: block; padding: var(--sp-2) 0; margin-bottom: var(--sp-1); border-bottom: 1px solid var(--stone); text-align: left; font-size: var(--fs-base); }
  .data-table.is-responsive td[data-primary]::before { display: none; }
  .data-table.is-responsive td input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
  .data-table.is-responsive td.cell-actions { display: flex; flex-wrap: wrap; justify-content: stretch; gap: var(--sp-2); padding-top: var(--sp-3); }
  .data-table.is-responsive td.cell-actions::before { display: none; }
  .data-table.is-responsive td.cell-actions > * { flex: 1 1 auto; }
  /* "Loading..." and "No clients yet" rows */
  .data-table.is-responsive tr:has(> td[colspan]) { grid-column: 1 / -1; }
  .data-table.is-responsive td[colspan] { display: block; text-align: center; }
  .data-table.is-responsive td[colspan]::before { display: none; }
  .data-table.is-responsive td input, .data-table.is-responsive td select { max-width: 100%; }
}

/* ---- tabs: scroll sideways inside themselves instead of pushing the page wider ---- */
.tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 2px solid var(--stone); margin-bottom: var(--sp-5); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-5); cursor: pointer; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab.active { color: var(--sage-dark); border-bottom-color: var(--sage); }

/* ---- dialogs: centred card on large screens, a sheet that slides up from the bottom on phones ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease); }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { position: relative; width: 100%; max-width: 36rem; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-6); background: #fff; border-radius: var(--radius); border-top: 4px solid var(--sage); box-shadow: var(--shadow-3); }
.modal-title { padding-right: var(--tap); font-family: var(--font-display); font-size: var(--fs-xl); color: var(--sage-dark); margin-bottom: var(--sp-2); }
.modal-close { position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin: 0; font-size: 1.75rem; line-height: 1; color: var(--muted); background: none; border: none; cursor: pointer; }
@media (max-width: 40rem) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: none !important; max-height: 94vh; max-height: 94dvh; padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + var(--safe-b)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(6%); transition: transform 0.3s var(--ease); }
  .modal-overlay.open .modal { transform: none; }
}

/* ---- toast: sits above the bottom bar and the home indicator ---- */
.success-toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + var(--sp-4)); z-index: 999;
  width: max-content; max-width: calc(100% - 2rem); padding: var(--sp-3) var(--sp-5);
  background: var(--sage-dark); color: #fff; border-radius: var(--radius); font-size: var(--fs-sm); box-shadow: var(--shadow-2);
  opacity: 0; transform: translate(-50%, 0.5rem); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.success-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- less motion for people who ask for it ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}