/* ══════════════════════════════════════════════════════════════
   Main Application Stylesheet
   Dental Clinic Management System
   ══════════════════════════════════════════════════════════════ */

* { font-family: 'Cairo', 'Tajawal', system-ui, sans-serif; }
:root {
  --accent: #2563eb;
  --green:  #16a34a;
  --orange: #ea580c;
  --danger: #dc2626;
  --bg:     #f1f5f9;
  --card:   #ffffff;
  --text:   #1e293b;
  --border: #e2e8f0;
  --sidebar-w: 220px;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
}

/* Sidebar - Modern SaaS Aesthetic with Collapsible Categorized Groups */
#sidebar {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 80px) !important;
  box-sizing: border-box !important;
  position: sticky;
  top: 0;
  bottom: 0;
  background: var(--theme-sidebar-bg, #0f172a) !important;
  border-left: 1px solid var(--theme-sidebar-border, rgba(51, 65, 85, 0.4)) !important;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
}

/* ══════════════════════════════════════════════════════════════════
   📱 Mobile Viewport (< 768px in Portrait) - Sidebar Drawer Controls
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) and (orientation: portrait) {
  #sidebar {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  /* Hide sidebar on phones unless in landscape mode */
  body:not(.is-landscape) #sidebar {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   🖥️ Desktop & Tablet Global Nav Visibility (>= 768px)
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  #mobile-bottom-bar,
  #btn-mobile-menu,
  #sa-mobile-menu-btn,
  #sa-sidebar-backdrop {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   📱 Tablet & Medium Screens Architecture (768px to 1024px)
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 2 columns distribution for cards and stats */
  .stats-cards,
  .dashboard-grid,
  #dash-cards,
  .kpi-grid,
  .grid-stats,
  .sa-kpi-grid,
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4,
  .grid.grid-cols-6,
  .grid.sm\:grid-cols-3,
  .grid.xl\:grid-cols-6,
  .grid.lg\:grid-cols-4,
  .grid.md\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Collapsed Icon Sidebar for Clinic Dashboard */
  #sidebar.collapsed {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    display: flex !important;
  }
  #sidebar.collapsed .sidebar-group-title,
  #sidebar.collapsed .sidebar-brand-text,
  #sidebar.collapsed .sidebar-user-text,
  #sidebar.collapsed .nav-label {
    display: none !important;
  }
  #sidebar.collapsed .nav-item {
    justify-content: center !important;
    padding: 0.55rem 0 !important;
    margin: 0.15rem auto !important;
    width: 44px !important;
    height: 42px !important;
    border-right: none !important;
    border-left: none !important;
  }
  #sidebar.collapsed .nav-item .icon-box {
    margin: 0 !important;
  }

  /* Expanded Sidebar for Clinic Dashboard on Tablets & Landscape */
  #sidebar:not(.collapsed),
  #sidebar.expanded {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    display: flex !important;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.6) !important;
  }
  #sidebar:not(.collapsed) .sidebar-group-title,
  #sidebar:not(.collapsed) .sidebar-brand-text,
  #sidebar:not(.collapsed) .sidebar-user-text,
  #sidebar:not(.collapsed) .nav-label,
  #sidebar.expanded .sidebar-group-title,
  #sidebar.expanded .sidebar-brand-text,
  #sidebar.expanded .sidebar-user-text,
  #sidebar.expanded .nav-label {
    display: block !important;
  }
  #sidebar:not(.collapsed) .nav-item,
  #sidebar.expanded .nav-item {
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    padding: 0.52rem 0.8rem !important;
    margin: 0.12rem 0.4rem !important;
  }

  /* Collapsed Icon Sidebar for Superadmin */
  #sa-sidebar {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    display: flex !important;
    overflow-x: hidden !important;
  }
  #sa-sidebar .sa-sidebar-text,
  #sa-sidebar .sa-nav-label,
  #sa-sidebar .sa-badge,
  #sa-sidebar [id^="sa-nav-"][id$="-count"],
  #sa-sidebar .text-\[10px\],
  #sa-sidebar .text-\[11px\],
  #sa-sidebar .min-w-0,
  #sa-sidebar aside > div:last-child {
    display: none !important;
  }
  #sa-sidebar .sa-nav-btn {
    justify-content: center !important;
    padding: 0.65rem 0 !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0.25rem auto !important;
    border-right: none !important;
    border-left: none !important;
  }
  #sa-sidebar .sa-nav-btn > span {
    justify-content: center !important;
  }
  #sa-sidebar .sa-nav-btn > span > span:not(.text-base),
  #sa-sidebar .sa-nav-btn > span:not(.text-base):not(:first-child),
  #sa-sidebar .sa-nav-btn [data-i18n] {
    display: none !important;
  }
  #sa-sidebar [role="button"] {
    justify-content: center !important;
    padding: 0.65rem 0 !important;
  }
  #sa-sidebar [role="button"] .min-w-0,
  #sa-sidebar [role="button"] .flex.items-center.gap-2.shrink-0 {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   🖥️ Large Desktop Screens Architecture (> 1024px)
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  /* Sidebar fully open taking its natural width */
  #sidebar:not(.collapsed) {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    display: flex !important;
  }
  #sidebar:not(.collapsed) .sidebar-group-title,
  #sidebar:not(.collapsed) .sidebar-brand-text,
  #sidebar:not(.collapsed) .sidebar-user-text,
  #sidebar:not(.collapsed) .nav-label {
    display: block !important;
  }
  #sidebar:not(.collapsed) .nav-item {
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    padding: 0.52rem 0.8rem !important;
    margin: 0.12rem 0.4rem !important;
  }

  /* Superadmin sidebar natural width */
  #sa-sidebar {
    width: 18rem !important;
    min-width: 18rem !important;
    max-width: 18rem !important;
    display: flex !important;
  }

  /* SaaS KPI cards distributed across 6 columns */
  .sa-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}
#sidebar.collapsed {
  width: 68px;
  min-width: 68px;
  max-width: 68px;
}
#sidebar.collapsed .sidebar-group-title,
#sidebar.collapsed .sidebar-brand-text,
#sidebar.collapsed .sidebar-user-text,
#sidebar.collapsed .nav-label {
  display: none !important;
}
#sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 0.55rem 0;
  margin: 0.15rem auto;
  width: 44px;
  height: 42px;
  border-right: none;
  position: relative;
}
#sidebar.collapsed .nav-item.active {
  border-radius: 0.75rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(14, 165, 233, 0.18);
}
#sidebar.collapsed .nav-item .icon-box {
  margin: 0;
}
/* Floating Tooltip in Collapsed Mode (Only for desktop devices with a mouse hover, preventing touch freeze on mobile) */
@media (hover: hover) and (pointer: fine) {
  #sidebar.collapsed .nav-item:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    border: 1px solid #334155;
    pointer-events: none;
    z-index: 999;
  }
  #sidebar.collapsed .nav-item:hover::before {
    content: '';
    position: absolute;
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #1e293b;
    z-index: 999;
    pointer-events: none;
  }
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.52rem 0.8rem;
  cursor: pointer;
  border-radius: 0.75rem;
  margin: 0.12rem 0.4rem;
  transition: all 0.18s ease-in-out;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  border-right: 3px solid transparent;
  user-select: none;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
.nav-item:hover {
  background: rgba(30, 41, 59, 0.75);
  color: #f8fafc;
  transform: translateX(-2px);
}
.nav-item.active {
  background: linear-gradient(270deg, rgba(14, 165, 233, 0.16) 0%, rgba(14, 165, 233, 0.04) 100%);
  color: #38bdf8;
  border-right-color: #38bdf8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.nav-item .icon-box {
  width: 1.85rem;
  height: 1.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  flex-shrink: 0;
  background: rgba(30, 41, 59, 0.5);
  transition: all 0.18s ease;
}
.nav-item.active .icon-box {
  background: rgba(14, 165, 233, 0.22);
  color: #38bdf8;
}
.nav-label { font-size: 0.81rem; white-space: nowrap; }

