:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Theme tokens — Osteopatska klinika UX */
  --color-ink: #16232a;
  --color-primary: #1f5a6e;
  --color-primary-light: #2f8ba8;
  --color-primary-soft: #eaf3f6;
  --color-primary-dark: #164555;
  --color-accent: #2f8ba8;
  --color-success: #2f7d5f;
  --color-success-soft: #f2f6f4;
  --color-warn: #b06f14;
  --color-warn-soft: #fdf6ea;
  --color-danger: #b0413e;
  --color-bg: #eef1f3;
  --color-rail: #f7f9fa;
  --color-surface: #ffffff;
  --color-border: #dde3e7;
  --color-muted: #64757d;
  --color-muted-2: #8b98a0;
  --color-text: #16232a;
  --color-text-secondary: #334049;
  --radius: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.625rem;
  --shadow-sm: 0 1px 2px rgb(22 35 42 / 0.06);
  --shadow-md: 0 2px 8px rgb(22 35 42 / 0.07);
  --shadow-theme: var(--shadow-md);
  --nav-width: 10rem;
  --header-height: 3.25rem;
  --control-height: 2.25rem;
  --font-sans: 'Poppins', system-ui, sans-serif;
  /* Same family — tabular nums for times/stats, no terminal mono look */
  --font-mono: 'Poppins', system-ui, sans-serif;
  /*
   * Type scale — major third (1.25) from body.
   * App UI: fixed rem (not fluid). Five roles; legacy aliases map onto them.
   */
  --text-caption: 0.75rem;    /* 12px — badges, chips, overlines */
  --text-secondary: 0.875rem; /* 14px — meta, chrome controls */
  --text-body: 1rem;          /* 16px — primary reading */
  --text-subhead: 1.25rem;    /* 20px — section / toolbar titles */
  --text-heading: 1.5rem;     /* 24px — page titles */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-label: 0.06em;

  /* Legacy aliases → scale (was a muddy 10.5–15px ladder) */
  --text-2xs: var(--text-caption);
  --text-xs: var(--text-caption);
  --text-sm: var(--text-secondary);
  --text-md: var(--text-secondary);
  --text-md2: var(--text-secondary);
  --text-base: var(--text-body);
  --text-lg: var(--text-subhead);
  --text-xl: var(--text-subhead);
}

/* ponytail: Tailwind CDN replacements */
.hidden { display: none !important; }
.text-xs { font-size: var(--text-caption); line-height: var(--leading-snug); }
.text-sm { font-size: var(--text-secondary); line-height: var(--leading-snug); }
.text-center { text-align: center; }
.text-slate-500 { color: #667085; }
.text-red-600 { color: #d92d20; }
.text-red-700 { color: #b42318; }
.text-red-800 { color: #912018; }
.font-semibold { font-weight: var(--weight-semibold); }
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.w-full { width: 100%; }
.flex { display: flex; }
.gap-1 { gap: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-3 { margin-top: 0.75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.col-span-2 { grid-column: span 2 / span 2; }
@media (min-width: 640px) {
  .sm\:col-span-1 { grid-column: span 1 / span 1; }
  .sm\:inline { display: inline; }
}
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  font-kerning: normal;
  font-optical-sizing: auto;
  touch-action: manipulation;
  color: var(--color-text);
  background: var(--color-bg);
}

.app-body {
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-kerning: normal;
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--color-bg);
}

.login-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 2rem 1.75rem;
  width: 100%;
  max-width: 28rem;
}

.login-title {
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: 0 0 0.35rem;
  letter-spacing: var(--tracking-tight);
}

.login-eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

.login-subtitle {
  margin: 0;
  font-size: var(--text-secondary);
  color: var(--color-muted);
  line-height: var(--leading-normal);
  max-width: 36ch;
}

.login-error {
  background: #fef3f2;
  color: #b42318;
  border: 1px solid #fecdca;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

.login-submit {
  width: 100%;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.login-submit:hover {
  box-shadow: 0 4px 12px rgb(31 90 110 / 0.35);
}

.patient-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.patient-search-results {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 14rem;
  overflow-y: auto;
}

.patient-search-results.hidden {
  display: none;
}

.patient-search-item {
  padding: 0.625rem 0.875rem;
  cursor: pointer;
}

.patient-search-item:hover,
.patient-search-item--active {
  background: var(--color-primary-soft);
}


.safe-top { padding-top: var(--safe-top); }
.safe-bottom { padding-bottom: var(--safe-bottom); }

.touch-target { min-height: 44px; min-width: 44px; }

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

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  opacity: 0;
}
.fonts-loaded .material-symbols-outlined {
  opacity: 1;
}

/* —— Visit page shell —— */
.visit-page {
  min-height: 100vh;
  background: var(--color-bg);
}

.visit-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.visit-toolbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  height: 3.25rem;
  min-height: 3.25rem;
  padding: 0 0.85rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.visit-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}

.visit-toolbar-divider {
  width: 1px;
  height: 1.25rem;
  background: rgb(255 255 255 / 0.16);
  flex-shrink: 0;
}

.visit-back {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  height: 1.85rem;
  width: auto;
  min-width: 1.85rem;
  padding: 0 0.35rem;
  border-radius: 6px;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  text-decoration: none;
  transition: background 0.15s var(--motion-ease, ease), color 0.15s var(--motion-ease, ease);
}
.visit-back:hover {
  background: rgb(26 36 43 / 0.06);
  color: var(--color-text);
}
.visit-back:active {
  transform: scale(0.96);
}
.visit-back .material-symbols-outlined {
  font-size: 1.1rem;
}

.visit-toolbar-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.visit-toolbar-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.visit-toolbar-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.visit-toolbar-meta-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin-left: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--color-muted);
  white-space: nowrap;
}

.visit-toolbar-sub {
  display: none;
}

.visit-toolbar-sub .text-warn { color: #dc6803; }

.visit-case {
  font-size: inherit;
  letter-spacing: 0.02em;
  color: inherit;
}

.visit-toolbar-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
}

.visit-patient {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visit-toolbar .visit-history-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 1.85rem;
  min-height: 1.85rem;
  min-width: 1.85rem;
  padding: 0 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid transparent;
  transition: background 0.15s var(--motion-ease, ease), color 0.15s var(--motion-ease, ease), border-color 0.15s var(--motion-ease, ease);
}

.visit-toolbar .visit-history-link:hover {
  background: rgb(26 36 43 / 0.05);
  color: var(--color-text);
  border-color: var(--color-border);
}

.visit-toolbar .visit-history-link .material-symbols-outlined {
  font-size: 1rem;
}

.btn-outline {
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  background: #fff;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  white-space: nowrap;
}

.btn-outline:hover {
  background: #f9fafb;
  color: var(--color-text);
}

.visit-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.visit-toolbar-btns {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.visit-toolbar-actions .btn-primary,
.visit-toolbar-actions .btn-secondary {
  min-height: 1.85rem;
  height: 1.85rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 6px;
}

.visit-btn-label-short { display: none; }

.visit-badge {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 5px;
  background: #f2f4f7;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  line-height: 1.2;
}
.visit-badge--draft {
  background: #fffaeb;
  color: #b54708;
  border-color: #fedf89;
}
.visit-badge--completed {
  background: #ecfdf3;
  color: #027a48;
  border-color: #abefc6;
}
.visit-badge--follow {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: #c2d6ff;
}

.autosave-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted);
  border: none;
  white-space: nowrap;
}
.autosave-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex-shrink: 0;
}
.autosave-pill--idle { color: var(--color-muted); }
.autosave-pill--saving { color: var(--color-primary); animation: pulse 1s infinite; }
.autosave-pill--saving::before { opacity: 1; background: var(--color-primary); }
.autosave-pill--saved { color: #027a48; }
.autosave-pill--saved::before { opacity: 1; background: #12b76a; }
.autosave-pill--error { color: #b42318; }
.autosave-pill--error::before { opacity: 1; background: #f04438; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  background: #fff;
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.btn-icon:hover { background: #f9fafb; color: var(--color-text); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: 0 4px 12px rgb(31 90 110 / 0.25);
}
.btn-primary--block { width: 100%; }

.btn-primary--solid {
  background: var(--color-primary);
  color: #fff;
}

.profile-top-row {
  align-items: start;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.profile-field > .label-text {
  margin: 0;
}

.profile-input-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-height: 44px;
}

.profile-patient-select-wrap {
  flex: 1;
  min-width: 0;
}

.profile-new-patient-btn {
  flex-shrink: 0;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.profile-patient-meta {
  margin: 0;
}

.profile-patient-meta.hidden {
  display: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  font-family: inherit;
  background: #fff;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-secondary:hover {
  background: #f9fafb;
  color: var(--color-text);
}

.visit-body {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 0.75rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .visit-body {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0 0.85rem 2rem 0;
    max-width: none;
  }
}

.visit-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .visit-main {
    padding: 0.65rem 0 0 0.85rem;
  }
}

.visit-toolbar-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + var(--safe-bottom));
  background: rgb(255 255 255 / 0.97);
  border-top: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  box-shadow: 0 -4px 24px rgb(15 23 42 / 0.08);
}

.visit-mobile-bar {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.625rem;
  max-width: 1600px;
  margin: 0 auto;
}

.visit-mobile-btn {
  min-height: 48px;
  border-radius: 0.625rem;
  font-weight: 600;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.visit-mobile-btn:active {
  transform: scale(0.97);
}

.visit-mobile-btn--secondary {
  background: #fff;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.visit-mobile-btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
}

/* —— Sidebar nav —— */
.visit-nav {
  flex-shrink: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .visit-nav {
    width: var(--nav-width);
    position: sticky;
    top: var(--header-height);
    align-self: start;
  }
}

.visit-nav-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 0.65rem 0.5rem 0.75rem;
  box-shadow: var(--shadow-theme);
}

@media (min-width: 768px) {
  .visit-nav-card {
    border-radius: 0 !important;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none !important;
    min-height: calc(100vh - var(--header-height));
    padding: 0.75rem 0.45rem 1rem;
    margin-left: 0;
  }
}

.visit-nav-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin: 0 0.35rem 0.45rem;
}

.visit-nav-progress-wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0.35rem 0.65rem;
}

.visit-nav-progress-track {
  flex: 1;
  height: 4px;
  background: #e4e7ec;
  border-radius: 999px;
  overflow: hidden;
}

.visit-nav-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #22c55e);
  border-radius: 999px;
  /* Continuous fill: linear feels steady; keep ≤300ms */
  transition: width 220ms linear;
}

.visit-nav-progress-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-muted-2);
  font-variant-numeric: tabular-nums;
  min-width: 1.6rem;
  text-align: right;
}

.visit-nav-groups {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.visit-nav-groups::-webkit-scrollbar {
  height: 0;
}

@media (min-width: 768px) {
  .visit-nav-groups {
    flex-direction: column;
    overflow-x: visible;
    overflow-y: auto;
    max-height: calc(100vh - 14rem);
    gap: 0;
    padding-bottom: 0;
  }
}

.visit-nav-group { margin-bottom: 0.25rem; }

.visit-nav-group-label {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted-2);
  margin: 0.4rem 0.4rem 0.2rem;
}

.visit-nav-group:first-child .visit-nav-group-label { margin-top: 0; }

.nav-anchor {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .nav-anchor { white-space: normal; }
}

.nav-anchor:hover {
  background: #f2f4f7;
}

.nav-anchor.active {
  background: var(--color-primary-soft);
  border-color: transparent;
  border-left: 3px solid var(--color-primary);
  font-weight: 600;
  color: var(--color-ink);
  border-radius: 0 0.4rem 0.4rem 0;
  padding-left: calc(0.5rem - 2px);
}

.nav-anchor.suggested {
  border-color: #60a5fa;
  box-shadow: inset 3px 0 0 #3b82f6;
}

.nav-progress {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d0d5dd;
  flex-shrink: 0;
}
.nav-progress[data-progress="50"] { background: #fbbf24; }
.nav-progress[data-progress="100"] { background: #22c55e; }

.nav-icon { display: none; }

.nav-label { flex: 1; min-width: 0; }

/* —— Sections —— */
.visit-section {
  scroll-margin-top: 7rem;
  position: relative;
  overflow: visible;
}

.section-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
}

.section-header-body {
  flex: 1;
  min-width: 0;
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.section-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  flex-shrink: 0;
}

.section-icon {
  font-size: 1.25rem !important;
  color: var(--color-primary);
}

.section-title {
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.section-hint {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0.25rem 0 0;
  line-height: 1.4;
}

.section-hint--safety {
  color: #b91c1c;
  font-weight: 500;
}

.section-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow-theme);
  overflow: visible;
}

@media (min-width: 640px) {
  .section-card {
    padding: 1.35rem 1.5rem;
  }
}

.section-card--safety {
  border-color: #fecaca;
  background: #fff;
}

.form-grid-2 {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.form-grid-2 > .field-stack {
  min-width: 0;
}
.form-grid-2 > .field-stack--full {
  grid-column: 1 / -1;
}
.form-grid-2 .field-input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.field-hint {
  display: block;
  margin-top: 4px;
  font: 400 11.5px/1.3 var(--font-sans);
  color: #8b98a0;
}

.form-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.25rem 0;
}

.subsection-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.75rem;
}

/* —— SOCRATES panel —— */
.socrates-panel {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .socrates-panel {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
  }
}

.socrates-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-width: 0;
}

@media (min-width: 640px) {
  .socrates-card {
    padding: 1rem 1.125rem;
  }
}

.socrates-card--full {
  grid-column: 1 / -1;
}

.socrates-card--nrs {
  background: var(--color-surface);
  border-color: rgb(31 90 110 / 0.15);
}

.socrates-card--nrs .socrates-nrs {
  border: none;
  background: transparent;
  padding: 0.25rem 0 0;
}

.socrates-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.socrates-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px rgb(31 90 110 / 0.2);
}

.socrates-card-titles {
  min-width: 0;
  flex: 1;
  padding-top: 0.1rem;
}

.socrates-card-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.socrates-card-hint {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.35;
}

.socrates-card-body {
  min-width: 0;
}

.socrates-field-control {
  margin: 0;
}

.socrates-input-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

/* Site: body map + tag select */
.socrates-site-layout {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .socrates-site-layout {
    grid-template-columns: minmax(0, 420px) 1fr;
    align-items: start;
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .socrates-site-layout {
    grid-template-columns: minmax(0, 480px) 1fr;
  }
}

.socrates-site-map {
  margin: 0 auto;
  max-width: 100%;
}

.socrates-site-map .body-map-wrap {
  max-width: none;
  margin: 0;
}

.socrates-site-select {
  min-width: 0;
}

/* Site: izvidi + fizioterapevtski pregled */
.socrates-site-docs {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--color-border);
}

.socrates-site-docs-head {
  margin-bottom: 0.75rem;
}

.socrates-site-docs-head .clinic-attachments-lead {
  margin-top: 0.15rem;
}

.socrates-site-docs-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .socrates-site-docs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
    align-items: start;
  }
}

.clinic-attachments-block--compact {
  margin-top: 0;
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fafbfc;
}

.clinic-attachments-block--compact .clinic-attachments-head {
  margin-bottom: 0.55rem;
}

.clinic-attachments-block--compact .clinic-attachments-title {
  font-size: 0.875rem;
}

.clinic-attachments-block--compact .clinic-attachments-lead {
  font-size: 0.75rem;
}

.clinic-attachments-dropzone--compact {
  padding: 0.85rem 0.65rem;
}

.clinic-attachments-dropzone--compact .clinic-attachments-dropzone-icon {
  font-size: 1.75rem;
  margin-bottom: 0.3rem;
}

.clinic-attachments-dropzone--compact .clinic-attachments-dropzone-title {
  font-size: 0.8125rem;
}

.clinic-attachments-block--compact .clinic-attachments-grid {
  grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr));
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.clinic-attachments-block--compact .clinic-attachments-empty {
  margin-top: 0.55rem;
  padding: 0.65rem;
  font-size: 0.8125rem;
}

.clinic-attachment-kind {
  position: absolute;
  left: 0.35rem;
  top: 0.35rem;
  z-index: 1;
  padding: 0.12rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #fff;
  pointer-events: none;
}

.clinic-attachment-kind--izvid {
  background: #0369a1;
}

.clinic-attachment-kind--pregled {
  background: #0f766e;
}

/* Tom Select — SOCRATES fields */
.socrates-panel .ts-wrapper {
  width: 100%;
}

.socrates-panel .ts-control {
  min-height: 44px !important;
  padding: 0.35rem 0.5rem !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 0.9375rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.socrates-panel .ts-wrapper.focus .ts-control,
.socrates-panel .ts-wrapper.dropdown-active .ts-control {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgb(31 90 110 / 0.12) !important;
}

.socrates-panel .ts-control input {
  font-size: 0.9375rem !important;
  min-height: 1.75rem !important;
}

.socrates-panel .ts-control input::placeholder {
  color: #98a2b3;
}

.socrates-panel .ts-control > .item {
  margin: 0.15rem 0.2rem 0.15rem 0 !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 999px !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgb(31 90 110 / 0.12) !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
}

.socrates-panel .ts-control > .item .remove {
  border-left-color: rgb(31 90 110 / 0.15) !important;
  padding: 0 0.35rem !important;
  margin-left: 0.25rem !important;
}

.socrates-panel .ts-dropdown {
  border-radius: var(--radius) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
  margin-top: 0.25rem !important;
}

.socrates-panel .ts-dropdown .option {
  padding: 0.625rem 0.75rem !important;
  min-height: 40px;
  font-size: 0.875rem;
}

.socrates-panel .ts-dropdown .option.active {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

/* NRS severity — slider zelena → rdeča */
.socrates-nrs {
  --nrs-thumb: #eab308;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.125rem;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.socrates-nrs[data-nrs="1"] { --nrs-thumb: #22c55e; }
.socrates-nrs[data-nrs="2"] { --nrs-thumb: #4ade80; }
.socrates-nrs[data-nrs="3"] { --nrs-thumb: #84cc16; }
.socrates-nrs[data-nrs="4"] { --nrs-thumb: #a3e635; }
.socrates-nrs[data-nrs="5"] { --nrs-thumb: #eab308; }
.socrates-nrs[data-nrs="6"] { --nrs-thumb: #facc15; }
.socrates-nrs[data-nrs="7"] { --nrs-thumb: #fb923c; }
.socrates-nrs[data-nrs="8"] { --nrs-thumb: #f97316; }
.socrates-nrs[data-nrs="9"] { --nrs-thumb: #ef4444; }
.socrates-nrs[data-nrs="10"] { --nrs-thumb: #dc2626; }

.socrates-nrs-slider-wrap {
  width: 100%;
  padding: 0.5rem 0 0.25rem;
}

.socrates-nrs-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.socrates-nrs-slider:focus {
  outline: none;
}

.socrates-nrs-slider::-webkit-slider-runnable-track {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #22c55e 0%,
    #84cc16 25%,
    #eab308 50%,
    #f97316 75%,
    #ef4444 100%
  );
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.08);
}

.socrates-nrs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--nrs-thumb);
  box-shadow: 0 2px 10px rgb(15 23 42 / 0.2);
  transition: border-color 0.15s, transform 0.1s;
}

.socrates-nrs-slider:active::-webkit-slider-thumb {
  transform: scale(1.08);
}

.socrates-nrs-slider::-moz-range-track {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #22c55e 0%,
    #84cc16 25%,
    #eab308 50%,
    #f97316 75%,
    #ef4444 100%
  );
  box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.08);
}

.socrates-nrs-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--nrs-thumb);
  box-shadow: 0 2px 10px rgb(15 23 42 / 0.2);
  transition: border-color 0.15s;
}

.socrates-nrs-slider:focus-visible::-webkit-slider-thumb,
.socrates-nrs-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgb(31 90 110 / 0.2), 0 2px 10px rgb(15 23 42 / 0.2);
}

.socrates-nrs-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0.15rem 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-muted);
  pointer-events: none;
}

.socrates-nrs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.35rem;
}

.socrates-nrs-value {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--nrs-thumb);
  line-height: 1;
  transition: color 0.15s;
}

.socrates-nrs-value #nrs-value {
  font-size: 1.625rem;
}

.socrates-nrs-legend {
  display: flex;
  justify-content: space-between;
  flex: 1;
  max-width: 70%;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted);
}

.socrates-nrs-legend span:first-child {
  color: #15803d;
}

.socrates-nrs-legend span:last-child {
  color: #b91c1c;
}

/* ISAM cards */
.isam-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .isam-grid { grid-template-columns: repeat(2, 1fr); }
}

