/* ============================================================================
   HomeoClinic — design system
   ----------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radius and elevation.
   Every page consumes these tokens; nothing should hard-code a hex value,
   a pixel radius or a font size outside this file.

   Palette: a cool-neutral slate base carrying a deep teal primary, with a
   warm amber reserved exclusively for "today / needs attention" and a blue
   reserved for the ★ highlight. Deliberately not pure white — a clinician
   reads this screen for hours, and #fff at full page width glares.
   ========================================================================== */

:root {
  /* ---- surfaces ---------------------------------------------------------- */
  --bg:             #eceff3;   /* page behind everything */
  --surface:        #ffffff;   /* cards, panels, modals */
  --surface-alt:    #f6f8fa;   /* subtle fill: table headers, inset panels */
  --surface-sunken: #eef2f5;   /* wells, disabled fields */

  /* ---- ink --------------------------------------------------------------- */
  --ink:            #16222c;   /* primary text — 14.8:1 on white */
  --ink-soft:       #43535f;   /* secondary text — 7.95:1 on white */
  --muted:          #66757f;   /* labels, meta, placeholders — 4.76:1 on white, WCAG AA.
                                  Was #6f8090, which measured 4.06:1 and failed AA for body
                                  text. It is used by .sub and every .tbl th, so the failure
                                  was app-wide. Do not lighten it. */

  /* Ink for text sitting ON a filled primary surface. Without this, components
     hardcode #fff. The .85 alpha is the floor that still clears AA on --primary
     (4.89:1); .78 measures 4.39:1 and fails. */
  --on-primary:      #ffffff;
  --on-primary-soft: rgba(255,255,255,.85);

  /* Hairlines and dividers on a filled primary surface. The counterpart to
     --on-primary / --on-primary-soft, which already exist for ink. Decorative
     only — never used to carry meaning, so no contrast floor applies. */
  --on-primary-line: rgba(255,255,255,.16);

  /* ---- lines ------------------------------------------------------------- */
  --line:           #dce3e9;   /* hairlines, card borders */
  --line-strong:    #c3cfd8;   /* input borders, dividers that must read */

  /* ---- primary: deep teal ------------------------------------------------ */
  --primary:        #0d6e66;
  --primary-hover:  #0a564f;
  --primary-soft:   #d7ece9;
  --primary-ink:    #084842;

  /* ---- amber: TODAY / attention. Never decorative. ----------------------- */
  --amber:          #a86a12;
  --amber-hover:    #8a5410;
  --amber-soft:     #fbeeda;
  --amber-ink:      #6f430c;

  /* ---- blue: the ★ highlight on a visit. Never anything else. ------------ */
  --info:           #2456c7;
  --info-soft:      #e6edfb;
  --info-ink:       #1a3f96;

  /* ---- violet: medicine-repeat requests. Never anything else. ------------ */
  --repeat:         #5b3fa8;
  --repeat-soft:    #ebe5f8;
  --repeat-ink:     #452f80;

  /* ---- semantic ---------------------------------------------------------- */
  --mark:           #fdf0b8;   /* search-match highlight */
  --danger:         #b3261e;
  --danger-hover:   #911d17;
  --danger-soft:    #fbe4e2;
  --ok:             #1c7a52;
  --ok-soft:        #dcf0e6;

  /* ---- typography -------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
          system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Scale bumped deliberately — the previous UI ran 8.8px labels and 11px
     body text, which is why it read as cramped rather than dense. */
  --fs-2xs: 11px;    /* micro labels, uppercase eyebrows */
  --fs-xs:  12px;    /* meta, table captions */
  --fs-sm:  13px;    /* dense content: history cards, chips */
  --fs-md:  14.5px;  /* base */
  --fs-lg:  16px;    /* card titles */
  --fs-xl:  19px;    /* page / section headings */
  --fs-2xl: 23px;    /* page title */
  --fs-3xl: 30px;    /* stat numbers */

  --lh-tight: 1.3;
  --lh-body:  1.55;

  --fw-normal: 400;
  --fw-med:    550;
  --fw-semi:   650;
  --fw-bold:   750;

  /* ---- spacing (4px rhythm) ---------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;

  /* Fit-to-viewport vertical rhythm. For full-height screens that must compose
     without scrolling at any height — login now, display.php a candidate later.
     Continuous rather than stepped, so a 360px landscape phone and a 1440px
     monitor are both handled without a breakpoint each. */
  --sp-fit:    clamp(var(--sp-2), 2.4vh, var(--sp-6));   /*  8 → 24px */
  --sp-fit-lg: clamp(var(--sp-3), 3.6vh, var(--sp-8));   /* 12 → 40px */

  /* ---- radius — four steps, nothing else --------------------------------- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ---- elevation --------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(22,34,44,.05);
  --sh-sm: 0 1px 3px rgba(22,34,44,.07), 0 1px 2px rgba(22,34,44,.04);
  --sh-md: 0 4px 14px rgba(22,34,44,.09);
  --sh-lg: 0 16px 44px rgba(22,34,44,.18);

  /* A focus ring must itself be visible: WCAG 2.4.11 wants 3:1 against what it
     sits on. The previous rgba(13,110,102,.22) composited to 1.39:1 on white —
     inputs got away with it because their border also changes on focus, but a
     button had no visible focus at all. Solid teal at full strength, with a
     white inner ring so it reads on dark surfaces too. */
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);

  --t-fast: .12s ease;
  --t-base: .18s ease;
}

