/* Pure Ortho Ops: the one shared stylesheet. Tokens from the Pure Orthodontics design system. */
:root {
  --cyan-50: #ecf8fd; --cyan-100: #d3f0fa; --cyan-300: #7fd3ec; --cyan-400: #57c5e7; --cyan-500: #2eb0d8;
  --cyan-600: #1894bd; --cyan-700: #137697; --cyan-800: #145d76;
  --gray-50: #f7fafb; --gray-100: #eef3f5; --gray-200: #e1e8ec; --gray-300: #cbd4d9; --gray-500: #8e8d8f;
  --gray-600: #69727a; --gray-700: #4d565d; --gray-800: #353d43; --gray-900: #20303a;
  --green-100: #e1f3ea; --green-700: #1f7250; --amber-100: #fcefd9; --amber-500: #df9b27; --amber-700: #a96f15;
  --red-100: #fbe6e4; --red-700: #a4322a;
  --shadow-sm: 0 2px 8px rgba(32, 48, 58, 0.06); --shadow-md: 0 8px 24px rgba(32, 48, 58, 0.08);
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--gray-700); font: 16px/1.6 var(--font); }
a { color: var(--cyan-600); } a:hover { color: var(--cyan-700); }
h1, h2, h3 { color: var(--gray-900); font-weight: 500; margin: 0; }
h1 { font-size: 40px; line-height: 1.15; font-weight: 400; }
h2 { font-size: 22px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-700); }
.muted { color: var(--gray-600); } .small { font-size: 14px; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hidden { display: none !important; }

/* Shell: side menu + main, stacking at phone width */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.menu { flex: 1 1 232px; max-width: 272px; min-width: 0; padding: 28px 16px 24px; background: var(--gray-50); border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 28px; }
.menu .brand { padding: 0 10px; display: flex; flex-direction: column; gap: 4px; }
.menu .wordmark { font-size: 22px; font-weight: 300; color: var(--gray-900); letter-spacing: -0.01em; }
.menu .wordmark b { font-weight: 500; color: var(--cyan-500); }
.menu nav { display: flex; flex-direction: column; gap: 2px; }
.menu nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 600; color: var(--gray-700); }
.menu nav a[aria-current="page"] { color: var(--cyan-800); background: var(--cyan-50); }
.menu nav .section { margin: 16px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-600); }
.menu .who { margin-top: auto; padding: 14px 12px; border-top: 1px solid var(--gray-200); display: flex; align-items: center; gap: 12px; }
.menu .who .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cyan-100); color: var(--cyan-800); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.menu .who form { margin-left: auto; }
main.content { flex: 999 1 560px; min-width: 0; padding: 36px 40px 64px; }
.page { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
header.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
header.page-head .titles { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 720px) { main.content { padding: 24px 16px 48px; } h1 { font-size: 32px; } .menu { max-width: none; border-right: 0; border-bottom: 1px solid var(--gray-200); } }

/* Pieces */
.card { border: 1px solid var(--gray-200); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); }
.card .card-head { padding: 20px 24px; border-bottom: 1px solid var(--gray-200); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.card .card-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent; background: var(--cyan-500); color: #fff; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--cyan-600); } .btn:focus-visible { outline: 3px solid var(--cyan-300); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--cyan-700); border-color: var(--gray-300); } .btn.secondary:hover { background: var(--gray-50); border-color: var(--cyan-300); }
.btn.ghost { background: transparent; color: var(--cyan-700); } .btn.ghost:hover { background: var(--cyan-50); }
.btn.sm { min-height: 36px; padding: 0 16px; font-size: 13px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; line-height: 1; padding: 5px 11px; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); white-space: nowrap; }
.badge.brand { background: var(--cyan-50); color: var(--cyan-700); } .badge.ok { background: var(--green-100); color: var(--green-700); }
.badge.warn { background: var(--amber-100); color: var(--amber-700); } .badge.bad { background: var(--red-100); color: var(--red-700); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--gray-200); }
.tabs a { padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 15px; font-weight: 600; color: var(--gray-700); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--cyan-800); border-bottom-color: var(--cyan-500); }
.table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: 14px; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.t th { text-align: left; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-600); padding: 10px 16px; border-bottom: 1px solid var(--gray-300); background: var(--gray-50); white-space: nowrap; }
table.t td { padding: 12px 16px; border-bottom: 1px solid var(--gray-200); color: var(--gray-800); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.selected td { background: var(--cyan-50); }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
.field input, .field select { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--gray-300); border-radius: 14px; font: inherit; font-size: 16px; color: var(--gray-900); background: #fff; }
.field input:focus, .field select:focus { outline: none; border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(87, 197, 231, 0.45); }
.field .hint { font-weight: 400; color: var(--gray-600); }
.alert { padding: 14px 16px; border-radius: 14px; background: var(--cyan-50); color: var(--gray-800); border: 1px solid var(--cyan-300); font-size: 14px; }
.alert.warn { background: var(--amber-100); border-color: var(--amber-500); } .alert.bad { background: var(--red-100); border-color: var(--red-700); }
.alert.ok { background: var(--green-100); border-color: var(--green-700); }
.panel { border: 1.5px solid var(--cyan-300); border-radius: 20px; box-shadow: var(--shadow-md); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; background: #fff; }
.impact { border-radius: 14px; background: var(--gray-50); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.two-col { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.two-col > .grow { flex: 999 1 520px; min-width: 0; } .two-col > .side { flex: 1 1 320px; min-width: 0; }
.status { font-size: 14px; color: var(--gray-600); min-height: 1.6em; }

/* Inline editor row under the item being changed */
table.t td .badge { white-space: normal; text-align: left; line-height: 1.3; }
table.t tr.editor td { background: var(--cyan-50); padding: 20px 24px; border-top: 1.5px solid var(--cyan-300); border-bottom: 1.5px solid var(--cyan-300); }
.editor-form { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.editor-fields { display: flex; flex-wrap: wrap; gap: 16px; } .editor-fields .field { flex: 1 1 220px; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Bills */
.dropzone { border: 2px dashed var(--cyan-300); border-radius: 20px; background: var(--cyan-50); padding: 28px 24px; text-align: center; color: var(--gray-800); font-size: 15px; cursor: pointer; }
.dropzone.over { background: var(--cyan-100); border-color: var(--cyan-500); } .dropzone .link { color: var(--cyan-700); font-weight: 700; text-decoration: underline; cursor: pointer; }
.dropzone.busy { opacity: 0.6; pointer-events: none; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat { padding: 18px 20px; border: 1px solid var(--gray-200); border-radius: 14px; display: flex; flex-direction: column; gap: 4px; }
.stat .label { font-size: 13px; font-weight: 600; color: var(--gray-600); } .stat .value { font-size: 28px; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.stat .note { font-size: 13px; color: var(--gray-600); } .stat.attention { border: 1.5px solid var(--amber-500); background: var(--amber-100); } .stat.attention .label { color: var(--amber-700); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cards { display: flex; flex-direction: column; gap: 12px; }
.sugg { border: 1px solid var(--gray-200); border-radius: 20px; box-shadow: var(--shadow-sm); padding: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.sugg .what { flex: 1 1 320px; display: flex; flex-direction: column; gap: 3px; } .sugg .amount { font-size: 20px; color: var(--gray-900); font-variant-numeric: tabular-nums; }
.sugg .who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .sugg .who select { min-height: 44px; border-radius: 14px; border: 1.5px solid var(--gray-300); padding: 0 12px; font: inherit; font-size: 15px; }
.sugg.low { border-style: dashed; }
.panel.soft { border-style: dashed; border-color: var(--gray-300); box-shadow: none; background: var(--gray-50); }
.h2like { font-size: 22px; font-weight: 500; color: var(--gray-900); cursor: pointer; } details > summary { list-style: none; } details > summary::before { content: '▸ '; color: var(--cyan-700); } details[open] > summary::before { content: '▾ '; }
.empty { padding: 18px 22px; border: 1px dashed var(--gray-300); border-radius: 14px; color: var(--gray-600); font-size: 14px; }

/* Month figures */
.figures { display: flex; flex-direction: column; }
.frow { display: grid; grid-template-columns: minmax(180px, 1.2fr) 140px 130px minmax(220px, 1.8fr) 100px; gap: 16px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--gray-200); }
.frow:last-child { border-bottom: 0; } .frow.fhead { padding: 12px 24px; background: var(--gray-50); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-600); border-radius: 20px 20px 0 0; }
.frow.empty-row { background: var(--amber-100); }
.fname { display: flex; flex-direction: column; gap: 2px; } .fname .strong { font-size: 15px; font-weight: 700; color: var(--gray-900); }
.fval input { width: 100%; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--gray-300); border-radius: 14px; font: inherit; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-900); }
.fval input:focus { outline: none; border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(87, 197, 231, 0.45); }
.fbasis select { width: 100%; min-height: 44px; border-radius: 14px; border: 1.5px solid var(--gray-300); padding: 0 12px; font: inherit; font-size: 15px; background: #fff; }
.fsrc { color: var(--gray-800); } .flast { color: var(--gray-700); font-size: 15px; }
@media (max-width: 900px) { .frow { grid-template-columns: 1fr 1fr; } .frow.fhead { display: none; } .fsrc, .fname { grid-column: 1 / -1; } }

/* Patients */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--gray-300); background: #fff; color: var(--gray-700); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.chip.active { background: var(--cyan-500); border-color: var(--cyan-500); color: #fff; }
.bar { width: 90px; height: 8px; border-radius: 999px; background: var(--gray-200); overflow: hidden; display: inline-block; } .bar > span { display: block; height: 100%; background: var(--cyan-500); border-radius: 999px; }
table.t tr.attention td { background: var(--red-100); }

/* Statement lines */
.ln { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 14px 24px; border-bottom: 1px solid var(--gray-200); font-variant-numeric: tabular-nums; }
.ln .s { font-size: 12.5px; font-weight: 700; color: var(--gray-600); } .ln .l { font-size: 15px; font-weight: 600; color: var(--gray-900); }
.ln .a { font-size: 16px; font-weight: 600; color: var(--gray-900); text-align: right; white-space: nowrap; } .ln .i { grid-column: 2 / 4; font-size: 13px; color: var(--gray-700); }
.ln.sub { background: var(--gray-50); } .ln.sub .l, .ln.sub .a { font-weight: 800; }
.ln.total { background: var(--cyan-50); border-bottom: 0; border-radius: 0 0 20px 20px; } .ln.total .l { font-size: 20px; font-weight: 500; } .ln.total .a { font-size: 26px; color: var(--cyan-800); }

/* Home */
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--gray-200); } .step:last-child { border-bottom: 0; }
.step.needs { background: var(--amber-100); }
.step-state { width: 112px; font-size: 14px; font-weight: 700; } .step-state.done { color: var(--green-700); } .step-state.needs { color: var(--amber-700); } .step-state.waiting { color: var(--gray-600); }
.step-text { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; } .step-title { font-size: 16px; font-weight: 700; color: var(--gray-900); }
.flags { list-style: none; margin: 0; padding: 0; } .flag { display: flex; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--gray-200); align-items: flex-start; } .flag:last-child { border-bottom: 0; }
.kv { margin: 0; padding: 8px 24px; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; font-variant-numeric: tabular-nums; }
.kv dt { padding: 12px 0; border-bottom: 1px solid var(--gray-200); font-size: 15px; } .kv dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--gray-200); font-size: 15px; font-weight: 700; color: var(--gray-900); text-align: right; }
.kv dt:nth-last-of-type(1), .kv dd:nth-last-of-type(1) { border-bottom: 0; } .kv dd.big { font-size: 24px; font-weight: 500; color: var(--cyan-700); }
.card-foot { padding: 16px 24px; border-top: 1px solid var(--gray-200); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--gray-50); border-radius: 0 0 20px 20px; }

