/*
 * Dr Toobaei Psychiatry Practice — Design System (Part 1)
 * Base, Tokens, Shell, Auth, Dashboard
 */

/* 1. Fonts */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(/assets/fonts/plus-jakarta-sans-latin-wght.woff2) format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* 2. Design Tokens */
:root {
  /* Palette */
  --navy: #0F2A44;
  --navy-2: #16385A;
  --navy-3: #1E4A70;
  --teal: #0E7C86;
  --teal-600: #0B6870;
  --teal-100: #D5ECEC;
  --teal-50: #EAF5F5;
  --sand: #F4EFE8;
  --sand-2: #EBE3D8;
  --sand-3: #DDD2C3;
  --coral: #E8735F;
  --coral-50: #FDEEEA;
  --red: #C0392B;
  --red-50: #FBE8E6;
  --amber: #B7791F;
  --amber-50: #FFF4DF;
  --green: #2F7D57;
  --green-50: #E5F3EB;

  /* Semantic */
  --bg: var(--sand);
  --surface: #FFFFFF;
  --surface-2: #FBF8F4;
  --surface-sunken: var(--sand-2);
  --text: #16222E;
  --text-strong: var(--navy);
  --muted: #5B6875;
  --line: #E6DDD1;
  --line-strong: var(--sand-3);
  --accent: var(--teal);
  --accent-strong: var(--teal-600);
  --accent-soft: var(--teal-50);
  --accent-contrast: #FFFFFF;
  --danger: var(--red);
  --danger-soft: var(--red-50);
  --warning: var(--amber);
  --warning-soft: var(--amber-50);
  --success: var(--green);
  --success-soft: var(--green-50);
  --alert: var(--coral);
  --alert-soft: var(--coral-50);

  /* Sidebar */
  --sidebar-bg: var(--navy);
  --sidebar-text: #C9D6E2;
  --sidebar-text-strong: #FFFFFF;
  --sidebar-hover: rgba(255, 255, 255, 0.07);
  --sidebar-active: rgba(14, 124, 134, 0.28);

  /* Misc */
  --focus: 0 0 0 3px rgba(14, 124, 134, 0.35);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(15, 42, 68, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 42, 68, 0.08), 0 4px 12px rgba(15, 42, 68, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 42, 68, 0.1), 0 12px 28px rgba(15, 42, 68, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 42, 68, 0.12), 0 24px 48px rgba(15, 42, 68, 0.06);
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sidebar-w: 272px;
  --tabbar-h: 68px;
  --band-img: url(/assets/img/calm-waves.webp);

  /* Legacy compatibility */
  --bg: var(--sand);
  --surface: #FFFFFF;
  --text: #16222E;
  --muted: #5B6875;
  --line: #E6DDD1;
  --accent: var(--teal);
  --danger: var(--red);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1826;
    --surface: #11243A;
    --surface-2: #152B44;
    --surface-sunken: #0E1F33;
    --text: #E6EDF3;
    --text-strong: #FFFFFF;
    --muted: #9DB0C2;
    --line: #22405E;
    --line-strong: #2C4D6E;
    --accent: #3DB2BB;
    --accent-strong: #62C6CD;
    --accent-soft: rgba(61, 178, 187, 0.14);
    --accent-contrast: #06222A;
    --danger: #FF8B7E;
    --danger-soft: rgba(255, 139, 126, 0.13);
    --warning: #F2B65A;
    --warning-soft: rgba(242, 182, 90, 0.13);
    --success: #6FCF97;
    --success-soft: rgba(111, 207, 151, 0.12);
    --alert: #FF9C87;
    --alert-soft: rgba(255, 156, 135, 0.13);
    --sidebar-bg: #081320;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.3);
    --focus: 0 0 0 3px rgba(61, 178, 187, 0.4);
  }
}

/* 3. Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  color-scheme: light dark;
}

h1, h2, h3, h4 {
  color: var(--text-strong);
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0;
}

h1 {
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

h2 {
  font-size: 1.2rem;
  margin-top: 2rem;
  font-weight: 650;
}

h3 {
  font-size: 1.02rem;
  font-weight: 650;
}

a {
  color: var(--accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration: underline;
  transition: color 0.15s;
}

a:hover {
  color: var(--navy);
}

p {
  margin: 0 0 1rem;
}

.muted {
  color: var(--muted);
}

small {
  font-size: 0.85em;
}

code, pre {
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  padding: 0.2em 0.4em;
  font-family: monospace;
}

pre {
  padding: 1em;
  overflow-x: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.5rem 0;
}

mark {
  background: var(--teal-50);
  color: var(--teal-600);
  border-radius: 6px;
  padding: 0 0.35em;
}

::selection {
  background: var(--teal-100);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--focus);
}

img, svg {
  max-width: 100%;
  display: block;
}

.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.5rem 1rem;
  z-index: 1000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. Generic Page Container */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px);
}

/* 5. Signed-in App Shell */
.wrap:has(> .staff-nav) {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  max-width: none;
  padding: 0;
  min-height: 100vh;
}

.staff-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.staff-nav::-webkit-scrollbar {
  width: 6px;
}

.staff-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

