/* Orthodontic AI Clinic — UI matching approved reference (Тема 1) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========== THEMES ========== */
:root {
  color-scheme: light;
  --bg: rgb(240, 227, 204);
  --bg-elevated: #faf9f6;
  --card: #d8d0c1;
  --text: #010101;
  --muted: #0b0b0b;
  --accent: #6e481c;
  --accent-2: #b78a03;
  --accent-soft: rgba(212, 141, 0, 0.426);
  --border: rgba(50,52,58,.08);
  --border-strong: rgba(50,52,58,.13);
  --ok: #3f8667; --warn: #98772f; --error: #b6535b;
  --shadow: 0 8px 28px rgba(50,52,58,.07);
  --radius: 14px; --radius-sm: 20px;
  --sidebar-bg: linear-gradient(180deg, #6e481c 0%, #000000 100%);
  --sidebar-text: #f0f1f4;
  --sidebar-muted: #9aa0ab;
  --sidebar-hover: rgba(139,123,184,.14);
  --sidebar-active: linear-gradient(135deg,#6e481c,#6e481c);
  --sidebar-border: rgba(255,255,255,.07);
  --on-accent: #fff;
  --font: "Inter", system-ui, -apple-system, sans-serif;
}

/* Dark theme removed — map any leftover dark cookie to comfort look */
[data-theme="dark"] {
  color-scheme: light;
  --bg: rgb(240, 227, 204);
  --bg-elevated: #faf9f6;
  --card: #d8d0c1;
  --text: #010101;
  --muted: #0b0b0b;
  --accent: #6e481c;
  --accent-2: #b78a03;
  --accent-soft: rgba(212, 141, 0, 0.426);
  --border: rgba(50,52,58,.08);
  --border-strong: rgba(50,52,58,.13);
  --ok: #3f8667; --warn: #98772f; --error: #b6535b;
  --shadow: 0 8px 28px rgba(50,52,58,.07);
  --radius: 14px; --radius-sm: 20px;
  --sidebar-bg: linear-gradient(180deg, #6e481c 0%, #000000 100%);
  --sidebar-text: #f0f1f4;
  --sidebar-muted: #9aa0ab;
  --sidebar-hover: rgba(139,123,184,.14);
  --sidebar-active: linear-gradient(135deg,#6e481c,#6e481c);
  --sidebar-border: rgba(255,255,255,.07);
  --on-accent: #fff;
  --font: "Inter", system-ui, -apple-system, sans-serif;
}


[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fa;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --text: #1a2030;
  --muted: #6b7588;
  --accent: #5b6fd6;
  --accent-2: #7b6fd0;
  --accent-soft: rgba(91,111,214,.1);
  --border: rgba(20,30,50,.09);
  --border-strong: rgba(20,30,50,.14);
  --ok: #1f9d5c; --warn: #b57a12; --error: #d64550;
  --shadow: 0 10px 30px rgba(30,40,70,.08);
  --sidebar-bg: #ffffff;
  --sidebar-text: #1a2030;
  --sidebar-muted: #6b7588;
  --sidebar-hover: rgba(91,111,214,.08);
  --sidebar-active: linear-gradient(135deg,#5b6fd6,#7b6fd0);
  --sidebar-border: rgba(20,30,50,.09);
  --on-accent: #fff;
}

/* Comfort — exact match to reference photo */
[data-theme="comfort"] {
  color-scheme: light;
  --bg: rgb(240, 227, 204);
  --bg-elevated: #faf9f6;
  --card: #d8d0c1;
  --text: #010101;
  --muted: #0b0b0b;
  --accent: #6e481c;
  --accent-2: #b78a03;
  --accent-soft: rgba(212, 141, 0, 0.426);
  --border: rgba(50,52,58,.08);
  --border-strong: rgba(50,52,58,.13);
  --ok: #3f8667; --warn: #98772f; --error: #b6535b;
  --shadow: 0 8px 28px rgba(50,52,58,.07);
  --sidebar-bg: linear-gradient(180deg, #6e481c 0%, #000000 100%);
  --sidebar-text: #f0f1f4;
  --sidebar-muted: #9aa0ab;
  --sidebar-hover: rgba(139,123,184,.14);
  --sidebar-active: linear-gradient(135deg,#6e481c,#6e481c);
  --sidebar-border: rgba(255,255,255,.07);
  --on-accent: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

/* ========== APP SHELL ========== */
.app-shell { display: flex; min-height: 100vh; }
.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ========== SIDEBAR ========== */
.sidebar {
  width: 240px; flex: 0 0 240px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; z-index: 60;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 18px 16px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-brand:hover { opacity: .95; color: inherit; }
.brand-mark {
  width: 40px;
  height: 48px;
  border-radius: 11px;
  background: transparent;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name {
  font-weight: 700; font-size: 13px; letter-spacing: -.02em;
  color: var(--sidebar-text);
}
.brand-sub {
  font-size: 10px; color: var(--sidebar-muted);
  margin-top: 3px; letter-spacing: .01em;
}
.sidebar-toggle { display: none; }

.sidebar-nav {
  flex: 1; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 0.1px;
}
.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 14px;
  color: var(--sidebar-muted); font-size: 13px; font-weight: 500;
  text-decoration: none; transition: background .15s, color .15s;
  position: relative;
  min-height: 42px;
}
.sidebar-link .ic { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-link:hover {
  background: var(--sidebar-hover); color: var(--sidebar-text); text-decoration: none;
}
.sidebar-link.active {
  background: var(--sidebar-active); color: #fff; font-weight: 600;
  box-shadow: 0 4px 14px rgba(139,123,184,.3);
}
.nav-badge {
  margin-left: auto; background: var(--accent-2, #cf98a8); color: #fff;
  font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 9px; display: grid; place-items: center; padding: 0 5px;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 12px 12px 16px;
  border-top: 1px solid var(--sidebar-border);
}
.theme-block { margin-bottom: 14px; }
.theme-label {
  font-size: 11px; font-weight: 600; color: var(--sidebar-muted);
  margin-bottom: 8px; letter-spacing: .02em;
}
.theme-switcher {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.theme-switcher-2 {
  grid-template-columns: 1fr 1fr;
}
.theme-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.1px;
  padding: 11.5px 3px; border-radius: 20px;
  border: 1px solid var(--sidebar-border);
  background: rgba(255,255,255,.04);
  color: var(--sidebar-muted); font-size: 10.5px; font-weight: 600;
  text-decoration: none; transition: .15s;
}
.theme-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text); text-decoration: none; }
.theme-btn.active {
  background: var(--sidebar-active); color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(139,123,184,.35);
}
.theme-ico { font-size: 14px; }

.user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; margin-bottom: 8px;
}
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sidebar-active); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.user-name { font-weight: 600; font-size: 13px; color: var(--sidebar-text); }
.user-role { font-size: 11px; color: var(--sidebar-muted); }
.logout-form { margin: 0; }
.logout-btn {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--sidebar-border);
  background: rgba(255,255,255,.04); color: var(--sidebar-muted);
  font: inherit; font-size: 13px; cursor: pointer; text-align: left;
  transition: .15s;
}
.logout-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }

/* ========== TOPBAR ========== */
.topbar {
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 24px; background: transparent;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-left { flex: 1; min-width: 0; }

.search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 16px; flex: 1; max-width: 380px;
  transition: .15s;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box input {
  border: 0; background: transparent; outline: none; width: 100%;
  font: inherit; font-size: 13.5px; color: var(--text);
}
.search-box input::placeholder { color: var(--muted); }
.search-ico { color: var(--muted); font-size: 14px; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text); display: grid; place-items: center;
  cursor: pointer; font-size: 15px; position: relative;
  transition: .15s; text-decoration: none; flex-shrink: 0;
}
.icon-btn:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); text-decoration: none; }
.help-btn {
  background: var(--accent-soft); border-color: transparent;
  color: var(--accent); font-weight: 700; font-size: 15px;
}
.help-btn:hover { background: var(--accent); color: #fff; }
.dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--card);
}
.top-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.mobile-only { display: none; }

/* Quick menu */
.quick-wrap { position: relative; }
.quick-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 100;
  display: flex; flex-direction: column; gap: 1px;
}
.quick-menu[hidden] { display: none !important; }
.quick-menu a, .q-logout {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--text); font-size: 13.5px; text-decoration: none;
  background: transparent; border: 0; width: 100%; text-align: left;
  cursor: pointer; font: inherit;
}
.quick-menu a:hover, .q-logout:hover { background: var(--accent-soft); text-decoration: none; }
.q-divider { height: 1px; background: var(--border); margin: 4px 8px; }
.q-logout { color: var(--error) !important; }

