/* ─── VARIABLES ─── */
/* NOTE: --gold, --gold-bright, --gold-light, --gold-pale, --gold-dark,
   --gold-glow, --dark-bg, --dark-mid are injected dynamically by
   siteStyleTag() in site_config.php so the admin can change colors.
   Do NOT define them here — define them only as fallbacks. */
:root {
  /* Color fallbacks (overridden by siteStyleTag() at runtime) */
  --gold:        #C9A84C;
  --gold-bright: #E2C97E;
  --gold-light:  #E2C97E;
  --gold-pale:   rgba(var(--gold-rgb),0.15);
  --gold-dark:   #8A6B1F;
  --gold-glow:   rgba(var(--gold-rgb),0.25);
  --gold-rgb:    201,168,76;
  --dark-bg:     #1A1710;
  --dark-mid:    #2C2518;
  --dark-bg-rgb: 26,23,16;

  --white: #FFFFFF;
  --off-white: #FAF9F6;
  --cream: #F5F0E8;
  --light-base: #FAF9F6;
  --light-surface: #FFFFFF;
  --light-panel: #F8F7F4;
  --light-border: #EDEAE3;

  --text-primary: #1A1710;
  --text-secondary: #3D3830;
  --text-muted: #7A7264;
  --text-gold: #8A6B1F;

  --status-active: #16A34A;
  --status-active-bg: #DCFCE7;
  --status-pending: #D97706;
  --status-pending-bg: #FEF3C7;
  --status-inactive: #DC2626;
  --status-inactive-bg: #FEE2E2;

  --sidebar-w: 260px;
  --topbar-h: 64px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm:       0 2px 8px  rgba(var(--gold-rgb),0.10);
  --shadow-card:     0 2px 8px  rgba(var(--gold-rgb),0.08);
  --shadow-md:       0 4px 24px rgba(var(--gold-rgb),0.14);
  --shadow-dropdown: 0 8px 32px rgba(0,0,0,0.12);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--off-white);
  color: var(--text-secondary);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbars, system-wide: the thumb is painted narrower than the track
   itself (a transparent "border" plus background-clip:padding-box) so it
   floats with a visible gap on both sides instead of running flush against
   whatever border/rounded corner the scrolling element has. Track width is
   wider than before (8px vs 5px) specifically to make that inset gap read
   clearly rather than disappearing into anti-aliasing. Without this, a
   scrollable card's own border-radius doesn't reliably clip its native
   scrollbar in every browser, so the thumb can appear to run outside the
   card's rounded corner instead of sitting inside it. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: #D5D0C5;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--gold-light);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox: no thumb-inset equivalent, but at least a thin, un-boxy bar. */
* { scrollbar-width: thin; scrollbar-color: #D5D0C5 transparent; }

/* ─── AUTH ─── */
.auth-screen {
  display: none; position: fixed; inset: 0;
  background: #FFFBEB; z-index: 9999;
  align-items: center; justify-content: center;
}
.auth-screen.active { display: flex; }
.auth-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.auth-bg::before {
  content: ''; position: absolute; top: -30%; left: -10%; width: 70%; height: 70%;
  background: radial-gradient(ellipse, rgba(var(--gold-rgb),0.12) 0%, transparent 65%);
}
.auth-card {
  position: relative; z-index: 2; background: var(--light-surface);
  border: 1px solid var(--light-border); border-radius: var(--radius-xl);
  padding: 44px 48px; width: 420px; max-width: 95vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.logo-icon-wrap { position: relative; width: 52px; height: 52px; }
.logo-icon-wrap svg { width: 52px; height: 52px; }
.logo-text h1 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: 1px; line-height: 1; }
.logo-text span { font-size: 10px; font-weight: 600; color: var(--gold-dark); letter-spacing: 2px; text-transform: uppercase; display: block; margin-top: 3px; }
.auth-heading { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.auth-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 28px; }
.form-group { margin-bottom: 16px; }
.form-group label, .form-inline label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea,
.form-inline input, .form-inline select, .form-inline textarea {
  width: 100%; padding: 10px 13px; background: var(--light-panel);
  border: 1.5px solid var(--light-border); border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif; font-size: 13px; color: var(--text-primary);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.form-inline input:focus, .form-inline select:focus {
  border-color: var(--gold); background: var(--light-surface);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.15);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group textarea::placeholder, .form-inline textarea::placeholder { font-size: 12px; color: var(--text-muted); }

/* ─── BUTTONS ─── */
.btn-gold {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px 24px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  border: none; border-radius: var(--radius); font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-primary); cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--gold-rgb),0.35); transition: all .2s;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(var(--gold-rgb),0.45); }

.btn-gold-small {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: none; border-radius: var(--radius-sm); font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-primary); cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--gold-rgb),0.3); transition: all .2s; white-space: nowrap;
}
.btn-gold-small:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--gold-rgb),0.45); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: transparent; border: 1.5px solid var(--gold-dark); border-radius: var(--radius-sm);
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--gold-dark); cursor: pointer; transition: all .15s;
}
.btn-outline:hover { background: var(--gold-pale); border-color: var(--gold); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  background: transparent; border: 1.5px solid var(--light-border); border-radius: var(--radius-sm);
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; transition: all .15s; text-decoration: none;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-pale); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px;
  border: 1.5px solid #FCA5A5; border-radius: var(--radius-sm);
  background: transparent; color: #DC2626; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background .15s; font-family: 'Montserrat', sans-serif;
}
.btn-danger:hover { background: #FEE2E2; }

.auth-link { text-align: center; margin-top: 16px; font-size: 12px; color: var(--text-muted); }
.auth-link a, .auth-link .link-btn {
  color: var(--gold-dark); font-weight: 600; cursor: pointer; text-decoration: none;
  background: none; border: none; font-family: inherit; font-size: inherit;
}
.auth-link a:hover, .auth-link .link-btn:hover { color: var(--gold); }
.forgot-link {
  font-size: 11px; color: var(--gold-dark); font-weight: 600; cursor: pointer;
  background: none; border: none; font-family: inherit; float: right;
  margin-top: -6px; margin-bottom: 14px;
}
.forgot-link:hover { color: var(--gold); }

/* ─── APP SHELL ─── */
#app-shell { display: none; min-height: 100vh; }
#app-shell.active { display: block; }

/* ─── SIDEBAR ─── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-mid) 60%, var(--dark-bg) 100%);
  border-right: 1px solid rgba(var(--gold-rgb),0.1);
  z-index: 100; display: flex; flex-direction: column; overflow: hidden;
  transition: transform .3s ease, width .3s ease;
}

/* Sidebar collapsed state for desktop */
.sidebar.collapsed {
  width: 80px;
  overflow-y: hidden; /* Remove scrollbar when collapsed */
}

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sidebar-footer .btn-logout span,
.sidebar.collapsed .sidebar-footer .btn-back-website span {
  display: none; /* Completely hide text elements */
}

.sidebar.collapsed .sidebar-brand {
  padding: 20px 18px;
}

.sidebar.collapsed .sidebar-brand-inner {
  justify-content: center;
}

.sidebar.collapsed .sidebar-logo-icon {
  width: 40px;
  height: 40px;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 14px 0;
  position: relative;
}

.sidebar.collapsed .nav-item .nav-indicator {
  display: none; /* Hide indicator in collapsed state */
}

.sidebar.collapsed .nav-item .nav-icon {
  margin: 0;
}

/* Tooltip for collapsed sidebar */
.sidebar.collapsed .nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: 85px;
  background: var(--dark-mid);
  color: var(--gold-light);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .2s;
  pointer-events: none;
  z-index: 1000;
  border: 1px solid rgba(var(--gold-rgb),0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.sidebar.collapsed .nav-item:hover::after {
  opacity: 1;
  visibility: visible;
  left: 90px;
}

.sidebar.collapsed .sidebar-footer {
  padding: 12px;
  gap: 10px;
}

.sidebar.collapsed .btn-logout,
.sidebar.collapsed .btn-back-website {
  width: 56px;
  height: 48px;
  justify-content: center;
  padding: 0;
  position: relative;
}

.sidebar.collapsed .btn-logout svg,
.sidebar.collapsed .btn-back-website svg {
  margin: 0;
}

/* Tooltips for footer buttons in collapsed state */
.sidebar.collapsed .btn-back-website::after {
  content: 'Back to Website';
  position: absolute;
  left: 70px;
  background: var(--dark-mid);
  color: var(--gold-light);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .2s;
  pointer-events: none;
  z-index: 1000;
  border: 1px solid rgba(var(--gold-rgb),0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.sidebar.collapsed .btn-back-website:hover::after {
  opacity: 1;
  visibility: visible;
  left: 75px;
}

.sidebar.collapsed .btn-logout::after {
  content: 'Logout';
  position: absolute;
  left: 70px;
  background: var(--dark-mid);
  color: var(--gold-light);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .2s;
  pointer-events: none;
  z-index: 1000;
  border: 1px solid rgba(var(--gold-rgb),0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.sidebar.collapsed .btn-logout:hover::after {
  opacity: 1;
  visibility: visible;
  left: 75px;
}

/* Hide scrollbar but keep functionality */
.sidebar-nav::-webkit-scrollbar {
  width: 0;
  display: none;
}

.sidebar-nav {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.sidebar::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb),0.08) 0%, transparent 60%);
}
.sidebar-brand { padding: 28px 24px 22px; border-bottom: 1px solid rgba(var(--gold-rgb),0.12); position: relative; }
.sidebar-brand-inner { display: flex; align-items: center; gap: 12px; }
.sidebar-logo-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-logo-icon svg, .sidebar-logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-brand-text h2 {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600;
  color: #FFFFFF; letter-spacing: 2px; line-height: 1.1;
}
.sidebar-brand-text p { font-size: 8.5px; color: var(--gold); font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }

.sidebar-nav { 
  flex: 1; 
  padding: 16px 0; 
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.sidebar-nav::-webkit-scrollbar {
  width: 0;
  display: none; /* Hide scrollbar in webkit browsers */
}

.nav-section-label, .sidebar-section-label {
  font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(var(--gold-rgb),0.5); padding: 0 24px; margin: 14px 0 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 24px;
  cursor: pointer; position: relative; transition: background .15s;
  text-decoration: none;
}
.nav-item .nav-indicator {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; background: var(--gold);
  border-radius: 0 2px 2px 0; transition: height .2s;
}
.nav-item:hover { background: rgba(var(--gold-rgb),0.06); }
.nav-item.active { background: rgba(var(--gold-rgb),0.1); }
.nav-item.active .nav-indicator { height: 28px; }
.nav-item .nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.45; transition: opacity .15s; }
.nav-item .nav-icon * { stroke: #FFFFFF; }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }
.nav-item.active .nav-icon *, .nav-item:hover .nav-icon * { stroke: var(--gold); }
.nav-item span.nav-label { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.55); transition: color .15s; }
.nav-item.active span.nav-label, .nav-item:hover span.nav-label { color: #FFFFFF; }

.sidebar-footer { padding: 16px 24px; border-top: 1px solid rgba(var(--gold-rgb),0.1); display: flex; flex-direction: column; gap: 8px; }
.btn-back-website {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius);
  background: rgba(255,255,255,0.03); cursor: pointer; transition: all .15s; text-decoration: none;
}
.btn-back-website:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); }
.btn-back-website svg { stroke: rgba(255,255,255,0.45); }
.btn-back-website span { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.btn-logout {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px;
  border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius);
  background: rgba(239,68,68,0.08); cursor: pointer; transition: all .15s; text-decoration: none;
}
.btn-logout:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.5); }
.btn-logout .logout-icon * { stroke: #EF4444; }
.btn-logout span { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #EF4444; }

/* ─── TOPBAR ─── */
.topbar {
  position: fixed; top: 0; left: var(--sidebar-w); right: 0; height: var(--topbar-h);
  background: rgba(250,249,246,0.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--light-border); z-index: 90;
  display: flex; align-items: center; justify-content: space-between; padding: 0 32px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: left .3s ease;
}

/* Topbar adjustment when sidebar is collapsed */
body.sidebar-collapsed .topbar {
  left: 80px;
}

body.sidebar-collapsed .main-content {
  margin-left: 80px;
}

/* Intraoral Examination overlay tracks the same sidebar-collapsed state as
   the topbar/main-content it sits beside — see .dental-overlay below. */
body.sidebar-collapsed .dental-overlay {
  left: 80px;
}

/* Sidebar toggle button in topbar - UNIFIED STYLE */
.sidebar-toggle-btn,
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--light-panel);
  border: 1px solid var(--light-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  margin-right: 12px;
  flex-shrink: 0;
  padding: 0;
}

/* Hide mobile button on desktop by default */
.mobile-menu-toggle {
  display: none;
}

.sidebar-toggle-btn:hover,
.mobile-menu-toggle:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
}