.isam-card {
  padding: 1rem;
  background: #f9fafb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Quick picks */
.quick-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.quick-pick {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.quick-pick:hover {
  background: var(--color-primary-soft);
  border-color: #93c5fd;
}

/* Systemic accordion */
.accordion-systemic { gap: 0.5rem; }

.systemic-panel {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  background: #fff;
  overflow: hidden;
}

.systemic-panel[open] {
  border-color: #93c5fd !important;
  box-shadow: var(--shadow-sm);
}

.systemic-panel summary {
  list-style: none;
  background: #f9fafb;
  min-height: 48px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.systemic-panel summary::-webkit-details-marker { display: none; }

.systemic-panel:has(.wnl-check:checked) summary .font-medium {
  color: #15803d;
}

/* WNL toggle switch */
.wnl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.wnl-toggle .wnl-check {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wnl-toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 3.25rem;
  height: 1.875rem;
  border-radius: 999px;
  background: #d0d5dd;
  transition: background 0.2s ease;
}

.wnl-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.2);
  transition: transform 0.2s ease;
}

.wnl-toggle .wnl-check:checked + .wnl-toggle-track {
  background: #22c55e;
}

.wnl-toggle .wnl-check:checked + .wnl-toggle-track::after {
  transform: translateX(1.375rem);
}

.wnl-toggle .wnl-check:focus-visible + .wnl-toggle-track {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.wnl-toggle-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  transition: color 0.15s;
}

.wnl-toggle .wnl-check:checked ~ .wnl-toggle-label {
  color: #15803d;
}

/* Safety tests */
.safety-grid {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .safety-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .safety-grid { grid-template-columns: repeat(3, 1fr); }
}

.safety-test-row {
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.safety-test-name {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.safety-toggles {
  display: flex;
  gap: 0.35rem;
}

.safety-opt {
  flex: 1;
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    background 150ms var(--ease-out, ease-out),
    color 150ms var(--ease-out, ease-out),
    border-color 150ms var(--ease-out, ease-out),
    transform 100ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.safety-opt:active {
  transform: scale(0.97);
}

.safety-opt:has(input:checked),
.safety-opt.is-on {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.safety-exception-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  min-height: 48px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.safety-exception-box--ok {
  background: #f0fdf4;
  border-color: #86efac;
}

.safety-exception-box input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* Treatment timeline */
.treatment-timeline { display: flex; flex-direction: column; gap: 0.75rem; }

.treatment-step {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

.treatment-step:has(.treatment-performed:checked) {
  border-color: #86efac;
  background: #ecfdf3;
}

.treatment-step-num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.treatment-step-body { flex: 1; min-width: 0; }

.treatment-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.treatment-step-title {
  font-weight: 600;
  margin: 0;
  font-size: 0.9375rem;
}

.treatment-performed-label {
  margin: 0;
}

.treatment-performed-label .wnl-toggle-label {
  font-size: 0.875rem;
}

/* Info banners */
.info-banner {
  border-radius: var(--radius-lg);
  border: 1px solid #fcd34d;
  background: #fffbeb;
  overflow: hidden;
}

.info-banner-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  padding: 0.875rem 1.25rem;
  font-weight: 600;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9375rem;
  -webkit-tap-highlight-color: transparent;
}

.info-banner-chevron { transition: transform 0.2s; }
.info-banner.is-open .info-banner-chevron { transform: rotate(180deg); }

.info-banner-body {
  padding: 0 1.25rem 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
}
.info-banner-body p { margin: 0.35rem 0; }
.text-muted { color: var(--color-muted); }

.visit-prev-history-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.visit-prev-history-link:hover { text-decoration: underline; }
.text-error { color: var(--color-error, #ba1a1a); }

.safety-banner {
  background: #b91c1c;
  color: #fff;
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Zaklenjen / odklenjen obisk — pasica čez celo */
.visit-locked-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.75rem;
  text-align: left;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .visit-locked-banner {
    padding: 0.45rem 1.25rem;
    gap: 0.625rem;
  }
}

.visit-locked-banner--locked {
  background: #fef3f2;
  color: #b42318;
  border-bottom: 1px solid #fecdca;
}

.visit-locked-banner--unlocked {
  background: #fffaeb;
  color: #b54708;
  border-bottom: 1px solid #fedf89;
}

.visit-locked-banner-icon {
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
  opacity: 0.95;
}

.visit-locked-banner-text {
  flex: 1;
  max-width: 48rem;
}

.visit-locked-banner-msg {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.95;
}

.visit-locked-banner-msg strong {
  font-weight: 600;
}

.visit-locked-banner--locked .visit-locked-banner-msg {
  opacity: 0.92;
}

.visit-locked-banner--locked strong {
  font-weight: 700;
  color: #912018;
}

/* Predobisk pacienta (QR) — kompakten pas v Opazovanju */
.visit-checkin-panel {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #f8fafb;
}

.visit-checkin-main {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.visit-checkin-body {
  flex: 1;
  min-width: 0;
}

.visit-checkin-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.visit-checkin-title {
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
}

.visit-checkin-desc {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--color-muted);
}

#visit-checkin-qr {
  flex-shrink: 0;
  width: 5.5rem !important;
  height: 5.5rem !important;
  border-radius: 6px;
  border: 1px solid #e4e7ec;
  background: #fff;
}

#visit-checkin-qr.hidden {
  display: none;
}

.visit-checkin-qr-fallback {
  flex-shrink: 0;
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--color-muted);
  background: #fff;
  border: 1px dashed #e4e7ec;
  border-radius: 6px;
}

.visit-checkin-link-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.visit-checkin-link-actions .btn-outline {
  min-height: 36px;
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
}

.visit-checkin-email-note {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.visit-checkin-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

.visit-checkin-link:hover {
  background: var(--color-primary-soft);
}

.visit-checkin-status {
  flex-shrink: 0;
}

.visit-checkin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.visit-checkin-badge .material-symbols-outlined {
  font-size: 1rem;
}

.visit-checkin-badge--ok {
  color: #166534;
}

.visit-checkin-badge--wait {
  color: #92400e;
}

.visit-checkin-badge--muted {
  color: #667085;
}

.visit-checkin-alert {
  margin: 0.65rem 0 0;
  padding: 0.45rem 0.6rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  color: #991b1b;
  font-size: 0.75rem;
}

.visit-checkin-intake-preview {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.65rem;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid #e4e7ec;
  font-size: 0.75rem;
}

.visit-checkin-intake-preview p {
  margin: 0 0 0.25rem;
}

.visit-checkin-intake-preview p:last-child {
  margin-bottom: 0;
}

.visit-checkin-apply {
  margin-top: 0.65rem;
  min-height: 40px;
  font-size: 0.875rem;
}

@media (max-width: 420px) {
  .visit-checkin-main {
    align-items: flex-start;
  }

  #visit-checkin-qr,
  .visit-checkin-qr-fallback {
    width: 4.75rem;
    height: 4.75rem;
  }
}

.body-map--readonly {
  pointer-events: none;
  opacity: 0.85;
}

.clinic-dialog {
  border: none;
  padding: 1rem;
  background: transparent;
  max-width: calc(100vw - 2rem);
  margin: auto;
}
.clinic-dialog::backdrop {
  background: rgb(15 23 42 / 0.5);
  backdrop-filter: blur(4px);
}
.clinic-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  max-width: 24rem;
  width: 100%;
  box-shadow: var(--shadow-md);
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.modal-text {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0 0 1rem;
}

.modal-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.modal-actions .btn-primary,
.modal-actions .btn-secondary {
  flex: 1;
  color: var(--color-text);
  background: #f2f4f7;
  border: 1px solid var(--color-border);
}
.modal-actions .btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.modal-actions [data-confirm-alt]:not([hidden]) {
  flex: 1 1 100%;
  order: 3;
}

/* Fields */
.label-text {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.4rem;
}

.field-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d0d5dd;
  border-radius: var(--radius);
  padding: 0.65rem 0.875rem;
  min-height: 44px;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(31 90 110 / 0.12);
}

.field-stack {
  position: relative;
  display: block;
  margin-bottom: 0.25rem;
}

.exam-notes-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
}

.exam-notes-wrap .exam-notes {
  flex: 1;
  min-width: 0;
}

.isam-card { position: relative; }

.field-input:disabled {
  background: #f2f4f7;
  color: var(--color-muted);
}

#new-patient-panel {
  margin-top: 0.75rem;
  padding: 1rem;
  background: #f9fafb;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.profile-date-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
}

.profile-date-icon {
  position: absolute;
  left: 0.75rem;
  z-index: 1;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-primary);
  pointer-events: none;
}

.profile-date-input {
  width: 100%;
  min-height: 44px;
  padding-left: 2.75rem !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.profile-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.65;
  margin-right: 0.15rem;
}

.profile-section-divider {
  margin-top: 1.25rem;
}

.gender-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gender-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9375rem;
  transition:
    background 150ms var(--ease-out, ease-out),
    border-color 150ms var(--ease-out, ease-out),
    transform 100ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.gender-pill:active {
  transform: scale(0.97);
}
.gender-pill:has(input:checked) {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  font-weight: 600;
}
.gender-pill:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Exam matrix */
.exam-matrix .exam-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid #f2f4f7;
  min-height: 44px;
}
.exam-matrix .exam-test,
.exam-matrix .exam-notes-wrap,
.exam-matrix .exam-notes {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.exam-matrix .exam-results {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.exam-matrix .exam-remove {
  flex-shrink: 0;
  justify-self: end;
}
@media (max-width: 640px) {
  .exam-matrix .exam-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .exam-matrix .exam-notes-wrap {
    grid-column: 1 / -1;
  }
}

.exam-result-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #d0d5dd;
  border-radius: 0.5rem;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
}
.exam-result-btn.selected-positive { background: #fecaca; border-color: #ef4444; color: #991b1b; }
.exam-result-btn.selected-negative { background: #bbf7d0; border-color: #22c55e; color: #166534; }
.exam-result-btn.selected-nt { background: #e4e7ec; color: #667085; }

.btn-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.75rem 1.25rem;
  min-height: 48px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px dashed rgb(31 90 110 / 0.4);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.btn-add-row:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  border-style: solid;
  box-shadow: 0 4px 14px rgb(31 90 110 / 0.12);
}

.btn-add-row:active {
  transform: scale(0.97);
}

.btn-add-row-icon {
  font-size: 1.375rem !important;
  line-height: 1;
}

/* Body map — SOCRATES Site / PPS (body-muscles) */
.body-map-wrap {
  max-width: 100%;
  margin: 0 auto;
}

.body-map-wrap--dual {
  width: 100%;
}

.body-map-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

.body-map-panel {
  min-width: 0;
}

.body-map-panel-label {
  margin: 0 0 0.35rem;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.body-map-hint {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.body-map-chart-host {
  min-height: 200px;
  touch-action: manipulation;
}

.body-map-chart-host .body-chart-container {
  padding: 0.15rem !important;
}

.body-map-chart-host .body-chart-svg {
  max-width: 100% !important;
  max-height: 320px !important;
  filter: drop-shadow(0 2px 12px rgb(15 23 42 / 0.1)) !important;
}

.body-map-chart-host .body-chart-muscle {
  cursor: pointer;
}

.body-map-chart-host .body-chart-muscle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.readonly-patterns {
  background: #f9fafb;
  border: 1px dashed #d0d5dd;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.readonly-patterns dl {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.readonly-patterns dt {
  font-weight: 600;
  font-size: 0.6875rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.readonly-patterns dd { margin: 0.15rem 0 0; font-size: 0.9375rem; }

#patient-gender-panel.hidden { display: none; }

.follow-up-readonly {
  pointer-events: none;
  user-select: text;
}
.follow-up-readonly .visit-section {
  opacity: 0.92;
}
.follow-up-readonly .field-input,
.follow-up-readonly .ts-control,
.follow-up-readonly textarea,
.follow-up-readonly select {
  background: #f9fafb !important;
  cursor: default;
}
.follow-up-readonly::before {
  content: 'Iz prejšnjega obiska — samo za branje';
  display: block;
  margin: 0 0 1rem;
  padding: 0.65rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.5rem;
}

.follow-up-readonly [data-attachment-panel] {
  pointer-events: auto;
  opacity: 1;
}

.follow-up-readonly .socrates-site-docs {
  opacity: 1;
}

.follow-up-readonly .socrates-site-docs-head .clinic-attachments-lead::after {
  content: ' · shranijo se na ta (kontrolni) obisk';
}

/* Tom Select — vsi tag-select / patient-select */
.ts-wrapper {
  position: relative;
  width: 100%;
}

.ts-wrapper.w-full,
.ts-wrapper.tag-select {
  width: 100%;
}

.ts-wrapper.dropdown-active {
  z-index: 40;
}

.ts-control {
  min-height: 44px !important;
  padding: 0.35rem 0.5rem !important;
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  font-size: 0.9375rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.dropdown-active .ts-control {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgb(31 90 110 / 0.12) !important;
}

.ts-control input {
  font-size: 0.9375rem !important;
  min-height: 1.75rem !important;
}

.ts-control input::placeholder {
  color: #98a2b3;
}

.ts-control > .item {
  margin: 0.15rem 0.2rem 0.15rem 0 !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 999px !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgb(31 90 110 / 0.12) !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
}

.ts-control > .item .remove {
  border-left-color: rgb(31 90 110 / 0.15) !important;
  padding: 0 0.35rem !important;
  margin-left: 0.25rem !important;
}

.ts-dropdown {
  position: absolute;
  z-index: 9999 !important;
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  margin-top: 0.25rem !important;
}

.ts-dropdown .option {
  min-height: 44px;
  padding: 0.625rem 0.75rem !important;
  font-size: 0.875rem;
}

.ts-dropdown .option.active {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

.ts-dropdown .option:hover {
  background: var(--color-primary-soft) !important;
}

.safety-test-row.positive-alert {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 10px; }

/* —— Dashboard —— */
.dashboard-page {
  min-height: calc(100vh - var(--header-height));
  background: transparent;
}

/* Icon boxes — glyph stays inside fixed box (no overlap with text) */
.dashboard-page .dash-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: hidden;
}

.dashboard-page .dash-icon .material-symbols-outlined {
  display: block;
  line-height: 1;
  font-size: inherit;
  vertical-align: top;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.dash-icon--xs {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
}

.dash-icon--sm {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
}

.dash-icon--lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 2.5rem;
}

.dash-icon--stat {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  font-size: 1.375rem;
}

.dash-icon--panel {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  font-size: 1.25rem;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dash-icon--empty {
  width: 3rem;
  height: 3rem;
  font-size: 3rem;
  color: #d0d5dd;
}

.dash-icon--total { background: #e8f1f4; color: var(--color-primary); }
.dash-icon--done { background: #ecfdf3; color: #039855; }
.dash-icon--draft { background: #fffaeb; color: #dc6803; }
.dash-icon--primary { color: var(--color-primary); }
.dash-icon--muted { color: var(--color-muted); }
.dash-icon--on-primary { color: #fff; }

.dashboard-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
}

@media (min-width: 768px) {
  .dashboard-inner { padding: 1.75rem 1.5rem 3rem; }
}

.dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.dash-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.35rem;
}

.dash-title {
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-tight);
}

@media (min-width: 768px) {
  .dash-title { font-size: 1.75rem; }
}

.dash-subtitle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  font-size: var(--text-secondary);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

.dash-subtitle .dash-icon--sm {
  color: var(--color-primary);
}

.dash-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 520px) {
  .dash-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.dash-stat-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-theme);
}

@media (min-width: 640px) {
  .dash-stat-card { padding: 1.125rem 1.25rem; }
}

.dash-stat-card > div:last-child {
  min-width: 0;
}

.dash-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  margin: 0;
}

.dash-stat-label {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin: 0.2rem 0 0;
}

.dash-layout {
  display: block;
  width: 100%;
}

.dash-layout > .dash-layout > #dash-visits-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dash-layout.has-patient #dash-visits-day {
  display: none;
}

.ta-page.has-patient .dash-day-chrome {
  display: none;
}

.ta-page.has-patient #dash-visits-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dash-visits-patient.hidden {
  display: none;
}

.dash-visits-patient:not(.hidden) {
  display: block;
  min-height: 0;
}

.dash-patient-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dash-patient-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.dash-patient-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem 0.35rem 0.25rem;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius);
}

.dash-patient-back .material-symbols-outlined {
  font-size: 1.125rem;
}

.dash-patient-back:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dash-patient-top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.dash-patient-top-actions .ta-btn {
  flex: 1 1 auto;
  min-width: 7.5rem;
  max-width: 100%;
  justify-content: center;
}

/* Patient card CTA (stacked primary actions) */
.dash-patient-grid {
  display: grid;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 960px) {
  .dash-patient-grid {
    grid-template-columns: minmax(15.5rem, 17.5rem) minmax(0, 1fr);
    gap: 1.25rem;
  }
}

.dash-patient-aside {
  min-width: 0;
}

@media (min-width: 960px) {
  .dash-patient-aside {
    position: sticky;
    top: calc(var(--header-height) + 0.75rem);
  }
}

.dash-patient-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.dash-patient-identity-text {
  min-width: 0;
}

.dash-patient-card > .dash-patient-identity {
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dash-patient-card > .dash-patient-details {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--color-border);
  background: transparent;
  grid-template-columns: 1fr;
  padding: 0.875rem 1.125rem;
}

.dash-patient-card > .dash-patient-details > div {
  grid-template-columns: 5.5rem 1fr;
}

.dash-patient-cta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  border-top: 1px solid var(--color-border);
}

.dash-patient-cta-btn {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  flex: 0 0 auto;
}

.dash-patient-menu {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem;
  border-top: 1px solid var(--color-border);
  background: #fafbfc;
}

.dash-patient-menu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.dash-patient-menu-item .material-symbols-outlined {
  font-size: 1.125rem;
  color: #667085;
}

.dash-patient-menu-item:hover {
  background: #eef2f6;
  color: var(--color-text);
}

.dash-patient-menu-item.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dash-patient-menu-item.is-active .material-symbols-outlined {
  color: var(--color-primary);
}

.dash-patient-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.dash-patient-identity {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

@media (min-width: 720px) {
  .dash-patient-identity {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.25rem 1.5rem;
  }
}

.dash-patient-identity-main {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.dash-patient-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}

.dash-patient-avatar .material-symbols-outlined {
  font-size: 1.5rem;
}

.dash-patient-name {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-text);
}

.dash-patient-meta {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.dash-patient-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  padding-top: 0.15rem;
  border-top: 1px solid #eef2f6;
}

@media (min-width: 720px) {
  .dash-patient-links {
    padding-top: 0;
    border-top: 0;
    justify-content: flex-end;
  }
}

.dash-patient-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.65rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.dash-patient-link .material-symbols-outlined {
  font-size: 1.05rem;
}

.dash-patient-link:hover,
.dash-patient-link.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dash-patient-details {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  display: grid;
  gap: 0.65rem;
}

@media (min-width: 640px) {
  .dash-patient-details {
    grid-template-columns: 1fr 1fr;
  }
}

.dash-patient-details > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}

.dash-patient-details dt {
  margin: 0;
  font-weight: 500;
  color: var(--color-muted);
}

.dash-patient-details dd {
  margin: 0;
  color: var(--color-text);
}

.dash-patient-visits {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.dash-patient-visits-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.dash-patient-visits-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
}

.dash-patient-visits-count {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.dash-patient-visits .dash-table-wrap {
  max-height: none;
  border: 0;
  border-radius: 0;
}

.dash-patient-visits .dash-table {
  margin: 0;
}

.dash-patient-visit-row {
  cursor: pointer;
}

.dash-patient-visit-row:hover,
.dash-patient-visit-row:focus-visible {
  background: #f5f8fa;
  outline: none;
}

.dash-patient-visit-row--follow:hover,
.dash-patient-visit-row--follow:focus-visible {
  background: #f7fafb;
}

/* Chain hierarchy: root → kontrole (indented), tip last */
.dash-table--chains tbody tr.dash-patient-visit-row--chain-start:not(.dash-patient-visit-row--first-chain) td {
  border-top: 1px solid #e4ebef;
  box-shadow: inset 0 6px 0 rgb(244 246 247 / 0.9);
}

.dash-table--chains tbody tr.dash-patient-visit-row--linked.dash-patient-visit-row--root td {
  background: rgb(31 90 110 / 0.03);
}

.dash-table--chains tbody tr.dash-patient-visit-row--linked.dash-patient-visit-row--root:hover td,
.dash-table--chains tbody tr.dash-patient-visit-row--linked.dash-patient-visit-row--root:focus-visible td {
  background: rgb(31 90 110 / 0.055);
}

.dash-table--chains td[data-label="Št. primera"] {
  position: relative;
  padding-left: 2.35rem;
}

.dash-table--chains tr.dash-patient-visit-row--child td[data-label="Št. primera"] {
  padding-left: 3.5rem; /* jasen zamik pod korenom */
}

.dash-visit-tree {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  vertical-align: middle;
}

.dash-visit-tree-gutter {
  position: absolute;
  left: 0.85rem;
  top: 0;
  bottom: 0;
  width: 1.25rem;
  pointer-events: none;
}

.dash-visit-tree-rail,
.dash-visit-tree-elbow,
.dash-visit-tree-node {
  position: absolute;
  pointer-events: none;
}

.dash-visit-tree-rail {
  left: 0.3rem;
  width: 2px;
  background: #c5d0d8;
  border-radius: 1px;
  display: none;
}

.dash-visit-tree-elbow {
  display: none;
  left: 0.3rem;
  top: 50%;
  width: 0.85rem;
  height: 2px;
  background: #c5d0d8;
  border-radius: 1px;
  transform: translateY(-50%);
}

.dash-visit-tree-node {
  left: 0.12rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #9aafbb;
  transform: translateY(-50%);
  z-index: 1;
}

.dash-visit-tree--root .dash-visit-tree-node {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.dash-visit-tree--root.dash-visit-tree--continues .dash-visit-tree-rail {
  display: block;
  top: 50%;
  bottom: 0;
}

.dash-visit-tree--child .dash-visit-tree-elbow {
  display: block;
}

.dash-visit-tree--child .dash-visit-tree-rail {
  display: block;
  top: 0;
  bottom: 50%;
}

.dash-visit-tree--child.dash-visit-tree--continues .dash-visit-tree-rail {
  bottom: 0;
}

.dash-visit-tree--child .dash-visit-tree-node {
  left: 0.9rem;
  width: 0.45rem;
  height: 0.45rem;
  border-width: 1.5px;
  border-color: #9aafbb;
  background: #fff;
}

.dash-visit-tree--tip:not(.dash-visit-tree--solo) .dash-visit-tree-node {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(31 90 110 / 0.12);
}

.dash-visit-tree--solo .dash-visit-tree-node {
  border-color: #9aafbb;
  background: #fff;
  box-shadow: none;
}

.dash-case--root,
.dash-case--tip {
  color: var(--color-text);
  font-weight: 650;
}

.dash-case--child {
  color: var(--color-muted);
  font-weight: 500;
}

.dash-patient-loading {
  margin: 0;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.dash-visit-status-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.dash-patient-visits td[data-label="Status"] {
  white-space: nowrap;
}

.dash-visit-pdf-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: var(--radius);
  border: 0;
  background: transparent;
  color: var(--color-muted);
  text-decoration: none;
  vertical-align: middle;
}

.dash-visit-pdf-link .material-symbols-outlined {
  font-size: 1.125rem;
}

.dash-visit-pdf-link:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* dash-patient-context / dash-visit-chain: removed (unused) */

.dash-row-action--accent {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
  color: var(--color-primary);
}

.dash-row-action--accent .material-symbols-outlined {
  font-size: 1rem;
}

.dash-row-action--quiet {
  color: var(--color-muted);
  margin-right: 0.5rem;
}

.dash-row-action--quiet:hover {
  color: var(--color-primary);
}

.dash-empty--compact {
  padding: 2rem 1rem;
}

.dash-patient-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-muted);
  margin: 0;
}

.dash-patient-empty,
.dash-patient-loading {
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.dash-search-results .patient-pick.is-selected {
  background: var(--color-primary-soft);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.dash-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #f9fafb;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.dash-search-field:focus-within {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(31 90 110 / 0.12);
}

.dash-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0;
  border: none;
  font-size: 0.9375rem;
  background: transparent;
}

.dash-search-input:focus {
  outline: none;
}

.dash-search-results {
  margin-top: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.dash-search-results .patient-pick {
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s;
}

.dash-search-results .patient-pick:last-child { border-bottom: 0; }

.dash-search-results .patient-pick:hover,
.dash-search-results .patient-pick:focus-visible {
  background: #f2f3fb;
  outline: none;
}

.dash-search-results .dash-search-msg {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin: 0;
}

.dash-search-results .dash-search-msg--error { color: #b91c1c; }
.dash-search-results .dash-search-msg--empty { color: var(--color-muted); }

.dash-table-wrap {
  margin: 0 -0.25rem;
  overflow-x: auto;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.dash-table thead th {
  padding: 0.625rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: #f9fafb;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.dash-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.12s;
}

.dash-table tbody tr:hover { background: #f9fafb; }

.dash-table tbody tr:last-child { border-bottom: 0; }

.dash-table td {
  padding: 0.875rem 1rem;
  vertical-align: middle;
}

.dash-case {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.dash-patient {
  font-weight: 600;
  color: var(--color-text);
}

button.dash-patient--link {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgb(31 90 110 / 0.35);
  text-underline-offset: 2px;
}

button.dash-patient--link:hover,
button.dash-patient--link:focus-visible {
  color: var(--color-primary-light);
  text-decoration-color: currentColor;
  outline: none;
}

.dash-complaint {
  color: var(--color-muted);
  font-size: 0.8125rem;
  max-width: 280px;
  display: block;
}

.dash-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.dash-type-badge-icon {
  font-size: 0.9375rem !important;
  line-height: 1;
}

.dash-type-badge--intake {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dash-type-badge--follow {
  background: #f2f4f7;
  color: #344054;
}

.dash-status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.dash-status--done {
  background: #dcfce7;
  color: #166534;
}

.dash-status--draft {
  background: #fef3c7;
  color: #92400e;
}

.dash-row-action {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .dash-row-action:hover .dash-icon--xs {
    transform: translateX(2px);
    transition: transform 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }
}

.dash-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.dash-row-action--delete {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--color-error, #ba1a1a);
}

.dash-row-action--delete:hover {
  color: #991b1b;
  text-decoration: underline;
}

.btn-destructive {
  background: var(--color-error, #ba1a1a);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.625rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-destructive:hover {
  background: #991b1b;
}

.btn-destructive:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.visit-action-desktop--danger {
  color: var(--color-error, #ba1a1a);
  border-color: rgb(186 26 26 / 0.35);
}

.visit-action-desktop--danger:hover {
  background: rgb(186 26 26 / 0.06);
  border-color: var(--color-error, #ba1a1a);
}

.dash-empty {
  text-align: center;
  padding: 2.5rem 1rem;
}

.dash-empty-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0.75rem 0 0.35rem;
}

.dash-empty-desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .dash-hide-sm { display: none; }

  .dash-table thead { display: none; }

  .dash-table tbody tr {
    display: block;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
  }

  .dash-table tbody tr:hover { background: #fff; }

  .dash-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border: none;
  }

  .dash-table td::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    flex-shrink: 0;
  }

  .dash-table td:last-child {
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
  }

  .dash-table td:last-child::before { display: none; }


  /* Patient visits: denser mobile cards */
  .dash-patient-visits .dash-table-wrap {
    padding: 0.65rem;
  }

  .dash-patient-visits .dash-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .dash-patient-visits .dash-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "case status"
      "date type"
      "actions actions";
    gap: 0.35rem 0.75rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-lg);
  }

  .dash-patient-visits .dash-table--chains tbody {
    gap: 0;
  }

  .dash-patient-visits .dash-table--chains tbody tr.dash-patient-visit-row--chain-start:not(.dash-patient-visit-row--first-chain) {
    margin-top: 0.65rem;
  }

  .dash-patient-visits .dash-table--chains tbody tr.dash-patient-visit-row--linked.dash-patient-visit-row--root {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: 1px solid #d7dee3;
    border-bottom-color: #e8eef1;
  }

  .dash-patient-visits .dash-table--chains tbody tr.dash-patient-visit-row--linked.dash-patient-visit-row--child {
    border-radius: 0;
    border: 1px solid #d7dee3;
    border-top: 0;
    background: #fafbfc;
  }

  .dash-patient-visits .dash-table--chains tbody tr.dash-patient-visit-row--linked.dash-patient-visit-row--chain-end {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .dash-patient-visits .dash-table--chains tbody tr.dash-patient-visit-row--solo {
    border: 1px solid #d7dee3;
  }

  .dash-patient-visits .dash-table--chains tbody tr.dash-patient-visit-row--chain-start:not(.dash-patient-visit-row--first-chain) td {
    border-top: 0;
    box-shadow: none;
  }

  .dash-patient-visits .dash-table--chains td[data-label="Št. primera"] {
    padding-left: 2.1rem;
  }

  .dash-patient-visits .dash-table--chains tr.dash-patient-visit-row--child td[data-label="Št. primera"] {
    padding-left: 3.1rem;
  }

  .dash-patient-visits .dash-table td {
    display: block;
    padding: 0;
  }

  .dash-patient-visits .dash-table td::before {
    display: none;
  }

  .dash-patient-visits .dash-table td[data-label="Št. primera"] { grid-area: case; }
  .dash-patient-visits .dash-table td[data-label="Datum"] { grid-area: date; }
  .dash-patient-visits .dash-table td[data-label="Tip"] { grid-area: type; justify-self: end; }
  .dash-patient-visits .dash-table td[data-label="Status"] { grid-area: status; justify-self: end; }
  .dash-patient-visits .dash-table td[data-label="Dejanja"] {
    grid-area: actions;
    border-top: 1px solid #eef2f6;
    margin: 0.35rem 0 0;
    padding-top: 0.55rem;
  }

  .dash-patient-visits .dash-table td.dash-hide-sm {
    display: none !important;
  }

  .dash-patient-visits .dash-case {
    font-size: 0.9375rem;
  }

  .dash-patient-visits time {
    font-size: 0.8125rem;
    color: var(--color-muted);
  }
}

.dash-modal {
  border: none;
  padding: 1rem;
  background: transparent;
  max-width: none;
  max-height: none;
  width: calc(100% - 2rem);
  margin: auto;
}

.dash-modal::backdrop {
  background: rgb(15 23 42 / 0.45);
  backdrop-filter: blur(4px);
}

.dash-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.dash-modal.hidden { display: none; }

.dash-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 32rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgb(15 23 42 / 0.18);
  padding: 1.5rem;
  /* Enter animation owned by motion system (apple-sheet-in) */
}

.dash-modal-dialog--visit {
  max-width: 36rem;
  max-height: min(92vh, 52rem);
  overflow-y: auto;
}

.dash-modal-dialog--follow {
  max-width: 28rem;
  padding: 1.25rem 1.35rem 1.35rem;
}

.dash-modal-dialog--patient-edit {
  max-width: 32rem;
  max-height: min(92vh, 40rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.patient-edit-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.pe-modal-head {
  margin: 0;
  padding: 1.1rem 1.25rem 0.85rem;
  border-bottom: 1px solid #e7ecef;
  flex: none;
}
.pe-modal-head-text { min-width: 0; }
.pe-modal-sub {
  margin: 0.2rem 0 0;
  font: 400 12.5px/1.35 var(--font-sans);
  color: #8b98a0;
}
.pe-modal-body {
  padding: 1rem 1.25rem 0.5rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.pe-section {
  margin: 0 0 0.95rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid #eef1f3;
}
.pe-section--last {
  margin-bottom: 0.25rem;
  padding-bottom: 0;
  border-bottom: 0;
}
.pe-section-title {
  margin: 0 0 0.55rem;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b98a0;
}
.pe-section-hint {
  margin: -0.25rem 0 0.55rem;
  font: 400 12px/1.4 var(--font-sans);
  color: #9aa8af;
}
.pe-section .form-grid-2 {
  gap: 0.65rem 0.85rem;
}
.pe-section .field-stack {
  margin-bottom: 0;
}
.pe-gender-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.pe-gender-field > .label-text,
.pe-gender-field > legend.label-text {
  padding: 0;
  margin-bottom: 0.35rem;
  float: none;
  width: auto;
}
.gender-pills--compact {
  gap: 0.4rem;
}
.gender-pills--compact .gender-pill {
  min-height: 38px;
  padding: 0.35rem 0.9rem;
  font-size: 0.875rem;
  border-radius: 8px;
}
.gender-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.pe-notes {
  resize: vertical;
  min-height: 3.25rem;
  max-height: 8rem;
}
.pe-dob-wrap {
  width: 100%;
}
.pe-dob-wrap .flatpickr-input,
.pe-dob-wrap .profile-date-input {
  width: 100%;
  min-height: 44px;
  padding-left: 2.75rem !important;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}
.pe-dob-wrap .flatpickr-input.form-control,
.pe-dob-wrap input.flatpickr-input {
  display: block;
}
#modal-patient-edit .flatpickr-calendar {
  z-index: 50;
}
.pe-error {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.8125rem;
}
.pe-modal-actions {
  flex: none;
  margin: 0;
  padding: 0.85rem 1.25rem 1.1rem;
  border-top: 1px solid #e7ecef;
  background: #fafbfc;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
/* Patient merge modal */
.dash-modal-dialog--patient-merge {
  max-width: 40rem;
  max-height: min(92vh, 44rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pm-modal-head {
  margin: 0;
  padding: 1.1rem 1.25rem 0.85rem;
  border-bottom: 1px solid #e7ecef;
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.pm-modal-head-text { min-width: 0; flex: 1; }
.pm-modal-sub {
  margin: 0.25rem 0 0;
  font: 400 12.5px/1.4 var(--font-sans);
  color: #8b98a0;
}
.pm-modal-body {
  padding: 1rem 1.25rem 0.75rem;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.pm-search-field {
  width: 100%;
}
.pm-results {
  position: relative;
  margin-top: 0.5rem;
  max-height: 16rem;
  overflow: auto;
}
.pm-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.9rem;
}
.pm-result-name {
  font: 600 0.9rem/1.25 var(--font-sans);
  color: #16232a;
}
.pm-result-meta {
  font: 400 0.75rem/1.3 var(--font-sans);
  color: #8b98a0;
}
.pm-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.65rem;
  align-items: stretch;
}
.pm-card {
  border: 1px solid #dde3e7;
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  background: #f7fafb;
  min-width: 0;
}
.pm-card--merge {
  background: #fdf8f6;
  border-color: #ebd4cb;
}
.pm-card-badge {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font: 600 10px/1.2 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pm-card-badge--keep {
  background: #e3f0e8;
  color: #1f6b45;
}
.pm-card-badge--merge {
  background: #f8e6e2;
  color: #8f312e;
}
.pm-card-name {
  margin: 0;
  font: 600 0.95rem/1.25 var(--font-sans);
  color: #16232a;
  word-break: break-word;
}
.pm-card-id {
  margin: 0.15rem 0 0.45rem;
  font: 500 11.5px/1.2 var(--font-mono);
  color: #8b98a0;
}
.pm-card-meta {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 12px/1.45 var(--font-sans);
  color: #4a6470;
}
.pm-card-meta li + li { margin-top: 0.1rem; }
.pm-card-counts {
  margin: 0.55rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid #e7ecef;
  font: 500 11.5px/1.3 var(--font-sans);
  color: #1f5a6e;
}
.pm-swap-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding-top: 1.5rem;
}
.pm-swap-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #c5d6de;
  border-radius: 999px;
  background: #fff;
  color: #1f5a6e;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.pm-swap-btn:hover {
  background: #eaf3f6;
  border-color: #1f5a6e;
  transform: scale(1.04);
}
.pm-swap-btn .material-symbols-outlined { font-size: 1.35rem; }
.pm-swap-label {
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pm-arrow {
  font: 600 1rem/1 var(--font-sans);
  color: #b0bec5;
}
.pm-summary {
  margin-top: 0.9rem;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  background: #eef4f7;
  border: 1px solid #d5e3ea;
}
.pm-summary-text {
  margin: 0;
  font: 400 12.5px/1.45 var(--font-sans);
  color: #2c4550;
}
.pm-summary-text strong { font-weight: 650; color: #16232a; }
.pm-summary-fills {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  font: 400 12px/1.4 var(--font-sans);
  color: #4a6470;
}
.pm-summary-fills-title {
  font-weight: 600;
  color: #1f5a6e;
  margin-bottom: 0.15rem;
}
.pm-change-link {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #1f5a6e;
  font: 600 12.5px/1.3 var(--font-sans);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pm-change-link:hover { color: #184858; }
@media (max-width: 640px) {
  .pm-compare-grid {
    grid-template-columns: 1fr;
  }
  .pm-swap-wrap {
    flex-direction: row;
    padding-top: 0;
  }
  .pm-arrow { transform: rotate(90deg); }
}

.appt-follow-patient {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
  line-height: 1.35;
  min-height: 1.15em;
}

.appt-follow-patient:empty {
  display: none;
}

.nv-step {
  margin-bottom: 1.25rem;
}

.nv-step-title {
  font-size: 0.9375rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.nv-step-desc {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.nv-search-field {
  margin-bottom: 0.5rem;
}

.nv-search-results {
  max-height: 10rem;
  margin-bottom: 0.75rem;
}

.nv-patient-selected {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgb(31 90 110 / 0.2);
  background: #fff;
  margin-bottom: 0.5rem;
}

.nv-patient-selected-icon {
  font-size: 1.5rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.nv-patient-selected-text {
  flex: 1;
  min-width: 0;
}

.nv-patient-selected-text strong {
  display: block;
  font-size: 0.9375rem;
}

.nv-patient-selected-meta {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.nv-patient-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.875rem 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.nv-patient-or::before,
.nv-patient-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.nv-new-patient-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 0.875rem;
  margin: 0;
  border: 1px solid rgb(31 90 110 / 0.14);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.nv-new-patient-trigger:hover {
  border-color: rgb(31 90 110 / 0.28);
  box-shadow: 0 4px 14px rgb(31 90 110 / 0.08);
}

.nv-new-patient-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.nv-new-patient-trigger.is-open {
  border-color: rgb(31 90 110 / 0.32);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #f8faff;
  box-shadow: none;
}

.nv-new-patient-trigger-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.nv-new-patient-trigger-icon .material-symbols-outlined {
  font-size: 1.375rem;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.nv-new-patient-trigger-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.nv-new-patient-trigger-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.nv-new-patient-trigger-desc {
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.35;
}

.nv-new-patient-trigger.is-open .nv-new-patient-trigger-desc {
  color: var(--color-primary);
}

.nv-new-patient-trigger-chevron {
  flex-shrink: 0;
  font-size: 1.375rem;
  color: var(--color-muted);
  transition: transform 0.2s ease, color 0.15s ease;
}

.nv-new-patient-trigger.is-open .nv-new-patient-trigger-chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.nv-new-patient-form {
  margin-top: 0;
  padding: 1rem 1rem 1.125rem;
  border-radius: 0 0 var(--radius) var(--radius);
  border: 1px solid rgb(31 90 110 / 0.32);
  border-top: 1px dashed rgb(31 90 110 / 0.18);
  background: #fff;
  animation: nv-form-in 180ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

@keyframes nv-form-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.nv-save-patient-btn {
  margin-top: 0.75rem;
  width: 100%;
}

.nv-visit-type-block--disabled {
  opacity: 0.55;
  pointer-events: none;
}

button.dash-modal-card:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.dash-modal-card--follow:not(:disabled):hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgb(31 90 110 / 0.1);
}

.nv-follow-targets {
  margin-top: 0.15rem;
}

.nv-follow-targets.hidden {
  display: none;
}

.nv-follow-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.nv-follow-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.nv-follow-panel-title {
  margin: 0 0 0.65rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-2, #8b98a0);
}

.nv-follow-summary-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
}

.nv-follow-summary-case {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text);
}

.nv-follow-summary-sep,
.nv-follow-summary-date {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.nv-follow-complaint {
  padding: 0.7rem 0.8rem;
  border-radius: calc(var(--radius) - 2px);
  background: #fff;
  border: 1px solid var(--color-border);
}

.nv-follow-complaint-label,
.nv-follow-option-complaint-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.2rem;
}

.nv-follow-complaint-text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}

.nv-follow-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: min(52vh, 22rem);
  overflow-y: auto;
  margin: 0 -0.15rem;
  padding: 0.05rem 0.15rem;
}

.nv-follow-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.nv-follow-option:hover,
.nv-follow-option:focus-visible {
  border-color: rgb(31 90 110 / 0.45);
  background: #f7fafb;
  outline: none;
}

.nv-follow-option:focus-visible {
  box-shadow: 0 0 0 2px rgb(31 90 110 / 0.16);
}

.nv-follow-option:active {
  transform: scale(0.995);
}

.nv-follow-option.is-selected {
  border-color: var(--color-primary);
  background: rgb(31 90 110 / 0.05);
}

.nv-follow-option-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.nv-follow-option-top,
.nv-follow-option-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
}

.nv-follow-option-date {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.nv-follow-option-case {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  background: #f1f4f6;
  border: 1px solid var(--color-border);
}

.nv-follow-option-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  color: var(--color-muted);
  background: #f4f6f7;
  transition: color 0.12s ease, background 0.12s ease;
}

.nv-follow-option-go .material-symbols-outlined {
  font-size: 1.05rem;
  line-height: 1;
}

.nv-follow-option:hover .nv-follow-option-go,
.nv-follow-option:focus-visible .nv-follow-option-go,
.nv-follow-option.is-selected .nv-follow-option-go {
  color: #fff;
  background: var(--color-primary);
}

.nv-follow-option-check {
  margin-left: 0;
  font-size: 1.05rem;
  color: inherit;
}

.nv-follow-option-complaint {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text);
}

.nv-follow-empty {
  margin: 0;
  padding: 0.85rem 0.95rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted);
  background: #f7f9fa;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}

#modal-appt-follow .dash-modal-header {
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}

#modal-appt-follow .dash-modal-title {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

#modal-appt-follow .ta-status:empty {
  display: none;
}

#modal-appt-follow .ta-status:not(:empty) {
  margin-top: 0.75rem;
}

.dash-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.dash-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}

.dash-modal-heading {
  min-width: 0;
  flex: 1 1 auto;
}
.dash-modal-heading .dash-modal-lead {
  margin: 0.4rem 0 0;
  max-width: 36rem;
}
.dash-modal-heading .dash-modal-lead strong {
  color: var(--color-text-secondary);
  font-weight: 700;
}
.dash-modal-heading .dash-modal-lead em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.dash-modal-close {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.5rem;
  background: #f2f4f7;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
}

.dash-modal-close:hover { background: #e4e7ec; color: var(--color-text); }

.dash-modal-lead {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.dash-modal-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 480px) {
  .dash-modal-grid { grid-template-columns: 1fr 1fr; }
}

.dash-modal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 1.25rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  font: inherit;
  width: 100%;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}


.dash-modal-card--primary {
  border-color: rgb(31 90 110 / 0.25);
  background: #fff;
}

.dash-modal-card--primary:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgb(31 90 110 / 0.12);
}


.dash-modal-card-title {
  font-weight: 600;
  margin-top: 0.35rem;
}

.dash-modal-card-desc {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}


.dash-modal-footer-link {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
  text-align: center;
}

.dash-modal-footer-link a {
  font-weight: 600;
  color: var(--color-primary);
}

/* —— App shell —— */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--header-height);
  padding: 0.75rem 1rem;
}

@media (min-width: 768px) {
  .app-header-inner { padding: 0.75rem 1.5rem; }
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex-shrink: 0;
}

.app-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  max-width: 12rem;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius);
}

.app-header-brand:hover {
  color: var(--color-primary-dark);
}

.app-header-brand:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.app-header-logo {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.app-header-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}

.app-header-logo-fallback .material-symbols-outlined {
  font-size: 1rem;
}

.app-header-clinic {
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 479px) {
  .app-header-clinic { display: none; }
}

.app-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.app-header-search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 42rem;
  min-height: 2.5rem;
  margin: 0 auto;
  padding: 0 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #f9fafb;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  text-align: left;
}

.app-header-search:hover {
  background: #fff;
  border-color: #d0d5dd;
}

.app-header-search .material-symbols-outlined {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.app-header-search-label {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header-kbd {
  display: none;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.6875rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-muted);
  font-family: inherit;
}

@media (min-width: 640px) {
  .app-header-kbd { display: inline; }
}

@media (min-width: 1024px) {
  .app-header-search {
    min-height: 2.625rem;
    padding: 0 1rem;
    font-size: 0.9375rem;
  }
}

.app-header-user {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.app-header-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.35rem 0.2rem 0.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.app-header-user-btn:hover,
.app-header-user.is-open .app-header-user-btn {
  background: #f2f4f7;
  border-color: var(--color-border);
}

.app-header-user-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.app-header-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.app-header-user-meta {
  display: none;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.app-header-user-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  max-width: 9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-user-caret {
  font-size: 1.125rem;
  color: var(--color-muted);
  transition: transform 0.15s ease;
}

.app-header-user.is-open .app-header-user-caret {
  transform: rotate(180deg);
}

@media (min-width: 900px) {
  .app-header-user-meta { display: flex; }
}

.app-header-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 50;
  min-width: 11.5rem;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgb(16 24 40 / 0.12);
}

.app-header-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.app-header-menu-item .material-symbols-outlined {
  font-size: 1.125rem;
  color: #667085;
}

.app-header-menu-item:hover {
  background: #f2f4f7;
  color: var(--color-text);
}

.app-header-menu-item--active {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.app-header-menu-item--active .material-symbols-outlined {
  color: var(--color-primary);
}

.app-header-menu-item--muted {
  color: var(--color-muted);
}

.app-content {
  flex: 1;
  min-width: 0;
}

.app-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-muted);
  padding: 1.25rem 1rem 1.75rem;
}

.app-footer--standalone {
  margin-left: 0;
}

body.command-palette-open { overflow: hidden; }

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 1rem;
}

.command-palette.hidden { display: none; }

.command-palette-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(16 24 40 / 0.45);
}