/* Cards - Compact Desktop */
.stat-card {
  background: var(--card);
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.25rem;
  transition: all 0.15s ease-in-out;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: #cbd5e1;
}
.stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.2;
}
.stat-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

/* Table */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { background:#f8fafc; padding:.6rem 1rem; text-align:right;
  font-size:.8rem; color:#64748b; border-bottom:2px solid var(--border); }
.data-table td { padding:.65rem 1rem; border-bottom:1px solid var(--border);
  font-size:.875rem; }
.data-table tr:hover td { background:#f8fafc; }

/* Badges */
.badge { display:inline-flex; align-items:center; padding:.2rem .7rem;
  border-radius:9999px; font-size:.75rem; font-weight:600; }
.badge-green  { background:#dcfce7; color:#16a34a; }
.badge-red    { background:#fee2e2; color:#dc2626; }
.badge-blue   { background:#dbeafe; color:#2563eb; }
.badge-orange { background:#ffedd5; color:#ea580c; }
.badge-gray   { background:#f1f5f9; color:#64748b; }
.badge-yellow { background:#fef9c3; color:#a16207; }
.badge-purple { background:#f3e8ff; color:#7c3aed; }
.badge-pink   { background:#fce7f3; color:#be185d; }
.badge-teal   { background:#ccfbf1; color:#0f766e; }

/* Inputs */
.form-input { border:1.5px solid var(--border); border-radius:.5rem;
  padding:.5rem .9rem; font-size:.9rem; width:100%; outline:none;
  background:var(--card); transition:border .15s; direction:inherit; }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.form-select { border:1.5px solid var(--border); border-radius:.5rem;
  padding:.5rem .9rem; font-size:.9rem; outline:none;
  background:var(--card); direction:inherit; }

/* Buttons */
.btn { padding:.5rem 1.2rem; border-radius:.5rem; font-size:.9rem; font-weight:600;
  cursor:pointer; border:none; transition:opacity .15s; }
.btn:hover { opacity:.88; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-success { background:var(--green); color:#fff; }
.btn-danger  { background:var(--danger); color:#fff; }
.btn-ghost   { background:#f1f5f9; color:var(--text); }

/* Modal & Visibility */
.hidden { display: none !important; }
.modal-overlay.hidden { display: none !important; pointer-events: none !important; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; z-index:9999999 !important; }

/* ══════ Modern SaaS / Medical UI Split-Screen Auth Page ══════ */
#auth-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  background-color: #020617;
  direction: inherit;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════ Layout Isolation: Completely exclude & hide Sidebar and internal tools on Auth Routes ══════ */
.auth-layout-mode #app-shell,
.auth-layout-mode #sidebar,
.auth-layout-mode #top-nav-bar,
.auth-layout-mode #mobile-bottom-bar,
.auth-layout-mode #mobile-drawer-overlay,
.auth-layout-mode main {
  display: none !important;
}

#auth-form-container {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  position: relative;
  z-index: 20;
}

#auth-brand-showcase {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  background: radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 85% 85%, rgba(14, 165, 233, 0.2) 0%, transparent 45%),
              linear-gradient(150deg, #020617 0%, #0a1329 40%, #0f172a 100%);
  position: relative;
  overflow: hidden;
}

html[dir="rtl"] #auth-brand-showcase {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
html[dir="ltr"] #auth-brand-showcase {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* ══════ Split Screen: Exactly Two Symmetrical 50% Columns on Desktop ══════ */
@media (min-width: 1024px) {
  #auth-screen {
    flex-direction: row !important;
  }
  #auth-form-container {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    flex: 1 1 50% !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }
  #auth-brand-showcase {
    display: flex !important;
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    flex: 1 1 50% !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }
}

/* ══════ Clean Single-Column on Mobile & Tablet (< 1024px) ══════ */
@media (max-width: 1023px) {
  #auth-screen {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  #auth-brand-showcase {
    display: none !important;
  }
  #auth-form-container {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 1.5rem 1rem !important;
  }
}

/* Auth Shake Animation for Invalid Credentials */
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.animate-shake {
  animation: authShake 0.4s ease-in-out;
}

/* Glassmorphism Cards for Brand Showcase */
.auth-glass-feature {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  transition: all 0.28s ease;
}
.auth-glass-feature:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(2, 6, 23, 0.4);
}



/* ══════ Responsive Mobile-First & Bottom Sheet Drawer ══════ */
@media (max-width: 640px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    max-height: 88vh !important;
    padding: 1.25rem 1rem 2.25rem 1rem !important;
    animation: slideUpBottomSheet 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2) !important;
  }
  .modal-box::before {
    content: '';
    display: block;
    width: 44px;
    height: 5px;
    background: #cbd5e1;
    border-radius: 9999px;
    margin: -0.25rem auto 1rem auto;
  }

  /* Superadmin Mobile Bottom-Sheet Modals & Inspector Drawer */
  #sa-ticket-modal-backdrop,
  #sa-edit-plan-modal-backdrop,
  #sa-sub-modal-backdrop,
  #sa-soft-delete-modal-backdrop,
  #sa-dev-profile-modal-backdrop,
  #sa-inspector-drawer-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #sa-ticket-modal-backdrop > div,
  #sa-edit-plan-modal-backdrop > div,
  #sa-sub-modal-backdrop > div,
  #sa-soft-delete-modal-backdrop > div,
  #sa-dev-profile-modal-backdrop > div,
  #sa-inspector-drawer {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    max-height: 90vh !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25) !important;
    animation: slideUpBottomSheet 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}
@keyframes slideUpBottomSheet {
  from { transform: translateY(100%); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
.touch-scroll {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.safe-area-pb {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

.modal-box { background:var(--card); border-radius:1rem; padding:2rem;
  max-width:540px; width:95%; max-height:90vh; overflow-y:auto; direction:inherit;
  box-shadow:0 20px 60px rgba(0,0,0,.2); }

/* Settings Layout */
.settings-tab-btn {
  color: #64748b;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  transition: all 0.15s ease-in-out;
}
.settings-tab-btn:hover {
  background: #f8fafc;
  color: #0f172a;
}
.settings-tab-btn.active {
  background: #eff6ff;
  color: #2563eb;
  border-color: #dbeafe;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.06);
}
.toggle-switch-input:checked + .toggle-switch-track {
  background-color: #2563eb;
}
.toggle-switch-input:checked + .toggle-switch-track .toggle-switch-thumb {
  transform: translateX(-1.25rem);
}

/* Tooth chart */
.tooth-cell { width:32px; height:36px; border:1.5px solid #94a3b8; border-radius:4px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; transition:background .15s; position:relative; }
.tooth-cell:hover { border-color:var(--accent); }
.tooth-cell.sound      { background:#dcfce7; }
.tooth-cell.caries     { background:#fee2e2; }
.tooth-cell.filled     { background:#dbeafe; }
.tooth-cell.missing    { background:#f1f5f9; text-decoration:line-through; }
.tooth-cell.crown      { background:#fef9c3; }
.tooth-cell.endo       { background:#fce7f3; }
.tooth-cell.implant    { background:#ede9fe; }
.tooth-cell.extraction { background:#f1f5f9; opacity:.5; }

/* Loader */
.spinner { border:3px solid #e2e8f0; border-top:3px solid var(--accent);
  border-radius:50%; width:28px; height:28px; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Page sections */
.page { display:none; }
.page.active { display:block; }

/* Scrollbar */
#nav-links::-webkit-scrollbar { width: 5px; }
#nav-links::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.4); }
#nav-links::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
#nav-links::-webkit-scrollbar-thumb:hover { background: #0ea5e9; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }

/* Search */
.search-input { padding:.5rem 1rem; border:1.5px solid var(--border);
  border-radius:.5rem; font-size:.9rem; outline:none; background:var(--card);
  width:260px; direction:rtl; }
.search-input:focus { border-color:var(--accent); }

/* ══════ LTR / English Layout Shifts & Typography ══════ */
html[dir="ltr"],
html[dir="ltr"] *,
body.lang-en,
body.lang-en * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
html[dir="ltr"] body,
body.lang-en {
  direction: ltr !important;
}
html[dir="ltr"] #sidebar {
  border-left: none !important;
  border-right: 1px solid rgba(51, 65, 85, 0.4) !important;
}
html[dir="ltr"] .nav-item {
  border-right: none !important;
  border-left: 3px solid transparent !important;
}
html[dir="ltr"] .nav-item:hover {
  transform: translateX(2px) !important;
}
html[dir="ltr"] .nav-item.active {
  border-left-color: #38bdf8 !important;
  border-right-color: transparent !important;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.16) 0%, rgba(14, 165, 233, 0.04) 100%) !important;
}
html[dir="ltr"] #sidebar.collapsed .nav-item:hover::after {
  right: auto !important;
  left: calc(100% + 12px) !important;
}
html[dir="ltr"] #sidebar.collapsed .nav-item:hover::before {
  right: auto !important;
  left: calc(100% + 4px) !important;
  border-left-color: transparent !important;
  border-right-color: #1e293b !important;
}
html[dir="ltr"] .text-right {
  text-align: left !important;
}
html[dir="ltr"] #top-nav-bar .pl-2 {
  padding-left: 0 !important;
  padding-right: 0.5rem !important;
  border-left-width: 0 !important;
  border-right-width: 1px !important;
}
html[dir="ltr"] #global-search-container span.absolute.right-3\.5 {
  right: auto !important;
  left: 0.875rem !important;
}
html[dir="ltr"] #global-search-input {
  padding-right: 5rem !important;
  padding-left: 2.5rem !important;
  text-align: left !important;
}
html[dir="ltr"] #global-search-container div.absolute.left-3 {
  left: auto !important;
  right: 0.75rem !important;
}
html[dir="ltr"] #quick-add-dropdown {
  left: 0 !important;
  right: auto !important;
}
html[dir="ltr"] table th,
html[dir="ltr"] table td {
  text-align: left;
}
html[dir="ltr"] table th.text-center,
html[dir="ltr"] table td.text-center {
  text-align: center !important;
}
html[dir="ltr"] table th.text-right,
html[dir="ltr"] table td.text-right {
  text-align: right !important;
}
html[dir="ltr"] .form-input,
html[dir="ltr"] .form-select,
html[dir="ltr"] textarea {
  text-align: left;
}
html[dir="ltr"] #mobile-drawer-panel {
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%) !important;
  border-left: none !important;
  border-right: 1px solid rgb(30, 41, 59) !important;
}
html[dir="ltr"] #mobile-drawer-overlay.active #mobile-drawer-panel {
  transform: translateX(0) !important;
}
html[dir="ltr"] #auth-form-container {
  border-right: 1px solid rgba(226, 232, 240, 0.8);
  border-left: none;
}
html[dir="ltr"] #auth-form-standard input#auth-username {
  padding-right: 0.875rem !important;
  padding-left: 2.5rem !important;
  text-align: left !important;
}
html[dir="ltr"] #auth-form-standard div.relative span.absolute.right-0 {
  right: auto !important;
  left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0.875rem !important;
}
html[dir="ltr"] #auth-form-standard input#auth-password {
  padding-left: 2.5rem !important;
  padding-right: 2.75rem !important;
  text-align: left !important;
}
html[dir="ltr"] #auth-form-standard button[onclick="toggleAuthPasswordVisibility()"] {
  left: auto !important;
  right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0.875rem !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

/* ══════════════ Voice Agent Live Soundwave Animation ══════════════ */
@keyframes aiWavePulse {
  0%, 100% { height: 6px; opacity: 0.4; transform: scaleY(0.4); }
  50% { height: 24px; opacity: 1; transform: scaleY(1); }
}
.animate-wave-1 { animation: aiWavePulse 0.9s ease-in-out infinite; }
.animate-wave-2 { animation: aiWavePulse 0.7s ease-in-out infinite 0.15s; }
.animate-wave-3 { animation: aiWavePulse 1.1s ease-in-out infinite 0.3s; }

/* ══════════════════════════════════════════════════════════════
   LTR Directional Alignment Enhancements (Universal Modals, Tables, Forms)
   ══════════════════════════════════════════════════════════════ */
html[dir="ltr"],
body.lang-en {
  direction: ltr;
}

html[dir="ltr"] .modal-box,
body.lang-en .modal-box {
  direction: ltr !important;
  text-align: left !important;
}

html[dir="ltr"] .modal-box .text-right:not(.keep-right),
body.lang-en .modal-box .text-right:not(.keep-right) {
  text-align: left !important;
}

html[dir="ltr"] .settings-tab-btn,
body.lang-en .settings-tab-btn {
  text-align: left !important;
}

html[dir="ltr"] table,
body.lang-en table {
  text-align: left;
}

html[dir="ltr"] table th:not(.text-center):not(.keep-right),
body.lang-en table th:not(.text-center):not(.keep-right) {
  text-align: left !important;
}

html[dir="ltr"] table td:not(.text-center):not(.keep-right),
body.lang-en table td:not(.text-center):not(.keep-right) {
  text-align: left !important;
}

html[dir="ltr"] .data-table th,
body.lang-en .data-table th {
  text-align: left !important;
}

html[dir="ltr"] .form-input,
body.lang-en .form-input,
html[dir="ltr"] .form-select,
body.lang-en .form-select {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] [dir="rtl"]:not(.force-rtl),
body.lang-en [dir="rtl"]:not(.force-rtl) {
  direction: ltr !important;
  text-align: left !important;
}

html[dir="ltr"] #auth-screen .text-right:not(.keep-right),
html[dir="ltr"] #page-settings .text-right:not(.keep-right),
html[dir="ltr"] #page-ortho .text-right:not(.keep-right),
html[dir="ltr"] #page-omfs-aesthetics .text-right:not(.keep-right),
html[dir="ltr"] #perio-surgery-section .text-right:not(.keep-right),
html[dir="ltr"] #auth-form-register .text-right,
html[dir="ltr"] #users-table-tbody .text-right:not(.keep-right),
html[dir="ltr"] #users-table-tbody td:not(.text-center),
html[dir="ltr"] #omfs-surgery-table-body td:not(.text-center) {
  text-align: left !important;
}

html[dir="ltr"] #context-menu {
  direction: ltr;
  text-align: left;
}

/* ══════════════════════════════════════════════════════════════
   Dashboard-Only Top Header & Full-Height Clinical Layout
   ══════════════════════════════════════════════════════════════ */
#top-nav-bar {
  transition: opacity 0.2s ease-in-out;
  position: sticky !important;
  top: 0.5rem;
  z-index: 9990 !important;
  pointer-events: auto !important;
}

#btn-mobile-menu {
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#btn-mobile-menu svg,
#btn-mobile-menu path {
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════
   Mobile Drawer Overlay & Panel Bulletproof Stacking & Display
   ══════════════════════════════════════════════════════════════ */
#mobile-drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  transition: opacity 0.28s ease, visibility 0.28s ease !important;
}

