/*
  Visual refresh layer. Loads AFTER styles.css and restates the visual
  language: calm off-white canvas, hairline borders, soft depth, pill
  controls, system typography, and a semantic colour per specialty.

  Kept as a separate sheet rather than merged into styles.css so the change
  stays reviewable and reversible. Deliberately avoids color-mix() and other
  recent-only CSS: this site is used on old phones.
*/

:root {
  --bg: #fbfbfd;
  --surface: #ffffff;
  --soft: #ffffff;
  --accent: #00a17f;
  --accent-dark: #00795e;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.08);
  --warning: #f0b429;
  --danger: #e02f2f;
  --shadow: rgba(0, 0, 0, 0.06);

  --fill: #f5f5f7;
  --fill-strong: #ececee;

  /* iOS semantic palette - colour carries meaning, not decoration */
  --c-blue: #0071e3;
  --c-orange: #f07800;
  --c-teal: #0095a8;
  --c-green: #00a17f;
  --c-indigo: #5a58d6;
  --c-purple: #a340d6;
  --radius-card: 18px;
  --radius-control: 980px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --elev-3: 0 12px 40px rgba(0, 0, 0, 0.12);

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
}

/* Ambient colour wash behind everything - Apple lights a page, it doesn't flatten it */
html {
  background:
    radial-gradient(52% 38% at 12% 0%, rgba(0, 161, 127, 0.2), transparent 70%),
    radial-gradient(46% 34% at 58% 0%, rgba(0, 113, 227, 0.16), transparent 72%),
    radial-gradient(44% 32% at 96% 2%, rgba(163, 64, 214, 0.14), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body {
  background: transparent;
}

html,
body {
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* ---------- Layout rhythm: Apple breathes ---------- */

/* Public page only: the CMS shell needs every pixel it can get - clamping it
   here collapsed the nested editor grids (the context-help column hit 0px). */
body[data-page="public"] .app-shell {
  max-width: 1120px;
  padding-left: 22px;
  padding-right: 22px;
}

.view.active {
  gap: 22px;
}

/* ---------- Hero: ambient colour wash, the way Apple lights a page ---------- */

.hero {
  align-items: center;
  padding: 30px 0 8px;
}

/* Apple never ships 950-weight display type - semibold + tight tracking instead */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  letter-spacing: -0.024em;
}

.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.05;
}

.eyebrow {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ---------- Controls: pills, not boxes ---------- */

.primary,
.secondary,
.danger,
.tab,
.subtab,
.chip,
.icon-button.labeled,
.tenant-switch-toggle {
  border-radius: var(--radius-control);
  font-weight: 590;
  letter-spacing: -0.01em;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
}

.primary,
.secondary,
.danger {
  min-height: 46px;
  padding: 0 22px;
  font-size: 0.95rem;
}

.primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: none;
}

.primary:hover {
  background: var(--accent-dark);
}

.secondary {
  background: var(--fill);
  color: var(--ink);
  box-shadow: none;
}

.secondary:hover {
  background: var(--fill-strong);
}

.danger {
  background: rgba(224, 47, 47, 0.1);
  color: var(--danger);
}

.primary:active,
.secondary:active,
.danger:active,
.chip:active {
  transform: scale(0.97);
}

.icon-button.labeled {
  background: var(--fill);
  color: var(--ink);
  box-shadow: none;
}

.icon-button.labeled:hover {
  background: var(--fill-strong);
}

/* ---------- The two shortcut buttons under the filters ----------
   iOS-style tinted actions: each owns a colour, so they read as two
   distinct things rather than two grey slabs. */

.family-lookup-trigger {
  min-height: 50px;
  justify-content: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 600;
}

#familyLookupButton {
  background: rgba(0, 113, 227, 0.10);
  color: var(--c-blue);
}

#familyLookupButton:hover {
  background: rgba(0, 113, 227, 0.16);
}

#myDoctorsButton {
  background: rgba(163, 64, 214, 0.10);
  color: var(--c-purple);
}

#myDoctorsButton:hover {
  background: rgba(163, 64, 214, 0.16);
}