/* Help panel */
.help-panel {
  position: fixed; top: 72px; right: 24px;
  width: min(320px, calc(100vw - 32px)); z-index: 90;
  animation: fadeUp .18s ease;
}
.help-panel[hidden] { display: none !important; }
@keyframes fadeUp { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.help-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); padding: 18px;
}
.help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.help-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.help-x {
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: transparent; color: var(--muted); font-size: 18px; cursor: pointer;
}
.help-x:hover { background: var(--accent-soft); color: var(--text); }
.help-lead { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.help-list {
  list-style: none; margin: 0 0 14px; padding: 0;
  font-size: 13px; line-height: 1.5; counter-reset: helpstep;
}
.help-list li {
  position: relative; padding: 9px 0 9px 32px;
  border-bottom: 1px solid var(--border); counter-increment: helpstep;
}
.help-list li:last-child { border-bottom: 0; padding-bottom: 2px; }
.help-list li::before {
  content: counter(helpstep);
  position: absolute; left: 0; top: 9px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.help-ok { width: 100%; justify-content: center; }

/* ========== CONTENT ========== */
.content { padding: 16px 28px 56px; max-width: 1240px; margin: 0 auto; width: 100%; }

.page-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.eyebrow {
  margin: 0 0 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.page-hero h1 {
  margin: 0 0 4px; font-size: 28px; font-weight: 700;
  letter-spacing: -.03em; color: var(--text);
}
.page-hero .muted { margin: 0; font-size: 13.5px; color: var(--muted); }
.hero-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 12px; font: inherit; font-size: 13.5px;
  font-weight: 600; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: .15s;
  white-space: normal; text-align: center; line-height: 1.25;
  max-width: 100%;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary, .btn {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 4px 14px rgba(139,123,184,.25);
}
.btn-primary:hover, .btn:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn-secondary, .btn.secondary {
  background: var(--card); color: var(--text);
  border-color: var(--border-strong); box-shadow: none;
}
.btn-secondary:hover, .btn.secondary:hover { background: var(--accent-soft); color: var(--text); }

/* KPI cards — exact like reference */
.kpi-row, .dashboard-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-bottom: 20px;
}
.kpi, .dashboard-kpi {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 14px;
  text-decoration: none; color: var(--text);
  transition: .15s; display: flex; flex-direction: column; gap: 2px;
  min-width: 0; position: relative;
}
.kpi:hover, .dashboard-kpi:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: var(--border-strong); text-decoration: none; color: var(--text);
}
.kpi-icon { font-size: 20px; margin-bottom: 6px; opacity: .85; }
.kpi-icon-circle {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px;
  display: grid; place-items: center; font-size: 18px; flex-shrink: 0;
}
.kpi-icon-circle.ic-green  { background: #e7f6e2; color: #3f8667; }
.kpi-icon-circle.ic-purple { background: #f9ecf0; color: #b8758b; }
.kpi-icon-circle.ic-blue   { background: #e8f2fd; color: #3f7dd6; }
.kpi-icon-circle.ic-amber  { background: #fdf1de; color: #b57a12; }
.kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -.04em; line-height: 1.15; margin: 2px 0; }
.kpi-sub { font-size: 12px; color: var(--muted); }
.kpi-sub.up { color: var(--ok); }
.kpi-sub.warn { color: var(--warn); }
.kpi-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 650; padding: 3px 9px;
  border-radius: 999px; margin-top: 8px; width: fit-content;
}
.kpi-trend.trend-up    { background: #e7f6e2; color: #2f8659; }
.kpi-trend.trend-info  { background: #f9ecf0; color: #b8758b; }
.kpi-trend.trend-blue  { background: #e8f2fd; color: #2f6fc4; }
.kpi-trend.trend-warn  { background: #fdf1de; color: #a5690f; }

/* Two-column grid */
.dashboard-grid, .dashboard-grid-main {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
}
.card, .dashboard-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; gap: 8px;
}
.section-head h2 { margin: 0; font-size: 14.5px; font-weight: 650; }
.section-head .muted.small { margin: 0; font-size: 12px; }
.section-head a { font-size: 12.5px; font-weight: 500; color: var(--accent); }
.section-icon { display: none; } /* reference uses subtle dots via content */

/* Appointment / task rows */
.appointment-list, .task-list { display: flex; flex-direction: column; }
.appointment-row, .task-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text); font-size: 13.5px;
}
.appointment-row:last-child, .task-row:last-child { border-bottom: 0; }
.appointment-row:hover { background: var(--accent-soft); border-radius: 8px; text-decoration: none; color: var(--text); }
.appointment-row time, .task-row time {
  font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 42px;
}
.mini-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  display: grid; place-items: center; font-weight: 650; font-size: 12px; flex-shrink: 0;
}
.appointment-copy, .task-row > span:not(.task-check) {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.appointment-copy b, .task-row b { font-weight: 600; font-size: 13.5px; }
.appointment-copy small, .task-row small { font-size: 12px; color: var(--muted); }
.status-pill {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}
/* Confirmed = accent (purple/lavender), planned or scheduled = ok (green) — matches reference */
.status-confirmed, .status-pill.status-confirmed { background: rgba(141,112,200,.14); color: var(--accent); }
.status-planned, .status-pill.status-planned,
.status-scheduled, .status-pill.status-scheduled { background: rgba(63,134,103,.13); color: var(--ok); }

.task-check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong);
  background: transparent; cursor: pointer; font-size: 12px; color: var(--accent);
  display: grid; place-items: center; flex-shrink: 0;
}
.task-check:hover { border-color: var(--accent); background: var(--accent-soft); }
.empty-state {
  padding: 28px 12px; text-align: center; color: var(--muted); font-size: 13.5px;
}
.empty-state a { color: var(--accent); font-weight: 500; }

/* AI block */
.ai-block {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px;
}
.ai-tips {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px;
}
.ai-tip {
  padding: 14px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--border); font-size: 13px;
}
.ai-tip-icon {
  width: 32px; height: 32px; border-radius: 9px; margin-bottom: 8px;
  display: grid; place-items: center; font-size: 15px;
}
.ai-tip-icon.tip-rose   { background: #fdecef; color: #c2607a; }
.ai-tip-icon.tip-blue   { background: #e8f2fd; color: #3f7dd6; }
.ai-tip-icon.tip-purple { background: #f9ecf0; color: #b8758b; }
.ai-tip-title { font-weight: 600; margin-bottom: 4px; font-size: 13.5px; }
.ai-tip-text { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* Utility: two cards side by side */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
}

/* Field helper text under labels */
.field-hint {
  display: block;
  margin-top: -2px;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  opacity: 0.85;
  letter-spacing: 0;
  line-height: 1.35;
}
.form-card-lead {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* ========== FORMS ========== */
form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

form > label,
.form-field,
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 18px;
  align-items: end;
}
.form-grid > label,
.form-grid .form-field {
  min-width: 0;
}
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-full { grid-column: 1 / -1; }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
input:not([type]),
select,
textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated, var(--card));
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.45;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    transform .12s ease;
  appearance: none;
  -webkit-appearance: none;
}

textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.55;
  padding-top: 13px;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b94a8' d='M1.4 1.4L6 6l4.6-4.6L12 2.8 6 8.8 0 2.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
  font-weight: 400;
}

input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: var(--card);
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 4px 14px rgba(0, 0, 0, 0.06);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-soft, rgba(0, 0, 0, 0.04));
  box-shadow: none;
}