.sidebar-toggle-btn:active,
.mobile-menu-toggle:active {
  transform: scale(0.95);
}

.sidebar-toggle-btn svg,
.mobile-menu-toggle svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-primary);
}

.topbar-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 500; color: var(--text-primary); letter-spacing: 0.5px; }
.topbar-title span { color: var(--gold); }
.topbar-left { 
  display: flex; 
  align-items: center;
  gap: 0; /* Remove gap, buttons have their own margins */
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-date { font-size: 11px; color: var(--text-muted); }

/* Notification Bell */
.notif-bell {
  position: relative; cursor: pointer; width: 36px; height: 36px;
  background: var(--light-panel); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--light-border); transition: all .15s;
}
.notif-bell:hover { background: var(--gold-pale); border-color: var(--gold); }
.notif-bell svg { stroke: var(--text-muted); }
.notif-bell:hover svg { stroke: var(--gold-dark); }
.notif-badge {
  position: absolute; top: -3px; right: -3px; background: #DC2626; color: white;
  font-size: 9px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--light-surface);
}

/* Notification Dropdown */
/* z-index:1500, not 200 — the Intraoral Examination overlay (.dental-overlay)
   sits at z-index:400 and covers the whole content area below the topbar
   (top: var(--topbar-h), same as this dropdown's own position), so at 200
   this dropdown rendered UNDERNEATH the exam screen: the bell still opened
   it (the .open class toggled fine), it just wasn't visible while the exam
   was open. 1500 clears every overlay/modal in the app (.dental-overlay:400,
   .modal-overlay:500, .dp-popup:600) so the bell stays usable everywhere,
   same as .account-dropdown right below, which had the identical bug. */
.notif-dropdown {
  display: none; position: fixed; top: var(--topbar-h); right: 28px;
  width: 340px; max-height: 420px; background: var(--light-surface);
  border: 1px solid var(--light-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dropdown); z-index: 1500; overflow: hidden;
  display: flex; flex-direction: column;
}
.notif-dropdown:not(.open) { display: none; }
.notif-dropdown.open { display: flex; }
/* Dimmed backdrop behind the notification panel on mobile, so it reads as
   a sheet the user can tap away from — same idea as .mobile-overlay for
   the sidebar. Only shown (via JS adding .active) on screens <=768px;
   see toggleNotif() in layouts/patient.blade.php. */
.notif-overlay {
  display: none; position: fixed; inset: 0; background: rgba(20,16,10,0.4);
  z-index: 1499;
}
.notif-overlay.active { display: block; }
.notif-dropdown-header {
  padding: 14px 16px 10px; border-bottom: 1px solid var(--light-border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.notif-dropdown-header h4 { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.notif-mark-all { font-size: 11px; color: var(--gold-dark); font-weight: 600; cursor: pointer; background: none; border: none; font-family: inherit; white-space: nowrap; }
.notif-close-mobile {
  display: none; background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--text-muted); cursor: pointer; padding: 4px 6px;
}
.notif-list { overflow-y: auto; max-height: 340px; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
.notif-item {
  display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--light-panel);
  cursor: pointer; transition: background .1s; text-decoration: none;
}
.notif-item:hover { background: var(--gold-pale); }
.notif-item.unread { background: #FFFDF5; }
.notif-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--gold-pale); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.notif-msg { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 4px; }
.notif-empty { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; }

.profile-pill {
  display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 6px;
  border: 1.5px solid var(--light-border); border-radius: 40px;
  background: var(--light-surface); cursor: pointer; transition: all .2s; text-decoration: none;
}
.profile-pill:hover { background: var(--gold-pale); border-color: var(--gold); }
.profile-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 600; color: #FFFFFF;
}
.profile-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.profile-role { font-size: 9px; color: var(--gold-dark); letter-spacing: 1px; text-transform: uppercase; }

/* Account Dropdown */
/* z-index:1500 — same reasoning as .notif-dropdown just above: this needs
   to clear .dental-overlay (400) so it is still visible while the
   Intraoral Examination is open, not just before/after. */
.account-dropdown {
  display: none; position: fixed; top: var(--topbar-h); right: 28px;
  width: 260px; background: var(--light-surface);
  border: 1px solid var(--light-border); border-radius: 12px;
  box-shadow: var(--shadow-dropdown); z-index: 1500; overflow: hidden;
}
.account-dropdown.open { display: block; }
.account-dropdown-header {
  padding: 14px 16px; 
  background: linear-gradient(135deg, var(--dark-bg), var(--dark-mid));
  display: flex; align-items: center;
}
.account-dropdown-header .profile-avatar {
  width: 38px; height: 38px; font-size: 15px;
}
.account-dropdown-header .profile-name {
  font-size: 13px; font-weight: 600; color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-dropdown-header .profile-role {
  font-size: 10px; color: var(--gold-light); margin-top: 2px;
}
.account-menu-list {
  padding: 6px 0;
}
.account-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s, color 0.15s;
  font-size: 12px; font-weight: 500;
}
.account-menu-item:hover {
  background: var(--gold-pale);
  color: var(--dark-bg);
}
.account-menu-item.logout-item {
  color: #DC2626;
}
.account-menu-item.logout-item:hover {
  background: #FEF2F2;
}
.account-menu-icon {
  width: 16px; height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
}
.account-menu-divider {
  height: 1px;
  background: var(--light-border);
  margin: 6px 0;
}

/* ─── MAIN CONTENT ─── */
.main-content {
  margin-left: var(--sidebar-w); margin-top: var(--topbar-h);
  padding: 12px 32px 32px; min-height: calc(100vh - var(--topbar-h));
  transition: margin-left .3s ease;
}

/* ─── PAGES ─── */
.page { display: none; animation: fadeSlide .2s ease; }
.page.active { display: block; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ─── PAGE HEADER ─── */
.page-header { margin-bottom: 14px; }
.page-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.5px; }
.page-header p { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.gold-bar { width: 40px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; margin-top: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ─── STAT CARDS ─── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--light-surface); border: 1px solid var(--light-border);
  border-radius: var(--radius-lg); padding: 20px;
  position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.stat-card .stat-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.stat-card .stat-value { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 600; color: var(--text-primary); line-height: 1; margin: 6px 0 4px; }
.stat-card .stat-sub { font-size: 11px; color: var(--gold-dark); font-weight: 600; }
.stat-icon {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px;
  background: var(--gold-pale); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.stat-icon svg { width: 18px; height: 18px; }
.stat-icon svg * { stroke: var(--gold-dark); }

/* ─── CARDS ─── */
.card {
  background: var(--light-surface); border: 1px solid var(--light-border);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-card);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 8px; overflow: visible;
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--light-border);
}
.card-title { display: flex; align-items: center; gap: 8px; font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: var(--text-primary); }
.card-title-bar { width: 4px; height: 17px; background: linear-gradient(to bottom, var(--gold-light), var(--gold)); border-radius: 2px; flex-shrink: 0; }

/* ─── READ-ONLY CLINICAL ASSESSMENT (teeth3d / oral diagnosis) ─── */
.ro-sub-title { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
.ro-check-item { display: flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.ro-check-box { width: 15px; height: 15px; border: 1.5px solid var(--light-border); border-radius: 4px; flex-shrink: 0; background: var(--white); transition: background .15s, border-color .15s; }
.ro-check-box.checked { background: linear-gradient(135deg, var(--gold-light), var(--gold)); border-color: var(--gold); position: relative; }
.ro-check-box.checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--text-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ─── GRID LAYOUTS ─── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-7-5 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.grid-5-7 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.col-stack { display: flex; flex-direction: column; gap: 16px; }

/* ─── FLASH MESSAGES ─── */
.flash {
  padding: 12px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 500;
  margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
  overflow: hidden; max-height: 100px;
  transition: opacity .4s ease, max-height .4s ease, margin-bottom .4s ease, padding .4s ease, border-width .4s ease;
}
.flash.success { background: var(--status-active-bg); color: var(--status-active); border: 1px solid #86EFAC; }
.flash.error { background: var(--status-inactive-bg); color: var(--status-inactive); border: 1px solid #FCA5A5; }
.flash.info { background: var(--gold-pale); color: var(--gold-dark); border: 1px solid var(--gold-light); }
.flash.flash-hide {
  opacity: 0; max-height: 0; margin-bottom: 0; margin-top: 0;
  padding-top: 0; padding-bottom: 0; border-width: 0;
}

/* ─── BADGES ─── */
.badge, .appt-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap;
}
.badge-active { background: var(--status-active-bg); color: var(--status-active); }
.badge-pending { background: var(--status-pending-bg); color: var(--status-pending); }
.badge-inactive { background: var(--status-inactive-bg); color: var(--status-inactive); }
.badge-follow { background: #EDE9FE; color: #7C3AED; }
.badge-confirmed { background: var(--status-active-bg); color: var(--status-active); }
.badge-cancelled { background: var(--status-inactive-bg); color: var(--status-inactive); }

/* ─── TABLES ─── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: 10px 14px; font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted);
  border-bottom: 2px solid var(--light-border); text-align: left; white-space: nowrap;
}
.data-table td {
  padding: 13px 14px; font-size: 13px; color: var(--text-primary);
  border-bottom: 1px solid var(--light-panel); vertical-align: middle;
}
.data-table tbody tr { cursor: pointer; transition: background .1s; }
.data-table tbody tr:hover td { background: var(--gold-pale); }
.data-table tbody tr:last-child td { border-bottom: none; }

.patient-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-pale), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 14px; font-weight: 600;
  color: var(--gold-dark); flex-shrink: 0;
}
.patient-cell { display: flex; align-items: center; gap: 10px; }
.patient-cell .p-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.patient-cell .p-code { font-size: 10px; color: var(--text-muted); }

/* ─── SEARCH BAR ─── */
.search-wrap { display: flex; gap: 10px; margin-bottom: 18px; }
.search-input {
  flex: 1; padding: 10px 14px; border: 1.5px solid var(--light-border); border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif; font-size: 13px; color: var(--text-primary);
  background: var(--light-surface); outline: none; transition: border-color .2s;
}
.search-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),0.12); }
.search-input::placeholder { color: var(--text-muted); }

/* ─── CALENDAR ─── */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-header h3 { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: var(--text-primary); }
.cal-nav { display: flex; gap: 5px; }
.cal-nav button {
  width: 28px; height: 28px; border: 1px solid var(--light-border); border-radius: var(--radius-sm);
  background: var(--light-panel); cursor: pointer; color: var(--text-muted); font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.cal-nav button:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-pale); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--gold-dark); text-transform: uppercase; padding-bottom: 10px; }