#myDoctorsButton .icon {
  color: var(--c-purple);
}

/* Filter chips: quiet by default, confident when active */

.tab,
.subtab,
.chip {
  min-height: 38px;
  background: var(--fill);
  color: var(--ink);
  padding: 0 18px;
  box-shadow: none;
  font-weight: 560;
}

.chip:hover {
  background: var(--fill-strong);
}

.tab.active,
.subtab.active,
.chip.active {
  background: var(--ink);
  color: #ffffff;
}

.filter-row {
  gap: 8px;
}

/* ---------- Surfaces: hairline + soft float ---------- */

.search-panel,
.panel,
.status-strip,
.message-card,
.doctor-card,
.announcement,
.muted-box,
.welcome-panel,
.faq-panel,
.family-lookup {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.search-panel,
.panel {
  padding: 20px;
}

.doctor-card {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.doctor-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: var(--elev-2);
}

.doctor-main {
  gap: 14px;
  padding: 20px;
}

.doctor-top h3,
.doctor-top h2 {
  letter-spacing: -0.022em;
  font-weight: 620;
  text-wrap: balance;
}

/* Give the name the full card width: tag + actions share the row above it,
   so long names stop breaking into three lines. */
/* Sizing here is measured, not guessed: the tightest card column is ~305px,
   so the tag + status + actions cluster is tuned to land under that and stay
   on one line. It still wraps gracefully below ~300px. */
.doctor-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.doctor-top > div:first-child {
  display: contents;
}

.doctor-top .eyebrow {
  order: 1;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

/* Actions sit right of the tag when there's room, and drop to their own
   line when there isn't - instead of colliding with it. */
.doctor-top-actions {
  order: 2;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
  gap: 5px;
}

.doctor-top h2,
.doctor-top h3 {
  order: 3;
  flex: 1 0 100%;
  margin: 0;
  font-size: 1.32rem;
}

.report-flag,
.save-toggle,
.qr-toggle {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 0.82rem;
}

.report-flag .icon,
.save-toggle .icon,
.qr-toggle .icon {
  width: 14px;
  height: 14px;
}

.card-updated-at {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
}

/* ---------- Search field ---------- */

.search-input-wrap input,
.search input[type="search"] {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--fill);
  padding-left: 42px;
  font-size: 1rem;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

.search-input-wrap input:focus,
.search input[type="search"]:focus {
  outline: none;
  border-color: rgba(0, 161, 127, 0.5);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(0, 161, 127, 0.12);
}

.search-input-icon {
  left: 14px;
}

/* Micro-labels: softer than the original 950-weight caps */

.search span,
.form-grid span,
.field span,
.report-dialog span,
.meta span,
.status-strip span,
.family-lookup-fields label > span {
  color: var(--muted);
  text-transform: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ---------- Meta tiles ---------- */

.meta-grid {
  gap: 10px;
}

.meta {
  border-radius: 14px;
  background: var(--fill);
  padding: 12px 13px;
}

/* Field labels read as sentence case, not shouty caps */
.meta span,
.status-strip > div > span {
  text-transform: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.meta strong {
  margin-top: 3px;
  font-weight: 560;
  letter-spacing: -0.015em;
}

/* ---------- Badges ---------- */

.badge {
  min-height: 24px;
  padding: 0 9px;
  background: var(--fill);
  color: var(--muted);
  font-size: 0.665rem;
  font-weight: 600;
  letter-spacing: -0.003em;
  white-space: nowrap;
}

.badge.now {
  background: rgba(0, 161, 127, 0.12);
  color: var(--accent-dark);
}

.badge.later {
  background: rgba(0, 113, 227, 0.1);
  color: #0062c4;
}

.badge.finished {
  background: var(--fill);
  color: var(--muted);
}

.badge.closed {
  background: rgba(224, 47, 47, 0.1);
  color: var(--danger);
}

.badge.sub {
  background: rgba(240, 180, 41, 0.16);
  color: #8a6200;
}

.badge.private {
  background: rgba(140, 82, 216, 0.12);
  color: #6d35a8;
}

.badge.public {
  background: rgba(0, 113, 227, 0.1);
  color: #1d5ba6;
}

.badge.sponsor {
  background: rgba(240, 180, 41, 0.18);
  color: #8a6200;
}

.badge.consult {
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
}

.provider-card,
.nurse-card {
  border-left-width: 3px;
}

/* ---------- Card icon buttons ---------- */

.report-flag,
.save-toggle,
.qr-toggle {
  border-radius: 999px;
  background: var(--fill);
  border: none;
  transition: background 0.22s var(--ease), transform 0.18s var(--ease),
    color 0.22s var(--ease);
}

.report-flag:hover,
.save-toggle:hover,
.qr-toggle:hover {
  background: var(--fill-strong);
  transform: scale(1.06);
}

.save-toggle.active {
  background: rgba(0, 161, 127, 0.14);
  color: var(--accent-dark);
}

/* ---------- Schedule rows ---------- */

.weekly-row.now {
  border-radius: 12px;
  background: rgba(0, 161, 127, 0.1);
}

.weekly-row.later {
  border-radius: 12px;
  background: rgba(0, 113, 227, 0.07);
}

.weekly-row.later strong {
  color: #0062c4;
}

/* Today's hours: quiet surface, accent carried by the text alone */
.slot {
  border-radius: 14px;
  background: var(--fill);
  padding: 12px 13px;
}

.slot strong {
  color: var(--accent-dark);
  font-weight: 590;
}

/* ---------- Status strip ---------- */

.status-strip {
  padding: 16px 20px;
}

.status-strip strong {
  font-weight: 620;
  letter-spacing: -0.02em;
}

.status-strip input[type="date"] {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 12px;
}

/* ---------- Welcome / FAQ ---------- */

.welcome-panel,
.faq-panel,
.family-lookup {
  padding: 26px;
}

.welcome-panel h2,
.faq-panel h2,
.family-lookup h2 {
  font-weight: 640;
  letter-spacing: -0.028em;
}

.welcome-steps {
  gap: 12px;
}

.welcome-step {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--fill);
  padding: 16px;
}

.welcome-step strong {
  font-weight: 620;
  letter-spacing: -0.015em;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: background 0.22s var(--ease);
}

.faq-item:hover {
  background: var(--fill);
}

.faq-item summary {
  font-weight: 590;
  letter-spacing: -0.015em;
  padding: 15px 17px;
}

.faq-item p {
  color: var(--muted);
  line-height: 1.55;
  padding: 0 17px 15px;
}

/* ---------- Tenant switcher: translucent, blurred ---------- */

.tenant-switch-toggle {
  min-height: 40px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--elev-1);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  font-weight: 570;
}

.tenant-switch-menu {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--elev-3);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

.tenant-switch-menu {
  min-width: 240px;
  padding: 6px;
}

.tenant-switch-list {
  gap: 2px;
}

.tenant-switch-item {
  position: relative;
  min-height: 42px;
  border-radius: 10px;
  padding: 0 34px 0 12px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: background 0.18s var(--ease);
}

.tenant-switch-item:hover {
  background: var(--fill);
}

/* Selected reads as a checkmark, the way iOS marks a choice -
   not as a solid green slab. */
.tenant-switch-item.active {
  background: transparent;
  color: var(--ink);
  font-weight: 590;
}

.tenant-switch-item.active:hover {
  background: var(--fill);
}

.tenant-switch-item.active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 6px;
  height: 11px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: translateY(-60%) rotate(45deg);
}

.tenant-switch-toggle {
  padding: 0 14px;
  font-size: 0.92rem;
  gap: 7px;
}

.tenant-switch-caret {
  color: var(--muted);
  font-size: 0.7rem;
}

.tenant-switch-search {
  min-height: 40px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--fill);
  padding: 0 12px;
}

