/* TheClinicue - single stylesheet, no framework, no build step.
   Mobile-first: base rules target 360 px, media queries enhance upward
   (NFR-USA-01). Touch targets are >= 44 px (NFR-USA-03).

   Palette: a calm clinical teal with warm sand accents, chosen over the
   default framework blue because a clinic should feel settled rather than
   corporate, and because warm neutrals read better under the fluorescent
   lighting of a real waiting room. Every text/background pair below meets
   WCAG AA (4.5:1), and status is never carried by colour alone (NFR-USA-05). */

:root {
  /* Brand - teal */
  --brand-900: #06403A;
  --brand-800: #08544C;
  --brand-700: #0B6B61;   /* primary: 5.9:1 on white */
  --brand-600: #0F8A7D;   /* accents and borders only: 4.2:1, fine for non-text */
  --brand-650: #0C7A6E;   /* lightest stop of the button gradient: 5.2:1 with white */
  --brand-300: #7FCFC4;
  --brand-100: #D5EFEB;
  --brand-50:  #EFF9F7;

  /* Accent - warm sand */
  --sand-700: #9A5B08;
  --sand-500: #D98A17;
  --sand-100: #FBEBCF;
  --sand-50:  #FDF6EA;

  /* Semantic */
  --ok-700:   #15803D;
  --ok-100:   #DCF3E4;
  --bad-700:  #B42318;
  --bad-100:  #FBE3E0;

  /* Warm neutrals */
  --ink:      #16211F;
  --ink-2:    #33413E;
  --muted:    #5C6B68;
  --faint:    #667471;   /* 4.9:1 on white - WCAG AA at small sizes */
  --line:     #DDE6E4;
  --line-soft:#EBF1F0;
  --surface:  #FFFFFF;
  --bg:       #F3F7F6;
  --bg-warm:  #FAF7F2;

  --radius:    14px;
  --radius-sm: 9px;
  --radius-xs: 6px;
  --tap: 44px;

  --shadow-xs: 0 1px 2px rgba(6, 64, 58, .06);
  --shadow-sm: 0 1px 3px rgba(6, 64, 58, .08), 0 1px 2px rgba(6, 64, 58, .04);
  --shadow:    0 2px 4px rgba(6, 64, 58, .06), 0 6px 16px -6px rgba(6, 64, 58, .12);
  --shadow-lg: 0 12px 32px -8px rgba(6, 64, 58, .28), 0 4px 10px rgba(6, 64, 58, .10);

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}

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

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 12% -8%, #E4F2EF 0%, rgba(228, 242, 239, 0) 62%),
    radial-gradient(900px 480px at 96% 2%, var(--bg-warm) 0%, rgba(250, 247, 242, 0) 58%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; letter-spacing: -.011em; }
h1 { font-size: 1.55rem; letter-spacing: -.021em; }
h2 { font-size: 1.19rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--brand-700); text-underline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-700); color: #fff; padding: .7rem 1rem;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--brand-600); outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: .45rem .9rem;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 750; font-size: 1.08rem; letter-spacing: -.02em;
  color: var(--brand-700); text-decoration: none; min-height: var(--tap);
}

.nav-toggle {
  margin-left: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1.15rem; color: var(--ink-2);
  min-width: var(--tap); min-height: var(--tap); cursor: pointer;
}
.nav-toggle:hover { background: var(--brand-50); border-color: var(--brand-300); }

.nav { display: none; width: 100%; flex-direction: column; gap: .15rem; padding-bottom: .4rem; }
.nav.open { display: flex; }
.nav a {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 .85rem; border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: .94rem;
  transition: background .14s ease, color .14s ease;
}
.nav a:hover { background: var(--brand-50); color: var(--brand-800); }
.nav a[aria-current="page"] { background: var(--brand-100); color: var(--brand-900); font-weight: 650; }

.topbar-user { display: none; align-items: center; gap: .6rem; }
.topbar-user.show { display: flex; width: 100%; justify-content: space-between; padding-bottom: .4rem; }
.who { font-size: .82rem; color: var(--muted); }
.topbar-user .btn { min-height: var(--tap); }

@media (min-width: 880px) {
  .nav-toggle { display: none; }
  .nav { display: flex; flex-direction: row; width: auto; margin-left: .35rem; padding: 0; gap: .1rem; }
  .topbar-user.show { width: auto; padding: 0; margin-left: auto; }
}