#mobile-drawer-overlay.hidden,
#mobile-drawer-overlay:not(.active):not(.drawer-open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

#mobile-drawer-overlay.active,
#mobile-drawer-overlay.drawer-open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

#mobile-drawer-panel {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 10000000 !important;
  pointer-events: auto !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#mobile-drawer-scroll-area,
#mobile-drawer-panel #mobile-drawer-scroll-area,
#mobile-drawer-panel .overflow-y-auto {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 120px) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

body.menu-open,
html.menu-open {
  overflow: hidden !important;
  touch-action: none !important;
  height: 100% !important;
}

#mobile-drawer-overlay {
  touch-action: none !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
}

#mobile-drawer-panel .overflow-y-auto,
#nav-links.overflow-y-auto {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

html[dir="rtl"] #mobile-drawer-panel {
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%) !important;
}

html[dir="rtl"] #mobile-drawer-overlay.active #mobile-drawer-panel,
html[dir="rtl"] #mobile-drawer-overlay.drawer-open #mobile-drawer-panel {
  transform: translateX(0) !important;
}

html[dir="ltr"] #mobile-drawer-panel {
  left: 0 !important;
  right: auto !important;
  transform: translateX(-100%) !important;
}

html[dir="ltr"] #mobile-drawer-overlay.active #mobile-drawer-panel,
html[dir="ltr"] #mobile-drawer-overlay.drawer-open #mobile-drawer-panel {
  transform: translateX(0) !important;
}