/* ---------- Dialogs: sheet-like ---------- */

.report-dialog {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  padding: 26px;
}

.report-dialog::backdrop {
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.report-dialog h2 {
  font-weight: 640;
  letter-spacing: -0.028em;
}

.report-dialog input,
.report-dialog select,
.report-dialog textarea,
.family-lookup-fields input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 13px;
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

/* The base sheet sets a monospace textarea for the CMS JSON editor;
   patient-facing prose fields should stay in the UI font. */
.report-dialog textarea {
  min-height: 96px;
  padding: 12px 13px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
}

.report-dialog input:focus,
.report-dialog select:focus,
.report-dialog textarea:focus,
.family-lookup-fields input:focus {
  outline: none;
  border-color: rgba(0, 161, 127, 0.55);
  box-shadow: 0 0 0 4px rgba(0, 161, 127, 0.12);
}

.permission-option {
  border-radius: 12px;
  border-color: var(--line);
  font-weight: 550;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.permission-option:hover {
  background: var(--fill);
}

/* ---------- Appointment "coming soon" pill ---------- */

.appointment-button-soon {
  background: var(--fill);
  color: var(--muted);
}

.appointment-button-soon .soon-badge {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

/* ---------- Toast ---------- */

.toast {
  border-radius: 16px;
  background: rgba(28, 28, 30, 0.92);
  box-shadow: var(--elev-3);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding: 14px 18px;
  font-weight: 550;
  letter-spacing: -0.01em;
}

/* ---------- QR reveal ---------- */

.qr-reveal {
  border-radius: 16px;
  background: var(--fill);
}

.qr-hint {
  color: var(--muted);
  font-weight: 550;
}

/* ---------- Specialty colour system ----------
   Every specialty owns a colour, the way iOS colour-codes Health categories.
   One hue per card drives the tag, the edge, the icons and today's hours. */

.doctor-card[data-specialty],
.family-row[data-specialty],
.detail-card[data-specialty],
.filter-row .chip[data-specialty],
.editor-list-item[data-specialty] {
  --c: var(--c-green);
  --c-soft: rgba(0, 161, 127, 0.13);
  --c-strong: #00795e;
}

.doctor-card[data-specialty="haziorvos"],
.family-row[data-specialty="haziorvos"],
.detail-card[data-specialty="haziorvos"],
.filter-row .chip[data-specialty="haziorvos"],
.editor-list-item[data-specialty="haziorvos"] {
  --c: var(--c-blue);
  --c-soft: rgba(0, 113, 227, 0.12);
  --c-strong: #0062c4;
}

.doctor-card[data-specialty="gyermekorvos"],
.family-row[data-specialty="gyermekorvos"],
.detail-card[data-specialty="gyermekorvos"],
.filter-row .chip[data-specialty="gyermekorvos"],
.editor-list-item[data-specialty="gyermekorvos"] {
  --c: var(--c-orange);
  --c-soft: rgba(240, 120, 0, 0.14);
  --c-strong: #ab5a00;
}

.doctor-card[data-specialty="fogorvos"],
.family-row[data-specialty="fogorvos"],
.detail-card[data-specialty="fogorvos"],
.filter-row .chip[data-specialty="fogorvos"],
.editor-list-item[data-specialty="fogorvos"] {
  --c: var(--c-teal);
  --c-soft: rgba(0, 149, 168, 0.13);
  --c-strong: #00707e;
}

.doctor-card[data-specialty="vedono"],
.family-row[data-specialty="vedono"],
.detail-card[data-specialty="vedono"],
.filter-row .chip[data-specialty="vedono"],
.editor-list-item[data-specialty="vedono"] {
  --c: var(--c-green);
  --c-soft: rgba(0, 161, 127, 0.13);
  --c-strong: #00795e;
}

.doctor-card[data-specialty="labor"],
.family-row[data-specialty="labor"],
.detail-card[data-specialty="labor"],
.filter-row .chip[data-specialty="labor"],
.editor-list-item[data-specialty="labor"] {
  --c: var(--c-indigo);
  --c-soft: rgba(90, 88, 214, 0.12);
  --c-strong: #4644b0;
}

.doctor-card[data-specialty] {
  position: relative;
  overflow: hidden;
}

/* A hairline of colour along the top edge - reads instantly when scanning */
.doctor-card[data-specialty]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c), var(--c-soft));
}