input:invalid:not(:placeholder-shown):not(:focus),
textarea:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(255, 107, 122, 0.12);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 2px;
  padding-top: 6px;
}

.card form {
  margin-top: 6px;
}
.card form > label {
  margin: 0;
}

.card form .btn,
.form-actions .btn {
  align-self: flex-start;
  margin-top: 2px;
  min-width: 140px;
  padding: 11px 20px;
  border-radius: 12px;
  white-space: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px var(--accent-soft, rgba(124, 107, 175, 0.28));
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.card form .btn:hover,
.form-actions .btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 6px 20px var(--accent-soft, rgba(124, 107, 175, 0.35));
}
.card form .btn:active,
.form-actions .btn:active {
  transform: translateY(0);
}

[data-theme="comfort"] input[type="text"],
[data-theme="comfort"] input[type="search"],
[data-theme="comfort"] input[type="email"],
[data-theme="comfort"] input[type="tel"],
[data-theme="comfort"] input[type="number"],
[data-theme="comfort"] input[type="password"],
[data-theme="comfort"] input[type="url"],
[data-theme="comfort"] input[type="datetime-local"],
[data-theme="comfort"] input[type="date"],
[data-theme="comfort"] input[type="time"],
[data-theme="comfort"] input:not([type]),
[data-theme="comfort"] select,
[data-theme="comfort"] textarea {
  background: #fffdf9;
  border-color: rgba(110, 72, 28, 0.14);
}
[data-theme="comfort"] input:focus,
[data-theme="comfort"] select:focus,
[data-theme="comfort"] textarea:focus {
  border-color: #6e481c;
  box-shadow:
    0 0 0 4px rgba(110, 72, 28, 0.12),
    0 4px 14px rgba(110, 72, 28, 0.08);
  background: #ffffff;
}


/* ========== TABLES ========== */
.card table,
table.data,
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  margin-top: 8px;
}
.card table th,
table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1.5px solid var(--border-strong);
  white-space: nowrap;
  background: transparent;
}
.card table td,
table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.card table tr:last-child td,
table tr:last-child td {
  border-bottom: none;
}
.card table tbody tr:hover td,
table tbody tr:hover td {
  background: var(--accent-soft);
}
.card table a {
  color: var(--accent);
  font-weight: 500;
}
.card table a:hover {
  color: var(--accent-2);
}

/* Card titles */
.card > h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.card > h2 a {
  font-weight: 500;
}
.card > h2 + table,
.card > h2 + form,
.card > h2 + p {
  margin-top: 12px;
}

/* Page title on orthodontics etc. */
.content > h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.content > h1 + .muted,
.content > p.muted {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.5;
}
.content > p.muted a {
  color: var(--accent);
  font-weight: 500;
}
.content > p.muted a:hover {
  color: var(--accent-2);
}

/* Card spacing on the page */
.content > .card,
.content > .grid {
  margin-bottom: 16px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}


/* ========== UX CONVENIENCE ========== */

/* Keyboard focus visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: none;
}

/* Scrollable tables on narrow screens */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
  border-radius: 10px;
}
.table-wrap table {
  min-width: 640px;
  margin-top: 0;
}

/* Sticky table header while scrolling */
.table-wrap thead th,
.card table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
}

/* Friendlier empty states */
.empty-state,
.card table td.muted,
.card .muted:only-child {
  padding: 20px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
.empty-state {
  padding: 28px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--accent-soft);
}
.empty-state a {
  color: var(--accent);
  font-weight: 600;
}

/* Quick links under page title */
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.page-links a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: .15s;
}
.page-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
}

/* Section spacing rhythm */
.content > .card + .card,
.content > .grid + .card,
.content > .card + .grid {
  margin-top: 4px;
}

/* Make long forms less tiring */
.form-grid {
  gap: 14px 16px;
}
@media (min-width: 901px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-grid.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Secondary button clarity */
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

/* Status chips more readable */
.status-pill {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

/* Sidebar slightly roomier nav */
.sidebar-nav {
  padding: 14px 12px;
  gap: 4px;
}

/* Reduce accidental horizontal scroll */
.main-wrap, .content {
  overflow-x: hidden;
}


/* ========== SCROLLBAR (sidebar + page) ========== */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.28) transparent;
}
.sidebar::-webkit-scrollbar {
  width: 8px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.38);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Main content scrollbar */
.main-wrap,
.content,
.table-wrap,
.table-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 72, 28, 0.35) transparent;
}
.main-wrap::-webkit-scrollbar,
.content::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.main-wrap::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.main-wrap::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(110, 72, 28, 0.28);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.main-wrap::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 72, 28, 0.45);
  background-clip: padding-box;
}

/* Light theme scrollbar on light sidebar */
[data-theme="light"] .sidebar {
  scrollbar-color: rgba(20,30,50,0.25) transparent;
}
[data-theme="light"] .sidebar::-webkit-scrollbar-thumb {
  background: rgba(20,30,50,0.18);
  background-clip: padding-box;
  border: 2px solid transparent;
}
[data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(20,30,50,0.32);
  background-clip: padding-box;
}