.cal-day {
  text-align: center; padding: 5px 2px; font-size: 12px; font-weight: 400;
  color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm);
  transition: all .15s; position: relative;
}
.cal-day:hover { background: var(--cream); color: var(--text-primary); }
.cal-day.today { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: #FFFFFF; font-weight: 700; }
.cal-day.has-appt { background: rgba(var(--gold-rgb),0.18); color: var(--text-primary); font-weight: 600; }
.cal-day.has-appt::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--gold-dark); }
.cal-day.today::after { background: rgba(255,255,255,0.7); }
.cal-day.other-month { color: #D5D0C5; }
.cal-day.sunday { color: #DC2626; }
.cal-day.closed-date { background: #FEE2E2; color: #DC2626; text-decoration: line-through; cursor: not-allowed; }
.cal-day.closed-date:hover { background: #FEE2E2; }
.cal-day.selected { outline: 2px solid var(--gold-dark); outline-offset: 1px; }

/* Month/Year <select> header — used instead of prev/next arrows when a
   picker is configured with a yearRange (birthdays/DOB), so jumping to a
   birth year decades back doesn't mean paging one month at a time. */
.cal-header-select { gap: 8px; }
.cal-select {
  flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--light-border); border-radius: var(--radius-sm);
  background: var(--light-panel); color: var(--text-primary); font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s;
}
.cal-select:hover, .cal-select:focus { border-color: var(--gold); outline: none; }
.cal-select-year { flex: 0 0 84px; }

/* ─── SHARED DATE-PICKER FIELD (DentechDatePicker — js/datepicker.js) ───
   Trigger + popup shell reused by every date field sitewide: birthdays,
   appointment dates, treatment dates, closed-date marking, etc. Matches
   the "New Appointment" date field on admin_appointments.php exactly. */
.dp-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 13px; border: 1.5px solid var(--light-border); border-radius: var(--radius);
  cursor: pointer; background: var(--light-panel); font-size: 13px; color: var(--text-primary); user-select: none;
  transition: border-color .15s;
}
.dp-trigger:hover { border-color: var(--gold); }
.dp-popup {
  display: none; position: fixed; width: 260px; z-index: 600;
  border: 1.5px solid var(--light-border); border-radius: var(--radius);
  background: var(--light-surface); padding: 12px; box-shadow: var(--shadow-dropdown);
}

/* ─── SHARED FIELD-VALIDATION STATE (js/validation.js) ───
   Applied by DentechValidate to any input inside a .form-group /
   .form-group-solo wrapper: email format, PH mobile format (09XXXXXXXXX),
   and password-strength checks across signup, admin add/edit-patient,
   walk-in booking, and profile/password-change forms. !important so it
   also overrides pages (e.g. index.php) that set border color inline. */
.input-error {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12) !important;
}
.field-error-text {
  color: #DC2626; font-size: 11px; font-weight: 500; margin-top: 5px; line-height: 1.4;
}

/* ─── APPOINTMENT LIST ─── */
.appt-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--light-panel); }
.appt-item:last-child { border-bottom: none; }
.appt-time { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 600; color: var(--gold-dark); min-width: 58px; }
.appt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.appt-info { flex: 1; }
.appt-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.appt-proc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ─── SCHEDULE TIMETABLE ─── */
.timetable { display: flex; flex-direction: column; }
.time-slot { display: flex; align-items: stretch; min-height: 52px; }
.time-label {
  width: 72px; flex-shrink: 0; font-size: 11px; color: var(--text-muted); font-weight: 500;
  padding: 10px 10px 10px 0; text-align: right; border-right: 2px solid var(--light-border);
}
.time-body { flex: 1; padding: 7px 12px; display: flex; align-items: center; border-bottom: 1px solid var(--light-panel); }
.time-slot.booked .time-label { color: var(--gold-dark); }
.time-slot.booked .time-body { background: rgba(var(--gold-rgb),0.04); }
.slot-block {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 14px; background: linear-gradient(90deg, var(--gold-pale), #FFFDF5);
  border: 1px solid rgba(var(--gold-rgb),0.3); border-radius: var(--radius);
}
.slot-block .slot-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.slot-block .slot-proc { font-size: 11px; color: var(--gold-dark); margin-top: 1px; }
.slot-available { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* ─── PATIENT RECORD ─── */
.record-section {
  font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--light-border);
  display: flex; align-items: center; justify-content: space-between;
}
.record-section-left { display: flex; align-items: center; gap: 8px; }
/* A lone action button (e.g. Dental History's "Edit") sitting directly in a
   section header must stay its natural width — override the mobile button-
   group rule below, which is meant for paired buttons like Delete/Edit Record. */
.record-section > button { flex: none; min-width: 0; }
.section-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.info-field .field-val { font-size: 13px; font-weight: 500; font-family: 'Montserrat', sans-serif; line-height: 1.4; color: var(--text-primary); padding-bottom: 5px; border-bottom: 1px solid var(--light-border); }
.full-width { grid-column: 1 / -1; }

/* ─── YES/NO QUESTIONNAIRE ─── */
.yesno-list { border: 1px solid var(--light-border); border-radius: var(--radius); overflow: hidden; }
.yesno-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 13px; border-bottom: 1px solid var(--light-panel);
  font-size: 12px; color: var(--text-primary); gap: 16px;
}
.yesno-item:last-child { border-bottom: none; }
.yesno-item:hover { background: var(--gold-pale); }
.q-text { flex: 1; }
.yesno-btns { display: flex; gap: 5px; flex-shrink: 0; }
.yn-btn {
  padding: 3px 10px; border-radius: 4px; cursor: pointer; border: 1.5px solid var(--light-border);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  background: var(--light-surface); color: var(--text-muted); transition: all .15s;
  font-family: 'Montserrat', sans-serif;
}
.yn-btn.yes.sel { background: var(--status-active-bg); border-color: var(--status-active); color: var(--status-active); }
.yn-btn.no.sel { background: var(--status-inactive-bg); border-color: var(--status-inactive); color: var(--status-inactive); }
.yn-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; margin-top: 10px; }
.check-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.check-item input[type="checkbox"] { accent-color: var(--gold-dark); cursor: pointer; }

/* ─── TREATMENT TABLE ─── */
.treatment-table { width: 100%; border-collapse: collapse; }
.treatment-table th { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); padding: 9px 12px; border-bottom: 2px solid var(--light-border); text-align: left; }
.treatment-table td { padding: 12px; font-size: 12px; color: var(--text-primary); border-bottom: 1px solid var(--light-panel); }
.treatment-table tr:hover td { background: var(--gold-pale); }
.treatment-table tr:last-child td { border-bottom: none; }

/* ─── FORM GRIDS ─── */
.form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.form-group-solo { margin-bottom: 12px; }

/* ─── PROFILE HERO ─── */
.profile-hero {
  display: flex; align-items: center; gap: 22px; padding: 28px 32px; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--dark-bg), var(--dark-mid));
  border-radius: var(--radius-xl); position: relative; overflow: hidden;
}
.profile-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(var(--gold-rgb),0.15) 0%, transparent 60%); }
.profile-avatar-lg {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600;
  color: #FFFFFF; position: relative; z-index: 1;
  box-shadow: 0 4px 20px rgba(var(--gold-rgb),0.3); border: 3px solid rgba(var(--gold-rgb),0.3);
}
.profile-hero-info { position: relative; z-index: 1; }
.profile-hero-info h2 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: #FFFFFF; }
.profile-hero-info p { font-size: 11px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }

/* ─── MODALS ─── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 1600;
  background: rgba(var(--dark-bg-rgb),0.65); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: var(--light-surface); border-radius: var(--radius-xl); padding: 28px;
  width: 520px; max-width: 95vw; box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  max-height: 90vh; overflow-y: auto;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-header h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--text-primary); }
.btn-close {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: var(--light-panel); cursor: pointer; font-size: 14px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.btn-close:hover { background: #FEE2E2; color: #DC2626; }

/* ─── UTILITIES ─── */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.text-gold { color: var(--gold-dark); font-weight: 600; }
.text-red { color: var(--status-inactive); font-weight: 600; }
.text-muted { color: var(--text-muted); }
.w-full { width: 100%; }
.divider { height: 1px; background: var(--light-border); margin: 14px 0; }

/* Responsive utilities */
.hidden-mobile { display: block; }
.show-mobile { display: none; }
.hidden-tablet { display: block; }
.show-tablet { display: none; }

@media (max-width: 1024px) {
  .hidden-tablet { display: none; }
  .show-tablet { display: block; }
}

@media (max-width: 768px) {
  .hidden-mobile { display: none; }
  .show-mobile { display: block; }
  
  .flex-mobile-column {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* Responsive text utilities */
@media (max-width: 768px) {
  .text-sm-mobile { font-size: 12px; }
  .text-xs-mobile { font-size: 10px; }
}

/* ── DESKTOP RESPONSIVE (1280px and below) ── */
@media (max-width: 1280px) { 
  .stat-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .main-content {
    padding: 12px 24px 32px;
  }
  
  /* Improve card spacing */
  .card {
    padding: 20px;
  }
  
  /* Better grid layouts for smaller screens */
  .grid-7-5, .grid-5-7 {
    gap: 20px;
  }
}

/* ─── PATIENT PORTAL – SECTION SWITCHING ─── */
.section { display: none; }
.section.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ─── BOOK CTA ─── */
.book-cta {
  background: linear-gradient(135deg, var(--dark-bg), var(--dark-mid));
  border-radius: var(--radius-xl); padding: 28px 32px; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: relative; overflow: hidden;
}
.book-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(var(--gold-rgb),0.15) 0%, transparent 60%); }
.book-cta-text { position: relative; z-index: 1; }
.book-cta-text h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: #FFFFFF; }
.book-cta-text p { font-size: 11px; color: var(--gold); margin-top: 4px; letter-spacing: 0.5px; }
.btn-book {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: none; border-radius: var(--radius); cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(var(--gold-rgb),0.35); transition: transform .2s; white-space: nowrap;
}
.btn-book:hover { transform: translateY(-1px); }

/* ─── BALANCE CARDS ─── */
.balance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.balance-card {
  background: var(--light-surface); border-radius: var(--radius-lg); border: 1px solid var(--light-border);
  box-shadow: var(--shadow-card); padding: 20px 22px; position: relative; overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.balance-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.balance-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.balance-card .b-label { font-size: 9px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.balance-card .b-value { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 600; color: var(--text-primary); margin: 6px 0 4px; line-height: 1; }
.balance-card .b-sub { font-size: 11px; color: var(--gold-dark); font-weight: 500; }
.balance-card.danger .b-value { color: var(--status-inactive); }

/* ─── PATIENT APPOINTMENT ITEMS ─── */
.appt-date-block { min-width: 52px; }
.appt-date-block .a-date { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 600; color: var(--gold-dark); }
.appt-date-block .a-time { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

/* ─── PATIENT PROFILE ─── */
.profile-hero {
  display: flex; align-items: center; gap: 24px; padding: 28px 32px; margin-bottom: 24px;
  background: linear-gradient(135deg, var(--dark-bg), var(--dark-mid));
  border-radius: var(--radius-xl); position: relative; overflow: hidden;
}
.profile-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(var(--gold-rgb),0.15) 0%, transparent 60%); }
.profile-avatar-lg {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600;
  color: #FFFFFF; position: relative; z-index: 1;
  box-shadow: 0 4px 20px rgba(var(--gold-rgb),0.3); border: 3px solid rgba(var(--gold-rgb),0.3);
}
.profile-hero-info { position: relative; z-index: 1; }
.profile-hero-info h2 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: #FFFFFF; }
.profile-hero-info p { font-size: 11px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }

/* ─── PATIENT RECORD SECTIONS ─── */
.record-section-title {
  font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 600;
  color: var(--text-primary); margin: 20px 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--light-border); display: flex; align-items: center; gap: 8px;
}
.record-section-title .gold-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.gold-rule { width: 48px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; margin-top: 10px; }
.col-7-5 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.col-5-7 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; }

