:root { --blue:#1f5f8b; --blue-dark:#174a6c; --bg:#f4f6f8; --border:#d6dde3; --text:#1d2730; --muted:#5d6b77; --red:#b42318; --amber:#a15c00; --green:#1e7a3c; }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--text); background:var(--bg); }
a { color: var(--blue); }
main { max-width: 1200px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.6rem; margin: .4em 0; } h2 { font-size: 1.15rem; margin: .8em 0 .4em; } h3 { font-size: 1rem; margin: .6em 0 .3em; }
.env-banner { background:#7a1d1d; color:#fff; text-align:center; font-weight:600; padding:4px; font-size:.85rem; }
/* Layout: left sidebar (folds into a menu button on small screens; no JavaScript needed) */
.shell { display:grid; grid-template-columns: 236px minmax(0, 1fr); min-height:100vh; }
.main-col { min-width:0; }
.sidebar { background:var(--blue); color:#fff; padding:14px 12px; position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; }
.sidebar-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.sidebar .brand, .simple-head .brand { color:#fff; font-weight:700; font-size:1.15rem; text-decoration:none; }
.sidebar .search input { width:100%; box-sizing:border-box; padding:7px 10px; border-radius:6px; border:0; font:inherit; }
.sidenav { display:flex; flex-direction:column; gap:2px; }
.sidenav a { color:#fff; text-decoration:none; padding:8px 10px; border-radius:6px; display:flex; justify-content:space-between; align-items:center; gap:6px; }
.sidenav a:hover, .sidenav a:focus-visible { background:var(--blue-dark); }
.sidenav a.active { background:#fff; color:var(--blue); font-weight:600; }
.sidenav .group { margin:12px 10px 2px; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; opacity:.8; }
.sidenav .who { font-weight:600; }
.sidenav .logout { margin:0; padding:4px 10px; }
.sidenav .logout .link, .simple-head .link { color:#fff; }
.badge { display:inline-block; background:var(--red); color:#fff; border-radius:999px; padding:0 7px; font-size:.75rem; font-weight:700; line-height:1.5; min-width:1.5em; text-align:center; }
.nav-toggle-btn { display:none; }
.visually-hidden { position:absolute !important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.simple-head { display:flex; justify-content:space-between; align-items:center; background:var(--blue); color:#fff; padding:10px 16px; }
.card { background:#fff; border:1px solid var(--border); border-radius:8px; padding:12px 16px; margin-bottom:16px; }
.card.narrow { max-width: 640px; }
/* min(…, 100%) lets columns shrink on narrow phones instead of overflowing the screen */
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap:16px; align-items:start; }
.cols { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 16px; }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid > *, .cols > * { min-width:0; }
.card p, .card dd, .marker-row input { overflow-wrap:anywhere; }
/* Wide tables scroll sideways on small screens instead of squashing words */
.card > .table, main > .table { display:block; overflow-x:auto; }
.table th, .table td { word-break:normal; overflow-wrap:normal; }
.page-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 16px; }
.btn { display:inline-block; padding:8px 14px; border-radius:6px; border:1px solid var(--border); background:#fff; color:var(--text); text-decoration:none; cursor:pointer; font-size:1rem; }
.btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.primary:hover { background:var(--blue-dark); }
.btn.danger { background:var(--red); border-color:var(--red); color:#fff; }
button.link { background:none; border:0; padding:0; color:var(--blue); text-decoration:underline; cursor:pointer; font-size:inherit; }
form.inline { display:inline; }
.field { margin-bottom: 12px; }
.field label { display:block; font-weight:600; margin-bottom:3px; }
.field.required > label::after { content:" *"; color: var(--red); }
.field input[type=text], .field input[type=email], .field input[type=date], .field input[type=number], .field input[type=password], .field input[type=file], .field select, .field textarea, .inline-form input, .inline-form select { width:100%; padding:8px; border:1px solid var(--border); border-radius:6px; font: inherit; background:#fff; }
.inline-form { display:flex; gap:8px; margin-bottom:12px; } .inline-form input { flex:1; } .inline-form select { width:auto; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.error { color: var(--red); font-size:.9rem; }
.help { color: var(--muted); display:block; font-size:.85rem; }
.muted { color: var(--muted); }
.msg { padding:10px 14px; border-radius:6px; margin-bottom:12px; border:1px solid; }
.msg-success { background:#ecf8f0; border-color:#a6dbb7; }
.msg-error { background:#fdecea; border-color:#f3b4ae; }
.msg-warning { background:#fff6e5; border-color:#f2cf8c; }
.table { width:100%; border-collapse:collapse; background:#fff; }
.table th, .table td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
.table.compact { width:auto; margin: 8px 0; }
.tag { display:inline-block; padding:1px 8px; border-radius:10px; background:#e8eef3; font-size:.85rem; }
.tag-draft, .tag-warning { background:#fff1d6; color:var(--amber); }
.tag-finalised, .tag-ok { background:#e2f4e8; color:var(--green); }
.tag-danger { background:#fde3e1; color:var(--red); }
.patient-banner { background:#fff; border:1px solid var(--border); border-left:6px solid var(--blue); border-radius:8px; padding:10px 14px; margin-bottom:12px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.patient-banner > div { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; }
.patient-banner .pname { font-size:1.2rem; }
.patient-banner .ref { font-family: ui-monospace, monospace; }
.warnings { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.warnings li { padding:2px 10px; border-radius:10px; font-weight:600; font-size:.9rem; }
.w-danger { background:#fde3e1; color:var(--red); }
.w-warning { background:#fff1d6; color:var(--amber); }
dl.kv { display:grid; grid-template-columns: 150px 1fr; gap:4px 12px; margin:0; } dl.kv dt { color: var(--muted); } dl.kv dd { margin:0; }
ul.plain { list-style:none; padding:0; } ul.plain li { padding:4px 0; border-bottom:1px solid var(--border); }
.inactive { opacity:.55; }
.overdue a { color: var(--red); font-weight:600; }
.step h2 .num { display:inline-block; width:1.6em; height:1.6em; line-height:1.6em; text-align:center; border-radius:50%; background:var(--blue); color:#fff; margin-right:6px; font-size:.9rem; }
.form-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
.form-actions.sticky { position:sticky; bottom:0; background:var(--bg); padding:10px 0; border-top:1px solid var(--border); }
.photos { display:flex; flex-wrap:wrap; gap:12px; }
.photos figure { margin:0; width:220px; } .photos img { width:220px; height:165px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }
.photos figcaption { font-size:.85rem; color:var(--muted); }
.addendum { border-left:4px solid var(--amber); padding-left:10px; margin-bottom:10px; }
.pager { margin-top: 10px; }
.small-link { font-size:.85rem; font-weight:normal; margin-left:8px; }
.tag-booked { background:#e3eefb; color:var(--blue); }
.tag-attended { background:#e2f4e8; color:var(--green); }
.tag-cancelled, .tag-dna { background:#fde3e1; color:var(--red); }
.appt-cancelled td, .appt-dna td { opacity:.6; }
.tag-inv-draft { background:#fff1d6; color:var(--amber); }
.tag-inv-issued { background:#e3eefb; color:var(--blue); }
.tag-inv-void { background:#fde3e1; color:var(--red); }
details summary { cursor:pointer; color:var(--blue); margin:8px 0; }
/* Step navigation */
.steps { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 14px; position:sticky; top:0; z-index:5; background:var(--bg); padding:6px 0; }
.steps a, .steps span { padding:4px 10px; border-radius:14px; background:#e3eefb; color:var(--blue); text-decoration:none; font-size:.9rem; }
.steps span { background:#e2f4e8; color:var(--green); }
.step { scroll-margin-top:60px; }
.history-summary { background:#f7fafc; border-radius:6px; padding:10px 12px; }

/* SOAPE */
fieldset.soape { border:1px solid var(--border); border-left:5px solid var(--blue); border-radius:6px; margin:0 0 14px; padding:8px 14px; min-width:0; }  /* min-width: let the contents (diagrams) shrink on phones */
fieldset.soape legend { font-weight:700; color:var(--blue); padding:0 6px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 12px; }
.chip { border:1px solid #b9cfe4; background:#f3f8fd; color:var(--blue-dark); border-radius:14px; padding:4px 10px; font-size:.85rem; cursor:pointer; }
.chip:hover { background:#e3eefb; } .chip.used { background:#e2f4e8; border-color:#a6dbb7; color:var(--green); }
.soape-h { background:#eef4fa; color:var(--blue-dark); padding:4px 8px; border-radius:4px; margin-top:16px; }
ul.exam { margin:4px 0 8px; }
h4 { margin:.6em 0 .2em; font-size:.95rem; }

/* Foot diagrams */
.foot-diagrams { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:8px 0; }
.foot-diagrams.compact { grid-template-columns:repeat(4, 1fr); gap:4px; }
.foot-figure { margin:0; text-align:center; }
.foot-figure figcaption { font-size:.85rem; font-weight:600; color:var(--muted); }
svg.foot { width:100%; height:auto; max-height:420px; background:#fbfcfd; border:1px solid var(--border); border-radius:8px; touch-action:manipulation; }
.editable svg.foot { cursor:crosshair; }
svg.foot .toe, svg.foot .sole-outline { fill:#f6e1d3; stroke:#9b7560; stroke-width:1.6; }
svg.foot .nail { fill:#fbefe9; stroke:#b58d78; stroke-width:1.2; }
svg.foot .pad { fill:#efcfbd; stroke:none; opacity:.8; }
svg.foot .contour { fill:none; stroke:#c9a796; stroke-width:1.2; stroke-dasharray:4 4; }
svg.foot .side-label { font-size:10px; fill:#8a97a3; }
svg.foot .toe-join { fill:none; stroke:#f6e1d3; stroke-width:5; }
svg.foot .marker circle { stroke:#fff; stroke-width:2; fill:#5d6b77; }
svg.foot .marker text { font-size:11px; font-weight:700; fill:#fff; pointer-events:none; }
svg.foot circle.ghost { fill:none; stroke:#8a97a3; stroke-width:2; stroke-dasharray:3 2; }
svg.foot .marker-corn circle { fill:#8e44ad; } svg.foot .marker-callus circle { fill:#b7791f; }
svg.foot .marker-thickened_nail circle, svg.foot .marker-involuted_nail circle { fill:#2b6cb0; }
svg.foot .marker-fungal_nail circle, svg.foot .marker-fungal_skin circle { fill:#2f855a; }
svg.foot .marker-wound circle, svg.foot .marker-redness circle { fill:#c53030; }
svg.foot .marker-pressure circle, svg.foot .marker-bruising circle { fill:#6b46c1; }
svg.foot .marker-verruca circle, svg.foot .marker-fissure circle, svg.foot .marker-blister circle, svg.foot .marker-swelling circle { fill:#dd6b20; }
.diagram-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:8px; }
.diagram-toolbar select { padding:8px; border:1px solid var(--border); border-radius:6px; font:inherit; max-width:100%; }
ol.marker-list { padding-left:1.6em; }
.marker-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.marker-row select, .marker-row input { padding:6px; border:1px solid var(--border); border-radius:6px; font:inherit; }
.marker-row input { flex:1; min-width:180px; }
.marker-where { font-weight:600; min-width:120px; }
.marker-row.flash { background:#fff6e5; }
ul.marker-legend { columns:2; font-size:.9rem; padding-left:1.2em; }

/* Referral letters (on-screen preview) */
.letter-wrap { background:#e9edf1; padding:12px; border-radius:8px; overflow-x:auto; margin-bottom:16px; }
.letter { background:#fff; max-width:800px; margin:0 auto; padding:28px 36px; box-shadow:0 1px 4px rgba(0,0,0,.15); position:relative; line-height:1.5; }
.letter-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; border-bottom:3px solid var(--blue); padding-bottom:6px; margin-bottom:24px; }
.letter-brand { font-size:1.6rem; font-weight:700; color:var(--blue); }
.letter-contact { text-align:right; font-size:.85rem; color:#333; }
.letter-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-bottom:12px; }
.letter-date { text-align:right; }
.letter-subject { font-weight:700; }
.letter-flag { font-weight:700; color:var(--red); }
.letter-h { color:var(--blue); margin:12px 0 2px; }
.letter-signature { margin-top:28px; }
.letter-stamp { position:absolute; top:35%; left:0; right:0; text-align:center; transform:rotate(-25deg); font-size:2rem; font-weight:700; color:rgba(180,35,24,.16); pointer-events:none; }
textarea.letter-body { font-family: Arial, Helvetica, sans-serif; line-height:1.45; }
.tag-ref-draft { background:#fff1d6; color:var(--amber); } .tag-ref-approved { background:#e2f4e8; color:var(--green); }
.tag-ref-withdrawn { background:#fde3e1; color:var(--red); }
.tag-urgency-urgent { background:#fde3e1; color:var(--red); font-weight:700; } .tag-urgency-routine { background:#e3eefb; color:var(--blue); }
.field ul { list-style:none; padding:0; margin:0; } .field ul li label { font-weight:normal; display:flex; gap:6px; align-items:baseline; margin:3px 0; }

/* Compare */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.print-header { display:none; }

details.previous { background:#f7fafc; }
details.previous summary { font-weight:600; }
code.big { font-size:1.3rem; background:#f0f3f6; padding:2px 8px; border-radius:4px; }
.small { font-size:.85rem; }
@media (max-width: 900px) {
  .shell { display:block; }
  .sidebar { position:static; height:auto; padding:8px 10px; gap:8px; }
  .nav-toggle-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.6); border-radius:6px; padding:4px 10px; cursor:pointer; }
  .sidebar:has(.nav-toggle:focus-visible) .nav-toggle-btn { outline:2px solid #fff; outline-offset:2px; }
  .sidenav { display:none; }
  .nav-toggle:checked ~ .sidenav { display:flex; }
  .foot-diagrams, .foot-diagrams.compact { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .compare { grid-template-columns:1fr; }
  ul.marker-legend { columns:1; }
}
@media (max-width: 700px) {
  .steps { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }  /* one scrolling row on phones */
  .steps a, .steps span { white-space:nowrap; flex:0 0 auto; }
  main { padding:10px; }
  .card { padding:10px 12px; }
  .inline-form { flex-wrap:wrap; }
  .page-head h1 { font-size:1.3rem; }
  .patient-banner .warnings { width:100%; }
  /* Calendar: one stacked block per appointment */
  tr.appt td { display:block; border-bottom:0; padding:2px 8px; }
  tr.appt { display:block; border-bottom:1px solid var(--border); padding:6px 0; }
  td.time { width:auto; }
  dl.kv { grid-template-columns: 110px 1fr; }
  .table { font-size:.9rem; }
}
@media print {
  .sidebar, .simple-head, .env-banner, .actions, form, .btn, .msg, details summary, .steps, .no-print { display:none !important; }
  body { background:#fff; font-size:11pt; }
  main { max-width:none; padding:0; }
  .card { border:0; padding:0; margin-bottom:8px; }
  .print-header { display:block; border-bottom:1px solid #000; margin-bottom:6px; padding-bottom:4px; }
  .photos img { width:160px; height:120px; }
  .foot-diagrams, .foot-diagrams.compact { grid-template-columns:repeat(4, 1fr); }
  svg.foot { max-height:260px; border:0; }
  .compare { grid-template-columns:1fr 1fr; }
  .soape-h { background:none; border-bottom:1px solid #999; padding:0; }
  .foot-diagrams { break-inside:avoid-page; }
}
td.time { white-space:nowrap; font-weight:600; width:120px; }

/* Electronic consent signature */
.signature-pad canvas { display:block; width:100%; max-width:600px; aspect-ratio:3 / 1; border:1px dashed #888; border-radius:6px; background:#fff; touch-action:none; margin:6px 0; }
.signature-thumb { max-width:180px; height:auto; border:1px solid #ddd; background:#fff; margin-top:4px; }

/* Treatments performed (visit form) */
.treatment-picks .label { display:block; font-weight:600; margin-bottom:3px; }
.treatment-picks label.check { display:flex; gap:8px; align-items:baseline; font-weight:normal; margin:4px 0; padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:#fff; }
.treatment-picks label.check:has(input:checked) { border-color: var(--blue); background:#eef5fa; }
ul.treatments-done { margin:0 0 6px; padding-left:20px; }

/* Dashboard */
.quick-actions { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap:10px; margin:10px 0 16px; }
.quick-actions .qa { display:flex; flex-direction:column; gap:2px; padding:12px 14px; background:#fff; border:1px solid var(--border); border-left:4px solid var(--blue); border-radius:8px; text-decoration:none; color:var(--text); }
.quick-actions .qa:hover, .quick-actions .qa:focus-visible { border-color:var(--blue); background:#eef5fa; }
.quick-actions .qa strong { color:var(--blue); }
.quick-actions .qa span { font-size:.85rem; color:var(--muted); }
.card.attention.has-items { border-left:4px solid var(--red); }
.attention-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.attention-list a { color:var(--red); text-decoration:none; } .attention-list a:hover { text-decoration:underline; }

/* Patient profile tabs */
.patient-head { display:flex; justify-content:flex-end; margin:8px 0; }
.tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin:8px 0 16px; overflow-x:auto; scrollbar-width:thin; }
.tabs a { padding:8px 14px; text-decoration:none; color:var(--muted); border-radius:6px 6px 0 0; white-space:nowrap; margin-bottom:-2px; border-bottom:2px solid transparent; }
.tabs a:hover { color:var(--blue); background:#eef5fa; }
.tabs a.active { color:var(--blue); font-weight:600; border-bottom-color:var(--blue); background:#fff; }

/* Patient list: sliding preview panel */
td.row-actions { white-space:nowrap; text-align:right; } td.row-actions .btn { margin-left:4px; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(16,32,48,.35); z-index:40; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(440px, 100%); background:#fff; z-index:41; box-shadow:-8px 0 24px rgba(0,0,0,.18); padding:16px 18px; overflow-y:auto; box-sizing:border-box; animation:drawer-in .18s ease-out; }
.drawer-close { float:right; }
.drawer .panel-patient h2 { margin-top:4px; }
.drawer .warnings { margin:8px 0; }
.panel-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
body.drawer-open { overflow:hidden; }
@keyframes drawer-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
@media (prefers-reduced-motion: reduce) { .drawer { animation:none; } }

/* Duplicate check and merge */
.field > .label { display:block; font-weight:600; margin-bottom:3px; }
.field label.check { display:flex; gap:8px; align-items:baseline; font-weight:normal; margin:4px 0; }
table.compare th { width:30%; text-align:left; font-weight:600; color:var(--muted); }
table.compare tr.differs td { background:#fff4e0; }

/* Notes assistant */
.assist-row textarea { width:100%; box-sizing:border-box; padding:8px; border:1px solid var(--border); border-radius:6px; font:inherit; }
.assist-row.has-flags { border-left-color: var(--red); }

/* Patient forms (public) and quick booking */
.intake-brand { font-weight:700; color:var(--blue); font-size:1.2rem; margin:0 0 6px; }
.intake .ynu { display:flex; flex-wrap:wrap; gap:6px 18px; margin:4px 0 8px; }
.intake .ynu label.check { margin:0; }
.intake fieldset.question legend { font-weight:600; color:var(--text); }
.intake-steps span.current { background:var(--blue); color:#fff; }
.privacy-notice { background:#f6f9fb; border:1px solid var(--border); border-radius:6px; padding:8px 14px; margin:10px 0; }
.match-list { list-style:none; padding:0; } .match-list li { margin:6px 0; }