.drawer-nav-item,
.mobile-nav-btn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Ensure header is strictly hidden on all internal pages */
body:not([data-active-page="dashboard"]) #top-nav-bar,
.page:not(#page-dashboard) #top-nav-bar {
  display: none !important;
}

/* Internal pages start immediately at the top (Full-Height Layout) */
.page:not(#page-dashboard) {
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-height: calc(100vh - 2rem);
}




/* ══════════════════════════════════════════════════════════════
   System Color Themes Engine – High-End Clinic Design System (v3.0 Mature)
   ══════════════════════════════════════════════════════════════ */

/* Global Smooth Color Transitions */
body, #sidebar, #top-nav-bar, .stat-card, .btn-primary, .nav-item, .settings-tab-btn, .theme-card-picker {
  transition: background-color 0.28s ease, border-color 0.28s ease, color 0.2s ease, box-shadow 0.28s ease !important;
}

/* Custom Themed Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar, #94a3b8);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #2563eb);
}

/* ─────────────────────────────────────────────────────────────
   💎 1. الأزرق الطبي القياسي (Classic Medical Sapphire & Cyan)
   ───────────────────────────────────────────────────────────── */
:root,
body.theme-blue,
html.theme-blue,
[data-theme="theme-blue"] {
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-gradient: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
  --accent-light: #eff6ff;
  --accent-border: #bfdbfe;
  --theme-shadow: rgba(37, 99, 235, 0.18);
  --theme-scrollbar: #cbd5e1;

  /* Sidebar Design */
  --theme-sidebar-bg: linear-gradient(180deg, #091328 0%, #0d1b38 40%, #0b1426 100%);
  --theme-sidebar-border: rgba(56, 189, 248, 0.2);
  --theme-sidebar-box-bg: rgba(255, 255, 255, 0.05);
  --theme-sidebar-box-border: rgba(56, 189, 248, 0.18);
  --theme-brand-gradient: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
  --theme-sidebar-group-text: #7dd3fc;
  --theme-sidebar-text: #94a3b8;
  --theme-sidebar-hover-bg: rgba(56, 189, 248, 0.12);
  --theme-sidebar-active-bg: linear-gradient(270deg, rgba(14, 165, 233, 0.28) 0%, rgba(14, 165, 233, 0.04) 100%);
  --theme-sidebar-active-text: #38bdf8;
  --theme-sidebar-active-border: #38bdf8;
  --theme-sidebar-icon-bg: rgba(14, 165, 233, 0.25);
  --theme-table-header-bg: #f1f5f9;
  --theme-table-row-hover: #f8fafc;
}

body.theme-blue #sidebar,
html.theme-blue #sidebar,
[data-theme="theme-blue"] #sidebar {
  background: var(--theme-sidebar-bg) !important;
  border-left-color: var(--theme-sidebar-border) !important;
}

/* ─────────────────────────────────────────────────────────────
   🌸 2. ثيم الروز واللافندر والكشمير (Velvet Rose, Soft Cashmere & Lavender)
   ───────────────────────────────────────────────────────────── */
body.theme-rose,
html.theme-rose,
[data-theme="theme-rose"] {
  --bg: #fdf7f9;
  --card-bg: #ffffff;
  --card-border: #f8e1e7;
  --text-main: #1e1318;
  --text-muted: #735965;
  --accent: #e11d48;
  --accent-hover: #be123c;
  --accent-gradient: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #c026d3 100%);
  --accent-light: #fff1f2;
  --accent-border: #fecdd3;
  --theme-shadow: rgba(225, 29, 72, 0.22);
  --theme-scrollbar: #fbcfe8;

  /* Sidebar Design */
  --theme-sidebar-bg: linear-gradient(180deg, #2b081e 0%, #1f0414 45%, #14020d 100%);
  --theme-sidebar-border: rgba(244, 63, 94, 0.35);
  --theme-sidebar-box-bg: rgba(244, 63, 94, 0.12);
  --theme-sidebar-box-border: rgba(244, 63, 94, 0.3);
  --theme-brand-gradient: linear-gradient(135deg, #fb7185 0%, #e11d48 60%, #c026d3 100%);
  --theme-sidebar-group-text: #fda4af;
  --theme-sidebar-text: #fecdd3;
  --theme-sidebar-hover-bg: rgba(244, 63, 94, 0.18);
  --theme-sidebar-active-bg: linear-gradient(270deg, rgba(225, 29, 72, 0.38) 0%, rgba(225, 29, 72, 0.08) 100%);
  --theme-sidebar-active-text: #ffffff;
  --theme-sidebar-active-border: #f43f5e;
  --theme-sidebar-icon-bg: rgba(225, 29, 72, 0.4);
  --theme-table-header-bg: #fff1f2;
  --theme-table-row-hover: #fff5f7;
}

body.theme-rose #sidebar,
html.theme-rose #sidebar,
[data-theme="theme-rose"] #sidebar {
  background: var(--theme-sidebar-bg) !important;
  border-left-color: var(--theme-sidebar-border) !important;
  border-right-color: var(--theme-sidebar-border) !important;
}
body.theme-rose #mobile-drawer-panel,
[data-theme="theme-rose"] #mobile-drawer-panel {
  background: var(--theme-sidebar-bg) !important;
  border-color: var(--theme-sidebar-border) !important;
}
body.theme-rose #sidebar .bg-slate-800\/60,
body.theme-rose #sidebar .bg-slate-800\/40,
body.theme-rose #sidebar > div > div:first-child,
body.theme-rose #sidebar > div:last-child > div:last-child {
  background-color: var(--theme-sidebar-box-bg) !important;
  border-color: var(--theme-sidebar-box-border) !important;
}
body.theme-rose #sidebar .bg-gradient-to-tr.from-sky-500.to-blue-600,
body.theme-rose #sidebar .bg-gradient-to-tr.from-sky-600.to-blue-500 {
  background: var(--theme-brand-gradient) !important;
}
body.theme-rose #sidebar #sidebar-toggle-btn {
  background-color: rgba(244, 63, 94, 0.22) !important;
  color: #fecdd3 !important;
}
body.theme-rose #sidebar .sidebar-group-title {
  color: #fda4af !important;
}
body.theme-rose #sidebar .nav-item {
  color: #fecdd3 !important;
}
body.theme-rose #sidebar .nav-item:hover {
  background: var(--theme-sidebar-hover-bg) !important;
  color: #ffffff !important;
}
body.theme-rose #sidebar .nav-item.active {
  background: var(--theme-sidebar-active-bg) !important;
  color: #ffffff !important;
  border-right-color: var(--theme-sidebar-active-border) !important;
  box-shadow: 0 2px 10px rgba(225, 29, 72, 0.3) !important;
}
body.theme-rose #sidebar .nav-item.active .icon-box {
  background: var(--theme-sidebar-icon-bg) !important;
  color: #ffffff !important;
}
html[dir="ltr"] body.theme-rose #sidebar .nav-item.active {
  border-left-color: var(--theme-sidebar-active-border) !important;
  border-right-color: transparent !important;
  background: linear-gradient(90deg, rgba(225, 29, 72, 0.38) 0%, rgba(225, 29, 72, 0.08) 100%) !important;
}

/* ─────────────────────────────────────────────────────────────
   🌿 3. الأخضر النعناعي والزمرد الهادئ (Serene Mint, Sage & Medical Emerald)
   ───────────────────────────────────────────────────────────── */