/* ─── CHATBOT ─── */
.chat-msg { display: flex; }
.chat-msg.bot { justify-content: flex-start; }
.chat-msg.user { justify-content: flex-end; }
.chat-bubble { max-width: 78%; padding: 12px 16px; border-radius: 16px; font-size: 13px; line-height: 1.6; }
.bot-bubble { background: var(--light-surface); border: 1px solid var(--light-border); color: var(--text-secondary); border-radius: 4px 16px 16px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.user-bubble { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--text-primary); border-radius: 16px 4px 16px 16px; font-weight: 500; }
.chat-bubble em { color: var(--gold-dark); font-style: italic; }
.chat-bubble .assess-tag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; margin: 2px 3px 2px 0; }
.assess-urgent { background: #FDECEA; color: #C62828; border: 1px solid #EF9A9A; }
.assess-moderate { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.assess-mild { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.quick-btn { padding: 6px 12px; background: var(--light-surface); border: 1.5px solid var(--light-border); border-radius: 20px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all .15s; white-space: nowrap; }
.quick-btn:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-pale); }
.typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--light-border); animation: typingBounce 1.2s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

/* ─── 3D VIEWER ─── */
@keyframes spin3d { to { transform: rotate(360deg); } }
@keyframes pulse3d { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ─── PATIENT PROFILE BADGE (topbar) ─── */
.profile-badge {
  display: flex; align-items: center; gap: 10px; cursor: default;
  padding: 6px 14px 6px 8px; border-radius: 40px;
  border: 1.5px solid var(--light-border); background: var(--light-surface);
}
.profile-info .p-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.profile-info .p-role { font-size: 9px; color: var(--gold-dark); letter-spacing: 1px; text-transform: uppercase; }

/* ─── PATIENT FORM SUBMIT ─── */
.btn-submit {
  padding: 12px 28px; background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: none; border-radius: var(--radius); cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-primary);
  box-shadow: 0 3px 12px rgba(var(--gold-rgb),0.25); transition: transform .15s;
}
.btn-submit:hover { transform: translateY(-1px); }

/* ════════════════════════════════════════════════
   INTRAORAL EXAMINATION — FULL-SCREEN TAKEOVER
   (formerly a boxed "Dental Chart" modal — now expands to fill the
   entire viewport like its own page, with a Back button instead of
   a small close (✕) button. See openDentalChart()/exitIntraoralExam().)
   ════════════════════════════════════════════════ */

/* Overlay — fills the content area beside the sidebar and below the topbar,
   NOT the whole viewport (it used to be inset:0, covering the sidebar and
   topbar entirely — that also hid the sidebar-collapse toggle, which lives
   in the topbar). Positioned exactly like .topbar/.main-content, and it
   tracks the same sidebar-collapsed state (see body.sidebar-collapsed
   .dental-overlay above, and the matching responsive overrides beside every
   .topbar { left: ... } rule below) so the dentist keeps full use of the
   sidebar and its toggle while the exam is open. */
.dental-overlay {
  display: none; position: fixed;
  top: var(--topbar-h); left: var(--sidebar-w); right: 0; bottom: 0;
  z-index: 400;
  background: var(--cream);
  align-items: stretch; justify-content: stretch; padding: 0;
  transition: left .3s ease;
}
.dental-overlay.active { display: flex; }

/* Modal shell — fills the overlay's own (now sidebar/topbar-aware) box
   rather than the raw viewport, so it doesn't stick out past the overlay's
   bounds. A soft warm gradient instead of flat white so the page doesn't
   read as a stark, sterile blank canvas. */
.dc-modal {
  width: 100%; max-width: none;
  height: 100%;
  max-height: none;
  min-height: 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--off-white) 55%, var(--off-white) 100%);
  border: none;
  border-radius: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  position: relative;
}

/* ── Header ── */
.dc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-mid) 100%);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.2);
  flex-shrink: 0;
}
.dc-header-brand { display: flex; align-items: center; gap: 12px; }
.dc-back-btn {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  flex-shrink: 0;
}
.dc-back-btn:hover { background: rgba(var(--gold-rgb),0.18); border-color: rgba(var(--gold-rgb),0.4); color: var(--gold); }
.dc-header-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 0.3px;
}
.dc-header-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 1px; }
.dc-code { color: rgba(var(--gold-rgb),0.75); font-weight: 600; }
.dc-header-actions { display: flex; align-items: center; gap: 10px; }

/* Workflow Guide Steps */
.dc-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.dc-guide-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dc-guide-step:hover {
  background: rgba(var(--gold-rgb), 0.15);
  transform: translateY(-1px);
}

.dc-guide-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
  color: var(--dark-bg);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--gold-rgb), 0.3);
}

.dc-guide-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.dc-guide-arrow {
  color: rgba(var(--gold-rgb), 0.5);
  flex-shrink: 0;
  opacity: 0.7;
}

/* Enhanced Toast Notifications */
#dc-toast-stack {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.dc-toast {
  pointer-events: auto;
  min-width: 320px;
  max-width: 480px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 
              0 4px 12px rgba(0, 0, 0, 0.1),
              0 0 0 1px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  animation: dc-toast-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.2s ease;
  border-left: 4px solid var(--gold);
}

.dc-toast.dc-toast-leaving {
  animation: dc-toast-slide-out 0.2s ease-out forwards;
}

@keyframes dc-toast-slide-in {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes dc-toast-slide-out {
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.dc-toast[data-variant="success"] {
  border-left-color: var(--system-success);
  background: linear-gradient(135deg, var(--system-success-bg) 0%, var(--white) 100%);
}

.dc-toast[data-variant="error"] {
  border-left-color: var(--system-error);
  background: linear-gradient(135deg, var(--system-error-bg) 0%, var(--white) 100%);
}

.dc-toast[data-variant="warning"] {
  border-left-color: var(--system-warning);
  background: linear-gradient(135deg, var(--system-warning-bg) 0%, var(--white) 100%);
}

.dc-toast-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--gold-dark);
}

.dc-toast[data-variant="success"] .dc-toast-icon {
  background: var(--system-success-icon-bg);
  color: var(--system-success-icon-text);
}

.dc-toast[data-variant="error"] .dc-toast-icon {
  background: var(--system-error-icon-bg);
  color: var(--system-error-icon-text);
}

.dc-toast[data-variant="warning"] .dc-toast-icon {
  background: var(--system-warning-icon-bg);
  color: var(--system-warning-icon-text);
}

.dc-toast-body {
  flex: 1;
  min-width: 0;
}

.dc-toast-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827 !important;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.dc-toast-message {
  font-size: 13px;
  color: #4b5563 !important;
  line-height: 1.5;
  font-weight: 500;
}

.dc-toast-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #9ca3af;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.dc-toast-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #374151;
}

@media (max-width: 768px) {
  #dc-toast-stack {
    top: 60px;
    right: 12px;
    left: 12px;
  }
  
  .dc-toast {
    min-width: 0;
    max-width: none;
  }
}

.dc-hint {
  font-size: 10px; color: rgba(255,255,255,0.3);
  padding: 4px 12px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
}
.dc-close-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.dc-close-btn:hover { background: rgba(220,38,38,0.25); border-color: rgba(220,38,38,0.5); color: #f87171; }

/* Scrolls the exam page vertically: the chart + pickers (.dc-body) fill one
   full screen exactly as before, and the Clinical Assessment card sits below
   it — reached by scrolling this region — instead of shrinking the chart to
   make room for it. The header above stays put (flex-shrink:0). */
.dc-scroll-region {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Body ── */
/* .dc-left sizes to its own content (3D model + 2D chart) and is never
   capped or scrolled internally. align-items: start keeps this grid from
   stretching either column to match the other's height by default (grid's
   normal behavior), so .dc-left's rendered height stays purely a function
   of its own content — that height is then read by JS
   (syncRightPanelHeight(), see openDentalChart()) and applied to .dc-right
   as a max-height, with .dc-right scrolling internally past that point.
   The two columns end up the same visual height either way: exactly
   .dc-left's height, with .dc-right showing a scrollbar only when its own
   content would otherwise run longer. */
.dc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  grid-template-rows: auto;
  align-items: start;
  flex: none;
}

/* ── Clinical Assessment (below the chart + Condition/Treatment pickers) ── */
.dc-assessment-section {
  flex: none;
  padding: 26px 16px 40px;
  background: var(--light-panel);
  border-top: 1px solid var(--light-border);
}
.dc-assessment-inner {
  max-width: 1100px;
  margin: 0 auto;
}
/* The four Periodontal/Occlusion/Appliances/TMD cards + the X-rays card below
   them get a colored top accent instead of sitting flat — same treatment the
   rest of the app uses for its cards (see .stat-card::before in this file),
   with a distinct hue per category so they're easy to tell apart at a glance. */
.dc-assessment-card {
  position: relative;
  background: var(--light-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.dc-assessment-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}
.dc-assessment-card[data-accent="perio"]::before { background: linear-gradient(90deg, #DC2626, #F87171); }
.dc-assessment-card[data-accent="occlusion"]::before { background: linear-gradient(90deg, #7C3AED, #C4B5FD); }
.dc-assessment-card[data-accent="appliances"]::before { background: linear-gradient(90deg, #0891B2, #67E8F9); }
.dc-assessment-card[data-accent="tmd"]::before { background: linear-gradient(90deg, #D97706, #FCD34D); }
.dc-assessment-card[data-accent="xray"]::before { background: linear-gradient(90deg, #16A34A, #86EFAC); }

/* ── Left column ── */
/* No overflow-y here — .dc-body no longer clamps this column to a fixed
   height (see above), so there is nothing to scroll internally: the 3D
   model and 2D chart both render in full, and the page (.dc-scroll-region)
   scrolls if the combined content is taller than the window. */
.dc-left {
  padding: 20px;
  overflow-x: hidden;
  background: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(var(--gold-rgb),0.09), transparent 65%), var(--off-white);
  border-right: 1px solid var(--light-border);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  min-width: 0;
  max-width: 100%;
}

/* Make 2D chart scrollable inside left panel so it never breaks the grid */
.dc-2d-card { overflow-x: auto; }

/* 3D and 2D cards share a capped, centered width — on a wide screen the old
   full-bleed layout stretched the 3D viewer edge-to-edge with a small model
   lost in a lot of empty black space. Capping keeps the frame proportional
   to what it's actually displaying. A percentage (rather than one fixed
   pixel value) so it fills most of the left column on a typical laptop
   width without leaving huge cream gutters, while an outer ceiling still
   keeps it from stretching edge-to-edge on a very wide monitor. */
.dc-3d-card, .dc-2d-card {
  width: 100%;
  max-width: min(92%, 1080px);
}

/* 3D card — the canvas itself is a fixed 460px tall (see adminLoadScene's
   "const h = 460" — trimmed down from the original 500px so the 3D viewer
   and the 2D chart below it both fit on a normal desktop screen without
   needing to scroll .dc-left), but this card can flex-grow taller than
   that on a tall viewport, leaving a strip below the canvas that shows the
   card's own background. That strip used to be invisible because it was
   the same near-black as the old scene; now that the scene renders light
   (see adminLoadScene's bgMat/setClearColor), the card background is
   matched to it so there's no visible seam. */
.dc-3d-card {
  border-radius: 14px; overflow: hidden;
  background: #EDE6D8;
  border: 1px solid rgba(var(--gold-rgb),0.2);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  flex: 1;
  min-height: 460px;
  max-height: 560px;
}
.dc-3d-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  background: linear-gradient(90deg, var(--dark-bg), var(--dark-mid));
  border-bottom: 1px solid rgba(var(--gold-rgb),0.15);
}
.dc-3d-bar-left { display: flex; align-items: center; gap: 9px; font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); letter-spacing: 0.4px; }
.dc-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 7px rgba(var(--gold-rgb),0.9);
  animation: dc-pulse 2s ease-in-out infinite;
}
@keyframes dc-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.dc-3d-bar-right { display: flex; gap: 5px; }
.dc-ctrl-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(var(--gold-rgb),0.08);
  border: 1px solid rgba(var(--gold-rgb),0.2);
  color: rgba(var(--gold-rgb),0.8);
  font-size: 10px; font-weight: 600;
  cursor: pointer; font-family: 'Montserrat', sans-serif;
  transition: all .15s;
}
.dc-ctrl-btn:hover, .dc-ctrl-btn.active {
  background: rgba(var(--gold-rgb),0.2);
  border-color: rgba(var(--gold-rgb),0.45);
  color: var(--gold);
}
.dc-canvas-wrap { position: relative; }
#toothCanvas {
  width: 100%;
  height: 460px;
  display: block;
}
/* Responsive canvas height */
@media (max-width: 1024px) {
  #toothCanvas { height: 400px; }
}
@media (max-width: 768px) {
  #toothCanvas { height: 350px; }
}
@media (max-width: 480px) {
  #toothCanvas { height: 300px; }
}
/* Softened from a hard black ring to a warm, low-opacity tint — the scene
   background itself is light now (see adminLoadScene's bgMat/setClearColor),
   so a stark black vignette would fight it instead of just adding depth. */
.dc-canvas-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(26,23,16,0.14) 100%);
}
.dc-canvas-state {
  position: absolute; inset: 0;
  background: var(--light-panel);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center;
}
.dc-spinner { position: relative; width: 48px; height: 48px; }
.dc-spin-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
}
.dc-spin-ring-1 { border-top-color: var(--gold-dark); animation: dc-spin 0.85s linear infinite; }
.dc-spin-ring-2 { inset: 8px; border-top-color: rgba(var(--gold-rgb),0.4); animation: dc-spin 1.3s linear infinite reverse; }
@keyframes dc-spin { to { transform: rotate(360deg); } }
.dc-state-title { font-size: 12px; font-weight: 600; color: var(--gold-dark); font-family: 'Montserrat', sans-serif; }
.dc-state-sub { font-size: 10px; color: var(--text-muted); }
.dc-error-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(var(--gold-rgb),0.14);
  border: 1px solid rgba(var(--gold-rgb),0.35);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-dark);
}
.dc-canvas-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  padding: 4px 14px; border-radius: 20px;
  font-size: 9px; color: rgba(255,255,255,0.35);
  font-family: 'Montserrat', sans-serif;
  pointer-events: none; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.07);
}