/* The specialty label becomes a real tag, not grey caps */
.doctor-card[data-specialty] .eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: start;
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c);
  padding: 3px 9px;
  font-size: 0.625rem;
  font-weight: 640;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Field icons pick up the card's hue */
.doctor-card[data-specialty] .meta span .icon {
  color: var(--c);
  opacity: 0.85;
}

/* Today's hours: tinted in the card's own colour */
.doctor-card[data-specialty] .slot {
  background: var(--c-soft);
}

.doctor-card[data-specialty] .slot strong {
  color: var(--c-strong);
}

.doctor-card[data-specialty] .weekly-row.now {
  background: var(--c-soft);
}

.doctor-card[data-specialty] .weekly-row.now strong,
.doctor-card[data-specialty] .weekly-row.now span {
  color: var(--c-strong);
}

.doctor-card[data-specialty] .save-toggle.active {
  background: var(--c-soft);
  color: var(--c);
}

/* Filter chips wear the same colours */
.filter-row .chip[data-specialty] .icon {
  color: var(--c);
}

.filter-row .chip[data-specialty]:hover {
  background: var(--c-soft);
}

.filter-row .chip[data-specialty].active {
  background: var(--c);
  color: #ffffff;
}

.filter-row .chip[data-specialty].active .icon {
  color: #ffffff;
}