body.theme-mint,
html.theme-mint,
[data-theme="theme-mint"] {
  --bg: #f3f9f6;
  --card-bg: #ffffff;
  --card-border: #d7ede1;
  --text-main: #0c1a14;
  --text-muted: #516d60;
  --accent: #059669;
  --accent-hover: #047857;
  --accent-gradient: linear-gradient(135deg, #10b981 0%, #059669 60%, #047857 100%);
  --accent-light: #ecfdf5;
  --accent-border: #a7f3d0;
  --theme-shadow: rgba(5, 150, 105, 0.22);
  --theme-scrollbar: #a7f3d0;

  /* Sidebar Design */
  --theme-sidebar-bg: linear-gradient(180deg, #05271d 0%, #031c15 45%, #02120d 100%);
  --theme-sidebar-border: rgba(16, 185, 129, 0.35);
  --theme-sidebar-box-bg: rgba(16, 185, 129, 0.14);
  --theme-sidebar-box-border: rgba(16, 185, 129, 0.3);
  --theme-brand-gradient: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
  --theme-sidebar-group-text: #6ee7b7;
  --theme-sidebar-text: #a7f3d0;
  --theme-sidebar-hover-bg: rgba(16, 185, 129, 0.18);
  --theme-sidebar-active-bg: linear-gradient(270deg, rgba(16, 185, 129, 0.38) 0%, rgba(16, 185, 129, 0.08) 100%);
  --theme-sidebar-active-text: #ffffff;
  --theme-sidebar-active-border: #10b981;
  --theme-sidebar-icon-bg: rgba(16, 185, 129, 0.4);
  --theme-table-header-bg: #ecfdf5;
  --theme-table-row-hover: #f0fdf7;
}

body.theme-mint #sidebar,
html.theme-mint #sidebar,
[data-theme="theme-mint"] #sidebar {
  background: var(--theme-sidebar-bg) !important;
  border-left-color: var(--theme-sidebar-border) !important;
  border-right-color: var(--theme-sidebar-border) !important;
}
body.theme-mint #mobile-drawer-panel,
[data-theme="theme-mint"] #mobile-drawer-panel {
  background: var(--theme-sidebar-bg) !important;
  border-color: var(--theme-sidebar-border) !important;
}
body.theme-mint #sidebar .bg-slate-800\/60,
body.theme-mint #sidebar .bg-slate-800\/40,
body.theme-mint #sidebar > div > div:first-child,
body.theme-mint #sidebar > div:last-child > div:last-child {
  background-color: var(--theme-sidebar-box-bg) !important;
  border-color: var(--theme-sidebar-box-border) !important;
}
body.theme-mint #sidebar .bg-gradient-to-tr.from-sky-500.to-blue-600,
body.theme-mint #sidebar .bg-gradient-to-tr.from-sky-600.to-blue-500 {
  background: var(--theme-brand-gradient) !important;
}
body.theme-mint #sidebar #sidebar-toggle-btn {
  background-color: rgba(16, 185, 129, 0.22) !important;
  color: #a7f3d0 !important;
}
body.theme-mint #sidebar .sidebar-group-title {
  color: #6ee7b7 !important;
}
body.theme-mint #sidebar .nav-item {
  color: #a7f3d0 !important;
}
body.theme-mint #sidebar .nav-item:hover {
  background: var(--theme-sidebar-hover-bg) !important;
  color: #ffffff !important;
}
body.theme-mint #sidebar .nav-item.active {
  background: var(--theme-sidebar-active-bg) !important;
  color: #ffffff !important;
  border-right-color: var(--theme-sidebar-active-border) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3) !important;
}
body.theme-mint #sidebar .nav-item.active .icon-box {
  background: var(--theme-sidebar-icon-bg) !important;
  color: #ffffff !important;
}
html[dir="ltr"] body.theme-mint #sidebar .nav-item.active {
  border-left-color: var(--theme-sidebar-active-border) !important;
  border-right-color: transparent !important;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.38) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
}

/* ─────────────────────────────────────────────────────────────
   🌑 4. الليل الداكن الفاخر (Obsidian Dark Luxury – True High-Contrast Dark Mode)
   ───────────────────────────────────────────────────────────── */
body.theme-obsidian,
html.theme-obsidian,
[data-theme="theme-obsidian"] {
  --bg: #080d1a;
  --card-bg: #10192e;
  --card-border: #1e2c48;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent: #38bdf8;
  --accent-hover: #7dd3fc;
  --accent-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  --accent-light: rgba(56, 189, 248, 0.12);
  --accent-border: rgba(56, 189, 248, 0.35);
  --theme-shadow: rgba(56, 189, 248, 0.25);
  --theme-scrollbar: #1e293b;

  /* Sidebar Design */
  --theme-sidebar-bg: linear-gradient(180deg, #020612 0%, #060b17 50%, #030712 100%);
  --theme-sidebar-border: rgba(56, 189, 248, 0.22);
  --theme-sidebar-box-bg: rgba(255, 255, 255, 0.04);
  --theme-sidebar-box-border: rgba(56, 189, 248, 0.2);
  --theme-brand-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  --theme-sidebar-group-text: #7dd3fc;
  --theme-sidebar-text: #94a3b8;
  --theme-sidebar-hover-bg: rgba(56, 189, 248, 0.12);
  --theme-sidebar-active-bg: linear-gradient(270deg, rgba(56, 189, 248, 0.32) 0%, rgba(56, 189, 248, 0.06) 100%);
  --theme-sidebar-active-text: #ffffff;
  --theme-sidebar-active-border: #38bdf8;
  --theme-sidebar-icon-bg: rgba(56, 189, 248, 0.35);
  --theme-table-header-bg: #0d1527;
  --theme-table-row-hover: #14203a;
}

body.theme-obsidian #sidebar,
html.theme-obsidian #sidebar,
[data-theme="theme-obsidian"] #sidebar {
  background: var(--theme-sidebar-bg) !important;
  border-left-color: var(--theme-sidebar-border) !important;
  border-right-color: var(--theme-sidebar-border) !important;
}
body.theme-obsidian #mobile-drawer-panel,
[data-theme="theme-obsidian"] #mobile-drawer-panel {
  background: var(--theme-sidebar-bg) !important;
  border-color: var(--theme-sidebar-border) !important;
}
body.theme-obsidian #sidebar .bg-slate-800\/60,
body.theme-obsidian #sidebar .bg-slate-800\/40,
body.theme-obsidian #sidebar > div > div:first-child,
body.theme-obsidian #sidebar > div:last-child > div:last-child {
  background-color: var(--theme-sidebar-box-bg) !important;
  border-color: var(--theme-sidebar-box-border) !important;
}
body.theme-obsidian #sidebar .bg-gradient-to-tr.from-sky-500.to-blue-600,
body.theme-obsidian #sidebar .bg-gradient-to-tr.from-sky-600.to-blue-500 {
  background: var(--theme-brand-gradient) !important;
}
body.theme-obsidian #sidebar #sidebar-toggle-btn {
  background-color: rgba(56, 189, 248, 0.15) !important;
  color: #7dd3fc !important;
}
body.theme-obsidian #sidebar .sidebar-group-title {
  color: #7dd3fc !important;
}
body.theme-obsidian #sidebar .nav-item {
  color: #94a3b8 !important;
}
body.theme-obsidian #sidebar .nav-item:hover {
  background: var(--theme-sidebar-hover-bg) !important;
  color: #ffffff !important;
}
body.theme-obsidian #sidebar .nav-item.active {
  background: var(--theme-sidebar-active-bg) !important;
  color: #ffffff !important;
  border-right-color: var(--theme-sidebar-active-border) !important;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.3) !important;
}
body.theme-obsidian #sidebar .nav-item.active .icon-box {
  background: var(--theme-sidebar-icon-bg) !important;
  color: #ffffff !important;
}
html[dir="ltr"] body.theme-obsidian #sidebar .nav-item.active {
  border-left-color: var(--theme-sidebar-active-border) !important;
  border-right-color: transparent !important;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.32) 0%, rgba(56, 189, 248, 0.06) 100%) !important;
}

/* ─────────────────────────────────────────────────────────────
   ✨ Obsidian Full-App Luxury Dark Inversion
   ───────────────────────────────────────────────────────────── */