/* 2D card */
.dc-2d-card {
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  border-radius: 14px; padding: 12px 14px;
  overflow-x: auto;
  flex-shrink: 0;
}
/* Scale teeth smaller so they fit cleanly inside the left panel */
.dc-left .tooth-2d { width: 24px; height: 32px; }
.dc-left .tooth-surfaces, .dc-left .tooth-surfaces svg { width: 24px; height: 28px; }
.dc-left .teeth-arch { gap: 5px; }
.dc-left .tooth-num-2d { font-size: 7px; }

/* ── Tooth anatomy shared classes (used by JS renderer) ── */
.teeth-2d { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.teeth-arch { display: flex; gap: 7px; flex-wrap: nowrap; justify-content: center; }
.tooth-2d { width: 32px; height: 42px; cursor: pointer; transition: transform .15s; display: flex; flex-direction: column; align-items: center; position: relative; flex-shrink: 0; }
.tooth-2d:hover { transform: scale(1.1); }
.tooth-2d.selected { transform: scale(1.1); outline: 2px solid var(--gold-dark); outline-offset: 2px; border-radius: 6px; }
.tooth-surfaces { width: 34px; height: 38px; position: relative; flex-shrink: 0; }
.tooth-surfaces svg { width: 34px; height: 38px; display: block; }
.tooth-num-2d { font-size: 8px; font-weight: 700; color: var(--text-muted); margin-top: 2px; line-height: 1; text-align: center; }
/* Surface colours */
/* Tooth status palette — one legend, used everywhere a tooth is drawn
   (admin Intraoral Examination 2D chart, patient 3D Teeth Viewer's 2D chart
   and its own legend swatches below). Untreated/undiagnosed is plain white
   (the default for a present, healthy, undiagnosed tooth, and for items
   that don't change a tooth's status: consultation, periapical X-ray,
   cleaning, pedia OP fluoride, deep scaling/root planing, Orthodontics,
   treatment-page anesthesia, tooth whitening). The gold stroke is kept on
   the white fill purely so the tooth outline still reads against the
   panel background — it is not a status color. */
.surf-normal   { fill: var(--tooth-normal-fill); stroke: var(--tooth-normal-stroke); stroke-width: 1; }
.surf-decayed  { fill: var(--tooth-decayed-fill); stroke: var(--tooth-decayed-stroke); stroke-width: 1.5; }
.surf-treated  { fill: var(--tooth-treated-fill); stroke: var(--tooth-treated-stroke); stroke-width: 1.5; }
.surf-missing  { fill: var(--tooth-missing-fill); stroke: var(--tooth-missing-stroke); stroke-width: 1; stroke-dasharray: 3,2; }
.surf-impacted { fill: var(--tooth-impacted-fill); stroke: var(--tooth-impacted-stroke); stroke-width: 1.5; }
.tooth-2d:hover .surf-normal { fill: var(--tooth-normal-hover-fill); stroke: var(--gold); }

/* Patient 3D Teeth Viewer's own text legend (patient_teeth3d.php) — same
   five statuses/colors as .surf-* above, just rendered as small solid
   swatches next to a label instead of on the tooth SVG itself. */
.tooth-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); }
.legend-box { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.legend-box.normal   { background: var(--tooth-normal-fill); border: 1.5px solid var(--tooth-normal-stroke); }
.legend-box.decayed  { background: var(--tooth-decayed-fill); border: 1.5px solid var(--tooth-decayed-stroke); }
.legend-box.treated  { background: var(--tooth-treated-fill); border: 1.5px solid var(--tooth-treated-stroke); }
.legend-box.missing  { background: var(--tooth-missing-fill); border: 1.5px dashed var(--tooth-missing-stroke); }
.legend-box.impacted { background: var(--tooth-impacted-fill); border: 1.5px solid var(--tooth-impacted-stroke); }
.teeth-arch-label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-dark); font-weight: 700; margin: 3px 0; }
.teeth-arch-label-temp { font-size: 8px; color: var(--text-muted); font-weight: 600; opacity: .8; margin: 0; }
.primary-teeth-group { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }

/* Eruption-locked permanent tooth — its primary predecessor is still
   present, so it can't be clicked/diagnosed until that tooth is marked
   Extracted/Missing (see isEruptionLocked() in admin_patient_record.php). */
.tooth-2d.eruption-locked { opacity: .38; filter: grayscale(55%); }
.tooth-2d.eruption-locked .tooth-surfaces { cursor: not-allowed; }
.tooth-2d.eruption-locked:hover { transform: none; }
.eruption-lock-badge { position: absolute; top: -4px; right: -4px; font-size: 11px; line-height: 1; pointer-events: none; filter: none; }

.midline-sep { display: flex; align-items: center; gap: 8px; width: 100%; padding: 2px 0; }
.midline-sep span { font-size: 9px; letter-spacing: 1.5px; color: var(--gold-dark); text-transform: uppercase; font-weight: 700; }
.midline-sep::before, .midline-sep::after { content: ''; flex: 1; height: 1.5px; background: var(--gold); }
/* Condition tags */
.condition-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; margin-bottom: 12px; }
.condition-tag.normal   { background: #F5F5F5; color: #8B6914; border: 1.5px solid #B8960C; }
.condition-tag.decayed  { background: #F5D9D9; color: #C0392B; border: 1.5px solid #C0392B; }
.condition-tag.treated  { background: #D6E8D6; color: #43A047; border: 1.5px solid #43A047; }
.condition-tag.missing  { background: #E2E2E2; color: #6E6E6E; border: 1.5px solid #6E6E6E; }
.condition-tag.impacted { background: #E7DAF2; color: #9B59B6; border: 1.5px solid #9B59B6; }
.treatment-rec-list { display: flex; flex-direction: column; gap: 7px; }
.treatment-rec-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; background: var(--light-surface); border: 1px solid var(--gold-light); border-radius: var(--radius); font-size: 12px; color: var(--text-primary); }
.rec-code { font-size: 10px; font-weight: 700; color: var(--gold-dark); background: var(--gold-pale); padding: 2px 7px; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--gold); }
/* 3D animations */
@keyframes spin3d { to { transform: rotate(360deg); } }
@keyframes pulse3d { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Legacy compatibility aliases */
.cond-btn-grid { @extend .dc-btn-grid; }
.cond-code { @extend .dc-opt-code; }

/* Legacy compatibility - proper CSS for button classes used by JavaScript */
.cond-btn-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
}
.cond-btn {
  padding: 6px 9px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--light-border);
  background: var(--light-surface); color: var(--text-muted);
  transition: all .15s; text-align: left;
  font-family: 'Montserrat', sans-serif;
  display: flex; flex-direction: column;
}
.cond-btn:hover, .cond-btn.active {
  background: var(--gold-pale);
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}
.cond-code {
  font-size: 9px; color: var(--gold-dark); font-weight: 700; margin-bottom: 1px;
}
.cond-btn.active .cond-code { color: var(--gold-dark); }

.dc-2d-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.dc-section-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.dc-section-hint { font-size: 10px; color: var(--text-muted); opacity: 0.65; }
.dc-legend {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--light-border);
}
.dc-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); }
.dc-legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* ── Right column ── */
/* height/max-height:100% of the grid row (now a definite size — see
   .dc-body's grid-template-rows above) rather than a guessed
   calc(90vh - 80px). That guess assumed the header chrome above .dc-body
   (topbar + .dc-header) always adds up to exactly 10vh + 80px, which
   isn't true at every viewport height — when the real chrome took up
   more than that, .dc-right rendered taller than .dc-body actually had
   room for and the bottom (Save Changes) got clipped by .dc-body's own
   overflow:hidden. 100% always matches the real available space. */
/* overflow-y:auto (not hidden) is the safety net for everything below: no
   matter how tall the tab-nav + tab-panels + proc-status-area + tooth panel
   + action buttons add up to on a given screen, the admin can always
   scroll THIS column to reach the rest instead of the bottom being
   silently clipped with no way to get to it (that's what was happening —
   height:100% bounds this column to the space .dc-body actually has, and
   overflow:hidden was discarding whatever didn't fit instead of making it
   reachable). The fixed-height budgeting below (.dc-tab-panels' 320px cap,
   #tooth-info-panel sizing to its own content, etc.) still does the real
   work of making the common case fit without ever needing to scroll — this
   is only the fallback for when it doesn't. */
/* max-height is set inline by syncRightPanelHeight() (see
   openDentalChart() in admin_patient_record.php) to match .dc-left's
   rendered height. This element no longer scrolls itself (overflow-y is
   NOT auto here) — #tooth-header-fixed and #tooth-action-buttons are its
   direct flex children so they stay put at their natural size, and
   .dc-right-scroll (the third child, flex:1 1 auto, see below) is the one
   that actually scrolls, filling whatever space is left between them.
   overflow-y:hidden is a safety net matching that intent: if content ever
   pushed past the max-height cap, it clips here instead of spilling out
   past .dc-left's edge. Before the JS runs (or if it never does) this
   column simply falls back to its natural content height, same as
   .dc-left. */
.dc-right {
  background: var(--light-surface);
  display: flex; flex-direction: column;
  overflow-y: hidden;
  overflow-x: hidden;
  min-width: 0;
  min-height: 0;
}
/* The actual scroll container between the fixed header and fixed Save
   Changes button — see the HTML comment above #tooth-header-fixed in
   admin_patient_record.php for why this wrapper exists. */
.dc-right-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.dc-right-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--light-panel);
  border-bottom: 1px solid var(--light-border);
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted);
}
.dc-right-header-hint { font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); opacity: 0.7; }