/* ============================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semi);
  letter-spacing: -.011em;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

a { color: var(--primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Every number that sits in a column lines up. */
table, .num, .amount, input[type=number] { font-variant-numeric: tabular-nums; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }

/* ============================================================================
   Primitives
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  padding: var(--sp-5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn:hover { background: var(--primary-hover); text-decoration: none; }
.btn:active { transform: translateY(.5px); }

.btn-ghost {
  background: var(--surface);
  color: var(--primary-ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--surface-alt); border-color: var(--primary); }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); }

/* Amber = "needs attention" — used for actions on records that are not yet
   fully real (e.g. converting a pending, unregistered booking) so they read
   as visually distinct from the ordinary teal primary action. */
.btn-amber { background: var(--amber); }
.btn-amber:hover { background: var(--amber-hover); }

.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn-lg { padding: 13px 24px; font-size: var(--fs-lg); }
.btn-block { display: flex; width: 100%; }

label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--ink-soft);
  margin-bottom: var(--sp-1);
  letter-spacing: .005em;
}

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=search], input[type=tel], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus);
}
input::placeholder, textarea::placeholder { color: var(--muted); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  background: var(--surface-sunken);
  color: var(--ink-soft);
  white-space: nowrap;
}
.badge-teal   { background: var(--primary-soft); color: var(--primary-ink); }
.badge-warn   { background: var(--amber-soft);   color: var(--amber-ink); }
.badge-danger { background: var(--danger-soft);  color: var(--danger); }
.badge-ok     { background: var(--ok-soft);      color: var(--ok); }
.badge-info   { background: var(--info-soft);    color: var(--info-ink); }

.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tbl th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl th:first-child { border-top-left-radius: var(--r-xs); }
.tbl th:last-child  { border-top-right-radius: var(--r-xs); }
.tbl td { padding: var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-alt); }
.tbl .num, .tbl .right { text-align: right; }

.muted { color: var(--muted); }
.sub   { color: var(--muted); font-size: var(--fs-sm); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.flash {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-weight: var(--fw-semi);
  font-size: var(--fs-md);
  border: 1px solid transparent;
}
.flash-success { background: var(--ok-soft);     color: var(--ok);     border-color: rgba(28,122,82,.2); }
.flash-error   { background: var(--danger-soft); color: var(--danger); border-color: rgba(179,38,30,.2); }