body.theme-obsidian {
  background-color: var(--bg) !important;
  color: var(--text-main) !important;
}
body.theme-obsidian .bg-white {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-main) !important;
}
body.theme-obsidian .bg-slate-50,
body.theme-obsidian .bg-slate-50\/60 {
  background-color: #0b1222 !important;
}
body.theme-obsidian .border-slate-200,
body.theme-obsidian .border-slate-100 {
  border-color: var(--card-border) !important;
}
body.theme-obsidian .text-slate-800,
body.theme-obsidian .text-slate-900 {
  color: #f1f5f9 !important;
}
body.theme-obsidian .text-slate-700,
body.theme-obsidian .text-slate-600 {
  color: #cbd5e1 !important;
}
body.theme-obsidian .text-slate-500,
body.theme-obsidian .text-slate-400 {
  color: #94a3b8 !important;
}
body.theme-obsidian .form-input,
body.theme-obsidian .form-select,
body.theme-obsidian input[type="text"],
body.theme-obsidian input[type="search"],
body.theme-obsidian select,
body.theme-obsidian textarea {
  background-color: #0b1222 !important;
  border-color: #1e2c48 !important;
  color: #f8fafc !important;
}
body.theme-obsidian .form-input:focus,
body.theme-obsidian .form-select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}
body.theme-obsidian .data-table th {
  background-color: var(--theme-table-header-bg) !important;
  color: #94a3b8 !important;
  border-bottom-color: var(--card-border) !important;
}
body.theme-obsidian .data-table td {
  border-bottom-color: var(--card-border) !important;
  color: #cbd5e1 !important;
}
body.theme-obsidian .data-table tr:hover td {
  background-color: var(--theme-table-row-hover) !important;
}
body.theme-obsidian .stat-card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}
body.theme-obsidian #settings-save-bar {
  background-color: rgba(16, 25, 46, 0.95) !important;
  border-top-color: var(--card-border) !important;
}

/* ─────────────────────────────────────────────────────────────
   💎 أزرار العمليات الرئيسية والأيقونات والشارات المشتركة
   ───────────────────────────────────────────────────────────── */
/* أزرار Primary مع Gradients وتأثير ضوء محيطي */
.btn-primary,
button.bg-blue-600,
a.bg-blue-600 {
  background: var(--accent-gradient, var(--accent)) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px var(--theme-shadow) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-primary:hover,
button.bg-blue-600:hover,
a.bg-blue-600:hover,
.hover\:bg-blue-700:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px var(--theme-shadow) !important;
}
.btn-primary:active,
button.bg-blue-600:active {
  transform: translateY(1px) !important;
}

/* بطاقات التبويب في صفحة الإعدادات والواجهات */
.settings-tab-btn.active {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px var(--theme-shadow) !important;
}

/* بطاقات الإحصائيات (Stat Cards) */
.stat-card {
  border-color: var(--card-border) !important;
  background: var(--card-bg) !important;
  border-radius: 1rem !important;
}
.stat-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px var(--theme-shadow) !important;
  transform: translateY(-2px) !important;
}

/* الحقول والقوائم */
.form-input:focus,
.form-select:focus,
.search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--theme-shadow) !important;
  outline: none !important;
}

/* مفتاح التبديل Toggle Switch */
.toggle-switch-input:checked + .toggle-switch-track {
  background: var(--accent-gradient, var(--accent)) !important;
}

/* ─────────────────────────────────────────────────────────────
   استبدال صريح لفئات Tailwind لثيم الروز
   ───────────────────────────────────────────────────────────── */
