/* =====================================================================
   Samarth IVF - Pediatric Division
   Design system: brand tokens, layout shell, components
   Palette locked to the official Samarth IVF brand guidelines.
   ===================================================================== */

:root {
  /* Brand */
  --purple-dark: #563084;
  --purple-vivid: #8b2b89;
  --lavender: #fae8ff;
  --slate: #334155;
  --white: #ffffff;

  /* Derived tints (same hues, never new brand colours) */
  --purple-dark-90: #5f3a8d;
  --purple-dark-12: rgba(86, 48, 132, 0.12);
  --purple-dark-06: rgba(86, 48, 132, 0.06);
  --lavender-deep: #f2d9fb;
  --slate-60: #64748b;
  --slate-40: #94a3b8;
  --line: #e7e2f0;

  /* Functional (kept desaturated so brand purple stays dominant) */
  --ok: #15803d;
  --ok-bg: #eafaf0;
  --warn: #b45309;
  --warn-bg: #fdf5e6;
  --danger: #b91c1c;
  --danger-bg: #fdecec;

  --grad-brand: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple-vivid) 100%);
  --grad-card: linear-gradient(180deg, var(--lavender) 0%, var(--white) 70%);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(51, 65, 85, 0.06), 0 1px 3px rgba(51, 65, 85, 0.08);
  --shadow-md: 0 6px 20px rgba(86, 48, 132, 0.10);
  --sidebar-w: 246px;

  --font-display: 'K2D', 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', 'Poppins', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
  background: #f7f4fb;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--purple-dark);
  margin: 0 0 .5rem;
  line-height: 1.25;
}
h1 { font-size: 1.65rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }

a { color: var(--purple-vivid); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0 0 .75rem; }
small, .small { font-size: .8rem; }
.muted { color: var(--slate-60); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- shell */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  /* Flat, not a gradient: navigation should sit back, not shimmer. */
  background: var(--purple-dark);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.sidebar .brand .logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  color: var(--white);
  letter-spacing: .2px;
  display: block;
}
.sidebar .brand .division {
  font-size: .74rem;
  color: var(--lavender);
  text-transform: uppercase;
  letter-spacing: 1.1px;
}
.sidebar nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.sidebar nav .group {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(250, 232, 255, .72);
  margin: 14px 10px 6px;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
  font-size: .875rem;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.sidebar nav a.active {
  background: var(--white);
  color: var(--purple-dark);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.sidebar nav a .ico { width: 18px; text-align: center; }
.sidebar .foot {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .72rem;
  color: var(--lavender);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .page-title { font-family: var(--font-display); font-weight: 700; color: var(--purple-dark); font-size: 1.02rem; }
.topbar .spacer { flex: 1; }
.topbar .who { text-align: right; line-height: 1.25; }
.topbar .who b { display: block; color: var(--purple-dark); font-size: .86rem; }
.topbar .who span { font-size: .72rem; color: var(--slate-60); text-transform: capitalize; }
.avatar-initials {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-brand); color: var(--white);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
}

.content { padding: 22px 24px 48px; max-width: 1400px; width: 100%; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head .spacer { flex: 1; }
.page-head p { margin: 0; color: var(--slate-60); }

/* ------------------------------------------------------------ surfaces */
/* Cards are plain white with one hairline. Purple is reserved for the things
   that act - the primary button, the active nav item, a live token number.
   Tinting every surface was what made the screens feel crowded. */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 20px;
  margin-bottom: 16px;
}
.card.tinted { background: var(--white); }
.card > header {
  display: flex; align-items: center; gap: 12px;
  margin: -20px -20px 16px; padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card > header h2, .card > header h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: .01em;
}
.card > header .spacer { flex: 1; }

.hero {
  /* Flat, to match the sidebar. One solid brand block per screen, not two
     competing gradients. */
  background: var(--purple-dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: none;
}
.hero h1, .hero h2 { color: var(--white); }
.hero .tagline { color: var(--lavender); font-size: .8rem; letter-spacing: .3px; }

/* A callout is information, not an alert: neutral by default, colour only
   when something actually needs attention (warn / danger / ok below). */
.callout {
  background: #f8fafc;
  border-left: 3px solid var(--slate-40);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px;
  margin: 0 0 14px;
  color: var(--slate);
}
.callout.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.callout.danger { background: var(--danger-bg); border-left-color: var(--danger); color: #7f1d1d; }
.callout.ok { background: var(--ok-bg); border-left-color: var(--ok); }
.callout strong { color: inherit; }
.callout ul { margin: .35rem 0 0; padding-left: 1.1rem; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.side { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
/* The consultation screen needs more room on the left: the prescription table
   carries eight columns and gets squeezed unreadable at the 2fr split. */
.grid.side.wide { grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr); }

.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple-dark);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.stat .label { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--slate-60); }
.stat .value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--purple-dark); line-height: 1.15; }
.stat.accent { border-left-color: var(--purple-vivid); }
.stat.accent .value { color: var(--purple-vivid); }

/* ------------------------------------------------------------- tables */
table.data { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.data th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-60);
  background: none;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* Zebra striping on top of tinted cards was one pattern too many; a hairline
   between rows separates them just as well and reads far quieter. */
table.data tbody tr:hover { background: #faf9fc; }
table.data .empty { text-align: center; color: var(--slate-60); padding: 26px; }
.table-wrap { overflow-x: auto; }

/* ------------------------------------------------- prescription table */
/* Eight columns of inputs in one row. Without a min-width the table obeys
   width:100% and squeezes every cell instead of letting .table-wrap scroll,
   which is what turned "5 ml" into "5 r" and "After food" into "A". The
   padding here is tighter than the general table so the whole row fits on a
   laptop screen without scrolling at all. */
/* 745px is what the seven columns need at their smallest readable size. Below
   that .table-wrap scrolls rather than squeezing the cells - a 1366 laptop
   clears it, so in practice nobody scrolls. */
#rxTable { min-width: 745px; }
#rxTable th, #rxTable td { padding: 8px 5px; }
#rxTable th:first-child, #rxTable td:first-child { padding-left: 12px; }
#rxTable th:last-child, #rxTable td:last-child { padding-right: 12px; }
#rxTable input, #rxTable select {
  padding: 8px 8px;
  font-size: .85rem;
}
/* A number field wastes ~24px on spinner arrows it does not need here. */
#rxTable input[type=number] { -moz-appearance: textfield; }
#rxTable input[type=number]::-webkit-outer-spin-button,
#rxTable input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#rxTable .rx-hint { font-size: .72rem; line-height: 1.35; margin-top: 3px; }
/* "+ instruction" is a quiet affordance, not a button competing with the row. */
#rxTable .rx-note-add {
  background: none;
  border: none;
  padding: 3px 0 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  color: var(--slate-40);
  cursor: pointer;
}
#rxTable .rx-note-add:hover { color: var(--purple-vivid); text-decoration: underline; }
#rxTable .rx-instr { margin-top: 4px; font-size: .8rem; }
#rxTable [hidden] { display: none !important; }

/* -------------------------------------------------------------- forms */
.field { margin-bottom: 14px; }
.field label, .label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--slate-60);
  margin-bottom: 5px;
}
.field .hint { font-size: .74rem; color: var(--slate-60); margin-top: 4px; }
.req::after { content: ' *'; color: var(--purple-vivid); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--slate);
  background: var(--white);
  border: 1px solid #d9d2e6;
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--purple-vivid);
  box-shadow: 0 0 0 3px rgba(139, 43, 137, .14);
}
input[readonly], input:disabled, select:disabled { background: #f5f3f8; color: var(--slate-60); }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1 1 180px; min-width: 0; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .78rem;
  cursor: pointer;
  color: var(--slate);
}
.chip:hover { border-color: var(--purple-vivid); color: var(--purple-vivid); }
/* Names the diagnosis a chip row belongs to, so it is obvious the suggestions
   changed because of the diagnosis and not at random. */