/* Plan */
.bandbar { position: relative; height: 56px; margin: 8px 0; } .bandbar .track { position: absolute; top: 18px; left: 0; right: 0; height: 12px; border-radius: 999px; background: var(--gray-100); }
.bandbar .zone { position: absolute; top: 18px; height: 12px; background: var(--green-100); border: 1px solid var(--green-700); box-sizing: border-box; }
.bandbar .mark { position: absolute; top: 10px; width: 4px; height: 28px; margin-left: -2px; border-radius: 2px; background: var(--cyan-700); }
.bandbar .tick { position: absolute; top: 40px; transform: translateX(-50%); font-size: 12.5px; color: var(--gray-700); }
table.t tr.plan-row td { background: var(--gray-50); }
.plan-input { width: 72px; min-height: 40px; padding: 0 10px; border: 1.5px solid var(--cyan-300); border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; text-align: right; color: var(--gray-900); background: #fff; }
table.t.compact th, table.t.compact td { padding-left: 10px; padding-right: 10px; }
table.t.compact th { white-space: normal; line-height: 1.2; }
.filters { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 18px 0 6px; } .filters .field { min-width: 160px; }
.row-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.nowrap { white-space: nowrap; }
table.t.wide { min-width: 720px; }
table.t select { min-height: 36px; padding: 0 10px; border: 1.5px solid var(--gray-300); border-radius: 10px; font: inherit; font-size: 14px; color: var(--gray-900); background: #fff; max-width: 100%; }

/* Month figures: week grid and autosave (P1-19) */
table.t.weeks th.this-week, table.t.weeks td.this-week { background: var(--cyan-50); }
table.t.weeks th .wk-now, table.t.weeks th .wk-part { display: block; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; }
table.t.weeks th .wk-now { color: var(--cyan-700, var(--cyan-500)); }
table.t.weeks th .wk-part { color: var(--gray-500, var(--gray-600)); }
table.t.weeks th.wk-name { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--gray-800); background: #fff; white-space: normal; }
table.t.weeks th.wk-name .small { display: block; font-weight: 400; }
table.t.weeks .wk-total { font-size: 16px; }
input.wcell { width: 84px; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--gray-300); border-radius: 12px; font: inherit; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-900); background: #fff; }
input.wcell:focus { outline: none; border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(87, 197, 231, 0.45); }
input.wcell:disabled { background: var(--gray-50); color: var(--gray-700); }
.field-group { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gray-700); }
.figures input.saved, .week-grid input.saved { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15); }
.figures input.saving, .week-grid input.saving { opacity: 0.7; }
.figures input[aria-invalid="true"], .week-grid input[aria-invalid="true"] { border-color: var(--red-500, #dc2626); }
.figures input[readonly] { background: var(--gray-50); color: var(--gray-700); }
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--cyan-700, var(--cyan-500)); text-decoration: underline; cursor: pointer; }