body.theme-rose .text-blue-600 { color: #e11d48 !important; }
body.theme-rose .border-blue-600 { border-color: #e11d48 !important; }
body.theme-rose .bg-blue-50 { background-color: #fff1f2 !important; }
body.theme-rose .bg-blue-100 { background-color: #ffe4e6 !important; }
body.theme-rose .bg-blue-600\/10 { background-color: rgba(225, 29, 72, 0.12) !important; }
body.theme-rose .text-blue-800,
body.theme-rose .text-blue-700 { color: #be123c !important; }
body.theme-rose .border-blue-200,
body.theme-rose .border-blue-100 { border-color: #fecdd3 !important; }
body.theme-rose .data-table th { background-color: #fff1f2 !important; }
body.theme-rose .data-table tr:hover td { background-color: #fff8f9 !important; }
body.theme-rose .stat-card { border-color: #fce7f0 !important; }

/* ─────────────────────────────────────────────────────────────
   استبدال صريح لفئات Tailwind لثيم النعناع
   ───────────────────────────────────────────────────────────── */
body.theme-mint .text-blue-600 { color: #059669 !important; }
body.theme-mint .border-blue-600 { border-color: #059669 !important; }
body.theme-mint .bg-blue-50 { background-color: #ecfdf5 !important; }
body.theme-mint .bg-blue-100 { background-color: #d1fae5 !important; }
body.theme-mint .bg-blue-600\/10 { background-color: rgba(5, 150, 105, 0.12) !important; }
body.theme-mint .text-blue-800,
body.theme-mint .text-blue-700 { color: #065f46 !important; }
body.theme-mint .border-blue-200,
body.theme-mint .border-blue-100 { border-color: #a7f3d0 !important; }
body.theme-mint .data-table th { background-color: #ecfdf5 !important; }
body.theme-mint .data-table tr:hover td { background-color: #f2fbf7 !important; }
body.theme-mint .stat-card { border-color: #d8f1e5 !important; }

/* ─────────────────────────────────────────────────────────────
   استبدال صريح لفئات Tailwind لثيم الأوبسيديان
   ───────────────────────────────────────────────────────────── */
body.theme-obsidian .text-blue-600 { color: #38bdf8 !important; }
body.theme-obsidian .border-blue-600 { border-color: #38bdf8 !important; }
body.theme-obsidian .bg-blue-50 { background-color: rgba(56, 189, 248, 0.12) !important; }
body.theme-obsidian .bg-blue-100 { background-color: rgba(56, 189, 248, 0.2) !important; }
body.theme-obsidian .bg-blue-600\/10 { background-color: rgba(56, 189, 248, 0.15) !important; }
body.theme-obsidian .text-blue-800,
body.theme-obsidian .text-blue-700 { color: #7dd3fc !important; }
body.theme-obsidian .border-blue-200,
body.theme-obsidian .border-blue-100 { border-color: rgba(56, 189, 248, 0.3) !important; }

/* ══════════════════════════════════════════════════════════════
   تصميم كروت الاستوديو الفاخرة لاختيار الثيم (Studio Picker)
   ══════════════════════════════════════════════════════════════ */
.theme-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.theme-card-picker {
  position: relative;
  border-radius: 1.15rem;
  padding: 1.15rem;
  background: var(--card-bg, #ffffff);
  border: 2px solid var(--card-border, #e2e8f0);
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.theme-card-picker:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  border-color: var(--accent);
}

.theme-card-picker.active {
  border-color: var(--accent) !important;
  background: var(--card-bg, #ffffff) !important;
  box-shadow: 0 8px 30px var(--theme-shadow) !important;
  transform: translateY(-2px);
}

/* شريط متوهج أعلى الكرت النشط */
.theme-card-picker.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-gradient, var(--accent));
}

/* المعاينة المصغرة للواجهة (Mini UI Mockup) */
.mini-ui-mockup {
  height: 64px;
  border-radius: 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  overflow: hidden;
  margin-bottom: 0.85rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}
.mini-mockup-sidebar {
  width: 26%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
}
.mini-mockup-content {
  flex: 1;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mini-mockup-bar {
  height: 8px;
  border-radius: 3px;
  width: 70%;
}
.mini-mockup-card {
  height: 26px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}
.mini-mockup-btn {
  height: 12px;
  width: 28px;
  border-radius: 3px;
}

/* دوائر الباليت المتطورة */
.palette-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.65rem;
}
.palette-circle-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
}
.theme-card-picker:hover .palette-circle-dot {
  transform: scale(1.1);
}

.theme-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  margin-bottom: 2px;
}
.theme-card-desc {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.theme-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.65rem;
  border-top: 1px solid var(--card-border, #f1f5f9);
  font-size: 0.72rem;
}
.theme-status-tag {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.theme-card-picker.active .theme-status-tag {
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}


/* ══════════════════════════════════════════════════════════════════
   📱 Mobile View Responsive Architecture & Anti-Overlap Rules (< 768px)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* 1. Main Viewport & Content Areas: relative positioning, 100% width, strictly no absolute stacking */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* 1.1 Responsive Grid & Card Adaptation (Balanced, Symmetrical Mobile Views) */
  /* Stack only large/desktop-first layout grids */
  .grid.grid-cols-1,
  .grid.lg\:grid-cols-12,
  .grid.xl\:grid-cols-12,
  .grid.lg\:grid-cols-4:not(.stats-cards):not(.dashboard-grid):not(.keep-grid),
  .grid.md\:grid-cols-4:not(.stats-cards):not(.dashboard-grid):not(.keep-grid),
  .grid.md\:grid-cols-3:not(.keep-grid),
  .grid.md\:grid-cols-2:not(.keep-grid),
  .form-row:not(.keep-grid) {
    grid-template-columns: 1fr !important;
  }

  /* 2-column KPI / Stats Grids on Mobile & Phone (Never 1 giant stacked column!) */
  .stats-cards,
  .dashboard-grid,
  .sa-kpi-grid,
  .grid.grid-cols-2,
  .grid.grid-cols-2.sm\:grid-cols-3,
  .grid.grid-cols-2.sm\:grid-cols-4,
  .grid.grid-cols-2.sm\:grid-cols-5,
  .grid.grid-cols-2.lg\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Micro 3-column stats / tooth status badges remain 3 compact columns */
  .grid.grid-cols-3:not(.stack-mobile),
  .grid-cols-3:not(.stack-mobile) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  /* Compact KPI Card Padding on Phone Viewports */
  .sa-kpi-grid > div {
    padding: 0.75rem !important;
  }

  /* 1.2 Main containers and data cards take 100% width without broken fixed margins */
  .main-container,
  .card,
  .glass-card,
  .data-card,
  .dashboard-card,
  .kpi-card,
  .stat-card,
  .page-container,
  .content-container,
  .panel-card,
  .modal-box,
  #sa-inspector-drawer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 1.3 Bottom padding of 85px to ensure no button or control is hidden behind mobile bottom bar */
  main,
  #main-content,
  .main-content,
  .page,
  .sa-pane,
  #app-shell > main,
  body > main {
    padding-bottom: 85px !important;
  }

  /* 1.4 Smooth touch horizontal scrolling for tables and dental charts */
  .overflow-x-auto,
  .table-responsive,
  .table-wrapper,
  .data-table-wrapper,
  #odontogram-teeth-area,
  .odontogram-wrapper,
  #perio-chart-container,
  #ortho-teeth-picker,
  #sublog-audits-view,
  .data-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }

  /* 1.5 SuperAdmin Sidebar as full slide-in Drawer on mobile with backdrop overlay */
  #sa-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 80px) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    z-index: 50 !important;
    background: #ffffff !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
  }
  html[dir="rtl"] #sa-sidebar {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
  }
  html[dir="ltr"] #sa-sidebar {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
  }
  html[dir="rtl"] #sa-sidebar.drawer-open,
  html[dir="ltr"] #sa-sidebar.drawer-open,
  html #sa-sidebar.drawer-open,
  #sa-sidebar.drawer-open {
    transform: translateX(0) !important;
  }
  #sa-sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 45 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  #sa-sidebar-backdrop.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  /* Superadmin Navigation inside Mobile Drawer */
  #sa-sidebar nav {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    gap: 6px !important;
  }
  #sa-sidebar nav .sa-nav-btn {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: right !important;
    white-space: nowrap !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.8rem !important;
  }

  main,
  #app-shell,
  .main-content,
  #main-content,
  .page,
  .page.active,
  .tab-content,
  .tab-pane,
  .omfs-tab-panel,
  .sa-pane,
  #settings-main-container,
  #omfs-content-area,
  #contracts-page-container,
  #surgery-subtab-content,
  #surgery-tab-wrapper,
  [id^="profile-tab-"],
  [id$="-tab-content"],
  [role="tabpanel"] {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
  }

  /* Prevent any absolute layer stacking from breaking internal views */
  .page > *,
  .tab-content > *,
  .tab-pane > *,
  .omfs-tab-panel > *,
  .sa-pane > *,
  #settings-main-container > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Responsive Tabs Containers: Smooth Horizontal Scrolling & Clean Flex Wrap */
  .sub-nav-tabs,
  #profile-tabs,
  #settings-nav-tabs,
  .nav-tabs,
  .tabs-nav,
  .tabs-header,
  .tabs-list,
  .tabs,
  .tab-nav,
  .subtabs-container,
  #surgery-subtabs-nav,
  [role="tablist"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 1rem !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent !important;
  }

  /* Support wrapping when explicitly marked or in compact groupings */
  .tabs-wrap-mobile,
  .flex-wrap-mobile {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  /* Tab item elements inside scrolling tab bars */
  .sub-nav-tabs > *,
  #profile-tabs > *,
  #settings-nav-tabs > *,
  .nav-tabs > *,
  .tabs-nav > *,
  .tabs-list > *,
  .tabs > *,
  .tab-nav > *,
  [role="tablist"] > *,
  .settings-tab-btn,
  .sub-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  /* 3. Settings specific mobile fixes: Remove sticky sidebar on phone */
  #page-settings .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  #page-settings .lg\:col-span-3,
  #page-settings .sticky,
  .settings-sticky-sidebar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.75rem !important;
    z-index: 10 !important;
  }

  #settings-nav-tabs {
    margin-bottom: 0.25rem !important;
  }

  .settings-tab-btn {
    padding: 0.55rem 0.85rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.75rem !important;
  }

  /* Reposition sticky/fixed action save bar above the mobile bottom bar */
  #settings-save-bar {
    bottom: 58px !important;
    padding: 0.75rem 1rem !important;
    z-index: 45 !important;
  }

  /* 4. SuperAdmin Tabs on Mobile */
  #sa-sidebar-nav {
    padding: 0.25rem !important;
    margin-bottom: 0.75rem !important;
  }

  .sa-nav-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  /* 5. AI Assistant Floating Robot Widget (Mobile Floating Corner Positioning) */
  #clinical-voice-agent-container {
    position: fixed !important;
    bottom: 74px !important;
    left: 12px !important;
    right: auto !important;
    top: auto !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: calc(100vw - 24px) !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html[dir="ltr"] #clinical-voice-agent-container {
    left: 12px !important;
    right: auto !important;
  }

  /* Hide wide HUD capsule and speech balloon on mobile to prevent overflow and keep robot cleanly in the corner */
  #ai-fab-hud-capsule,
  #ai-robot-speech-balloon {
    display: none !important;
  }

  #ai-fab-avatar-wrapper {
    margin: 0 !important;
    transform: none !important;
  }

  #ai-fab-button {
    width: 48px !important;
    height: 48px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  }

  #ai-fab-button svg {
    width: 28px !important;
    height: 28px !important;
  }

  /* Mobile bottom bar retains 100% full width and comfortable spacing */
  #mobile-bottom-bar {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Top Navigation Bar Mobile Polish */
  #top-nav-bar {
    padding: 0.65rem 0.85rem !important;
    gap: 0.5rem !important;
    border-radius: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
  #global-search-container {
    order: 3 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-top: 0.25rem !important;
  }

  /* Page title mobile sizing */
  .page h1.text-2xl,
  .page h2.text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
}


/* ── Floating AI Agent Container Docking & Left Edge Reach ── */
#clinical-voice-agent-container {
  direction: ltr !important;
  align-items: flex-start !important;
  touch-action: none;
}

#clinical-voice-agent-container.ai-docked-right {
  align-items: flex-end !important;
}

#clinical-voice-agent-container.ai-docked-right #ai-fab-row {
  flex-direction: row-reverse !important;
}

#ai-fab-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════
   🔄 Master Mobile Landscape & Touch-Layering Authority Rules
   ══════════════════════════════════════════════════════════════════ */
/* Ensure child SVGs, paths, spans never intercept touches from their parent button */
#btn-mobile-menu *,
#sidebar .nav-item *,
#sidebar button *,
#sidebar a *,
#mobile-drawer-panel .drawer-nav-item *,
#mobile-drawer-panel button *,
#mobile-drawer-panel a * {
  pointer-events: none !important;
}

#btn-mobile-menu {
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Standalone Auth Screen: 100% hidden when not in auth mode */
body:not(.auth-layout-mode) #auth-screen,
html:not(.auth-layout-mode) #auth-screen,
#auth-screen.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Mobile Drawer Overlay: Top-level backdrop immunity */
#mobile-drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

#mobile-drawer-overlay.hidden,
#mobile-drawer-overlay:not(.active):not(.drawer-open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

#mobile-drawer-overlay.active,
#mobile-drawer-overlay.drawer-open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

#mobile-drawer-panel {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 10000000 !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Ensure all interactive buttons/links inside drawer and sidebar have authority */
#mobile-drawer-panel button,
#mobile-drawer-panel a,
#mobile-drawer-panel .drawer-nav-item,
#sidebar button,
#sidebar a,
#sidebar .nav-item,
.drawer-nav-item {
  position: relative !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Bottom Bar lower z-index & full suppression when Mobile Drawer is active */
#mobile-bottom-bar {
  z-index: 50 !important;
}

body.menu-open #mobile-bottom-bar,
html.menu-open #mobile-bottom-bar,
body.drawer-open #mobile-bottom-bar,
html.drawer-open #mobile-bottom-bar,
#mobile-drawer-overlay.active ~ #mobile-bottom-bar,
#mobile-drawer-overlay.drawer-open ~ #mobile-bottom-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
  opacity: 0 !important;
}