/* ========== APPOINTMENTS UX ========== */
.appt-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.appt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 18px;
  padding: 16px 18px !important;
}
.appt-toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.appt-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.appt-view-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.appt-view-switch button,
.appt-view-switch .view-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: .15s;
}
.appt-view-switch button.active,
.appt-view-switch button[aria-pressed="true"],
.appt-view-switch .view-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.appt-view-switch button:hover:not(.active) {
  color: var(--text);
  background: rgba(255,255,255,0.35);
}
.appt-date-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.appt-date-nav button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elevated, #fff);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  display: grid;
  place-items: center;
  transition: .15s;
}
.appt-date-nav button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.appt-date-nav .appt-today-btn,
.appt-date-nav button.today {
  width: auto;
  padding: 0 14px;
  font-weight: 600;
  font-size: 12.5px;
}
.appt-date-label {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  min-width: 140px;
}
.appt-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(100%, 260px);
}
.appt-filters select {
  min-width: 200px;
}
.appt-calendar-card {
  padding: 12px 14px 16px !important;
  overflow: hidden;
}
.appt-grid {
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elevated, #fff);
}
.appt-col-head {
  padding: 10px 8px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(0,0,0,0.03);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.appt-col-head.today {
  color: var(--accent);
  background: var(--accent-soft);
}
.appt-col-head b {
  display: block;
  font-size: 16px;
  color: var(--text);
  margin-top: 2px;
}
.appt-week-grid {
  grid-template-columns: 56px repeat(7, 1fr);
}
.appt-day-grid {
  grid-template-columns: 56px 1fr;
}
.appt-month-grid {
  grid-template-columns: repeat(7, 1fr);
}
.appt-slot {
  min-height: 52px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 3px;
  cursor: pointer;
  transition: background .12s;
}
.appt-slot:hover {
  background: var(--accent-soft);
}
.appt-slot-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  background: rgba(0,0,0,0.02);
  cursor: default !important;
}
.appt-slot-time:hover {
  background: rgba(0,0,0,0.02);
}
.appt-event {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 7px;
  margin-bottom: 3px;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 11.5px;
  line-height: 1.25;
  cursor: pointer;
}
.appt-event b {
  font-weight: 650;
  font-size: 11.5px;
}
.appt-event span,
.appt-event small {
  color: var(--muted);
  font-size: 10.5px;
}
.appt-month-cell {
  min-height: 88px;
  padding: 6px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.appt-month-cell:hover {
  background: var(--accent-soft);
}
.appt-month-cell.today {
  background: rgba(110, 72, 28, 0.06);
}
.appt-month-day {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.appt-month-event {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 5px;
  border-left: 2px solid var(--accent);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 10, 0.45);
  z-index: 100;
  display: none;              /* скрыто по умолчанию */
  place-items: center;
  padding: 16px;
}
.appt-modal-backdrop.open {
  display: grid;              /* показывается только с классом open */
}
.appt-modal {
  width: min(520px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  padding: 20px 22px !important;
  box-shadow: var(--shadow);
}
.appt-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}


/* ========== KNOWLEDGE UI ========== */
.kb-upload-form { gap: 12px; }
.kb-file-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  background: var(--bg-elevated, #fff);
  cursor: pointer;
}
.kb-file-label input[type="file"] {
  position: absolute;
  width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.kb-file-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
}
.kb-file-name { font-size: 13px; font-weight: 500; }
.kb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 420px;
}
.kb-actions form { margin: 0; }
.kb-actions .btn {
  min-width: 0;
  padding: 7px 11px;
  font-size: 12px;
  margin: 0;
  box-shadow: none;
}
.kb-cat-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1 1 140px;
}
.kb-cat-form input {
  padding: 7px 10px;
  font-size: 12.5px;
  min-width: 100px;
}
.kb-meta {
  width: 100%;
  margin-top: 6px;
}
.kb-meta summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 0;
}
.kb-meta form {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated, #fff);
}
.kb-reindex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.kb-reindex .btn { margin: 0; box-shadow: none; }


/* RU button adapt */
.btn, button.btn, a.btn {
  word-break: break-word;
  hyphens: auto;
}
.btn-primary, .btn {
  min-height: 40px;
}
.btn-secondary, .btn.secondary {
  min-height: 38px;
  padding-left: 14px;
  padding-right: 14px;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.row-actions .btn {
  min-width: 0;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 12.5px;
  box-shadow: none;
}
.hero-actions .btn,
.form-actions .btn {
  flex: 0 1 auto;
}

/* ========== RESPONSIVE ========== */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 55; opacity: 0; transition: .2s;
}
.sidebar-overlay.show { display: block; opacity: 1; }

