/**
 * DCOS styles
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Brand — Armamento gold (aligned with css/theme.css) */
  --primary: #C9A84B;
  --primary-dark: #A88B2E;
  --primary-light: #E8D48B;
  --secondary: #D4AF37;
  --accent: #22C55E;

  /* Surfaces */
  --bg: #F7F4EC;
  --bg-subtle: #F3EEDF;
  --card: #FFFFFF;
  --card-hover: #FBF8F0;
  --border: rgba(140, 112, 30, 0.28);
  --border-strong: rgba(140, 112, 30, 0.42);

  /* Text */
  --text: #1b1710;
  --text-secondary: #3d3628;
  --muted: #5f5849;
  --muted-light: #7a7160;

  /* Semantic */
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #C9A84B;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(60, 45, 10, 0.04);
  --shadow-sm: 0 1px 3px rgba(60, 45, 10, 0.06), 0 1px 2px rgba(60, 45, 10, 0.04);
  --shadow-md: 0 4px 12px rgba(60, 45, 10, 0.08), 0 2px 4px rgba(60, 45, 10, 0.04);
  --shadow-lg: 0 12px 32px rgba(60, 45, 10, 0.1), 0 4px 12px rgba(60, 45, 10, 0.05);
  --shadow-xl: 0 20px 48px rgba(60, 45, 10, 0.12);
  --shadow-primary: 0 8px 24px rgba(201, 168, 75, 0.28);

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.2s;
}

/* ========== BASE ========== */
body {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

/* ========== LIGHT MODE ========== */
html.light body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  color-scheme: light;
}

html.light .bg-slate-950 { background-color: var(--bg) !important; }
html.light .bg-slate-900 { background-color: var(--card) !important; }
html.light .bg-slate-800 { background-color: var(--bg-subtle) !important; }
html.light .bg-slate-950\/80 { background-color: rgba(248, 250, 252, 0.95) !important; }

html.light .border-slate-800,
html.light .border-slate-700,
html.light .border-slate-800\/50 { border-color: var(--border) !important; }
html.light .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
html.light .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

html.light .text-white { color: var(--text) !important; }
html.light .text-slate-100 { color: var(--text) !important; }
html.light .text-slate-200 { color: var(--text-secondary) !important; }
html.light .text-slate-300 { color: var(--text-secondary) !important; }
html.light .text-slate-400 { color: var(--muted) !important; }
html.light .text-slate-500 { color: var(--muted-light) !important; }
html.light .text-slate-600 { color: var(--muted-light) !important; }

html.light .form-input,
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html.light .form-input::placeholder,
html.light input::placeholder { color: var(--muted-light) !important; }

html.light #auth-overlay { background-color: #090b10 !important; background-image: url('../images/armamento-login-bg.jpg') !important; background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; }
html.light #app-sidebar { background-color: var(--card) !important; box-shadow: var(--shadow-sm); }
html.light header { background-color: var(--card) !important; box-shadow: var(--shadow-xs); }
html.light #main-content-area { background-color: var(--bg) !important; }

/* Sidebar nav light */
html.light .nav-link { color: var(--muted) !important; }
html.light .nav-link:hover { background-color: rgba(201, 168, 75, 0.12) !important; color: var(--primary) !important; }
html.light .nav-link.bg-slate-800,
html.light .nav-link.text-white {
  background: linear-gradient(135deg, #C9A84B 0%, #A88B2E 100%) !important;
  color: #1a1405 !important;
  box-shadow: var(--shadow-primary) !important;
}

/* Cards & panels light elevation */
html.light .stat-card,
html.light [class*="bg-slate-900"][class*="border"][class*="rounded"] {
  box-shadow: var(--shadow-sm);
  border-color: var(--border) !important;
}
html.light .stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #BAE6FD !important;
  transform: translateY(-1px);
}

/* Table light */
html.light thead { background: #F3EEDF !important; }
html.light tbody tr:hover { background-color: rgba(201, 168, 75, 0.08) !important; }

/* Scrollbar light */
html.light ::-webkit-scrollbar-track { background: #F3EEDF; }
html.light ::-webkit-scrollbar-thumb { background: rgba(168, 139, 46, 0.35); border-radius: 3px; }
html.light ::-webkit-scrollbar-thumb:hover { background: rgba(168, 139, 46, 0.55); }

/* ========== DARK MODE refinements ========== */
html.dark body,
html.dark {
  color-scheme: dark;
}

html.dark .stat-card:hover {
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ========== FORMS ========== */
.form-input {
  width: 100%;
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  color: #f8fafc;
  outline: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(201, 168, 75, 0.22);
}
.form-input::placeholder { color: #475569; }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 60px; }

/* Floating label pattern */
.field-float {
  position: relative;
}
.field-float input,
.field-float select,
.field-float textarea {
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
}
.field-float label {
  position: absolute;
  left: 0.875rem;
  top: 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  pointer-events: none;
}

/* ========== ANIMATIONS ========== */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes count-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.animate-fade-in { animation: fade-in 0.35s var(--ease); }
.animate-slide-up { animation: slide-up 0.4s var(--ease); }
.animate-scale-in { animation: scale-in 0.3s var(--ease); }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
html.light .skeleton {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
  background-size: 200% 100%;
}
.animate-pulse .bg-slate-800 {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
html.light .animate-pulse .bg-slate-800 {
  background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
  background-size: 200% 100%;
}

/* ========== STAT / KPI CARDS ========== */
.stat-card {
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0;
  transition: opacity var(--duration);
}
.stat-card:hover::before { opacity: 1; }

.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #BAE6FD;
}
.kpi-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.kpi-trend-up { color: var(--success); }
.kpi-trend-down { color: var(--danger); }
.kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.kpi-badge.up { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.kpi-badge.down { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.kpi-badge.neutral { background: rgba(100, 116, 139, 0.12); color: var(--muted); }

/* ========== GLASS ========== */
.glass-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-panel {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(148, 163, 184, 0.08);
}
html.light .glass-card,
html.light .glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: var(--shadow-sm);
}

/* ========== NAV ========== */
.nav-link {
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration);
  border-radius: var(--radius-md);
  font-weight: 500;
}
.nav-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-light);
  padding: 0.75rem 0.75rem 0.35rem;
  margin-top: 0.5rem;
}

/* ========== BADGES ========== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.badge-pending { background: rgba(245, 158, 11, 0.15); color: #D97706; }
.badge-confirmed { background: rgba(201, 168, 75, 0.18); color: #A88B2E; }
.badge-arrived { background: rgba(20, 184, 166, 0.15); color: #0D9488; }
.badge-treatment { background: rgba(139, 92, 246, 0.15); color: #7C3AED; }
.badge-completed { background: rgba(16, 185, 129, 0.15); color: #059669; }
.badge-cancelled { background: rgba(239, 68, 68, 0.12); color: #DC2626; }
.badge-active { background: rgba(16, 185, 129, 0.12); color: #059669; }
.badge-archived { background: rgba(100, 116, 139, 0.12); color: #64748B; }

html.dark .badge-pending { background: rgba(245, 158, 11, 0.2); color: #FBBF24; }
html.dark .badge-confirmed { background: rgba(201, 168, 75, 0.22); color: #E8D48B; }
html.dark .badge-arrived { background: rgba(20, 184, 166, 0.2); color: #2DD4BF; }
html.dark .badge-treatment { background: rgba(139, 92, 246, 0.2); color: #A78BFA; }
html.dark .badge-completed { background: rgba(16, 185, 129, 0.2); color: #34D399; }
html.dark .badge-cancelled { background: rgba(239, 68, 68, 0.2); color: #F87171; }

/* ========== TABLES ========== */
.dcos-table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.dcos-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.875rem 1rem;
}
tbody tr { transition: background-color 0.12s var(--ease); }

/* Filter chips */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--duration);
}
.filter-chip:hover, .filter-chip.active {
  border-color: var(--primary);
  background: rgba(201, 168, 75, 0.12);
  color: var(--primary);
}
html.dark .filter-chip {
  background: #121E33;
  border-color: rgba(201, 168, 75, 0.22);
  color: #A8B0C0;
}
html.dark .filter-chip:hover,
html.dark .filter-chip.active {
  border-color: var(--primary);
  background: rgba(201, 168, 75, 0.14);
  color: #E8D48B;
}

/* ========== BUTTONS ========== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #C9A84B 0%, #A88B2E 100%);
  color: #1a1405;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--shadow-primary);
  transition: all var(--duration) var(--ease);
  cursor: pointer;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(201, 168, 75, 0.38);
  filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  transition: all var(--duration);
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(201, 168, 75, 0.12);
}

/* ========== HERO / PAGE HEADERS ========== */
.page-hero {
  margin-bottom: 1.5rem;
}
.page-hero h1 {
  font-family: 'Cinzel', Georgia, 'Plus Jakarta Sans', Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.75rem;
  line-height: 1.2;
}
.page-hero p {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ========== CHART CONTAINERS ========== */
.chart-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.chart-card h3 {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

/* ========== AUTH ========== */
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: 2rem;
}
html.dark .auth-card {
  background: #0f172a;
  border-color: #1e293b;
}

/* ========== SIDEBAR ========== */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sidebar-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: none;
}

/* ========== MOBILE ========== */
@media (max-width: 767px) {
  .page-hero h1 { font-size: 1.375rem; }
  .kpi-card { padding: 1rem; }
  #app-sidebar {
    box-shadow: var(--shadow-xl);
  }
}