.dc-empty-state {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px 20px; gap: 12px;
  min-height: 180px;
}
.dc-empty-icon {
  width: 58px; height: 58px; border-radius: 14px;
  background: var(--light-panel); border: 1.5px dashed var(--light-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.dc-empty-heading { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.dc-empty-body { font-size: 12px; color: var(--text-muted); line-height: 1.6; max-width: 200px; }
.dc-code-ref {
  width: 100%; background: var(--light-panel);
  border-radius: 10px; padding: 12px 14px; text-align: left; margin-top: 4px;
}
.dc-code-ref-title { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.dc-code-ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
.dc-code-ref-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-secondary); }
.dc-ref-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: var(--light-surface); border: 1px solid var(--light-border); color: var(--text-primary); min-width: 22px; text-align: center; flex-shrink: 0; }

/* Active tooth panel */
.dc-tooth-panel { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  overflow: hidden; 
  min-height: 0;
  height: calc(90vh - 160px);
  max-height: calc(90vh - 160px);
}
.dc-tooth-id-bar {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--dark-bg), var(--dark-mid));
  border-bottom: 1px solid rgba(var(--gold-rgb),0.15);
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.dc-tooth-label { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.1; }
.dc-tooth-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.dc-condition-tags { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; max-width: 140px; margin-top: 2px; }

/* Scrollable panel body */
.dc-panel-scroll { 
  flex: 1; 
  overflow-y: scroll !important; 
  overflow-x: hidden;
  padding: 14px 16px 20px; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  min-height: 0;
  height: calc(90vh - 240px);
  max-height: calc(90vh - 240px);
}

/* Info box */
.dc-info-box { background: var(--light-panel); border-radius: 10px; padding: 11px 13px; }
.dc-box-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.dc-info-text { font-size: 12px; color: var(--text-secondary); line-height: 1.7; }

