/* LB Practice Manager. Same palette as the public site: navy ink, warm bone,
   baby blue. System fonts only, so the app makes no outside requests. */

:root {
  --ink: #131a2f;
  --ink-soft: #1d2743;
  --mute: #55607a;
  --bone: #f6f4ef;
  --paper: #fbfaf7;
  --card: #ffffff;
  --line: #e2ded3;
  --sky: #a9d4ef;
  --sky-deep: #2f6792;
  --sky-wash: #eaf3fa;
  --ok: #1f6b4a;
  --ok-wash: #e3f2ea;
  --warn: #8a5a00;
  --warn-wash: #fbf0d6;
  --bad: #a3271f;
  --bad-wash: #fbe6e3;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sky-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.2rem; margin-bottom: 0.9rem; }
h3 { font-size: 1rem; margin: 1.3rem 0 0.5rem; }
p + p { margin-top: 0.6rem; }

.muted { color: var(--mute); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; }
.eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 0.35rem; }
.eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--sky); color: var(--ink); padding: 0.6rem 1rem; font-weight: 700; z-index: 10; }
.skip:focus { top: 0.5rem; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--ink); color: var(--bone); display: flex; flex-direction: column; padding: 1.4rem 1rem; position: sticky; top: 0; height: 100vh; }
.side-brand { display: flex; align-items: center; gap: 0.75rem; color: var(--bone); padding: 0 0.5rem 1.4rem; border-bottom: 1px solid rgba(246, 244, 239, 0.14); margin-bottom: 1rem; }
.side-brand:hover { text-decoration: none; }
.side-brand span { font-family: var(--serif); font-size: 1.02rem; line-height: 1.2; }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side-nav a { color: rgba(246, 244, 239, 0.78); padding: 0.55rem 0.75rem; border-radius: var(--radius); font-weight: 600; font-size: 0.92rem; display: flex; justify-content: space-between; align-items: center; }
.side-nav a:hover { background: rgba(246, 244, 239, 0.08); color: var(--bone); text-decoration: none; }
.side-nav a.on { background: rgba(169, 212, 239, 0.16); color: #fff; }
.count { background: var(--sky); color: var(--ink); font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 99px; }
.side-out { border-top: 1px solid rgba(246, 244, 239, 0.14); padding: 1rem 0.5rem 0; }
.side-out p { font-size: 0.85rem; color: rgba(246, 244, 239, 0.7); margin-bottom: 0.6rem; }
.main { padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem; max-width: 1240px; width: 100%; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.badges { margin-top: 0.5rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ---------- Cards and grids ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; }
.card.narrow { max-width: 460px; margin-inline: auto; }
.card.review { border-color: #e3c877; background: #fffcf2; }
.grid { display: grid; gap: 1.2rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid .card { margin-bottom: 0; }
.grid { margin-bottom: 1.2rem; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.15rem; color: var(--ink); }
a.kpi:hover { border-color: var(--sky-deep); text-decoration: none; }
.kpi-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.kpi-value { font-family: var(--serif); font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.kpi-note { font-size: 0.82rem; color: var(--mute); }
.kpi-alert { border-color: #e2b3ae; background: #fffaf9; }
.kpi-alert .kpi-value { color: var(--bad); }

.notice { background: var(--warn-wash); border: 1px solid #ecd9a3; border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
p.notice { display: block; }

/* ---------- Tables ---------- */
.scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data th { text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data th.right { text-align: right; }
table.data td.right { white-space: nowrap; }
table.data td { padding: 0.6rem; border-bottom: 1px solid #efece4; vertical-align: top; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: #fcfbf8; }
table.data tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: none; }
table.data tr.dim td { opacity: 0.6; }
.more { margin-top: 0.8rem; font-size: 0.9rem; }
.empty { color: var(--mute); padding: 0.6rem 0; }

/* ---------- Badges ---------- */
.badge { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.12rem 0.55rem; border-radius: 99px; white-space: nowrap; background: #ecebe6; color: var(--ink); }
.badge-stage-requested, .badge-stage-booked, .badge-stage-awaiting_documents { background: var(--sky-wash); color: #1f4f73; }
.badge-stage-assessed, .badge-stage-awaiting_experts { background: var(--warn-wash); color: var(--warn); }
.badge-stage-finalised { background: var(--ok-wash); color: var(--ok); }
.badge-stage-closed, .badge-none { background: #ecebe6; color: var(--mute); }
.badge-paid, .badge-credit { background: var(--ok-wash); color: var(--ok); }
.badge-part { background: var(--warn-wash); color: var(--warn); }
.badge-invoiced { background: var(--sky-wash); color: #1f4f73; }
.badge-unpaid, .badge-due { background: var(--warn-wash); color: var(--warn); }
.badge-overdue { background: var(--bad-wash); color: var(--bad); }
.badge-review { background: #fff0c2; color: #6d4a00; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
label { font-size: 0.8rem; font-weight: 700; }
.opt { font-weight: 400; color: var(--mute); font-size: 0.75rem; }
input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid #c9c4b6; border-radius: var(--radius); padding: 0.5rem 0.65rem; width: 100%; min-height: 2.5rem; }
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sky-deep); outline-offset: 0; border-color: var(--sky-deep); }
.hint { font-size: 0.8rem; color: var(--mute); margin-top: 0.1rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.2rem; }
.form-grid .wide { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }
.actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.inline-form { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { flex: 1; min-width: 200px; }
.check { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; font-size: 0.9rem; }
.check input { width: auto; min-height: 0; }
.filters { display: grid; grid-template-columns: 2fr 1.5fr 1.2fr 1.2fr auto; gap: 0.8rem; align-items: end; }

.btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 700; font-size: 0.86rem; padding: 0.55rem 1rem; min-height: 2.5rem; border-radius: var(--radius); border: 1px solid #8fbfe0; background: var(--sky); color: var(--ink); cursor: pointer; white-space: nowrap; }
.btn:hover { background: #95c8e9; text-decoration: none; }
.btn.ghost { background: transparent; border-color: #c9c4b6; color: var(--ink); }
.btn.ghost:hover { background: var(--bone); }
.side .btn.ghost { border-color: rgba(246, 244, 239, 0.35); color: var(--bone); }
.side .btn.ghost:hover { background: rgba(246, 244, 239, 0.1); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.small { padding: 0.3rem 0.7rem; min-height: 2rem; font-size: 0.8rem; }

details.adder { margin-top: 1rem; }
details.adder > summary { list-style: none; display: inline-flex; cursor: pointer; }
details.adder > summary::-webkit-details-marker { display: none; }
details.adder[open] > summary { margin-bottom: 1rem; }
details.remove > summary { cursor: pointer; color: var(--mute); font-size: 0.8rem; list-style: none; }
details.remove > summary::-webkit-details-marker { display: none; }
details.remove > summary:hover { color: var(--bad); text-decoration: underline; }
details.remove[open] > summary { margin-bottom: 0.4rem; }

.flash { padding: 0.7rem 1rem; border-radius: var(--radius); margin-bottom: 1.2rem; font-weight: 600; }
.flash-ok { background: var(--ok-wash); color: var(--ok); border: 1px solid #bcdccb; }
.flash-err { background: var(--bad-wash); color: var(--bad); border: 1px solid #eebfba; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.2rem; }
.facts dt { color: var(--mute); font-size: 0.85rem; }
.facts + form { margin-top: 1rem; }

.issues { list-style: none; }
.issues li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid #efece4; flex-wrap: wrap; }
.issues li:last-child { border-bottom: none; }
.issue-group { border-top: 1px solid var(--line); margin-top: 1rem; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; color: var(--mute); }

/* ---------- Sign-in screens ---------- */
body.bare { background: var(--bone); }
.bare-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: 1.5rem; }
.bare-main .card { width: 100%; }
.steps { margin: 1rem 0 0 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.key { display: block; margin-top: 0.4rem; font-size: 1.05rem; letter-spacing: 0.08em; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 0.8rem; word-break: break-all; user-select: all; }

/* ---------- Statement ---------- */
.statement-head { display: flex; justify-content: space-between; gap: 2rem; border-bottom: 2px solid var(--ink); padding-bottom: 1rem; margin-bottom: 1rem; }
.statement-case { margin-top: 1.4rem; break-inside: avoid; }
.statement-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1.2rem 0; }
.bank { margin-top: 1.5rem; padding: 0.9rem 1rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); }
.bank p + p { margin-top: 0.2rem; }
.statement-total { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--ink); text-align: right; font-size: 1.15rem; }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.7rem 1rem; }
  .side-brand { border: none; margin: 0; padding: 0; }
  .side-brand span { display: none; }
  .side-nav { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .side-nav a { white-space: nowrap; gap: 0.4rem; }
  .side-out { border: none; padding: 0; margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }
  .side-out p { margin: 0; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two, .form-grid, .filters { grid-template-columns: 1fr; }
  .main { padding-top: 1.2rem; }
}
@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr; }
  .side-out p { display: none; }
}

@media print {
  .side, .no-print, .flash, .skip { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; }
  .card { border: none; padding: 0; }
  body { background: #fff; font-size: 12px; }
}