.chip-label {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--purple-dark);
  background: var(--lavender);
  border-radius: 999px;
}

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .86rem;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--purple-dark); color: var(--white); }
.btn-primary:hover { background: var(--purple-vivid); color: var(--white); box-shadow: var(--shadow-md); }
.btn-accent { background: var(--purple-vivid); color: var(--white); }
.btn-accent:hover { background: var(--purple-dark); color: var(--white); }
.btn-ghost { background: var(--white); color: var(--purple-dark); border-color: #d9d2e6; }
.btn-ghost:hover { background: var(--lavender); border-color: var(--purple-vivid); color: var(--purple-dark); }
.btn-danger { background: var(--white); color: var(--danger); border-color: #f0c9c9; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: 6px 11px; font-size: .78rem; }
.btn-lg { padding: 12px 22px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------- badges */
.badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--lavender);
  color: var(--purple-dark);
  border: 1px solid var(--lavender-deep);
}
.badge.vivid { background: var(--purple-vivid); color: var(--white); border-color: var(--purple-vivid); }
.badge.solid { background: var(--purple-dark); color: var(--white); border-color: var(--purple-dark); }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: #cdeed9; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: #f2e2c2; }
.badge.danger { background: var(--danger-bg); color: var(--danger); border-color: #f3cfcf; }
.badge.grey { background: #f1f5f9; color: var(--slate-60); border-color: #e2e8f0; }

/* --------------------------------------------------------- patient bits */
.photo {
  width: 56px; height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--lavender-deep);
  background: var(--lavender);
  flex: 0 0 auto;
}
.photo.lg { width: 92px; height: 92px; border-radius: 16px; }
.photo.sm { width: 38px; height: 38px; border-radius: 9px; }
.photo-ph {
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
  color: var(--purple-dark); background: var(--lavender);
}

.patient-line { display: flex; align-items: center; gap: 12px; }
.patient-line .name { font-family: var(--font-display); font-weight: 700; color: var(--purple-dark); }
.patient-line .meta { font-size: .78rem; color: var(--slate-60); }

.token-no {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--white);
  background: var(--purple-dark);
  border-radius: 10px;
  min-width: 42px;
  padding: 6px 8px;
  text-align: center;
  display: inline-block;
}
.token-no.waiting { background: var(--purple-vivid); }
.token-no.done { background: var(--slate-40); }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: .86rem; }
.kv dt { color: var(--slate-60); }
.kv dd { margin: 0; color: var(--slate); font-weight: 500; }

/* A plain row of readings divided by hairlines - eight tinted chips inside a
   tinted card was three levels of box for one line of numbers. */
.vitals { display: flex; flex-wrap: wrap; gap: 0; }
.vital {
  padding: 2px 18px 2px 0;
  margin-right: 18px;
  min-width: 78px;
  border-right: 1px solid var(--line);
}
.vital:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.vital .k { font-size: .67rem; text-transform: uppercase; letter-spacing: .07em; color: var(--slate-40); }
.vital .v { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--slate); margin-top: 1px; }

/* --------------------------------------------------------------- misc */
.flash-stack { position: fixed; top: 14px; right: 18px; z-index: 60; width: min(380px, calc(100vw - 36px)); }
.flash {
  background: var(--white);
  border-left: 4px solid var(--purple-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 11px 14px;
  margin-bottom: 9px;
  font-size: .86rem;
}
.flash.success { border-left-color: var(--ok); }
.flash.error { border-left-color: var(--danger); }
.flash.info { border-left-color: var(--purple-vivid); }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs a, .tabs button {
  padding: 9px 14px; border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--slate-60);
  border-bottom: 3px solid transparent;
}
.tabs a.active, .tabs button.active { color: var(--purple-dark); border-bottom-color: var(--purple-vivid); }