.command-palette-panel {
  position: relative;
  width: min(100%, 32rem);
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 48px rgb(16 24 40 / 0.18);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.command-palette-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.command-palette-search-icon {
  color: var(--color-muted);
  font-size: 1.25rem;
}

.command-palette-input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 1rem;
  background: transparent;
  min-width: 0;
}

.command-palette-kbd {
  font-size: 0.6875rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid #d0d5dd;
  color: var(--color-muted);
}

.command-palette-results {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  max-height: min(50vh, 20rem);
  overflow-y: auto;
}

.command-palette-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.command-palette-item--active,
.command-palette-item:hover {
  background: #f2f4f7;
}

.command-palette-item-icon {
  color: var(--color-primary);
  font-size: 1.25rem;
}

.command-palette-item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.command-palette-item-label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.command-palette-item-hint {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.command-palette-empty {
  padding: 1rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.command-palette-foot {
  margin: 0;
  padding: 0.5rem 1rem 0.75rem;
  font-size: 0.75rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}

.command-palette-foot kbd {
  font-size: 0.6875rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid #d0d5dd;
  border-radius: 0.2rem;
  background: #f9fafb;
}

.autosave-pill--flash {
  animation: autosave-flash 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

@keyframes autosave-flash {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* —— TailAdmin page primitives —— */
.ta-page {
  min-height: calc(100vh - var(--header-height));
  background: transparent;
}

.ta-page-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
}

.ta-page-inner--wide {
  max-width: 80rem;
}

.ta-page-inner--full {
  max-width: none;
}

@media (min-width: 768px) {
  .ta-page-inner { padding: 1.75rem 1.5rem 3rem; }
}

.ta-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ta-page-title {
  margin: 0;
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.ta-page-sub {
  margin: 0.25rem 0 0;
  font-size: var(--text-secondary);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

.ta-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.ta-breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}

.ta-breadcrumb a:hover { color: var(--color-primary-dark); }

.ta-breadcrumb-sep { color: #d0d5dd; }

.ta-breadcrumb-current { color: var(--color-muted); }

.ta-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ta-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-theme);
  overflow: hidden;
}

.ta-card-header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .ta-card-header { padding: 1.25rem 1.5rem; }
}

.ta-card-title {
  margin: 0;
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.ta-card-desc {
  margin: 0.25rem 0 0;
  font-size: var(--text-secondary);
  color: var(--color-muted);
  line-height: var(--leading-normal);
  max-width: 65ch;
}

.ta-card-body {
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .ta-card-body { padding: 1.5rem; }
}

.ta-form-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .ta-form-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.ta-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.ta-field--sm { max-width: 20rem; }

.ta-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.ta-input,
.ta-select {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d0d5dd;
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ta-input:focus,
.ta-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(31 90 110 / 0.12);
}

.ta-select-wrap { position: relative; }

.ta-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.ta-divider {
  height: 1px;
  background: var(--color-border);
  margin: 1.25rem 0;
}

.ta-hours-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.65rem;
}
.ta-hours-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}
.ta-hours-row.is-closed {
  background: #f8fafb;
}
.ta-hours-row.is-closed .ta-hours-day {
  color: var(--color-muted);
}
.ta-hours-closed {
  display: none;
  justify-self: end;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgb(139 152 160 / 0.12);
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.ta-hours-row.is-closed .ta-hours-closed {
  display: inline-block;
}
.ta-hours-row.is-closed .ta-hours-times {
  display: none;
}
.ta-hours-copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: 2.15rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted-2);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ta-hours-copy:hover {
  color: var(--color-primary);
  border-color: var(--color-border);
  background: #fff;
}
.ta-hours-copy .material-symbols-outlined {
  font-size: 1.05rem;
}
.ta-hours-day {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
}
.ta-hours-day input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary, #1f5a6e);
}
.ta-hours-times {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ta-hours-input {
  width: 7.25rem;
  min-height: 2.15rem;
  padding-inline: 0.5rem;
}
.ta-hours-sep {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .ta-hours-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .ta-hours-input { width: 100%; }
}

.ta-alert {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  line-height: 1.45;
  border: 1px solid var(--color-border);
  background: #f9fafb;
  color: var(--color-text-secondary);
}

.ta-alert code {
  font-size: 0.8125rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  padding: 0.05rem 0.3rem;
}

.ta-alert--info {
  background: var(--color-primary-soft);
  border-color: #c2d6ff;
  color: #1d4ed8;
}

.ta-alert--ok {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #027a48;
}

.ta-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.ta-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.ta-btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: none;
}

.ta-btn--outline {
  background: #fff;
  border-color: #d0d5dd;
  color: var(--color-text-secondary);
}

.ta-btn--outline:hover {
  background: #f9fafb;
  color: var(--color-text);
}

.ta-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-muted);
  min-height: 2.25rem;
  padding: 0 0.5rem;
}

.ta-btn--ghost:hover {
  color: var(--color-text);
  background: #f2f4f7;
}

.ta-switch-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ta-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  cursor: pointer;
}

.ta-switch + .ta-switch {
  border-top: 1px solid var(--color-border);
}

.ta-switch-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ta-switch-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

.ta-switch-desc {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.ta-switch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ta-switch-track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #d0d5dd;
  flex-shrink: 0;
  transition: background 0.15s;
}

.ta-switch-thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.12);
  transition: transform 0.15s;
}

.ta-switch-input:checked + .ta-switch-track {
  background: var(--color-primary);
}

.ta-switch-input:checked + .ta-switch-track .ta-switch-thumb {
  transform: translateX(1.25rem);
}

.ta-switch-input:focus-visible + .ta-switch-track {
  box-shadow: 0 0 0 3px rgb(31 90 110 / 0.2);
}

/* ── Settings: vacation list ──────────────────────────────────── */
.vac-form-actions .ta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.vac-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vac-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ta-border, #e2e8f0);
  border-radius: 10px;
  background: #f8fafc;
}
.vac-item.is-past {
  opacity: 0.65;
}
.vac-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.vac-item-dates {
  font-weight: 600;
  font-size: 0.95rem;
  color: #0f172a;
}
.vac-item-note {
  font-size: 0.85rem;
  color: #64748b;
}
.vac-item-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #e2e8f0;
  color: #475569;
  vertical-align: middle;
}
.vac-item-badge--active {
  background: #dbeafe;
  color: #1d4ed8;
}
.vac-list-empty {
  padding: 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.9rem;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
}
.ta-status {
  margin: 0;
  margin-right: auto;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.ta-status--ok { color: #027a48; }
.ta-status--error { color: #b42318; }
.ta-status--saving { color: var(--color-primary); }
.ta-status--dirty { color: var(--color-warn, #b06f14); }
.ta-status--dirty::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.05rem;
}

.ta-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.5rem;
  padding: 0.25rem;
  background: #f2f4f7;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: fit-content;
  max-width: 100%;
}

.ta-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.125rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.ta-tab:hover {
  color: var(--color-text);
  background: rgb(255 255 255 / 0.7);
}

.ta-tab--active {
  background: #fff;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.ta-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .ta-stats { grid-template-columns: repeat(3, 1fr); }
}

.ta-stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-theme);
}

.ta-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.ta-stat-icon .material-symbols-outlined { font-size: 1.375rem; }

.ta-stat-icon--blue { background: var(--color-primary-soft); color: var(--color-primary); }
.ta-stat-icon--green { background: #ecfdf3; color: #039855; }
.ta-stat-icon--amber { background: #fffaeb; color: #dc6803; }

.ta-stat-value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.ta-stat-label {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.ta-grid-2 {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .ta-grid-2 {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    align-items: start;
  }
}

.ta-card .dash-search-field {
  border-radius: var(--radius);
  background: #fff;
}

.login-card.ta-card {
  padding: 2rem 1.75rem;
  overflow: visible;
}

.login-card-head {
  margin-bottom: 1.25rem;
}

.login-submit {
  width: 100%;
  margin-top: 0.5rem;
}

@media (min-width: 1024px) {
  .visit-toolbar-mobile { display: none; }
  .visit-main { padding-bottom: 0; }
}

@media (max-width: 1100px) {
  .visit-history-label { display: none; }
  .visit-btn-label-full { display: none; }
  .visit-btn-label-short { display: inline; }
  .autosave-pill {
    max-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 1023px) {
  .visit-action-desktop { display: none !important; }
  .visit-toolbar-title { font-size: 1rem; }
  .visit-toolbar-inner {
    padding: 0.5rem 0.75rem;
  }
  .visit-toolbar-actions {
    margin-left: auto;
    flex-shrink: 0;
  }
  .autosave-pill { display: none; }
  .visit-body {
    padding-bottom: calc(5.5rem + var(--safe-bottom));
  }
  .visit-nav-card {
    padding: 0.75rem;
  }
  @media (max-width: 767px) {
    .visit-nav-card {
      border-radius: var(--radius);
    }
  }
  .visit-nav-title {
    margin-bottom: 0.5rem;
  }
  .visit-nav-progress-wrap {
    margin-bottom: 0.75rem;
  }
  .visit-nav-group-label {
    display: none;
  }
  .visit-nav-group {
    display: contents;
  }
  .visit-main {
    gap: 1rem;
  }
  .visit-section {
    scroll-margin-top: 5.5rem;
  }
}

@media (max-width: 480px) {
  .visit-toolbar-sub {
    font-size: 0.6875rem;
  }
  .visit-badge {
    font-size: 0.625rem;
    padding: 0.12rem 0.35rem;
  }
  .visit-back {
    width: 2rem;
    height: 2rem;
  }
}

.visit-page .visit-back,
.visit-page .btn-icon,
.visit-page .btn-primary,
.visit-page .btn-secondary,
.visit-page .quick-pick,
.visit-page .nav-anchor,
.visit-page .visit-mobile-btn {
  touch-action: manipulation;
}


/* —— Catalog (matches dashboard) —— */
.catalog-page .dash-icon .material-symbols-outlined {
  display: block;
  line-height: 1;
  font-size: inherit;
}

.catalog-meta {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
}

.catalog-col-drag {
  width: 2.25rem;
  padding-right: 0 !important;
}
.catalog-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #98a2b3;
  cursor: grab;
  padding: 0.25rem;
  border-radius: 0.375rem;
}
.catalog-drag-handle:hover {
  color: var(--color-text);
  background: #f2f4f7;
}
.catalog-drag-handle:active {
  cursor: grabbing;
}
.catalog-drag-handle .material-symbols-outlined {
  font-size: 1.25rem;
}
.catalog-row-ghost {
  opacity: 0.45;
  background: #f9fafb;
}

.catalog-col-sort {
  width: 6.5rem;
  text-align: right;
}

.catalog-actions {
  white-space: nowrap;
  text-align: right;
}

.catalog-actions .btn-text-link + .btn-text-link {
  margin-left: 0.5rem;
}

.catalog-empty-cell {
  text-align: center;
  padding: 2rem 1rem !important;
  color: var(--color-muted);
}

.catalog-empty-cell .dash-icon {
  display: block;
  margin: 0 auto 0.5rem;
}

.catalog-term-edit,
.catalog-sort-edit {
  width: 100%;
  max-width: 20rem;
}

.catalog-sort-edit {
  max-width: 5rem;
  margin-left: auto;
}

.catalog-table tr.is-editing {
  background: #f9fafb;
}

.btn-text-link {
  background: none;
  border: none;
  padding: 0.25rem 0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-text-link:hover {
  color: var(--color-primary-light);
}

.btn-text-link.text-error {
  color: var(--color-error, #ba1a1a);
}

.btn-text-link.text-error:hover {
  color: #9a1515;
}

.btn-text-link[hidden] {
  display: none;
}

/* —— Priloge (nalaganje, galerija, predogled) —— */
.clinic-attachments-block {
  margin-top: 0.25rem;
}

.clinic-attachments-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.clinic-attachments-head-text {
  flex: 1;
  min-width: 0;
}

.btn-attachments-quickview {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}

.btn-attachments-quickview:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.btn-attachments-quickview:disabled,
.btn-attachments-quickview[hidden] {
  display: none;
}

.btn-attachments-quickview .material-symbols-outlined {
  font-size: 1.125rem;
}

.clinic-attachments-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.clinic-attachments-title .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--color-primary);
}

.clinic-attachments-count {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.clinic-attachments-lead {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.clinic-attachments-dropzone {
  position: relative;
  border: 2px dashed #d0d5dd;
  border-radius: var(--radius);
  background: #fff;
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.clinic-attachments-dropzone:hover:not(.is-disabled) {
  border-color: var(--color-primary);
  background: #f0f9ff;
}

.clinic-attachments-dropzone.is-dragover {
  border-color: var(--color-primary);
  background: #e0f2fe;
  box-shadow: 0 0 0 3px rgb(14 116 144 / 0.12);
}

.clinic-attachments-dropzone.is-busy {
  pointer-events: none;
  opacity: 0.75;
}

.clinic-attachments-dropzone.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.clinic-attachments-dropzone-inner {
  pointer-events: none;
}

.clinic-attachments-dropzone-icon {
  display: block;
  margin: 0 auto 0.5rem;
  font-size: 2.25rem;
  color: var(--color-primary);
  opacity: 0.85;
}

.clinic-attachments-dropzone-title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text);
}

.clinic-attachments-dropzone-or {
  font-weight: 400;
  color: var(--color-muted);
  margin: 0 0.2rem;
}

.clinic-attachments-browse {
  pointer-events: auto;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.clinic-attachments-browse:hover {
  color: var(--color-primary-light);
}

.clinic-attachments-dropzone-hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.clinic-attachments-status {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
}

.clinic-attachments-status--info {
  background: #e0f2fe;
  color: #0c4a6e;
}

.clinic-attachments-status--success {
  background: #dcfce7;
  color: #14532d;
}

.clinic-attachments-status--error {
  background: #fee2e2;
  color: #991b1b;
}

.clinic-attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  min-height: 0;
}

.clinic-attachments-grid--has-items {
  margin-top: 1rem;
}

.clinic-attachments-empty {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
  text-align: center;
  padding: 1rem;
  border: 1px dashed #e4e7ec;
  border-radius: var(--radius);
  background: #f9fafb;
}

.clinic-attachment-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.clinic-attachment-card:hover {
  border-color: #98a2b3;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
}

.clinic-attachment-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  background: #f2f4f7;
  cursor: pointer;
  overflow: hidden;
}

.clinic-attachment-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clinic-attachment-pdf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #dc2626;
}

.clinic-attachment-pdf-icon .material-symbols-outlined {
  font-size: 2.5rem;
}

.clinic-attachment-card-body {
  padding: 0.4rem 0.5rem 0.5rem;
  min-width: 0;
}

.clinic-attachment-card-name {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clinic-attachment-card-size {
  margin: 0.1rem 0 0;
  font-size: 0.625rem;
  color: var(--color-muted);
}

.clinic-attachment-card-visit {
  margin: 0.2rem 0 0;
  font-size: 0.625rem;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clinic-attachment-delete {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: #667085;
  cursor: pointer;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.15);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.clinic-attachment-card:hover .clinic-attachment-delete,
.clinic-attachment-delete:focus-visible {
  opacity: 1;
}

.clinic-attachment-delete:hover {
  color: #dc2626;
  background: #fff;
}

.clinic-attachment-delete .material-symbols-outlined {
  font-size: 1.125rem;
}

/* Hitri predogled prilog */
.clinic-quickview {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.clinic-quickview.hidden {
  display: none;
}

.clinic-quickview-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgb(15 23 42 / 0.8);
  cursor: pointer;
}

.clinic-quickview-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(96vw, 56rem);
  max-height: 92vh;
  background: #101828;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
  overflow: hidden;
}

.clinic-quickview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #101828;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.clinic-quickview-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #f9fafb;
}

.clinic-quickview-counter {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: #98a2b3;
}

.clinic-quickview-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.clinic-quickview-open {
  font-size: 0.75rem;
  font-weight: 600;
  color: #93c5fd;
  text-decoration: none;
  white-space: nowrap;
}

.clinic-quickview-open:hover {
  text-decoration: underline;
}

.clinic-quickview-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: #f9fafb;
  cursor: pointer;
}

.clinic-quickview-close:hover {
  background: rgb(255 255 255 / 0.18);
}

.clinic-quickview-stage-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  min-height: 0;
  flex: 1;
}

.clinic-quickview-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(60vh, 28rem);
  max-height: calc(92vh - 11rem);
  background: #020617;
  border-radius: var(--radius);
  overflow: hidden;
}

.clinic-quickview-img {
  display: block;
  max-width: 100%;
  max-height: calc(92vh - 11rem);
  width: auto;
  height: auto;
  object-fit: contain;
}

.clinic-quickview-pdf {
  width: 100%;
  height: min(60vh, 28rem);
  border: none;
  background: #fff;
}

.clinic-quickview-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: #f9fafb;
  cursor: pointer;
}

.clinic-quickview-nav:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.22);
}