/* ---------- "Ki az orvosom?" family card ---------- */

.family-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-1);
  padding: 26px;
}

.family-card-head {
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.family-card-head h2 {
  font-size: 1.7rem;
  font-weight: 640;
  letter-spacing: -0.03em;
}

.family-card-brand {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 590;
}

.family-rows {
  gap: 12px;
}

/* Category rows inherit the specialty colour instead of a green bar */
.family-row {
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  padding: 18px 20px;
}

.family-row[data-specialty] .eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: start;
  /* the row is a grid: without this the pill stretches the full width */
  justify-self: start;
  width: fit-content;
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c);
  padding: 3px 9px;
  font-size: 0.625rem;
  font-weight: 640;
  letter-spacing: 0.03em;
}

.family-member-name,
.family-row strong {
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Weekly chips: quiet surface, colour only on the time itself */
.family-weekly {
  gap: 6px;
}

.family-weekly-chip {
  border-radius: 8px;
  background: var(--fill);
  color: var(--ink);
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: 550;
  letter-spacing: -0.005em;
}

.family-row[data-specialty] .family-weekly-chip {
  background: var(--c-soft);
  color: var(--c-strong);
}

.family-note,
.family-contact,
.family-district {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.family-uncertain {
  color: var(--muted);
  font-size: 0.85rem;
}

.family-row-qr {
  width: 72px;
}

/* Emergency numbers read as real tags, not fine print */
.family-emergency {
  gap: 10px;
  margin-top: 4px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}

.family-emergency strong {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(224, 47, 47, 0.1);
  color: var(--danger);
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 640;
}

.family-lookup-stats {
  color: var(--muted);
  font-size: 0.85rem;
}

/* "Vissza" shouldn't be a full-width slab */
.family-lookup-form > .secondary.small,
.faq-panel > .secondary.small,
.doctor-detail .secondary.small {
  justify-self: start;
  align-self: start;
  width: auto;
  min-height: 36px;
  padding: 0 16px;
  font-size: 0.86rem;
}

/* ---------- Doctor detail view ---------- */

.detail-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-1);
  padding: 26px;
}

.detail-card[data-specialty] .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c);
  padding: 3px 9px;
  font-size: 0.625rem;
  font-weight: 640;
  letter-spacing: 0.03em;
}

.detail-head h2 {
  margin-top: 6px;
  font-size: 1.8rem;
  font-weight: 640;
  letter-spacing: -0.032em;
}