/* ------------------------------------------------------------------ main */

.main { max-width: 1180px; margin: 0 auto; padding: 1.15rem .9rem 3rem; }
.main:focus { outline: none; }
.loading { padding: 3.5rem 1rem; text-align: center; color: var(--muted); }

.page-head { margin-bottom: 1.1rem; }
.page-head h1 { margin-bottom: .2rem; }
.page-head p { color: var(--muted); font-size: .93rem; margin: 0; max-width: 62ch; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem;
  margin-bottom: 1.05rem;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-sub { color: var(--muted); font-size: .87rem; margin: -.3rem 0 .9rem; }

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content. Without this, a wide table or a long <option> label
   pushes the whole page sideways on a narrow screen (NFR-USA-01). */
.grid { display: grid; gap: 1.05rem; }
.grid > * { min-width: 0; }
@media (min-width: 760px)  { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* ----------------------------------------------------------------- forms */

.field { margin-bottom: .95rem; }
label {
  display: block; font-size: .8rem; font-weight: 650; color: var(--ink-2);
  margin-bottom: .34rem; letter-spacing: .012em;
}
input, select, textarea {
  width: 100%; max-width: 100%; min-height: var(--tap);
  padding: .58rem .75rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .14s ease, box-shadow .14s ease;
}
textarea { min-height: 5rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--brand-300); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3.5px rgba(15, 138, 125, .16);
  outline: none;
}
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--bad-700); background: #FFFBFA;
}
.field-error {
  display: block; color: var(--bad-700); font-size: .81rem;
  margin-top: .3rem; font-weight: 600;
}
.hint { color: var(--muted); font-size: .81rem; margin-top: .3rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--tap); padding: .55rem 1.15rem;
  font: inherit; font-size: .94rem; font-weight: 650;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--brand-650) 0%, var(--brand-800) 100%);
  color: #fff; cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: transform .12s ease, box-shadow .14s ease, filter .14s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.07); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); filter: brightness(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn-block { width: 100%; }
/* Compact only where a precise pointer is available. On touch the rule below
   restores the full 44 px target (NFR-USA-03) - dense tables are a desktop
   affordance, not something to inflict on a thumb. */
.btn-sm { min-height: 34px; padding: .28rem .72rem; font-size: .83rem; border-radius: var(--radius-xs); }
@media (pointer: coarse) { .btn-sm { min-height: var(--tap); } }