.clinic-quickview-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.clinic-quickview-caption {
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #d0d5dd;
  text-align: center;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

.clinic-quickview-thumbs {
  display: flex;
  gap: 0.5rem;
  padding: 0.65rem 1rem 0.85rem;
  overflow-x: auto;
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

.clinic-quickview-thumb {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.375rem;
  background: #334155;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fca5a5;
}

.clinic-quickview-thumb.is-active {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgb(96 165 250 / 0.35);
}

.clinic-quickview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clinic-quickview-thumb .material-symbols-outlined {
  font-size: 1.5rem;
}

/* Nadzorna plošča — priloge pacienta */
.dash-patient-attachments {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.dash-patient-attachments-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dash-patient-attachments-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.dash-patient-attachments-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.dash-patient-attachments .clinic-attachments-grid {
  margin-top: 0.5rem;
}

.dash-patient-attachments-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.dash-patient-attachments-filter button {
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}

.dash-patient-attachments-filter button.is-active {
  border-color: var(--color-primary);
  background: #e0f2fe;
  color: var(--color-primary);
  font-weight: 600;
}

/* —— Anatomy picker (spine chain + ribs) —— */
.anatomy-picker {
  margin-top: 0.5rem;
}

.anatomy-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.anatomy-picker-heading {
  margin-bottom: 0;
}

.anatomy-clear-btn {
  min-height: 36px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

.anatomy-clear-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.anatomy-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  background: var(--color-primary-soft);
  border: 1px solid #b8cff5;
  border-radius: 0.625rem;
  color: var(--color-text);
}

.anatomy-summary-group strong {
  color: var(--color-primary);
  font-weight: 600;
}

.anatomy-picker-layout {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .anatomy-picker-layout {
    grid-template-columns: 1fr minmax(220px, 280px);
    align-items: start;
  }
}

.anatomy-picker-spine {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.anatomy-group {
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: #fff;
  overflow: hidden;
}

.anatomy-group--cervical {
  --spine-region: #3b82f6;
  --spine-region-soft: #dbeafe;
  --spine-region-border: #93c5fd;
}

.anatomy-group--thoracic {
  --spine-region: #d97706;
  --spine-region-soft: #fef3c7;
  --spine-region-border: #fcd34d;
}

.anatomy-group--lumbar {
  --spine-region: #16a34a;
  --spine-region-soft: #dcfce7;
  --spine-region-border: #86efac;
}

.anatomy-group-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  padding: 0.65rem 0.85rem;
  list-style: none;
  background: #f9fafb;
  border-left: 4px solid var(--spine-region);
  -webkit-tap-highlight-color: transparent;
}

.anatomy-group-summary::-webkit-details-marker {
  display: none;
}

.anatomy-group-chevron {
  font-size: 1.25rem;
  color: var(--color-muted);
  transition: transform 0.2s;
}

.anatomy-group[open] .anatomy-group-chevron {
  transform: rotate(180deg);
}

.anatomy-group-label {
  flex: 1;
}

.anatomy-group-count {
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  background: var(--spine-region);
  border-radius: 999px;
}

.spine-chain-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 0.85rem 0.85rem;
  scrollbar-width: thin;
}

.spine-chain {
  display: flex;
  align-items: flex-end;
  gap: 0;
  min-width: min-content;
}

.spine-chain-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 2.75rem;
  flex: 0 0 auto;
  padding: 0.25rem 0.2rem 0;
  border: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.spine-chain-segment:focus-visible {
  outline: 2px solid var(--spine-region);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.spine-chain-joint {
  width: 100%;
  height: 10px;
  background: #e4e7ec;
  border-radius: 3px;
  transition: height 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative;
}

.spine-chain-segment + .spine-chain-segment .spine-chain-joint::before {
  content: '';
  position: absolute;
  left: -0.2rem;
  top: 50%;
  width: 0.2rem;
  height: 2px;
  background: #d0d5dd;
  transform: translateY(-50%);
}

.spine-chain-segment:hover .spine-chain-joint {
  background: var(--spine-region-border);
}

.spine-chain-segment--active .spine-chain-joint {
  height: 14px;
  background: var(--spine-region);
  box-shadow: 0 0 0 2px var(--spine-region-soft);
}

.spine-chain-segment--active .spine-chain-label {
  color: var(--spine-region);
  font-weight: 700;
}

.spine-chain-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.anatomy-picker-ribs {
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: #f9fafb;
}

.anatomy-ribs-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.25rem;
}

.anatomy-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.anatomy-pill:hover {
  border-color: var(--color-primary);
}

.anatomy-pill--active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.rib-picker-grid {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1fr;
  gap: 0.4rem;
}

.rib-picker-header {
  display: contents;
}

.rib-picker-header span {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.rib-picker-row {
  display: contents;
}

.rib-picker-label {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.rib-pill {
  width: 100%;
}

.follow-up-readonly .anatomy-clear-btn,
#visit-form[data-read-only="1"] .anatomy-clear-btn {
  display: none;
}

/* —— Physical agents —— */
.physical-agents-grid {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

@media (min-width: 768px) {
  .physical-agents-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.physical-agent-card {
  min-width: 0;
  max-width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  background: #f9fafb;
  box-sizing: border-box;
  overflow: hidden;
}

.physical-agent-card .field-stack {
  min-width: 0;
  max-width: 100%;
}

.physical-agent-card .field-input,
.physical-agent-params,
.physical-agent-notes {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.physical-agent-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.physical-agent-used-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}

.physical-agent-title {
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

/* —— UX polish pass (TailAdmin density) —— */
.ta-page-inner {
  padding: 1.25rem 1rem 2rem;
}
@media (min-width: 768px) {
  .ta-page-inner { padding: 1.5rem 1.5rem 2.5rem; }
}

.ta-page-head {
  margin-bottom: 1.25rem;
  align-items: center;
}

.ta-page-title {
  font-size: 1.375rem;
}
@media (min-width: 768px) {
  .ta-page-title { font-size: 1.5rem; }
}

.ta-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .ta-stats { gap: 1rem; }
}

.ta-stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
}
@media (min-width: 640px) {
  .ta-stat {
    flex-direction: row;
    align-items: center;
    padding: 1.25rem 1.5rem;
  }
}

.ta-stat-icon {
  width: 2.5rem;
  height: 2.5rem;
}
@media (min-width: 640px) {
  .ta-stat-icon {
    width: 3rem;
    height: 3rem;
  }
}

.ta-stat-value {
  font-size: 1.25rem;
}
@media (min-width: 640px) {
  .ta-stat-value { font-size: 1.5rem; }
}

.ta-stat-label {
  font-size: 0.75rem;
}
@media (min-width: 640px) {
  .ta-stat-label { font-size: 0.875rem; }
}

.ta-card-header {
  padding: 1rem 1.25rem;
}
@media (min-width: 640px) {
  .ta-card-header { padding: 1.125rem 1.5rem; }
}

.ta-card-title {
  font-size: 1rem;
}

.ta-card-body {
  padding: 1.25rem;
}
@media (min-width: 640px) {
  .ta-card-body { padding: 1.5rem; }
}

/* Flush tables to card edges like TailAdmin */
.ta-card-body:has(> .dash-table-wrap) {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.ta-card-body > .dash-empty {
  padding: 1.5rem 1.25rem 1.75rem;
  text-align: center;
}

.dash-table-wrap {
  margin: 0;
  overflow-x: auto;
}

.dash-table thead th {
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #667085;
  background: #f9fafb;
}

.dash-table td {
  padding: 1rem 1.25rem;
  color: #344054;
}

.dash-type-badge,
.dash-status {
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border: 1px solid transparent;
}

.dash-type-badge--intake {
  background: #e8f1f4;
  color: #164555;
  border-color: #c2d6ff;
}

.dash-type-badge--follow {
  background: #fffaeb;
  color: #b54708;
  border-color: #fedf89;
}

.dash-status--done {
  background: #ecfdf3;
  color: #027a48;
  border-color: #abefc6;
}

.dash-status--draft {
  background: #f2f4f7;
  color: #344054;
  border-color: #e4e7ec;
}
.dash-status--booked {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

.dash-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.dash-row-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #344054;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.dash-row-action:hover {
  background: #f9fafb;
  color: var(--color-text);
}

.dash-row-action--quiet {
  border-color: transparent;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.dash-row-action--quiet:hover {
  background: #dbe7ff;
}

.dash-row-action--delete {
  border-color: #fecdca;
  background: #fef3f2;
  color: #b42318;
}

.dash-row-action--delete:hover {
  background: #fee4e2;
}

.dash-search-field {
  background: #fff;
  border-color: #d0d5dd;
  min-height: 2.75rem;
}

.app-header {
  background: #fff;
}

.app-header-inner {
  min-height: 4rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.ta-alert--danger {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
  margin: 0 0 1rem;
}

.login-page {
  background: var(--color-bg);
}

.login-card.ta-card {
  max-width: 26rem;
  box-shadow: var(--shadow-md);
}

/* Visit form density */

.visit-nav-card,
.section-card {
  border-radius: 1rem;
  box-shadow: var(--shadow-theme);
}

.section-header {
  margin-bottom: 1rem;
}

.section-num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.section-title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.nav-anchor {
  border-radius: 0.5rem;
  border: 1px solid transparent;
}

.nav-anchor.active {
  background: var(--color-primary-soft);
  border-color: #c2d6ff;
  color: var(--color-primary);
}

.ta-grid-2 {
  gap: 1rem;
}

.ta-tabs {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 480px) {
  .ta-tabs { width: fit-content; }
}

.history-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.history-stat {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-theme);
  padding: 1rem;
}

.dash-modal-dialog {
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
}

.dash-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0.75rem 0 0.35rem;
}

.dash-empty-desc {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.875rem;
}

@media (max-width: 1023px) {
  .ta-grid-2.dash-layout {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .ta-card-body:has(> .dash-table-wrap) .dash-table {
    display: block;
    padding: 0 1rem 1rem;
  }
  .ta-card-body:has(> .dash-table-wrap) .dash-table tbody {
    display: block;
  }
  .ta-card-body:has(> .dash-table-wrap) .dash-table tbody tr {
    border-radius: 0.75rem;
    box-shadow: var(--shadow-theme);
    margin-bottom: 0.75rem;
  }
}

/* —— Unify design language (one TailAdmin system) —— */
.ta-btn--ghost:hover {
  color: var(--color-text) !important;
  background: #f2f4f7;
}

/* Alias legacy buttons → ta-btn language */
.btn-primary,
.btn-primary--solid,
.history-btn--primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--control-height) !important;
  padding: 0 1.125rem !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
}
.btn-primary:hover,
.btn-primary--solid:hover,
.history-btn--primary:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  box-shadow: 0 4px 12px rgb(31 90 110 / 0.28) !important;
  transform: none !important;
}

/* Visit toolbar chrome: compact, never fight global btn !important */
.visit-toolbar .btn-primary,
.visit-toolbar .btn-secondary,
.visit-toolbar .btn-outline {
  min-height: 1.85rem !important;
  height: 1.85rem !important;
  padding: 0 0.75rem !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
}
@media (max-width: 1023px) {
  .visit-toolbar .visit-action-desktop {
    display: none !important;
  }
  .visit-toolbar-meta-inline { display: none; }
}
@media (min-width: 1024px) and (max-width: 1100px) {
  .visit-toolbar .btn-primary,
  .visit-toolbar .btn-secondary {
    padding: 0 0.55rem !important;
  }
  .visit-history-label { display: none; }
}

.btn-secondary,
.btn-outline,
.history-btn--secondary,
.history-btn--ghost {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--control-height) !important;
  padding: 0 1rem !important;
  border-radius: var(--radius) !important;
  border: 1px solid #d0d5dd !important;
  background: #fff !important;
  color: var(--color-text-secondary) !important;
  font: inherit !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer;
}
.btn-secondary:hover,
.btn-outline:hover,
.history-btn--secondary:hover,
.history-btn--ghost:hover {
  background: #f9fafb !important;
  color: var(--color-text) !important;
}

.btn-icon {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: var(--radius) !important;
  border: 1px solid #d0d5dd !important;
  background: #fff !important;
  color: var(--color-text-secondary) !important;
}
.btn-icon:hover {
  background: #f9fafb !important;
  color: var(--color-text) !important;
}

.field-input,
.ta-input,
.ta-select {
  min-height: var(--control-height) !important;
  border: 1px solid #d0d5dd !important;
  border-radius: var(--radius) !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 0.875rem !important;
}
/* Keep room for the leading calendar icon (shorthand above resets padding-left). */
.profile-date-input-wrap .profile-date-input {
  padding-left: 2.75rem !important;
}
.field-input:focus,
.ta-input:focus,
.ta-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgb(31 90 110 / 0.12) !important;
  outline: none !important;
}

/* Quiet table actions */
.dash-row-action,
.dash-row-action--quiet,
.dash-row-action--accent,
.dash-row-action--delete {
  border: none !important;
  background: transparent !important;
  min-height: auto !important;
  padding: 0.25rem 0.35rem !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.dash-row-action,
.dash-row-action--quiet {
  color: var(--color-primary) !important;
}
.dash-row-action:hover,
.dash-row-action--quiet:hover {
  background: var(--color-primary-soft) !important;
  border-radius: 0.375rem !important;
}
.dash-row-action--delete {
  color: #b42318 !important;
}
.dash-row-action--delete:hover {
  background: #fef3f2 !important;
}

/* Header: TailAdmin density */
.app-header {
  background: #fff !important;
  backdrop-filter: none !important;
}
.app-header-inner {
  min-height: var(--header-height) !important;
  padding: 0.5rem 1rem !important;
}
@media (min-width: 768px) {
  .app-header-inner { padding: 0.5rem 1.5rem !important; }
}
.app-header-search--desktop,
.app-header-search--mobile {
  /* legacy aliases removed — single header search */
  display: none !important;
}
.app-header-search {
  display: inline-flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 42rem !important;
  width: 100%;
  background: #fff !important;
}
.app-header-search-label {
  display: block !important;
}
@media (max-width: 899px) {
  .app-header-search {
    min-height: 2.375rem !important;
  }
  .app-header-kbd {
    display: none !important;
  }
}
@media (min-width: 900px) {
  .app-header-search {
    min-width: 22rem !important;
    min-height: 2.625rem !important;
  }
  .app-header-kbd {
    display: inline !important;
  }
}
.app-header-user {
  display: inline-flex !important;
  align-items: center;
}
.app-header-user-meta {
  display: none;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.app-header-user-name {
  display: block !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  max-width: 9rem;
}
.app-header-user-role {
  font-size: 0.75rem;
  color: var(--color-muted);
}
@media (min-width: 900px) {
  .app-header-user-meta { display: flex; }
}

/* History: one padding system */
.history-page {
  padding: 0 !important;
  background: transparent !important;
  min-height: auto !important;
}
.history-inner.ta-page-inner {
  max-width: 72rem;
}
.history-title {
  font-weight: 600 !important;
}
.history-header {
  margin-bottom: 1.25rem;
}
.history-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.history-stat,
.history-stats .history-stat {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-theme) !important;
  border: 1px solid var(--color-border) !important;
  background: #fff !important;
}

/* Login: TailAdmin sign-in card */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #f9fafb !important;
}
.login-card {
  width: 100%;
  max-width: 26rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 2rem 1.75rem;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.login-brand-logo,
.login-brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  object-fit: contain;
}
.login-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.login-brand-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}
.login-brand-sub {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}
.login-title {
  margin: 0 0 0.35rem !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.02em;
}
.login-subtitle {
  margin: 0 0 1.25rem !important;
  font-size: 0.875rem !important;
  color: var(--color-muted) !important;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.login-submit {
  width: 100%;
  margin-top: 0.35rem;
}

/* Visit toolbar = app-header language */
.visit-mobile-btn {
  min-height: 2.75rem !important;
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
}

/* Visit sections less chunky */
.section-num {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}
.section-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
}
.section-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-theme) !important;
}

/* Modals */
.modal-actions .btn-primary,
.modal-actions .btn-secondary {
  flex: 1;
}
.modal-title {
  color: var(--color-text) !important;
  font-weight: 600 !important;
}
.dash-modal-dialog,
.modal-card,
.clinic-dialog {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Dashboard page title spacing */
.ta-page-head {
  align-items: center;
  margin-bottom: 1.5rem !important;
}
.ta-breadcrumb-sep {
  color: #d0d5dd;
}

/* Tabs not stretched ugly on mobile */
.ta-tabs {
  width: fit-content !important;
  max-width: 100%;
}

/* Stats: TailAdmin metric cards */
.ta-stat {
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 1.25rem !important;
}
.ta-stat-icon {
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 0.75rem !important;
}
.ta-stat-value {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}
.ta-stat-label {
  font-size: 0.875rem !important;
}

/* Search field + tables: match control height / TailAdmin */
.dash-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--control-height);
  padding: 0 0.875rem;
  border: 1px solid #d0d5dd;
  border-radius: var(--radius);
  background: #fff;
}
.dash-search-field:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(31 90 110 / 0.12);
}
.dash-search-input {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: calc(var(--control-height) - 2px) !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
  background: transparent !important;
  width: 100%;
}
.dash-table thead th {
  background: #f9fafb !important;
  color: var(--color-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border) !important;
}
.dash-table td {
  font-size: 0.875rem !important;
  color: var(--color-text-secondary) !important;
  vertical-align: middle;
}
.dash-table tbody tr:hover {
  background: #f9fafb !important;
}

/* Visit mobile bar */
.visit-mobile-btn--primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}
.visit-mobile-btn--secondary {
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  color: var(--color-text-secondary) !important;
}

/* Header search: prominent bar on all breakpoints */
.app-header-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

/* Catalog text actions */
.catalog-actions .btn-text-link {
  border: none !important;
  background: transparent !important;
  color: var(--color-primary) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.35rem !important;
  border-radius: 0.375rem !important;
  min-height: auto !important;
}
.catalog-actions .btn-text-link:hover {
  background: var(--color-primary-soft) !important;
}
.catalog-actions .btn-text-link[data-delete-term],
.catalog-actions .btn-text-link.text-danger,
.catalog-actions .btn-text-link.text-error {
  color: #b42318 !important;
}
.catalog-actions .btn-text-link[data-delete-term]:hover,
.catalog-actions .btn-text-link.text-danger:hover,
.catalog-actions .btn-text-link.text-error:hover {
  background: #fef3f2 !important;
}

/* Visit toolbar actions — see base .visit-toolbar-* rules */

/* History header: TailAdmin page head */
.history-header.ta-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.history-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.history-meta {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.history-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin-bottom: 1.5rem;
}
.history-stat {
  padding: 1.25rem 1.5rem !important;
}
.history-stat-value {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}
.history-stat-label {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.history-card-body {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-theme);
}

/* —— Clinical minimal redesign (app only; check-in untouched) —— */
body.app-body {
  font-family: var(--font-sans);
  font-size: 16px; /* theme base (was 15px / 0.9375rem) */
  letter-spacing: 0;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kill SaaS glow / soft cards */
.ta-card,
.ta-stat,
.history-stat,
.section-card,
.login-card,
.dash-modal-dialog,
.modal-card,
.clinic-dialog,
.history-card-body {
  box-shadow: none !important;
  border-radius: var(--radius-lg) !important;
  border-color: var(--color-border) !important;
}

.ta-btn--primary:hover,
.btn-primary:hover,
.btn-primary--solid:hover,
.history-btn--primary:hover {
  box-shadow: none !important;
}

.ta-btn,
.btn-primary,
.btn-secondary,
.btn-outline {
  min-height: var(--control-height) !important;
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
}

.field-input,
.ta-input,
.ta-select,
.dash-search-input {
  min-height: var(--control-height) !important;
  border-radius: var(--radius) !important;
  font-size: 0.875rem !important;
}
.field-input:focus,
.ta-input:focus,
.ta-select:focus,
.dash-search-field:focus-within {
  box-shadow: 0 0 0 2px var(--color-primary-soft) !important;
  border-color: var(--color-primary) !important;
}

/* Header: thin clinical bar */
.app-header {
  background: #fff !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none !important;
}
.app-header-inner {
  min-height: var(--header-height) !important;
  padding: 0.35rem 1rem !important;
}
.app-header-search {
  min-height: 2.375rem;
  border-radius: var(--radius);
  border-color: var(--color-border);
  background: #fff;
}
.app-header-avatar {
  width: 1.875rem;
  height: 1.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
}
.app-header-user-role {
  display: none; /* less chrome */
}

/* Page density */
.ta-page-inner {
  padding: 1rem 1.25rem 2rem !important;
}
@media (min-width: 768px) {
  .ta-page-inner { padding: 1.25rem 1.5rem 2.5rem !important; }
}
.ta-page-title {
  font-size: var(--text-subhead) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text) !important;
}
.ta-page-head {
  margin-bottom: 1rem !important;
}
.ta-breadcrumb {
  font-size: 0.8125rem !important;
}
.ta-card-header {
  padding: 0.875rem 1.125rem !important;
  background: #fafbfc;
}
.ta-card-title {
  font-size: var(--text-body) !important;
  font-weight: var(--weight-semibold) !important;
}
.ta-card-desc {
  font-size: var(--text-secondary) !important;
}
.ta-card-body {
  padding: 1rem 1.125rem !important;
}

/* Stats: monochrome clinical metrics — no candy icons */
.ta-stats {
  gap: 0.75rem !important;
  margin-bottom: 1rem !important;
}
.ta-stat {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  background: #fff !important;
}
.ta-stat-icon {
  display: none !important; /* less decorative */
}
.ta-stat-value {
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  font-variant-numeric: tabular-nums;
}
.ta-stat-label {
  font-size: 0.8125rem !important;
  color: var(--color-muted) !important;
}

.history-stat-value {
  color: var(--color-text) !important;
  font-weight: 600 !important;
}

/* Tabs: underline style, not pill SaaS */
.ta-tabs {
  display: flex !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 1.25rem;
}
.ta-tab {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.625rem 1rem !important;
  color: var(--color-muted) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}