.divider { height: 1px; background: var(--line); margin: 16px 0; border: 0; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.spark i { flex: 1; background: var(--purple-vivid); border-radius: 2px 2px 0 0; opacity: .8; }

/* Signature thumbnail on the staff screen - a chequer behind it makes the
   transparency obvious, so a bad scan with a white box is easy to spot. */
.sig-thumb {
  height: 34px; width: auto; max-width: 150px; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px; background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%) 0 0/12px 12px,
    linear-gradient(45deg, #f1f5f9 25%, #fff 25%, #fff 75%, #f1f5f9 75%) 6px 6px/12px 12px;
}

/* -------------------------------------------- discharge letter preview */
/* A scaled-down rehearsal of the printed page, so the doctor is not typing
   blind into a form and hoping. */
.letter-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 16px 18px;
  max-height: 560px;
  overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #1a1a1a;
  font-size: .78rem;
  line-height: 1.5;
}
.letter-preview h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.05rem; font-weight: 700; color: #000; margin: 0 0 10px;
}
.letter-preview h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .86rem; font-weight: 700; color: #000; margin: 14px 0 4px;
}
.letter-preview p { margin: 2px 0; }
.letter-preview ul, .letter-preview ol { margin: 4px 0; padding-left: 20px; }
.letter-preview li { margin: 2px 0; }
.letter-preview .empty-note { color: #aaa; font-style: italic; }
.letter-preview .sig { margin-top: 16px; }
.letter-preview .sig .degree { font-size: .72rem; color: #444; }

/* The "+ insert common ..." dropdown that sits under a phrase field. */
.field-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.quick-select {
  font-size: .78rem;
  max-width: 260px;
  padding: 6px 9px;
}

/* ------------------------------------------------ diagnosis tag field */
/* A visit can carry several diagnoses. Each is a tag inside the box, with the
   search input sharing the same frame so it reads as one field. */
.dx-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  background: var(--white);
  border: 1px solid #d9d2e6;
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
  cursor: text;
}
.dx-box:focus-within { border-color: var(--purple-vivid); box-shadow: 0 0 0 3px var(--purple-dark-12); }
.dx-tags { display: contents; }
.dx-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--lavender);
  color: var(--purple-dark);
  border: 1px solid var(--lavender-deep);
  border-radius: 999px;
  padding: 4px 6px 4px 11px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  max-width: 100%;
}
.dx-tag-x {
  border: none;
  background: none;
  color: var(--purple-vivid);
  font-size: 1rem;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
  opacity: .65;
}
.dx-tag-x:hover { opacity: 1; color: var(--danger); }
/* The search input is frameless - the box around it is the field. */
.dx-box .dx-input {
  flex: 1 1 140px;
  min-width: 120px;
  width: auto;
  border: none;
  background: none;
  padding: 5px 2px;
  font-size: .9rem;
}
.dx-box .dx-input:focus { outline: none; box-shadow: none; }

/* ------------------------------------------------- diagnosis typeahead */
.typeahead { position: relative; }
.typeahead-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 290px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 4px;
}
.typeahead-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .86rem;
  line-height: 1.3;
}
.typeahead-opt:hover, .typeahead-opt.active { background: var(--lavender); }
.typeahead-opt.active { box-shadow: inset 0 0 0 1px var(--purple-vivid); }
.typeahead-opt .ta-code {
  flex: 0 0 58px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .76rem;
  color: var(--purple-dark);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.typeahead-opt .ta-name { flex: 1; min-width: 0; color: var(--slate); }
.typeahead-opt .ta-uses {
  flex: 0 0 auto;
  font-size: .7rem;
  color: var(--slate-40);
  font-variant-numeric: tabular-nums;
}
.typeahead-empty {
  padding: 9px 10px;
  font-size: .8rem;
  color: var(--slate-60);
}
.typeahead-empty strong { color: var(--purple-dark); }

@media (max-width: 1000px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3, .grid.side { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; }
  .sidebar nav { display: flex; overflow-x: auto; padding: 8px; }
  .sidebar nav .group, .sidebar .foot { display: none; }
  .sidebar nav a { white-space: nowrap; }
  .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; }
  .content { padding: 16px 14px 40px; }
}
@media print {
  .sidebar, .topbar, .no-print, .flash-stack { display: none !important; }
  body { background: var(--white); }
  .content { padding: 0; }
}


/* ------------------------------------------------- patient photo viewer
 * The thumbnail is too small to judge a rash or a swelling by, so clicking
 * any patient photo opens it at half the screen. Printing is unaffected.
 */
.photo.zoomable { cursor: zoom-in; }
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .72);
  padding: 24px;
}
.photo-viewer[hidden] { display: none; }
.photo-viewer .pv-panel {
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  width: min(50vw, 620px);
  max-width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
}
.photo-viewer .pv-img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
  border-radius: 12px;
  background: #f1f5f9;
}
.photo-viewer .pv-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: var(--slate-60);
}
.photo-viewer .pv-name { font-weight: 600; color: var(--purple-dark); }
.photo-viewer .pv-close {
  margin-left: auto;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
  color: var(--slate-60);
}
.photo-viewer .pv-close:hover { background: #f8fafc; }
@media (max-width: 900px) {
  .photo-viewer .pv-panel { width: 92vw; }
}
@media print { .photo-viewer { display: none !important; } }