/* Touch targets */
button, a.nav-link, .filter-chip {
  min-height: 36px;
}
@media (pointer: coarse) {
  button, a.nav-link, .filter-chip, input, select {
    min-height: 44px;
  }
}

/* ========== ACCESSIBILITY ========== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ========== PRINT ========== */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
}

/* ========== SAFE AREA ========== */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ========== ODONTOGRAM ========== */
@media (min-width: 640px) {
  .sm\:grid-cols-16 {
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }
}


/* ========== REALISTIC CLINICAL ODONTOGRAM ========== */
.tooth-cell-realistic {
  background: radial-gradient(circle at 50% 8%, rgba(255,255,255,.055), transparent 42%), linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.18);
}
.tooth-svg-realistic {
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.tooth-surf {
  transition: filter .12s ease, opacity .12s ease, stroke-width .12s ease;
}
.tooth-surf:hover {
  filter: brightness(1.08) drop-shadow(0 0 2px rgba(125,211,252,.28));
}
.tooth-surface-selected {
  filter: brightness(1.1) drop-shadow(0 0 4px rgba(56,189,248,.72));
  stroke: #7dd3fc !important;
  stroke-width: 1.15 !important;
}

/* ========== EMPTY STATES ========== */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted);
}
.empty-state-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #E0F2FE, #CCFBF1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--primary);
}
html.dark .empty-state-icon {
  background: rgba(201, 168, 75, 0.15);
  color: #E8D48B;
}

/* ========== TOAST ========== */
body > .fixed.bottom-6.right-6 { margin-bottom: 0; }