.ta-tab:hover {
  color: var(--color-text) !important;
  background: transparent !important;
}
.ta-tab--active {
  color: var(--color-primary-dark) !important;
  border-bottom-color: var(--color-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tables */
.dash-table thead th {
  background: #f7f9fa !important;
  color: var(--color-muted) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dash-table td {
  font-size: 0.875rem !important;
}
.dash-row-action,
.dash-row-action--quiet,
.catalog-actions .btn-text-link {
  color: var(--color-primary) !important;
}

/* Visit: clinical focus */
.section-num {
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: var(--radius) !important;
  background: var(--color-primary) !important;
  font-size: 0.75rem !important;
}
.section-title {
  font-size: var(--text-body) !important;
  font-weight: var(--weight-semibold) !important;
}
.nav-anchor.active {
  background: var(--color-primary-soft) !important;
  border-color: transparent !important;
  color: var(--color-primary-dark) !important;
  border-radius: var(--radius) !important;
}

/* Login: calm clinical atmosphere + material card */
.login-page {
  background:
    radial-gradient(110% 70% at 50% -10%, rgb(31 90 110 / 0.1), transparent 55%),
    linear-gradient(180deg, #eef3f5 0%, var(--color-bg) 48%, #eef2f4 100%) !important;
}
.login-card {
  max-width: 22rem;
  padding: 1.75rem 1.5rem !important;
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 8px 24px rgb(16 24 40 / 0.06) !important;
}
.login-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.login-brand-mark {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius) !important;
}
.login-brand-name {
  letter-spacing: -0.01em;
  font-weight: 600;
}
.login-submit:active {
  transform: scale(0.97);
}

/* Badges: quieter */
.visit-badge,
.history-badge {
  border-radius: var(--radius) !important;
  font-weight: 500 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.02em;
}

/* Squared clinical controls — no SaaS pills in chrome */
.dash-search-field,
.app-header-search,
.app-header-user-btn,
.app-header-avatar,
.app-header-menu,
.autosave-pill,
.visit-badge,
.history-badge,
.ta-status {
  border-radius: var(--radius) !important;
}
.app-header-avatar {
  border-radius: var(--radius) !important;
}

/* —— Motion (Emil / clinical — snappy, property-specific, interruptible) —— */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-response: 220ms; /* UI ≤ 300ms */
  --motion-ease: var(--ease-out);
  --motion-press: 100ms; /* respond on pointer-down */
  --motion-scrim: rgb(16 24 40 / 0.4);
}

/* Instant press feedback — respond on pointer-down via :active */
.ta-btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn-icon:active,
.visit-mobile-btn:active,
.app-header-user-btn:active,
.app-header-search:active,
.app-header-menu-item:active,
.nav-anchor:active,
.dash-modal-card:active:not(:disabled),
.dash-row-action:active,
.history-btn--primary:active,
.history-btn--secondary:active,
.history-btn--ghost:active,
.appt-today-btn:active {
  transform: scale(0.97);
  transition: transform var(--motion-press) var(--ease-out), background var(--motion-press) var(--ease-out);
}

.ta-btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-icon,
.app-header-user-btn,
.app-header-search,
.app-header-menu-item,
.nav-anchor,
.dash-modal-card,
.history-btn--primary,
.history-btn--secondary,
.history-btn--ghost,
.dash-row-action,
.appt-today-btn {
  transition:
    transform var(--motion-press) var(--ease-out),
    background 160ms var(--ease-out),
    border-color 160ms var(--ease-out),
    color 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Focus that aids understanding without glow spam */
.ta-btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-icon:focus-visible,
.app-header-user-btn:focus-visible,
.app-header-search:focus-visible,
.app-header-menu-item:focus-visible,
.nav-anchor:focus-visible,
.field-input:focus-visible,
.ta-input:focus-visible,
.ta-select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.nav-anchor.active {
  transition: background var(--motion-response) var(--ease-out), color var(--motion-response) var(--ease-out);
}

/*
 * Sheets: scale(0.96)+opacity, same path in/out. No filter:blur (expensive;
 * clinical UI stays flat). Critically damped curve — no bounce.
 */
@keyframes apple-sheet-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes apple-sheet-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
}
@keyframes apple-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes apple-sheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dash-modal-dialog,
.modal-card,
.clinic-dialog .modal-card {
  animation: apple-sheet-in var(--motion-response) var(--ease-out) both !important;
  transform-origin: center center; /* modals stay centered */
}
.dash-modal::backdrop,
.clinic-dialog::backdrop {
  background: var(--motion-scrim) !important;
  animation: apple-scrim-in var(--motion-response) var(--ease-out) both;
}

/*
 * Command palette: NEVER animate open/close.
 * Keyboard-initiated, high frequency (⌘K) — Raycast rule: instant or it feels slow.
 */
.command-palette-panel {
  animation: none !important;
  background: #fff !important;
}
.command-palette-backdrop {
  animation: none !important;
  background: var(--motion-scrim) !important;
}
.command-palette-item {
  transition: background 120ms var(--ease-out), transform var(--motion-press) var(--ease-out);
  border-radius: var(--radius);
}
.command-palette-item:active {
  transform: scale(0.97);
}

/* Menus: occasional click — short ease-out from trigger */
.app-header-menu {
  animation: apple-sheet-in 180ms var(--ease-out) both;
  transform-origin: top right;
}

/* Scroll: soft edges, momentum */
.app-content,
.visit-main,
.custom-scrollbar {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ta-page-inner,
.visit-main {
  scroll-padding-top: calc(var(--header-height) + 0.75rem);
}

/* Tables / lists: continuous hover feedback (color only — fine on touch) */
.dash-table tbody tr,
.patient-pick,
.history-card-body {
  transition: background 150ms var(--ease-out);
}

/* Inputs: quiet focus, continuous */
.field-input,
.ta-input,
.ta-select,
.dash-search-field {
  transition:
    border-color 160ms var(--ease-out),
    box-shadow 160ms var(--ease-out),
    background 160ms var(--ease-out) !important;
}

/* Progress: continuous linear (not ease — fill should feel steady) */
.visit-nav-progress-fill,
.visit-progress-fill,
[data-progress-bar] {
  transition: width 220ms linear !important;
}

/* Reduced motion — opacity only, no movement */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-response: 0.01ms;
    --motion-press: 0.01ms;
  }
  .ta-btn:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-outline:active,
  .btn-icon:active,
  .app-header-user-btn:active,
  .app-header-search:active,
  .app-header-menu-item:active,
  .nav-anchor:active,
  .dash-modal-card:active:not(:disabled),
  .visit-mobile-btn:active,
  .safety-opt:active,
  .gender-pill:active,
  .command-palette-item:active,
  .login-submit:active,
  .appt-nav-btn:active,
  .appt-today-btn:active,
  .history-btn--primary:active,
  .history-btn--secondary:active,
  .history-btn--ghost:active,
  .dash-row-action:active {
    transform: none;
  }
  .app-header-menu,
  .dash-modal-dialog,
  .modal-card,
  .clinic-dialog .modal-card {
    animation: apple-sheet-fade 160ms ease both !important;
    transform: none !important;
  }
  .command-palette-panel,
  .command-palette-backdrop {
    animation: none !important;
  }
  .dash-modal::backdrop,
  .clinic-dialog::backdrop {
    animation: apple-sheet-fade 160ms ease both !important;
  }
  .visit-nav-progress-fill,
  .visit-progress-fill,
  [data-progress-bar] {
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  .ta-card,
  .section-card {
    border-color: #667085 !important;
  }
}

/* —— Patient potek (theme 1f — pixel-close) —— */
.ph-page {
  min-height: calc(100vh - var(--header-height));
  padding: 1.25rem 1rem 2.5rem;
  background: #e8ecf0;
}
.ph-shell {
  width: min(1280px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid #dde3e7;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(22 35 42 / 0.04);
}

.ph-hero {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #dde3e7;
}
.ph-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font: 600 17px/1 var(--font-mono);
  color: #1f5a6e;
  background: #eaf3f6;
}
.ph-hero-text { flex: 1; min-width: 0; }
.ph-hero-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.ph-name {
  margin: 0;
  font: 600 20px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: #16232a;
  text-transform: capitalize;
}
.ph-meta-inline {
  margin: 0;
  font: 400 12.5px/1.2 var(--font-mono);
  color: #8b98a0;
}
.ph-stats-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 8px 0 0;
  font: 400 12.5px/1.3 var(--font-sans);
  color: #4a6470;
}
.ph-stats-line .ph-dot {
  color: #d3dbdf;
  margin: 0 -10px;
}
.ph-next { color: #1f5a6e; font-weight: 700; }
.ph-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ph-chip {
  padding: 4px 9px;
  border-radius: 5px;
  background: #eef1f3;
  font: 500 11.5px/1.2 var(--font-sans);
  color: #4a6470;
}
.ph-chip--warn {
  background: #fdf1f0;
  border: 1px solid #ecc9c6;
  color: #8f312e;
}
.ph-chip--med {
  background: #eef4f7;
  border: 1px solid #c5d6de;
  color: #1f5a6e;
}
.ph-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
}
.ph-contact-link {
  font: 500 12.5px/1.2 var(--font-sans);
  color: #1f5a6e;
  text-decoration: none;
}
.ph-contact-link:hover { text-decoration: underline; }
.ph-contact-link--sms {
  padding: 2px 8px;
  border-radius: 4px;
  background: #eaf3f6;
  font-size: 11.5px;
  font-weight: 600;
}
.ph-contact-link--sms:hover { background: #dceaf0; text-decoration: none; }
.ph-chip--sm {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
}
.ph-chip--muted {
  background: #f4f7f8;
  border: 1px solid #e7ecef;
  color: #8b98a0;
}
.ph-actions {
  display: flex;
  gap: 8px;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ph-actions .ph-btn {
  white-space: nowrap;
}
button.ph-btn {
  font: inherit;
}
.ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid #dde3e7;
  background: #fff;
  color: #16232a;
  font: 600 12.5px/1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.ph-btn:hover { background: #f7f9fa; }
.ph-btn--primary {
  background: #1f5a6e;
  border-color: #1f5a6e;
  color: #fff;
}
.ph-btn--primary:hover { background: #184858; color: #fff; }
.ph-btn .material-symbols-outlined {
  font-size: 1.05rem;
  margin-right: 0.25rem;
}

.ph-merge-undo:not([hidden]) {
  display: block;
  padding: 0 20px 14px;
  border-bottom: 1px solid #dde3e7;
  background: #fff;
}
.ph-merge-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: #eef4f7;
  border: 1px solid #d5e3ea;
}
.ph-merge-banner-text {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}
.ph-merge-banner-text .material-symbols-outlined {
  color: #1f5a6e;
  font-size: 1.25rem;
  margin-top: 0.1rem;
}
.ph-merge-banner-text strong {
  display: block;
  font: 600 13px/1.3 var(--font-sans);
  color: #16232a;
}
.ph-merge-banner-text span {
  display: block;
  margin-top: 0.1rem;
  font: 400 12px/1.35 var(--font-sans);
  color: #4a6470;
}

.ph-layout {
  display: flex;
  background: #eef1f3;
}
.ph-main {
  flex: 1;
  min-width: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.ph-main:has(.ph-tl-more.is-open) {
  z-index: 4;
}
.ph-rail {
  width: 296px;
  flex: none;
  box-sizing: border-box;
  border-left: 1px solid #dde3e7;
  background: #f7f9fa;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: relative;
  z-index: 1;
}

.ph-chart-card,
.ph-timeline-card {
  background: #fff;
  border: 1px solid #dde3e7;
  border-radius: 9px;
}
.ph-chart-card { overflow: hidden; }
.ph-timeline-card {
  overflow: visible;
  position: relative;
}
.ph-timeline-card:has(.ph-tl-more.is-open) {
  z-index: 6;
}
.ph-chart-card { padding: 16px 18px; }
.ph-chart-head,
.ph-timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.ph-chart-head { margin-bottom: 6px; }
.ph-timeline-head {
  padding: 12px 16px;
  border-bottom: 1px solid #eef1f3;
  margin: 0;
}
.ph-chart-title {
  margin: 0;
  font: 600 13.5px/1.2 var(--font-sans);
  color: #16232a;
  letter-spacing: 0;
  text-transform: none;
}
.ph-chart-sub {
  margin: 0;
  font: 400 11.5px/1.2 var(--font-sans);
  color: #8b98a0;
}
.ph-timeline-head .ph-chart-sub { margin-left: auto; }
.ph-chart-legend {
  margin-left: auto;
  display: flex;
  gap: 12px;
  font: 400 11px/1 var(--font-sans);
  color: #64757d;
}
.ph-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ph-legend-line {
  width: 14px;
  height: 2px;
  background: #1f5a6e;
}
.ph-legend-line--rom {
  background: #b06f14;
  border-radius: 1px;
  opacity: 0.75;
}
.ph-nrs-svg { display: block; width: 100%; height: auto; }

.ph-tl-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 14px 14px;
}
.ph-tl-episode {
  border: 1px solid #e7ecef;
  border-radius: 10px;
  background: #fff;
  overflow: visible;
  position: relative;
}
.ph-tl-episode:has(.ph-tl-more.is-open) {
  z-index: 5;
}
.ph-tl-episode--branched {
  border-color: #b9d5de;
}

/* Follow-ups sit above the intake they belong to */
.ph-tl-children {
  position: relative;
  margin: 10px 12px 0 40px;
  padding: 0 0 0 16px;
  border-left: 2px solid #c2d9e1;
}
.ph-tl-children--solo {
  margin: 10px 12px 10px 24px;
}
.ph-tl-children .ph-tl-node {
  position: relative;
}
.ph-tl-children .ph-tl-node::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 20px;
  width: 12px;
  height: 2px;
  background: #c2d9e1;
}
.ph-tl-children .ph-tl-node-main {
  padding: 10px 8px 10px 0;
}
.ph-tl-children .ph-tl-node + .ph-tl-node {
  border-top: 1px solid #eef1f3;
}

.ph-tl-node-main {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
}
.ph-tl-node--intake > .ph-tl-node-main {
  background: #eaf3f6;
  border-top: 1px solid #c2d9e1;
}
.ph-tl-episode:not(.ph-tl-episode--branched) .ph-tl-node--intake > .ph-tl-node-main {
  border-top: 0;
  background: #f7fbfc;
}
.ph-tl-node--draft.ph-tl-node--intake > .ph-tl-node-main {
  background: #fff6e8;
  border-top-color: #ecd9b5;
}
.ph-tl-node--planned > .ph-tl-node-main {
  background: #f6fafb;
  border-radius: 6px;
}
.ph-tl-node-when {
  width: 52px;
  flex: none;
  text-align: right;
  padding-top: 2px;
}
.ph-tl-date {
  display: block;
  font: 600 12.5px/1.2 var(--font-mono);
  color: #4a6470;
}
.ph-tl-node--intake .ph-tl-date { color: #1f5a6e; }
.ph-tl-node--planned .ph-tl-date { color: #1f5a6e; }
.ph-tl-sub {
  display: block;
  font: 400 10.5px/1.2 var(--font-mono);
  color: #9aa8af;
  margin-top: 2px;
}
.ph-tl-node-body { flex: 1; min-width: 0; }
.ph-tl-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ph-tl-kind {
  display: inline-block;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
}
.ph-tl-kind--intake {
  background: #1f5a6e;
  color: #fff;
}
.ph-tl-kind--follow {
  background: #eef1f3;
  color: #4a6470;
}
.ph-tl-node--planned .ph-tl-kind--follow {
  background: #fff;
  color: #1f5a6e;
  border: 1px solid #b9d5de;
}
.ph-tl-title {
  font: 600 13.5px/1.25 var(--font-sans);
  color: #16232a;
  text-decoration: none;
}
a.ph-tl-title:hover { color: #1f5a6e; }
.ph-tl-node--intake .ph-tl-title {
  font-size: 14px;
  color: #1f5a6e;
}
.ph-tl-flag {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b06f14;
}
.ph-tl-flag--muted { color: #8b98a0; letter-spacing: 0.04em; }
.ph-tl-nrs {
  font: 600 11px/1 var(--font-mono);
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef1f3;
  color: #16232a;
}
.ph-tl-node--intake .ph-tl-nrs { background: #fff; }
.ph-tl-delta { font: 500 11px/1 var(--font-sans); }
.ph-tl-delta--down { color: #2f7d5f; }
.ph-tl-delta--up { color: #8f312e; }
.ph-tl-desc {
  margin: 5px 0 0;
  font: 400 12px/1.5 var(--font-sans);
  color: #64757d;
}
.ph-tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.ph-tl-cta {
  flex: none;
  align-self: center;
  margin-left: auto;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
}
.ph-tl-more {
  position: relative;
  flex: none;
  align-self: flex-start;
  margin-left: auto;
  z-index: 1;
}
.ph-tl-more.is-open {
  z-index: 30;
}
.ph-tl-cta + .ph-tl-more { margin-left: 0; }
.ph-tl-more-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8b98a0;
  cursor: pointer;
}
.ph-tl-more-btn:hover,
.ph-tl-more.is-open .ph-tl-more-btn {
  background: rgb(22 35 42 / 0.06);
  color: #16232a;
}
.ph-tl-more-btn .material-symbols-outlined { font-size: 1.25rem; }
.ph-tl-menu {
  position: absolute;
  top: calc(100% + 0.2rem);
  right: 0;
  z-index: 40;
  min-width: 10.5rem;
  padding: 0.25rem;
  border: 1px solid #dde3e7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(22 35 42 / 0.12);
}
.ph-tl-menu[hidden] { display: none !important; }
.ph-tl-menu-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #16232a;
  font: 600 12.5px/1.2 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.ph-tl-menu-item .material-symbols-outlined {
  font-size: 1.1rem;
  color: #8b98a0;
}
.ph-tl-menu-item:hover { background: #f4f7f8; }
.ph-tl-menu-item--danger { color: #8f312e; }
.ph-tl-menu-item--danger .material-symbols-outlined { color: #8f312e; }
.ph-tl-menu-item--danger:hover { background: #fdf1f0; }
.ph-tl-menu-item:disabled { opacity: 0.55; cursor: wait; }

.ph-tl-older {
  border: 1px dashed #dde3e7;
  border-radius: 9px;
  background: #fafbfc;
}
.ph-tl-older > summary {
  padding: 12px 14px;
  font: 500 12px/1.2 var(--font-sans);
  color: #4a6470;
  cursor: pointer;
  list-style: none;
}
.ph-tl-older > summary::-webkit-details-marker { display: none; }
.ph-tl-older[open] > summary { border-bottom: 1px solid #eef1f3; }
.ph-tl-older .ph-tl-list-inner,
.ph-tl-older .ph-tl-episode { margin: 10px; }
.ph-tl-older .ph-tl-episode + .ph-tl-episode { margin-top: 0; }
.ph-tl-older .ph-tl-episode:last-child { margin-bottom: 10px; }

.ph-empty { text-align: center; padding: 2rem 1.25rem; }
.ph-empty-title { margin: 0 0 0.25rem; font-weight: 600; }
.ph-empty-desc { margin: 0 0 1rem; color: #64757d; font-size: 0.85rem; }

.ph-rail-card {
  margin: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #dde3e7;
  border-radius: 9px;
}
.ph-rail-title {
  margin: 0 0 11px;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b98a0;
}
.ph-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}
.ph-rail-head .ph-rail-title { margin: 0; }
.ph-rail-action {
  flex: none;
  font: 600 11.5px/1.2 var(--font-sans);
  color: #1f5a6e;
  text-decoration: none;
}
.ph-rail-action:hover { text-decoration: underline; }
.ph-rail-empty {
  margin: 0;
  font: 400 12px/1.45 var(--font-sans);
  color: #8b98a0;
}
.ph-notes-body {
  margin: 0;
  font: 400 12.5px/1.5 var(--font-sans);
  color: #2c3e47;
  white-space: pre-wrap;
}
.ph-appt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ph-appt-row {
  margin: 0 -6px;
  border-radius: 6px;
}
.ph-appt-row--today { background: #eaf3f6; }
.ph-appt-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 6px;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
}
.ph-appt-link:hover { background: #eef1f3; }
.ph-appt-row--today .ph-appt-link:hover { background: #dceaf0; }
.ph-appt-when {
  font: 600 12.5px/1.2 var(--font-sans);
  color: #16232a;
}
.ph-appt-notes {
  font: 400 11.5px/1.3 var(--font-sans);
  color: #8b98a0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ph-rom-list { display: flex; flex-direction: column; gap: 11px; }
.ph-rom-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 4px;
  font: 400 11.5px/1.2 var(--font-sans);
  color: #4a6470;
}
.ph-rom-top .font-mono { color: #16232a; }
.ph-rom-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: #eef1f3;
  overflow: hidden;
}
.ph-rom-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: #1f5a6e;
  border-radius: 3px;
}
.ph-rom-fill--first { background: #c2d9e1; }
.ph-rom-legend {
  display: flex;
  gap: 12px;
  margin-top: 11px;
  font: 400 10.5px/1 var(--font-sans);
  color: #9aa8af;
}
.ph-rom-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ph-rom-swatch {
  width: 10px; height: 5px; border-radius: 2px; background: #1f5a6e;
}
.ph-rom-swatch--first { background: #c2d9e1; }

.ph-rhythm {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 44px;
}
.ph-rhythm-bar {
  flex: 1;
  min-width: 0;
  border-radius: 2px;
  background: #1f5a6e;
}
.ph-rhythm-bar--soft { background: #c2d9e1; }
.ph-rhythm-bar--empty { background: #dde3e7; }
.ph-rhythm-months {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font: 400 10.5px/1 var(--font-mono);
  color: #9aa8af;
}
.ph-rail-note {
  margin: 9px 0 0;
  font: 400 11.5px/1.5 var(--font-sans);
  color: #64757d;
}
.ph-rail-note b { color: #16232a; font-weight: 700; }

.ph-tech-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 400 12px/1.2 var(--font-sans);
  color: #4a6470;
}
.ph-tech-bars li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ph-tech-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-tech-track {
  width: 96px;
  height: 5px;
  border-radius: 3px;
  background: #eef1f3;
  overflow: hidden;
  flex: none;
}
.ph-tech-fill {
  display: block;
  height: 100%;
  background: #1f5a6e;
}
.ph-tech-n {
  width: 14px;
  flex: none;
  text-align: right;
  font: 500 11px/1 var(--font-mono);
  color: #8b98a0;
}
.ph-edit-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin-top: 2px;
  font: 500 12px/1.2 var(--font-sans);
  color: #4a6470;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.ph-edit-link:hover { color: #1f5a6e; }

@media (max-width: 959px) {
  .ph-layout { flex-direction: column; }
  .ph-rail {
    width: auto;
    border-left: 0;
    border-bottom: 1px solid #dde3e7;
    order: -1;
  }
}
@media (max-width: 640px) {
  .ph-page { padding: 0 0 2rem; }
  .ph-shell { border-radius: 0; border-left: 0; border-right: 0; }
  .ph-hero { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .ph-actions { width: 100%; }
  .ph-actions .ph-btn { flex: 1; }
  .ph-tl-cta { display: none; }
  .ph-main { padding: 14px; }
}

a.dash-patient--link {
  font: inherit;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
a.dash-patient--link:hover,
a.dash-patient--link:focus-visible { text-decoration: underline; }

/* Termini dashboard */
.appt-dash-chrome {
  margin-bottom: 1rem;
}
.appt-dash-chrome .ta-page-head {
  margin-bottom: 0.85rem;
}
.appt-dash-chrome .ta-stats {
  margin-bottom: 0;
}

/* Termini */
.app-header-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-md, 8px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
.app-header-nav-link:hover { color: var(--color-text); background: rgb(15 23 42 / 0.04); }
.app-header-nav-link--active { color: var(--color-text); background: rgb(15 23 42 / 0.06); }

.dash-agenda-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-status--booked {
  color: #3730a3;
  background: #eef2ff;
}
.dash-row-action--text {
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
}

.appt-page-head { align-items: flex-start; }
.appt-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
/* .appt-nav-group / .appt-nav-btn — see Termini chrome block */
.appt-view-toggle {
  display: inline-flex;
  padding: 0.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.appt-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: calc(var(--radius-lg) - 2px);
  cursor: pointer;
}
.appt-view-btn:hover { color: var(--color-text); }
.appt-view-btn.is-active {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  box-shadow: 0 0 0 1px var(--color-border);
}
.appt-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 1rem;
  align-items: start;
}
.appt-cal-card { min-width: 0; overflow: hidden; }
.appt-cal-body { padding: 0 !important; }
.appt-side {
  position: sticky;
  top: calc(var(--header-height) + 0.75rem);
  max-height: calc(100vh - var(--header-height) - 1.5rem);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.appt-side .ta-card-body {
  overflow: auto;
  flex: 1;
}
.appt-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.appt-side-head .ta-card-title {
  font-size: 0.95rem;
  line-height: 1.3;
}
.appt-form-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.4fr) minmax(7rem, 0.6fr);
  gap: 0.75rem;
  align-items: end;
}
.appt-field--when .ta-input {
  min-height: 2.75rem;
  font-variant-numeric: tabular-nums;
}

.appt-modal .nv-step:last-of-type {
  margin-bottom: 0.35rem;
}
.appt-patient-step .nv-step-title,
.appt-when-step .nv-step-title {
  margin-bottom: 0.45rem;
}

/* Compact 1. Pacient — one row, no stacked lines */
.appt-modal .appt-patient-step {
  margin-bottom: 0.75rem;
}
.appt-modal #appt-patient-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: stretch;
}
.appt-modal #appt-patient-pick .nv-search-field {
  margin: 0;
  min-height: 2.25rem;
}
.appt-modal #appt-patient-pick .dash-search-input {
  min-height: 2.25rem;
  padding-block: 0.35rem;
  font-size: 0.875rem;
}
.appt-modal #appt-patient-pick .nv-search-results {
  grid-column: 1 / -1;
  margin: 0;
  max-height: 8rem;
}
.appt-modal #appt-patient-pick .nv-patient-or {
  display: none;
}
.appt-modal #appt-patient-pick .nv-new-patient-trigger {
  width: auto;
  min-height: 2.25rem;
  height: 2.25rem;
  padding: 0 0.65rem 0 0.45rem;
  gap: 0.4rem;
  border-radius: 6px;
}
.appt-modal #appt-patient-pick .nv-new-patient-trigger-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 5px;
}
.appt-modal #appt-patient-pick .nv-new-patient-trigger-icon .material-symbols-outlined {
  font-size: 1.05rem;
}
.appt-modal #appt-patient-pick .nv-new-patient-trigger-body {
  flex-direction: row;
  align-items: center;
  gap: 0;
}
.appt-modal #appt-patient-pick .nv-new-patient-trigger-title {
  font-size: 0.8125rem;
  white-space: nowrap;
}
.appt-modal #appt-patient-pick .nv-new-patient-trigger-desc {
  display: none;
}
.appt-modal #appt-patient-pick .nv-new-patient-trigger-chevron {
  font-size: 1.1rem;
}
.appt-modal #appt-patient-pick .nv-new-patient-form {
  grid-column: 1 / -1;
  padding: 0.75rem;
}
.appt-modal #appt-patient-selected {
  min-height: 2.25rem;
  padding: 0.35rem 0.65rem;
  margin-bottom: 0.35rem;
  gap: 0.5rem;
}
.appt-modal #appt-patient-selected .nv-patient-selected-icon {
  font-size: 1.15rem;
}
.appt-modal #appt-patient-selected .nv-patient-selected-text {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.4rem;
  overflow: hidden;
}
.appt-modal #appt-patient-selected .nv-patient-selected-text strong {
  display: inline;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appt-modal #appt-patient-selected .nv-patient-selected-meta {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appt-modal #appt-patient-selected .nv-patient-selected-meta:not(:empty)::before {
  content: '·';
  margin-right: 0.4rem;
  color: var(--color-border);
}
@media (max-width: 520px) {
  .appt-modal #appt-patient-pick {
    grid-template-columns: 1fr;
  }
  .appt-modal #appt-patient-pick .nv-new-patient-trigger {
    width: 100%;
    justify-content: flex-start;
  }
}
/* ── Nov termin v2: two-column dialog ─────────────────────────── */
.appt-modal--v2 {
  max-width: 46rem;
  max-height: min(94vh, 46rem);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.appt-modal--v2 .appt-v2-head {
  margin: 0;
  padding: 1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--color-border, #e4e7ec);
}
.appt-v2-body {
  display: grid;
  grid-template-columns: minmax(15rem, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.appt-v2-col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.25rem 1.1rem;
  min-width: 0;
}
.appt-v2-col--patient {
  border-right: 1px solid var(--color-border, #e4e7ec);
  background: var(--color-rail, #f7f9fa);
}
.appt-v2-col--patient .nv-step,
.appt-v2-col--when .nv-step {
  margin-bottom: 0;
}
.appt-v2-col--patient .appt-notes-field {
  margin-top: auto;
}
.appt-v2-step-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted, #64757d);
  margin: 0 0 0.6rem;
}
.appt-v2-step-icon {
  font-size: 1rem;
  color: var(--color-primary, #1f5a6e);
}
.appt-v2-group {
  display: grid;
  gap: 0.35rem;
}
.appt-v2-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted-2, #8b98a0);
}
.appt-v2-col--when .appt-when-step {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 0;
}
.appt-v2-col--when .appt-v2-date {
  grid-template-columns: 2.25rem 1fr 2.25rem;
}
.appt-v2-col--when .appt-date-nav,
.appt-v2-col--when .appt-date-display {
  height: 2.4rem;
  min-height: 2.4rem;
}
.appt-v2-col--when .appt-date-nav {
  width: 2.25rem;
}
.appt-v2-col--when .appt-date-dow {
  font-size: 0.7rem;
}
.appt-v2-col--when .appt-date-main {
  font-size: 0.875rem;
}
.appt-v2-slots-hint {
  margin: 0;
  font-size: 0.7rem;
  color: var(--color-muted-2, #8b98a0);
  line-height: 1.4;
}
.appt-v2-hint-swatch {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  vertical-align: -0.12rem;
  border-radius: 3px;
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 3px,
    #f0e9dc 3px,
    #f0e9dc 6px
  );
  box-shadow: inset 0 0 0 1px rgb(196 163 90 / 0.4);
}
/* Patient column: stack search above "Nov pacient" (narrow column) */
.appt-modal--v2 #appt-patient-pick {
  grid-template-columns: 1fr;
}
.appt-modal--v2 #appt-patient-pick .nv-new-patient-trigger {
  width: 100%;
  justify-content: flex-start;
}
.appt-modal--v2 #appt-patient-pick .nv-new-patient-trigger-chevron {
  margin-left: auto;
}
.appt-modal--v2 #appt-patient-pick .nv-search-results {
  max-height: 12rem;
}
/* Selected patient chip: two lines, no mid-name truncation */
.appt-modal--v2 #appt-patient-selected {
  align-items: flex-start;
  padding: 0.55rem 0.65rem;
}
.appt-modal--v2 #appt-patient-selected .nv-patient-selected-text {
  display: block;
}
.appt-modal--v2 #appt-patient-selected .nv-patient-selected-text strong {
  display: block;
  white-space: normal;
  font-size: 0.875rem;
  line-height: 1.3;
}
.appt-modal--v2 #appt-patient-selected .nv-patient-selected-meta {
  display: block;
  white-space: normal;
  font-size: 0.75rem;
}
.appt-modal--v2 #appt-patient-selected .nv-patient-selected-meta:not(:empty)::before {
  content: none;
}
@media (max-width: 700px) {
  .appt-modal--v2 {
    max-height: 96vh;
  }
  .appt-v2-body {
    grid-template-columns: 1fr;
  }
  .appt-v2-col--patient {
    border-right: 0;
    border-bottom: 1px solid var(--color-border, #e4e7ec);
  }
}
.appt-range-summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--color-text-secondary, #334049);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.appt-summary-date {
  font-weight: 600;
}
.appt-summary-time {
  font-weight: 700;
  color: var(--color-primary-dark, #164555);
}
.appt-summary-dur {
  color: var(--color-muted, #64757d);
}
.appt-summary-sep {
  color: var(--color-border, #dde3e7);
}
.appt-summary-conflict {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-warn-soft, #fdf6ea);
  color: var(--color-warn, #b06f14);
  font-size: 0.7rem;
  font-weight: 700;
}
.appt-summary-conflict .material-symbols-outlined {
  font-size: 0.9rem;
}
.appt-duration-pill--custom[hidden] {
  display: none !important;
}

/* Date picker */
.appt-date-picker {
  display: grid;
  grid-template-columns: 1.75rem 1fr 1.75rem;
  gap: 0.2rem;
  align-items: stretch;
}
.appt-date-nav {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border, #e4e7ec);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
  width: 1.75rem;
  min-height: 2rem;
  height: 2rem;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.appt-date-nav:hover {
  background: var(--color-primary-soft, #e8f1f4);
  border-color: rgb(31 90 110 / 0.35);
  color: var(--color-primary, #1f5a6e);
}
.appt-date-nav .material-symbols-outlined {
  font-size: 1.05rem;
}
.appt-date-display {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.3rem;
  min-width: 0;
  height: 2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--color-border, #e4e7ec);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.appt-date-display:hover,
.appt-date-display:focus-within {
  border-color: var(--color-primary, #1f5a6e);
  box-shadow: 0 0 0 2px rgb(31 90 110 / 0.1);
}
.appt-date-dow {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--color-muted);
  line-height: 1;
}
.appt-date-main {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.appt-date-native,
.appt-date-display .flatpickr-input,
.appt-date-display input[type="text"],
.appt-date-display input[type="date"] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  cursor: pointer;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1px !important;
  color: transparent !important;
}
/* Time: Od/Do toggle + one grid */
.appt-time-pick {
  display: grid;
  gap: 0.4rem;
}
.appt-time-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: var(--radius-md, 8px);
  background: rgb(15 23 42 / 0.04);
}
.appt-time-mode-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  border: 0;
  border-radius: calc(var(--radius-md, 8px) - 2px);
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.appt-time-mode-btn span {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.appt-time-mode-btn.is-active {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 0 0 1px var(--color-border);
}
.appt-time-mode-btn.is-active span {
  color: var(--color-primary);
}
.appt-time-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
  max-height: 13.5rem;
  overflow: auto;
  padding: 0.1rem;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.appt-time-slot {
  appearance: none;
  border: 1px solid var(--color-border, #e4e7ec);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-height: 1.85rem;
  padding: 0.2rem 0.15rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.appt-time-slot:hover {
  border-color: rgb(31 90 110 / 0.35);
  background: #fff;
}
.appt-time-slot.is-selected {
  background: var(--color-primary, #1f5a6e);
  border-color: var(--color-primary, #1f5a6e);
  color: #fff;
  font-weight: 700;
}
.appt-time-slot.is-busy:not(.is-selected) {
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 4px,
    #f3f5f7 4px,
    #f3f5f7 8px
  );
  color: var(--color-text-secondary);
  box-shadow: inset 0 0 0 1px rgb(196 163 90 / 0.35);
}
.appt-time-slot.is-inrange:not(.is-busy) {
  background: var(--color-primary-soft, #e8f1f4);
  border-color: rgb(31 90 110 / 0.3);
  color: var(--color-primary-dark, #164555);
}
.appt-time-slot.is-inrange.is-busy {
  box-shadow: inset 0 0 0 1px var(--color-warn, #b06f14);
}
.appt-duration-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
}
.appt-duration-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--color-border, #e4e7ec);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.appt-duration-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.appt-duration-pill:has(input:checked) {
  background: var(--color-primary-soft, #e8f1f4);
  border-color: var(--color-primary, #1f5a6e);
  color: var(--color-primary, #1f5a6e);
  font-weight: 700;
}
.appt-duration-pill:hover {
  border-color: rgb(31 90 110 / 0.35);
}
.appt-notes-field {
  margin-bottom: 0.15rem;
}
.appt-notes-field .field-input {
  min-height: 2.35rem;
}
.appt-modal-footer {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border, #e4e7ec);
  background: var(--color-surface, #fff);
}
.appt-v2-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.appt-modal-footer .ta-btn--primary {
  min-width: 8.5rem;
}
@media (max-width: 520px) {
  .appt-time-slots {
    max-height: 10rem;
  }
  .appt-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .appt-v2-actions {
    margin-left: 0;
  }
  .appt-v2-actions .ta-btn {
    flex: 1 1 auto;
  }
}
.appt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.appt-list-empty {
  padding: 1.25rem 0.25rem;
  color: var(--color-muted);
  font-size: 0.9375rem;
}
.appt-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  vertical-align: middle;
}
.appt-badge--done {
  background: #ecfdf3;
  color: #027a48;
}
.appt-patient-results {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 1px solid var(--color-border, #e4e7ec);
  border-radius: 8px;
  max-height: 10rem;
  overflow: auto;
}
.appt-patient-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.appt-patient-results button:hover { background: rgb(15 23 42 / 0.04); }

/* Termini — Google-style time grid */
.appt-tg {
  display: flex;
  flex-direction: column;
  min-height: 28rem;
  max-height: calc(100vh - var(--header-height) - 8.5rem);
}
.appt-tg-head {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 3;
}
.appt-tg-gutter-spacer { border-right: 1px solid var(--color-border); }
.appt-tg-days {
  display: grid;
  grid-template-columns: repeat(var(--appt-cols, 7), minmax(0, 1fr));
}
.appt-tg--day .appt-tg-days { grid-template-columns: 1fr; }
.appt-tg-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.55rem 0.25rem 0.45rem;
  border: 0;
  border-right: 1px solid var(--color-border);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.appt-tg-dayhead:last-child { border-right: 0; }
.appt-tg-dayhead:hover { background: color-mix(in srgb, var(--color-primary) 4%, #fff); }
.appt-tg-dow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.appt-tg-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.appt-tg-dayhead.is-today .appt-tg-dow { color: var(--color-primary); }
.appt-tg-dayhead.is-today .appt-tg-date {
  background: var(--color-primary);
  color: #fff;
}
.appt-tg-dayhead.is-selected:not(.is-today) .appt-tg-date {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.appt-tg-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.appt-tg-body {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  position: relative;
}
.appt-tg-gutter {
  position: relative;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}
.appt-tg-hour-label {
  position: absolute;
  left: 0;
  right: 0.35rem;
  transform: translateY(-50%);
  text-align: right;
  font: 500 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: #9aa8af;
  pointer-events: none;
}
.appt-tg-hour-label:first-child { transform: translateY(0.15rem); }
.appt-tg-cols {
  display: grid;
  grid-template-columns: repeat(var(--appt-cols, 7), minmax(0, 1fr));
  min-width: 0;
}
.appt-tg--day .appt-tg-cols { grid-template-columns: 1fr; }
.appt-tg-col {
  position: relative;
  border-right: 1px solid var(--color-border);
  background-color: var(--color-surface);
  cursor: crosshair;
}
.appt-tg-col:last-child { border-right: 0; }
.appt-tg-col.is-today {
  background-color: color-mix(in srgb, var(--color-primary) 3.5%, #fff);
}
.appt-tg-col.is-selected:not(.is-today) {
  background-color: color-mix(in srgb, var(--color-primary) 2%, #fff);
}
.appt-tg-hline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
  pointer-events: none;
  z-index: 0;
}
.appt-tg-hline--half {
  border-top-style: dotted;
  border-top-color: color-mix(in srgb, var(--color-border) 55%, transparent);
}
.appt-tg-slots {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.appt-tg.is-creating,
.appt-cal-body.is-creating,
.is-creating .appt-tg-col {
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.appt-drag-ghost {
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 22%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: var(--color-primary-dark);
  pointer-events: none;
  overflow: hidden;
}
.appt-drag-ghost-label {
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.appt-event {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  margin: 0;
  padding: 0.2rem 0.35rem 0.2rem 0.45rem;
  border: 0;
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-primary) 16%, #fff);
  color: var(--color-primary-dark);
  font: inherit;
  text-align: left;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.appt-event:hover {
  filter: brightness(0.97);
  z-index: 4;
}
.appt-event.is-dragging {
  cursor: grabbing;
  z-index: 12;
  opacity: 0.95;
  filter: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent),
    0 8px 20px rgb(15 23 42 / 0.18);
}
.is-moving,
.is-moving .appt-tg-col {
  cursor: grabbing;
  touch-action: none;
  user-select: none;
}
.appt-event:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  z-index: 5;
}
.appt-event--done {
  border-left-color: #027a48;
  background: #ecfdf3;
  color: #027a48;
  box-shadow: inset 0 0 0 1px rgb(2 122 72 / 0.15);
}
.appt-event--web {
  border-left-color: #5b4b8a;
  background: #f3eefc;
  color: #3f2f6a;
}
.appt-event-time {
  font: var(--weight-semibold) var(--text-caption)/var(--leading-tight) var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.appt-event-name {
  font-size: var(--text-secondary);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.appt-now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 6;
  height: 0;
  border-top: 2px solid #d92d20;
  pointer-events: none;
}

/* Month grid */
.appt-m {
  display: flex;
  flex-direction: column;
  min-height: 28rem;
  max-height: calc(100vh - var(--header-height) - 8.5rem);
  background: var(--color-surface);
}
.appt-m-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 55%, #fff);
}
.appt-m-dow {
  padding: 0.55rem 0.35rem;
  text-align: center;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.appt-m-dow--weekend {
  color: color-mix(in srgb, var(--color-muted) 75%, var(--color-primary));
}
.appt-m-body {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(var(--appt-m-rows, 5), minmax(5.5rem, 1fr));
  min-height: 0;
  overflow: auto;
}
.appt-m-cell {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  min-height: 0;
  margin: 0;
  padding: 0.4rem 0.35rem 0.35rem;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--color-border) 40%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, #fff);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 120ms ease;
}
.appt-m-cell:focus { outline: none; }
.appt-m-cell:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  outline-offset: -2px;
}
.appt-m-cell:nth-child(7n) { border-right: 0; }
.appt-m-cell.is-weekend {
  background: color-mix(in srgb, var(--color-bg) 70%, #fff);
}
.appt-m-cell:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, #fff);
}
.appt-m-cell--muted {
  color: color-mix(in srgb, var(--color-muted) 65%, #fff);
  background: color-mix(in srgb, var(--color-bg) 88%, #fff);
}
.appt-m-cell--muted.is-weekend {
  background: color-mix(in srgb, var(--color-bg) 92%, #fff);
}
.appt-m-cell--muted .appt-m-num { font-weight: 500; }
.appt-m-cell--muted .appt-m-chips { opacity: 0.55; }
.appt-m-cell.is-selected {
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.appt-m-cell.is-selected.is-weekend {
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
}
.appt-m-cell.is-today:not(.is-selected) {
  background: color-mix(in srgb, var(--color-primary) 3.5%, #fff);
}
.appt-m-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-height: 1.65rem;
}
.appt-m-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.appt-m-cell.is-today .appt-m-num {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgb(31 90 110 / 0.25);
}
.appt-m-cell.is-selected:not(.is-today) .appt-m-num {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.appt-m-count {
  display: none;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15rem;
  text-align: center;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
.appt-m-cell.is-today .appt-m-count {
  background: color-mix(in srgb, var(--color-primary) 18%, #fff);
  color: var(--color-primary-dark);
}
.appt-m-chips {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.appt-m-chip {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.15rem 0.35rem 0.15rem 0.3rem;
  border-radius: 4px;
  border-left: 2.5px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 88%, #fff);
  color: var(--color-primary-dark);
  text-align: left;
  line-height: 1.25;
  transition: filter 100ms ease;
}
.appt-m-chip:hover {
  filter: brightness(0.97);
}
.appt-m-chip-time {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.appt-m-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 500;
}
.appt-m-chip--done {
  border-left-color: #027a48;
  background: #ecfdf3;
  color: #027a48;
}
.appt-m-chip--web {
  border-left-color: #5b4b8a;
  background: #f3eefc;
  color: #3f2f6a;
}
.appt-m-more {
  font-size: 0.65rem;
  color: var(--color-muted);
  font-weight: 600;
  padding: 0.05rem 0.2rem;
  letter-spacing: 0.01em;
}

.appt-event.is-focused {
  z-index: 5;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 40%, transparent),
    0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* Side detail / event modal */
.appt-side-list-view,
.appt-side-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.appt-side-detail.hidden,
.appt-side-detail[hidden],
.appt-side-list-view.hidden {
  display: none !important;
}
.appt-side-detail-body {
  flex: 1;
  overflow: auto;
}
.appt-detail-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: transparent;
  color: #1f5a6e;
  font: 600 12.5px/1 var(--font-sans);
  padding: 0.15rem 0;
  cursor: pointer;
}
.appt-detail-back-chevron {
  font: 500 14px/1 var(--font-sans);
  color: #64757d;
}
.appt-detail-back:hover { color: #16232a; }
.appt-detail-back:hover .appt-detail-back-chevron { color: #16232a; }

.appt-event-dialog { max-width: 24rem; }
.appt-event-modal-head {
  justify-content: flex-end;
  border-bottom: 0;
  padding-bottom: 0;
}
.appt-event-body { padding: 0 1.25rem 1.35rem; }

.appt-detail {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}
.appt-detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.appt-detail-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: 1.15rem;
  font-weight: 700;
}
.appt-detail-hero-text { min-width: 0; flex: 1 1 auto; }
.appt-detail-more {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}
.appt-detail-more-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #dde3e7;
  border-radius: 7px;
  background: #fff;
  color: #64757d;
  font: 600 16px/1 var(--font-sans);
  cursor: pointer;
}
.appt-detail-more-btn:hover,
.appt-detail-more.is-open .appt-detail-more-btn {
  border-color: #1f5a6e;
  color: #16232a;
  background: #fff;
}
.appt-detail-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 8;
  min-width: 10.5rem;
  padding: 0.25rem;
  border: 1px solid #dde3e7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(22 35 42 / 0.1);
}
.appt-detail-menu[hidden] { display: none !important; }
.appt-detail-menu-item {
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #16232a;
  font: 600 12.5px/1.2 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.appt-detail-menu-item:hover { background: #f7f9fa; }
.appt-detail-menu-item--danger { color: #b42318; }
.appt-detail-menu-item--danger:hover { background: #fef3f2; }
.appt-detail-name {
  margin: 0 0 0.35rem;
  font: 600 17px/1.25 var(--font-sans);
  letter-spacing: -0.02em;
  color: #16232a;
}
.appt-detail-name-link {
  color: inherit;
  text-decoration: none;
}
.appt-detail-name-link:hover,
.appt-detail-name-link:focus-visible {
  color: #1f5a6e;
  text-decoration: underline;
  text-decoration-color: rgb(31 90 110 / 0.35);
  text-underline-offset: 2px;
  outline: none;
}
.appt-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.02em;
  color: #64757d;
}
.appt-detail-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.appt-detail-status--booked { color: #1f5a6e; }
.appt-detail-status--done { color: #2f7d4a; }
.appt-detail-status--web { color: #7a5ea8; }

.appt-detail-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dde3e7;
}
.appt-detail-meta > div {
  display: grid;
  grid-template-columns: 4.75rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.appt-detail-meta dt {
  margin: 0;
  font: 500 11px/1.2 var(--font-sans);
  color: #9aa8af;
}
.appt-detail-meta dd {
  margin: 0;
  font: 600 13px/1.25 var(--font-sans);
  color: #16232a;
}
.appt-detail-range {
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  color: #1f5a6e !important;
}

.appt-detail-notes {
  padding: 11px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px dashed #cdd6db;
}
.appt-detail-notes-label {
  margin: 0 0 0.25rem;
  font: 600 10px/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9aa8af;
}
.appt-detail-notes-text {
  margin: 0;
  font: 400 12.5px/1.45 var(--font-sans);
  color: #4a6470;
}

.appt-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  margin-top: 0.15rem;
}
.appt-detail-action {
  appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #dde3e7;
  border-radius: 8px;
  background: #fff;
  color: #16232a;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.appt-detail-action:hover {
  border-color: #1f5a6e;
  background: #f7f9fa;
}
.appt-detail-action-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.appt-detail-action-text strong {
  font: 600 13px/1.2 var(--font-sans);
}
.appt-detail-action-text span {
  font: 400 11.5px/1.3 var(--font-sans);
  color: #64757d;
}
.appt-detail-action--primary {
  background: #1f5a6e;
  border-color: #1f5a6e;
  color: #fff;
}
.appt-detail-action--primary:hover {
  background: #174859;
  border-color: #174859;
}
.appt-detail-action--primary .appt-detail-action-text span { color: rgb(255 255 255 / 0.78); }

.appt-item {
  padding: 0;
  border-bottom: 1px solid var(--color-border, #e4e7ec);
}
.appt-item:last-child { border-bottom: 0; }
.appt-item-btn {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.65rem;
  row-gap: 0.1rem;
  width: 100%;
  padding: 0.75rem 0.15rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md, 8px);
  transition: background 120ms ease;
}
.appt-item-btn:hover { background: rgb(15 23 42 / 0.03); }
.appt-item.is-active .appt-item-btn {
  background: var(--color-primary-soft);
}
.appt-item-time {
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--color-primary-dark);
  min-width: 5.5rem;
}
.appt-item-name {
  font-size: 0.9375rem;
  font-weight: 600;
}
.appt-item-status {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-muted);
}
.appt-item-status.appt-detail-status--done { color: #027a48; }
.appt-item-status.appt-detail-status--web { color: #5b4b8a; }
.appt-item-status.appt-detail-status--booked { color: var(--color-primary); }

@media (max-width: 960px) {
  .appt-shell { grid-template-columns: 1fr; }
  .appt-side {
    position: static;
    max-height: none;
  }
  .appt-tg { max-height: 70vh; }
  .appt-m { max-height: 70vh; }
  .appt-m-body {
    grid-template-rows: repeat(var(--appt-m-rows, 5), minmax(4.75rem, 1fr));
  }
}
@media (max-width: 720px) {
  .appt-m {
    min-height: 22rem;
  }
  .appt-m-body {
    grid-template-rows: repeat(var(--appt-m-rows, 5), minmax(3.25rem, 1fr));
  }
  .appt-m-cell {
    padding: 0.3rem 0.2rem;
    align-items: center;
  }
  .appt-m-cell-top {
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    width: 100%;
  }
  .appt-m-chips { display: none; }
  .appt-m-cell.has-appts .appt-m-count { display: inline-block; }
  .appt-m-num { width: 1.85rem; height: 1.85rem; font-size: 0.875rem; }
  .appt-tg-date { width: 1.75rem; height: 1.75rem; font-size: 0.95rem; }
  .appt-event-name { -webkit-line-clamp: 2; }
}
@media (min-width: 1100px) {
  .appt-m-chip-time { font-size: 0.68rem; }
  .appt-m-chip-name { font-size: 0.72rem; }
}

/* ==========================================================================
   App header — quiet light chrome (clinical content leads)
   Wins over materials / shell overrides above.
   ========================================================================== */

.app-header {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: none !important;
  color: var(--color-text);
}
.app-header::after {
  display: none !important;
}
.app-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1rem !important;
  min-height: 3.25rem !important;
  height: 3.25rem;
  padding: 0 1.25rem !important;
}
.app-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex: 0 0 auto !important;
  min-width: 0;
}
.app-header-brand {
  color: var(--color-text) !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  gap: 0.5rem !important;
  min-width: auto !important;
}
.app-header-brand:hover {
  color: var(--color-primary-dark) !important;
  opacity: 1;
}
.app-header-clinic {
  display: block !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--color-text) !important;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip;
  max-width: none !important;
  width: auto !important;
}
.app-header-logo,
.app-header-logo-fallback {
  width: 1.5rem !important;
  height: 1.5rem !important;
  border-radius: var(--radius) !important;
  flex-shrink: 0;
}
.app-header-logo-fallback {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  font: 600 0.5625rem/1 var(--font-sans) !important;
  letter-spacing: 0.02em;
}
.app-header-logo-fallback .material-symbols-outlined {
  font-size: 1rem !important;
  color: var(--color-primary) !important;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.app-header-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: 0;
  flex: 0 0 auto;
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-border);
}
.app-header-nav-link {
  padding: 0.35rem 0.65rem !important;
  border-radius: var(--radius) !important;
  font-size: var(--text-secondary) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-muted) !important;
  text-decoration: none;
  background: transparent !important;
}
.app-header-nav-link:hover {
  color: var(--color-text) !important;
  background: var(--color-primary-soft) !important;
}
.app-header-nav-link--active {
  color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  font-weight: 600 !important;
}
.app-header-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex: 0 0 17.5rem !important;
  width: 17.5rem !important;
  max-width: 17.5rem !important;
  min-width: 0 !important;
  min-height: 2rem !important;
  height: 2rem !important;
  margin: 0 0 0 auto !important;
  padding: 0 0.65rem !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-rail) !important;
  color: var(--color-muted) !important;
  font-size: var(--text-secondary) !important;
  box-shadow: none !important;
}
.app-header-search:hover {
  background: #fff !important;
  border-color: #c5d0d6 !important;
  color: var(--color-text-secondary) !important;
}
.app-header-search .material-symbols-outlined {
  font-size: 1.0625rem !important;
  color: var(--color-muted) !important;
}
.app-header-search-label {
  color: var(--color-muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
}
.app-header-kbd {
  display: inline !important;
  border: 1px solid var(--color-border) !important;
  background: #fff !important;
  color: var(--color-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  padding: 0.05rem 0.3rem !important;
  border-radius: 0.25rem !important;
}
.app-header-actions {
  flex: 0 0 auto !important;
  margin-left: 0.25rem;
}
.app-header-avatar {
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: var(--radius) !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
}
.app-header-user-btn {
  color: var(--color-text) !important;
  padding: 0.15rem !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius) !important;
  gap: 0 !important;
  background: transparent !important;
}
.app-header-user-btn:hover,
.app-header-user.is-open .app-header-user-btn {
  background: var(--color-primary-soft) !important;
  border-color: transparent !important;
}
.app-header-user-meta,
.app-header-user-caret {
  display: none !important;
}
.app-header-menu {
  background: #fff !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--radius-lg) !important;
}
@media (max-width: 899px) {
  .app-header-search {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 17.5rem !important;
    min-width: 0 !important;
  }
  .app-header-kbd { display: none !important; }
}
@media (max-width: 719px) {
  .app-header-clinic { display: none !important; }
  .app-header-nav {
    padding-left: 0.5rem;
    border-left: 1px solid var(--color-border);
  }
  .app-header-nav-link {
    padding: 0.3rem 0.45rem !important;
    font-size: 0.8125rem !important;
  }
  .app-header-inner { gap: 0.625rem !important; padding: 0 0.75rem !important; }
}
@media (max-width: 520px) {
  .app-header-search-label { display: none !important; }
  .app-header-search {
    flex: 0 0 2rem !important;
    width: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
    padding: 0 !important;
    justify-content: center;
  }
}

/* —— Termini chrome —— */
.appt-dash-chrome { margin-bottom: 0.75rem; }
.appt-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  min-height: 3.125rem;
  padding: 0.55rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.appt-chrome-left,
.appt-chrome-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  min-width: 0;
}
.appt-chrome-right { margin-left: auto; }
.appt-chrome-title {
  margin: 0;
  font-size: var(--text-subhead);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.appt-nav-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid #dde3e7;
  border-radius: 8px;
  background: #f4f7f8;
}
.appt-nav-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #4a6470;
  line-height: 1;
  cursor: pointer;
  transition:
    background 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    color 120ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform var(--motion-press, 100ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  -webkit-tap-highlight-color: transparent;
}
.appt-nav-btn .material-symbols-outlined {
  font-size: 1.25rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}
@media (hover: hover) and (pointer: fine) {
  .appt-nav-btn:hover {
    background: #fff;
    color: #1f5a6e;
    box-shadow: 0 1px 2px rgb(22 35 42 / 0.06);
  }
}
.appt-nav-btn:active {
  transform: scale(0.97);
  background: #eaf3f6;
  color: #1f5a6e;
  box-shadow: none;
}
.appt-nav-btn:focus-visible {
  outline: 2px solid #1f5a6e;
  outline-offset: 1px;
}
.appt-today-btn {
  appearance: none;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-primary);
  font: var(--weight-medium) var(--text-secondary)/var(--leading-tight) var(--font-sans);
  cursor: pointer;
}
.appt-today-btn:hover { background: var(--color-primary-soft); }
.appt-view-toggle {
  background: var(--color-bg) !important;
  border: 0 !important;
  border-radius: 7px !important;
  padding: 3px !important;
}
.appt-view-btn {
  padding: 5px 15px !important;
  border-radius: 5px !important;
  font-size: var(--text-secondary) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-muted) !important;
  box-shadow: none !important;
}
.appt-view-btn.is-active {
  background: #fff !important;
  color: var(--color-ink) !important;
  font-weight: var(--weight-semibold) !important;
  box-shadow: var(--shadow-sm) !important;
}
.appt-walkin-btn { font-size: var(--text-secondary); }
.appt-chrome .ta-btn--primary,
.appt-chrome #btn-new-appt {
  font-size: var(--text-secondary) !important;
  font-weight: var(--weight-semibold) !important;
}
.appt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.appt-stat {
  padding: 0.65rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.appt-stat-value {
  margin: 0;
  font: var(--weight-semibold) var(--text-subhead)/var(--leading-tight) var(--font-mono);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.appt-stat-label {
  margin: 0.2rem 0 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.appt-shell {
  grid-template-columns: minmax(0, 1fr) 352px;
  gap: 0;
}
.appt-side {
  background: #f7f9fa !important;
  border: 0 !important;
  border-left: 1px solid #dde3e7 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-height: calc(100vh - var(--header-height));
  top: var(--header-height);
}
.appt-event {
  border-radius: 7px !important;
  border: 1px solid #d5e3ea !important;
  border-left: 3px solid var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  box-shadow: none !important;
}
.appt-event--done {
  background: var(--color-success-soft) !important;
  border-color: #cfe0d7 !important;
  border-left-color: var(--color-success) !important;
}
.appt-event--web {
  background: var(--color-warn-soft) !important;
  border-color: #f0e0c4 !important;
  border-left-color: var(--color-warn) !important;
}
.appt-event-time {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 960px) {
  .appt-shell { grid-template-columns: 1fr; }
  .appt-side {
    position: static;
    max-height: none;
  }
  .appt-chrome-right { width: 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .appt-chrome-title { font-size: 0.85rem; }
}

/* —— Agenda (theme 1c) —— */
#dash-page .ta-page-inner--wide {
  max-width: 1280px;
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.agenda-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 0;
}
/* Greeting is a kicker, not the page title — the date identifies what you are looking at. */
.agenda-greet-kicker {
  margin: 0 0 2px;
  font: 500 12.5px/1.2 var(--font-sans);
  color: #6b7f89;
}
.agenda-greet {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #16232a;
}
.agenda-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #64757d;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
}
.agenda-now-sep {
  color: #b3bec4;
}
.agenda-now-time {
  color: #1f5a6e;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.agenda-day-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.agenda-day-nav .appt-nav-btn {
  text-decoration: none;
}
.agenda-day-nav .appt-today-btn {
  text-decoration: none;
}
.agenda-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.agenda-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 0;
}
/* Row with layout/rail from tablet up (see 768–1099 block). */
@media (min-width: 768px) {
  .agenda-hero {
    flex-direction: row;
    align-items: stretch;
  }
}

.agenda-next {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 26px;
  padding: 20px 22px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  color: var(--color-text);
  box-shadow: none;
}
.agenda-next--overdue {
  border-left-color: var(--color-warn);
  background: var(--color-warn-soft);
}
.agenda-next--done {
  border-left-color: var(--color-success);
  background: var(--color-success-soft);
}
.agenda-next-timeblock { flex: none; }
.agenda-next-kicker {
  margin: 0 0 6px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.agenda-next--overdue .agenda-next-kicker { color: var(--color-warn); }
.agenda-next--done .agenda-next-kicker { color: var(--color-success); }
.agenda-next-time {
  margin: 0;
  font: 600 40px/1 var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.agenda-next-rel {
  margin: 4px 0 0;
  font: 500 12.5px/1.3 var(--font-sans);
  color: var(--color-muted);
}
.agenda-next-divider {
  width: 1px;
  align-self: stretch;
  min-height: 4rem;
  background: var(--color-border);
}
@media (max-width: 640px) {
  .agenda-next-divider { display: none; }
}
.agenda-next-body { flex: 1 1 12rem; min-width: 0; }
.agenda-next-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  margin-bottom: 6px;
}
.agenda-next-name {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.agenda-next-patient-meta {
  font: 400 12px/1.2 var(--font-mono);
  color: var(--color-muted);
}
.agenda-next-meta {
  margin: 0;
  max-width: 28rem;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--color-text-secondary);
}
.agenda-next-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  max-width: 420px;
  background: #fff;
  border: 1px solid #f0e0c4;
  border-radius: 7px;
}
.agenda-next-alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-warn);
  flex: none;
}
.agenda-next-alert-text {
  flex: 1;
  font: 500 12px/1.3 var(--font-sans);
  color: #8a5a10;
}
.agenda-next-alert-link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: 600 11px/1 var(--font-sans);
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.agenda-next-alert-link:hover { color: var(--color-primary-dark); }
.agenda-next-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  min-width: 10.5rem;
}
@media (max-width: 720px) {
  .agenda-next-actions {
    flex-direction: row;
    width: 100%;
    min-width: 0;
  }
  .agenda-next-cta { flex: 1; }
}

.agenda-today-card {
  width: 100%;
  flex: none;
  box-sizing: border-box;
  padding: 16px 18px;
}
@media (min-width: 768px) {
  .agenda-today-card {
    width: clamp(14rem, 28vw, 18rem); /* match tablet .agenda-rail */
    margin-left: auto; /* alone: align over rail column */
  }
}
@media (min-width: 1100px) {
  .agenda-today-card { width: 320px; } /* match desktop .agenda-rail */
}

/* No focus item for the day: the stats card is alone, so it becomes a full-width
   strip instead of leaving the hero row's left half empty. */
@media (min-width: 768px) {
  .agenda-hero--stats-only .agenda-today-card {
    width: 100%;
    margin-left: 0;
  }
  .agenda-hero--stats-only .agenda-today-label {
    margin-bottom: 0;
  }
  .agenda-hero--stats-only .agenda-today-card {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .agenda-hero--stats-only .agenda-today-stats {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
  }
  .agenda-hero--stats-only .agenda-today-stats > div {
    justify-content: flex-start;
    gap: 0.5rem;
  }
  .agenda-hero--stats-only .agenda-today-sep {
    width: 1px;
    height: 20px;
    margin: 0;
  }
}
.agenda-today-label {
  margin: 0 0 12px;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b98a0;
}
.agenda-today-stats {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.agenda-today-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.agenda-today-stats dt {
  margin: 0;
  font: 400 12.5px/1.2 var(--font-sans);
  color: #4a6470;
}
.agenda-today-stats dd {
  margin: 0;
  font: 600 15px/1.2 var(--font-mono);
  color: #16232a;
  font-variant-numeric: tabular-nums;
}
.agenda-today-val--ok { color: #2f7d5f !important; }
.agenda-today-val--open { color: #1f5a6e !important; }
.agenda-today-sep {
  height: 1px;
  background: #e7ecef;
  margin: 1px 0;
}

/* Single column since the rail was removed — Potek dneva owns the full width. */
.agenda-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}

.agenda-day-card {
  flex: 1;
  min-width: 0;
  width: 100%;
  overflow: visible; /* .ta-card clips; the ⋯ menu must escape */
  position: relative;
}
.agenda-day-card:has(.clinic-more.is-open) {
  z-index: 6;
}
.agenda-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 13px 16px;
  border-bottom: 1px solid #e7ecef;
}
.agenda-day-title {
  margin: 0;
  font: 600 13px/1.2 var(--font-sans);
  color: #16232a;
}
.agenda-day-span {
  font: 500 11.5px/1 var(--font-mono);
  color: #8b98a0;
}
.agenda-day-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.agenda-day-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid #f0f3f5;
  cursor: pointer;
  transition: background 0.12s ease;
  box-sizing: border-box;
  position: relative;
}
.agenda-day-row:has(.clinic-more.is-open) {
  z-index: 20;
}
.agenda-day-row:last-child { border-bottom: 0; }
.agenda-day-row--done { background: #fbfcfc; }
.agenda-day-row:hover { background: #f7f9fa; }
.agenda-day-row.is-active {
  background: #f6fafb;
  border-left: 3px solid #1f5a6e;
  padding-left: 13px;
}
.agenda-day-time {
  width: 52px;
  flex: none;
  font: 600 12.5px/1 var(--font-mono);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.agenda-day-row--done .agenda-day-time { color: var(--color-muted-2); }
.agenda-day-row--draft .agenda-day-time,
.agenda-day-row.is-active .agenda-day-time { color: #1f5a6e; }
.agenda-day-row--wait .agenda-day-time { color: #b06f14; }
.agenda-day-row--booked .agenda-day-time,
.agenda-day-row--pending .agenda-day-time { color: #4a6470; }
.agenda-day-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c2ccd2;
  flex: none;
}
.agenda-day-row--done .agenda-day-dot { background: #2f7d5f; }
.agenda-day-row--draft .agenda-day-dot { background: #1f5a6e; }
.agenda-day-row--wait .agenda-day-dot { background: #b06f14; }
.agenda-day-row--booked .agenda-day-dot,
.agenda-day-row--pending .agenda-day-dot {
  background: transparent;
  border: 2px solid #c2ccd2;
  box-sizing: border-box;
}
.agenda-day-name {
  width: 150px;
  flex: none;
  font: 600 13px/1.25 var(--font-sans);
  color: #16232a;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.agenda-day-name:hover { color: #1f5a6e; }
.agenda-day-row--done .agenda-day-name {
  font-weight: 500;
  color: #8b98a0;
}
.agenda-day-detail {
  flex: 1;
  font: 400 12.5px/1.3 var(--font-sans);
  color: #4a6470;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.agenda-day-row--done .agenda-day-detail { color: #9aa8af; }
.agenda-day-status {
  flex: none;
  font: 600 11px/1.1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-muted);
}
.agenda-day-row--done .agenda-day-status { color: #2f7d5f; }
.agenda-day-row--draft .agenda-day-status { color: #1f5a6e; }
.agenda-day-row--wait .agenda-day-status { color: #b06f14; }
.agenda-day-row--pending .agenda-day-status { color: #64757d; }
.agenda-day-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: none;
}
/* Check-in QR shortcut, inline on rows still waiting for the questionnaire. */
.agenda-day-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #e2c9a0;
  border-radius: 8px;
  background: #fdf6ea;
  color: #b06f14;
  cursor: pointer;
}
.agenda-day-qr:hover {
  background: #f8ecd8;
  border-color: #d8b57e;
}
.agenda-day-qr .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}
.agenda-day-card .dash-empty { padding: 2.5rem 1.25rem; }

@media (max-width: 820px) {
  .agenda-day-row {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .agenda-day-name { width: auto; flex: 1 1 8rem; min-width: 0; }
  .agenda-day-detail {
    width: 100%;
    order: 5;
    padding-left: calc(52px + 8px + 14px + 14px);
    white-space: normal;
  }
  .agenda-day-actions { margin-left: auto; }
}

/* —— Visit shell only —— */
.visit-toolbar {
  background: var(--color-ink) !important;
  border-bottom: 1px solid rgb(255 255 255 / 0.08) !important;
  color: #fff;
  box-shadow: none !important;
}
.visit-toolbar::after { display: none !important; }
.visit-toolbar-title {
  color: #fff !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
}
.visit-toolbar-meta-inline,
.visit-toolbar-sub,
.visit-case,
.visit-toolbar-type {
  color: rgb(255 255 255 / 0.55) !important;
  font-size: 0.72rem !important;
  font-family: var(--font-mono);
}
.visit-back {
  color: rgb(255 255 255 / 0.55) !important;
  gap: 0.2rem;
  height: 1.85rem;
  width: auto;
  padding: 0 0.35rem;
}
.visit-back:hover {
  background: rgb(255 255 255 / 0.08) !important;
  color: #fff !important;
}
.visit-back-label {
  display: none;
  font-size: 0.72rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .visit-back-label { display: inline; }
}
.visit-toolbar .visit-history-link {
  color: rgb(255 255 255 / 0.72) !important;
  border-color: rgb(255 255 255 / 0.16) !important;
  height: 1.85rem;
  min-height: 1.85rem;
}
.visit-toolbar .visit-history-link:hover {
  background: rgb(255 255 255 / 0.08) !important;
  color: #fff !important;
}
.visit-toolbar .autosave-pill { color: rgb(255 255 255 / 0.5); }
.visit-toolbar .btn-secondary {
  background: transparent !important;
  color: #dbe8ec !important;
  border-color: rgb(255 255 255 / 0.22) !important;
  min-height: 1.85rem !important;
  height: 1.85rem !important;
  padding: 0 0.7rem !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
}
.visit-toolbar .btn-secondary:hover {
  background: rgb(255 255 255 / 0.1) !important;
  color: #fff !important;
}
.visit-toolbar .btn-primary {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  min-height: 1.85rem !important;
  height: 1.85rem !important;
  padding: 0 0.85rem !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
}
.visit-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.16rem 0.45rem;
  border-radius: 5px;
}
.visit-badge--intake,
.visit-badge--follow {
  background: rgb(47 139 168 / 0.22);
  border: 1px solid rgb(47 139 168 / 0.4);
  color: #a8d4e2;
}
.visit-badge--draft {
  background: rgb(176 111 20 / 0.22);
  border: 1px solid rgb(176 111 20 / 0.35);
  color: #f3d7a2;
}
.visit-badge--completed {
  background: rgb(47 125 95 / 0.25);
  border: 1px solid rgb(47 125 95 / 0.4);
  color: #b7e0cd;
}
.visit-nav-card {
  background: #fff;
  border-color: var(--color-border);
}
.visit-nav-title {
  font: 600 0.65rem/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.visit-nav-group-label {
  font: 600 0.62rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
@media (min-width: 768px) {
  .visit-body {
    display: grid;
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
    gap: 0;
    max-width: none;
    margin: 0;
  }
  .visit-body--follow.is-prev-shown {
    grid-template-columns: var(--nav-width) minmax(0, 1fr);
  }
  .visit-nav { width: auto; }
}
@media (min-width: 1200px) {
  .visit-body--follow.is-prev-shown {
    grid-template-columns: var(--nav-width) minmax(0, 1fr) 15.5rem;
  }
}

/* Density polish */
.ta-page-inner--wide { padding-top: 1rem; }
.ta-card { border-radius: 10px; box-shadow: var(--shadow-sm); }
.ta-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Patient drill-in on agenda: hide day chrome */
.ta-page.has-patient .agenda-hero {
  display: none;
}

/* —— Theme 1:1 gaps: Termini rail, events, agenda list, visit tabs, potek —— */
.appt-side-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  background: #f7f9fa;
}
.appt-rail-greet {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.appt-rail-greet-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  min-width: 0;
}
.appt-rail-greet-hi {
  font: 500 13px/1.3 var(--font-sans);
  color: #8b98a0;
}
.appt-rail-greet-name {
  font: 700 22px/1.15 var(--font-sans);
  letter-spacing: -0.02em;
  color: #16232a;
}
.appt-rail-bell {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #dde3e7;
  border-radius: 999px;
  background: #fff;
  color: #4a6470;
  cursor: pointer;
  padding: 0;
}
.appt-rail-bell .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}
.appt-rail-bell:hover {
  border-color: #c5d4db;
  color: #1f5a6e;
}
.appt-rail-bell-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c45c26;
  border: 1.5px solid #fff;
}
.appt-rail-bell-dot[hidden] { display: none; }
.appt-rail-label {
  margin: 0;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b98a0;
}
.appt-rail-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 10px;
}
.appt-rail-label-row .appt-rail-label { margin: 0; }
.appt-rail-count {
  min-width: 1.25rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f8ebe0;
  font: 700 11px/1.2 var(--font-mono);
  color: #b06f14;
  text-align: center;
}
.appt-rail-count[hidden] { display: none; }
.appt-rail-block { min-width: 0; }
.appt-rail-block .appt-rail-label { margin-bottom: 10px; }
.appt-rail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid #dde3e7;
  border-radius: 10px;
  overflow: hidden;
}
.appt-rail-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px 6px 11px;
  background: #fff;
  border-right: 1px solid #eef1f3;
}
.appt-rail-stat:last-child { border-right: 0; }
.appt-rail-stat-icon {
  font-size: 18px;
  line-height: 1;
  color: #1f5a6e;
}
.appt-rail-stat-icon--ok { color: #2f7d5f; }
.appt-rail-stat-icon--open { color: #1f5a6e; }
.appt-rail-stat-icon--wait { color: #b06f14; }
.appt-rail-stat .appt-stat-value {
  margin: 0;
  font: 700 20px/1.1 var(--font-sans);
  color: #16232a;
  font-variant-numeric: tabular-nums;
}
.appt-rail-stat .appt-stat-label {
  margin: 0;
  font: 400 10.5px/1.2 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: #8b98a0;
}
.appt-stat-value--ok { color: #2f7d5f !important; }
.appt-stat-value--open { color: #1f5a6e !important; }
.appt-stat-value--wait { color: #b06f14 !important; }
.appt-rail-empty {
  margin: 0;
  font: 400 12px/1.4 var(--font-sans);
  color: #8b98a0;
}
.appt-rail-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding: 11px 12px;
  border: 1px solid #d5e4ea;
  border-radius: 10px;
  background: #eef5f7;
  font: 400 11.5px/1.5 var(--font-sans);
  color: #4a6470;
}
.appt-rail-tip p { margin: 0; }
.appt-rail-tip b { color: #16232a; font-weight: 650; }
.appt-rail-tip-icon {
  flex: none;
  font-size: 18px;
  line-height: 1;
  color: #1f5a6e;
  margin-top: 1px;
}
.appt-action-list { display: flex; flex-direction: column; gap: 8px; }
.appt-action-card {
  position: relative;
  background: #fff;
  border: 1px solid #dde3e7;
  border-radius: 10px;
  padding: 11px 12px 11px 14px;
  cursor: default;
  overflow: hidden;
}
.appt-action-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #8b98a0;
}
.appt-action-card--wait::before { background: #c45c26; }
.appt-action-card--draft::before { background: #1f5a6e; }
.appt-action-card--web::before { background: #8b98a0; }
.appt-action-card[data-visit-href],
.appt-action-card[data-open-detail] {
  cursor: pointer;
}
.appt-action-card[data-visit-href]:hover,
.appt-action-card[data-open-detail]:hover {
  border-color: #c5d4db;
}
.appt-action-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.appt-action-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1f5a6e;
  color: #fff;
  font: 650 11px/1 var(--font-sans);
  letter-spacing: 0.02em;
}
.appt-action-main {
  flex: 1;
  min-width: 0;
}
.appt-action-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 2px;
}
.appt-action-name {
  font: 650 13px/1.3 var(--font-sans);
  color: #16232a;
  text-decoration: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.appt-action-name:hover,
a.appt-action-name:focus-visible {
  color: #1f5a6e;
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}
.appt-action-hm {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #f3f6f8;
  font: 600 11px/1.2 var(--font-mono);
  color: #4a6470;
}
.appt-action-hm .material-symbols-outlined {
  font-size: 13px;
  line-height: 1;
  color: #8b98a0;
}
.appt-action-text {
  margin: 0;
  font: 400 11.5px/1.4 var(--font-sans);
  color: #64757d;
}
.appt-action-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #eef2f5;
}
.appt-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: #1f5a6e;
  color: #fff;
  font: 600 11px/1.4 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.appt-action-btn .material-symbols-outlined {
  font-size: 14px;
  line-height: 1;
}
.appt-action-btn:hover { background: #164555; }
.appt-action-btn--ghost {
  background: #fff;
  border-color: #dde3e7;
  color: #1f5a6e;
}
.appt-action-btn--ghost:hover { border-color: #1f5a6e; color: #1f5a6e; background: #f7fafb; }
.appt-action-btn--dark { background: #16232a; border-color: #16232a; }
.appt-free-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.appt-free-empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  border: 1px solid #e7ecef;
  border-radius: 10px;
  background: #eef1f3;
  text-align: center;
}
.appt-free-empty .material-symbols-outlined {
  font-size: 26px;
  color: #9aa8af;
}
.appt-free-empty p {
  margin: 0;
  font: 500 12px/1.35 var(--font-sans);
  color: #8b98a0;
}
.appt-free-chip {
  appearance: none;
  padding: 5px 9px;
  border: 1px solid #dde3e7;
  border-radius: 6px;
  background: #fff;
  font: 500 11.5px/1 var(--font-mono);
  color: #4a6470;
  cursor: pointer;
}
.appt-free-chip:hover { border-color: #1f5a6e; color: #1f5a6e; }
#appt-side-new[hidden],
#appt-list[hidden],
#appt-day-title[hidden] {
  display: none !important;
}
.appt-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.appt-gap {
  position: absolute;
  left: 0; right: 12px;
  z-index: 1;
  border: 1px dashed #c9d3d8;
  border-radius: 6px;
  background: transparent;
  color: var(--color-muted-2);
  font: 500 0.7rem/1 var(--font-sans);
  text-align: left;
  padding: 0 0.65rem;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.appt-gap:hover { background: rgb(31 90 110 / 0.04); color: var(--color-primary); border-color: var(--color-primary); }
.appt-tg--day .appt-tg-slots { z-index: 0; }
.appt-tg--day .appt-gap { z-index: 1; }
.appt-tg--day .appt-event { z-index: 3; }
.appt-tg--day .appt-now { z-index: 4; }
.appt-now { border-top-color: var(--color-danger) !important; }
.appt-now-label {
  position: absolute;
  left: -3.4rem;
  top: -0.55rem;
  background: var(--color-danger);
  color: #fff;
  font: 600 0.62rem/1 var(--font-mono);
  padding: 0.12rem 0.3rem;
  border-radius: 3px;
}
.appt-tg-occ {
  display: block;
  width: 2rem;
  height: 3px;
  margin: 0.2rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-primary) var(--occ), #e7ecef var(--occ));
}
.appt-event {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  padding: 0.35rem 0.55rem !important;
  overflow: hidden;
}
.appt-event-kind {
  font-size: var(--text-md2);
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}
.appt-event-chip {
  margin-left: auto;
  font: 600 11px/1.1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.appt-event-chip--done { color: var(--color-success); }
.appt-event-chip--draft { color: var(--color-primary); }
.appt-event-chip--wait { color: var(--color-warn); }
.appt-event-chip--web { color: var(--color-muted); }
.appt-event-chip--booked { color: #4a6470; }
.appt-event--draft {
  background: var(--color-primary-soft) !important;
  border-color: #c5dbe3 !important;
  border-left-color: var(--color-primary) !important;
}
.appt-event--wait {
  background: var(--color-warn-soft) !important;
  border-color: #f0e0c4 !important;
  border-left-color: var(--color-warn) !important;
}
.appt-event--booked {
  background: #fff !important;
  border-color: var(--color-border) !important;
  border-left-color: #8fa4ad !important;
}


/* Follow-up: narrow left nav + optional prev rail (desktop only) */
.visit-follow-rail {
  display: none;
  width: 15.5rem;
  flex: none;
  border-left: 1px solid var(--color-border);
  background: var(--color-rail);
  padding: 0.75rem;
  gap: 0.65rem;
  flex-direction: column;
  align-self: flex-start;
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}
.visit-body--follow.is-prev-shown .visit-follow-rail {
  display: none;
}
@media (min-width: 1200px) {
  .visit-body--follow.is-prev-shown .visit-follow-rail {
    display: flex;
  }
}
.visit-prev-toggle--nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0.65rem 0.35rem 0;
  padding-top: 0.65rem;
  border-top: 1px solid #e7ecef;
  font: 500 0.68rem/1.2 var(--font-sans);
  color: var(--color-muted);
  cursor: pointer;
  white-space: normal;
}

.visit-rail-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 0.8125rem 0.875rem;
}
.visit-rail-label {
  font: 600 0.65625rem/1.2 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-muted-2);
  margin-bottom: 0.625rem;
}
.visit-rail-text {
  margin: 0;
  font: 400 0.75rem/1.55 var(--font-sans);
  color: #4a6470;
}
.visit-rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.625rem;
}
.visit-rail-tag {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: #eef1f3;
  font: 500 0.6875rem/1.2 var(--font-sans);
  color: #4a6470;
}
.visit-rail-link {
  display: inline-block;
  margin-top: 0.75rem;
  font: 600 0.72rem/1.2 var(--font-sans);
  color: var(--color-primary);
  text-decoration: none;
}
.visit-rail-link:hover { text-decoration: underline; }
.visit-rail-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font: 400 0.75rem/1.45 var(--font-sans);
  color: #4a6470;
}
.visit-rail-notes li {
  display: flex;
  gap: 0.5rem;
}
.visit-rail-time {
  flex: none;
  font: 500 0.65625rem/1.45 var(--font-mono);
  color: #9aa8af;
  padding-top: 1px;
}

.visit-delta-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 1rem;
}
.visit-delta-head {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
.visit-delta-title {
  font: 600 0.84375rem/1.2 var(--font-sans);
  color: var(--color-ink);
}
.visit-delta-meta {
  font: 400 0.72rem/1.2 var(--font-sans);
  color: var(--color-muted-2);
}
.visit-delta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}
@media (max-width: 767px) {
  .visit-delta-grid { grid-template-columns: 1fr; }
}
.visit-delta-metric {
  border: 1px solid #e7ecef;
  border-radius: 8px;
  padding: 0.75rem 0.875rem;
}
.visit-delta-label {
  font: 600 0.65625rem/1.2 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-muted-2);
  margin-bottom: 0.5rem;
}
.visit-delta-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.visit-delta-now {
  font: 600 1.625rem/1 var(--font-mono);
  color: var(--color-ink);
}
.visit-delta-now--text {
  font: 600 0.875rem/1.35 var(--font-sans);
}
.visit-delta-prev {
  font: 400 0.8125rem/1 var(--font-mono);
  color: #9aa8af;
}
.visit-delta-chg {
  margin-left: auto;
  font: 600 0.72rem/1 var(--font-sans);
  color: var(--color-muted);
}
.visit-delta-chg.is-better { color: var(--color-success); }
.visit-delta-chg.is-worse { color: var(--color-danger); }

.nav-anchor.is-filled .nav-progress,
.nav-anchor .nav-progress[data-progress="1"] {
  background: var(--color-primary) !important;
}

/* Tablet keeps rails (theme PC composition) */
@media (min-width: 768px) and (max-width: 1099px) {
  .appt-shell {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem) !important;
  }
  .appt-side { position: sticky; max-height: calc(100vh - var(--header-height) - 1rem); }
  .agenda-today-card {
    width: clamp(14rem, 28vw, 18rem);
  }
  .visit-body {
    display: grid !important;
    grid-template-columns: var(--nav-width) minmax(0, 1fr) !important;
    gap: 0 !important;
    padding-left: 0 !important;
  }
  .visit-nav { display: block !important; }
}
@media (max-width: 767px) {
  .appt-rail-stats { grid-template-columns: repeat(2, 1fr); }
  .appt-gap { display: none; }
}

/* Shared ⋯ row menu (agenda, calendar, potek) */
.clinic-more {
  position: relative;
  flex: none;
}
.clinic-more-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #8b98a0;
  font: 600 16px/1 var(--font-sans);
  cursor: pointer;
}
.clinic-more-btn:hover,
.clinic-more.is-open .clinic-more-btn {
  background: rgb(22 35 42 / 0.06);
  color: #16232a;
  border-color: #dde3e7;
}
.clinic-more-menu {
  position: absolute;
  top: calc(100% + 0.2rem);
  right: 0;
  z-index: 40;
  min-width: 10.5rem;
  padding: 0.25rem;
  border: 1px solid #dde3e7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(22 35 42 / 0.12);
}
.clinic-more-menu[hidden] { display: none !important; }
.clinic-more-item {
  appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #16232a;
  font: 600 12.5px/1.2 var(--font-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
a.clinic-more-item { box-sizing: border-box; }
.clinic-more-item:hover { background: #f4f7f8; }
.clinic-more-item--danger { color: #b0413e; }
.clinic-more-item--danger:hover { background: rgb(176 65 62 / 0.08); }
.agenda-day-actions { gap: 4px; }
.agenda-day-actions .clinic-more { margin-left: 2px; z-index: 1; }
.agenda-day-row:has(.clinic-more.is-open) .clinic-more { z-index: 21; }
.agenda-next {
  position: relative;
  padding-right: 3rem;
}
.agenda-next:has(.clinic-more.is-open) {
  z-index: 6;
  overflow: visible;
}
.agenda-next-more {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}
.agenda-next-more .clinic-more-btn {
  color: var(--color-muted);
  border-color: var(--color-border);
}
.agenda-next-more .clinic-more-btn:hover,
.agenda-next-more .clinic-more.is-open .clinic-more-btn {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-color: #c5dbe3;
}
.agenda-next-more .clinic-more-menu { right: 0; left: auto; }
.appt-event .clinic-more {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
}
.appt-event .clinic-more-btn {
  width: 1.5rem;
  height: 1.5rem;
  background: rgb(255 255 255 / 0.85);
  border-color: #dde3e7;
  font-size: 14px;
}
.appt-event--compact .clinic-more { display: none; }

/* HITRI ZAPIS + prev toggle */
.notes-quick-field {
  margin-top: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border, #e7ecef);
}
.notes-quick-field .field-hint {
  display: block;
  margin: 0.2rem 0 0.45rem;
  font: 400 0.75rem/1.35 var(--font-sans);
  color: var(--color-muted, #64757d);
}
.notes-quick-input {
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.visit-quicknote {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1rem;
  background: var(--color-ink);
  border-top: 1px solid rgb(255 255 255 / 0.08);
  color: #fff;
}
.visit-quicknote-label {
  font: 600 0.65rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7fa8b6;
  flex-shrink: 0;
}
.visit-quicknote-input {
  flex: 1;
  min-width: 0;
  height: 2.125rem;
  border-radius: 7px;
  border: 1px solid rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  padding: 0 0.75rem;
  font: 400 0.8rem/1.2 var(--font-sans);
}
.visit-quicknote-input::placeholder { color: rgb(255 255 255 / 0.4); }
.visit-quicknote-kbd {
  display: none;
  font: 500 0.65rem/1 var(--font-mono);
  color: rgb(255 255 255 / 0.4);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 4px;
  padding: 0.15rem 0.35rem;
}
@media (min-width: 768px) {
  .visit-quicknote-kbd { display: inline; }
}
.visit-quicknote-btn {
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  background: rgb(255 255 255 / 0.12);
  color: #dbe8ec;
  font: 600 0.75rem/1 var(--font-sans);
  cursor: pointer;
  flex-shrink: 0;
}
.visit-quicknote-btn:hover { background: rgb(255 255 255 / 0.18); }
@media (max-width: 1023px) {
  .visit-quicknote { bottom: 3.5rem; }
}
.visit-prev-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
}
.visit-prev-toggle input {
  width: 1.85rem;
  height: 1.05rem;
  appearance: none;
  border-radius: 999px;
  background: #c2ccd2;
  position: relative;
  cursor: pointer;
}
.visit-prev-toggle input::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 0.8rem; height: 0.8rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.visit-prev-toggle input:checked { background: var(--color-primary); }
.visit-prev-toggle input:checked::after { transform: translateX(0.75rem); }

/* Appt / checkin QR modal */
.appt-qr-dialog {
  max-width: 21rem;
  padding: 1.25rem;
}
.appt-qr-dialog .dash-modal-header {
  align-items: center;
  margin-bottom: 1rem;
}
.appt-qr-name {
  margin: 0.15rem 0 0;
  font-size: var(--text-secondary);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}
.appt-qr-name[hidden] { display: none; }

.appt-qr-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  text-align: center;
}
.appt-qr-frame {
  display: flex;
  justify-content: center;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
}
#appt-qr-canvas,
#checkin-qr-canvas {
  display: block;
  width: 200px;
  height: 200px;
}
.appt-qr-hint {
  margin: 0;
  font-size: var(--text-secondary);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

/* Link row: truncated URL + inline copy */
.appt-qr-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0 0.25rem 0 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-rail);
}
.appt-qr-url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: var(--text-caption);
  line-height: 2.125rem;
  color: var(--color-muted);
}
.appt-qr-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.appt-qr-copy:hover { background: #eaeef1; color: var(--color-text); }
.appt-qr-copy .material-symbols-outlined { font-size: 1rem; }

.appt-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.appt-qr-actions .ta-btn {
  flex: 1 1 7rem;
  min-width: 0;
}
.appt-qr-actions .appt-qr-action--full { flex-basis: 100%; }
.appt-qr-actions .ta-btn[hidden] { display: none; }
.appt-qr-actions .ta-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.appt-qr-body .ta-status:empty { display: none; }

/* —— Termini theme: full-bleed dan/teden —— */
.ta-page--appt {
  background: #fff;
}
.ta-page-inner--appt {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}
.appt-board {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height));
  background: #fff;
}
.ta-page--appt .appt-chrome {
  flex: 0 0 auto;
  margin: 0;
  min-height: 50px;
  height: auto;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid #dde3e7;
  border-radius: 0;
  background: #fff;
  gap: 14px;
}
.ta-page--appt .appt-chrome-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #16232a;
}
.appt-chrome-meta {
  font: 500 11.5px/1.2 var(--font-mono);
  color: #8b98a0;
  white-space: nowrap;
}
.ta-page--appt .appt-shell {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 352px;
  gap: 0;
  align-items: stretch;
  min-height: 0;
  background: #eef1f3;
}
.ta-page--appt.is-week-view .appt-shell {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 220px);
  background: #fff;
}
@media (min-width: 1280px) {
  .ta-page--appt.is-week-view .appt-shell {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
}
@media (min-width: 1440px) {
  .ta-page--appt.is-week-view .appt-shell {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}
.ta-page--appt.is-month-view .appt-shell {
  grid-template-columns: minmax(0, 1fr) 352px;
  background: #fff;
}
.ta-page--appt .appt-cal-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  overflow: hidden;
}
.ta-page--appt .appt-cal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px 24px !important;
  background: #fff;
}
.ta-page--appt.is-week-view .appt-cal-body {
  padding: 0 20px 20px !important;
}
.ta-page--appt.is-month-view .appt-cal-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}
.ta-page--appt.is-month-view .appt-m {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: 100%;
  border-radius: 0;
}
.ta-page--appt.is-month-view .appt-m-head {
  border-radius: 0;
}
.ta-page--appt.is-month-view .appt-m-body {
  flex: 1 1 auto;
}
.ta-page--appt.is-month-view .appt-m-cell:nth-last-child(-n + 7) {
  border-bottom: 0;
}
.ta-page--appt .appt-side {
  position: sticky;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height));
  align-self: stretch;
  width: auto;
  background: #f7f9fa !important;
  border: 0 !important;
  border-left: 1px solid #dde3e7 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.ta-page--appt .appt-side-list-view,
.ta-page--appt .appt-side-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: auto;
}
.ta-page--appt .appt-side-detail {
  padding: 12px 14px 16px;
  box-sizing: border-box;
  background: #f7f9fa;
}
.ta-page--appt .appt-side-head--detail {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dde3e7;
}
.ta-page--appt .appt-side-detail-body {
  padding: 0;
}
.ta-page--appt .appt-detail {
  gap: 14px;
}
.ta-page--appt .appt-detail-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  background: #e8eef1;
  color: #1f5a6e;
  font: 600 15px/1 var(--font-sans);
}
.ta-page--appt.is-week-view .appt-side-list-view {
  overflow: hidden; /* week rail fits viewport — no nested Y scroll */
}
.ta-page--appt .appt-side-body--week {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 12px 12px 10px;
  gap: 10px;
  overflow: hidden;
  box-sizing: border-box;
}
.ta-page--appt .appt-side-body--week .appt-rail-block {
  flex: 0 0 auto;
  min-width: 0;
}
.ta-page--appt .appt-side-body--week .appt-rail-block.appt-week-free {
  flex: 1 1 auto;
}
.ta-page--appt .appt-side-body--week .appt-rail-block .appt-rail-label {
  margin-bottom: 6px;
}
.appt-side-body--week[hidden],
.appt-side-body--day[hidden] {
  display: none !important;
}

/* Day/week grid density */
.ta-page--appt .appt-tg {
  max-height: none;
  min-height: 0;
  height: 100%;
}
.ta-page--appt .appt-tg-scroll {
  overflow: auto;
  max-height: calc(100vh - var(--header-height) - 50px - 2rem);
}
.ta-page--appt.is-week-view .appt-tg-scroll {
  max-height: calc(100vh - var(--header-height) - 50px - 4.5rem);
}
.ta-page--appt .appt-tg-gutter,
.ta-page--appt .appt-tg-gutter-spacer {
  width: 52px;
  min-width: 52px;
}
.ta-page--appt .appt-tg-head,
.ta-page--appt .appt-tg-body {
  grid-template-columns: 52px minmax(0, 1fr);
}
.ta-page--appt .appt-tg-hour-label {
  left: 0;
  right: auto;
  text-align: left;
  font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  transform: none;
}
.ta-page--appt .appt-tg--day .appt-tg-hour-label {
  font-size: var(--text-caption);
}
.ta-page--appt .appt-tg-days,
.ta-page--appt .appt-tg-cols {
  grid-template-columns: repeat(var(--appt-cols, 7), minmax(0, 1fr));
}
.ta-page--appt .appt-tg--week .appt-tg-col {
  padding: 0 4px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent calc(80px - 1px),
    #f2f5f6 calc(80px - 1px),
    #f2f5f6 80px
  );
  border-left: 1px solid #eef1f3;
  border-right: 0;
}
.ta-page--appt .appt-tg--week .appt-tg-hline,
.ta-page--appt .appt-tg--day .appt-tg-hline--half { display: none; }
.ta-page--appt .appt-walkin-btn {
  display: inline-flex !important;
  align-items: center;
}
.ta-page--appt.is-week-view .appt-today-btn { display: none; }
.ta-page--appt.is-week-view .appt-side-body--week .appt-week-free {
  margin-top: auto;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  border-top: 1px solid #dde3e7;
  overflow: hidden;
}
.appt-week-free-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}
.appt-week-free-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 9px;
  border-top: 1px solid #e8eef1;
  min-width: 0;
}
.appt-week-free-day:first-child {
  border-top: 0;
  padding-top: 2px;
}
.appt-week-free-day.is-today {
  padding-left: 7px;
  border-left: 2px solid #1f5a6e;
}
.appt-week-free-day.is-empty .appt-week-free-head {
  opacity: 0.55;
}
.appt-week-free-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  line-height: 1;
}
.appt-week-free-dow {
  font: var(--weight-semibold) 10px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a9aa3;
}
.appt-week-free-date {
  font: var(--weight-semibold) 13px/1 var(--font-sans);
  color: #16232a;
  font-variant-numeric: tabular-nums;
}
.appt-week-free-day.is-today .appt-week-free-date,
.appt-week-free-day.is-selected .appt-week-free-date {
  color: #1f5a6e;
}
.appt-week-free-badge {
  font: 500 9px/1 var(--font-sans);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: #1f5a6e;
  margin-left: 1px;
}
.appt-week-free-n {
  margin-left: auto;
  font: 500 10px/1 var(--font-mono);
  color: #9aa8af;
  font-variant-numeric: tabular-nums;
}
.appt-week-free-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  align-items: center;
}
.appt-week-free-none {
  font: 400 11px/1.2 var(--font-sans);
  color: #b3bec4;
}
.appt-week-free-more {
  appearance: none;
  border: 0;
  background: transparent;
  font: 500 10px/1 var(--font-mono);
  color: #1f5a6e;
  padding: 4px 2px;
  cursor: pointer;
}
.appt-week-free-more:hover {
  text-decoration: underline;
}
.appt-week-free-more.is-open {
  color: #8a9aa3;
}
.ta-page--appt .appt-week-free .appt-free-chip {
  padding: 4px 7px;
  font-size: var(--text-caption);
  border-radius: 5px;
}
.ta-page--appt .appt-tg--week .appt-tg-dayhead {
  padding: 10px 8px;
  border-right: 0;
  gap: 0;
}
.ta-page--appt .appt-tg--week .appt-tg-dow {
  font: var(--weight-medium) var(--text-caption)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  color: var(--color-muted);
}
.ta-page--appt .appt-tg--week .appt-tg-dayhead.is-closed {
  opacity: 0.55;
  background: #f4f6f7;
}
.ta-page--appt .appt-tg--week .appt-tg-dayhead.is-closed .appt-tg-dow,
.ta-page--appt .appt-tg--week .appt-tg-dayhead.is-closed .appt-tg-date {
  color: var(--color-muted-2) !important;
}
.ta-page--appt .appt-tg--week .appt-tg-col.is-closed {
  background: repeating-linear-gradient(
    -45deg,
    #f7f9fa,
    #f7f9fa 8px,
    #f2f4f5 8px,
    #f2f4f5 16px
  );
  opacity: 0.72;
}
.ta-page--appt .appt-tg--week .appt-tg-date {
  width: auto;
  height: auto;
  margin-top: 2px;
  border-radius: 0;
  background: transparent !important;
  color: #16232a !important;
  font: var(--weight-semibold) var(--text-body)/var(--leading-tight) var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.ta-page--appt .appt-tg--week .appt-tg-dayhead.is-today {
  background: #f4f8f9;
  border-radius: 8px 8px 0 0;
}
.ta-page--appt .appt-tg--week .appt-tg-dayhead.is-today .appt-tg-dow,
.ta-page--appt .appt-tg--week .appt-tg-dayhead.is-today .appt-tg-date {
  color: #1f5a6e !important;
}
.ta-page--appt .appt-tg-occ {
  width: 100%;
  max-width: 100%;
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: linear-gradient(to right, #1f5a6e var(--occ), #e7ecef var(--occ));
}
.ta-page--appt .appt-tg--week .appt-tg-dayhead.is-today .appt-tg-occ {
  background: linear-gradient(to right, #1f5a6e var(--occ), #dbe6ea var(--occ));
}

/* Day events: full-width horizontal bars + CTAs */
.ta-page--appt .appt-event {
  box-sizing: border-box;
}
.ta-page--appt .appt-event--day {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  overflow: visible;
}
.ta-page--appt .appt-event--day .appt-event-time {
  width: 78px;
  flex: 0 0 78px;
  font: 600 12px/1 var(--font-mono);
}
.ta-page--appt .appt-event--day .appt-event-name {
  display: inline;
  flex: 0 0 auto;
  font: 600 13.5px/1.2 var(--font-sans);
  color: #16232a;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: nowrap;
}
.ta-page--appt .appt-event--day .appt-event-kind {
  flex: 0 1 auto;
  max-width: none;
  font: 400 12.5px/1.2 var(--font-sans);
  color: #64757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ta-page--appt .appt-event--day .appt-event-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font: 600 11px/1.1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Day row is flex — relative (not absolute/static) so menu anchors + stays in flow */
.ta-page--appt .appt-event--day .clinic-more {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  margin-left: 0;
  z-index: 3;
}
.ta-page--appt .appt-event--day .clinic-more-btn {
  width: 1.5rem;
  height: 1.5rem;
  background: rgb(255 255 255 / 0.7);
}
.ta-page--appt .appt-event--day:has(.clinic-more.is-open) {
  z-index: 24;
  overflow: visible;
}
.ta-page--appt .appt-event--day .appt-event-cta {
  flex: 0 0 auto;
  margin-left: 0;
}
.ta-page--appt .appt-event--day .appt-event-chip + .appt-event-cta,
.ta-page--appt .appt-event--day .appt-event-cta + .clinic-more,
.ta-page--appt .appt-event--day .appt-event-chip + .clinic-more {
  margin-left: 0;
}
.ta-page--appt .appt-tg--day .appt-tg-hline {
  border-top-color: #e7ecef;
  border-top-style: solid;
}
.appt-event-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f5a6e;
}
.appt-event-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid transparent;
  font: 600 11px/1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.appt-event-cta--primary {
  background: #1f5a6e;
  color: #fff;
}
.appt-event-cta--ghost {
  background: transparent;
  border-color: #e0cba4;
  color: #8a570f;
}
.appt-event-cta--dark {
  background: #16232a;
  border-color: #16232a;
  color: #fff;
}
.appt-event-cta:hover { filter: brightness(1.05); }

.appt-overlap-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  background: #fdf1f0;
  border-bottom: 1px solid #ecc9c6;
  color: #8f312e;
  font: 550 12.5px/1.35 var(--font-sans);
}
.appt-overlap-banner .material-symbols-outlined {
  font-size: 1.15rem;
  flex: none;
}
.ta-page--appt .appt-event--overlap {
  background: #fdf1f0 !important;
  border: 1px solid #ecc9c6 !important;
  border-left: 3px solid #8f312e !important;
  color: #8f312e !important;
  box-shadow: 0 0 0 1px rgb(143 49 46 / 0.12) !important;
  z-index: 4;
}
.ta-page--appt .appt-event--overlap .appt-event-time,
.ta-page--appt .appt-event--overlap .appt-event-kind,
.ta-page--appt .appt-event--overlap .appt-event-name {
  color: #8f312e !important;
}
.appt-event-chip--overlap {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  margin-left: 0 !important;
  margin-top: 2px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgb(143 49 46 / 0.12);
  color: #8f312e !important;
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.appt-event-chip--overlap::before {
  content: "!";
  font-weight: 700;
}
.ta-page--appt .appt-event--done {
  background: #eef6f1 !important;
  border: 1px solid #cfe0d7 !important;
  border-left: 3px solid #2f7d5f !important;
  color: #2f7d5f !important;
  box-shadow: none !important;
  opacity: 0.92;
}
.ta-page--appt .appt-event--done .appt-event-time,
.ta-page--appt .appt-event--done .appt-event-chip,
.ta-page--appt .appt-event--done .appt-event-kind { color: #2f7d5f !important; }
.ta-page--appt .appt-event--done .appt-event-name { color: #1e4d3a !important; }
.ta-page--appt .appt-event--done .appt-event-chip--done {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 0;
  margin-top: 2px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgb(47 125 95 / 0.12);
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.ta-page--appt .appt-event--done .appt-event-chip--done::before {
  content: "✓";
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.ta-page--appt .appt-event--draft {
  background: #eaf3f6 !important;
  border: 1px solid #b9d5de !important;
  border-left: 3px solid #1f5a6e !important;
  box-shadow: 0 2px 6px rgba(31, 90, 110, 0.14) !important;
}
.ta-page--appt .appt-event--draft .appt-event-time,
.ta-page--appt .appt-event--draft .appt-event-chip,
.ta-page--appt .appt-event--draft .appt-event-kind { color: #1f5a6e !important; }
.ta-page--appt .appt-event--wait {
  background: #fdf6ea !important;
  border: 1px solid #e8d5b0 !important;
  border-left: 3px solid #b06f14 !important;
}
.ta-page--appt .appt-event--wait .appt-event-time,
.ta-page--appt .appt-event--wait .appt-event-chip { color: #b06f14 !important; }
.ta-page--appt .appt-event-chip--action {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid #e0cba4;
  background: rgb(255 255 255 / 0.55);
  transition: background 120ms ease, border-color 120ms ease;
}
.ta-page--appt .appt-event-chip--action:hover {
  background: #fff;
  border-color: #b06f14;
}
.ta-page--appt .appt-event-chip--action:focus-visible {
  outline: 2px solid #b06f14;
  outline-offset: 1px;
}
.ta-page--appt .appt-event--booked,
.ta-page--appt .appt-event--web {
  background: #fff !important;
  border: 1px solid #dde3e7 !important;
  border-left: 3px solid #8fa4ad !important;
  color: #4a6470 !important;
  box-shadow: none !important;
}
.ta-page--appt .appt-event--booked .appt-event-time,
.ta-page--appt .appt-event--web .appt-event-time { color: #4a6470 !important; }
.ta-page--appt .appt-event--web .appt-event-chip { color: #64757d !important; }

/* Week compact cards */
.ta-page--appt .appt-event--compact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding: 6px 8px !important;
  border-radius: 5px !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left-width: 3px !important;
  box-shadow: none !important;
  min-height: 76px;
}
.ta-page--appt .appt-event--compact.appt-event--draft {
  box-shadow: 0 2px 6px rgba(31, 90, 110, 0.16) !important;
}
.ta-page--appt .appt-event--compact .appt-event-time {
  font: 600 11px/1.2 var(--font-mono);
}
.ta-page--appt .appt-event--compact .appt-event-name {
  display: block;
  margin-top: 2px;
  font: 600 12px/1.2 var(--font-sans);
  color: #16232a;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ta-page--appt .appt-event--compact .appt-event-kind {
  max-width: 100%;
  font: 400 11px/1.2 var(--font-sans);
  color: #64757d;
}
.ta-page--appt .appt-event--compact.appt-event--done .appt-event-kind {
  font-weight: 600;
}
.ta-page--appt .appt-event--compact .appt-event-chip {
  margin-left: 0;
}

/* Free gap placeholders (day) */
.ta-page--appt .appt-gap {
  left: 0;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed #cdd6db;
  border-radius: 7px;
  background: transparent;
  color: #9aa8af;
  font: 500 11.5px/1.2 var(--font-sans);
  text-align: center;
  padding: 0 12px;
  cursor: pointer;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ta-page--appt .appt-gap:hover {
  background: rgb(31 90 110 / 0.04);
  color: #1f5a6e;
  border-color: #1f5a6e;
}

/* Now line */
.ta-page--appt .appt-now {
  left: -52px !important;
  right: 12px !important;
}
.ta-page--appt.is-week-view .appt-now {
  left: -52px !important;
  right: 0 !important;
}
.ta-page--appt .appt-now-label {
  left: 0;
  top: -8px;
}

/* Week sidebar: mini-cal + legend (compact — fits viewport) */
.appt-mini-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  text-align: center;
  font: 500 10px/1 var(--font-mono);
  user-select: none;
  touch-action: none;
}
.appt-mini-cal.is-selecting { cursor: ew-resize; }
.appt-mini-cal.is-selecting .appt-mini-day { cursor: ew-resize; }
.appt-mini-hint {
  margin: 6px 0 0;
  font: 400 10.5px/1.3 var(--font-sans);
  color: #9aa8af;
}
.appt-mini-cal.has-custom-range .appt-mini-day.is-week {
  background: #cfe0e6;
}
.appt-mini-dow {
  color: #b3bec4;
  padding: 2px 0;
}
.appt-mini-day {
  appearance: none;
  border: 0;
  background: transparent;
  color: #4a6470;
  padding: 2px 0 1px;
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  min-height: 22px;
}
.appt-mini-day-num {
  font: inherit;
  line-height: 1;
}
.appt-mini-day-count {
  font: 600 7px/1 var(--font-mono);
  letter-spacing: -0.02em;
  color: #1f5a6e;
  opacity: 0.7;
  margin-top: 1px;
}
.appt-mini-day.is-muted .appt-mini-day-count {
  color: #9aa8af;
  opacity: 0.55;
}
.appt-mini-day.is-selected .appt-mini-day-count,
.appt-mini-day.is-today .appt-mini-day-count {
  color: #fff;
  opacity: 0.85;
}
.appt-mini-day.is-muted { color: #c8d1d6; }
.appt-mini-day.is-week { background: #dbe6ea; color: #16232a; }
.appt-mini-day.is-week.is-closed { color: #8b98a0; }
.appt-mini-day.is-selected,
.appt-mini-day.is-today {
  background: #1f5a6e;
  color: #fff;
}
.appt-mini-day:hover:not(.is-selected):not(.is-today) {
  background: #eaf3f6;
}
.appt-mini-cal.is-selecting .appt-mini-day.is-week:not(.is-selected):not(.is-today) {
  background: #b9d5de;
}
.appt-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 400 11.5px/1.25 var(--font-sans);
  color: #4a6470;
}
.appt-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.appt-legend-swatch {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.appt-legend-swatch--done { background: #2f7d5f; }
.appt-legend-swatch--draft { background: #1f5a6e; }
.appt-legend-swatch--wait { background: #b06f14; }
.appt-legend-swatch--booked { background: #8fa4ad; }
.appt-legend-pop {
  position: relative;
  flex: none;
}
.appt-legend-info {
  appearance: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #dde3e7;
  border-radius: 999px;
  background: #fff;
  color: #8b98a0;
  cursor: pointer;
}
.appt-legend-info .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}
.appt-legend-info:hover,
.appt-legend-info[aria-expanded="true"] {
  color: #1f5a6e;
  border-color: #c5d4db;
  background: #eaf3f6;
}
.appt-legend-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: min(220px, 70vw);
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #dde3e7;
  border-radius: 9px;
  box-shadow: 0 8px 24px rgb(22 35 42 / 0.12);
}
.appt-legend-panel[hidden] { display: none !important; }
.appt-legend-panel-title {
  margin: 0 0 8px;
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b98a0;
}
@media (max-height: 720px) {
  .ta-page--appt .appt-side-body--week { padding: 10px; gap: 8px; }
  .appt-mini-day { padding: 2px 0; }
  .ta-page--appt .appt-week-free .appt-free-chip { padding: 3px 6px; font-size: var(--text-caption); }
}

@media (max-width: 960px) {
  .ta-page--appt .appt-shell,
  .ta-page--appt.is-week-view .appt-shell,
  .ta-page--appt.is-month-view .appt-shell {
    grid-template-columns: 1fr;
  }
  .ta-page--appt .appt-side {
    position: static;
    max-height: none;
    border-left: 0 !important;
    border-top: 1px solid #dde3e7 !important;
  }
  .ta-page--appt .appt-chrome {
    padding: 10px 12px;
    height: auto;
  }
  .appt-chrome-meta { white-space: normal; }
  .ta-page--appt .appt-event--day {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
  }
  .ta-page--appt .appt-event--day .appt-event-chip {
    margin-left: 0;
  }
}

/* —— Računi —— */
.invoices-page .ta-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.inv-org-alert { margin-bottom: 16px; }
/* Two numbers do not need two cards — one line above the table. */
.inv-kpi {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.inv-kpi-label {
  font-size: 12.5px;
  color: #6b7c86;
}
.inv-kpi-value {
  font: 650 15px/1.2 var(--font-mono);
  color: #183944;
  font-variant-numeric: tabular-nums;
}
.inv-kpi-sep {
  color: #c2ccd2;
  margin: 0 4px;
}
.inv-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.inv-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-filter-btn {
  border: 1px solid #d5dee4;
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: #3d525c;
  cursor: pointer;
}
.inv-filter-btn.is-active {
  background: #183944;
  border-color: #183944;
  color: #fff;
}
.inv-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: min(280px, 100%);
}
.inv-search-wrap .material-symbols-outlined { color: #8a9aa3; font-size: 20px; }
.inv-table-wrap { overflow-x: auto; }
.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.inv-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7c86;
  padding: 8px 10px;
  border-bottom: 1px solid #e4eaee;
}
.inv-table th.r, .inv-table td.r { text-align: right; }
.inv-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #eef2f4;
  vertical-align: middle;
}
.inv-row { cursor: pointer; }
.inv-row:hover { background: #f7fafb; }
.inv-empty { text-align: center; color: #6b7c86; padding: 28px 12px !important; }
.inv-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.inv-badge--open { background: #fff4e5; color: #9a5b00; }
.inv-badge--paid { background: #e7f6ee; color: #1b6b3a; }
.inv-badge--storno { background: #f1f3f5; color: #5c6b73; }
.inv-badge--draft { background: #eef3f7; color: #3d5a6c; }
.inv-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
  color: #5c6b73;
  font-size: 13px;
}
/* —— Modal računa —— */
.inv-modal-dialog {
  width: min(1080px, 96vw);
  max-width: min(1080px, 96vw);
  max-height: min(92vh, 900px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inv-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}
.inv-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 16px 24px;
  border-bottom: 1px solid #e8edf1;
  background: #fff;
}
.inv-modal-heading { min-width: 0; }
.inv-modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.inv-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #183944;
  letter-spacing: -0.01em;
}
.inv-modal-badge { flex-shrink: 0; }
.inv-modal-sub { margin: 4px 0 0; font-size: 13px; color: #6b7c86; }

/* Dva neodvisno drseča stolpca — povzetek ostane viden med urejanjem postavk. */
.inv-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
  background: #fbfcfd;
}
.inv-main {
  padding: 20px 24px 24px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
.inv-section + .inv-section { margin-top: 22px; }
.inv-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  color: #6b7c86;
}
.inv-section-title .material-symbols-outlined { font-size: 17px; color: #9bb0bb; }

.inv-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px 14px;
}
.inv-col-full { grid-column: span 6; }
.inv-col-3 { grid-column: span 3; }
.inv-col-2 { grid-column: span 2; }
.inv-col-postcode { grid-column: span 1; }
.inv-col-city { grid-column: span 2; }

.inv-patient-field { position: relative; }
.inv-patient-label:empty { display: none; }
.ta-input.is-locked {
  background: #f4f7f9;
  color: #2c4550;
  font-weight: 600;
  cursor: default;
  -webkit-text-fill-color: #2c4550;
  opacity: 1;
}
.inv-patient-results {
  position: absolute;
  z-index: 5;
  left: 0; right: 0; top: calc(100% - 4px);
  background: #fff;
  border: 1px solid #d5dee4;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(24, 57, 68, 0.12);
  max-height: 220px;
  overflow: auto;
}
.inv-patient-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
}
.inv-patient-option:hover { background: #f3f7f9; }
.inv-patient-empty { padding: 12px; color: #6b7c86; font-size: 13px; }
.inv-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.inv-items-head .inv-section-title { margin: 0; }
.inv-items-tools { display: flex; align-items: center; gap: 8px; }

/* Izbirnik iz cenika — vgrajen predal, da ga drseči stolpec ne odreže */
.inv-preset-caret { font-size: 18px !important; margin-left: -2px; transition: transform 0.15s ease; }
.inv-preset-toggle[aria-expanded='true'] .inv-preset-caret { transform: rotate(180deg); }
.inv-preset-panel {
  background: #fff;
  border: 1px solid #dde5ea;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(24 57 68 / 0.05);
  padding: 10px;
  margin-bottom: 10px;
}
.inv-preset-search { margin-bottom: 8px; }
.inv-preset-list {
  max-height: 200px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px;
}
.inv-preset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
  color: #183944;
  cursor: pointer;
}
.inv-preset-item:hover { background: #f1f6f9; }
.inv-preset-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-preset-price { flex-shrink: 0; font-variant-numeric: tabular-nums; color: #5c6b73; font-weight: 600; }
.inv-preset-item[hidden] { display: none; }
.inv-th-actions { width: 1%; white-space: nowrap; text-align: right; }
.inv-row-actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  white-space: nowrap;
}
.inv-row-action {
  border: 0;
  background: transparent;
  color: #5c6b73;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  gap: 5px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 12.5px/1 var(--font-sans);
  text-decoration: none;
}
.inv-row-action:hover { background: #eef3f7; color: #183944; }
.inv-row-action:disabled { opacity: 0.4; cursor: not-allowed; }
.inv-row-action .material-symbols-outlined { font-size: 18px; }
/* Labels are the point; drop to icon-only only when the table gets tight. */
@media (max-width: 1180px) {
  .inv-row-action-label { display: none; }
  .inv-row-action { padding: 0; }
}
/* Postavke kot tabela */
.inv-items-table {
  border: 1px solid #e2e9ee;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.inv-items-thead,
.inv-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 104px 82px 104px 36px;
  gap: 10px;
  align-items: center;
}
.inv-items-thead {
  padding: 9px 12px;
  background: #f6f9fb;
  border-bottom: 1px solid #e8eef2;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7b8c96;
}
.inv-items-thead .r { text-align: right; }
.inv-item-row { padding: 8px 12px; }
.inv-item-row + .inv-item-row { border-top: 1px solid #f0f4f6; }
.inv-item-row:hover { background: #fcfdfe; }
.inv-item-cell { min-width: 0; }
.inv-item-cell .ta-input { width: 100%; }
.inv-item-cell .inv-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 8px;
  padding-right: 10px;
}
.inv-item-amount {
  text-align: right;
  font-size: 14px;
  font-weight: 650;
  color: #183944;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.inv-item-remove {
  border: 0;
  background: transparent;
  color: #a8b6bf;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
}
.inv-item-remove .material-symbols-outlined { font-size: 18px; }
.inv-item-remove:hover { background: #fdeceb; color: #b42318; }

/* Stranski stolpec */
.inv-side {
  padding: 20px 24px 24px;
  border-left: 1px solid #e8edf1;
  background: #f6f9fb;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
}
.inv-side-card {
  background: #fff;
  border: 1px solid #e4ebef;
  border-radius: 12px;
  padding: 14px 16px;
}
.inv-side-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7b8c96;
}
.inv-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #5c6b73;
  padding: 3px 0;
}
.inv-summary-row span:last-child { font-variant-numeric: tabular-nums; color: #2c4550; font-weight: 600; }
.inv-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid #e8eef2;
  font-size: 13px;
  font-weight: 600;
  color: #5c6b73;
}
.inv-summary-total strong {
  font-size: 22px;
  font-weight: 700;
  color: #183944;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.inv-switch { margin-top: 10px; }
.inv-note { resize: vertical; min-height: 72px; }

/* Noga */
.inv-modal-foot {
  flex-shrink: 0;
  padding: 14px 24px;
  border-top: 1px solid #e8edf1;
  background: #fff;
}
.inv-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.inv-modal-actions-left,
.inv-modal-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inv-form-error {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fdeceb;
  border: 1px solid #f5c9c5;
  font-size: 13px;
}
.ta-btn--sm {
  min-height: 2.25rem;
  padding: 6px 10px;
  font-size: 13px;
}
/* Row density — list rows (Potek dneva, tables) where 44px would dominate. */
.ta-btn--xs {
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 5px;
  font: 600 11.5px/1 var(--font-sans);
}
.ta-btn--ghost.ta-btn--xs {
  padding: 5px 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ta-btn .material-symbols-outlined { font-size: 18px; vertical-align: middle; }
.ta-btn--xs .material-symbols-outlined { font-size: 15px; }

.ph-rail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ph-rail-card-head .ph-rail-title { margin: 0; }
.ph-rail-link {
  font-size: 12px;
  font-weight: 600;
  color: #1f6b82;
  text-decoration: none;
}
.ph-rail-link:hover { text-decoration: underline; }
.ph-rail-link--block { display: inline-block; margin-top: 10px; }
.ph-inv-list { list-style: none; margin: 0; padding: 0; }
.ph-inv-list li + li { border-top: 1px solid #eef2f4; }
.ph-inv-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 8px 0;
  text-decoration: none;
  color: inherit;
}
.ph-inv-list a:hover { background: #f7fafb; }
.ph-inv-num { font-weight: 650; font-size: 13px; color: #183944; }
.ph-inv-meta { grid-column: 1; font-size: 12px; color: #6b7c86; }
.ph-inv-status {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 11px;
  font-weight: 650;
  border-radius: 999px;
  padding: 2px 7px;
}
.ph-inv-status--issued { background: #fff4e5; color: #9a5b00; }
.ph-inv-status--paid { background: #e7f6ee; color: #1b6b3a; }
.ph-inv-status--storno { background: #f1f3f5; color: #5c6b73; }
.ph-inv-status--draft { background: #eef3f7; color: #3d5a6c; }

.appt-item--vacation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  margin-bottom: 8px;
}
.appt-item--vacation .appt-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.appt-item--vacation strong { color: #334155; font-size: 14px; }
.appt-item--vacation .appt-item-meta { color: #64748b; font-size: 12px; }

@media (max-width: 1000px) {
  .inv-modal-body {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    overflow-y: auto;
  }
  /* Skupno drsenje: vrstici se morata raztegniti čez vsebino, ne skrčiti nanjo. */
  .inv-main,
  .inv-side {
    overflow: visible;
    min-height: auto;
  }
  .inv-side {
    border-left: 0;
    border-top: 1px solid #e8edf1;
    padding: 16px 24px 24px;
  }
}

@media (max-width: 720px) {
  .inv-modal-dialog { width: 100%; max-width: 100%; max-height: 96vh; }
  .inv-modal-header,
  .inv-main,
  .inv-side,
  .inv-modal-foot { padding-left: 16px; padding-right: 16px; }
  .inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-col-full,
  .inv-col-3,
  .inv-col-city { grid-column: span 2; }
  .inv-col-2,
  .inv-col-postcode { grid-column: span 1; }

  /* Postavke: iz tabele v zložene kartice — glava tabele odpade. */
  .inv-items-thead { display: none; }
  .inv-item-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 12px;
    position: relative;
  }
  .inv-item-row + .inv-item-row { border-top: 1px solid #e8eef2; }
  .inv-item-desc { grid-column: 1 / -1; padding-right: 34px; }
  .inv-item-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #7b8c96;
    margin-bottom: 3px;
  }
  .inv-item-amount {
    grid-column: 1 / -1;
    text-align: right;
    padding-top: 4px;
    border-top: 1px dashed #eef2f5;
  }
  .inv-item-remove { position: absolute; top: 10px; right: 8px; }
  .inv-modal-actions { flex-direction: column; align-items: stretch; }
  .inv-modal-actions-left,
  .inv-modal-actions-right { width: 100%; }
  .inv-modal-actions-right > .ta-btn { flex: 1 1 0; justify-content: center; }
}

/* Header badge for Nova naročila */
.app-header-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #c4781a;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.app-header-nav-link--active .app-header-nav-badge {
  background: #8a4e0c;
}

/* Nova naročila page */
.bookings-page .bookings-list-lead {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-secondary);
}
.bookings-list-body {
  padding: 0 !important;
}
.bookings-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 14rem;
  padding: 2rem;
  color: var(--color-muted);
  text-align: center;
}
.bookings-empty .material-symbols-outlined {
  font-size: 2rem;
  opacity: 0.5;
}
.bookings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bookings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
}
.bookings-row:last-child {
  border-bottom: 0;
}
.bookings-row-main {
  min-width: 0;
  flex: 1;
}
.bookings-row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
}
.bookings-row-name {
  font-size: 0.95rem;
}
.bookings-row-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9a5b12;
  background: #f4e4c8;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.bookings-row-badge--paid {
  color: #1f6b45;
  background: #e6f5ec;
}
.bookings-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.bookings-row-notes {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: #5c5346;
}
.bookings-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .bookings-row {
    flex-direction: column;
  }
  .bookings-row-actions {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Settings — sidebar shell + panels
   ═══════════════════════════════════════════════════════════════ */

.settings-page .ta-page-inner {
  max-width: 82rem;
  margin-inline: auto;
}

.set-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 900px) {
  .set-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.set-nav {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

@media (min-width: 900px) {
  .set-nav {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
    padding-right: 0.25rem;
  }
}

.set-nav-group-title {
  margin: 0 0 0.4rem;
  padding-left: 0.625rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted-2);
}

.set-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.set-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.375rem;
  padding: 0 0.625rem;
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.set-nav-item:hover {
  background: #eef2f4;
  color: var(--color-text);
}

.set-nav-item.is-active {
  background: var(--color-primary-soft);
  border-left-color: var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: var(--weight-semibold);
}

.set-nav-icon {
  font-size: 1.125rem;
  color: var(--color-muted-2);
  flex-shrink: 0;
}

.set-nav-item.is-active .set-nav-icon { color: var(--color-primary); }

.set-nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* unsaved-changes marker on the owning section */
.set-nav-dot {
  width: 0.4rem;
  height: 0.4rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--color-warn);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.set-nav-item.is-dirty .set-nav-dot { opacity: 1; }

/* Mobile: horizontal chip rail */
@media (max-width: 899px) {
  .set-nav {
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -1rem;
    padding: 0 1rem 0.25rem;
  }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav-group-title { display: none; }
  .set-nav-group + .set-nav-group {
    padding-left: 0.5rem;
    border-left: 1px solid var(--color-border);
  }
  .set-nav-list { flex-direction: row; gap: 0.375rem; }
  .set-nav-item {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    white-space: nowrap;
    padding: 0 0.875rem;
  }
  .set-nav-item.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
  }
  .set-nav-icon { display: none; }
}

/* ── Content column ──────────────────────────────────────────── */
.set-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.set-panels {
  display: contents;
}

.set-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.set-panel[hidden] { display: none; }

.set-panel-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: #fafbfc;
}

.set-panel-head--toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.set-panel-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 16rem;
  max-width: 24rem;
}

.set-panel-title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.set-panel-desc {
  margin: 0.2rem 0 0;
  font-size: var(--text-secondary);
  line-height: var(--leading-snug);
  color: var(--color-muted);
  max-width: 68ch;
}

.set-panel-body { padding: 1.25rem; }

.set-panel-body--flush {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.set-panel-body--flush > .set-note,
.set-panel-body--flush > .set-inline-form,
.set-panel-body--flush > .set-inline-error,
.set-panel-body--flush > .set-filterbar,
.set-panel-body--flush > .set-pager,
.set-panel-body--flush > .set-empty {
  margin-inline: 1.25rem;
}

/* ── Sections inside a panel ─────────────────────────────────── */
.set-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.set-section--first,
.set-panel-body > .set-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.set-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted-2);
}

.set-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.set-section-head .set-section-title { margin-bottom: 0.15rem; }
.set-section-head .ta-hint { margin: 0; }

/* ── Field grid ──────────────────────────────────────────────── */
.set-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem 1.25rem;
  align-items: start;
}

.set-fields--end { align-items: end; }

.set-field--full { grid-column: 1 / -1; }
.set-field--md { max-width: 24rem; }
.set-field--narrow { max-width: 11rem; }

.set-fields > .ta-field > .ta-hint { margin-top: -0.15rem; }

textarea.ta-input {
  min-height: 4.5rem;
  line-height: var(--leading-normal);
  resize: vertical;
}

/* ── Logo picker ─────────────────────────────────────────────── */
.set-logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.set-logo-preview {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px dashed #c9d3d8;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(45deg, #f4f7f8 25%, transparent 25%, transparent 75%, #f4f7f8 75%) 0 0 / 12px 12px,
    linear-gradient(45deg, #f4f7f8 25%, #fff 25%, #fff 75%, #f4f7f8 75%) 6px 6px / 12px 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.set-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.set-logo-placeholder {
  font-size: 2rem;
  color: #c2cdd3;
}

.set-logo-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.set-logo-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.set-logo-buttons .ta-btn { cursor: pointer; }

/* ── Copy row (public booking URL) ───────────────────────────── */
.set-copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.set-copy-row .ta-input {
  flex: 1 1 18rem;
  min-width: 0;
  background: #f7f9fa;
  color: var(--color-text-secondary);
}

/* ── Pricing rows ────────────────────────────────────────────── */
.set-pkg-head,
.set-pkg-row {
  display: grid;
  grid-template-columns: 8rem 8.5rem minmax(0, 1fr) 2.25rem;
  gap: 0.5rem;
  align-items: center;
}

.set-pkg-head {
  padding: 0 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted-2);
}

.set-pkg-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.set-pkg-cell { position: relative; }

.set-pkg-cell .ta-input { padding-right: 2.5rem; }

.set-pkg-unit {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-muted-2);
  pointer-events: none;
}

.set-pkg-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted-2);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}

.set-pkg-remove:hover {
  color: #b42318;
  background: #fef3f2;
}

.set-pkg-remove .material-symbols-outlined { font-size: 1.125rem; }

@media (max-width: 640px) {
  .set-pkg-head { display: none; }
  .set-pkg-row {
    grid-template-columns: 1fr 1fr 2.25rem;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }
  .set-pkg-row > [data-pkg-label] { grid-column: 1 / -1; order: -1; }
}

/* ── Notes / callouts ────────────────────────────────────────── */
.set-note {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #f7f9fa;
  font-size: var(--text-secondary);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.set-note--inset { margin-bottom: 1rem; }

.set-note .material-symbols-outlined {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
  color: var(--color-muted-2);
}

.set-note--ok {
  border-color: #bfdccd;
  background: var(--color-success-soft);
  color: #1d4d3a;
}

.set-note--ok .material-symbols-outlined { color: var(--color-success); }

.set-note--info {
  border-color: #cfe0e7;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.set-note--info .material-symbols-outlined { color: var(--color-primary); }

.set-note code {
  font-size: 0.8125rem;
  padding: 0.05rem 0.3rem;
  border: 1px solid rgb(22 35 42 / 0.1);
  border-radius: 0.25rem;
  background: rgb(255 255 255 / 0.7);
}

.set-note a { color: inherit; text-underline-offset: 2px; }

/* ── Sticky action bar ───────────────────────────────────────── */
.set-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.75rem 1.125rem;
  padding-bottom: calc(0.75rem + var(--safe-bottom));
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 -6px 18px rgb(22 35 42 / 0.07);
}

.set-actionbar .ta-status {
  margin: 0 auto 0 0;
  min-width: 0;
}

/* ── Catalog / mail-log helpers ──────────────────────────────── */
.set-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.set-inline-form .ta-field { flex: 1 1 16rem; }

.set-inline-error {
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: #fef3f2;
  color: #b42318;
  font-size: var(--text-secondary);
}

.set-inline-error.hidden { display: none; }

.set-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.set-filterbar .ta-field { flex: 1 1 10rem; }
.set-filterbar .set-field--narrow { flex: 0 1 11rem; }

.set-filterbar-actions {
  flex: 0 0 auto;
  flex-direction: row;
  gap: 0.5rem;
}

.set-table-time { white-space: nowrap; color: var(--color-muted); }

.set-table-subject {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #eef2f4;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.set-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 18rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-pill .material-symbols-outlined { font-size: 0.875rem; }

.set-pill--ok { background: var(--color-success-soft); color: #1d4d3a; }
.set-pill--err { background: #fef3f2; color: #b42318; }

.set-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 0;
}

.set-pager .ta-hint { margin: 0; }

.set-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem 3rem;
  color: var(--color-muted);
  text-align: center;
}

.set-empty .material-symbols-outlined {
  font-size: 2rem;
  color: #c2cdd3;
}

.set-empty p { margin: 0; font-size: var(--text-secondary); }

/* ── Reused primitives, re-tuned for the panel width ─────────── */
.settings-page .ta-hours-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 0.5rem;
  margin-top: 0;
}

.settings-page .ta-hours-input { width: 6.75rem; }

.settings-page .ta-switch-list .ta-switch:first-child { padding-top: 0; }
.settings-page .ta-switch-list .ta-switch:last-child { padding-bottom: 0; }

.vac-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0;
}

.vac-form-date { flex: 0 0 9.5rem; }
.vac-form-note { flex: 1 1 14rem; min-width: 0; }

.vac-form-submit { white-space: nowrap; }

/* Buttons sitting on a field baseline match input height */
.vac-form-submit,
.set-copy-row .ta-btn,
.set-filterbar .ta-btn,
.set-inline-form .ta-btn {
  min-height: 2.75rem !important;
}

@media (max-width: 560px) {
  .vac-form-date { flex: 1 1 8rem; }
  .vac-form-submit { width: 100%; }
}

.set-actionbar .ta-btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

/* `hidden` must beat component display rules (e.g. .ta-btn inline-flex) */
[hidden] { display: none !important; }