.btn-ghost {
  background: var(--surface); color: var(--ink-2);
  border-color: var(--line); box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--brand-50); border-color: var(--brand-300);
  color: var(--brand-800); filter: none;
}
.btn-green { background: linear-gradient(180deg, #17853F 0%, #12692F 100%); }
.btn-danger { background: linear-gradient(180deg, #D1362A 0%, var(--bad-700) 100%); }

.btn-row { display: flex; flex-wrap: wrap; gap: .45rem; }

.toolbar { display: flex; flex-wrap: wrap; gap: .55rem; align-items: flex-end; margin-bottom: 1rem; }
.toolbar .field { margin: 0; flex: 1 1 150px; min-width: 0; }

/* ----------------------------------------------------------------- slots */

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem; }
.slot {
  min-height: var(--tap);
  border: 1.5px solid var(--brand-300); border-radius: var(--radius-sm);
  background: var(--brand-50); color: var(--brand-800);
  font: inherit; font-weight: 650; font-size: .95rem;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: transform .12s ease, background .14s ease, box-shadow .14s ease;
}
.slot:hover { background: var(--brand-100); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.slot[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--brand-650) 0%, var(--brand-800) 100%);
  border-color: var(--brand-800); color: #fff; box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-block; padding: .16rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 750; letter-spacing: .028em;
  background: var(--line-soft); color: var(--ink-2); white-space: nowrap;
  border: 1px solid transparent;
}
.badge-BOOKED      { background: var(--brand-100); color: var(--brand-900); border-color: #B6E2DB; }
.badge-CHECKED_IN  { background: var(--ok-100);    color: #106434;          border-color: #B7E3C6; }
.badge-IN_PROGRESS { background: var(--sand-100);  color: var(--sand-700);  border-color: #F0D6A4; }
.badge-COMPLETED   { background: var(--line-soft); color: var(--muted);     border-color: var(--line); }
.badge-CANCELLED   { background: var(--line-soft); color: var(--muted);     border-color: var(--line); }
.badge-NO_SHOW     { background: var(--bad-100);   color: var(--bad-700);   border-color: #F2C6C1; }
.badge-WAITING     { background: var(--brand-100); color: var(--brand-900); border-color: #B6E2DB; }
.badge-CALLED      { background: var(--sand-100);  color: var(--sand-700);  border-color: #F0D6A4; }

/* ---------------------------------------------------------------- lists */

.appt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.appt {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--brand-600);
  border-radius: var(--radius-sm); padding: .8rem .9rem;
  transition: box-shadow .14s ease, transform .12s ease;
}
.appt:hover { box-shadow: var(--shadow-sm); transform: translateX(1px); }
.appt.done { border-left-color: var(--faint); background: #FCFDFD; }
.appt.cancelled { border-left-color: var(--line); opacity: .72; }
.appt-when { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.appt-meta { color: var(--muted); font-size: .855rem; }
/* The booking code is read aloud at the front desk, so it is secondary but
   never faint: --muted clears AA at this size, --faint did not. */
.appt-code { font-family: var(--mono); font-size: .78rem; color: var(--muted); letter-spacing: .02em; }
.appt-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .55rem; }

/* ---------------------------------------------------------------- table */

.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: .885rem; min-width: 560px; }
th, td { text-align: left; padding: .62rem .7rem; vertical-align: middle; }
th {
  font-size: .69rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); background: var(--bg); font-weight: 750;
  border-bottom: 1px solid var(--line);
}
td { border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--brand-50); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- queue */

.ticket-card {
  background: linear-gradient(150deg, var(--sand-50) 0%, #FBEEDA 55%, #F7E4C4 100%);
  border: 1.5px solid #EFD3A2;
  border-radius: var(--radius); padding: 1.15rem; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-sm);
}
.ticket-label {
  font-size: .7rem; letter-spacing: .14em; color: var(--sand-700);
  font-weight: 750; text-transform: uppercase;
}
.ticket-no {
  font-size: 3rem; font-weight: 800; line-height: 1.02; margin: .3rem 0 .2rem;
  color: var(--brand-900); letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.ticket-note { font-weight: 650; color: var(--ink); }
.ticket-sub { color: var(--sand-700); font-size: .85rem; margin-top: .15rem; }

.queue-list { list-style: none; margin: .7rem 0 0; padding: 0; }
.queue-list li {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .15rem; border-bottom: 1px solid var(--line-soft); font-size: .9rem;
}
.queue-list li:last-child { border-bottom: none; }
.queue-list .tk {
  font-weight: 750; min-width: 3.5rem; color: var(--brand-800);
  font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .87rem;
}
.queue-list .wait { margin-left: auto; color: var(--muted); font-size: .8rem; }

.now-serving {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-800) 100%);
  border-radius: var(--radius-sm); padding: .7rem .9rem;
  font-weight: 600; color: var(--brand-100); box-shadow: var(--shadow-sm);
}
.now-serving strong {
  font-size: 1.5rem; color: #fff; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(134px, 1fr)); gap: .7rem; }
.stat {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .8rem .85rem;
  box-shadow: var(--shadow-xs);
}
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand-600);
}
.stat-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .075em;
  color: var(--muted); font-weight: 700;
}
.stat-value {
  font-size: 1.85rem; font-weight: 750; line-height: 1.15;
  letter-spacing: -.028em; color: var(--ink); margin-top: .1rem;
  font-variant-numeric: tabular-nums;
}
.stat-value.good { color: var(--ok-700); }
.stat-value.warn { color: var(--sand-700); }
.stat-value.bad  { color: var(--bad-700); }

.bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; min-width: 70px; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ok-700); }
.bar.warn > span { background: var(--sand-500); }
.bar.bad  > span { background: var(--bad-700); }

/* --------------------------------------------------------------- notice */

.notice {
  border-radius: var(--radius-sm); padding: .75rem .9rem; margin-bottom: .95rem;
  font-size: .91rem; border: 1px solid; border-left-width: 4px;
}
.notice-info    { background: var(--brand-50); border-color: var(--brand-600); color: var(--brand-900); }
.notice-success { background: var(--ok-100);   border-color: var(--ok-700);    color: #0F5A2E; }
.notice-warn    { background: var(--sand-50);  border-color: var(--sand-500);  color: var(--sand-700); }
.notice-error   { background: var(--bad-100);  border-color: var(--bad-700);   color: #8E1C13; }

.empty { text-align: center; padding: 2.4rem 1rem; color: var(--muted); }
.empty strong { display: block; color: var(--ink-2); margin-bottom: .3rem; font-size: 1rem; }

/* --------------------------------------------------------------- toasts */

.toasts {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  z-index: 120; display: grid; gap: .5rem; width: min(92vw, 27rem);
  pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff; padding: .78rem .95rem;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  font-size: .89rem; pointer-events: auto; border-left: 4px solid var(--brand-600);
}
.toast.error   { background: #7F1710; border-left-color: #F0655A; }
.toast.success { background: #0E5730; border-left-color: #4ADE80; }

/* --------------------------------------------------------------- modal */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6, 64, 58, .48);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; z-index: 150;
}
/* DEFECT D-13. The [hidden] attribute hides an element only through the user
   agent's `[hidden] { display: none }` rule, which the author `display: flex`
   above silently overrides. Without this line the confirmation dialog is
   painted on every page, and its Cancel button sits over the middle of the
   viewport swallowing clicks. An author rule that takes away `hidden` must
   give it back. */
.modal-backdrop[hidden] { display: none; }

.modal {
  background: var(--surface); border-radius: var(--radius);
  padding: 1.35rem; width: min(94vw, 27rem); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.modal h2 { margin-top: 0; }
.modal p { color: var(--ink-2); }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }

/* --------------------------------------------------------------- auth */

.auth-wrap { max-width: 27rem; margin: 1.6rem auto; }
.auth-tabs {
  display: flex; gap: .3rem; margin-bottom: 1.1rem;
  background: var(--surface); padding: .3rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.auth-tabs button {
  flex: 1; min-height: 40px; border: none; background: transparent;
  border-radius: var(--radius-xs); font: inherit; font-weight: 650;
  font-size: .92rem; color: var(--muted); cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.auth-tabs button:hover { color: var(--brand-800); background: var(--brand-50); }
.auth-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, var(--brand-650) 0%, var(--brand-800) 100%);
  color: #fff; box-shadow: var(--shadow-xs);
}

.hero { text-align: center; margin-bottom: 1.35rem; }
.hero h1 { font-size: 1.72rem; letter-spacing: -.028em; color: var(--brand-900); margin-bottom: .35rem; }
.hero p { color: var(--muted); max-width: 34ch; margin: 0 auto; }

.demo-creds {
  font-size: .82rem; color: var(--muted); line-height: 1.75;
  background: var(--brand-50); border: 1px dashed var(--brand-300);
  border-radius: var(--radius-sm); padding: .75rem .85rem;
}
.demo-creds strong { color: var(--brand-800); }
.demo-creds code {
  font-family: var(--mono); font-size: .79rem; color: var(--ink-2);
  background: rgba(255, 255, 255, .75); padding: .1rem .35rem;
  border-radius: 4px; border: 1px solid var(--brand-100);
}

.footer {
  max-width: 1180px; margin: 0 auto; padding: 1.2rem .9rem 2.4rem;
  color: var(--faint); font-size: .79rem; text-align: center;
  border-top: 1px solid var(--line-soft);
}

/* ----------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .slot:hover, .appt:hover { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .toast { animation: rise .2s cubic-bezier(.22, 1, .36, 1); }
  .modal { animation: pop .18s cubic-bezier(.22, 1, .36, 1); }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes pop  { from { opacity: 0; transform: scale(.97) translateY(6px); } }
}

/* Printing the day sheet is a genuine front-desk fallback when the network
   drops, so the chrome is stripped rather than left to waste toner. */
@media print {
  .topbar, .footer, .toasts, .toolbar, .btn, .nav-toggle { display: none !important; }
  body { background: #fff; background-image: none; }
  .card { box-shadow: none; border-color: #999; }
  .table-wrap { overflow: visible; border: none; }
}