/* ========== INVOICE ========== */
.invoice-sheet {
  background: #fff;
  color: #0F172A;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}
.invoice-sheet .invoice-header {
  border-bottom: 2px solid var(--primary);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* ========== TIMELINE ========== */
.timeline {
  position: relative;
  padding-left: 1.5rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 2px;
  background: linear-gradient(180deg, var(--primary), var(--secondary), var(--border));
  border-radius: 1px;
}
.timeline-item {
  position: relative;
  padding-bottom: 1.25rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.28rem;
  top: 0.35rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(201, 168, 75, 0.3);
}
html.dark .timeline-item::before {
  border-color: #0B1426;
}

/* ========== STATUS DOT ========== */
.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
}
.status-dot.live { background: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Card hover */
.card-lift {
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ========== PATIENT WORKSPACE TABS ========== */
.pw-tab {
  color: #94a3b8;
  background: transparent;
}
.pw-tab:hover {
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.6);
}
.pw-tab.active {
  color: #1a1405;
  background: linear-gradient(135deg, #C9A84B 0%, #A88B2E 100%);
  box-shadow: 0 2px 8px rgba(201, 168, 75, 0.3);
}
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* UX simplification: keep secondary/admin tools available without crowding daily navigation. */
.nav-subgroup-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-light);
  padding: 0.15rem 0.55rem 0.3rem;
}
.nav-link-compact { font-size: 0.72rem; }
.nav-admin-group button { border-radius: var(--radius-md); }

/* ========== REBUILD FOUNDATION: CONSISTENT, RESPONSIVE INTERACTION ========== */
:root {
  --focus-ring: 0 0 0 3px rgba(201, 168, 75, 0.25);
}

html { scroll-behavior: smooth; }
body { min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed !important;
  opacity: 0.58;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* Data tables remain readable on narrow screens without breaking page width. */
.dcos-table-wrap, .table-responsive, .overflow-x-auto {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.dcos-table-wrap { overflow-x: auto; }
.dcos-table { min-width: 640px; }

/* Clear loading and error states with predictable visual language. */
[aria-busy="true"] { cursor: progress; }
.error-state {
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.06);
  color: #b91c1c;
  border-radius: var(--radius-lg);
  padding: 1rem;
}
html.dark .error-state { color: #fca5a5; background: rgba(239, 68, 68, 0.09); }
.success-state {
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.07);
  border-radius: var(--radius-lg);
  padding: 1rem;
}

/* Keep modals and long clinical forms usable on phones. */
@media (max-width: 767px) {
  .modal, [role="dialog"] { max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
  .invoice-sheet { padding: 1rem; border-radius: var(--radius-md); }
  .dcos-table-wrap { border-radius: var(--radius-md); }
  .page-hero { gap: 0.75rem; }
}

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

/* ========== READABILITY PASS (light + dark) ==========
   Light mode remaps .text-white to dark text, which made solid colored buttons
   (Approve, Reject, Open inbox, ...) unreadable, and the pastel -300/-400 status
   text colors are far too faint on white cards. Targets WCAG AA (4.5:1). */

/* Solid buttons keep white text (light mode remaps .text-white); mid-tone backgrounds are deepened in BOTH modes to reach AA with white */
html.light .text-white.bg-sky-700,
html.light .text-white.bg-emerald-700,
html.light .text-white.bg-red-600,
html.light .text-white.bg-red-700,
html.light .text-white.bg-red-900,
html.light .text-white.bg-violet-600,
html.light .text-white.bg-violet-700,
html.light .text-white.bg-blue-600 { color: #fff !important; }
html .text-white.bg-sky-600 { color: #fff !important; background-color: #0369a1 !important; }
html .text-white.bg-sky-600:hover { background-color: #075985 !important; }
html .text-white.bg-emerald-600 { color: #fff !important; background-color: #047857 !important; }
html .text-white.bg-emerald-600:hover { background-color: #065f46 !important; }
html .text-white.bg-amber-600 { color: #fff !important; background-color: #b45309 !important; }
html .text-white.bg-amber-600:hover { background-color: #92400e !important; }
html .text-white.bg-green-600 { color: #fff !important; background-color: #15803d !important; }
html .text-white.bg-violet-500 { color: #fff !important; background-color: #6d28d9 !important; }
html .text-white.bg-indigo-500 { color: #fff !important; background-color: #4f46e5 !important; }

/* Light: darker text shades for status / accent text on white and pale cards */
html.light .text-sky-200, html.light .text-sky-300, html.light .text-sky-400 { color: #0369a1 !important; }
html.light .text-emerald-200, html.light .text-emerald-300, html.light .text-emerald-400 { color: #047857 !important; }
html.light .text-red-200, html.light .text-red-300, html.light .text-red-400 { color: #b91c1c !important; }
html.light .text-violet-200, html.light .text-violet-300, html.light .text-violet-400 { color: #6d28d9 !important; }
html.light .text-amber-200, html.light .text-amber-300, html.light .text-amber-400 { color: #92400e !important; }
html.light .text-orange-300, html.light .text-orange-400 { color: #c2410c !important; }
html.light .text-teal-300, html.light .text-teal-400 { color: #0f766e !important; }
html.light .text-rose-300, html.light .text-rose-400 { color: #be123c !important; }
html.light .text-slate-400 { color: #556377 !important; }
html.light .text-slate-500, html.light .text-slate-600 { color: #5b6a7f !important; }
html.light .form-input::placeholder, html.light input::placeholder, html.light textarea::placeholder { color: #64748b !important; opacity: 1; }

/* Dark: placeholders and the dimmest text were below 3:1 on the dark inputs/cards */
html.dark .form-input::placeholder, html.dark input::placeholder, html.dark textarea::placeholder { color: #8391a7 !important; opacity: 1; }
html.dark .text-slate-500, html.dark .text-slate-600 { color: #8391a7 !important; }


/* ========== Responsive UI refinement: phone / tablet / desktop ========== */
:root { color-scheme: light; }
html.dark { color-scheme: dark; }
html, body { min-width: 320px; width: 100%; }
body { overflow-x: hidden; }
button, input, select, textarea { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
#app-container { min-height: 100dvh; height: 100dvh; }
#main-content-area { min-width: 0; overscroll-behavior: contain; }
#app-sidebar { overscroll-behavior: contain; }
#theme-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
/* Let dense clinic tables scroll horizontally rather than break the page layout. */
#main-content-area table { max-width: 100%; }
#main-content-area .overflow-x-auto,
#main-content-area .table-responsive,
#main-content-area .dcos-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#main-content-area td, #main-content-area th { overflow-wrap: anywhere; }
/* Keep generated modules and cards fluid at intermediate widths. */
#main-content-area .grid { min-width: 0; }
#main-content-area [class*="grid-cols-"] > *,
#main-content-area .flex > * { min-width: 0; }
@media (max-width: 767px) {
  #app-container { height: 100dvh; }
  #main-content-area { padding: 1rem !important; }
  #main-content-area h1 { font-size: 1.25rem; line-height: 1.45; }
  #main-content-area h2 { line-height: 1.4; }
  #main-content-area .stat-card,
  #main-content-area .kpi-card { padding: 1rem; }
  #main-content-area button, #main-content-area .btn { min-height: 40px; }
  #app-sidebar { width: min(18rem, 86vw); }
  .auth-card { max-height: calc(100dvh - 2rem); overflow-y: auto; }
  .dcos-table-wrap { border-radius: 0.75rem; }
  .dcos-table { min-width: 600px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  #main-content-area { padding: 1.25rem !important; }
  #app-sidebar { width: 14.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* Portal inherits the same palette and supports both themes. */
html.light .portal-surface { background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; }
html.dark .portal-surface { background: #0f172a !important; color: #f1f5f9 !important; border-color: #334155 !important; }


/* ========== DCOS visual polish v2: consistent surfaces, hierarchy and responsive behavior ========== */
:root {
  --ui-bg: #f5f8fc;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-border: #e2e8f0;
  --ui-text: #172033;
  --ui-muted: #5b6b80;
  --ui-shadow: 0 2px 10px rgba(15, 23, 42, .045);
}
html.light {
  --ui-bg: #f5f8fc;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-border: #e2e8f0;
  --ui-text: #172033;
  --ui-muted: #5b6b80;
}
html.dark {
  --ui-bg: #0b1220;
  --ui-surface: #111b2d;
  --ui-surface-soft: #162236;
  --ui-border: #29364b;
  --ui-text: #e8eef7;
  --ui-muted: #a5b2c6;
}
html, body { width: 100%; max-width: 100%; }
body { background-color: var(--ui-bg); color: var(--ui-text); }
#app-container { min-height: 100dvh; }
#main-content-area { background: var(--ui-bg); color: var(--ui-text); }
#main-content-area h1, #main-content-area h2, #main-content-area h3,
#main-content-area h4 { letter-spacing: -.025em; font-weight: 700; }
#main-content-area h1 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
#main-content-area p { line-height: 1.55; }
#main-content-area .text-slate-500,
#main-content-area .text-slate-600 { color: var(--ui-muted) !important; }

/* Keep panels calm and consistent instead of giving every element a heavy card effect. */
html.light #main-content-area [class*="bg-slate-900"][class*="rounded"],
html.light #main-content-area .stat-card,
html.light #main-content-area .kpi-card,
html.light #portal-main [class*="bg-slate-900"],
html.light #portal-status,
html.light #portal-login {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow);
}
html.dark #main-content-area [class*="bg-slate-900"][class*="rounded"],
html.dark #main-content-area .stat-card,
html.dark #main-content-area .kpi-card,
html.dark #portal-main [class*="bg-slate-900"],
html.dark #portal-status,
html.dark #portal-login {
  background: var(--ui-surface) !important;
  border-color: var(--ui-border) !important;
}
html.light #main-content-area .bg-slate-800,
html.light #portal-main .bg-slate-800 { background: var(--ui-surface-soft) !important; }
html.dark #main-content-area .bg-slate-800,
html.dark #portal-main .bg-slate-800 { background: var(--ui-surface-soft) !important; }

/* Inputs: clear boundaries, consistent height and focus state. */
#main-content-area input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#main-content-area select, #main-content-area textarea,
#portal-main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#portal-main select, #portal-main textarea,
#portal-login input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#portal-login select, #portal-login textarea {
  min-height: 42px;
  border-radius: 10px;
  max-width: 100%;
}
#main-content-area textarea, #portal-main textarea, #portal-login textarea { min-height: 92px; }
#main-content-area label, #portal-main label, #portal-login label {
  line-height: 1.4;
  font-weight: 500;
}
#main-content-area button, #portal-main button, #portal-login button {
  border-radius: 10px;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#main-content-area button:focus-visible, #portal-main button:focus-visible,
#portal-login button:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}

/* Tables remain readable and scroll within their own region on small screens. */
#main-content-area table, #portal-main table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
#main-content-area th, #portal-main th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .025em;
}
#main-content-area td, #main-content-area th,
#portal-main td, #portal-main th {
  padding-top: .75rem;
  padding-bottom: .75rem;
  vertical-align: middle;
}
html.light #main-content-area tbody tr,
html.light #portal-main tbody tr { border-color: var(--ui-border); }
html.dark #main-content-area tbody tr,
html.dark #portal-main tbody tr { border-color: var(--ui-border); }

/* Portal needs its own complete theme; it should not stay dark just because its original markup was dark. */
html.light body:has(#portal-main),
html.light body:has(#portal-login) { background: var(--ui-bg) !important; color: var(--ui-text) !important; }
html.dark body:has(#portal-main),
html.dark body:has(#portal-login) { background: var(--ui-bg) !important; color: var(--ui-text) !important; }
html.light body:has(#portal-main) header,
html.light body:has(#portal-login) header {
  background: var(--ui-surface) !important; border-color: var(--ui-border) !important;
}
html.dark body:has(#portal-main) header,
html.dark body:has(#portal-login) header {
  background: var(--ui-surface) !important; border-color: var(--ui-border) !important;
}
html.light #portal-main .text-white, html.light #portal-login .text-white,
html.light body:has(#portal-main) header .text-white { color: var(--ui-text) !important; }
html.dark #portal-main .text-slate-400, html.dark #portal-login .text-slate-400 { color: var(--ui-muted) !important; }
html.light #portal-main .text-slate-400, html.light #portal-login .text-slate-400 { color: var(--ui-muted) !important; }
#portal-theme-toggle, #theme-toggle { min-width: 42px; min-height: 42px; border: 1px solid var(--ui-border); }

/* Avoid fixed-height clipping on mobile and let content use the available viewport. */
@media (max-width: 640px) {
  #app-container { height: 100dvh; min-height: 100dvh; }
  #main-content-area { padding: 14px !important; }
  #main-content-area .flex.items-center.justify-between { gap: 10px; flex-wrap: wrap; }
  #main-content-area .flex.items-center.justify-between > * { min-width: 0; }
  #main-content-area [class*="grid-cols-"] { grid-template-columns: minmax(0, 1fr) !important; }
  #main-content-area .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #main-content-area .overflow-x-auto,
  #main-content-area .table-responsive { max-width: 100%; }
  #main-content-area input, #main-content-area select, #main-content-area textarea { font-size: 16px; }
  #portal-main { padding: 14px !important; }
  #portal-main .grid { grid-template-columns: minmax(0, 1fr) !important; }
  #portal-main .flex.items-center.justify-between { flex-wrap: wrap; gap: 10px; }
  #portal-main button, #portal-login button { min-height: 42px; }
  .modal, [role="dialog"] { max-width: calc(100vw - 20px); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  #main-content-area { padding: 20px !important; }
  #portal-main { padding: 20px !important; }
}


/* ===== Responsive deep fix v3: real compact layout, not scaled desktop ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
#app-container { width: 100%; max-width: 100vw; min-width: 0; }
#app-sidebar { flex: 0 0 16rem; }
#main-content-area { min-width: 0; width: 100%; }
#main-content-area > * { min-width: 0; max-width: 100%; }
#main-content-area .overflow-x-auto { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
#main-content-area table { min-width: 100%; }
#main-content-area td, #main-content-area th { overflow-wrap: anywhere; }
#main-content-area button { max-width: 100%; white-space: normal; }
#main-content-area .flex-wrap { row-gap: .5rem; }
#main-content-area input, #main-content-area select, #main-content-area textarea { min-width: 0; }

/* Staff directory: prevent tiny action buttons and broken phone-number wrapping. */
#staff-table-body td:last-child > div,
#staff-table-body td:last-child .flex { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
#staff-table-body td:last-child button { min-height: 36px; padding: .5rem .65rem; line-height: 1.25; }
#staff-table-body td:first-child { min-width: 170px; }
#staff-table-body td:nth-child(2) { min-width: 95px; }
#staff-table-body td:nth-child(3) { min-width: 120px; }

/* Main navigation becomes an actual off-canvas menu on narrow devices. */
@media (max-width: 767px) {
  #app-container { height: 100dvh; min-height: 100dvh; overflow: hidden; }
  #app-sidebar {
    position: fixed !important; top: 0; bottom: 0; left: 0;
    width: min(84vw, 300px) !important; max-width: 300px;
    z-index: 60; flex-basis: auto;
  }
  #app-sidebar.-translate-x-full { transform: translateX(-100%) !important; }
  #sidebar-backdrop:not(.hidden) { display: block; z-index: 55; }
  #main-content-area { padding: 14px !important; }
  #main-content-area h1 { font-size: 1.35rem !important; line-height: 1.3; }
  #main-content-area h2 { font-size: 1.1rem; }
  #main-content-area .grid:not(.keep-mobile-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  #main-content-area .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #main-content-area .flex.items-center.justify-between { align-items: flex-start; }
  #main-content-area .overflow-x-auto { max-width: 100%; }
  #main-content-area table { min-width: 560px; }
  #main-content-area input:not([type=checkbox]):not([type=radio]),
  #main-content-area select, #main-content-area textarea { font-size: 16px !important; }
  #staff-table-body td:last-child button { min-height: 40px; }
  #staff-table-body td:first-child { min-width: 0; }
  #staff-table-body td:nth-child(2), #staff-table-body td:nth-child(3) { min-width: 0; }
  /* Staff rows become readable cards; no more desktop table squeezed to phone width. */
  #main-content-area table:has(#staff-table-body) { min-width: 0; }
  #main-content-area table:has(#staff-table-body) thead { display: none; }
  #staff-table-body { display: block; padding: 10px; }
  #staff-table-body > tr {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px; margin: 0 0 12px;
    border: 1px solid var(--ui-border); border-radius: 14px;
    background: var(--ui-surface); box-shadow: var(--ui-shadow);
  }
  #staff-table-body > tr:last-child { margin-bottom: 0; }
  #staff-table-body > tr > td {
    display: block !important; width: 100%; min-width: 0 !important;
    padding: 0 !important; border: 0 !important;
  }
  #staff-table-body > tr > td:first-child { padding-bottom: 7px !important; }
  #staff-table-body > tr > td:nth-child(2)::before { content: "ROLE"; display: block; color: var(--ui-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-bottom: 4px; }
  #staff-table-body > tr > td:nth-child(3)::before { content: "CONTACT"; display: block; color: var(--ui-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-bottom: 4px; }
  #staff-table-body > tr > td:nth-child(4)::before { content: "EMAIL"; display: block; color: var(--ui-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-bottom: 4px; }
  #staff-table-body > tr > td:last-child { padding-top: 8px !important; border-top: 1px solid var(--ui-border) !important; }
  #staff-table-body > tr > td:last-child > div,
  #staff-table-body > tr > td:last-child .flex { justify-content: flex-start; }
  #staff-table-body > tr > td[colspan] { padding: 20px !important; }
  #main-content-area .bg-slate-900.border { border-radius: 16px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  #app-sidebar { width: 14rem; flex-basis: 14rem; }
  #main-content-area { padding: 20px !important; }
  #main-content-area .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main-content-area .grid.grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #staff-table-body td:last-child button { padding: .45rem .55rem; font-size: .75rem; }
}
@media (min-width: 1101px) {
  #main-content-area { padding: 28px !important; }
  #staff-table-body td:last-child > div,
  #staff-table-body td:last-child .flex { justify-content: flex-end; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Responsive cleanup patch — appended to css/custom.css.
   Consolidates edge-case behavior without changing application logic. */
* , *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; min-width: 320px; margin: 0; overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }
#app-container { width: 100%; max-width: 100%; min-width: 0; }
#app-sidebar { min-width: 0; }
#main-content-area { min-width: 0; max-width: 100%; flex: 1 1 0%; overflow-x: clip; }
#main-content-area > *, #portal-main > *, #portal-login > * { min-width: 0; max-width: 100%; }
#main-content-area .grid, #portal-main .grid { min-width: 0; }
#main-content-area .grid > *, #portal-main .grid > *, #main-content-area .flex > *, #portal-main .flex > * { min-width: 0; }
#main-content-area input, #main-content-area select, #main-content-area textarea,
#portal-main input, #portal-main select, #portal-main textarea,
#portal-login input, #portal-login select, #portal-login textarea { max-width: 100%; }
/* Keep dense tables scrollable only inside their own wrappers; never force every table wider than the viewport. */
#main-content-area table, #portal-main table { width: 100%; max-width: 100%; min-width: 0; }
#main-content-area .overflow-x-auto table,
#main-content-area .table-responsive table,
#main-content-area .dcos-table-wrap table,
#portal-main .overflow-x-auto table,
#portal-main .table-responsive table,
#portal-main .dcos-table-wrap table { min-width: 560px; }
#main-content-area .overflow-x-auto, #main-content-area .table-responsive,
#main-content-area .dcos-table-wrap, #portal-main .overflow-x-auto,
#portal-main .table-responsive, #portal-main .dcos-table-wrap {
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
#main-content-area td, #main-content-area th, #portal-main td, #portal-main th { overflow-wrap: anywhere; }
.modal, [role="dialog"] { max-width: min(96vw, 56rem); max-height: calc(100dvh - 2rem); overflow-x: hidden; overflow-y: auto; }
#portal-main, #portal-login { width: 100%; min-width: 0; }
#portal-main .portal-surface, #portal-login .portal-surface { min-width: 0; max-width: 100%; }

@media (max-width: 767px) {
  #app-container { height: 100dvh; min-height: 100dvh; overflow: hidden; }
  #main-content-area { width: 100%; padding: 14px !important; overflow-y: auto; overscroll-behavior-y: contain; }
  #main-content-area .flex.items-center.justify-between,
  #portal-main .flex.items-center.justify-between { flex-wrap: wrap; gap: .625rem; }
  #main-content-area .grid:not(.keep-mobile-grid), #portal-main .grid:not(.keep-mobile-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  #main-content-area .grid.grid-cols-2, #portal-main .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #main-content-area button, #portal-main button, #portal-login button { min-height: 42px; }
  #main-content-area input:not([type="checkbox"]):not([type="radio"]),
  #main-content-area select, #main-content-area textarea,
  #portal-main input:not([type="checkbox"]):not([type="radio"]), #portal-main select, #portal-main textarea,
  #portal-login input:not([type="checkbox"]):not([type="radio"]), #portal-login select, #portal-login textarea { font-size: 16px !important; }
  #app-sidebar { width: min(84vw, 300px) !important; max-width: 300px; }
  .auth-card { width: min(100%, 28rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
  .modal, [role="dialog"] { width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 1rem); margin-inline: auto; }
  /* Staff list uses cards on phones; its special conversion remains enabled. */
  #main-content-area table:has(#staff-table-body) { min-width: 0; }
  #main-content-area table:has(#staff-table-body) #staff-table-body { min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  #app-sidebar { width: 14rem; flex: 0 0 14rem; }
  #main-content-area { padding: 20px !important; }
  #main-content-area .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main-content-area .grid.grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modal, [role="dialog"] { max-width: min(94vw, 52rem); }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  #app-sidebar { flex: 0 0 15rem; }
  #main-content-area { padding: 24px !important; }
}
@media (min-width: 1280px) {
  #main-content-area { padding: clamp(24px, 2vw, 36px) !important; }
}
@media (max-width: 359px) {
  #main-content-area, #portal-main { padding: 10px !important; }
  #main-content-area .grid.grid-cols-2, #portal-main .grid.grid-cols-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .modal, [role="dialog"] { width: calc(100vw - 12px); max-width: calc(100vw - 12px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  #app-container { height: 100dvh; min-height: 100dvh; }
  #main-content-area { overflow-y: auto; }
  .modal, [role="dialog"], .auth-card { max-height: calc(100dvh - 12px); }
}



/* Billing table mobile readability hotfix.
   Keep invoice columns readable and prevent per-character wrapping on phones.
   Horizontal scrolling is confined to the invoice table wrapper. */
#main-content-area .overflow-x-auto:has(#billing-table-body) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 0;
}
#main-content-area table:has(#billing-table-body) {
  width: 100%;
  min-width: 780px;
  table-layout: auto;
}
#billing-table-body > tr > td,
#main-content-area table:has(#billing-table-body) thead th {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none;
}
#main-content-area table:has(#billing-table-body) thead th,
#billing-table-body > tr > td:not(:nth-child(2)) {
  white-space: nowrap;
}
#billing-table-body > tr > td:first-child { min-width: 120px; }
#billing-table-body > tr > td:nth-child(2) {
  min-width: 190px;
  white-space: normal;
  overflow-wrap: break-word !important;
}
#billing-table-body > tr > td:nth-child(5),
#billing-table-body > tr > td:nth-child(6) { min-width: 100px; }
#billing-table-body > tr > td:nth-child(7) { min-width: 90px; }
#billing-table-body > tr > td:last-child { min-width: 140px; }
#billing-table-body > tr > td:last-child > div { white-space: nowrap; }

@media (max-width: 767px) {
  #main-content-area table:has(#billing-table-body) { min-width: 780px !important; }
  #billing-table-body > tr > td,
  #main-content-area table:has(#billing-table-body) thead th {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #billing-table-body > tr > td:nth-child(2) { min-width: 190px; }
  #billing-table-body > tr > td:last-child button {
    min-width: 36px;
    min-height: 40px;
    flex: 0 0 auto;
  }
}


/* Billing table — phone card layout (<768px).
   Same idea as the Staff list: each invoice becomes a card, so Total / Paid / Status
   and the action buttons are visible without sideways scrolling.
   CSS only — billing.js markup and logic are unchanged. Tablet/desktop keep the table. */
@media (max-width: 767px) {
  #main-content-area .overflow-x-auto:has(#billing-table-body) { overflow-x: visible; overflow-y: visible; }
  #main-content-area table:has(#billing-table-body) {
    display: block; width: 100%; min-width: 0 !important; table-layout: auto;
  }
  #main-content-area table:has(#billing-table-body) thead { display: none; }
  #main-content-area table:has(#billing-table-body) #billing-table-body { display: block; padding: 10px; }

  #billing-table-body > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px; row-gap: 8px; align-items: start;
    padding: 14px; margin: 0 0 12px;
    border: 1px solid var(--ui-border, #1e293b); border-radius: 14px;
    background: var(--ui-surface, #0f172a); box-shadow: var(--ui-shadow, none);
  }
  #billing-table-body > tr:last-child { margin-bottom: 0; }
  #billing-table-body > tr > td {
    display: block !important; width: auto; min-width: 0 !important;
    padding: 0 !important; border: 0 !important;
    white-space: normal; overflow-wrap: break-word !important;
  }
  /* 1 invoice # | 7 status */
  #billing-table-body > tr > td:nth-child(1) { grid-column: 1; grid-row: 1; }
  #billing-table-body > tr > td:nth-child(7) { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  /* 2 patient (+ payment history) */
  #billing-table-body > tr > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  /* 3 source stays hidden on phones; 4 date */
  #billing-table-body > tr > td:nth-child(3) { display: none !important; }
  #billing-table-body > tr > td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  #billing-table-body > tr > td:nth-child(4)::before { content: "DATE  "; }
  /* 5 total | 6 paid */
  #billing-table-body > tr > td:nth-child(5) { grid-column: 1; grid-row: 4; }
  #billing-table-body > tr > td:nth-child(6) { grid-column: 2; grid-row: 4; }
  #billing-table-body > tr > td:nth-child(5)::before,
  #billing-table-body > tr > td:nth-child(6)::before {
    display: block; margin-bottom: 2px; color: var(--ui-muted, #64748b);
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
  }
  #billing-table-body > tr > td:nth-child(4)::before { color: var(--ui-muted, #64748b); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
  #billing-table-body > tr > td:nth-child(5)::before { content: "TOTAL"; }
  #billing-table-body > tr > td:nth-child(6)::before { content: "PAID"; }
  /* 8 actions: full-width row, wraps instead of scrolling */
  #billing-table-body > tr > td:last-child {
    grid-column: 1 / -1; grid-row: 5; text-align: left;
    padding-top: 10px !important; border-top: 1px solid var(--ui-border, #1e293b) !important;
  }
  #billing-table-body > tr > td:last-child > div { display: flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
  #billing-table-body > tr > td:last-child button { min-width: 44px; min-height: 44px; flex: 0 0 auto; }
  /* Loading / empty row */
  #billing-table-body > tr > td[colspan] {
    grid-column: 1 / -1; grid-row: auto; padding: 20px !important;
    text-align: center; border-top: 0 !important;
  }
}

/* ==========================================================================
   DCOS Full Responsive Hardening (Oct 2026)
   Phone / tablet / desktop + touch targets + charting + queue cards
   ========================================================================== */

/* --- Universal touch & overflow safety --- */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#app-container, #main-content-area, #portal-main { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Minimum comfortable touch targets on coarse pointers (phones/tablets) */
@media (pointer: coarse) {
  button, a.nav-link, .filter-chip, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Icon-only action buttons in tables still need space */
  #main-content-area td button, #portal-main td button {
    min-height: 40px;
    min-width: 40px;
    padding: 0.4rem 0.55rem;
  }
}

/* --- Dental Charting: larger, more tappable teeth on mobile --- */
.tooth-cell, .tooth-cell-realistic {
  flex: 0 0 auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.tooth-cell-realistic {
  width: 78px;
}
@media (max-width: 480px) {
  .tooth-cell-realistic {
    width: 86px !important;
    padding: 6px !important;
  }
  #odontogram-upper, #odontogram-lower {
    gap: 8px !important;
    justify-content: center;
  }
  /* Slightly larger surface hit areas via SVG scale feel */
  .tooth-svg-realistic {
    min-height: 72px;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
  .tooth-cell-realistic {
    width: 82px !important;
  }
}
@media (min-width: 768px) {
  .tooth-cell-realistic {
    width: 88px;
  }
}
/* Chart legend chips: wrap cleanly + larger tap area on phone */
#chart-legend .chart-cond-btn,
.chart-cond-btn {
  min-height: 36px;
  touch-action: manipulation;
}
@media (max-width: 640px) {
  #chart-legend .chart-cond-btn,
  .chart-cond-btn {
    min-height: 42px;
    padding: 0.45rem 0.7rem !important;
    font-size: 12px !important;
  }
  /* Chart action row (Print / Save) full-width stack on very small screens */
  #main-content-area .chart-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
  #main-content-area .chart-actions-row button {
    width: 100%;
    justify-content: center;
  }
}

/* --- Today's Clinic queue cards: readable + tappable --- */
#queue-boards > div {
  min-width: 0;
}
#queue-boards .bg-slate-950 {
  min-width: 0;
}
/* Queue card action buttons – larger on touch devices */
@media (max-width: 767px) {
  #queue-boards button,
  #q-booked button, #q-waiting button, #q-treatment button, #q-completed button {
    min-height: 36px !important;
    min-width: 44px;
    padding: 0.35rem 0.6rem !important;
    font-size: 12px !important;
    line-height: 1.25;
  }
  #queue-boards .flex.flex-wrap {
    gap: 6px !important;
  }
}
@media (pointer: coarse) {
  #queue-boards button {
    min-height: 40px !important;
    padding: 0.4rem 0.7rem !important;
    font-size: 12px !important;
  }
}

/* --- Patients list: better mobile row density --- */
@media (max-width: 767px) {
  #patients-table-body td {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }
  #patients-table-body td:last-child button {
    min-height: 40px;
    min-width: 40px;
  }
}

/* --- SMS / template cards --- */
@media (max-width: 640px) {
  #main-content-area .grid.grid-cols-1.md\:grid-cols-2,
  #main-content-area [class*="grid-cols-"] {
    /* already stacked via Tailwind; ensure gap is comfortable */
  }
  #main-content-area textarea.form-input {
    min-height: 88px;
    font-size: 16px; /* prevent iOS zoom on focus */
  }
  #main-content-area input.form-input,
  #main-content-area select.form-input {
    font-size: 16px; /* prevent iOS zoom on focus */
  }
}

/* Prevent iOS input zoom globally on small screens */
@media (max-width: 767px) {
  input.form-input,
  select.form-input,
  textarea.form-input,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  select, textarea {
    font-size: 16px !important;
  }
}

/* --- Header search: don't shrink too hard --- */
@media (max-width: 480px) {
  header .relative.w-36 {
    width: 7.5rem;
  }
  #current-date-display { display: none !important; }
}

/* --- Modals / drawers full-height friendly on short viewports --- */
@media (max-height: 560px) {
  #patient-modal .absolute.inset-y-0,
  [id$="-modal"] .absolute.inset-y-0.right-0 {
    max-height: 100dvh;
  }
}

/* --- Landscape phone: keep main content usable --- */
@media (orientation: landscape) and (max-height: 480px) {
  #app-sidebar { width: 14rem; }
  header { height: 3rem !important; min-height: 3rem; }
  #main-content-area { padding: 0.75rem !important; }
  .tooth-cell-realistic { width: 70px !important; }
}

/* --- Tablet (768–1024): balanced spacing --- */
@media (min-width: 768px) and (max-width: 1024px) {
  #main-content-area {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* Queue boards: 1 col phone, 2 col tablet, 4 col wide desktop (matches JS classes) */
@media (min-width: 640px) and (max-width: 1279px) {
  #queue-boards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #queue-boards > div:nth-child(odd) {
    border-right: 1px solid rgb(30 41 59);
  }
  #queue-boards > div:nth-child(even) {
    border-right: 0;
  }
}
@media (min-width: 1280px) {
  #queue-boards {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* --- Safe area insets for notched phones --- */
@supports (padding: env(safe-area-inset-bottom)) {
  #app-container {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  #main-content-area {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  #app-sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --- Clinical documentation grids on narrow screens --- */
@media (max-width: 640px) {
  #main-content-area .grid.grid-cols-1.md\:grid-cols-2,
  #main-content-area .grid.md\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --- Ensure action toolbars wrap instead of overflow --- */
#main-content-area .flex.flex-wrap,
#portal-main .flex.flex-wrap {
  row-gap: 0.5rem;
}

/* Reduced motion already handled; keep focus rings visible */
@media (prefers-reduced-motion: reduce) {
  .tooth-cell-realistic { transition: none !important; }
}

/* ==========================================================================
   Patients table — mobile card layout (fixes vertical ACTIVE badge + cut names)
   ========================================================================== */
@media (max-width: 767px) {
  /* Hide thead on phone; cards carry their own labels */
  .patients-table thead { display: none !important; }

  .patients-table,
  .patients-table tbody,
  .patients-table tr.patient-row {
    display: block !important;
    width: 100% !important;
  }

  /* Letter group headers still full width */
  .patients-table tbody > tr:not(.patient-row) {
    display: block !important;
    width: 100% !important;
  }
  .patients-table tbody > tr:not(.patient-row) td {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
  }

  .patients-table tr.patient-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name status"
      "id id"
      "actions actions";
    gap: 6px 10px;
    align-items: center;
    padding: 14px 14px;
    margin: 0 0 10px;
    border: 1px solid rgb(30 41 59);
    border-radius: 14px;
    background: rgb(15 23 42);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
  }
  .patients-table tr.patient-row:last-child { margin-bottom: 0; }

/* Light theme: the mobile patient card had a hardcoded dark background, so its
   dark text (light theme) was invisible. Use the theme tokens instead. */
html.light .patients-table tr.patient-row {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-xs);
}

  .patients-table tr.patient-row > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
  }

  /* Hide desktop-only patient-id column; ID shown under name on mobile */
  .patients-table tr.patient-row > td.patient-col-id { display: none !important; }
  .patients-table tr.patient-row > td.patient-col-contact { display: none !important; }
  .patients-table tr.patient-row > td.patient-col-visit { display: none !important; }

  .patients-table tr.patient-row > td.patient-col-name {
    grid-area: name;
    min-width: 0;
  }
  .patients-table tr.patient-row > td.patient-col-name .font-semibold {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
  .patients-table tr.patient-row > td.patient-col-status {
    grid-area: status;
    justify-self: end;
    align-self: start;
    white-space: nowrap !important;
  }
  .patients-table tr.patient-row > td.patient-col-status span {
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }
  .patients-table tr.patient-row > td.patient-col-actions {
    grid-area: actions;
    text-align: left !important;
    padding-top: 8px !important;
    border-top: 1px solid rgb(30 41 59) !important;
    margin-top: 2px;
  }
  .patients-table tr.patient-row > td.patient-col-actions > div {
    display: flex !important;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start !important;
  }

  /* Letter headers spacing */
  .patients-table tbody > tr:not(.patient-row) {
    margin: 12px 0 6px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 4px;
  }

  /* No forced min-width horizontal scroll for this table on phone */
  .patients-table-scroll {
    overflow-x: visible !important;
  }
  .patients-table-scroll .patients-table {
    min-width: 0 !important;
  }
}

/* Desktop/tablet: keep status single-line always */
.patient-col-status,
.patient-col-status span {
  white-space: nowrap !important;
}

/* Desktop patient table: keep the four action icons on one line.
   They were wrapping into a vertical stack in a narrow column, which made every row very tall. */
@media (min-width: 768px) {
  .patients-table td.patient-col-actions {
    white-space: nowrap;
    min-width: 150px;
  }
  .patients-table td.patient-col-actions > div {
    flex-wrap: nowrap !important;
  }
}

/* ===== Light theme comfort pass =====
   Softer surfaces (less glare than pure white on cool grey), and the leftover
   translucent dark-slate backgrounds are mapped to light surfaces so cards no
   longer mix dark and white blocks on the same screen. */
html.light {
  --bg: #F4F6F9;
  --bg-subtle: #EEF2F6;
  --card: #FCFDFE;
  --card-hover: #F3F6FA;
  --border: #DFE5ED;
  --border-strong: #C5CEDA;
}

html.light .bg-slate-950\/30,
html.light .bg-slate-950\/40,
html.light .bg-slate-950\/50,
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/80,
html.light .bg-slate-900\/50,
html.light .bg-slate-900\/60,
html.light .bg-slate-800\/40,
html.light .bg-slate-800\/50,
html.light .bg-slate-800\/60 {
  background-color: var(--bg-subtle) !important;
}

html.light tbody tr:hover,
html.light tbody tr.hover\:bg-slate-950\/40:hover {
  background-color: #EEF5FB !important;
}

/* Appointments list: action buttons and status badges stay on one line (no "COMPL / ETED" splits, no stacked buttons). */
.appt-actions button, .appt-actions summary, .appt-actions > span { white-space: nowrap; flex-shrink: 0; }
#appts-grouped td, #appts-grouped th { overflow-wrap: normal; }
#appts-grouped td.whitespace-nowrap { overflow-wrap: normal; }

/* ========== ARMAMENTO PREMIUM GLASS LOGIN ========== */
#auth-overlay {
  background-color: #090b10 !important;
  background-image: linear-gradient(135deg, rgba(5, 8, 14, .34), rgba(8, 10, 15, .22) 48%, rgba(10, 9, 7, .42)), url('../images/armamento-login-bg.jpg') !important;
  background-position: center 38% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto;
  isolation: isolate;
}
#auth-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 18%, rgba(221, 176, 94, .13), transparent 48%), linear-gradient(0deg, rgba(4, 6, 10, .28), transparent 42%);
}
#auth-overlay .auth-card {
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  padding: clamp(1.5rem, 4.5vw, 2.65rem);
  color: #f8fafc;
  background: linear-gradient(145deg, rgba(28, 29, 31, .22), rgba(18, 19, 22, .16)) !important;
  border: 1px solid rgba(236, 219, 188, .68) !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12), 0 0 34px rgba(198,151,76,.07) !important;
  -webkit-backdrop-filter: blur(5px) saturate(120%);
  backdrop-filter: blur(5px) saturate(120%);
}
/* Keep the login composition close to the approved glass mockup while retaining the real form controls. */
#auth-overlay .auth-card > .text-center.mb-8 { margin-bottom: 2rem !important; }
#auth-overlay #login-logo { width: 5.25rem !important; height: 5.25rem !important; font-size: 1.75rem !important; border-radius: 0 !important; margin-bottom: 1rem !important; }
#auth-overlay #login-title { font-size: clamp(1.35rem, 3.2vw, 2rem) !important; line-height: 1.2 !important; }
#auth-overlay .auth-card p.text-sm { font-size: 1rem !important; }
#auth-overlay .auth-card label { font-size: .75rem !important; letter-spacing: .12em !important; }
#auth-overlay #login-email, #auth-overlay #login-password { min-height: 60px; font-size: 1rem !important; padding-top: .9rem !important; padding-bottom: .9rem !important; }
#auth-overlay #login-form button[type="submit"] { min-height: 60px; font-size: 1rem !important; }
#auth-overlay #forgot-password-link, #auth-overlay .auth-card a[href="book.html"] { font-size: .9rem !important; }
#auth-overlay .auth-card p.text-\[10px\] { font-size: .75rem !important; }
#auth-overlay #login-logo {
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 18px rgba(210, 165, 88, .28));
}
#auth-overlay #login-title { color: #fff !important; overflow-wrap: anywhere; max-width: 100%; }
#auth-overlay .auth-card p.text-sm { color: #d7c5a4 !important; }
#auth-overlay .auth-card label { color: #e5d7bf !important; }
#auth-overlay #login-email,
#auth-overlay #login-password {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(231, 216, 190, .43) !important;
  border-radius: 15px !important;
  min-height: 52px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
#auth-overlay #login-email::placeholder,
#auth-overlay #login-password::placeholder { color: rgba(235,238,242,.60) !important; }
#auth-overlay #login-email:focus,
#auth-overlay #login-password:focus {
  border-color: #d8b36f !important;
  box-shadow: 0 0 0 3px rgba(216,179,111,.16) !important;
}
#auth-overlay #password-toggle { color: #d8c7a7 !important; }
#auth-overlay #login-form button[type="submit"] {
  color: #1b160e !important;
  background: linear-gradient(110deg, #b88742, #f1d59b 48%, #b88742) !important;
  border: 1px solid rgba(255,232,185,.65) !important;
  box-shadow: 0 8px 24px rgba(174,128,57,.23);
  min-height: 52px;
}
#auth-overlay #login-form button[type="submit"]:hover { filter: brightness(1.06); }
#auth-overlay #forgot-password-link { color: #dfcfb1 !important; }
#auth-overlay .auth-card .border-t { border-color: rgba(231,216,190,.20) !important; }
#auth-overlay .auth-card a[href="book.html"] { color: #e8c783 !important; }
#auth-overlay .auth-card p.text-\\[10px\\] { color: #b7b4ae !important; }
@media (max-width: 480px) {
  #auth-overlay { padding-left: 16px !important; padding-right: 16px !important; }
  #auth-overlay .auth-card { width: 100% !important; max-width: 700px !important; border-radius: 24px !important; padding: 1.6rem 1.35rem !important; }
  #auth-overlay .auth-card > .text-center.mb-8 { margin-bottom: 1.65rem !important; }
}
@media (max-height: 720px) {
  #auth-overlay { align-items: flex-start !important; }
  #auth-overlay .auth-card { margin-block: auto; }
}


/* Final cascade overrides for the reference-sized glass login. */
#auth-overlay .auth-card { width: min(100%, 700px) !important; max-width: 700px !important; }
#auth-overlay #login-email, #auth-overlay #login-password { min-height: 60px !important; font-size: 1rem !important; }
#auth-overlay #login-form button[type="submit"] { min-height: 60px !important; font-size: 1rem !important; }


/* Approved reference: visibly transparent glass login card; keep the clinic background visible through it. */
#auth-overlay .auth-card {
  background: linear-gradient(145deg, rgba(28, 29, 31, .20), rgba(18, 19, 22, .12)) !important;
  -webkit-backdrop-filter: blur(5px) saturate(120%) !important;
  backdrop-filter: blur(5px) saturate(120%) !important;
  border-color: rgba(236, 219, 188, .78) !important;
}


/* ===== Login: new Armamento logo background + fully see-through glass card ===== */
#auth-overlay {
  background-color: #0d1424 !important;
  background-image: url('../images/armamento-login-bg.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
}
#auth-overlay::before { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.0), rgba(4,7,14,.28) 100%) !important; }
#auth-overlay .auth-card {
  background: rgba(8, 12, 22, .06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(236, 219, 188, .55) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
/* Keep text/fields readable over the gold logo without making the card opaque. */
#auth-overlay .auth-card h1, #auth-overlay .auth-card p, #auth-overlay .auth-card label,
#auth-overlay #forgot-password-link, #auth-overlay .auth-card a[href="book.html"] { text-shadow: 0 1px 8px rgba(0,0,0,.85); }
#auth-overlay #login-email, #auth-overlay #login-password {
  background: rgba(6, 10, 20, .46) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* Phones/portrait: show the whole wide logo at the top and put the card underneath it. */
@media (orientation: portrait) {
  #auth-overlay, html.light #auth-overlay {
    background-color: #141b25 !important;
    background-image: linear-gradient(180deg, rgba(20,27,37,0) 0, rgba(20,27,37,0) 38vw, #141b25 55.5vw, #141b25 100%), url('../images/armamento-login-bg.jpg') !important;
    background-size: 100% 100%, 100% auto !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat !important;
    align-items: flex-start !important;
    /* the card starts right under the logo (image height = 55.8vw), not at the bottom of the screen */
    padding-top: max(46vw, 4vh) !important;
  }
  #auth-overlay .auth-card { margin-block: 0 !important; max-height: none; }
}

/* Desktop/landscape: raise the login form (anchored near the top) and make it more compact. */
@media (orientation: landscape) and (min-width: 900px) {
  #auth-overlay, html.light #auth-overlay { align-items: flex-start !important; padding-top: clamp(14px, 4vh, 48px) !important; }
  #auth-overlay .auth-card {
    width: min(100%, 560px) !important; max-width: 560px !important;
    padding: clamp(1.1rem, 2.6vh, 1.7rem) clamp(1.4rem, 3vw, 2.2rem) !important;
    margin-block: 0 !important; max-height: calc(100dvh - 28px);
  }
  #auth-overlay .auth-card > .text-center.mb-8 { margin-bottom: 1rem !important; }
  #auth-overlay #login-logo { width: 4rem !important; height: 4rem !important; font-size: 1.4rem !important; margin-bottom: .6rem !important; }
  #auth-overlay #login-email, #auth-overlay #login-password,
  #auth-overlay #login-form button[type="submit"] { min-height: 52px !important; }
}


/* DCOS responsive list cards for Patients + Billing.
   Match the appointment card list so users never need to swipe sideways on
   phones, tablets, or narrow desktop previews. Data/rendering/actions unchanged. */
@media (max-width: 1100px) {
  /* PATIENTS: use full-width vertical patient cards */
  #main-content-area .patients-table-scroll { overflow: visible !important; }
  #main-content-area .patients-table { display: block !important; width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
  #main-content-area .patients-table thead { display: none !important; }
  #main-content-area .patients-table tbody { display: block !important; width: 100% !important; }
  #main-content-area .patients-table tbody > tr:not(.patient-row) {
    display: block !important; width: 100% !important; margin: 12px 0 6px !important;
    padding: 0 4px !important; border: 0 !important; background: transparent !important;
  }
  #main-content-area .patients-table tbody > tr:not(.patient-row) td {
    display: block !important; width: 100% !important; padding: 5px 4px !important; border: 0 !important;
  }
  #main-content-area .patients-table tr.patient-row {
    display: grid !important; width: 100% !important; min-width: 0 !important;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas: "name status" "id id" "contact contact" "visit visit" "actions actions";
    gap: 8px 10px; align-items: center; padding: 14px !important; margin: 0 0 10px !important;
    border: 1px solid var(--ui-border, #263449) !important; border-radius: 14px;
    background: var(--ui-surface, #0f172a) !important; box-shadow: var(--ui-shadow, none);
  }
  html.light #main-content-area .patients-table tr.patient-row { background: var(--card, #fff) !important; border-color: var(--border, #dbe2ea) !important; }
  #main-content-area .patients-table tr.patient-row > td {
    display: block !important; width: auto !important; min-width: 0 !important; padding: 0 !important;
    border: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-id { display: block !important; grid-area: id; font-size: 12px; }
  #main-content-area .patients-table tr.patient-row > td.patient-col-name { grid-area: name; min-width: 0; }
  #main-content-area .patients-table tr.patient-row > td.patient-col-name .font-semibold { white-space: normal !important; overflow-wrap: anywhere; line-height: 1.35; }
  #main-content-area .patients-table tr.patient-row > td.patient-col-name .md\:hidden { display: block !important; }
  #main-content-area .patients-table tr.patient-row > td.patient-col-contact { display: block !important; grid-area: contact; font-size: 12px; }
  #main-content-area .patients-table tr.patient-row > td.patient-col-visit { display: block !important; grid-area: visit; font-size: 12px; }
  #main-content-area .patients-table tr.patient-row > td.patient-col-status { grid-area: status; justify-self: end; align-self: start; white-space: nowrap !important; }
  #main-content-area .patients-table tr.patient-row > td.patient-col-status span { white-space: nowrap !important; writing-mode: horizontal-tb !important; }
  #main-content-area .patients-table tr.patient-row > td.patient-col-actions {
    grid-area: actions; text-align: left !important; padding-top: 8px !important;
    border-top: 1px solid var(--ui-border, #263449) !important; margin-top: 2px;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-actions > div { display: flex !important; flex-wrap: wrap !important; gap: 5px; justify-content: flex-start !important; }

  /* BILLING: each invoice is a card with wrapped action buttons */
  #main-content-area .overflow-x-auto:has(#billing-table-body) { width: 100% !important; max-width: 100% !important; overflow: visible !important; }
  #main-content-area table:has(#billing-table-body) { display: block !important; width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
  #main-content-area table:has(#billing-table-body) thead { display: none !important; }
  #main-content-area table:has(#billing-table-body) tbody { display: block !important; width: 100% !important; padding: 10px !important; }
  #billing-table-body > tr {
    display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 12px; row-gap: 8px;
    width: 100% !important; min-width: 0 !important; align-items: start; padding: 14px !important; margin: 0 0 12px !important;
    border: 1px solid var(--ui-border, #263449) !important; border-radius: 14px;
    background: var(--ui-surface, #0f172a) !important; box-shadow: var(--ui-shadow, none);
  }
  html.light #billing-table-body > tr { background: var(--card, #fff) !important; border-color: var(--border, #dbe2ea) !important; }
  #billing-table-body > tr > td {
    display: block !important; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important;
    white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important;
  }
  #billing-table-body > tr > td:nth-child(1) { grid-column: 1; grid-row: 1; }
  #billing-table-body > tr > td:nth-child(8) { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
  #billing-table-body > tr > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  #billing-table-body > tr > td:nth-child(3) { display: block !important; grid-column: 1 / -1; grid-row: 3; font-size: 12px; color: var(--ui-muted, #94a3b8); }
  #billing-table-body > tr > td:nth-child(3)::before { content: "PROCEDURE  "; display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ui-muted, #64748b); }
  #billing-table-body > tr > td:nth-child(4) { display: block !important; grid-column: 1 / -1; grid-row: 4; font-size: 12px; }
  #billing-table-body > tr > td:nth-child(4)::before { content: "SOURCE  "; color: var(--ui-muted, #64748b); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
  #billing-table-body > tr > td:nth-child(5) { display: block !important; grid-column: 1 / -1; grid-row: 5; font-size: 12px; }
  #billing-table-body > tr > td:nth-child(5)::before { content: "DATE  "; color: var(--ui-muted, #64748b); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
  #billing-table-body > tr > td:nth-child(6) { grid-column: 1; grid-row: 6; }
  #billing-table-body > tr > td:nth-child(7) { grid-column: 2; grid-row: 6; }
  #billing-table-body > tr > td:nth-child(6)::before, #billing-table-body > tr > td:nth-child(7)::before {
    display: block; margin-bottom: 2px; color: var(--ui-muted, #64748b); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  }
  #billing-table-body > tr > td:nth-child(6)::before { content: "TOTAL"; }
  #billing-table-body > tr > td:nth-child(7)::before { content: "PAID"; }
  #billing-table-body > tr > td:last-child {
    grid-column: 1 / -1; grid-row: 7; text-align: left; padding-top: 10px !important;
    border-top: 1px solid var(--ui-border, #263449) !important;
  }
  #billing-table-body > tr > td:last-child > div { display: flex !important; flex-wrap: wrap !important; gap: 6px; white-space: normal !important; }
  #billing-table-body > tr > td:last-child button { min-width: 42px; min-height: 42px; flex: 0 0 auto; }
  #billing-table-body > tr > td[colspan] { grid-column: 1 / -1; grid-row: auto; padding: 20px !important; text-align: center; }
}


/* FINAL PATIENT MOBILE CARD DEDUPLICATION + COMPACT SPACING
   Keep each field in one place. This override intentionally comes last to
   supersede older responsive rules that re-showed hidden columns. */
@media (max-width: 767px) {
  #main-content-area .patients-table tr.patient-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "name status"
      "id id"
      "contact contact"
      "actions actions" !important;
    gap: 5px 10px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-id {
    display: block !important;
    grid-area: id !important;
    padding: 0 !important;
    margin-top: 1px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: var(--medical-400, #38bdf8) !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-name .patient-phone-mobile,
  #main-content-area .patients-table tr.patient-row > td.patient-col-name .md\:hidden {
    display: none !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-contact {
    display: block !important;
    grid-area: contact !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: var(--text-muted, #94a3b8) !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-contact > div:empty {
    display: none !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-visit {
    display: none !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-name .font-semibold {
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-actions {
    padding-top: 6px !important;
    margin-top: 2px !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-actions > div {
    gap: 4px !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-actions button {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 7px !important;
  }
}


/* DCOS compact mobile lists: keep all information/actions visible without horizontal scrolling
   or oversized card blocks. Existing desktop tables remain unchanged. */
@media (max-width: 767px) {
  #main-content-area .patients-table tr.patient-row {
    gap: 4px 8px !important;
    padding: 8px 6px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-border, #263449) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-name .w-8.h-8 { width: 28px !important; height: 28px !important; }
  #main-content-area .patients-table tr.patient-row > td.patient-col-actions {
    padding-top: 4px !important; margin-top: 0 !important; border-top: 0 !important;
  }
  #main-content-area .patients-table tr.patient-row > td.patient-col-actions button {
    min-width: 32px !important; min-height: 32px !important; padding: 5px !important;
  }
  #main-content-area #billing-table-body > tr {
    padding: 9px 7px !important; margin: 0 !important; row-gap: 5px !important;
    border: 0 !important; border-bottom: 1px solid var(--ui-border, #263449) !important;
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  #main-content-area #billing-table-body > tr > td { line-height: 1.3 !important; }
  #main-content-area #billing-table-body > tr > td:last-child { padding-top: 5px !important; border-top: 0 !important; }
  #main-content-area #billing-table-body > tr > td:last-child button { min-width: 34px !important; min-height: 34px !important; }
}


/* Mobile navigation tap reliability: keep module links interactive above sidebar decoration. */
#app-sidebar nav a.nav-link {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  touch-action: manipulation;
}


/* Appointments = compact LIST (one row per appointment, grouped by date). No cards, no sideways scrolling. */
#main-content-area .appt-list-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1.7fr) minmax(0, 1fr) auto auto;
  grid-template-areas: "time who dent status act";
  align-items: start;
  column-gap: 14px; row-gap: 6px;
  padding: 10px 14px;
}
#main-content-area .appt-list-row .al-time   { grid-area: time; }
#main-content-area .appt-list-row .al-who    { grid-area: who; }
#main-content-area .appt-list-row .al-dent   { grid-area: dent; padding-top: 2px; }
#main-content-area .appt-list-row .al-status { grid-area: status; }
#main-content-area .appt-list-row .al-act    { grid-area: act; justify-self: end; }
#main-content-area .appt-list-row .al-act .appt-actions { flex-wrap: nowrap; }
@media (max-width: 1099px) {
  #main-content-area .appt-list-row {
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas: "time who status" ". dent dent" ". act act";
    padding: 9px 12px;
  }
  #main-content-area .appt-list-row .al-act { justify-self: start; }
  #main-content-area .appt-list-row .al-act .appt-actions { flex-wrap: wrap; justify-content: flex-start; }
  #main-content-area .appt-list-row .appt-actions button { min-height: 34px; }
}
@media (max-width: 480px) {
  #main-content-area .appt-list-row { grid-template-columns: 70px minmax(0, 1fr); grid-template-areas: "time status" "who who" "dent dent" "act act"; }
  #main-content-area .appt-list-row .al-status { justify-self: end; }
}


/* Billing = compact LIST (not tall cards) with ONE fixed layout for every row (rows with P0.00 line up with paid rows).
   Each invoice is a small grid:  patient ........ status
                                  invoice # · date
                                  procedure / note
                                  payment log (if any)
                                  Total · Paid ..... action icons
   Desktop (>1100px) keeps the normal table. */
@media (max-width: 1100px) {
  #main-content-area .overflow-x-auto:has(#billing-table-body) { overflow: visible !important; }
  #main-content-area table:has(#billing-table-body) tbody { padding: 0 !important; }
  #main-content-area #billing-table-body > tr {
    display: grid !important; width: 100% !important; min-width: 0 !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "name name name status" "inv date date date" "proc proc proc proc" "pay pay pay pay" "total paid . act";
    align-items: center !important; column-gap: 14px !important; row-gap: 3px !important;
    padding: 10px 12px !important; margin: 0 !important;
    border: 0 !important; border-bottom: 1px solid var(--ui-border, #263449) !important;
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  html.light #main-content-area #billing-table-body > tr { background: transparent !important; border-bottom-color: var(--border, #dbe2ea) !important; }
  #main-content-area #billing-table-body > tr > td {
    display: block !important; width: auto !important; min-width: 0 !important; padding: 0 !important; border: 0 !important;
    font-size: 12px !important; line-height: 1.35 !important; white-space: normal !important; overflow-wrap: anywhere !important;
  }
  #main-content-area #billing-table-body > tr > td::before { content: none !important; }
  /* patient cell dissolves so its name / procedure / note / payment log can sit in their own grid rows */
  #main-content-area #billing-table-body > tr > td:nth-child(2) { display: contents !important; }
  #main-content-area #billing-table-body .bl-name { grid-area: name; font-size: 14px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
  #main-content-area #billing-table-body .bl-proc { grid-area: proc; }
  #main-content-area #billing-table-body .bl-pay { grid-area: pay; margin: 2px 0 0 !important; }
  #main-content-area #billing-table-body .bl-by { display: none !important; }
  #main-content-area #billing-table-body > tr > td:nth-child(8) { grid-area: status; justify-self: end; text-align: right !important; }
  #main-content-area #billing-table-body > tr > td:nth-child(1) { grid-area: inv; font-size: 12px !important; }
  #main-content-area #billing-table-body > tr > td:nth-child(5) { grid-area: date; display: block !important; font-size: 12px !important; }
  #main-content-area #billing-table-body > tr > td:nth-child(5)::before { content: "\00b7" !important; margin-right: 8px; }
  #main-content-area #billing-table-body > tr > td:nth-child(3):not([colspan]) { grid-area: proc; color: var(--ui-muted, #94a3b8); }
  #main-content-area #billing-table-body > tr > td:nth-child(6) { grid-area: total; font-size: 12px !important; font-weight: 600; }
  #main-content-area #billing-table-body > tr > td:nth-child(7) { grid-area: paid; font-size: 12px !important; }
  #main-content-area #billing-table-body > tr > td:nth-child(6)::before { content: "Total" !important; display: inline !important; margin: 0 5px 0 0 !important; color: var(--ui-muted, #64748b); font-size: 12px; font-weight: 700; }
  #main-content-area #billing-table-body > tr > td:nth-child(7)::before { content: "Paid" !important; display: inline !important; margin: 0 5px 0 0 !important; color: var(--ui-muted, #64748b); font-size: 12px; font-weight: 700; }
  #main-content-area #billing-table-body > tr > td:nth-child(4) { display: none !important; }
  #main-content-area #billing-table-body > tr > td:last-child { grid-area: act; justify-self: end; padding: 0 !important; border-top: 0 !important; }
  #main-content-area #billing-table-body > tr > td:last-child > div { display: flex !important; flex-wrap: nowrap !important; gap: 2px !important; }
  #main-content-area #billing-table-body > tr > td:last-child button { min-width: 32px !important; min-height: 32px !important; padding: 6px !important; }
  #main-content-area #billing-table-body > tr > td[colspan] { grid-column: 1 / -1; grid-area: auto; text-align: center; padding: 20px !important; }
}
/* Below tablet width the patient cell already shows the procedure + note, so hide the separate procedure cell. */
@media (max-width: 767px) {
  #main-content-area #billing-table-body > tr > td:nth-child(3):not([colspan]) { display: none !important; }
}


/* ===== Desktop login: keep the clinic name visible (card sits BELOW the logo) =====
   On wide screens the centered card used to cover "ARMAMENTO DENTAL STUDIO".
   The background is fitted to the screen width and lifted so the logo sits in the upper part,
   and the card is anchored to the bottom. Phones/portrait keep their own layout above. */
@media (orientation: landscape) and (min-width: 900px) {
  #auth-overlay, html.light #auth-overlay {
    align-items: flex-end !important;
    padding-top: 14px !important;
    padding-bottom: clamp(14px, 3vh, 36px) !important;
    background-color: #0f1626 !important;
    background-image: linear-gradient(180deg, rgba(15,22,38,0) 0, rgba(15,22,38,0) 28vw, #0f1626 38vw), url('../images/armamento-login-bg.jpg') !important;
    background-size: 100% 100%, 100vw auto !important;
    background-position: center top, center -18.2vw !important;
    background-repeat: no-repeat !important;
  }
}

/* Short laptop screens (e.g. 1366x768): slightly tighter card so it clears the logo. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  #auth-overlay #login-email, #auth-overlay #login-password,
  #auth-overlay #login-form button[type="submit"] { min-height: 46px !important; }
  #auth-overlay .auth-card { padding-top: .9rem !important; padding-bottom: .9rem !important; }
  #auth-overlay .auth-card > .text-center.mb-8 { margin-bottom: .6rem !important; }
  #auth-overlay #login-logo { width: 3rem !important; height: 3rem !important; margin-bottom: .3rem !important; }
}

/* Global search dropdown */
#global-search-results {
  scrollbar-width: thin;
}
html.light #global-search-results {
  background: #fff;
  border-color: rgba(140, 112, 30, 0.28);
  box-shadow: 0 12px 32px rgba(60, 45, 10, 0.14);
}
html.light #global-search-results [data-gs-idx]:hover,
html.light #global-search-results [data-gs-idx].bg-slate-800 {
  background: #F3EEDF !important;
  color: #1b1710 !important;
}
html.light #global-search-results .text-white { color: #1b1710 !important; }
html.light #global-search-results .text-slate-500 { color: #5f5849 !important; }
html.light #global-search-wrap kbd {
  background: #F7F4EC;
  border-color: rgba(140, 112, 30, 0.28);
  color: #5f5849;
}
@media (max-width: 640px) {
  #global-search-wrap { width: min(11rem, 42vw); }
  #global-search-results { min-width: min(18rem, 92vw); left: auto; right: 0; }
}

/* TV mode (Viewer role): Today's Clinic dashboard only */
.tv-only { display: none; }
body.tv-mode .tv-only { display: inline-flex; }
body.tv-mode #app-sidebar,
body.tv-mode #sidebar-backdrop,
body.tv-mode #global-search-wrap,
body.tv-mode #theme-toggle,
body.tv-mode header button[aria-label="Open menu"],
body.tv-mode a[href="queue.html"],
body.tv-mode #queue-boards button,
body.tv-mode #queue-boards details { display: none !important; }
body.tv-mode #current-date-display { display: inline; }