.staff-nav .brand {
  order: -2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark {
  flex: none;
  width: 40px;
  height: 40px;
  background: url(/assets/img/brand-mark.svg) center / contain no-repeat;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-text strong {
  display: block;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.brand-text small {
  display: block;
  font-size: 0.75rem;
  opacity: 0.8;
  letter-spacing: 0.02em;
}

.staff-nav > .muted {
  order: 10;
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--sidebar-text);
  padding: 12px 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.staff-primary {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.staff-primary a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.92rem;
  transition: background 0.15s, color 0.15s;
}

.staff-primary a:hover {
  background: var(--sidebar-hover);
  color: #FFFFFF;
}

.staff-primary a[aria-current="page"] {
  background: var(--sidebar-active);
  color: #FFFFFF;
  box-shadow: inset 3px 0 0 var(--teal);
}

.staff-admin {
  order: 2;
  margin-top: 4px;
}

.staff-admin > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  list-style: none;
  color: var(--sidebar-text);
  font-weight: 550;
  font-size: 0.92rem;
  transition: background 0.15s, color 0.15s;
}

.staff-admin > summary::-webkit-details-marker {
  display: none;
}

.staff-admin > summary::after {
  content: "";
  margin-inline-start: auto;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url(/assets/icons.svg#chevron-down) center / 16px 16px no-repeat;
  mask: url(/assets/icons.svg#chevron-down) center / 16px 16px no-repeat;
  transition: transform 0.2s;
}

.staff-admin[open] > summary::after {
  transform: rotate(180deg);
}

.staff-admin > a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-inline-start: 44px;
  padding-inline-end: 12px;
  font-size: 0.86rem;
  color: var(--sidebar-text);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.staff-admin > a:hover {
  background: var(--sidebar-hover);
  color: #FFFFFF;
}

.staff-search {
  order: 3;
  margin: 14px 4px 4px;
  position: relative;
  display: flex;
  gap: 6px;
}

.staff-search input[type="search"] {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
  padding: 0 12px;
  font-family: inherit;
  font-size: 0.9rem;
}

.staff-search input[type="search"]::placeholder {
  color: rgba(201, 214, 226, 0.7);
}

.staff-search input[type="search"]:focus {
  border-color: var(--teal);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  box-shadow: var(--focus);
}

.staff-search button {
  width: 44px;
  min-height: 44px;
  font-size: 0;
  padding: 0;
  border-radius: 12px;
  background: var(--teal);
  color: #FFFFFF;
  border: 0;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.staff-search button::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url(/assets/icons.svg#search) center / 20px 20px no-repeat;
  mask: url(/assets/icons.svg#search) center / 20px 20px no-repeat;
}

form[action="/staff/logout"] {
  order: 11;
  margin: 4px 0 0;
}

form[action="/staff/logout"] button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--sidebar-text);
  font-weight: 550;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

form[action="/staff/logout"] button:hover {
  background: var(--sidebar-hover);
  color: #FFFFFF;
}

main {
  min-width: 0;
  padding: clamp(20px, 3vw, 40px) clamp(16px, 3.2vw, 48px) 64px;
  max-width: 1320px;
  width: 100%;
}

/* Icon Masks */
.staff-primary a::before,
.staff-admin > summary::before,
.staff-search button::before,
form[action="/staff/logout"] button::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / 20px 20px no-repeat;
  mask: var(--icon) center / 20px 20px no-repeat;
}

.staff-primary a[href="/staff"] { --icon: url(/assets/icons.svg#requests); }
.staff-primary a[href="/staff/dashboard"] { --icon: url(/assets/icons.svg#dashboard); }
.staff-primary a[href="/staff/inbox"] { --icon: url(/assets/icons.svg#inbox); }
.staff-primary a[href="/staff/calendar"] { --icon: url(/assets/icons.svg#calendar); }
.staff-primary a[href="/staff/patients"] { --icon: url(/assets/icons.svg#patients); }
.staff-primary a[href="/staff/billing"] { --icon: url(/assets/icons.svg#billing); }
.staff-primary a[href="/staff/tasks"] { --icon: url(/assets/icons.svg#tasks); }
.staff-primary a[href="/staff/whatsapp"] { --icon: url(/assets/icons.svg#whatsapp); }
.staff-primary a[href="/staff/analytics"] { --icon: url(/assets/icons.svg#analytics); }
.staff-admin > summary { --icon: url(/assets/icons.svg#admin); }
.staff-search button { --icon: url(/assets/icons.svg#search); }
form[action="/staff/logout"] button { --icon: url(/assets/icons.svg#logout); }

/* Mobile / Tablet Shell */
@media (max-width: 959.98px) {
  .wrap:has(> .staff-nav) {
    display: block;
    padding: 0;
  }

  .staff-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "brand search admin logout";
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: var(--sidebar-bg);
    box-shadow: var(--shadow-md);
  }

  .brand {
    grid-area: brand;
    padding: 0;
    border: 0;
    margin: 0;
  }

  .brand-text {
    display: none;
  }

  @media (min-width: 600px) {
    .brand-text {
      display: flex;
    }
  }

  .staff-nav > .muted {
    display: none;
  }

  .staff-primary {
    display: none;
  }

  .staff-search {
    grid-area: search;
    margin: 0;
  }

  .staff-search input[type="search"] {
    min-height: 40px;
  }

  .staff-search button {
    width: 40px;
    min-height: 40px;
    padding: 0;
    justify-content: center;
  }

  .staff-admin {
    grid-area: admin;
    margin: 0;
    position: relative;
  }

  .staff-admin > summary {
    min-height: 40px;
    padding: 0 10px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    gap: 6px;
  }

  .staff-admin > summary::before {
    width: 18px;
    height: 18px;
  }

  .staff-admin[open] {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px;
    background: var(--navy-2);
    border-radius: 14px;
    padding: 8px;
    margin-top: 4px;
  }

  .staff-admin[open] > summary {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 4px;
  }

  .staff-admin > a {
    padding: 8px 10px;
    min-height: 40px;
    color: #FFFFFF;
  }

  form[action="/staff/logout"] {
    grid-area: logout;
    margin: 0;
  }

  form[action="/staff/logout"] button {
    min-height: 40px;
    width: 40px;
    padding: 0;
    justify-content: center;
    font-size: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
  }

  form[action="/staff/logout"] button::before {
    width: 18px;
    height: 18px;
  }

  /* Bottom Tab Bar */
  .staff-primary {
    display: flex;
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    z-index: 60;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 6px 6px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(15, 42, 68, 0.08);
  }

  .staff-primary a {
    flex: 0 0 auto;
    min-width: 20%;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    border-radius: 12px;
    scroll-snap-align: start;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
  }

  .staff-primary a:hover,
  .staff-primary a[aria-current="page"] {
    color: var(--accent-strong);
    background: var(--accent-soft);
  }

  .staff-primary a::before {
    width: 22px;
    height: 22px;
  }

  main {
    padding: 16px 16px calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .brand-mark {
    width: 34px;
    height: 34px;
  }
}

/* 6. Page Header Band */
.wrap:has(> .staff-nav) main > h1:first-child,
.wrap:has(> .staff-nav) main > .flash + h1 {
  position: relative;
  margin: 0 0 24px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  min-height: 96px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  .wrap:has(> .staff-nav) main > h1:first-child,
  .wrap:has(> .staff-nav) main > .flash + h1 {
    background: var(--surface);
  }
}

@media (max-width: 959.98px) {
  .wrap:has(> .staff-nav) main > h1:first-child,
  .wrap:has(> .staff-nav) main > .flash + h1 {
    min-height: 76px;
    background: var(--surface);
  }
}

/* 7. Sign-in Split */
.wrap:has(> .auth-split) {
  max-width: none;
  padding: 0;
}

.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  background: var(--bg);
}

.auth-hero {
  position: relative;
  background: url(/assets/img/signin-hero.webp) center / cover no-repeat, var(--navy);
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
}

.auth-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 42, 68, 0) 35%, rgba(15, 42, 68, 0.78) 100%);
  z-index: 1;
}

.auth-hero-copy {
  position: relative;
  color: #FFFFFF;
  max-width: 28rem;
  z-index: 2;
}

.auth-hero-copy .brand-mark {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  display: block;
}

.auth-brand {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: #FFFFFF;
}

.auth-tagline {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  font-size: 1rem;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 72px);
}

.auth-card {
  width: min(100%, 420px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 44px);
}

.auth-card h1 {
  margin: 0 0 6px;
  font-size: 1.75rem;
}

.auth-card form {
  display: grid;
  gap: 6px;
}

.auth-card label {
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: 10px;
}

.auth-card input {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  padding: 0 14px;
  font-family: inherit;
  font-size: 1rem;
}

.auth-card input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus);
  background: var(--surface);
  outline: none;
}

.auth-card button[type="submit"] {
  margin-top: 18px;
  min-height: 50px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--teal);
  color: #FFFFFF;
  font-weight: 650;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(14, 124, 134, 0.28);
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}

.auth-card button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.auth-card p {
  margin: 16px 0 0;
  font-size: 0.9rem;
  text-align: center;
}

.auth-card .error {
  margin: 12px 0;
}

@media (max-width: 859.98px) {
  .auth-split {
    grid-template-columns: 1fr;
    grid-template-rows: 240px auto;
  }

  .auth-hero {
    align-items: flex-end;
    min-height: 240px;
    background-position: center 30%;
  }

  .auth-panel {
    margin-top: -48px;
    padding: 0 16px 32px;
    place-items: start center;
  }

  .auth-card {
    border-radius: 22px;
  }
}

/* 8. Dashboard */
.welcome-band {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin: 0 0 20px;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 24px;
  color: #FFFFFF;
  background: var(--navy);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

.welcome-band .eyebrow {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  font-weight: 650;
  color: #9FD9DD;
}

.welcome-band h1 {
  color: #FFFFFF;
  margin: 0;
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem);
  line-height: 1.25;
}

.welcome-sub {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.78);
}

.welcome-art {
  align-self: stretch;
  min-height: 150px;
  background: url(/assets/img/welcome-band.svg) center right / contain no-repeat, rgba(234, 245, 245, 0.12);
  border-radius: 18px;
}

@media (max-width: 700px) {
  .welcome-band {
    grid-template-columns: 1fr;
  }

  .welcome-art {
    min-height: 120px;
    background-position: center;
  }
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 18px;
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .kpi-grid {
    gap: 10px;
  }
}

.kpi-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon icon" "value value" "label label";
  gap: 4px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.kpi-icon {
  grid-area: icon;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  position: relative;
  margin-bottom: 8px;
}

.kpi-icon::after {
  content: "";
  position: absolute;
  inset: 10px;
  background: var(--accent-strong);
  -webkit-mask: var(--icon) center / 20px 20px no-repeat;
  mask: var(--icon) center / 20px 20px no-repeat;
}

.kpi-tasks .kpi-icon { --icon: url(/assets/icons.svg#tasks); }
.kpi-urgent .kpi-icon { --icon: url(/assets/icons.svg#alert); }
.kpi-waiting .kpi-icon { --icon: url(/assets/icons.svg#message); }
.kpi-unmatched .kpi-icon { --icon: url(/assets/icons.svg#users); }

.kpi-value {
  grid-area: value;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 750;
  color: var(--text-strong);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-label {
  grid-area: label;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 550;
}

.kpi-tile.is-alert {
  border-color: color-mix(in srgb, var(--alert) 45%, var(--line));
}

.kpi-tile.is-alert .kpi-icon {
  background: var(--alert-soft);
}

.kpi-tile.is-alert .kpi-icon::after {
  background: var(--alert);
}

.kpi-tile.is-alert::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: var(--alert);
  border-radius: 18px 18px 0 0;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
}

@media (max-width: 1100px) {
  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-strong);
  font-weight: 650;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.quick-action:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  color: var(--accent-strong);
}

.qa-new-patient {
  background: var(--teal);
  color: #FFFFFF;
  border-color: transparent;
}

.qa-new-patient .qa-icon {
  background: rgba(255, 255, 255, 0.18);
}

.qa-new-patient .qa-icon::after {
  background: #FFFFFF;
}

.qa-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  position: relative;
}

.qa-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--accent-strong);
  -webkit-mask: var(--icon) center / 20px 20px no-repeat;
  mask: var(--icon) center / 20px 20px no-repeat;
}

.qa-new-patient .qa-icon { --icon: url(/assets/icons.svg#new-patient); }
.qa-book .qa-icon { --icon: url(/assets/icons.svg#book); }
.qa-find .qa-icon { --icon: url(/assets/icons.svg#find); }
.qa-inbox .qa-icon { --icon: url(/assets/icons.svg#inbox); }

/* 9. Print */
@media print {
  .staff-nav,
  .staff-primary,
  .quick-actions,
  .welcome-art,
  .public-hero {
    display: none !important;
  }

  .wrap,
  main {
    padding: 0 !important;
    max-width: none !important;
    display: block !important;
  }

  body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .wrap:has(> .staff-nav) main > h1:first-child,
  .wrap:has(> .staff-nav) main > .flash + h1 {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  .welcome-band {
    color: #000000 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .kpi-tile {
    border: 1px solid #999999 !important;
    box-shadow: none !important;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}
/* ============================================================================
   PART 2: Dr Toobaei Psychiatry Practice — Design System Components
   ============================================================================
   This file styles the existing server-rendered markup.
   It relies on Part 1 for tokens, base typography, and shell layout.
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Cards & Surfaces
   -------------------------------------------------------------------------- */
.card,
.form-card,
.summary-card,
.template-card,
.file-preview,
.document-preview,
.request-summary,
.detail,
.transcript,
.timeline-entry,
.medication-row,
.conflict,
.slot,
section.cal-day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: clamp(14px, 2vw, 22px);
  margin: 0 0 16px;
}

/* Generic card look for main content forms and fieldsets */
main > form:not(.inline),
main > fieldset {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: clamp(14px, 2vw, 22px);
  margin: 0 0 16px;
}

/* Neutral wrappers */
.page,
.wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Summary & Analytics Grids */
.summary-cards,
.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.summary-card-title,
.summary-label {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-bottom: 4px;
}

.summary-card-value,
.summary-value {
  display: block;
  font-size: 1.9rem;
  font-weight: 750;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.summary-card-sub {
  display: block;
  color: var(--muted);
  font-size: .85rem;
  margin-top: 4px;
}

.trend-up {
  color: var(--success);
}

.trend-down {
  color: var(--danger);
}

.trend-neutral {
  color: var(--muted);
}

.summary-overdue {
  border-inline-start: 4px solid var(--alert);
}

/* --------------------------------------------------------------------------
   2. Tables
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
  background: var(--surface);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  margin: 0 0 20px;
  max-height: none;
}

/* Remove outer border from table inside scroll container */
.table-scroll table {
  border: none;
  box-shadow: none;
}

.table-scroll th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 650;
  text-align: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table-scroll td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Zebra striping */
.table-scroll tbody tr:nth-child(even) td,
.table-scroll tr:nth-child(even) td {
  background-color: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}

.table-scroll tr:hover td {
  background-color: var(--accent-soft);
}

.table-scroll tr:last-child td {
  border-bottom: 0;
}

td.wrap {
  white-space: normal;
  min-width: 16rem;
}

.audit-table,
.recall-table {
  font-size: .85rem;
}

/* Responsive tables outside scroll container */
main :not(.table-scroll) > table {
  display: block;
  overflow-x: auto;
}

@media (max-width: 700px) {
  main :not(.table-scroll) > table {
    display: block;
    overflow-x: auto;
  }
}

table caption {
  color: var(--muted);
  text-align: start;
  padding: 0 0 8px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
/* Use :where() for low specificity to allow Part 1 overrides */
:where(button, .btn, .button-primary, .button-secondary, input[type=submit], input[type=button], .choice-btn) {
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-strong);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}

:where(button, .btn, .button-primary, .button-secondary, input[type=submit], input[type=button], .choice-btn):hover {
  background: var(--surface-2);
  border-color: var(--accent);
}

:where(button, .btn, .button-primary, .button-secondary, input[type=submit], input[type=button], .choice-btn):active {
  transform: translateY(1px);
}

:where(button, .btn, .button-primary, .button-secondary, input[type=submit], input[type=button], .choice-btn):disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Primary Buttons */
:where(button[type=submit], .btn-primary, .button-primary, input[type=submit]) {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-contrast);
  box-shadow: 0 6px 16px rgba(14,124,134,.22);
}

:where(button[type=submit], .btn-primary, .button-primary, input[type=submit]):hover {
  background: var(--accent-strong);
}

/* Danger Button */
.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 85%, black);
}

/* Secondary Button */
.button-secondary {
  background: transparent;
  border-color: var(--line-strong);
}

/* Small Buttons */
.btn-sm {
  min-height: 34px;
  padding: 0 12px;
  font-size: .82rem;
  border-radius: 10px;
}

/* Button Groups */
.review-buttons,
.file-actions,
.print-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   4. Forms
   -------------------------------------------------------------------------- */
label {
  display: block;
  font-weight: 600;
  font-size: .86rem;
  color: var(--text-strong);
  margin: 12px 0 6px;
}

.field-label {
  display: block;
  font-weight: 600;
  font-size: .86rem;
  color: var(--text-strong);
  margin: 12px 0 6px;
}

/* Inputs, Selects, Textareas */
:where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea) {
  width: 100%;
  max-width: 36rem;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}

textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.5;
}

select {
  appearance: auto;
}

:where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea):focus {
  border-color: var(--accent);
  box-shadow: var(--focus);
  outline: none;
}

:where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]), select, textarea)::placeholder {
  color: var(--muted);
  opacity: .8;
}

/* Checkboxes & Radios */
input[type=checkbox],
input[type=radio] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  margin: 0;
}

input[readonly] {
  background: var(--surface-sunken);
}

/* Fieldsets */
fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 16px;
  background: var(--surface);
}

legend {
  font-weight: 700;
  color: var(--text-strong);
  padding: 0 6px;
}

/* Form Layout */
.form-group,
.form-row {
  margin: 0 0 14px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.hint {
  display: block;
  color: var(--muted);
  font-size: .84rem;
  margin: 4px 0 0;
}

/* Validation */
.field-error,
.error {
  color: var(--danger);
  font-weight: 600;
  font-size: .88rem;
}

p.error,
.error-block,
.errors {
  display: block;
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-inline-start: 4px solid var(--danger);
  border-radius: 12px;
  padding: 12px 14px 12px 44px;
  position: relative;
  margin: 0 0 16px;
}

p.error::before,
.error-block::before,
.errors::before {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  top: 13px;
  width: 18px;
  height: 18px;
  -webkit-mask: url(/assets/icons.svg#alert) center/contain no-repeat;
  mask: url(/assets/icons.svg#alert) center/contain no-repeat;
  background: var(--danger);
}

input[aria-invalid=true],
.field-error + input {
  border-color: var(--danger);
}

/* Radio Groups */
.radio-group {
  display: grid;
  gap: 8px;
}

.radio-item,
label.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}

.radio-item:hover,
label.opt:hover {
  border-color: var(--accent);
}

.radio-item:has(input:checked),
label.opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Date Range Form */
.date-range-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

/* File Upload */
.file-upload-dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.file-upload-dropzone:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* --------------------------------------------------------------------------
   5. Badges & Chips
   -------------------------------------------------------------------------- */
.badge,
.status-badge,
.match-chip,
.kind,
.source-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1.5;
  background: var(--surface-sunken);
  color: var(--text-strong);
  border: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
}

/* Status Variants */
.draft {
  background: var(--surface-sunken);
  color: var(--muted);
}

.ready,
.verified,
.success {
  background: var(--success-soft);
  color: var(--success);
}

.awaiting,
.held {
  background: var(--warning-soft);
  color: var(--warning);
}

.blocked {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Prescription Dispense Mode */
.badge-cd {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.badge-scd {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-normal,
.badge-standard,
.badge-otc {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* Severity Bands */
[data-band*="severe" i] {
  background: var(--danger-soft);
  color: var(--danger);
}

[data-band*="moderate" i] {
  background: var(--warning-soft);
  color: var(--warning);
}

[data-band*="mild" i] {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

[data-band*="minimal" i],
[data-band*="none" i] {
  background: var(--success-soft);
  color: var(--success);
}

.valid-until {
  color: var(--muted);
  font-size: .85rem;
}

/* --------------------------------------------------------------------------
   6. Alert Banners
   -------------------------------------------------------------------------- */
.flash,
.notice,
.note,
.held,
.warn,
.safety-banner,
.safety-alert,
.oversight-alert,
.crisis,
.crisis-indicator,
.violations,
.emergency-block,
.privacy-line {
  display: block;
  position: relative;
  border-radius: 14px;
  padding: 14px 16px 14px 48px;
  margin: 0 0 16px;
  border: 1px solid;
  line-height: 1.5;
}

.flash::before,
.notice::before,
.note::before,
.held::before,
.warn::before,
.safety-banner::before,
.safety-alert::before,
.oversight-alert::before,
.crisis::before,
.crisis-indicator::before,
.violations::before,
.emergency-block::before,
.privacy-line::before {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  top: 15px;
  width: 20px;
  height: 20px;
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
  background: currentColor;
}

/* INFO: Teal */
.flash,
.notice,
.note,
.privacy-line {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text-strong);
}

.flash::before,
.notice::before,
.note::before,
.privacy-line::before {
  -webkit-mask-image: url(/assets/icons.svg#info);
  mask-image: url(/assets/icons.svg#info);
  background: var(--accent);
}

.flash {
  box-shadow: var(--shadow-xs);
  font-weight: 550;
}

/* WARNING: Amber */
.warn,
.held,
.safety-amber {
  background: var(--warning-soft);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.warn::before,
.held::before,
.safety-amber::before {
  -webkit-mask-image: url(/assets/icons.svg#alert);
  mask-image: url(/assets/icons.svg#alert);
  background: var(--warning);
}

/* ALLERGY / DANGER: Red */
.safety-red,
.safety-banner.safety-red,
.violations,
.allergy,
.allergy-banner,
.emergency-block {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  border-left-width: 5px;
  color: var(--text-strong);
  font-weight: 550;
}

.safety-red::before,
.safety-banner.safety-red::before,
.violations::before,
.allergy::before,
.allergy-banner::before,
.emergency-block::before {
  -webkit-mask-image: url(/assets/icons.svg#alert);
  mask-image: url(/assets/icons.svg#alert);
  background: var(--danger);
}

.safety-red strong,
.safety-banner.safety-red strong,
.violations strong,
.allergy strong,
.allergy-banner strong,
.emergency-block strong {
  color: var(--danger);
}

/* CRISIS: Coral */
.crisis,
.crisis-indicator,
.crisis-flagged,
.safety-alert,
.oversight-alert {
  background: var(--alert-soft);
  border-color: color-mix(in srgb, var(--alert) 45%, transparent);
  border-inline-start-width: 5px;
}

.crisis::before,
.crisis-indicator::before,
.crisis-flagged::before,
.safety-alert::before,
.oversight-alert::before {
  -webkit-mask-image: url(/assets/icons.svg#alert);
  mask-image: url(/assets/icons.svg#alert);
  background: var(--alert);
}

.crisis .contact {
  font-size: 1.3rem;
  font-weight: 750;
  color: var(--text-strong);
}

/* SUCCESS: Green */
.safety-green {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success);
}

.safety-green::before {
  -webkit-mask-image: url(/assets/icons.svg#check);
  mask-image: url(/assets/icons.svg#check);
  background: var(--success);
}

/* Default Safety Banner */
.safety-banner {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text-strong);
}

.safety-banner::before {
  -webkit-mask-image: url(/assets/icons.svg#info);
  mask-image: url(/assets/icons.svg#info);
  background: var(--accent);
}

.violations ul {
  margin: 6px 0 0;
  padding-inline-start: 18px;
}

/* --------------------------------------------------------------------------
   7. Empty States
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 150px 24px 28px;
  margin: 8px 0 20px;
  min-height: 220px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--empty-img, none) center 24px / 180px 120px no-repeat, var(--surface);
  color: var(--muted);
  font-size: .95rem;
  max-width: none;
}

.empty-inbox { --empty-img: url(/assets/img/empty-inbox.svg); }
.empty-patients { --empty-img: url(/assets/img/empty-patients.svg); }
.empty-calendar { --empty-img: url(/assets/img/empty-calendar.svg); }
.empty-documents { --empty-img: url(/assets/img/empty-documents.svg); }
.empty-prescriptions { --empty-img: url(/assets/img/empty-prescriptions.svg); }

td.muted[colspan] {
  text-align: center;
  padding: 28px;
  color: var(--muted);
}

.empty {
  color: var(--muted);
  font-style: italic;
}

.chart-empty {
  padding: 18px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   8. Pagination
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 16px 0;
}

.pagination a,
.pagination span,
.pagination strong {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  font-weight: 600;
  color: var(--text-strong);
}

.pagination [aria-current],
.pagination strong {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   9. Charts
   -------------------------------------------------------------------------- */
.chart,
.practice-chart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}

.patient-charts,
.practice-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.chart svg,
.practice-chart svg {
  width: 100%;
  height: auto;
}

.chart-legend {
  font-size: .8rem;
  color: var(--muted);
}

.chart-summary {
  font-weight: 600;
  color: var(--text-strong);
}

.chart-risk {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   10. Calendar
   -------------------------------------------------------------------------- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 12px;
}

.cal-day {
  padding: 14px;
  border-radius: var(--radius);
}

.cal-day h2 {
  font-size: .95rem;
  margin: 0 0 8px;
}

.cal-day h2 a {
  color: var(--text-strong);
  text-decoration: none;
}

.cal-day.today {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.cal-day ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.cal-day li {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  border-inline-start: 3px solid var(--accent);
  font-size: .85rem;
}

.week-nav,
.calendar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
}

.week-nav a,
.calendar-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-strong);
  text-decoration: none;
  font-weight: 600;
  transition: background .15s, border-color .15s;
}

.week-nav a:hover,
.calendar-nav a:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}

mark {
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   11. Inbox & Transcript
   -------------------------------------------------------------------------- */
.transcript-item {
  padding: 10px 14px;
  border-radius: 14px;
  margin: 8px 0;
  max-width: 44rem;
  background: var(--surface-2);
}

.transcript-q {
  background: var(--surface-2);
}

.transcript-a {
  background: var(--accent-soft);
  margin-inline-start: auto;
}

.note-body,
.doc-body {
  white-space: pre-wrap;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* --------------------------------------------------------------------------
   12. Definition Lists
   -------------------------------------------------------------------------- */
dl {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 8px 16px;
}

dt {
  color: var(--muted);
  font-weight: 600;
  font-size: .85rem;
}

dd {
  margin: 0;
}

@media (max-width: 600px) {
  dl {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   13. Details / Accordion
   -------------------------------------------------------------------------- */
details:not(.staff-admin) {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 14px;
  margin: 0 0 12px;
}

details:not(.staff-admin) > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

details:not(.staff-admin) > summary::-webkit-details-marker {
  display: none;
}

details:not(.staff-admin)[open] {
  padding-bottom: 12px;
}

/* --------------------------------------------------------------------------
   14. QR Codes
   -------------------------------------------------------------------------- */
.qr {
  display: inline-block;
  padding: 16px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.qr svg {
  width: 220px;
  height: 220px;
}

/* --------------------------------------------------------------------------
   15. Public Patient Pages
   -------------------------------------------------------------------------- */
body.public {
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
}

.public-hero {
  height: clamp(150px, 26vw, 240px);
  background: url(/assets/img/calm-waves.webp) center/cover no-repeat, var(--teal-50);
  position: relative;
}

.public-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--bg) 100%);
}

body.public-questionnaire .public-hero {
  background: url(/assets/img/questionnaire-intro.svg) center/cover no-repeat, var(--teal-50);
}

.public-card {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, 36rem);
  margin: calc(-1 * clamp(56px, 9vw, 96px)) auto 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 5vw, 40px);
}

.public-card h1 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  margin: 0 0 12px;
}

/* Booking Time Slots */
body.public-booking .public-card button {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  min-height: 52px;
  margin: 0 0 10px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-strong);
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: none;
  transition: border-color .15s, background .15s;
}

body.public-booking .public-card button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Public Card Look */
body.public .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: clamp(14px, 2vw, 22px);
  margin: 0 0 16px;
}

body.public fieldset {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 16px;
  background: var(--surface);
}

body.public label.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}

body.public label.opt:hover {
  border-color: var(--accent);
}

body.public label.opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

body.public input {
  width: 100%;
  max-width: 36rem;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}

body.public input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus);
  outline: none;
}

/* Public Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  body.public {
    background: var(--bg);
    color: var(--text);
  }

  body.public button {
    background: var(--surface);
    color: var(--text-strong);
    border-color: var(--line-strong);
  }

  body.public .notice,
  body.public .held,
  body.public .warn,
  body.public .crisis {
    background: var(--warning-soft);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--text-strong);
  }

  body.public .crisis {
    background: var(--alert-soft);
    border-color: color-mix(in srgb, var(--alert) 45%, transparent);
  }

  body.public .safety-red,
  body.public .violations,
  body.public .emergency-block {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    color: var(--text-strong);
  }
}

/* --------------------------------------------------------------------------
   16. Public Website
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.practice-name {
  font-weight: 750;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.site-nav a {
  color: var(--text);
  font-weight: 550;
  text-decoration: none;
  transition: color .15s;
}

.site-nav a:hover {
  color: var(--accent-strong);
}

.hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  margin: 24px auto;
  padding: clamp(32px, 6vw, 80px) clamp(22px, 5vw, 64px);
  min-height: clamp(320px, 42vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(90deg, rgba(15,42,68,.86) 0%, rgba(15,42,68,.62) 45%, rgba(15,42,68,.10) 100%), url(/assets/img/calm-waves.webp) center/cover no-repeat, var(--navy);
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.hero h1 {
  color: #fff;
  max-width: 40rem;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.3rem);
  line-height: 1.3;
  font-weight: 650;
}

.hero p {
  color: rgba(255,255,255,.88);
  max-width: 38rem;
}

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--teal);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(14,124,134,.35);
  width: fit-content;
  transition: background .15s;
}

.cta-link:hover {
  background: var(--teal-600);
}

.help,
.expect,
.languages {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 32px);
  margin: 20px 0;
}

.help-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.help-list li {
  padding: 12px 14px 12px 40px;
  border-radius: 12px;
  background: var(--surface-2);
  position: relative;
}

.help-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 14px;
  top: 15px;
  width: 16px;
  height: 16px;
  -webkit-mask: url(/assets/icons.svg#leaf) center/contain no-repeat;
  mask: url(/assets/icons.svg#leaf) center/contain no-repeat;
  background: var(--accent);
}

.site-footer {
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 28px 0;
  margin-top: 40px;
}

.profile-photo {
  border-radius: 24px;
  box-shadow: var(--shadow-md);
}

.lead {
  font-size: 1.08rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   17. Utilities & Print
   -------------------------------------------------------------------------- */
@media print {
  .empty-state {
    background: none;
    padding: 12px;
    min-height: 0;
    border: 1px solid #999;
  }

  .public-hero {
    display: none;
  }

  .public-card {
    box-shadow: none;
    border: 0;
    margin: 0;
    width: auto;
  }

  th {
    position: static;
  }

  tr:hover td {
    background: none;
  }

  .table-scroll {
    overflow: visible;
    box-shadow: none;
    border: 0;
  }
}

/* ============================================================================
   PART 3: Refinements (from 1440/390 screenshot review)
   ============================================================================ */

/* 1. MASK SIZING BUG FIX: Force explicit 20x20 sizing for sprite fragments and fix .crisis-flagged base styles */
.flash::before, .notice::before, .note::before, .held::before, .warn::before, .safety-banner::before, .safety-alert::before, .oversight-alert::before, .crisis::before, .crisis-indicator::before, .crisis-flagged::before, .safety-red::before, .safety-amber::before, .safety-green::before, .violations::before, .allergy::before, .allergy-banner::before, .emergency-block::before, .privacy-line::before, p.error::before, .error-block::before, .errors::before {
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.help-list li::before {
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.crisis-flagged {
  display: block;
  position: relative;
  border-radius: 14px;
  padding-block-start: 14px;
  padding-inline-end: 16px;
  padding-block-end: 14px;
  padding-inline-start: 48px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
}
.crisis-flagged::before {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  top: 15px;
  width: 20px;
  height: 20px;
}
/* An inline [crisis] marker inside a timeline entry is a pill, not a banner */
span.crisis-indicator {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  margin: 0 4px;
  border: 1px solid color-mix(in srgb, var(--alert) 45%, transparent);
  border-radius: var(--radius-pill);
  background: var(--alert-soft);
  color: var(--text-strong);
  font-size: .74rem;
  font-weight: 700;
}
span.crisis-indicator::before {
  display: none;
}

/* 2. NESTED BANNERS FIX: Prevent double-boxing in nested containers and style compliance alerts */
:is(.safety-banner, .oversight-alert, .notice, .note, .warn, .held, .crisis, .safety-alert):has(> :is(.flash, .notice, .note, .warn, .held, .safety-red, .safety-amber, .safety-green, .crisis, .crisis-indicator, .crisis-flagged, .safety-alert, .violations, .allergy, .allergy-banner, p, div)) {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  margin: 0 0 16px;
  display: grid;
  gap: 10px;
}
:is(.safety-banner, .oversight-alert, .notice, .note, .warn, .held, .crisis, .safety-alert):has(> :is(.flash, .notice, .note, .warn, .held, .safety-red, .safety-amber, .safety-green, .crisis, .crisis-indicator, .crisis-flagged, .safety-alert, .violations, .allergy, .allergy-banner, p, div))::before {
  display: none;
}
:is(.safety-banner, .oversight-alert, .notice, .note, .warn, .held, .crisis, .safety-alert):has(> :is(.flash, .notice, .note, .warn, .held, .safety-red, .safety-amber, .safety-green, .crisis, .crisis-indicator, .crisis-flagged, .safety-alert, .violations, .allergy, .allergy-banner, p, div)) > p:not([class]) {
  margin: 0;
}
:is(.safety-banner, .oversight-alert) > :is(.flash, .notice, .note, .warn, .held, .safety-red, .safety-amber, .safety-green, .crisis, .crisis-indicator, .safety-alert, .violations) {
  margin: 0;
}
.oversight-alert .flash {
  background: var(--alert-soft);
  border-color: color-mix(in srgb, var(--alert) 45%, transparent);
  border-left-width: 5px;
}
.oversight-alert .flash::before {
  background: var(--alert);
  -webkit-mask-image: url(/assets/icons.svg#alert);
  mask-image: url(/assets/icons.svg#alert);
}

/* 3. HEADER BAND FIX: Extend band styling to oversight alert preceding h1 */
.wrap:has(> .staff-nav) main > .oversight-alert + h1 {
  position: relative;
  margin: 0 0 24px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  min-height: 96px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  overflow: hidden;
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
}

/* 4. WELCOME BAND FIX: Dashboard navy background, art replacement, and mobile adjustments */
.welcome-band .oversight-alert {
  margin: 0 0 16px;
  color: var(--text-strong);
}
.welcome-band .oversight-alert .flash {
  background: #FFF6F3;
  color: var(--navy);
}
.welcome-band .oversight-alert .flash a {
  color: var(--navy);
}
@media (prefers-color-scheme: dark) {
  .welcome-band .oversight-alert .flash {
    background: rgba(255, 156, 135, .16);
    color: #FFFFFF;
  }
  .welcome-band .oversight-alert .flash a {
    color: #FFD7CC;
  }
}
.welcome-band h1 {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.welcome-art {
  background: linear-gradient(90deg, rgba(15, 42, 68, .55), rgba(15, 42, 68, 0) 45%), url(/assets/img/calm-waves.webp) center / cover no-repeat;
  border-radius: 18px;
  min-height: 180px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
@media (max-width: 700px) {
  .welcome-art {
    display: none;
  }
  .welcome-band {
    padding: 20px;
    border-radius: 20px;
    background: radial-gradient(120% 140% at 100% 0%, rgba(14, 124, 134, .55) 0%, transparent 55%), linear-gradient(135deg, rgba(15, 42, 68, .94) 0%, rgba(30, 74, 112, .90) 100%), url(/assets/img/calm-waves.webp) center / cover no-repeat, var(--navy);
  }
}

/* 5. SIDEBAR FIX: Overflow wrap and mobile search zoom fix */
.staff-nav > .muted {
  overflow-wrap: anywhere;
}
@media (max-width: 959.98px) {
  .staff-nav .brand {
    border-bottom: 0;
    padding: 0;
    margin: 0;
    order: 0;
  }
  .staff-search input[type="search"] {
    min-width: 0;
    font-size: 16px;
  }
}

/* 6. KPI GRID FIX: Phone sizing adjustments */
@media (max-width: 420px) {
  .kpi-tile {
    padding: 14px;
  }
  .kpi-value {
    font-size: 1.5rem;
  }
  .quick-action {
    min-height: 52px;
    padding: 10px 12px;
    font-size: .88rem;
  }
}

/* 7. CALENDAR WEEK FIX: Typography and line height */
.cal-day li a {
  font-weight: 650;
  text-decoration: none;
  color: var(--text-strong);
}
.cal-day li {
  line-height: 1.45;
}
/* ==================================================================
   Mobile-first improvements for Dr. Toobaei clinic app
   ==================================================================
   These styles are appended to app.css and improve the experience on
   narrow widths (phones) while leaving desktop untouched.

   All existing class names are preserved — only new rules and media
   queries are added below.

   Breakpoints used:
     ≤420px  phone (iPhone SE, small Android)
     ≤600px  phablet / narrow phone
     ≤700px  narrow tablet / landscape phone
     ≤960px  sidebar collapses to top-bar + bottom tab bar (existing)
     ≤1100px KPI / quick-actions go 2-col (existing)
   ================================================================== */

/* --------------------------------------------------------------------------
   1.  Table-to-cards pattern on mobile (≤600px)
   -------------------------------------------------------------------------- */

/* At ≤600px, hide column headers and turn every row into a card.
   Works on .table-scroll and on regular tables inside main. */

@media (max-width: 600px) {

  /* --- .table-scroll cards --- */
  .table-scroll table {
    border: 0;
    padding: 0 8px;
  }

  .table-scroll thead {
    display: none;
  }

  .table-scroll tbody tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface);
    padding: 12px 14px;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
  }

  .table-scroll td {
    display: block;
    text-align: end !important;
    padding: 4px 0 8px !important;
    border: none;
    position: relative;
  }

  /* Show the first cell as a full-width "title" row */
  .table-scroll td:first-child {
    text-align: start !important;
    font-weight: 600;
    font-size: 1.02rem;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }

  /* Use the <th> text from the row above as a label prefix.
      We rely on the existing <td><th> pair structure: when the table
      renders properly, <td> cells follow <th> cells in order.
      Since the thead is hidden, we use attr(data-label) from td.
      As a fallback for tables without data-label, we style uniformly. */
  .table-scroll td::before {
    content: attr(data-label);
    float: inline-start;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--muted);
    margin-inline-end: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .table-scroll td:first-child::before {
    content: none;
  }

  /* If a td has no data-label attribute, fall back to a generic label */
  .table-scroll td:not(:first-child):not([data-label])::before {
    content: none;
  }

  /* --- Regular tables outside .table-scroll --- */
  main :not(.table-scroll) > table {
    display: block;
  }

  main :not(.table-scroll) > table thead {
    display: none;
  }

  main :not(.table-scroll) > table tbody tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface);
    padding: 12px 14px;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
  }

  main :not(.table-scroll) > table td,
  main :not(.table-scroll) > table th {
    display: block;
    text-align: end;
    padding: 4px 0 8px;
    border: none;
  }

  main :not(.table-scroll) > table td:first-child,
  main :not(.table-scroll) > table th:first-child {
    text-align: start;
    font-weight: 600;
    font-size: 1.02rem;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
  }
}

/* --------------------------------------------------------------------------
   2.  Touch targets — ensure every interactive element meets 44px minimum
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

  /* Radio buttons and checkboxes */
  input[type="radio"],
  input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 4px;
  }

  /* File upload button */
  input[type="file"]::file-selector-button {
    min-height: 44px;
    padding: 8px 16px;
  }

  /* Link-style nav items in bottom tab bar */
  .staff-primary a {
    min-height: 44px;
    padding: 8px 4px;
  }
}

/* --------------------------------------------------------------------------
   3.  Dashboard KPI tiles on phone — tighter grid, readable labels
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .kpi-tile {
    padding: 14px;
    border-radius: 14px;
  }

  .kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .kpi-icon::after {
    inset: 8px;
  }

  .kpi-tile a {
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   4.  Quick actions on phone — stack to single column at very narrow widths
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .quick-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .quick-action {
    min-height: 50px;
    padding: 10px 14px;
  }
}

/* --------------------------------------------------------------------------
   5.  Card / form-card padding on phone — tighter breathing room
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .card,
  .form-card,
  .summary-card,
  .template-card,
  .document-preview,
  .request-summary {
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 14px;
  }

  .file-preview {
    padding: 10px;
  }

  /* Detail lists */
  .detail {
    padding: 12px;
  }

  /* Transcript and timeline */
  .transcript-item {
    padding: 12px;
  }

  .timeline-entry {
    padding: 10px;
  }

  .medication-row {
    padding: 10px 12px;
  }

  .conflict {
    padding: 10px 12px;
  }
}

/* --------------------------------------------------------------------------
   6.  Summary / analytics grid — stack cards on phone
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .summary-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .analytics-summary-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .summary-card,
  .summary-card a {
    padding: 14px;
  }
}

/* --------------------------------------------------------------------------
   7.  Empty states on phone — shrink padding, keep visual impact
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .empty-state {
    padding: 80px 16px 20px;
    min-height: 160px;
    background-size: 120px 80px;
    background-position: center 12px;
    font-size: 0.88rem;
  }

  td.muted[colspan] {
    padding: 20px 12px;
  }
}

/* --------------------------------------------------------------------------
   8.  Public patient pages — larger touch targets, better spacing
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .public-hero {
    padding: 40px 16px 24px;
  }

  .public-hero h1 {
    font-size: 1.5rem;
  }

  .public-card {
    margin: 0 8px;
    padding: 16px;
    border-radius: 14px;
  }

  /* Booking time slot buttons */
  .public-card input[type="radio"] + label,
  .public-card button.time-slot,
  .public-card [role="radiogroup"] label {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 0.92rem;
  }

  /* Patient form inputs */
  .public-card input[type="text"],
  .public-card input[type="email"],
  .public-card input[type="tel"],
  .public-card input[type="number"],
  .public-card input[type="date"],
  .public-card select,
  .public-card textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 10px 12px;
    min-height: 44px;
  }

  .public-card .btn,
  .public-card button[type="submit"] {
    min-height: 48px;
    font-size: 1rem;
    padding: 12px 16px;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   9.  Form groups — tighter rows, readable labels on phone
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .form-group {
    margin-bottom: 14px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  label,
  .field-label {
    font-size: 0.88rem;
    margin-bottom: 4px;
  }

  /* Prevent iOS auto-zoom on form focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   10.  Alerts / banners — tighter padding on phone
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .flash,
  .notice,
  .note,
  .held,
  .warn,
  .safety-banner,
  .safety-alert,
  .oversight-alert,
  .crisis,
  .violations,
  .emergency-block,
  .privacy-line {
    padding-block-start: 12px;
    padding-inline-end: 12px;
    padding-block-end: 12px;
    padding-inline-start: 40px;
    font-size: 0.88rem;
    border-radius: 12px;
  }

  .safety-banner ul {
    padding-inline-start: 16px;
  }

  /* Reduce icon size on alerts */
  .flash::before,
  .notice::before,
  .note::before,
  .held::before,
  .warn::before,
  .safety-banner::before,
  .safety-alert::before,
  .oversight-alert::before,
  .crisis::before,
  .violations::before,
  .emergency-block::before,
  .privacy-line::before {
    width: 20px;
    height: 20px;
    inset-inline-start: 12px;
    top: 14px;
  }
}

/* --------------------------------------------------------------------------
   11.  Charts — stack and scale on phone
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .patient-charts,
  .practice-charts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .practice-chart {
    padding: 12px;
  }

  .chart {
    min-height: 180px;
  }
}

/* --------------------------------------------------------------------------
   12.  Calendar — single column at phone widths
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .cal-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cal-day {
    min-height: 60px;
    padding: 6px 8px;
  }

  .week-nav {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }

  .calendar-nav {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   13.  Definition lists — compact on phone
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  dl.detail {
    gap: 6px;
  }

  dl.detail dt {
    padding: 4px 0;
  }

  dl.detail dd {
    padding: 4px 0 10px;
  }
}

/* --------------------------------------------------------------------------
   14.  Details / accordion — comfortable tap target on phone
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  details {
    margin-bottom: 8px;
    border-radius: 14px;
  }

  details > summary {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.92rem;
  }

  details > div {
    padding: 12px 14px;
  }
}

/* --------------------------------------------------------------------------
   15.  Public website — tighter hero, full-width CTA on phone
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .hero {
    min-height: 260px;
    padding: 40px 16px;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  .cta-link {
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    font-size: 1rem;
  }

  .help,
  .expect,
  .languages {
    margin: 16px 0;
    padding: 16px;
    border-radius: 14px;
  }

  .help-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .help-list li {
    padding: 10px 12px 10px 36px;
  }

  .site-footer {
    padding: 20px 16px;
    margin-top: 24px;
  }
}

/* --------------------------------------------------------------------------
   16.  Sticky header bar on mobile — prevent content from hiding behind it
   -------------------------------------------------------------------------- */

@media (max-width: 959.98px) {
  /* The bottom tab bar is fixed at the bottom, so add bottom padding to main
     content so tables/lists don't get hidden behind it. */
  main {
    padding-bottom: calc(var(--tabbar-h, 72px) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* Ensure page header band doesn't overlap with sticky nav */
  .page-header-band {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   17.  Auth split pages — full-card flow on phone
   -------------------------------------------------------------------------- */

@media (max-width: 859.98px) {
  /* Already handled in base, but tighten further at small widths */
}

@media (max-width: 420px) {
  .auth-card {
    padding: 20px 16px;
  }

  .auth-split {
    gap: 0;
  }
}

/* --------------------------------------------------------------------------
   18.  Pagination — single row on phone
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .pagination {
    justify-content: center;
    gap: 4px;
  }

  .pagination a,
  .pagination span {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.84rem;
  }
}

/* --------------------------------------------------------------------------
   19.  Badge / status chip — smaller pills on phone
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .badge,
  .status-badge,
  .match-chip,
  .chip,
  .kind,
  .source-id {
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
  }
}

/* --------------------------------------------------------------------------
   20.  Clinical note editor — structured fields, chips, actions
   -------------------------------------------------------------------------- */

.note-header-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .note-header-row {
    grid-template-columns: 1fr;
  }
}

.note-fieldset {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
}

.note-fieldset legend {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0 8px;
}

.note-field {
  margin-bottom: 16px;
}

.note-field:last-child {
  margin-bottom: 0;
}

.note-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}

.note-field textarea,
.note-field input[type="text"] {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-family: var(--font-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: border-color 0.15s ease;
}

.note-field textarea:focus,
.note-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.note-field textarea::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

/* Radio button group for risk level */
.note-field--radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.note-field--radio label {
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  transition: background 0.15s ease;
  min-height: 44px;
}

.radio-option:hover {
  background: var(--surface-2);
}

.radio-option input[type="radio"] {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* Chip styles for risk levels and status */
.chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.chip--low {
  background: var(--green-soft);
  color: var(--green-700);
}

.chip--moderate {
  background: var(--amber-soft);
  color: var(--amber-700);
}

.chip--high {
  background: var(--coral-soft);
  color: var(--coral-700);
}

.chip--imminent {
  background: var(--red-soft);
  color: var(--red-700);
}

/* Note actions bar */
.note-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* Finalize / review preview */
.note-preview {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
}

.note-preview p {
  margin: 8px 0;
}

.note-preview .note-body {
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius-md);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   21.  Print — ensure cards still print cleanly
   -------------------------------------------------------------------------- */

/* (print styles are already in the base file; no changes needed) */