@media (max-width: 1100px) {
  .kpi-row, .dashboard-kpis { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .dashboard-grid-main { grid-template-columns: 1fr; }
  .ai-tips { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 70;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: none; }
  .mobile-only { display: grid !important; }
  .content { padding: 8px 16px 32px; }
  .topbar { padding: 0 12px; height: 56px; }
  .search-box { max-width: none; }
}
@media (max-width: 600px) {
  .kpi-row, .dashboard-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-value { font-size: 22px; }
  .page-hero { flex-direction: column; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; }
  .topbar-right .icon-btn:not(.help-btn) { display: none; }
  .help-panel { right: 12px; top: 60px; }
}
@media (max-width: 400px) {
  .kpi-row, .dashboard-kpis { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  .mobile-only { display: none !important; }
  .sidebar-overlay { display: none !important; }
}

/* Portal leftovers */
.portal-top { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--sidebar-bg); }
.portal-main { padding:24px 20px; max-width:900px; margin:0 auto; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }


/* ================================================================
   ALTA DENTAL DESKTOP UI — polished Windows application layer
   Keeps existing markup/routes; changes presentation only.
   ================================================================ */
:root {
  --alta-purple: #b8758b;
  --alta-purple-2: #cf98a8;
  --alta-purple-soft: #f9ecf0;
  --alta-ink: #1f2430;
  --alta-muted: #727887;
  --alta-surface: #ffffff;
  --alta-bg: #faf7f1;
  --alta-line: #ecdfe2;
}

[data-theme="comfort"] {
  --bg: #ece3d3;
  --bg-elevated: #faf6ee;
  --card: #faf6ee;
  --text: #1f2430;
  --muted: #727887;
  --accent: #b8758b;
  --accent-2: #cf98a8;
  --accent-soft: #f9ecf0;
  --border: #e3d6d9;
  --border-strong: #d8c4c9;
  --shadow: 0 10px 30px rgba(70,35,48,.07);
  --sidebar-bg: linear-gradient(180deg, #3d3226 0%, #1a1a1a 100%);
  --sidebar-text: #f8f7fb;
  --sidebar-muted: #aaa5b4;
  --sidebar-hover: rgba(255,255,255,.07);
  --sidebar-active: linear-gradient(135deg,#b8758b,#cf98a8);
  --sidebar-border: rgba(255,255,255,.08);
  --font: Inter, "Segoe UI", system-ui, sans-serif;
  --alta-surface: #faf6ee;
  --alta-bg: #ece3d3;
  --alta-line: #e3d6d9;
  --btn-bg: linear-gradient(135deg, #4a3c2c 0%, #1a1a1a 100%);
  --btn-bg-hover: linear-gradient(135deg, #5c4a36 0%, #262626 100%);
}

body { background: var(--bg); color: var(--text); }
.sidebar { width: 258px; flex-basis: 258px; background: var(--sidebar-bg); }
.sidebar-brand { padding: 22px 20px 19px; gap: 13px; }
.brand-mark { width: 43px; height: 48px; background:#fff; border-radius:12px; padding:4px; }
.brand-name { font-size: 14px; letter-spacing:.01em; }
.brand-ai { font-size: 10px; opacity:.82; letter-spacing:.04em; }
.brand-sub { font-size: 10.5px; opacity:.72; }
.sidebar-link { margin: 3px 12px; border-radius: 12px; padding: 11px 14px; font-size: 14px; }
.sidebar-link.active { box-shadow: 0 5px 16px rgba(141,112,200,.18); }
.sidebar-link .ic { width: 22px; font-size: 16px; }
.main-wrap { background: var(--bg); }
.topbar { height: 62px; background: rgba(255,255,255,.86); border-bottom:1px solid var(--alta-line); backdrop-filter: blur(12px); }
.content { max-width: 1500px; width:100%; margin:0 auto; padding: 28px 44px 44px; }
.page-hero { margin-bottom: 24px; }
.page-hero h1 { font-size: 32px; line-height:1.15; letter-spacing:-.035em; margin:5px 0 7px; }
.eyebrow { color: var(--alta-purple); font-weight:700; letter-spacing:.09em; font-size:11px; text-transform:uppercase; }
.muted { color: var(--alta-muted); }
.kpi-row { gap: 16px; }
.kpi, .card, .dashboard-card { border:1px solid var(--alta-line); box-shadow: var(--shadow); border-radius:18px; background:var(--alta-surface); }
.kpi { padding:20px; transition:transform .16s ease, box-shadow .16s ease; }
.kpi:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(44,35,70,.10); }
.kpi-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--alta-purple-soft); }
.kpi-value { font-size:30px; letter-spacing:-.04em; }
.dashboard-grid { gap:18px; }
.dashboard-card { padding:20px; }
.section-head h2 { font-size:17px; letter-spacing:-.02em; }
.appointment-row, .task-row { border-color:var(--alta-line); padding:12px 8px; }
.status-pill { border-radius:999px; padding:5px 10px; }
.empty-state { background:#f5f1fc; border:1px dashed #d9cff0; border-radius:16px; padding:30px 18px; color:#676074; }
.ai-block { margin-top:18px; padding:20px; border:1px solid #e3d9f5; border-radius:20px; background:linear-gradient(135deg,#f7f2ff,#ffffff); box-shadow:var(--shadow); }
.ai-tips { gap:14px; }
.ai-tip { background:#fff; border:1px solid #e5dff0; border-radius:16px; padding:18px; box-shadow:0 5px 18px rgba(60,45,90,.05); }
.ai-tip-title { font-weight:700; margin-bottom:8px; }
.btn { border-radius:12px; font-weight:650; box-shadow:none; }
.btn:not(.secondary) { background:var(--btn-bg, var(--alta-purple)); color:#fff; }
.btn:not(.secondary):hover { background:var(--btn-bg-hover, var(--alta-purple-2)); }
.btn.secondary { background:var(--alta-surface,#fff); border:1px solid var(--alta-line); color:var(--alta-ink); }
.user-card { margin:14px 12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); border-radius:14px; }
.theme-block { padding:12px; }
.theme-switcher { background:rgba(255,255,255,.05); border-radius:14px; }
.theme-btn.active { background:var(--btn-bg, var(--alta-purple)); color:#fff; }
@media (max-width: 1180px) { .content { padding-left:24px; padding-right:24px; } .sidebar { width:230px; flex-basis:230px; } }

/* ================================================================
   Floating doctor AI assistant (bottom-left)
   ================================================================ */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; left: auto; z-index: 80;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--btn-bg, var(--sidebar-bg));
  color: #fff; font-size: 24px; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(20,15,10,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ai-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(20,15,10,.34); }
.ai-fab .dot { position:absolute; top:6px; right:6px; width:9px; height:9px; border-radius:50%; background:#3dd68c; box-shadow:0 0 0 2px rgba(255,255,255,.85); }

.ai-panel {
  position: fixed; right: 22px; bottom: 88px; left: auto; z-index: 80;
  width: 340px; max-width: calc(100vw - 44px); max-height: min(520px, calc(100vh - 130px));
  background: var(--alta-surface, #fff); border: 1px solid var(--alta-line, #ecdfe2);
  border-radius: 18px; box-shadow: 0 20px 50px rgba(20,15,10,.24);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.ai-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.ai-panel-head {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  background: var(--sidebar-bg); color: var(--sidebar-text); flex-shrink:0;
}
.ai-panel-head .avatar {
  width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.14);
  display:grid; place-items:center; font-size:16px; flex-shrink:0;
}
.ai-panel-head .ttl { font-weight:650; font-size:13.5px; line-height:1.2; }
.ai-panel-head .sub { font-size:11px; opacity:.75; }
.ai-panel-close {
  margin-left:auto; background:none; border:none; color:inherit; opacity:.75;
  font-size:18px; cursor:pointer; line-height:1; padding:4px;
}
.ai-panel-close:hover { opacity:1; }
.ai-panel-log {
  flex:1; min-height:120px; overflow-y:auto; padding:14px; display:flex;
  flex-direction:column; gap:9px; background: var(--bg);
}
.ai-panel-msg { max-width:88%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.42; white-space:pre-wrap; word-break:break-word; }
.ai-panel-msg.user { align-self:flex-end; background:var(--btn-bg, var(--sidebar-bg)); color:#fff; border-bottom-right-radius:5px; }
.ai-panel-msg.bot { align-self:flex-start; background:var(--alta-surface,#fff); border:1px solid var(--alta-line,#ecdfe2); border-bottom-left-radius:5px; }
.ai-panel-form { display:flex; gap:8px; padding:12px; border-top:1px solid var(--alta-line,#ecdfe2); background:var(--alta-surface,#fff); flex-shrink:0; }
.ai-panel-form input {
  flex:1; border:1px solid var(--alta-line,#ecdfe2); border-radius:999px; padding:9px 14px;
  font:inherit; font-size:13px; outline:none; background:var(--bg);
}
.ai-panel-form input:focus { border-color: var(--alta-purple, #b8758b); }
.ai-panel-form button {
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; color:#fff;
  background: var(--btn-bg, var(--alta-purple)); font-size:16px; flex-shrink:0;
}
.ai-panel-form button:disabled { opacity:.55; cursor:wait; }
@media (max-width: 480px) {
  .ai-fab { right:14px; left:auto; bottom:14px; width:50px; height:50px; }
  .ai-panel { right:10px; left:auto; bottom:76px; width:calc(100vw - 20px); }
}


/* ========== STAFF / CLINIC TEAM ========== */
.staff-page { max-width: 1240px; margin: 0 auto; }
.staff-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:4px 0 20px; }
.staff-back { display:inline-block; margin-bottom:8px; font-size:13px; font-weight:600; }
.staff-hero h1 { margin:0 0 6px; font-size:30px; letter-spacing:-.035em; }
.staff-lead { margin:0; max-width:760px; color:var(--muted); font-size:13.5px; }
.staff-security-note { display:flex; align-items:center; gap:10px; min-width:280px; padding:12px 14px; border:1px solid var(--border); background:#fff; border-radius:14px; box-shadow:0 4px 18px rgba(30,40,70,.05); }
.staff-security-note small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.staff-security-icon { font-size:20px; }
.staff-alert { margin:0 0 16px; padding:12px 14px; border-radius:12px; border:1px solid var(--border-strong); font-size:13px; font-weight:600; }
.staff-alert-error { background:#fff2f3; color:#a92f3a; border-color:#f0c6ca; }
.staff-alert-ok { background:#eef9f2; color:#257548; border-color:#c9ead5; }
.staff-role-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.staff-role-card { display:flex; align-items:center; gap:10px; min-width:0; padding:13px 14px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 4px 16px rgba(30,40,70,.04); }
.staff-role-card b { display:block; font-size:13px; }
.staff-role-card small { display:block; margin-top:2px; color:var(--muted); font-size:11px; line-height:1.35; }
.staff-role-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; background:#f3f5f9; }
.staff-role-icon.viewer { background:#f1f3f6; }
.staff-role-icon.tech { background:#edf8f1; }
.staff-role-icon.doctor { background:#eef3ff; }
.staff-role-icon.owner { background:#fff6e8; }
.staff-form-card, .staff-list-card { background:#fff !important; }
.staff-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.staff-section-head h2 { margin:0; font-size:18px; }
.staff-section-head p { margin:4px 0 0; color:var(--muted); font-size:12.5px; }
.staff-form-section { padding:16px 0; border-top:1px solid var(--border); }
.staff-form-section:first-of-type { padding-top:0; border-top:0; }
.staff-form-section-title { margin-bottom:12px; color:var(--text); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.staff-inline-help { margin-top:10px; color:var(--muted); font-size:11.5px; }
.staff-actions { margin-top:0; padding-top:14px; border-top:1px solid var(--border); }
.staff-list-card { margin-top:16px; }
.staff-list-head { margin-bottom:8px; }
.staff-table-wrap { overflow-x:auto; }
.staff-table { min-width:1040px; }
.staff-table th { background:#f8f9fc; color:#6b7588; }
.staff-table td { padding:13px 12px; }
.staff-person { display:flex; align-items:center; gap:9px; min-width:180px; }
.staff-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#eef3ff; color:#4e61bf; font-weight:700; font-size:13px; flex:0 0 34px; }
.staff-person strong { display:block; font-size:13px; }
.staff-person small, .staff-contact small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.staff-contact span { display:block; font-size:12.5px; font-weight:550; }
.staff-pill { display:inline-flex; align-items:center; gap:4px; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.role-domain { background:#f3f5f9; color:#566174; }
.role-viewer { background:#f2f4f7; color:#667085; }
.role-tech { background:#edf8f1; color:#257548; }
.role-doctor { background:#eef3ff; color:#4258bd; }
.role-owner { background:#fff4df; color:#956516; }
.staff-credentials { min-width:420px; }
.staff-credentials-form { display:grid !important; grid-template-columns:1fr 1fr 150px auto; gap:7px !important; align-items:center; margin:0 !important; }
.staff-credentials-form input, .staff-credentials-form select { min-width:0; padding:9px 10px; border-radius:10px; font-size:12px; }
.staff-credentials-form .btn { min-width:auto; margin:0; padding:9px 12px; font-size:12px; }
.staff-protected { color:#956516; font-size:11.5px; font-weight:650; white-space:nowrap; }
.staff-delete-cell { width:90px; text-align:right; }
.staff-delete-cell form { margin:0 !important; }
.staff-delete-btn { min-width:auto !important; margin:0 !important; padding:8px 11px !important; background:#fff !important; color:#b23a45 !important; border:1px solid #e8c1c5 !important; box-shadow:none !important; }
.staff-delete-btn:hover { background:#fff2f3 !important; color:#9e2d38 !important; }
.staff-no-action { color:var(--muted); font-size:11px; }
.staff-empty { padding:28px 12px; text-align:center; color:var(--muted); }
@media (max-width: 1000px) {
  .staff-role-grid { grid-template-columns:repeat(2,1fr); }
  .staff-hero { align-items:stretch; flex-direction:column; }
  .staff-security-note { min-width:0; }
}
@media (max-width: 650px) {
  .staff-role-grid { grid-template-columns:1fr; }
  .staff-hero h1 { font-size:25px; }
  .staff-credentials { min-width:360px; }
  .staff-credentials-form { grid-template-columns:1fr 1fr; }
  .staff-credentials-form select { grid-column:1 / 2; }
  .staff-credentials-form .btn { grid-column:2 / 3; }
}

/* Fixed Web-role display: permissions are derived from the domain role. */
.staff-auto-role,
.staff-fixed-role {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
  color: #1f2937;
  font-weight: 600;
}

.staff-pill.role-admin{border-color:#c7d2fe;background:#eef2ff;color:#3730a3}



/* =========================================================
   ORTHO CRM — Unified Clinical UI / 2026 visual refresh
   Reference: warm ivory canvas, white cards, sage actions,
   restrained rose accents, clear hierarchy.
   ========================================================= */
:root,
[data-theme="comfort"],
[data-theme="light"] {
  --bg: #f5eee5;
  --bg-elevated: #fffdf9;
  --card: #ffffff;
  --text: #172334;
  --muted: #687487;
  --accent: #6f8d6b;
  --accent-2: #b8798d;
  --accent-soft: rgba(111,141,107,.13);
  --border: #e7ddd3;
  --border-strong: #d9cdc1;
  --ok: #5d8b6c;
  --warn: #b18749;
  --error: #b9535d;
  --shadow: 0 12px 35px rgba(72,55,39,.08);
  --radius: 18px;
  --radius-sm: 14px;
  --sidebar-bg: #fffdf9;
  --sidebar-text: #172334;
  --sidebar-muted: #718094;
  --sidebar-hover: #f5f0ea;
  --sidebar-active: #6f8d6b;
  --sidebar-border: #ebe2d9;
  --on-accent: #fff;
}

html, body { background: var(--bg); color: var(--text); }
body { line-height: 1.55; }

.sidebar {
  width: 248px;
  flex-basis: 248px;
  background: rgba(255,253,249,.97);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 8px 0 28px rgba(68,52,38,.035);
}
.sidebar-brand {
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--sidebar-border);
}
.brand-name { color: var(--text); }
.brand-ai { color: var(--accent); }
.brand-sub { color: var(--muted); }
.sidebar-nav { padding: 16px 12px; gap: 4px; }
.sidebar-link {
  color: #647286;
  border-radius: 13px;
  min-height: 44px;
  padding: 11px 13px;
}
.sidebar-link:hover { background: #f5f0ea; color: var(--text); }
.sidebar-link.active {
  background: #eaf1e8;
  color: #466345;
  box-shadow: none;
}
.sidebar-link.active .ic { color: #5f805b; }
.sidebar-footer { border-top: 1px solid var(--sidebar-border); }
.theme-btn {
  background: #fff;
  border-color: var(--border);
  color: var(--muted);
}
.theme-btn.active {
  background: #eaf1e8;
  border-color: #c9dbc6;
  color: #466345;
  box-shadow: none;
}
.user-avatar { background: #eaf1e8; color: #4d6c4a; }
.user-name { color: var(--text); }
.user-role { color: var(--muted); }
.logout-btn {
  background: #fff;
  border-color: var(--border);
  color: var(--muted);
}
.logout-btn:hover { background: #f8f3ee; color: var(--text); }

.topbar {
  height: 72px;
  padding: 0 28px;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.search-box {
  max-width: 520px;
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(65,50,37,.04);
  padding: 10px 17px;
}
.search-box:focus-within {
  border-color: #b8ccb5;
  box-shadow: 0 0 0 4px rgba(111,141,107,.11);
}
.help-btn {
  background: #fbecf1;
  color: #a76279;
  border: 0;
}
.icon-btn { background: #fff; border-color: var(--border); }

.content {
  max-width: 1320px;
  padding: 30px 34px 70px;
}
.content > h1,
.page-hero h1 { color: #172334; }
.content > h1 { font-size: 30px; letter-spacing: -.035em; }
.content > p.muted { color: #6b788b; }

.card,
.theme-settings,
.settings-section,
.settings-section-body,
.kb-upload-card,
.staff-form-card,
.staff-list-card {
  background: #fffdf9 !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 28px rgba(72,55,39,.055) !important;
}

.card { padding: 24px 26px; }
.card > h2 { font-size: 19px; color: #1b2939; }
.card p.muted, .form-card-lead { color: #718094; }

.btn, .btn-primary, button[type="submit"] {
  background: #6f8d6b;
  color: #fff;
  border: 0;
  border-radius: 12px;
  min-height: 42px;
  padding: 11px 18px;
  box-shadow: 0 6px 16px rgba(111,141,107,.20);
}
.btn:hover, .btn-primary:hover, button[type="submit"]:hover {
  background: #617e5e;
  color: #fff;
  filter: none;
  transform: translateY(-1px);
}
.btn.secondary, .btn-secondary {
  background: #fff;
  color: #506074;
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn.secondary:hover, .btn-secondary:hover {
  background: #f7f2ec;
  color: #344354;
}

input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="number"], input[type="password"],
input[type="url"], input[type="datetime-local"], input[type="date"],
input[type="time"], input:not([type]), select, textarea {
  background: #fff;
  border: 1px solid #ded5cc;
  border-radius: 13px;
  color: #243246;
  min-height: 46px;
  box-shadow: none;
}
textarea { min-height: 110px; }
input::placeholder, textarea::placeholder { color: #a0a9b5; }
input:focus, select:focus, textarea:focus {
  border-color: #9bb496;
  box-shadow: 0 0 0 4px rgba(111,141,107,.11);
  background: #fff;
}

label { color: #39485a; font-weight: 600; }
.field-hint, .muted, small { color: #718094; }

table { background: #fff; }
.card table th, table th {
  color: #7a8797;
  border-bottom-color: #e8e0d8;
}
.card table td, table td { border-bottom-color: #eee6de; }
.card table tbody tr:hover td, table tbody tr:hover td {
  background: #faf6f1;
}

.notice, .staff-alert {
  border-radius: 14px !important;
}

/* ----- Settings ----- */
.theme-settings {
  padding: 26px !important;
  margin-bottom: 18px;
}
.theme-settings h2 {
  color: #172334;
  font-size: 24px;
}
.theme-settings-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.theme-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--border) !important;
  border-radius: 15px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
}
.theme-card:hover {
  border-color: #c8d8c4 !important;
  background: #fbfdf9;
}
.theme-card[data-theme-card="light"],
.theme-card[data-theme-card="comfort"] { box-shadow: none; }
.theme-card strong { color: #273649; }
.theme-card small { display: block; margin-top: 3px; color: #7b8796; }
.theme-preview { flex: 0 0 58px; width:58px; height:42px; border-radius:10px; border:1px solid #e5ddd4; overflow:hidden; background:#f7f2eb; }
.theme-preview-light { background:#fff; }
.theme-preview-comfort { background:#f5eee5; }

.settings-section {
  overflow: hidden;
  margin: 14px 0;
}
.settings-section > summary {
  padding: 19px 22px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #243246;
  list-style: none;
}
.settings-section > summary::-webkit-details-marker { display:none; }
.settings-section > summary::before {
  content: "›";
  display:inline-block;
  margin-right:10px;
  color:#8b9aab;
  transform: rotate(0deg);
  transition:.15s;
}
.settings-section[open] > summary::before { transform: rotate(90deg); }
.settings-section .sec-sub {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #8994a2;
}
.settings-section-body {
  border: 0 !important;
  border-top: 1px solid #eee6de !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px;
}
.settings-section-body textarea { min-height: 130px; }

/* ----- Knowledge base ----- */
.kb-upload-card {
  padding: 26px !important;
  margin-top: 18px;
}
.kb-upload-form { margin-top: 16px; }
.kb-file-label {
  min-height: 150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  border: 1.5px dashed #d6c8bc;
  border-radius: 18px;
  background: #fcfaf7;
  transition:.15s;
}
.kb-file-label:hover {
  border-color:#a9bea5;
  background:#f8fbf7;
}
.kb-file-btn {
  background:#b8798d;
  color:#fff;
  border-radius:11px;
  padding:10px 18px;
  font-weight:700;
}
.kb-file-name { font-size:13px; }
.kb-reindex {
  border-top-color:#eee6de;
}
.kb-table {
  min-width: 900px;
}
.kb-actions { gap:7px; }

/* ----- Content / media ----- */
.content > .grid {
  gap: 18px;
}
.content > .grid > .card,
.content > .grid > section.card {
  min-width: 0;
}
.content h1 + .muted a,
.content > p.muted a {
  color:#b06f84;
}
.content h1 + .muted a:hover,
.content > p.muted a:hover { color:#8f5268; }
.content .card .form-card-lead { max-width: 920px; }
.content .card .form-grid { gap: 16px; }
.content .card h2 {
  margin-bottom: 8px;
}
.drafts-table td, .drafts-table th { vertical-align: top; }

/* ----- Staff: same visual language ----- */
.staff-page { max-width: 1260px; }
.staff-hero h1 { color:#172334; }
.staff-back { color:#b06f84; }
.staff-security-note {
  background:#fffdf9;
  border-color:var(--border);
  border-radius:16px;
  box-shadow:0 7px 20px rgba(72,55,39,.05);
}
.staff-role-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
.staff-role-card {
  background:#fffdf9;
  border-color:var(--border);
  border-radius:16px;
  box-shadow:0 6px 20px rgba(72,55,39,.045);
}
.staff-role-icon { border-radius:11px; }
.staff-form-section { border-top-color:#eee6de; }
.staff-table th { background:#faf7f3; }
.staff-pill.role-doctor { background:#eaf1e8; color:#4e6d4b; }
.staff-pill.role-tech { background:#edf4f7; color:#4d6c7c; }
.staff-pill.role-admin { background:#fbf0e9; color:#956348; }
.staff-pill.role-viewer { background:#f2f2f1; color:#69737f; }
.staff-pill.role-owner { background:#f8edf1; color:#9b5f73; }
.staff-delete-btn {
  background:#fff3f3 !important;
  color:#a84955 !important;
  border:1px solid #edc9cd !important;
  box-shadow:none !important;
}
.staff-delete-btn:hover {
  background:#fbe5e7 !important;
  color:#963d49 !important;
}

/* ----- Login: match the requested reference screen ----- */
.login-body {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.55), transparent 32%),
    #f4ecdf;
  color:#1b1b1b;
}
.login-card {
  width:min(850px, 100%);
  padding:46px 48px 42px;
  background:rgba(255,253,249,.96);
  border:1px solid #e8ddd2;
  border-radius:24px;
  box-shadow:0 22px 50px rgba(69,54,40,.14);
}
.login-card h1 {
  margin:0 0 30px;
  font-size:42px;
  line-height:1.1;
  letter-spacing:-.04em;
  text-align:center;
  color:#171717;
}
.login-card > p:not(.error) {
  color:#4d4d4d;
  font-size:18px;
}
.login-card > .muted.small:first-child {
  text-align:center;
  color:#a06c7e !important;
  letter-spacing:.14em !important;
}
.login-card input {
  min-height:72px;
  padding:18px 20px;
  margin-top:14px;
  border-radius:15px;
  font-size:19px;
  background:#fff;
}
.login-card input::placeholder { color:#5c5c5c; opacity:.82; }
.login-card button[type="submit"] {
  width:100%;
  min-height:72px;
  margin-top:18px;
  border-radius:15px;
  font-size:20px;
  font-weight:600;
  background:#6f8d6b;
}
.login-card button[type="submit"]:hover { background:#607d5c; }
.login-card details {
  margin-top:24px !important;
}
.login-card summary {
  cursor:pointer;
  color:#343434;
  font-size:16px;
}
.login-card details p { margin:10px 0; }

@media (max-width: 1050px) {
  .staff-role-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .topbar { height:64px; padding:0 14px; }
  .content { padding:22px 16px 50px; }
  .theme-settings-options { grid-template-columns:1fr; }
  .staff-role-grid { grid-template-columns:1fr; }
  .login-body { padding:14px; align-items:flex-start; padding-top:8vh; }
  .login-card { padding:30px 22px 26px; border-radius:20px; }
  .login-card h1 { font-size:30px; margin-bottom:24px; }
  .login-card input, .login-card button[type="submit"] { min-height:58px; font-size:16px; }
}


/* =========================================================
   Viewer / trainee workspace — clean clinic UI
   ========================================================= */
.role-dashboard{max-width:1180px;margin:0 auto;padding:8px 4px 48px}
.role-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 0 28px}
.role-hero h1{margin:.35rem 0 .55rem;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.035em}
.eyebrow{font-size:.72rem;letter-spacing:.12em;font-weight:800;color:#b56f8d}
.hero-copy{max-width:760px;margin:0;color:#657792;font-size:1.02rem;line-height:1.65}
.role-chip{white-space:nowrap;border:1px solid #dfd8ce;background:#fffdf9;border-radius:14px;padding:11px 15px;font-weight:700;color:#62708a;box-shadow:0 4px 14px rgba(54,42,31,.04)}
.viewer-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.viewer-card{position:relative;display:flex;gap:16px;align-items:flex-start;padding:23px 48px 23px 22px;border:1px solid #e4ddd3;border-radius:20px;background:#fffdfa;text-decoration:none;color:inherit;box-shadow:0 8px 26px rgba(50,42,32,.05);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.viewer-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(50,42,32,.09);border-color:#cfd8c9}
.viewer-card-primary{background:linear-gradient(145deg,#fdfefb,#f5f8f2);border-color:#d8e1d3}
.viewer-card-icon{width:48px;height:48px;flex:0 0 48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#edf3e9;font-size:1.35rem}
.viewer-card-body h2{margin:.18rem 0 .4rem;font-size:1.18rem}
.viewer-card-body p{margin:0;color:#6d7d96;line-height:1.5;font-size:.9rem}
.viewer-card-kicker{font-size:.65rem;letter-spacing:.1em;font-weight:800;color:#819374}
.viewer-card-arrow{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:#78916f}
.viewer-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:38px 0 14px}
.viewer-section-head h2{margin:.3rem 0 0;font-size:1.45rem;letter-spacing:-.02em}
.status-pill{display:inline-flex;align-items:center;gap:5px;border:1px solid #e4ddd3;background:#f8f5ef;border-radius:999px;padding:5px 9px;font-size:.72rem;color:#6c7480;white-space:nowrap}
.status-pill-safe{background:#eef5eb;border-color:#d3e1ce;color:#547052}
.status-pill-muted{background:#f3f1ee;color:#888}
.permission-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.permission-card{display:flex;gap:10px;min-height:118px;padding:17px;border:1px solid #e4ddd3;border-radius:16px;background:#fffdfa}
.permission-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:0 0 26px;border-radius:50%;font-weight:800}
.permission-card.allowed .permission-icon{background:#e8f1e4;color:#5b7a58}
.permission-card.denied .permission-icon{background:#f8e9e9;color:#b26c6c}
.permission-card strong{font-size:.9rem}
.permission-card p{margin:.38rem 0 0;color:#738199;font-size:.78rem;line-height:1.5}
.viewer-note{display:flex;gap:13px;align-items:flex-start;margin-top:18px;padding:17px 19px;border:1px solid #eadfd5;border-radius:16px;background:#fcf7f2}
.viewer-note-icon{font-size:1.15rem}
.viewer-note strong{font-size:.88rem}
.viewer-note p{margin:.25rem 0 0;color:#748197;font-size:.78rem;line-height:1.5}

.viewer-list-page{max-width:1180px;margin:0 auto;padding:8px 4px 48px}
.viewer-list-page .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.viewer-list-page .page-head h1{margin:.3rem 0 .45rem;font-size:2.25rem;letter-spacing:-.03em}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.viewer-search{display:flex;align-items:center;gap:9px;min-width:320px;max-width:580px;flex:1;border:1px solid #e1dcd5;border-radius:14px;background:#fffdfa;padding:4px 10px;box-shadow:0 4px 14px rgba(50,42,32,.03)}
.viewer-search span{font-size:1.1rem;color:#8b96a8}
.viewer-search input{width:100%;border:0;outline:0;background:transparent;padding:10px 4px;font:inherit;color:var(--text)}
.viewer-search a{font-size:.76rem;color:#8d6f7b;text-decoration:none;white-space:nowrap}
.count-pill{border:1px solid #e1dcd5;border-radius:999px;padding:8px 12px;background:#fffdfa;color:#748096;font-size:.78rem}
.table-card{border:1px solid #e3ddd5;border-radius:20px;background:#fffdfa;box-shadow:0 8px 26px rgba(50,42,32,.05);overflow:hidden}
.viewer-table{width:100%}
.viewer-tr{display:grid;grid-template-columns:1.55fr 1fr 1.1fr 1.2fr .85fr;gap:18px;align-items:center;padding:15px 20px;border-top:1px solid #eee8e1;font-size:.86rem;color:#63738b}
.viewer-tr:first-child{border-top:0}
.viewer-th{background:#faf7f2;border-top:0!important;color:#8b7f72;text-transform:uppercase;letter-spacing:.08em;font-size:.64rem;font-weight:800}
.viewer-tr>div{min-width:0}
.viewer-tr strong{display:block;color:#1e2c43;font-size:.87rem}
.viewer-tr small{display:block;margin-top:3px;color:#98a1ae;font-size:.7rem}
.empty-state{text-align:center;padding:70px 20px;color:#748096}
.empty-state>div{font-size:2rem}
.empty-state h3{margin:.6rem 0 .25rem;color:#26364f}
.empty-state p{margin:0;font-size:.82rem}
.viewer-appt-table .viewer-tr{grid-template-columns:1fr 1.35fr 1.55fr 1fr .9fr}

@media (max-width:900px){
  .permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .role-hero,.viewer-section-head,.viewer-list-page .page-head{display:block}
  .role-chip{display:inline-block;margin-top:14px}
  .viewer-cards{grid-template-columns:1fr}
  .permission-grid{grid-template-columns:1fr}
  .viewer-toolbar{align-items:stretch;flex-direction:column}
  .viewer-search{min-width:0;max-width:none}
  .viewer-tr,.viewer-appt-table .viewer-tr{grid-template-columns:1fr 1fr;gap:9px}
  .viewer-th{display:none}
  .viewer-tr>span:last-child{justify-self:start}
}