/* Section headings get real hierarchy */
.detail-card h3,
.detail-card h4 {
  margin: 6px 0 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 620;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.detail-section {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 4px 18px;
}

/* Day rows: hairline-separated list, the way iOS groups settings */
.detail-row {
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 14px 0;
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-row strong {
  font-weight: 590;
  letter-spacing: -0.015em;
}

.detail-row span,
.detail-row p {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* One call-to-action shouldn't sit in half a grid cell */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0;
}

.detail-button {
  justify-self: stretch;
  flex: 1 1 220px;
  min-height: 50px;
  border-radius: var(--radius-control);
  font-size: 1rem;
  font-weight: 620;
}

/* Phone / email / website CTAs are real buttons, not inline links */
.action-link {
  min-height: 50px;
  border-radius: var(--radius-control);
  font-size: 1rem;
  font-weight: 620;
}

/* The location row stays a row; only its "Térkép" affordance gets the colour */
.location-link {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 16px;
  padding-right: 84px;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
}

.location-link:hover {
  background: var(--fill);
  border-color: rgba(0, 0, 0, 0.12);
}

.location-link strong {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.location-link::after {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--c-soft, rgba(0, 161, 127, 0.12));
  color: var(--c, var(--accent-dark));
  padding: 4px 11px;
  font-size: 0.68rem;
  font-weight: 620;
  letter-spacing: 0.02em;
}

.detail-card[data-specialty] .slot {
  background: var(--c-soft);
}

.detail-card[data-specialty] .slot strong {
  color: var(--c-strong);
}

/* ---------- Live status: a real indicator, not a grey label ---------- */

.badge.now {
  gap: 5px;
  background: rgba(0, 161, 127, 0.13);
  color: #00795e;
  font-weight: 630;
}

.badge.now::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-green);
  box-shadow: 0 0 0 0 rgba(0, 161, 127, 0.55);
  animation: demo-pulse 2s ease-out infinite;
}

@keyframes demo-pulse {
  70% {
    box-shadow: 0 0 0 7px rgba(0, 161, 127, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 161, 127, 0);
  }
}

.badge.later {
  background: rgba(0, 113, 227, 0.11);
  color: #0062c4;
  font-weight: 610;
}

/* ---------- Primary CTA gets real presence ---------- */

.primary {
  background: linear-gradient(180deg, #00b68f, var(--accent));
  box-shadow: 0 1px 2px rgba(0, 121, 94, 0.28), 0 6px 18px rgba(0, 121, 94, 0.24);
  font-weight: 620;
}

.primary:hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow: 0 1px 2px rgba(0, 121, 94, 0.3), 0 10px 26px rgba(0, 121, 94, 0.3);
}

/* ---------- CMS and doctor portal ----------
   Same language, applied to the staff tools. The sidebar selection follows
   the iOS pattern: a tinted row, not a saturated slab. */

.cms-nav .subtab,
.cms-nav .subtab-nested {
  justify-content: flex-start;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-weight: 540;
  text-align: left;
}

.cms-nav .subtab:hover,
.cms-nav .subtab-nested:hover {
  background: var(--fill);
}

.cms-nav .subtab.active,
.cms-nav .subtab-nested.active {
  background: rgba(0, 161, 127, 0.12);
  color: var(--accent-dark);
  font-weight: 620;
}

.cms-nav-group {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 620;
  letter-spacing: 0.06em;
}