body.menu-open #clinical-voice-agent-container,
html.menu-open #clinical-voice-agent-container,
#mobile-drawer-overlay.active ~ #clinical-voice-agent-container,
#mobile-drawer-overlay.drawer-open ~ #clinical-voice-agent-container {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ── Mobile Landscape Layout (Smartphones rotated horizontally: height <= 520px) ── */
@media screen and (orientation: landscape) and (max-height: 520px) {
  #mobile-bottom-bar,
  #btn-mobile-menu {
    display: none !important;
  }

  /* Keep sidebar in flex layout beside main so it never overlaps or gets covered */
  html body #sidebar,
  body #sidebar,
  #sidebar {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: 100vh !important;
    max-height: 100vh !important;
    flex-shrink: 0 !important;
    z-index: 100 !important;
    background: var(--theme-sidebar-bg, #0f172a) !important;
    border-left: 1px solid var(--theme-sidebar-border, rgba(51, 65, 85, 0.4)) !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    transition: width 0.2s ease, min-width 0.2s ease !important;
  }

  /* Default collapsed icon sidebar in mobile landscape (68px) */
  #sidebar:not(.expanded),
  #sidebar.collapsed {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }

  #sidebar:not(.expanded) .sidebar-group-title,
  #sidebar:not(.expanded) .sidebar-brand-text,
  #sidebar:not(.expanded) .sidebar-user-text,
  #sidebar:not(.expanded) .nav-label,
  #sidebar.collapsed .sidebar-group-title,
  #sidebar.collapsed .sidebar-brand-text,
  #sidebar.collapsed .sidebar-user-text,
  #sidebar.collapsed .nav-label {
    display: none !important;
  }

  #sidebar:not(.expanded) .sidebar-brand-icon-wrapper,
  #sidebar.collapsed .sidebar-brand-icon-wrapper {
    display: none !important;
  }

  #sidebar:not(.expanded) #sidebar-toggle-btn,
  #sidebar.collapsed #sidebar-toggle-btn {
    display: flex !important;
    margin: 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    z-index: 50 !important;
  }

  #sidebar .nav-item {
    justify-content: center !important;
    padding: 0.45rem 0 !important;
    margin: 0.12rem auto !important;
    width: 44px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-right: none !important;
    border-left: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
  }

  /* Expanded Sidebar in landscape */
  #sidebar.expanded {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7) !important;
  }

  #sidebar.expanded .sidebar-group-title,
  #sidebar.expanded .sidebar-brand-text,
  #sidebar.expanded .sidebar-user-text,
  #sidebar.expanded .nav-label {
    display: block !important;
  }

  #sidebar.expanded .sidebar-brand-icon-wrapper {
    display: flex !important;
  }

  #sidebar.expanded .nav-item {
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    padding: 0.45rem 0.75rem !important;
    margin: 0.1rem 0.35rem !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* Vertical scrolling container for links in landscape */
  #sidebar > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  #sidebar #nav-links {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 75px) !important;
    padding-bottom: 25px !important;
  }

  #mobile-drawer-overlay:not(.active):not(.drawer-open) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   🛡️ SuperAdmin Mobile Header, Sidebar & Touch Authority Rules
   ══════════════════════════════════════════════════════════════════ */
#sa-mobile-menu-btn,
.sa-nav-btn {
  position: relative !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#sa-mobile-menu-btn *,
.sa-nav-btn * {
  pointer-events: none !important;
}

#sa-top-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9990 !important;
  pointer-events: auto !important;
}

/* 📱 SuperAdmin Portrait Mobile Drawer (< 768px) */
@media (max-width: 767.98px) {
  #sa-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 1000000 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  html[dir="rtl"] #sa-sidebar {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
  }

  html[dir="ltr"] #sa-sidebar {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
  }

  html[dir="rtl"] #sa-sidebar.drawer-open,
  html[dir="ltr"] #sa-sidebar.drawer-open,
  html #sa-sidebar.drawer-open,
  #sa-sidebar.drawer-open {
    transform: translateX(0) !important;
  }

  #sa-sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 999998 !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
  }

  #sa-sidebar-backdrop:not(.active) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  #sa-sidebar-backdrop.active {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
}

/* 🔄 SuperAdmin Landscape Viewport Rules (< 1024px and height <= 520px) */
@media screen and (orientation: landscape) and (max-height: 520px) {
  #sa-mobile-menu-btn,
  #sa-sidebar-backdrop {
    display: none !important;
  }

  html body #sa-sidebar,
  body #sa-sidebar,
  #sa-sidebar {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: -2px 0 15px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html[dir="ltr"] body #sa-sidebar,
  html[dir="ltr"] #sa-sidebar {
    left: 0 !important;
    right: auto !important;
    border-right: 1px solid #e2e8f0 !important;
    border-left: none !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.08) !important;
  }

  /* Offset header and content so they never get overlapped by the 68px fixed sidebar */
  html[dir="rtl"] #sa-top-header,
  html[dir="rtl"] header.bg-white,
  html[dir="rtl"] main,
  html[dir="rtl"] .main-content {
    margin-right: 68px !important;
    margin-left: 0 !important;
  }

  html[dir="ltr"] #sa-top-header,
  html[dir="ltr"] header.bg-white,
  html[dir="ltr"] main,
  html[dir="ltr"] .main-content {
    margin-left: 68px !important;
    margin-right: 0 !important;
  }

  #sa-sidebar .sa-sidebar-text,
  #sa-sidebar .sa-nav-label,
  #sa-sidebar .sa-badge,
  #sa-sidebar [id^="sa-nav-"][id$="-count"],
  #sa-sidebar .text-\[10px\],
  #sa-sidebar .text-\[11px\],
  #sa-sidebar .min-w-0,
  #sa-sidebar > div:first-child,
  #sa-sidebar aside > div:last-child {
    display: none !important;
  }

  #sa-sidebar .sa-nav-btn {
    justify-content: center !important;
    padding: 0.55rem 0 !important;
    width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0.2rem auto !important;
    border-right: none !important;
    border-left: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #sa-sidebar .sa-nav-btn > span {
    justify-content: center !important;
  }

  #sa-sidebar .sa-nav-btn > span > span:not(.text-base),
  #sa-sidebar .sa-nav-btn [data-i18n] {
    display: none !important;
  }

  #sa-sidebar nav {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    flex: 1 1 auto !important;
    padding: 0.5rem 0 !important;
  }
}

/* ============================== Custom Slim Scrollbar for Modals & Overlay Dialogs ============================== */
.custom-slim-scrollbar {
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.custom-slim-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.custom-slim-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-slim-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.custom-slim-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}