/* Surface editor card */
.dc-surface-card {
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  border-radius: 10px; overflow: hidden;
}
.dc-surface-header {
  padding: 9px 13px;
  background: var(--light-panel);
  border-bottom: 1px solid var(--light-border);
  display: flex; align-items: center; justify-content: space-between;
}
.dc-surface-chip {
  font-size: 10px; font-weight: 600; color: var(--gold-dark);
  background: rgba(var(--gold-rgb),0.1);
  padding: 2px 8px; border-radius: 4px;
}
.dc-surface-prompt { padding: 18px; text-align: center; }
.dc-surface-prompt-icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(var(--gold-rgb),0.07);
  border: 1.5px dashed rgba(var(--gold-rgb),0.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px; color: var(--gold-dark);
}
.dc-surface-prompt-text { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.dc-surface-prompt-hint { font-size: 10px; color: var(--text-muted); margin-top: 3px; }

/* Editor form elements */
.dc-editor-section-label { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.dc-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.dc-opt-btn {
  padding: 6px 9px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--light-border);
  background: var(--light-surface);
  color: var(--text-muted);
  transition: all .15s; text-align: left;
  font-family: 'Montserrat', sans-serif;
  display: flex; flex-direction: column;
}
.dc-opt-btn:hover, .dc-opt-btn.active {
  background: var(--gold-pale);
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}
.dc-opt-code { font-size: 9px; color: var(--gold-dark); font-weight: 700; margin-bottom: 1px; }
.dc-opt-btn.active .dc-opt-code { color: var(--gold-dark); }
.dc-notes-input {
  width: 100%; padding: 8px 10px;
  background: var(--light-panel);
  border: 1.5px solid var(--light-border);
  border-radius: 7px;
  font-family: 'Montserrat', sans-serif; font-size: 12px; color: var(--text-primary);
  resize: vertical; min-height: 60px; outline: none;
  box-sizing: border-box; transition: border-color .2s;
}
.dc-notes-input:focus { border-color: var(--gold); background: var(--light-surface); }
.dc-save-btn {
  margin-top: 10px; width: 100%; padding: 10px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: none; border-radius: 8px;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  color: #1A1710; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 3px 12px rgba(var(--gold-rgb),0.3);
}
.dc-save-btn:hover { opacity: .88; transform: translateY(-1px); }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN - MOBILE & TABLET SUPPORT
   ════════════════════════════════════════════════════════════════ */

/* Mobile Overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 95;
  backdrop-filter: blur(4px);
}

.mobile-overlay.active {
  display: block;
}

/* ── DESKTOP (above 1024px) ── */
@media (min-width: 1025px) {
  /* Ensure desktop button shows and mobile button is hidden */
  .sidebar-toggle-btn {
    display: flex !important;
  }

  .mobile-menu-toggle {
    display: none !important;
  }
}

/* The 3D viewer's toolbar (title + Reset/Auto/Wire) wraps instead of
   clipping if the card is ever narrow (e.g. a resized window) — cheap
   safety net, no visual change at normal widths. */
.dc-3d-bar { flex-wrap: wrap; row-gap: 6px; }

/* ── TABLET (1024px and below) ── */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: 240px;
    --topbar-h: 60px;
  }

  /* Hide desktop sidebar toggle, show mobile hamburger */
  .sidebar-toggle-btn {
    display: none !important;
  }

  /* Show mobile menu toggle on tablets */
  .mobile-menu-toggle {
    display: flex;
    margin-right: 12px;
    flex-shrink: 0;
  }
  
  /* Adjust topbar layout for tablet - consistent padding */
  .topbar {
    left: 0 !important;
    padding: 0 20px !important; /* Consistent padding on both sides */
  }

  .topbar-left {
    gap: 0;
    margin: 0;
  }

  /* Remove left margin from main content but keep consistent padding */
  .main-content {
    margin-left: 0 !important;
    padding: 12px 20px 32px !important; /* Match topbar horizontal padding */
  }

  /* Sidebar is off-canvas by default at this width (see .sidebar transform
     below) — the exam overlay goes full-width like the topbar/main-content. */
  .dental-overlay {
    left: 0 !important;
  }

  /* Ensure body doesn't have sidebar margin on tablet */
  body.sidebar-collapsed .topbar {
    left: 0 !important;
  }

  body.sidebar-collapsed .main-content {
    margin-left: 0 !important;
  }

  body.sidebar-collapsed .dental-overlay {
    left: 0 !important;
  }

  /* Hide sidebar by default on tablets */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 101;
    width: var(--sidebar-w); /* Reset width on mobile */
  }

  /* Remove collapsed state on mobile */
  .sidebar.collapsed {
    width: var(--sidebar-w);
  }
  
  /* Force show all text labels on mobile even if collapsed class exists */
  .sidebar.collapsed .sidebar-brand-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .sidebar-footer .btn-logout span,
  .sidebar.collapsed .sidebar-footer .btn-back-website span {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    overflow: visible !important;
  }
  
  /* Reset sidebar brand padding */
  .sidebar.collapsed .sidebar-brand {
    padding: 28px 24px 22px;
  }
  
  /* Reset nav item alignment and padding */
  .sidebar.collapsed .nav-item {
    justify-content: flex-start;
    padding: 11px 24px;
  }
  
  /* Show nav indicator on mobile */
  .sidebar.collapsed .nav-item .nav-indicator {
    display: block !important;
  }
  
  /* Reset footer buttons */
  .sidebar.collapsed .btn-logout,
  .sidebar.collapsed .btn-back-website {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding: 10px 14px;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Adjust topbar for tablets */
  .topbar {
    left: 0;
    padding: 0 20px;
  }

  /* Main content full width on tablets */
  .main-content {
    margin-left: 0;
    padding: 12px 20px 32px;
  }

  .dental-overlay {
    left: 0;
  }

  /* Reset collapsed body state on mobile */
  body.sidebar-collapsed .topbar {
    left: 0;
  }

  body.sidebar-collapsed .main-content {
    margin-left: 0;
  }

  body.sidebar-collapsed .dental-overlay {
    left: 0;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .grid-2, .grid-3, .grid-7-5, .grid-5-7, .col-7-5, .col-5-7 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .balance-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
  }

  .form-row, .form-row-4 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Better card header spacing on tablets */
  .card-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  /* Improve appointment items layout */
  .appt-item {
    padding: 12px 0;
    gap: 10px;
  }

  .appt-time {
    min-width: 60px;
  }

  /* Better profile hero for tablets */
  .profile-hero {
    padding: 24px 28px;
    gap: 18px;
  }

  /* Touch-friendly buttons on tablets */
  .btn-ghost, .btn-gold-small, .btn-danger, .btn-outline, .btn-submit {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Better form inputs on tablets */
  .form-group input, .form-group select, .form-group textarea {
    min-height: 44px;
    padding: 12px 14px;
    font-size: 14px;
  }

  /* Improved search on tablets */
  .search-input {
    min-height: 44px;
    font-size: 14px;
  }

  /* Better modals on tablets */
  .modal-box {
    width: 90vw;
    max-width: 600px;
  }

  /* Intraoral Examination stays full-screen on tablets too — .dc-modal's
     base rule (100vw/100vh) already covers it, no override needed here. */
  .dc-body {
    grid-template-columns: 1fr 340px;
  }

  .dc-right {
    /* height/max-height intentionally removed — see the base .dc-right
       rule above. */
  }

  .dc-panel-scroll {
    height: calc(94vh - 240px);
    max-height: calc(94vh - 240px);
  }
  
  /* 3D Teeth Viewer - Tablet Responsive */
  .page > div[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Make info panel full width on tablet */
  .page > div[style*="grid-template-columns:1fr 280px"] > div:last-child {
    order: 2;
  }
  
  /* 3D Canvas responsive */
  #teeth3d-canvas {
    height: 400px !important;
  }
  
  /* 2D Chart responsive - make teeth smaller */
  .teeth-arch {
    gap: 1px !important;
  }
  
  .tooth-2d {
    width: 26px !important;
    height: 34px !important;
  }
  
  .tooth-surfaces,
  .tooth-surfaces svg {
    width: 26px !important;
    height: 30px !important;
  }
  
  .tooth-num-2d {
    font-size: 8px !important;
  }
  
  /* Admin Dashboard - Tablet Responsive */
  .grid-7-5, .grid-5-7 {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  
  /* Appointment items more compact */
  .appt-item {
    padding: 10px 0;
    gap: 8px;
  }
  
  .appt-time {
    min-width: 55px;
    font-size: 13px;
  }
  
  .appt-name {
    font-size: 12px;
  }
  
  .appt-proc {
    font-size: 10px;
  }
  
  /* Data tables responsive */
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }
  
  .patient-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  
  .p-name {
    font-size: 12px;
  }
  
  .p-code {
    font-size: 9px;
  }
  
  /* Calendar responsive */
  .cal-grid {
    gap: 3px;
  }
  
  .cal-day {
    font-size: 11px;
    padding: 6px 3px;
  }
  
  .cal-dow {
    font-size: 8px;
    padding-bottom: 8px;
  }
  
  .cal-header h3 {
    font-size: 15px;
  }
}

/* ── MOBILE (768px and below) ── */
@media (max-width: 768px) {
  /* Show mobile menu toggle */
  .mobile-menu-toggle {
    display: flex;
    margin-right: 12px;
    flex-shrink: 0;
  }
  
  /* Adjust topbar layout for mobile - same padding as desktop */
  .topbar {
    left: 0 !important;
    padding: 0 16px !important; /* Consistent padding on both sides */
  }
  
  .topbar-left {
    gap: 0;
    margin: 0;
  }
  
  /* Ensure topbar title is next to the toggle */
  .topbar-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Remove left margin from main content but keep consistent padding */
  .main-content {
    margin-left: 0 !important;
    padding: 12px 16px 32px !important; /* Match topbar horizontal padding */
  }

  .dental-overlay {
    left: 0 !important;
  }

  /* Ensure body doesn't have sidebar margin on mobile */
  body.sidebar-collapsed .main-content {
    margin-left: 0 !important;
  }

  body.sidebar-collapsed .topbar {
    left: 0 !important;
  }

  body.sidebar-collapsed .dental-overlay {
    left: 0 !important;
  }

  /* Account dropdown responsive */
  .account-dropdown {
    right: 16px;
    width: calc(100% - 32px);
    max-width: 260px;
  }
  
  .notif-dropdown {
    left: auto;
    right: 16px;
    width: min(340px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100vh - var(--topbar-h) - 16px);
  }

  .notif-close-mobile {
    display: inline-flex;
  }

  /* Hide desktop sidebar toggle */
  .sidebar-toggle-btn {
    display: none !important;
  }
  
  /* Adjust topbar right spacing */
  .topbar-right {
    gap: 10px;
  }
  
  /* Make profile pill more compact on mobile */
  .profile-pill {
    padding: 4px 10px 4px 4px;
  }
  
  .profile-name {
    font-size: 11px;
  }
  
  .profile-role {
    font-size: 8px;
  }
  
  .profile-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  /* Make notification bell more compact */
  .notif-bell {
    width: 32px;
    height: 32px;
  }
  
  /* Hide date on very small screens */
  .topbar-date {
    display: none;
  }

  /* Hide sidebar by default on mobile */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 101;
  }
  
  /* Force show all text labels on mobile even if collapsed class exists */
  .sidebar.collapsed .sidebar-brand-text,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .sidebar-footer .btn-logout span,
  .sidebar.collapsed .sidebar-footer .btn-back-website span {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    overflow: visible !important;
  }
  
  /* Reset collapsed sidebar width on mobile */
  .sidebar.collapsed {
    width: var(--sidebar-w);
  }
  
  /* Reset sidebar brand padding */
  .sidebar.collapsed .sidebar-brand {
    padding: 28px 24px 22px;
  }
  
  /* Reset sidebar brand inner alignment */
  .sidebar.collapsed .sidebar-brand-inner {
    justify-content: flex-start;
  }
  
  /* Reset logo size */
  .sidebar.collapsed .sidebar-logo-icon {
    width: 44px;
    height: 44px;
  }
  
  /* Reset nav item alignment and padding */
  .sidebar.collapsed .nav-item {
    justify-content: flex-start;
    padding: 11px 24px;
  }
  
  /* Show nav indicator on mobile */
  .sidebar.collapsed .nav-item .nav-indicator {
    display: block !important;
  }
  
  /* Reset nav icon margin */
  .sidebar.collapsed .nav-item .nav-icon {
    margin: 0;
  }
  
  /* Reset footer */
  .sidebar.collapsed .sidebar-footer {
    padding: 16px 24px;
    gap: 8px;
  }
  
  /* Reset footer buttons */
  .sidebar.collapsed .btn-logout,
  .sidebar.collapsed .btn-back-website {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    padding: 10px 14px;
  }
  
  /* Hide tooltips on mobile */
  .sidebar.collapsed .nav-item::after,
  .sidebar.collapsed .btn-logout::after,
  .sidebar.collapsed .btn-back-website::after {
    display: none !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Adjust topbar for mobile */
  .topbar {
    left: 0;
    padding: 0 16px;
    height: 56px;
  }

  .dental-overlay {
    left: 0;
  }

  :root {
    --topbar-h: 56px;
  }

  .topbar-title {
    font-size: 16px;
  }

  .topbar-date {
    display: none;
  }

  .notif-dropdown {
    left: auto;
    right: 12px;
    width: min(320px, calc(100% - 24px));
    max-width: none;
    max-height: calc(100vh - var(--topbar-h) - 12px);
  }

  /* Main content full width */
  .main-content {
    margin-left: 0;
    padding: 12px 16px 32px;
  }

  /* Stats grid single column */
  .stat-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    display: grid !important;
    margin-bottom: 20px;
  }

  .stat-card {
    padding: 16px;
    display: block !important;
  }

  .stat-card .stat-value {
    font-size: 28px;
  }
  
  .stat-card .stat-label {
    font-size: 9px;
  }
  
  .stat-card .stat-sub {
    font-size: 10px;
  }
  
  .stat-icon {
    width: 34px;
    height: 34px;
  }
  
  .stat-icon svg {
    width: 16px;
    height: 16px;
  }

  /* Page header improvements */
  .page-header h2 {
    font-size: 24px;
  }

  .page-header p {
    font-size: 11px;
  }

  .flex-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Button groups responsive */
  .flex-center.gap-12 {
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }

  .btn-ghost, .btn-gold-small, .btn-danger {
    flex: 1;
    min-width: calc(50% - 4px);
    justify-content: center;
    padding: 10px 12px;
    font-size: 10px;
  }

  /* Full-width submit buttons on mobile so long labels (e.g. "Next: Payment →")
     never overflow their card */
  .btn-submit {
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 16px;
    font-size: 10px;
    white-space: normal;
  }

  /* Cards responsive */
  .card {
    padding: 16px;
    border-radius: 12px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .card-title {
    font-size: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Info grids single column */
  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Form rows responsive */
  .form-row, .form-row-2, .form-row-4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Search responsive */
  .search-wrap {
    flex-direction: column;
    gap: 8px;
  }

  .search-input {
    width: 100%;
  }

  /* Tables - make them scrollable */
  .card {
    overflow-x: auto;
  }

  .data-table {
    min-width: 600px;
  }

  .data-table th, .data-table td {
    padding: 10px 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .patient-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .patient-cell .p-name {
    font-size: 12px;
  }

  .patient-cell .p-code {
    font-size: 9px;
  }

  /* Profile responsive */
  .profile-pill {
    padding: 4px 10px 4px 4px;
  }

  .profile-avatar {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .profile-name {
    font-size: 11px;
  }

  .profile-role {
    font-size: 8px;
  }

  /* Profile Hero responsive */
  .profile-hero {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    gap: 16px;
  }

  .profile-avatar-lg {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  .profile-hero-info h2 {
    font-size: 20px;
  }

  /* Modals responsive */
  .modal-box {
    width: calc(100vw - 32px);
    padding: 20px;
    max-height: 85vh;
  }

  .modal-header h3 {
    font-size: 18px;
  }
  
  /* 3D Teeth Viewer - Mobile Responsive */
  .page > div[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* 3D Canvas mobile height */
  #teeth3d-canvas {
    height: 300px !important;
  }
  
  /* Info panel full width on mobile */
  .page > div[style*="grid-template-columns:1fr 280px"] > div:last-child {
    order: 2;
  }
  
  /* 2D Chart responsive - smaller teeth for mobile */
  .teeth-arch {
    gap: 1px !important;
    flex-wrap: wrap !important;
  }
  
  .tooth-2d {
    width: 22px !important;
    height: 30px !important;
  }
  
  .tooth-surfaces,
  .tooth-surfaces svg {
    width: 22px !important;
    height: 26px !important;
  }
  
  .tooth-num-2d {
    font-size: 7px !important;
  }
  
  .teeth-arch-label {
    font-size: 8px !important;
  }
  
  .tooth-chart-legend {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .legend-item {
    font-size: 10px !important;
  }
  
  /* Admin Dashboard - Mobile Responsive */
  
  /* Page header mobile */
  .flex-mobile-column {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }
  
  .hidden-mobile {
    display: none !important;
  }
  
  /* Card titles - prevent cutting off */
  .card-title {
    font-size: 14px !important;
    white-space: normal !important;
    word-wrap: break-word;
  }
  
  /* Card header responsive */
  .card-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  /* Appointment items mobile */
  .appt-item {
    flex-wrap: wrap;
    padding: 12px 0;
  }
  
  .appt-time {
    min-width: 50px;
    font-size: 12px;
  }
  
  .appt-info {
    flex: 1;
    min-width: 120px;
  }
  
  .appt-name {
    font-size: 11px;
  }
  
  .appt-proc {
    font-size: 10px;
  }
  
  /* Badge on mobile */
  .badge {
    font-size: 8px;
    padding: 2px 7px;
  }
  
  /* Data table mobile - horizontal scroll */
  .card:has(.data-table) {
    overflow-x: auto;
  }
  
  .data-table {
    min-width: 500px;
    font-size: 11px;
  }
  
  .data-table th,
  .data-table td {
    padding: 8px 10px;
  }
  
  .patient-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  
  .p-name {
    font-size: 11px;
  }
  
  .p-code {
    font-size: 8px;
  }
  
  /* Calendar mobile */
  .cal-grid {
    gap: 2px;
  }
  
  .cal-day {
    font-size: 10px;
    padding: 5px 2px;
  }
  
  .cal-dow {
    font-size: 7px;
    padding-bottom: 6px;
  }
  
  .cal-header {
    margin-bottom: 12px;
  }
  
  .cal-header h3 {
    font-size: 14px;
  }
  
  .cal-nav button {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  /* Calendar improvements */
  .cal-grid {
    gap: 2px;
  }

  .cal-day {
    padding: 8px 2px;
    font-size: 11px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Treatment Table responsive */
  .treatment-table {
    min-width: 700px;
  }

  .treatment-table th, .treatment-table td {
    padding: 10px 8px;
    font-size: 11px;
  }

  /* Balance Cards responsive */
  .balance-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .balance-card .b-value {
    font-size: 28px;
  }

  .balance-card .b-label {
    font-size: 8px;
  }

  .balance-card .b-sub {
    font-size: 10px;
  }

  /* Book CTA responsive */
  .book-cta {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    gap: 14px;
  }

  .book-cta-text h3 {
    font-size: 18px;
  }

  .book-cta-text p {
    font-size: 10px;
  }

  .btn-book {
    width: 100%;
    justify-content: center;
  }

  /* Dental Chart Modal - Stack vertically on mobile */
  .dc-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .dc-header {
    padding: 12px 16px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .dc-header-brand {
    width: 100%;
  }

  .dc-header-actions {
    width: 100%;
  }

  /* Workflow guide - compact mobile version */
  .dc-guide {
    padding: 6px 10px;
    gap: 6px;
    width: 100%;
    justify-content: space-between;
  }

  .dc-guide-step {
    padding: 4px 6px;
    gap: 4px;
    flex: 1;
  }

  .dc-guide-num {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .dc-guide-label {
    font-size: 9px;
    letter-spacing: 0;
  }

  .dc-guide-arrow {
    width: 12px;
    height: 12px;
  }

  .dc-header-title {
    font-size: 15px;
  }

  .dc-hint {
    display: none;
  }

  .dc-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .dc-left {
    order: 2;
    border-right: none;
    border-top: 1px solid var(--light-border);
    padding: 12px;
  }

  .dc-right {
    order: 1;
    border-left: none;
    border-bottom: 1px solid var(--light-border);
    height: auto;
  }

  .dc-3d-card {
    min-height: 400px;
    max-height: 450px;
  }

  .dc-panel-scroll {
    height: calc(50vh - 200px);
    max-height: calc(50vh - 200px);
  }

  /* Appointment items responsive */
  .appt-item {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
  }

  .appt-time {
    min-width: auto;
    font-size: 13px;
  }

  .appt-date-block .a-date {
    font-size: 14px;
  }

  .appt-date-block .a-time {
    font-size: 10px;
  }

  .appt-info .appt-name {
    font-size: 12px;
  }

  .appt-info .appt-proc {
    font-size: 10px;
  }

  .badge {
    font-size: 9px;
    padding: 2px 8px;
  }

  /* Download dropdown responsive */
  #downloadMenu {
    right: 0;
    left: auto;
    min-width: 260px;
    max-width: calc(100vw - 32px);
  }

  /* Auth card responsive */
  .auth-card {
    padding: 32px 24px;
    width: calc(100vw - 32px);
  }

  .auth-heading {
    font-size: 20px;
  }

  /* Navigation improvements for mobile */
  .nav-item {
    padding: 12px 24px;
    margin: 2px 0;
  }

  .nav-item .nav-label {
    font-size: 11px;
  }

  /* Sidebar brand improvements */
  .sidebar-brand {
    padding: 20px 20px 16px;
  }

  .sidebar-brand-text h2 {
    font-size: 20px;
  }

  .sidebar-brand-text p {
    font-size: 8px;
  }
}

/* ── SMALL MOBILE (480px and below) ── */
@media (max-width: 480px) {
  body {
    font-size: 13px;
  }

  /* Workflow guide - hide labels on very small screens, show numbers only */
  .dc-guide {
    padding: 6px 8px;
    gap: 4px;
  }

  .dc-guide-step {
    padding: 4px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 32px;
  }

  .dc-guide-num {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .dc-guide-label {
    font-size: 8px;
    text-align: center;
    line-height: 1.1;
  }

  .dc-guide-arrow {
    width: 10px;
    height: 10px;
  }

  .topbar {
    padding: 0 12px 0 60px;
  }

  .topbar-title {
    font-size: 14px;
  }

  .main-content {
    padding: 12px 12px 24px;
  }

  .page-header h2 {
    font-size: 20px;
  }

  .page-header p {
    font-size: 11px;
  }

  /* Sidebar adjustments */
  .sidebar {
    width: 280px;
  }

  .sidebar-brand {
    padding: 20px 20px 16px;
  }

  .sidebar-brand-text h2 {
    font-size: 18px;
  }

  .nav-item {
    padding: 10px 20px;
  }

  .nav-item span.nav-label {
    font-size: 11px;
  }

  /* Stats */
  .stat-card .stat-value {
    font-size: 24px;
  }

  .stat-card .stat-label {
    font-size: 9px;
  }

  .stat-card .stat-sub {
    font-size: 10px;
  }

  /* Buttons */
  .btn-ghost, .btn-gold-small, .btn-danger, .btn-outline {
    font-size: 9px;
    padding: 8px 10px;
  }

  .btn-submit {
    font-size: 9px;
    padding: 10px 12px;
  }
  
  /* 3D Teeth Viewer - Extra Small Mobile */
  #teeth3d-canvas {
    height: 250px !important;
  }
  
  .tooth-2d {
    width: 18px !important;
    height: 26px !important;
  }
  
  .tooth-surfaces,
  .tooth-surfaces svg {
    width: 18px !important;
    height: 22px !important;
  }
  
  .tooth-num-2d {
    font-size: 6px !important;
  }
  
  .teeth-arch-label {
    font-size: 7px !important;
  }
  
  /* Admin Dashboard - Extra Small Mobile */
  
  /* Stat cards even more compact */
  .stat-card .stat-value {
    font-size: 22px;
  }
  
  .stat-card .stat-label {
    font-size: 8px;
  }
  
  .stat-card .stat-sub {
    font-size: 9px;
  }
  
  /* Appointment items compact */
  .appt-item {
    padding: 10px 0;
  }
  
  .appt-time {
    font-size: 11px;
    min-width: 45px;
  }
  
  .appt-name {
    font-size: 10px;
  }
  
  .appt-proc {
    font-size: 9px;
  }
  
  /* Calendar extra small */
  .cal-day {
    font-size: 9px;
    padding: 4px 1px;
  }
  
  .cal-dow {
    font-size: 6px;
  }
  
  .cal-header h3 {
    font-size: 13px;
  }
  
  .cal-nav button {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  /* Badge smaller */
  .badge {
    font-size: 7px;
    padding: 2px 6px;
  }

  .btn-gold {
    padding: 11px 20px;
    font-size: 10px;
  }

  /* Cards */
  .card {
    padding: 14px;
  }

  .card-title {
    font-size: 14px;
  }

  /* Forms */
  .form-group label {
    font-size: 9px;
  }

  .form-group input, .form-group select, .form-group textarea {
    padding: 9px 12px;
    font-size: 12px;
  }

  /* Tables */
  .data-table {
    min-width: 500px;
  }

  .data-table th, .data-table td {
    padding: 8px 6px;
    font-size: 10px;
  }

  /* Profile pill */
  .profile-pill {
    gap: 6px;
  }

  /* Keep profile name and role visible on small mobile */
  .profile-name {
    font-size: 10px;
  }

  .profile-role {
    font-size: 7px;
  }

  /* Notification bell */
  .notif-bell {
    width: 32px;
    height: 32px;
  }

  .notif-dropdown {
    left: auto;
    right: 8px;
    width: min(300px, calc(100% - 20px));
    max-width: none;
    max-height: calc(100vh - var(--topbar-h) - 10px);
  }

  /* Modals */
  .modal-box {
    width: calc(100vw - 24px);
    padding: 16px;
  }

  .modal-header {
    margin-bottom: 16px;
  }

  .modal-header h3 {
    font-size: 16px;
  }

  /* Balance cards */
  .balance-card .b-value {
    font-size: 24px;
  }

  /* Profile hero */
  .profile-hero {
    padding: 16px;
  }

  .profile-avatar-lg {
    width: 54px;
    height: 54px;
    font-size: 20px;
  }

  .profile-hero-info h2 {
    font-size: 18px;
  }

  /* Auth */
  .auth-card {
    padding: 24px 20px;
  }

  .auth-logo {
    margin-bottom: 28px;
  }

  .auth-heading {
    font-size: 18px;
  }

  .logo-text h1 {
    font-size: 18px;
  }

  /* Dental chart modal */
  .dc-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .dc-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .dc-left {
    padding: 10px;
  }

  .dc-3d-card {
    min-height: 350px;
    max-height: 400px;
  }

  .dc-tooth-label {
    font-size: 18px;
  }

  .dc-btn-grid {
    grid-template-columns: 1fr;
  }
}

/* ── LANDSCAPE MOBILE (orientation) ── */
@media (max-width: 896px) and (orientation: landscape) {
  .dc-modal {
    height: 98vh;
  }

  .dc-body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .dc-left {
    order: 1;
    border-right: 1px solid var(--light-border);
    border-top: none;
  }

  .dc-right {
    order: 2;
    border-left: none;
    border-bottom: none;
  }

  .dc-3d-card {
    min-height: 300px;
    max-height: 350px;
  }
}

/* ── PATIENT PORTAL RESPONSIVE ── */
@media (max-width: 1024px) {
  .patient-sidebar {
    width: 260px;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 101;
  }

  .patient-sidebar.mobile-open {
    transform: translateX(0);
  }

  .patient-topbar {
    left: 0;
    padding: 0 20px 0 70px;
  }

  .patient-content {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .patient-sidebar {
    width: 260px;
  }

  .patient-topbar {
    left: 0;
    padding: 0 16px 0 70px;
  }

  .patient-content {
    margin-left: 0;
  }

  /* Patient appointment items */
  .appt-date-block {
    min-width: 46px;
  }

  .appt-date-block .a-date {
    font-size: 13px;
  }

  .appt-date-block .a-time {
    font-size: 9px;
  }
}

/* ── PRINT STYLES ── */
@media print {
  .sidebar,
  .topbar,
  .mobile-menu-toggle,
  .mobile-overlay,
  .btn-ghost,
  .btn-gold,
  .btn-gold-small,
  .btn-danger,
  .btn-outline,
  .btn-submit,
  .btn-close,
  .modal-overlay,
  .notif-bell,
  .notif-overlay,
  .profile-pill {
    display: none !important;
  }

  .main-content {
    margin-left: 0;
    margin-top: 0;
    padding: 0;
  }

  .page {
    page-break-after: always;
  }

  .card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ── TOUCH DEVICE IMPROVEMENTS ── */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets for mobile and tablets */
  .nav-item {
    padding: 14px 24px;
    min-height: 48px;
  }

  .btn-ghost, .btn-gold-small, .btn-danger, .btn-outline, .btn-submit {
    min-height: 44px;
    padding: 12px 16px;
  }

  .cal-day {
    min-height: 44px;
  }

  .data-table tr {
    min-height: 48px;
  }

  .data-table td {
    padding: 14px 12px;
  }

  /* Touch-friendly dropdowns and selects */
  select, .form-group select {
    min-height: 44px;
    padding: 12px 14px;
  }

  /* Better checkbox and radio buttons */
  input[type="checkbox"], input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
    cursor: pointer;
  }

  /* Touch-friendly profile elements */
  .profile-pill, .profile-badge {
    min-height: 44px;
    padding: 6px 14px 6px 6px;
  }

  .notif-bell {
    width: 36px;
    height: 36px;
  }

  /* Only text-entry fields need 16px to stop iOS auto-zoom on focus —
     this used to also force every <select> and <button> (including
     .btn-submit and the "Mark all read" notif button) to 16px,
     overriding their intentionally smaller mobile sizes. */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="date"], textarea {
    font-size: 16px !important;
  }

  select {
    font-size: 14px !important;
  }

  /* Remove hover effects on touch devices */
  .btn-ghost:hover,
  .btn-gold-small:hover,
  .btn-danger:hover,
  .btn-submit:hover,
  .nav-item:hover {
    transform: none;
  }

  /* Better modal close buttons */
  .btn-close, .dc-close-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Touch-friendly calendar navigation */
  .cal-nav button {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── ACCESSIBILITY IMPROVEMENTS ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── DARK MODE SUPPORT (optional) ── */
@media (prefers-color-scheme: dark) {
  /* Can be expanded if dark mode is desired */
}

/* ─── IMPROVED MODAL DESIGNS ─── */
/* Modal box flex layout for fixed header/footer with scrollable body */
.modal-box-flex {
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  max-height: 92vh;
  overflow: hidden !important;
}

.modal-body-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.modal-footer-fixed {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--light-border);
  flex-shrink: 0;
  background: var(--light-surface);
}

/* Ensure modal body scrolling works properly */
.modal-box .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.modal-box .modal-body::-webkit-scrollbar,
.modal-body-scroll::-webkit-scrollbar {
  width: 8px;
}

.modal-box .modal-body::-webkit-scrollbar-track,
.modal-body-scroll::-webkit-scrollbar-track {
  background: var(--light-panel);
  border-radius: 4px;
}

.modal-box .modal-body::-webkit-scrollbar-thumb,
.modal-body-scroll::-webkit-scrollbar-thumb {
  background: var(--light-border);
  border-radius: 4px;
  transition: background 0.2s;
}

.modal-box .modal-body::-webkit-scrollbar-thumb:hover,
.modal-body-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Modal animations */
.modal-overlay.active {
  animation: fadeInOverlay 0.2s ease;
}

.modal-overlay.active .modal-box {
  animation: slideUpModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUpModal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal footer improvements */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Modal responsive improvements */
@media (max-height: 700px) {
  .modal-box {
    max-height: 95vh !important;
  }
}

@media (max-width: 768px) {
  .modal-box .modal-body {
    padding: 20px 20px !important;
  }
  
  .modal-box .modal-header {
    padding: 20px 20px 16px !important;
  }
  
  .modal-box .modal-footer {
    padding: 16px 20px !important;
  }
}

/* Modal close button consistency */
.modal-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--light-panel);
  cursor: pointer;
  font-size: 18px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}

.modal-close:hover {
  background: #FEE2E2;
  color: #DC2626;
  transform: scale(1.05);
}

/* Info grid improvements for modal forms */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-grid .info-field.full-width {
  grid-column: 1 / -1;
}

.info-field label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-field {
  margin-bottom: 0;
}

/* Responsive info grid */
@media (max-width: 640px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  
  .info-grid .info-field {
    grid-column: 1 / -1 !important;
  }
}

/* Form input styling for modals */
.form-input {
  width: 100%;
  padding: 10px 13px;
  background: var(--light-panel);
  border: 1.5px solid var(--light-border);
  border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.form-input:focus {
  border-color: var(--gold);
  background: var(--light-surface);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.15);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input:disabled,
.form-input[readonly] {
  background: var(--gray-100, #f3f4f6);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

select.form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B8956A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}