.cms-sidebar {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

/* Staff-tool field labels get the same sentence-case treatment */
.editor-search span,
.editor-count span,
.editor-filter-bar label > span,
.picker-search span,
.permission-group legend {
  text-transform: none;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.editor-toolbar input,
.editor-body input,
.editor-body select,
.editor-body textarea,
.picker-search input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.editor-toolbar input:focus,
.editor-body input:focus,
.editor-body select:focus,
.editor-body textarea:focus,
.picker-search input:focus {
  outline: none;
  border-color: rgba(0, 161, 127, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 161, 127, 0.12);
}

/* The sticky toolbar loses its green wash for a neutral, blurred bar */
.cms-desktop .editor-toolbar {
  border-bottom: 1px solid var(--line);
  background: rgba(251, 251, 253, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.editor-filter-bar {
  border-radius: 14px;
  background: var(--fill);
}

/* The inline help box: informative, not shouty */
.editor-context-help {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--fill);
}

.editor-context-help p {
  font-weight: 450;
  font-size: 0.86rem;
  line-height: 1.5;
}

.editor-context-help h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.editor-detail-card,
.editor-list-item,
.editor-master-detail > * {
  border-radius: 14px;
}

.editor-count strong {
  border-radius: 999px;
  background: rgba(0, 161, 127, 0.12);
  color: var(--accent-dark);
  font-weight: 600;
}

/* ---------- Dark mode ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --surface: #1c1c1e;
    --soft: #1c1c1e;
    --ink: #f5f5f7;
    --muted: #98989d;
    --line: rgba(255, 255, 255, 0.12);
    --fill: #2c2c2e;
    --fill-strong: #3a3a3c;
    --accent: #00c896;
    --accent-dark: #00b085;
  }

  html,
  body {
    background: var(--bg);
  }

  .tab.active,
  .subtab.active,
  .chip.active {
    background: var(--accent);
    color: #06231c;
  }

  .tenant-switch-toggle {
    background: rgba(28, 28, 30, 0.72);
  }

  .tenant-switch-menu {
    background: rgba(28, 28, 30, 0.9);
  }

  .toast {
    background: rgba(58, 58, 60, 0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Traffic view: same calm card language as the rest of the refresh. */
.visit-block {
  border-radius: 14px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--elev-1);
}

.visit-block-head h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.visit-block-head p.muted {
  font-weight: 450;
  font-size: 0.86rem;
}

.visit-axis {
  font-weight: 450;
  font-size: 0.74rem;
}

.search-hint {
  font-weight: 450;
  font-size: 0.84rem;
}

/* Filters are a secondary control, not a wall above the list. */
.editor-filters > summary {
  background: var(--fill);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.8rem;
}

.editor-list-item.blank strong {
  font-weight: 450;
}

/* "Ma később rendel" hardcoded a blue that means "háziorvos" in this palette, so
   on an orange gyermekorvos card the badge read as if it belonged to another
   specialty. The state is spelled out in words anyway - the colour can follow
   the card it sits on. "Most rendel" (green) and "Ma nem rendel" (red) stay
   semantic: those two are worth reading at a glance. */
.badge.later {
  background: var(--fill);
  color: var(--ink);
}

.doctor-card[data-specialty] .badge.later,
.detail-card[data-specialty] .badge.later,
.family-row[data-specialty] .badge.later {
  background: var(--c-soft);
  color: var(--c-strong);
}

/* Same hardcoded blue in the weekly list: today's row was marked in háziorvos
   blue whatever card it sat on. */
.doctor-card[data-specialty] .weekly-row.later {
  background: var(--c-soft);
}

.doctor-card[data-specialty] .weekly-row.later strong {
  color: var(--c-strong);
}

/* The status badge shares the tag's line. It used to live inside the icon group,
   so on a narrow card the whole group wrapped and took the badge down with it -
   leaving "Gyermekorvos" alone on one line and "Ma később rendel" on the next.
   The eyebrow's auto margin pushes everything else right; the icons may still
   drop to their own line, and stay right-aligned there. */
.doctor-top {
  justify-content: flex-end;
}

.doctor-top .eyebrow {
  margin-right: auto;
}

.doctor-top > .badge {
  order: 2;
}

/* Order 2 keeps the icons in the tag row, so they wrap to a line of their own
   when it is tight - not below the name, which is what order 3 did. */
.doctor-top-actions {
  order: 2;
  margin-left: 0;
}

/* The tag kept align-self: start from the original refresh, where it sat in a
   grid column and needed not to stretch. In the current centred header that
   lifts it 4px above the badge and the icons - small enough to pass a sloppy
   tolerance, large enough to see. */
.doctor-card[data-specialty] .doctor-top .eyebrow,
.detail-card[data-specialty] .detail-head .eyebrow {
  align-self: center;
}

.print-fallback-hint {
  font-weight: 450;
  font-size: 0.84rem;
}