/* ═══════════════════════════════════════════════════════════════════════
   ERP Design System  —  P01  (Sidebar + Dark Mode)
   Generated: 2026-06-10
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS  (Light Mode = default)
   ──────────────────────────────────────────────────────────────────────*/
:root {
  /* ── Brand (overridden by GlobalSettings inline style) ── */
  --primary-color:   #005eb8;
  --body-color:      #f4f6fb;
  --border-color:    #fd7e14;

  /* ── Semantic aliases (used widely in templates) ── */
  --primary:         var(--primary-color);
  --accent:          var(--primary-color);
  --accent-s:        #dbeafe;           /* subtle tint of accent */

  /* ── Page surfaces ── */
  --bg:              var(--body-color, #f4f6fb);
  --bg-page:         var(--body-color, #f4f6fb);
  --bg-card:         #ffffff;
  --bg-muted:        #f1f5f9;
  --surface:         #ffffff;
  --surface2:        #f8fafc;
  --stripe:          #f8fafc;
  --light:           #f1f5f9;
  --white:           #ffffff;

  /* ── Typography ── */
  --tx1:             #0f172a;
  --tx2:             #475569;
  --tx3:             #94a3b8;
  --text-1:          #0f172a;
  --text-2:          #475569;
  --text-3:          #94a3b8;
  --ink:             #0f172a;
  --ink2:            #475569;
  --muted:           #94a3b8;

  /* ── Borders ── */
  --border:          #e2e8f0;
  --border2:         #cbd5e1;

  /* ── Semantic colours ── */
  --success:         #16a34a;
  --success-bg:      #dcfce7;
  --green:           #16a34a;
  --green-s:         #dcfce7;
  --red:             #dc2626;
  --red-s:           #fee2e2;
  --amber:           #d97706;
  --amber-s:         #fef3c7;
  --orange:          #ea580c;
  --orange-s:        #ffedd5;
  --blue:            #2563eb;
  --purple:          #7c3aed;
  --purple-s:        #ede9fe;
  --teal:            #0d9488;
  --teal-s:          #ccfbf1;
  --gold:            #ca8a04;

  /* ── Radii ── */
  --radius:          8px;
  --radius-lg:       14px;
  --r-sm:            4px;
  --r-md:            8px;
  --r-lg:            12px;
  --r-xl:            16px;

  /* ── Shadows ── */
  --shadow-sm:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:       0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:       0 8px 32px rgba(0,0,0,.12);

  /* ── Sidebar (derives from primary-color automatically) ── */
  --sidebar-w:          220px;
  --sidebar-w-collapsed: 56px;
  --sidebar-bg:         color-mix(in srgb, var(--primary-color) 30%, #000 70%);
  --sidebar-bg2:        color-mix(in srgb, var(--primary-color) 38%, #000 62%);
  --sidebar-item-hover: rgba(255,255,255,.09);
  --sidebar-item-active:rgba(255,255,255,.16);
  --sidebar-text:       rgba(255,255,255,.88);
  --sidebar-text-dim:   rgba(255,255,255,.45);
  --sidebar-border:     rgba(255,255,255,.10);

  /* ── Top bar ── */
  --hdr-h:           54px;
  --hdr-bg:          var(--primary-color);
  --hdr-text:        rgba(255,255,255,.92);
  --hdr-acc:         var(--primary-color);

  /* ── Aliases for legacy template vars ── */
  --color-success:   #16a34a;

  /* ── Chart palette (c1–c7) ── */
  --c1:  #3b82f6;
  --c2:  #10b981;
  --c3:  #f59e0b;
  --c4:  #ef4444;
  --c5:  #8b5cf6;
  --c6:  #06b6d4;
  --c7:  #f97316;
}

/* ──────────────────────────────────────────────────────────────────────
   2. DARK MODE TOKENS
   ──────────────────────────────────────────────────────────────────────*/
[data-theme="dark"] {
  --sidebar-bg:      color-mix(in srgb, var(--primary-color) 18%, #000 82%);
  --sidebar-bg2:     color-mix(in srgb, var(--primary-color) 24%, #000 76%);
  --bg:              #0b1120;
  --bg-page:         #0b1120;
  --bg-card:         #162032;
  --bg-muted:        #1e2d42;
  --surface:         #162032;
  --surface2:        #1a2740;
  --stripe:          #1a2740;
  --light:           #1e2d42;
  --white:           #162032;

  --tx1:             #f1f5f9;
  --tx2:             #94a3b8;
  --tx3:             #475569;
  --text-1:          #f1f5f9;
  --text-2:          #94a3b8;
  --text-3:          #475569;
  --ink:             #f1f5f9;
  --ink2:            #94a3b8;
  --muted:           #475569;

  --border:          #3b6fa6;
  --border2:         #4a7fbf;

  --accent-s:        #1e3a5f;

  --success-bg:      #052e16;
  --green-s:         #052e16;
  --red-s:           #450a0a;
  --amber-s:         #451a03;
  --orange-s:        #431407;
  --purple-s:        #2e1065;
  --teal-s:          #042f2e;

  --hdr-bg:          color-mix(in srgb, var(--primary-color) 25%, #000 75%);
  --hdr-text:        rgba(255,255,255,.92);
  --hdr-acc:         var(--primary-color);

  --shadow-sm:       0 1px 3px rgba(0,0,0,.3);
  --shadow-md:       0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:       0 8px 32px rgba(0,0,0,.55);

  /* ── Override Bootstrap 5 internal CSS vars for dark mode ── */
  --bs-body-bg:          #0b1120;
  --bs-body-color:       #f1f5f9;
  --bs-card-bg:          #162032;
  --bs-border-color:     #1e3a5f;
  --bs-table-bg:         transparent;
  --bs-table-striped-bg: #1a2740;
  --bs-table-hover-bg:   #1a2740;
  --bs-table-color:      #f1f5f9;
  --bs-secondary-bg:     #1e2d42;
  --bs-tertiary-bg:      #1a2740;
  --bs-emphasis-color:   #f8fafc;
  --bs-secondary-color:  #94a3b8;
  --bs-tertiary-color:   #475569;
  --bs-link-color:       var(--primary-color);
  --bs-modal-bg:         #162032;
  --bs-dropdown-bg:      #162032;
  --bs-dropdown-border-color: #1e3a5f;
  --bs-input-bg:         #1a2740;
}

/* ──────────────────────────────────────────────────────────────────────
   3. RESET & BASE
   ──────────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--tx1);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: background .25s, color .25s;
}

/* ──────────────────────────────────────────────────────────────────────
   4. SHELL LAYOUT
   ──────────────────────────────────────────────────────────────────────*/
.erp-shell {
  display: flex;
  min-height: 100vh;
}

/* ──────────────────────────────────────────────────────────────────────
   5. SIDEBAR
   ──────────────────────────────────────────────────────────────────────*/
.erp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-w-collapsed);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  box-shadow: 2px 0 16px rgba(0,0,0,.18);
}

.erp-sidebar.expanded {
  width: var(--sidebar-w);
}

/* Branch dropdown escapes sidebar overflow via position:fixed on the menu */
.erp-branch-pill .dropdown-menu {
  position: fixed !important;
  /* JS sets top/left via data attribute; fallback below */
  top: auto;
  left: auto;
  margin-top: 4px;
}

.erp-sidebar-toggle {
  position: absolute;
  top: 14px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 2px solid var(--sidebar-bg);
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: transform .22s;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.erp-sidebar.expanded .erp-sidebar-toggle {
  transform: rotate(180deg);
}

/* ── Logo ── */
.erp-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  min-height: 56px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.erp-sidebar-logo-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  border-radius: 7px;
  color: #fff;
  font-size: 14px;
}
.erp-sidebar-logo-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 3px;
}

.erp-sidebar-logo-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .18s;
  overflow: hidden;
}
.erp-sidebar.expanded .erp-sidebar-logo-text { opacity: 1; }

/* ── Branch pill ── */
.erp-branch-pill {
  margin: 8px 8px 4px;
  background: var(--sidebar-item-hover);
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--sidebar-text);
  font-size: 11px;
  flex-shrink: 0;
  overflow: hidden;
  transition: padding .18s;
}
.erp-branch-pill .bp-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  max-width: 0;
  transition: opacity .18s, max-width .18s;
}
.erp-sidebar.expanded .erp-branch-pill .bp-text {
  opacity: 1;
  max-width: 160px;
}
.erp-branch-pill .dropdown-menu {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.erp-branch-pill .dropdown-item {
  font-size: 13px;
  color: var(--tx1);
  padding: 8px 14px;
}
.erp-branch-pill .dropdown-item:hover,
.erp-branch-pill .dropdown-item.active {
  background: var(--accent-s);
  color: var(--primary-color);
}

/* ── Navigation ── */
.erp-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.erp-sidebar-nav::-webkit-scrollbar { width: 4px; }
.erp-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

/* ── Section labels ── */
.erp-sidebar-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sidebar-text-dim);
  padding: 14px 16px 4px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  max-height: 0;
  transition: opacity .18s, max-height .18s;
}
.erp-sidebar.expanded .erp-sidebar-section-label {
  opacity: 1;
  max-height: 32px;
}

/* ── Sidebar items (links & buttons) ── */
.erp-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  color: var(--sidebar-text);
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
  position: relative;
}
.erp-sidebar-item:hover {
  background: var(--sidebar-item-hover);
  color: #fff;
  text-decoration: none;
}
.erp-sidebar-item.active {
  background: var(--sidebar-item-active);
  color: #fff;
  border-left: 3px solid var(--primary-color);
}

/* Tooltip on collapsed */
.erp-sidebar:not(.expanded) .erp-sidebar-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(var(--sidebar-w-collapsed) + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

/* Nav icon */
.nav-icon {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Nav label */
.nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  max-width: 0;
  transition: opacity .18s, max-width .18s;
}
.erp-sidebar.expanded .nav-label {
  opacity: 1;
  max-width: 200px;
}

/* Nav arrow (submenu chevron) */
.nav-arrow {
  font-size: 9px;
  margin-left: auto;
  transition: transform .2s;
  opacity: 0;
  flex-shrink: 0;
}
.erp-sidebar.expanded .nav-arrow { opacity: .5; }
.erp-sidebar-item[aria-expanded="true"] .nav-arrow { transform: rotate(90deg); }

/* ── Submenus ── */
.erp-sidebar-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s cubic-bezier(.4,0,.2,1);
  background: rgba(0,0,0,.15);
}
.erp-sidebar-submenu.open {
  max-height: 800px;
}
.erp-sidebar-submenu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 24px;
  color: var(--sidebar-text-dim);
  font-size: 12.5px;
  text-decoration: none;
  transition: background .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
}
.erp-sidebar-submenu a:hover {
  background: var(--sidebar-item-hover);
  color: #fff;
}
.sub-icon {
  flex-shrink: 0;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .18s, max-width .18s;
}
.erp-sidebar.expanded .sub-label {
  opacity: 1;
  max-width: 160px;
}

/* ── Divider ── */
.erp-sidebar-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 8px 12px;
}

/* ── Bottom section ── */
.erp-sidebar-bottom {
  flex-shrink: 0;
  border-top: 1px solid var(--sidebar-border);
  padding: 4px 0 6px;
}

/* ── User avatar ── */
.erp-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1.5px solid rgba(255,255,255,.35);
}
/* Avatar in topbar (on primary bg) */
.erp-topbar .erp-user-avatar {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
}

/* ── Mobile overlay ── */
.erp-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1039;
  opacity: 0;
  transition: opacity .2s;
}
.erp-sidebar-overlay.active {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────────
   6. MAIN AREA
   ──────────────────────────────────────────────────────────────────────*/
.erp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--sidebar-w-collapsed);
  transition: margin-left .22s cubic-bezier(.4,0,.2,1);
}
.erp-sidebar.expanded ~ .erp-main {
  margin-left: var(--sidebar-w);
}

/* ──────────────────────────────────────────────────────────────────────
   7. TOP BAR
   ──────────────────────────────────────────────────────────────────────*/
.erp-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--hdr-h);
  background: var(--hdr-bg);
  border-bottom: 3px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: background .25s, border-color .25s;
}

.erp-mobile-menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--hdr-text, rgba(255,255,255,.85));
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  line-height: 1;
}
.erp-mobile-menu-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

.erp-topbar-title {
  /* kept for child-page overrides (breadcrumbs, page titles) */
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--hdr-text, rgba(255,255,255,.92));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto; /* push actions to right when title block is empty */
}

/* Theme toggle button in topbar */
.erp-theme-toggle {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85) !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx2);
  font-size: 14px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.erp-theme-toggle:hover {
  background: var(--bg-muted);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* User chip in topbar */
.erp-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: rgba(255,255,255,.15);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
}

/* ──────────────────────────────────────────────────────────────────────
   8. TOAST / MESSAGES
   ──────────────────────────────────────────────────────────────────────*/
#erp-toast-wrap {
  position: fixed;
  top: calc(var(--hdr-h) + 12px);
  right: 20px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}

.erp-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  position: relative;
  animation: erp-slide-in .25s ease;
  overflow: hidden;
}
.erp-toast.hiding {
  animation: erp-slide-out .3s ease forwards;
}

.erp-toast .t-icon { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.erp-toast .t-msg  { flex: 1; font-size: 13px; color: var(--tx1); line-height: 1.45; }
.erp-toast .t-close {
  background: none;
  border: none;
  color: var(--tx3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

/* Progress bar */
.erp-toast .t-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: currentColor;
  opacity: .25;
  width: 100%;
  animation: erp-toast-bar 3.5s linear forwards;
}

/* Variants */
.t-success { border-left-color: var(--success); }
.t-success .t-icon { color: var(--success); }
.t-error   { border-left-color: var(--red); }
.t-error   .t-icon { color: var(--red); }
.t-warning { border-left-color: var(--amber); }
.t-warning .t-icon { color: var(--amber); }
.t-info    { border-left-color: var(--blue); }
.t-info    .t-icon { color: var(--blue); }

@keyframes erp-slide-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes erp-slide-out {
  to   { opacity: 0; transform: translateX(28px); max-height: 0; padding: 0; margin: 0; }
}
@keyframes erp-toast-bar {
  from { width: 100%; }
  to   { width: 0; }
}

/* ──────────────────────────────────────────────────────────────────────
   9. PAGE CONTENT & FOOTER
   ──────────────────────────────────────────────────────────────────────*/
.erp-content {
  flex: 1;
  padding: 24px 24px 12px;
  min-width: 0;
  background: var(--bg-page);
  color: var(--tx1);
  transition: background .25s, color .25s;
}

/* Dark mode: force body and wrapper backgrounds */
[data-theme="dark"] body,
[data-theme="dark"] .erp-shell,
[data-theme="dark"] .erp-main {
  background: var(--bg-page) !important;
  color: var(--tx1) !important;
}

/* Dark mode: tables — override Bootstrap's light defaults */
[data-theme="dark"] .table,
[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: var(--tx1) !important;
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--tx1) !important;
  --bs-table-striped-bg: var(--stripe) !important;
  --bs-table-hover-bg: var(--stripe) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .table thead th {
  background: var(--bg-muted) !important;
  color: var(--tx2) !important;
}
[data-theme="dark"] .table tbody tr:hover > * {
  background-color: var(--stripe) !important;
  color: var(--tx1) !important;
}
/* Ensure table wrapper bg matches page */
[data-theme="dark"] .erp-table-wrapper,
[data-theme="dark"] .table-responsive {
  background: var(--bg-card) !important;
  border-radius: var(--r-lg);
}

.erp-footer {
  padding: 12px 24px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  background: var(--hdr-bg);
  border-top: 3px solid var(--border-color);
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────
   10. PAGE TOOLBAR  (title + actions strip used in list pages)
   ──────────────────────────────────────────────────────────────────────*/
.erp-page-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.erp-page-toolbar-title h1,
.erp-page-toolbar-title h2,
.erp-page-toolbar-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--tx1);
  margin: 0;
}

.erp-page-toolbar-title p {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--tx3);
}

.erp-page-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Icon hero — big colored icon in page headers */
.erp-icon-hero {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: var(--accent-s);
  color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   11. FILTER CARD
   ──────────────────────────────────────────────────────────────────────*/
.erp-filter-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  background: var(--bg-card) !important;
}

.erp-filter-header {
  background: var(--bg-muted) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--tx2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0 !important;
}

.erp-filter-body {
  padding: 16px !important;
  background: var(--bg-card) !important;
}

/* Labels & inputs inside filters */
.erp-filter-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
  margin-bottom: 4px;
}

.erp-filter-input,
.erp-filter-select {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--tx1) !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  transition: border-color .15s, box-shadow .15s;
}
.erp-filter-input:focus,
.erp-filter-select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(0,94,184,.12) !important;
  outline: none !important;
  background: var(--bg-card) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   12. TABLE CARD HEADER
   ──────────────────────────────────────────────────────────────────────*/
.erp-table-header {
  background: var(--hdr-bg) !important;
  border-bottom: 2px solid var(--primary-color) !important;
  padding: 12px 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.erp-table-header h6 {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx1);
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   13. BUTTONS
   ──────────────────────────────────────────────────────────────────────*/

/* Primary action (new / save) */
.erp-btn-new {
  background: var(--primary-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  transition: filter .15s, box-shadow .15s;
  white-space: nowrap;
}
.erp-btn-new:hover {
  filter: brightness(1.12);
  box-shadow: 0 4px 12px rgba(0,94,184,.3);
  color: #fff !important;
}
.erp-btn-new:active { filter: brightness(.95); }

/* Secondary (back / cancel) */
.erp-btn-secondary {
  background: var(--bg-card) !important;
  color: var(--tx2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.erp-btn-secondary:hover {
  background: var(--bg-muted) !important;
  border-color: var(--border2) !important;
  color: var(--tx1) !important;
}

/* Filter submit */
.erp-btn-filter {
  background: var(--primary-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: filter .15s;
}
.erp-btn-filter:hover { filter: brightness(1.1); color: #fff !important; }

/* Filter reset */
.erp-btn-filter-reset {
  background: transparent !important;
  color: var(--tx3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  font-size: 12.5px !important;
  transition: background .15s, color .15s;
}
.erp-btn-filter-reset:hover {
  background: var(--bg-muted) !important;
  color: var(--tx1) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   14. CARDS  (Bootstrap .card overrides for dark mode)
   ──────────────────────────────────────────────────────────────────────*/
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--tx1) !important;
}

.card-header {
  background: var(--bg-muted) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--tx1) !important;
}

.card-body { background: var(--bg-card); }

/* ──────────────────────────────────────────────────────────────────────
   15. TABLES  (Bootstrap .table overrides for dark mode)
   ──────────────────────────────────────────────────────────────────────*/
.table {
  color: var(--tx1) !important;
  border-color: var(--border) !important;
}
.table thead th {
  background: var(--bg-muted) !important;
  color: var(--tx2) !important;
  border-color: var(--border) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.table tbody tr {
  border-bottom: 1px solid var(--border) !important;
  transition: background .12s;
}
.table-hover tbody tr:hover { background: var(--stripe) !important; }
.table td, .table th { border-color: var(--border) !important; vertical-align: middle; }
.table-light { --bs-table-bg: var(--bg-muted) !important; }
.table-striped tbody tr:nth-child(odd) { background: var(--stripe) !important; }

/* ──────────────────────────────────────────────────────────────────────
   16. FORMS  (Bootstrap overrides for dark mode)
   ──────────────────────────────────────────────────────────────────────*/
.form-control,
.form-select {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--tx1) !important;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus {
  background: var(--bg-card) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(0,94,184,.12) !important;
  color: var(--tx1) !important;
}
.form-control::placeholder { color: var(--tx3) !important; }
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
}
.form-text { color: var(--tx3) !important; }

/* Input group addons */
.input-group-text {
  background: var(--bg-muted) !important;
  border-color: var(--border) !important;
  color: var(--tx2) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   17. BADGES
   ──────────────────────────────────────────────────────────────────────*/
.badge { font-size: 11px; font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────────
   18. MODALS  (Bootstrap overrides)
   ──────────────────────────────────────────────────────────────────────*/
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--tx1) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-muted) !important;
}
.modal-footer { border-top: 1px solid var(--border) !important; }
.btn-close { filter: var(--close-filter, none); }
[data-theme="dark"] .btn-close { filter: invert(1); }

/* ──────────────────────────────────────────────────────────────────────
   19. DROPDOWNS  (Bootstrap overrides)
   ──────────────────────────────────────────────────────────────────────*/
.dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--r-md) !important;
}
.dropdown-item {
  color: var(--tx1) !important;
  font-size: 13px;
  padding: 8px 14px;
  transition: background .12s;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--accent-s) !important;
  color: var(--primary-color) !important;
}
.dropdown-divider { border-color: var(--border) !important; }

/* ──────────────────────────────────────────────────────────────────────
   20. PAGINATION  — fully inherits design system tokens + dark mode
   ──────────────────────────────────────────────────────────────────────*/
.pagination {
  --bs-pagination-bg:              var(--bg-card);
  --bs-pagination-border-color:    var(--border);
  --bs-pagination-color:           var(--tx2);
  --bs-pagination-hover-bg:        var(--accent-s);
  --bs-pagination-hover-color:     var(--primary-color);
  --bs-pagination-hover-border-color: var(--primary-color);
  --bs-pagination-active-bg:       var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
  --bs-pagination-active-color:    #fff;
  --bs-pagination-disabled-bg:     var(--bg-muted);
  --bs-pagination-disabled-border-color: var(--border);
  --bs-pagination-disabled-color:  var(--tx3);
}
.pagination .page-link {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--tx2) !important;
  transition: all .15s;
}
.pagination .page-link:hover {
  background: var(--accent-s) !important;
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
.pagination .page-item.active .page-link {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}
.pagination .page-item.disabled .page-link {
  background: var(--bg-muted) !important;
  border-color: var(--border) !important;
  color: var(--tx3) !important;
  opacity: .5;
}

/* Dark mode — Bootstrap 5 overrides pagination BS vars automatically via
   the [data-theme="dark"] block above, but we force them explicitly here
   so any Bootstrap-rendered pagination wrapper picks up dark tokens */
[data-theme="dark"] .pagination .page-link {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--tx2) !important;
}
[data-theme="dark"] .pagination .page-link:hover {
  background: var(--bg-muted) !important;
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}
[data-theme="dark"] .pagination .page-item.active .page-link {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}
[data-theme="dark"] .pagination .page-item.disabled .page-link {
  background: var(--bg-muted) !important;
  border-color: var(--border) !important;
  color: var(--tx3) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   21. ALERTS  (Bootstrap overrides)
   ──────────────────────────────────────────────────────────────────────*/
.alert { border-radius: var(--r-md); font-size: 13.5px; }

/* ──────────────────────────────────────────────────────────────────────
   22. UNIVERSAL BACKGROUND CONSISTENCY  (P08)
   All page elements must inherit from design system tokens.
   No page should show a background different from another.
   ──────────────────────────────────────────────────────────────────────*/

/* Base page background — always from GlobalSettings / design token */
html, body {
  background-color: var(--bg-page) !important;
}

/* All card/panel surfaces */
.card, .erp-card, .settings-section-card,
.erp-table-wrapper, .erp-panel,
.modal-content, .offcanvas {
  background: var(--bg-card) !important;
  color: var(--tx1) !important;
  border-color: var(--border) !important;
}

/* Muted surfaces (headers of cards, sub-panels) */
.card-header, .erp-card-header,
.modal-header, .modal-footer,
.offcanvas-header {
  background: var(--bg-muted) !important;
  border-color: var(--border) !important;
  color: var(--tx1) !important;
}

/* Any inline hardcoded blue gradient headers in child dashboards —
   replaced with primary-color gradient to follow GlobalSettings */
[style*="background:linear-gradient(135deg,#1e40af"],
[style*="background: linear-gradient(135deg,#1e40af"],
[style*="background:linear-gradient(135deg, #1e40af"] {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 70%, #000 30%),
    var(--primary-color)
  ) !important;
}

/* ── Dark mode: comprehensive surface overrides ── */
[data-theme="dark"] html,
[data-theme="dark"] body {
  background-color: var(--bg-page) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .erp-card,
[data-theme="dark"] .settings-section-card,
[data-theme="dark"] .erp-table-wrapper,
[data-theme="dark"] .erp-panel,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .nav-pills .nav-link {
  background: var(--bg-card) !important;
  color: var(--tx1) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .erp-card-header,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .offcanvas-header,
[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .tab-content {
  background: var(--bg-muted) !important;
  border-color: var(--border) !important;
  color: var(--tx1) !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-pills .nav-link.active {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* ── Analytics Dashboard .db and .kcard dark mode ── */
[data-theme="dark"] .db,
[data-theme="dark"] .cbox,
[data-theme="dark"] .dkpi,
[data-theme="dark"] .df,
[data-theme="dark"] .alerts-panel,
[data-theme="dark"] .br-tile {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--tx1) !important;
}
[data-theme="dark"] .kcard {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .kcard:hover {
  background: var(--bg-muted) !important;
}
[data-theme="dark"] .krow {
  border-color: var(--border) !important;
}

/* ── Invoice / billing tables dark mode ── */
[data-theme="dark"] .invoice-table,
[data-theme="dark"] .billing-table,
[data-theme="dark"] .erp-invoice-wrapper {
  background: var(--bg-card) !important;
  color: var(--tx1) !important;
}
[data-theme="dark"] .invoice-header,
[data-theme="dark"] .billing-header {
  background: var(--bg-muted) !important;
  color: var(--tx1) !important;
}

/* ── Settings pages dark mode ── */
[data-theme="dark"] .section-header {
  background: var(--bg-muted) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .section-body {
  background: var(--bg-card) !important;
  color: var(--tx1) !important;
}
[data-theme="dark"] .signatures-table thead {
  background: var(--bg-muted) !important;
}
[data-theme="dark"] .signatures-table tbody td {
  background: var(--bg-card) !important;
  color: var(--tx1) !important;
  border-color: var(--border) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   P09-A. UNIFIED PAGINATION BAR
   Matches target design: [View 5▼] [|◀] [◀] [2] [1] [▶] [|▶]  [Page _/N]
   ──────────────────────────────────────────────────────────────────────*/
.erp-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ── Per-page selector ── */
.erp-pg-perpage {
  display: flex;
  align-items: center;
  gap: 6px;
}
.erp-pg-label {
  font-size: 12px;
  color: var(--tx3);
  font-weight: 500;
  white-space: nowrap;
}
.erp-pg-select {
  background: var(--bg-muted);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--tx1);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color .15s;
  min-width: 52px;
}
.erp-pg-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* ── Navigation buttons ── */
.erp-pg-nav {
  display: flex;
  align-items: center;
  gap: 3px;
}
.erp-pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
a.erp-pg-btn:hover {
  background: var(--accent-s);
  color: var(--primary-color);
  border-color: var(--primary-color);
  text-decoration: none;
}
.erp-pg-btn.erp-pg-active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  cursor: default;
  font-weight: 700;
}
.erp-pg-btn.disabled,
.erp-pg-btn.erp-pg-ellipsis {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* ── Go-to page input ── */
.erp-pg-goto {
  display: flex;
  align-items: center;
  gap: 6px;
}
.erp-pg-input {
  width: 52px;
  height: 32px;
  padding: 0 6px;
  border-radius: 7px;
  border: 1px solid var(--border2);
  background: var(--bg-muted);
  color: var(--tx1);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transition: border-color .15s;
  -moz-appearance: textfield;
}
.erp-pg-input::-webkit-outer-spin-button,
.erp-pg-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.erp-pg-input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: var(--bg-card);
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .erp-pagination-bar {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="dark"] .erp-pg-btn {
  background: var(--bg-muted);
  border-color: var(--border);
  color: var(--tx2);
}
[data-theme="dark"] a.erp-pg-btn:hover {
  background: var(--bg-card);
  color: var(--primary-color);
  border-color: var(--primary-color);
}
[data-theme="dark"] .erp-pg-select,
[data-theme="dark"] .erp-pg-input {
  background: var(--bg-muted);
  border-color: var(--border2);
  color: var(--tx1);
}

/* ──────────────────────────────────────────────────────────────────────
   P09-B. TABLE HEADER TEXT VISIBILITY FIX
   .table-light in dark mode renders as very-light text on light bg
   We force thead to always use design system tokens
   ──────────────────────────────────────────────────────────────────────*/
.table thead th,
.table thead td {
  color: var(--tx2) !important;
  background: var(--bg-muted) !important;
  border-color: var(--border2) !important;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table thead .text-dark,
.table thead a.text-dark,
.table thead a {
  color: var(--tx2) !important;
  text-decoration: none;
}
.table thead a:hover {
  color: var(--primary-color) !important;
}
/* Bootstrap's .table-light class hard-sets vars — override them */
.table-light {
  --bs-table-bg: var(--bg-muted) !important;
  --bs-table-color: var(--tx2) !important;
  --bs-table-border-color: var(--border2) !important;
}
[data-theme="dark"] .table-light {
  --bs-table-bg: var(--bg-muted) !important;
  --bs-table-color: var(--tx2) !important;
  --bs-table-border-color: var(--border) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   P09-C. GLOBAL TEXT COLOUR UNIFICATION — dark mode text always visible
   Any element using hardcoded dark colours must be overridden in dark mode
   ──────────────────────────────────────────────────────────────────────*/

/* Body text */
[data-theme="dark"] body,
[data-theme="dark"] .erp-content,
[data-theme="dark"] .erp-content * {
  color: var(--tx1);
}

/* Headings */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: var(--tx1) !important;
}

/* Text utilities Bootstrap */
[data-theme="dark"] .text-dark  { color: var(--tx1) !important; }
[data-theme="dark"] .text-muted { color: var(--tx3) !important; }
[data-theme="dark"] .text-body  { color: var(--tx1) !important; }
[data-theme="dark"] .text-secondary { color: var(--tx2) !important; }
[data-theme="dark"] .fw-bold, [data-theme="dark"] .fw-semibold { color: inherit; }

/* Links */
[data-theme="dark"] a:not(.btn):not(.page-link):not(.nav-link):not(.erp-pg-btn) {
  color: var(--primary-color);
}
[data-theme="dark"] a:not(.btn):hover {
  color: color-mix(in srgb, var(--primary-color) 80%, #fff 20%);
}

/* Unified dashboard specific — .ud-shell and its children */
[data-theme="dark"] .ud-shell,
[data-theme="dark"] .ud-main,
[data-theme="dark"] .ud-sidebar,
[data-theme="dark"] .ud-filter-bar {
  background: var(--bg-page) !important;
  color: var(--tx1) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .ud-section,
[data-theme="dark"] .ud-card,
[data-theme="dark"] .ud-widget,
[data-theme="dark"] .ud-table-wrap {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--tx1) !important;
}
[data-theme="dark"] .ud-section-title,
[data-theme="dark"] .ud-widget-title,
[data-theme="dark"] .ud-hdr-inner h2,
[data-theme="dark"] .ud-greeting {
  color: var(--tx1) !important;
}
/* ud-hdr stays dark-branded (primary-color bg) — text stays white */
[data-theme="dark"] .ud-hdr { background: color-mix(in srgb, var(--primary-color) 25%, #000 75%) !important; }
[data-theme="dark"] .ud-hdr *:not(.ud-scope-badge):not(.ud-avatar) { color: rgba(255,255,255,.9); }

/* Filter bar inputs */
[data-theme="dark"] .ud-date-input,
[data-theme="dark"] .ud-branch-select,
[data-theme="dark"] .ud-quick-btn {
  background: var(--bg-muted) !important;
  border-color: var(--border2) !important;
  color: var(--tx1) !important;
}
[data-theme="dark"] .ud-quick-btn:hover,
[data-theme="dark"] .ud-quick-btn.active {
  background: var(--primary-color) !important;
  color: #fff !important;
}
/* Badges inside widgets */
[data-theme="dark"] .badge-green,
[data-theme="dark"] .badge-amber,
[data-theme="dark"] .badge-blue,
[data-theme="dark"] .badge-gray,
[data-theme="dark"] .badge-red { opacity: .9; }

/* ──────────────────────────────────────────────────────────────────────
   23. SCROLLBAR GLOBAL
   ──────────────────────────────────────────────────────────────────────*/
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx3); }

/* ──────────────────────────────────────────────────────────────────────
   23. TRANSITIONS (global smooth dark/light switch)
   ──────────────────────────────────────────────────────────────────────*/
.card, .card-header, .card-body,
.erp-topbar, .erp-footer, .erp-content,
.table, .table td, .table th, .table thead th,
.form-control, .form-select,
.dropdown-menu, .dropdown-item,
.modal-content, .modal-header,
.erp-filter-card, .erp-filter-header, .erp-filter-body {
  transition: background .25s, border-color .25s, color .25s;
}

/* ──────────────────────────────────────────────────────────────────────
   24. RESPONSIVE / MOBILE
   ──────────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Sidebar slides in as a drawer */
  .erp-sidebar {
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1), width .22s;
    width: var(--sidebar-w) !important;
  }
  .erp-sidebar.mobile-open {
    transform: translateX(0);
  }
  .erp-sidebar-overlay { display: block; pointer-events: none; }
  .erp-sidebar-overlay.active { pointer-events: auto; }

  /* Toggle button hidden on mobile */
  .erp-sidebar-toggle { display: none; }

  /* Labels and submenu text always visible in mobile drawer */
  .erp-sidebar.mobile-open .nav-label,
  .erp-sidebar.mobile-open .sub-label,
  .erp-sidebar.mobile-open .erp-sidebar-logo-text,
  .erp-sidebar.mobile-open .erp-sidebar-section-label {
    opacity: 1;
    max-width: 200px;
    max-height: 32px;
  }

  /* No left margin on mobile — sidebar is overlay */
  .erp-main { margin-left: 0 !important; }

  /* Show mobile menu button */
  .erp-mobile-menu-btn { display: flex !important; }

  /* Adjust content padding */
  .erp-content { padding: 16px; }
  #erp-toast-wrap { right: 10px; left: 10px; max-width: none; }
}

@media (max-width: 480px) {
  .erp-topbar-title { font-size: 13px; }
  .erp-page-toolbar { gap: 10px; }
  .erp-page-toolbar-title h1,
  .erp-page-toolbar-title h2 { font-size: 16px; }
}

/* ──────────────────────────────────────────────────────────────────────
   25. PRINT
   ──────────────────────────────────────────────────────────────────────*/
@media print {
  .erp-sidebar,
  .erp-topbar,
  .erp-sidebar-overlay,
  #erp-toast-wrap,
  #pwa-banner,
  .erp-page-toolbar-actions { display: none !important; }
  .erp-main { margin-left: 0 !important; }
  .erp-content { padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   P02 FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* Fix: branch pill icon always visible in collapsed state */
.erp-branch-pill > div {
  min-width: 0;
}
.erp-sidebar:not(.expanded) .erp-branch-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
}
.erp-sidebar:not(.expanded) .erp-branch-pill > div {
  justify-content: center;
}
.erp-sidebar:not(.expanded) .erp-branch-pill .fa-chevron-down {
  display: none;
}

/* Fix: topbar toggle button always visible */
.erp-theme-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--tx2);
  cursor: pointer;
  font-size: 15px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.erp-theme-toggle:hover {
  background: var(--accent-s);
  color: var(--primary-color);
}

/* Fix: active submenu link highlight */
.erp-sidebar-submenu a.active {
  background: var(--sidebar-item-active);
  color: #fff;
  border-left: 3px solid var(--primary-color);
}

/* Fix: keep submenu link highlight on current page via URL match */
.erp-sidebar-submenu a:is(:focus-visible) {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   P03 — PUBLIC PAGES (login, password reset, patient registration)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Public topbar (no sidebar) ── */
.erp-topbar.public-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--hdr-h);
  background: var(--primary-color);
  border-bottom: 3px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.erp-topbar.public-topbar .erp-topbar-brand {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.erp-topbar.public-topbar .erp-topbar-brand img {
  max-height: 32px;
}
.erp-topbar.public-topbar .erp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.erp-topbar.public-topbar .erp-btn-login {
  padding: 6px 16px;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
}
.erp-topbar.public-topbar .erp-btn-login:hover {
  background: rgba(255,255,255,.28);
  color: #fff;
}
.erp-topbar.public-topbar .erp-theme-toggle {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.2);
}

/* ── Glass login page ── */
.erp-login-page {
  min-height: calc(100vh - var(--hdr-h));
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary-color) 70%, #000 30%) 0%,
    var(--primary-color) 45%,
    color-mix(in srgb, var(--primary-color) 80%, #fff 20%) 75%,
    color-mix(in srgb, var(--border-color) 70%, #000 30%) 100%
  );
  position: relative;
  overflow: hidden;
  padding: 2rem 1rem;
}
.erp-login-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .40;
  pointer-events: none;
}
.erp-login-blob-1 {
  width: 400px; height: 400px;
  background: var(--primary-color);
  top: -120px; left: -100px;
  animation: erp-blob-float 9s ease-in-out infinite;
}
.erp-login-blob-2 {
  width: 320px; height: 320px;
  background: var(--border-color);
  bottom: -80px; right: -80px;
  animation: erp-blob-float 9s ease-in-out 3s infinite;
}
.erp-login-blob-3 {
  width: 260px; height: 260px;
  background: color-mix(in srgb, var(--primary-color) 60%, #fff 40%);
  top: 40%; left: 60%;
  animation: erp-blob-float 9s ease-in-out 6s infinite;
}
@keyframes erp-blob-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-25px) scale(1.06); }
}
.erp-login-card {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 400px;
  background: rgba(255,255,255,.11);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 25px 50px rgba(0,0,0,.35);
  text-align: center;
}
.erp-login-logo-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: .4rem;
}
.erp-login-title {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin: .4rem 0 1.5rem;
}
.erp-login-field {
  position: relative;
  margin-bottom: 1rem;
  text-align: left;
}
.erp-login-field-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.55);
  font-size: .85rem;
  pointer-events: none;
}
.erp-login-input {
  width: 100%;
  padding: .65rem 1rem .65rem 2.5rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  color: #fff;
  font-size: .9rem;
  outline: none;
  transition: border .2s, background .2s;
}
.erp-login-input::placeholder { color: rgba(255,255,255,.45); }
.erp-login-input:focus {
  border-color: color-mix(in srgb, var(--border-color) 80%, transparent 20%);
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-color) 25%, transparent 75%);
}
.erp-login-btn {
  width: 100%;
  padding: .72rem;
  margin-top: .5rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 80%, #000 20%),
    var(--border-color)
  );
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
}
.erp-login-btn:hover  { opacity: .88; }
.erp-login-btn:active { transform: scale(.98); }
.erp-login-alert-err {
  border-radius: 10px; padding: .6rem 1rem; margin-bottom: 1rem;
  font-size: .85rem; text-align: left;
  background: rgba(220,53,69,.25); border: 1px solid rgba(220,53,69,.4); color: #ffb3b3;
}
.erp-login-links {
  margin-top: 1.25rem; font-size: .82rem;
}
.erp-login-links a {
  color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s;
}
.erp-login-links a:hover { color: var(--border-color); }
.erp-login-divider { margin: 0 .5rem; color: rgba(255,255,255,.3); }

/* ── Public form pages (password reset, patient registration) ── */
.erp-public-page {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary-color) 70%, #000 30%) 0%,
    var(--primary-color) 45%,
    color-mix(in srgb, var(--primary-color) 80%, #fff 20%) 75%,
    color-mix(in srgb, var(--border-color) 70%, #000 30%) 100%
  );
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.erp-public-card {
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.erp-public-card.wide { max-width: 760px; }
.erp-public-card-header {
  background: var(--primary-color);
  color: #fff;
  padding: 1.5rem 2rem;
  text-align: center;
  border-bottom: 3px solid var(--border-color);
}
.erp-public-card-header h3, .erp-public-card-header h4 {
  margin: 0; font-weight: 700; color: #fff;
}
.erp-public-card-header p {
  margin: .3rem 0 0; opacity: .8; font-size: 13px; color: rgba(255,255,255,.8);
}
.erp-public-card-body {
  padding: 2rem;
  background: var(--bg-card);
}
.erp-public-footer {
  background: var(--primary-color);
  color: rgba(255,255,255,.6);
  text-align: center;
  padding: 10px;
  font-size: 12px;
  border-top: 2px solid var(--border-color);
}

/* ══════════════════════════════════════════════════════════════════════
   P05 — Button Unification + Branch Fix + Footer Fix
   Applied: 2026-06-10
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. UNIFIED PRIMARY BUTTON — same gradient as login btn
      Applies to: .erp-btn-primary  AND  .btn-primary  AND  input[type=submit]
      Auto-inherits --primary-color & --border-color from GlobalSettings
   ─────────────────────────────────────────────────────────────────────*/
.erp-btn-primary,
.btn-primary,
.erp-login-btn,
button[type="submit"].btn,
input[type="submit"] {
  background: var(--primary-color) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: var(--r-md) !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  transition: opacity .2s, transform .1s, box-shadow .2s !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--border-color) 30%, transparent) !important;
}
.erp-btn-primary:hover,
.btn-primary:hover,
.btn-primary:focus,
button[type="submit"].btn:hover,
input[type="submit"]:hover {
  opacity: .88 !important;
  color: #fff !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--border-color) 40%, transparent) !important;
}
.erp-btn-primary:active,
.btn-primary:active {
  transform: scale(.98) !important;
  opacity: .82 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   3. FORM INPUTS — unified (bg-card, branded focus ring)
   ─────────────────────────────────────────────────────────────────────*/
.form-control,
.form-select {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border2) !important;
  border-radius: var(--r-md) !important;
  color: var(--tx1) !important;
  font-size: 14px !important;
  padding: .46rem .75rem !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.form-control:focus,
.form-select:focus {
  background: var(--bg-card) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
  color: var(--tx1) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--tx3) !important; }
.form-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx2) !important;
  margin-bottom: .3rem !important;
}
textarea.form-control { resize: vertical; min-height: 80px; }
.form-control:disabled,.form-select:disabled {
  background: var(--bg-muted) !important;
  color: var(--tx3) !important;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: var(--surface) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   4. LOGIN FOOTER — always visible below card (not hidden by overflow)
   ─────────────────────────────────────────────────────────────────────*/
.erp-login-page {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  overflow: visible !important;
  padding: 2rem 1rem !important;
  box-sizing: border-box !important;
}
html:has(.erp-login-page),
body:has(.erp-login-page) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 100vh !important;
}
/* Blobs behind everything */
.erp-login-blob {
  position: fixed !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.erp-login-card { position: relative; z-index: 1; }
/* Footer inside login page sits below card */
.erp-login-page .erp-public-footer {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 420px !important;
  border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
  margin-top: -4px !important;
}
/* Standalone footer (password reset, public booking) */
body > .erp-public-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
}

/* ─────────────────────────────────────────────────────────────────────
   5. PUBLIC TOPBAR — hide dark mode toggle, style login btn
   ─────────────────────────────────────────────────────────────────────*/
.public-topbar .erp-theme-toggle { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   6. BRANCH DROPDOWN — Bootstrap 5 fix (needs dropdown-toggle on trigger)
   ─────────────────────────────────────────────────────────────────────*/
.erp-branch-pill .dropdown-toggle::after { display: none; }  /* hide BS caret */

/* ─────────────────────────────────────────────────────────────────────
   7. ALERTS — design system tokens
   ─────────────────────────────────────────────────────────────────────*/
.alert-success { background:var(--green-s)  !important; border-color:var(--success) !important; color:var(--success) !important; }
.alert-danger  { background:var(--red-s)    !important; border-color:var(--red)     !important; color:var(--red)     !important; }
.alert-warning { background:var(--amber-s)  !important; border-color:var(--amber)   !important; color:var(--amber)   !important; }
.alert-info    { background:var(--accent-s) !important; border-color:var(--blue)    !important; color:var(--blue)    !important; }
[data-theme="dark"] .alert-success { background: rgba(22,163,74,.15)  !important; }
[data-theme="dark"] .alert-danger  { background: rgba(220,38,38,.15)  !important; }
[data-theme="dark"] .alert-warning { background: rgba(217,119,6,.15)  !important; }
[data-theme="dark"] .alert-info    { background: rgba(37,99,235,.15)  !important; }

/* ══════════════════════════════════════════════════════════════════════
   P09 — Template Fixes: Pagination · Tables · Dark Mode Completion
   Applied: 2026-06-10
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   P09-D. PAGINATION INFO + RIGHT CLUSTER
   ─────────────────────────────────────────────────────────────────────*/
.erp-pg-info {
  font-size: 12px;
  color: var(--tx3);
  white-space: nowrap;
}
.erp-pg-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
[data-theme="dark"] .erp-pg-info { color: var(--tx3); }

/* ─────────────────────────────────────────────────────────────────────
   P09-E. CARD-FOOTER BG-WHITE OVERRIDE — dark mode
   Bootstrap's .bg-white hardcodes white; override in dark mode
   ─────────────────────────────────────────────────────────────────────*/
[data-theme="dark"] .card-footer,
[data-theme="dark"] .card-footer.bg-white,
[data-theme="dark"] .bg-white {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--tx1) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   P09-F. BOOKING / SESSION HEADER ROW — dark mode
   These are the grouped booking rows in session_list.html
   ─────────────────────────────────────────────────────────────────────*/
[data-theme="dark"] .booking-header-row td {
  background: var(--bg-muted) !important;
  border-top-color: var(--border2) !important;
  border-bottom-color: var(--border) !important;
  color: var(--tx1) !important;
}
[data-theme="dark"] .booking-header-row:hover td {
  background: var(--accent-s) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   P09-G. TABLE PATIENT NAME / SORT LINKS — always readable
   Applies to sort-link anchors inside thead (booking_list, session_list)
   ─────────────────────────────────────────────────────────────────────*/
.table thead th a,
.table thead th a:visited {
  color: var(--tx2) !important;
  text-decoration: none !important;
}
.table thead th a:hover {
  color: var(--primary-color) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   P09-H. ERPTABLE CARD HEADER — dark bg compatible
   ─────────────────────────────────────────────────────────────────────*/
.erp-table-header {
  background: var(--bg-muted) !important;
  border-color: var(--border) !important;
  color: var(--tx1) !important;
}
[data-theme="dark"] .erp-table-header {
  background: var(--bg-muted) !important;
  color: var(--tx1) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   P09-I. UNIFIED DASHBOARD DARK MODE — additional surfaces
   Covers elements that use --text-* vars (now inherited from design sys)
   ─────────────────────────────────────────────────────────────────────*/

/* ud-table cells */
[data-theme="dark"] .ud-table td {
  color: var(--tx1) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .ud-table tr:hover td {
  background: var(--bg-muted) !important;
}
[data-theme="dark"] .ud-table th {
  background: var(--bg-muted) !important;
  color: var(--tx3) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .ud-table-hdr {
  color: var(--tx2) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .ud-table-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* ud-kpi cards */
[data-theme="dark"] .ud-kpi {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .ud-kpi-label { color: var(--tx3) !important; }
[data-theme="dark"] .ud-kpi-value { color: var(--tx1) !important; }
[data-theme="dark"] .ud-kpi-sub   { color: var(--tx3) !important; }

/* ud-chart cards */
[data-theme="dark"] .ud-chart-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .ud-chart-title { color: var(--tx2) !important; }

/* ud-page titles */
[data-theme="dark"] .ud-page-title  { color: var(--tx1) !important; }
[data-theme="dark"] .ud-page-sub    { color: var(--tx3) !important; }
[data-theme="dark"] .ud-page-hdr    { border-color: var(--border) !important; }

/* ud navigation */
[data-theme="dark"] .ud-nav         { background: var(--bg-muted) !important; border-color: var(--border) !important; }
[data-theme="dark"] .ud-nav-item    { color: var(--tx2) !important; }
[data-theme="dark"] .ud-nav-item:hover { background: var(--bg-card) !important; color: var(--tx1) !important; }
[data-theme="dark"] .ud-nav-item.active { color: var(--primary-color) !important; }

/* ud filter bar */
[data-theme="dark"] .ud-filter-bar  { background: var(--bg-muted) !important; border-color: var(--border) !important; }
[data-theme="dark"] .ud-filter-label { color: var(--tx3) !important; }
[data-theme="dark"] .ud-period-btn  { background: var(--bg-card) !important; color: var(--tx2) !important; border-color: var(--border) !important; }
[data-theme="dark"] .ud-period-btn.active { background: var(--primary-color) !important; color: #fff !important; }

/* ud branch tabs */
[data-theme="dark"] .ud-branch-tabs { background: var(--bg-muted) !important; border-color: var(--border) !important; }
[data-theme="dark"] .ud-branch-tab  { color: var(--tx2) !important; border-color: transparent !important; }
[data-theme="dark"] .ud-branch-tab.active { color: var(--primary-color) !important; border-color: var(--primary-color) !important; }

/* ud pending alerts */
[data-theme="dark"] .ud-alert        { border-color: var(--border) !important; }
[data-theme="dark"] .ud-alert.warn   { background: var(--amber-s) !important; }
[data-theme="dark"] .ud-alert.info   { background: var(--accent-s) !important; }

/* ─────────────────────────────────────────────────────────────────────
   P09-J. GLOBAL CATCH-ALL — any remaining light-bg elements in dark mode
   ─────────────────────────────────────────────────────────────────────*/

/* Any element with inline bg-white Bootstrap class */
[data-theme="dark"] [class*="bg-white"]:not(img):not(svg) {
  background-color: var(--bg-card) !important;
}

/* "Good day" greeting and all headings in dark mode */
[data-theme="dark"] .ud-welcome,
[data-theme="dark"] .greeting,
[data-theme="dark"] .good-day {
  color: var(--tx1) !important;
}

/* Text-dark used throughout as a fallback */
[data-theme="dark"] .text-dark {
  color: var(--tx1) !important;
}

/* Small / muted text */
[data-theme="dark"] small,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
  color: var(--tx3) !important;
}

/* Inline fw-bold shouldn't lose visibility */
[data-theme="dark"] .fw-bold,
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────
   P09-K. BRANCH BADGE + MISC UTILITY OVERRIDES
   ─────────────────────────────────────────────────────────────────────*/
.erp-branch-badge {
  background: var(--bg-muted) !important;
  color: var(--tx2) !important;
  border-color: var(--border2) !important;
}
[data-theme="dark"] .erp-branch-badge {
  background: var(--bg-muted) !important;
  color: var(--tx1) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .bg-light { background-color: var(--bg-muted) !important; }

/* ╔══════════════════════════════════════════════════════════╗
   ║  DARK MODE PATCH — 2026-06-10                           ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Login Page Dark */
[data-theme="dark"] .erp-login-fullpage {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 30%, #000 70%) 0%,
    color-mix(in srgb, var(--primary-color) 20%, #0b1120 80%) 45%,
    #0b1120 100%) !important;
}
[data-theme="dark"] .erp-login-card {
  background: rgba(22,32,50,0.88) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .erp-login-card-footer {
  background: color-mix(in srgb, var(--primary-color) 25%, #000 75%) !important;
}
[data-theme="dark"] .erp-login-input {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] .erp-login-input:focus {
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* Public Pages Dark */
[data-theme="dark"] .erp-public-page {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary-color) 30%, #000 70%) 0%,
    color-mix(in srgb, var(--primary-color) 20%, #0b1120 80%) 45%,
    #0b1120 100%
  ) !important;
}
[data-theme="dark"] .erp-public-card    { background: var(--bg-card) !important; border-color: var(--border) !important; }
[data-theme="dark"] .erp-public-card-header {
  background: color-mix(in srgb, var(--primary-color) 20%, var(--bg-card) 80%) !important;
  color: var(--tx1) !important;
}
[data-theme="dark"] .erp-public-card-header h4,
[data-theme="dark"] .erp-public-card-header p { color: var(--tx1) !important; }
[data-theme="dark"] .erp-public-card-body { background: var(--bg-card) !important; color: var(--tx1) !important; }
[data-theme="dark"] .erp-public-footer {
  background: color-mix(in srgb, var(--primary-color) 20%, #000 80%) !important;
  color: rgba(255,255,255,.6) !important;
}
[data-theme="dark"] .erp-topbar.public-topbar,
[data-theme="dark"] .public-topbar {
  background: color-mix(in srgb, var(--primary-color) 20%, #0b1120 80%) !important;
  border-bottom-color: var(--border) !important;
}

/* Filter Cards Dark */
[data-theme="dark"] .erp-filter-card    { background: var(--bg-card) !important; border-color: var(--border) !important; }
[data-theme="dark"] .erp-filter-header  { background: var(--bg-muted) !important; color: var(--tx2) !important; border-bottom-color: var(--border) !important; }
[data-theme="dark"] .erp-filter-body    { background: var(--bg-card) !important; }
[data-theme="dark"] .erp-filter-label   { color: var(--tx3) !important; }
[data-theme="dark"] .erp-filter-input,
[data-theme="dark"] .erp-filter-select  { background: var(--bg-muted) !important; color: var(--tx1) !important; border-color: var(--border) !important; }
[data-theme="dark"] .erp-filter-input::placeholder { color: var(--tx3) !important; }

/* Table Header Dark */
[data-theme="dark"] .erp-table-header   { background: var(--bg-muted) !important; border-bottom-color: var(--border) !important; color: var(--tx1) !important; }

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select        { background-color: var(--bg-muted) !important; color: var(--tx1) !important; border-color: var(--border) !important; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus  { background-color: var(--surface2) !important; border-color: var(--primary-color) !important; color: var(--tx1) !important; }
[data-theme="dark"] .form-control::placeholder { color: var(--tx3) !important; }

/* Badges */
[data-theme="dark"] .badge.bg-light     { background: var(--bg-muted) !important; color: var(--tx1) !important; }
[data-theme="dark"] .badge.text-dark    { color: var(--tx1) !important; }

/* Alerts */
[data-theme="dark"] .alert-danger  { background: var(--red-s) !important; color: #fca5a5 !important; }
[data-theme="dark"] .alert-success { background: var(--green-s) !important; color: #86efac !important; }
[data-theme="dark"] .alert-warning { background: var(--amber-s) !important; color: #fcd34d !important; }
[data-theme="dark"] .alert-info    { background: var(--teal-s) !important; color: #67e8f9 !important; }

/* Pagination */
[data-theme="dark"] .pagination .page-link                    { background: var(--bg-card) !important; border-color: var(--border) !important; color: var(--tx2) !important; }
[data-theme="dark"] .pagination .page-item.active .page-link  { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; }
[data-theme="dark"] .pagination .page-link:hover              { background: var(--bg-muted) !important; color: var(--tx1) !important; }
[data-theme="dark"] .pagination .page-item.disabled .page-link{ background: var(--bg-muted) !important; color: var(--tx3) !important; }

/* Progress */
[data-theme="dark"] .progress { background: var(--bg-muted) !important; }
/* END DARK MODE PATCH 20260610 */

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL TEXT COLOR UNIFICATION  —  Dark Mode
   Forces ALL hardcoded light-mode text colors → theme-aware vars.
   Covers every template: dashboard, therapy_ops, analytics, hr, billing.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Universal inheritance base ── */
[data-theme="dark"] body,
[data-theme="dark"] .erp-main,
[data-theme="dark"] .erp-shell {
  color: var(--tx1);
}

/* ── 2. Inline style overrides via attribute selector
        These catch style="color:#111827" etc. directly in HTML ── */

/* Near-black / very dark  →  primary text */
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#1a1a2e"],
[data-theme="dark"] [style*="color: #1a1a2e"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#185FA5"],
[data-theme="dark"] [style*="color: #185FA5"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#343a40"],
[data-theme="dark"] [style*="color: #343a40"],
[data-theme="dark"] [style*="color:#1d4ed8"],
[data-theme="dark"] [style*="color: #1d4ed8"] { color: var(--tx1) !important; }

/* Dark gray  →  primary/secondary text */
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"],
[data-theme="dark"] [style*="color:#444"],
[data-theme="dark"] [style*="color: #444"] { color: var(--tx1) !important; }

/* Medium gray  →  secondary text */
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6c757d"],
[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #475569"] { color: var(--tx2) !important; }

/* Light gray (muted)  →  muted text */
[data-theme="dark"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="color: #9ca3af"],
[data-theme="dark"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="color: #94a3b8"],
[data-theme="dark"] [style*="color:#adb5bd"],
[data-theme="dark"] [style*="color: #adb5bd"],
[data-theme="dark"] [style*="color:#aaa"],
[data-theme="dark"] [style*="color: #aaa"],
[data-theme="dark"] [style*="color:#999"],
[data-theme="dark"] [style*="color: #999"],
[data-theme="dark"] [style*="color:#e2e8f0"],
[data-theme="dark"] [style*="color: #e2e8f0"] { color: var(--tx3) !important; }

/* ── 3. Common CSS class text colors in inline <style> blocks
        These catch .class { color: #xxx } patterns that cascade
        from inline styles in templates ── */

/* Headings and labels that use hardcoded dark colors */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--tx1);
}

/* p, span, td, th, label that haven't been explicitly colored */
[data-theme="dark"] p:not([class]),
[data-theme="dark"] label { color: var(--tx1); }

/* Small / caption text */
[data-theme="dark"] small,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary { color: var(--tx2) !important; }

/* Bootstrap text utilities — override for dark mode */
[data-theme="dark"] .text-dark    { color: var(--tx1) !important; }
[data-theme="dark"] .text-body    { color: var(--tx1) !important; }
[data-theme="dark"] .text-black   { color: var(--tx1) !important; }
[data-theme="dark"] .text-white   { color: #fff !important; }        /* keep white as-is */

/* ── 4. Card / section title text ── */
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-subtitle,
[data-theme="dark"] .card-text     { color: var(--tx1); }
[data-theme="dark"] .card-header   { color: var(--tx1); background: var(--bg-muted); border-color: var(--border); }

/* ── 5. Form labels and inputs ── */
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-text,
[data-theme="dark"] .col-form-label { color: var(--tx1); }

/* ── 6. List group items ── */
[data-theme="dark"] .list-group-item {
  background: var(--bg-card);
  color: var(--tx1);
  border-color: var(--border);
}

/* ── 7. Nav tabs text ── */
[data-theme="dark"] .nav-link       { color: var(--tx2); }
[data-theme="dark"] .nav-link:hover { color: var(--tx1); }
[data-theme="dark"] .nav-link.active{ color: var(--primary-color) !important; }

/* ── 8. Breadcrumb ── */
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a { color: var(--tx2); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--tx3); }

/* ── 9. Report/print pages (therapy_ops, accounting_fin) ──
        These often have inline style="color:#xxx" on <td>/<th> ── */
[data-theme="dark"] td,
[data-theme="dark"] th { color: var(--tx1); }

/* ── 10. Permissions UI specific ── */
[data-theme="dark"] .perm-label,
[data-theme="dark"] .perm-category,
[data-theme="dark"] .perm-module { color: var(--tx1); }

/* END GLOBAL TEXT COLOR UNIFICATION */

/* ══════════════════════════════════════════════════════════════════
   UNIFIED TEXT PATCH  —  Single source of truth for dark mode text
   Covers: primary-color as text, permissions_ui, session_report,
           booking_report, all inline <style> hardcoded colors
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. primary-color used as text → lighten in dark mode ── */
[data-theme="dark"] {
  --primary-color-text: color-mix(in srgb, var(--primary-color) 60%, #fff 40%);
}
[data-theme="dark"] [style*="color:var(--primary-color"],
[data-theme="dark"] [style*="color: var(--primary-color"] {
  color: var(--primary-color-text) !important;
}

/* ── 2. Attribute selectors — catch inline style="color:#xxx" ── */
/* Near-black → primary text */
[data-theme="dark"] [style*="color:#111827"],[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#1a1a2e"],[data-theme="dark"] [style*="color: #1a1a2e"],
[data-theme="dark"] [style*="color:#1e293b"],[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#222"],   [data-theme="dark"] [style*="color: #222"],
[data-theme="dark"] [style*="color:#333"],   [data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#343a40"],[data-theme="dark"] [style*="color: #343a40"],
[data-theme="dark"] [style*="color:#000"],   [data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:black"],  [data-theme="dark"] [style*="color: black"]
{ color: var(--tx1) !important; }

/* Dark gray → primary text */
[data-theme="dark"] [style*="color:#374151"],[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#4b5563"],[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#555"],   [data-theme="dark"] [style*="color: #555"],
[data-theme="dark"] [style*="color:#444"],   [data-theme="dark"] [style*="color: #444"]
{ color: var(--tx1) !important; }

/* Medium gray → secondary text */
[data-theme="dark"] [style*="color:#6b7280"],[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6c757d"],[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#64748b"],[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#475569"],[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#666"],   [data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#777"],   [data-theme="dark"] [style*="color: #777"]
{ color: var(--tx2) !important; }

/* Muted → tx3 */
[data-theme="dark"] [style*="color:#9ca3af"],[data-theme="dark"] [style*="color: #9ca3af"],
[data-theme="dark"] [style*="color:#94a3b8"],[data-theme="dark"] [style*="color: #94a3b8"],
[data-theme="dark"] [style*="color:#adb5bd"],[data-theme="dark"] [style*="color: #adb5bd"],
[data-theme="dark"] [style*="color:#aaa"],   [data-theme="dark"] [style*="color: #aaa"],
[data-theme="dark"] [style*="color:#999"],   [data-theme="dark"] [style*="color: #999"]
{ color: var(--tx3) !important; }

/* Blue hardcoded → lighten */
[data-theme="dark"] [style*="color:#1d4ed8"],[data-theme="dark"] [style*="color: #1d4ed8"],
[data-theme="dark"] [style*="color:#185fa5"],[data-theme="dark"] [style*="color: #185fa5"],
[data-theme="dark"] [style*="color:#185FA5"],[data-theme="dark"] [style*="color: #185FA5"],
[data-theme="dark"] [style*="color:#2563eb"],[data-theme="dark"] [style*="color: #2563eb"],
[data-theme="dark"] [style*="color:#1e40af"],[data-theme="dark"] [style*="color: #1e40af"],
[data-theme="dark"] [style*="color:#1d4ed8"],[data-theme="dark"] [style*="color: #1d4ed8"],
[data-theme="dark"] [style*="color:#003d99"],[data-theme="dark"] [style*="color: #003d99"],
[data-theme="dark"] [style*="color:#005eb8"],[data-theme="dark"] [style*="color: #005eb8"]
{ color: #60a5fa !important; }

/* ── 3. CSS class overrides (catch <style> blocks in templates) ── */

/* permissions_ui.html + permissions_ui_embed.html */
[data-theme="dark"] .role-btn          { color: var(--tx2) !important; }
[data-theme="dark"] .role-btn:hover    { color: var(--tx1) !important; }
[data-theme="dark"] .casc-connector    { color: var(--primary-color-text) !important; }
[data-theme="dark"] .col-header        { color: var(--tx3) !important; }
[data-theme="dark"] .casc-node         { color: var(--tx1) !important; }
[data-theme="dark"] .casc-node:hover   { color: var(--tx1) !important; }
[data-theme="dark"] .casc-hint         { color: var(--tx3) !important; }
[data-theme="dark"] .perm-chk          { color: var(--tx2) !important; }
[data-theme="dark"] .badge-count       { color: var(--tx1) !important; }

/* session_report.html */
[data-theme="dark"] .center-name       { color: var(--primary-color-text) !important; }
[data-theme="dark"] .report-title      { color: var(--tx1) !important; }
[data-theme="dark"] .header-right      { color: var(--tx2) !important; }
[data-theme="dark"] .brand-name        { color: var(--tx1) !important; }
[data-theme="dark"] .brand-sub         { color: var(--tx2) !important; }
[data-theme="dark"] .inv-word          { color: var(--tx2) !important; }
[data-theme="dark"] .inv-number        { color: #60a5fa !important; }
[data-theme="dark"] .inv-date          { color: var(--tx2) !important; }
[data-theme="dark"] .info-label        { color: var(--tx3) !important; }
[data-theme="dark"] .info-value        { color: var(--tx1) !important; }
[data-theme="dark"] .status-SCHEDULED  { color: #60a5fa !important; }
[data-theme="dark"] .status-IN_PROGRESS{ color: var(--amber) !important; }
[data-theme="dark"] .status-COMPLETED  { color: var(--green) !important; }
[data-theme="dark"] .status-LOCKED     { color: var(--tx3) !important; }
[data-theme="dark"] .service-chip      { color: #60a5fa !important; }
[data-theme="dark"] .report-footer     { color: var(--tx3) !important; }
[data-theme="dark"] .signatures-title  { color: var(--tx2) !important; }
[data-theme="dark"] .sig-label         { color: var(--tx1) !important; }

/* booking_report.html */
[data-theme="dark"] .rpt-label         { color: var(--tx3) !important; }
[data-theme="dark"] .rpt-value         { color: var(--tx1) !important; }
[data-theme="dark"] .rpt-section-title { color: var(--tx1) !important; }

/* evaluation_report.html */
[data-theme="dark"] .eval-label        { color: var(--tx3) !important; }
[data-theme="dark"] .eval-value        { color: var(--tx1) !important; }
[data-theme="dark"] .score-text        { color: var(--tx1) !important; }

/* add_session.html */
[data-theme="dark"] .session-form-label { color: var(--tx1) !important; }
[data-theme="dark"] .slot-time          { color: var(--tx1) !important; }

/* ── 4. Global element defaults ── */
[data-theme="dark"] td, [data-theme="dark"] th  { color: var(--tx1); }
[data-theme="dark"] h1,[data-theme="dark"] h2,
[data-theme="dark"] h3,[data-theme="dark"] h4,
[data-theme="dark"] h5,[data-theme="dark"] h6   { color: var(--tx1); }
[data-theme="dark"] label                        { color: var(--tx1); }
[data-theme="dark"] .text-muted                  { color: var(--tx2) !important; }
[data-theme="dark"] .text-secondary              { color: var(--tx2) !important; }
[data-theme="dark"] small                        { color: var(--tx2); }

/* ── 5. Links in content area (not sidebar/header) ── */
[data-theme="dark"] .erp-main a:not(.btn):not(.nav-link):not(.page-link) {
  color: #60a5fa;
}
[data-theme="dark"] .erp-main a:not(.btn):not(.nav-link):not(.page-link):hover {
  color: #93c5fd;
}

/* END UNIFIED TEXT PATCH */

/* ══════════════════════════════════════════════════════════════════
   UNIFIED DARK TEXT — FINAL
   توحيد كامل لألوان النصوص في الدارك مود
   يغطي: السايدبار + الجداول + القوائم + الفورم + كل شيء
   ══════════════════════════════════════════════════════════════════ */

/* ══ NUCLEAR RESET: كل نص في الدارك مود يبقى أبيض افتراضياً ══ */
[data-theme="dark"] * {
  color: inherit;
}

/* ══ 1. السايدبار — كل النصوص أبيض ══ */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .erp-sidebar,
[data-theme="dark"] nav.sidebar,
[data-theme="dark"] #sidebar,
[data-theme="dark"] .side-nav,
[data-theme="dark"] aside {
  color: #f1f5f9 !important;
}

/* قوائم السايدبار */
[data-theme="dark"] .sidebar a,
[data-theme="dark"] .erp-sidebar a,
[data-theme="dark"] .side-nav a,
[data-theme="dark"] aside a,
[data-theme="dark"] .nav-item a,
[data-theme="dark"] .sidebar .nav-link,
[data-theme="dark"] .sidebar-link,
[data-theme="dark"] .menu-item,
[data-theme="dark"] .menu-link {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .sidebar a:hover,
[data-theme="dark"] .erp-sidebar a:hover,
[data-theme="dark"] .sidebar .nav-link:hover,
[data-theme="dark"] .sidebar .nav-link.active,
[data-theme="dark"] .menu-link:hover,
[data-theme="dark"] .menu-link.active {
  color: #ffffff !important;
}

/* Section headers في السايدبار (OPERATIONS, FINANCE, HR) */
[data-theme="dark"] .sidebar-section,
[data-theme="dark"] .sidebar-section-title,
[data-theme="dark"] .nav-section-label,
[data-theme="dark"] .menu-section,
[data-theme="dark"] .sidebar .section-label,
[data-theme="dark"] .sidebar small,
[data-theme="dark"] .sidebar .text-uppercase,
[data-theme="dark"] .sidebar [class*="section"],
[data-theme="dark"] .sidebar [class*="category"],
[data-theme="dark"] .sidebar [class*="group"] {
  color: #94a3b8 !important;
}

/* أيقونات السايدبار */
[data-theme="dark"] .sidebar i,
[data-theme="dark"] .sidebar svg,
[data-theme="dark"] .erp-sidebar i,
[data-theme="dark"] .erp-sidebar svg {
  color: #cbd5e1 !important;
  fill: currentColor;
}

/* Bottom items: Light Mode, System Info, admin, Logout */
[data-theme="dark"] .sidebar-bottom a,
[data-theme="dark"] .sidebar-footer a,
[data-theme="dark"] .sidebar .bottom-links a,
[data-theme="dark"] .sidebar [class*="bottom"] a,
[data-theme="dark"] .sidebar [class*="footer"] a {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .sidebar .logout,
[data-theme="dark"] .sidebar [class*="logout"],
[data-theme="dark"] .sidebar a[href*="logout"] {
  color: #fca5a5 !important;
}

/* ══ 2. الجداول — كل النصوص واضحة ══ */
[data-theme="dark"] table,
[data-theme="dark"] .table {
  color: #f1f5f9 !important;
}

[data-theme="dark"] table th,
[data-theme="dark"] .table th,
[data-theme="dark"] thead th,
[data-theme="dark"] .table thead th {
  color: #f1f5f9 !important;
  background-color: var(--bg-muted, #1e2d42) !important;
}

[data-theme="dark"] table td,
[data-theme="dark"] .table td,
[data-theme="dark"] tbody td {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td,
[data-theme="dark"] .table-hover tbody tr:hover td {
  color: #f1f5f9 !important;
}

/* ══ 3. الفورم والـ Inputs ══ */
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .col-form-label {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color: #f1f5f9 !important;
  background-color: var(--bg-muted, #1e2d42) !important;
  border-color: var(--border, #3b6fa6) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #64748b !important;
}

/* ══ 4. الكروت والبانلات ══ */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-text {
  color: #f1f5f9 !important;
}

/* ══ 5. Dropdowns ══ */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-card, #162032) !important;
  border-color: var(--border, #3b6fa6) !important;
}

[data-theme="dark"] .dropdown-item {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .dropdown-item:hover {
  color: #ffffff !important;
  background-color: var(--bg-muted, #1e2d42) !important;
}

[data-theme="dark"] .dropdown-header {
  color: #94a3b8 !important;
}

/* ══ 6. Breadcrumb + Page headers ══ */
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a,
[data-theme="dark"] .breadcrumb-item.active {
  color: #94a3b8 !important;
}

[data-theme="dark"] .page-title,
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .page-header h2,
[data-theme="dark"] .page-header h3,
[data-theme="dark"] .erp-page-title {
  color: #f1f5f9 !important;
}

/* ══ 7. Search filters / filter bar ══ */
[data-theme="dark"] .filter-label,
[data-theme="dark"] .search-label,
[data-theme="dark"] .filter-bar label,
[data-theme="dark"] [class*="filter"] label,
[data-theme="dark"] [class*="search"] label {
  color: #94a3b8 !important;
}

/* ══ 8. Pagination ══ */
[data-theme="dark"] .page-link {
  color: #93c5fd !important;
  background-color: var(--bg-card, #162032) !important;
  border-color: var(--border, #3b6fa6) !important;
}

[data-theme="dark"] .page-item.active .page-link {
  color: #ffffff !important;
  background-color: var(--primary-color, #185fa5) !important;
}

[data-theme="dark"] .page-item.disabled .page-link {
  color: #475569 !important;
}

/* ══ 9. Tooltips + Popovers ══ */
[data-theme="dark"] .tooltip-inner {
  background-color: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .popover {
  background-color: var(--bg-card, #162032);
  border-color: var(--border, #3b6fa6);
}

[data-theme="dark"] .popover-header {
  color: #f1f5f9 !important;
  background-color: var(--bg-muted, #1e2d42) !important;
}

[data-theme="dark"] .popover-body {
  color: #e2e8f0 !important;
}

/* ══ 10. Alerts + Notices ══ */
[data-theme="dark"] .alert {
  color: #f1f5f9 !important;
}

/* ══ 11. Modals ══ */
[data-theme="dark"] .modal-content {
  background-color: var(--bg-card, #162032) !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--border, #3b6fa6) !important;
}

[data-theme="dark"] .modal-title {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ══ 12. Bootstrap utility overrides ══ */
[data-theme="dark"] .text-dark    { color: #f1f5f9 !important; }
[data-theme="dark"] .text-body    { color: #e2e8f0 !important; }
[data-theme="dark"] .text-muted   { color: #94a3b8 !important; }
[data-theme="dark"] .text-secondary { color: #94a3b8 !important; }
[data-theme="dark"] .text-black   { color: #f1f5f9 !important; }
[data-theme="dark"] .text-reset   { color: #f1f5f9 !important; }

/* ══ 13. Hardcoded inline style overrides (catch-all) ══ */
/* أسود وداكن جداً → أبيض */
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:#111"],
[data-theme="dark"] [style*="color: #111"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#1a1a2e"],
[data-theme="dark"] [style*="color: #1a1a2e"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#222"],
[data-theme="dark"] [style*="color: #222"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#343a40"],
[data-theme="dark"] [style*="color: #343a40"],
[data-theme="dark"] [style*="color:#212529"],
[data-theme="dark"] [style*="color: #212529"] {
  color: #f1f5f9 !important;
}

/* رمادي غامق → نص أساسي */
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"],
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color: #4b5563"],
[data-theme="dark"] [style*="color:#444"],
[data-theme="dark"] [style*="color: #444"],
[data-theme="dark"] [style*="color:#555"],
[data-theme="dark"] [style*="color: #555"] {
  color: #e2e8f0 !important;
}

/* رمادي متوسط → نص ثانوي */
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#6c757d"],
[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#777"],
[data-theme="dark"] [style*="color: #777"] {
  color: #94a3b8 !important;
}

/* أزرق داكن → أزرق فاتح */
[data-theme="dark"] [style*="color:#185fa5"],
[data-theme="dark"] [style*="color: #185fa5"],
[data-theme="dark"] [style*="color:#185FA5"],
[data-theme="dark"] [style*="color: #185FA5"],
[data-theme="dark"] [style*="color:#1d4ed8"],
[data-theme="dark"] [style*="color: #1d4ed8"],
[data-theme="dark"] [style*="color:#2563eb"],
[data-theme="dark"] [style*="color: #2563eb"],
[data-theme="dark"] [style*="color:#1e40af"],
[data-theme="dark"] [style*="color: #1e40af"],
[data-theme="dark"] [style*="color:#003d99"],
[data-theme="dark"] [style*="color: #003d99"],
[data-theme="dark"] [style*="color:#005eb8"],
[data-theme="dark"] [style*="color: #005eb8"] {
  color: #60a5fa !important;
}

/* ══ 14. Global elements — آخر طبقة أمان ══ */
[data-theme="dark"] p   { color: var(--tx1, #f1f5f9); }
[data-theme="dark"] span { color: inherit; }
[data-theme="dark"] li  { color: var(--tx1, #f1f5f9); }
[data-theme="dark"] dt  { color: var(--tx2, #94a3b8); }
[data-theme="dark"] dd  { color: var(--tx1, #f1f5f9); }

/* END UNIFIED DARK TEXT — FINAL */

/* ══════════════════════════════════════════════════════════════════
   CONTENT CONTRAST FIX — v2
   إصلاح دقيق للـ contrast في كل صفحات الـ content
   يُطبَّق بعد كل الـ patches السابقة — له أعلى أولوية
   ══════════════════════════════════════════════════════════════════ */

/* ══ 1. ROOT FIX: رفع --tx3 في الدارك مود علشان يكون مقروء ══
   القيمة القديمة #475569 = contrast ~2.5:1 ❌
   القيمة الجديدة #94a3b8 = contrast ~5.8:1 ✅               */
[data-theme="dark"] {
  --tx3: #94a3b8 !important;
}

/* ══ 2. text-muted — إصلاح نهائي بأعلى specificity ممكن ══ */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-muted *,
html[data-theme="dark"] .text-muted {
  color: #94a3b8 !important;
}

/* ══ 3. primary-color كـ inline text → أزرق فاتح ══
   style="color:var(--primary-color,#005eb8)" — أسماء المرضى   */
[data-theme="dark"] [style*="color:var(--primary-color"],
[data-theme="dark"] [style*="color: var(--primary-color"],
[data-theme="dark"] [style*="color:var(--primary-color,"],
[data-theme="dark"] [style*="color: var(--primary-color,"] {
  color: #60a5fa !important;
}

/* ══ 4. اسم المريض في session/evaluation/booking lists ══ */
[data-theme="dark"] .fw-bold[style*="color"],
[data-theme="dark"] div.fw-bold[style*="primary-color"] {
  color: #60a5fa !important;
}

/* ══ 5. table-light thead — Bootstrap variables override ══ */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td,
[data-theme="dark"] .table-light tr,
[data-theme="dark"] thead.table-light th {
  --bs-table-bg: var(--bg-muted) !important;
  --bs-table-color: #f1f5f9 !important;
  --bs-table-border-color: var(--border) !important;
  background-color: var(--bg-muted) !important;
  color: #f1f5f9 !important;
}

/* ══ 6. table headers عموماً — أبيض كامل ══ */
[data-theme="dark"] table thead th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table > thead > tr > th {
  color: #f1f5f9 !important;
  background-color: var(--bg-muted) !important;
}

/* ══ 7. table cells — أبيض واضح ══ */
[data-theme="dark"] table tbody td,
[data-theme="dark"] .table tbody td {
  color: #e2e8f0 !important;
}

/* ══ 8. sub-text داخل الجدول (username, client_MANS_...) ══ */
[data-theme="dark"] table small,
[data-theme="dark"] .table small,
[data-theme="dark"] td small,
[data-theme="dark"] td .text-muted {
  color: #94a3b8 !important;
}

/* ══ 9. Badges في الدارك مود ══ */
/* bg-light text-dark → الخلفية بتبقى فاتحة على داكن = مقروء */
[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.bg-light.text-dark {
  background-color: var(--bg-muted) !important;
  color: #e2e8f0 !important;
  border: 1px solid var(--border) !important;
}

/* bg-warning text-dark */
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-theme="dark"] .badge.bg-warning {
  background-color: var(--amber-s, #3d2e00) !important;
  color: var(--amber, #fbbf24) !important;
}

/* ══ 10. erp-filter-label — أوضح شوية ══ */
[data-theme="dark"] .erp-filter-label,
[data-theme="dark"] .erp-filter-header {
  color: #94a3b8 !important;
}

/* ══ 11. card-header erp-table-header ══ */
[data-theme="dark"] .card-header,
[data-theme="dark"] .erp-table-header {
  color: #f1f5f9 !important;
  background-color: var(--bg-muted) !important;
  border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .card-header small,
[data-theme="dark"] .erp-table-header small {
  color: #94a3b8 !important;
}

/* ══ 12. "Only completed and evaluated sessions are shown" ══ */
[data-theme="dark"] .text-muted.text-success,
[data-theme="dark"] .card-header .text-muted {
  color: #94a3b8 !important;
}

/* ══ 13. container-fluid page headers ══ */
[data-theme="dark"] .container-fluid h2,
[data-theme="dark"] .container-fluid h3,
[data-theme="dark"] .container-fluid .fw-bold {
  color: #f1f5f9 !important;
}

/* ══ 14. KPI cards في أعلى الصفحة ══ */
/* bg-warning text-dark KPI card */
[data-theme="dark"] .card.bg-warning {
  background-color: var(--amber-s, #3d2e00) !important;
  border: 1px solid var(--amber, #fbbf24) !important;
}

[data-theme="dark"] .card.bg-warning .text-dark,
[data-theme="dark"] .card.bg-warning h4,
[data-theme="dark"] .card.bg-warning small {
  color: var(--amber, #fbbf24) !important;
}

/* ══ 15. Hardcoded inline colors — أزرق داكن → فاتح ══ */
[data-theme="dark"] [style*="color:#005eb8"],
[data-theme="dark"] [style*="color: #005eb8"],
[data-theme="dark"] [style*="color:#005EB8"],
[data-theme="dark"] [style*="color:#185fa5"],
[data-theme="dark"] [style*="color: #185fa5"],
[data-theme="dark"] [style*="color:#185FA5"],
[data-theme="dark"] [style*="color: #185FA5"],
[data-theme="dark"] [style*="color:#1d4ed8"],
[data-theme="dark"] [style*="color: #1d4ed8"],
[data-theme="dark"] [style*="color:#2563eb"],
[data-theme="dark"] [style*="color: #2563eb"] {
  color: #60a5fa !important;
}

/* ══ 16. small عموماً في الـ content ══ */
[data-theme="dark"] .erp-content small,
[data-theme="dark"] .erp-main small {
  color: #94a3b8 !important;
}

/* ══ 17. NUCLEAR: كل نص بدون لون محدد في erp-main ══
   هذا آخر fallback — يضمن مفيش نص بيورث اللون الغامق من Bootstrap */
[data-theme="dark"] .erp-main {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .erp-content {
  color: #e2e8f0 !important;
}

/* ══ 18. عناوين الـ info cards أعلى الصفحة ══ */
[data-theme="dark"] .card.shadow-sm small.opacity-75 {
  color: rgba(241, 245, 249, 0.75) !important;
}

/* ══ 19. pagination bar ══ */
[data-theme="dark"] .erp-pg-info,
[data-theme="dark"] .erp-pg-label {
  color: #94a3b8 !important;
}

/* ══ 20. empty state text ══ */
[data-theme="dark"] [colspan].text-muted,
[data-theme="dark"] .text-center.text-muted {
  color: #94a3b8 !important;
}

/* END CONTENT CONTRAST FIX — v2 */

/* ══════════════════════════════════════════════════════════════════
   UNIFY ALL PAGES — BOOKING STANDARD
   يوحّد كل الصفحات على ألوان الـ Booking page
   ══════════════════════════════════════════════════════════════════ */

/* ══ 1. TABLE HEADERS — أبيض كامل (مش رمادي tx2)
   الـ Booking شغالة لأن مفيش table-light
   الصفحات التانية table-light بتديها tx2 — نصلحها           ══ */
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table thead td,
[data-theme="dark"] thead th,
[data-theme="dark"] thead td {
  color: #f1f5f9 !important;
  background-color: var(--bg-muted) !important;
}

/* table-light — override Bootstrap vars + force color */
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
  --bs-table-color:        #f1f5f9 !important;
  --bs-table-bg:           var(--bg-muted) !important;
  --bs-table-border-color: var(--border) !important;
  color:            #f1f5f9 !important;
  background-color: var(--bg-muted) !important;
}

/* Sort links inside thead — مثل Booking page */
[data-theme="dark"] thead th a,
[data-theme="dark"] thead th a:visited,
[data-theme="dark"] .table thead th a {
  color: #f1f5f9 !important;
}
[data-theme="dark"] thead th a:hover,
[data-theme="dark"] .table thead th a:hover {
  color: #93c5fd !important;
}

/* ══ 2. TABLE BODY — نفس Booking ══ */
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table tbody th,
[data-theme="dark"] tbody td,
[data-theme="dark"] tbody th {
  color: #e2e8f0 !important;
}

/* fw-bold داخل td — مثل أسماء المرضى في Booking */
[data-theme="dark"] td .fw-bold,
[data-theme="dark"] td .fw-semibold {
  color: #f1f5f9 !important;
}

/* ══ 3. PRIMARY-COLOR كـ TEXT — المشكلة الرئيسية في Sessions
   style="color:var(--primary-color,#005eb8)" → أزرق فاتح     ══ */
[data-theme="dark"] [style*="color:var(--primary-color"],
[data-theme="dark"] [style*="color: var(--primary-color"] {
  color: #60a5fa !important;
}

/* ══ 4. text-primary — Bootstrap blue داكن → أزرق فاتح ══ */
[data-theme="dark"] .text-primary,
[data-theme="dark"] a.text-primary,
[data-theme="dark"] td.text-primary,
[data-theme="dark"] .fw-bold.text-primary {
  color: #60a5fa !important;
}

/* ══ 5. BADGES — توحيد كامل مثل Booking ══ */

/* bg-light text-dark → مثل branch badge في Booking */
[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.bg-light.text-dark,
[data-theme="dark"] .badge.bg-light.border {
  background-color: var(--bg-muted) !important;
  color: #e2e8f0 !important;
  border-color: var(--border) !important;
}

/* bg-warning text-dark → amber */
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-warning.text-dark {
  background-color: var(--amber-s, #451a03) !important;
  color: var(--amber, #fbbf24) !important;
}

/* bg-info text-dark → teal فاتح */
[data-theme="dark"] .badge.bg-info.text-dark,
[data-theme="dark"] .badge.bg-info.text-white {
  background-color: #0e4d6e !important;
  color: #67e8f9 !important;
}

/* bg-secondary → رمادي داكن */
[data-theme="dark"] .badge.bg-secondary {
  background-color: var(--bg-muted) !important;
  color: #94a3b8 !important;
}

/* erp-branch-badge — مثل Booking */
[data-theme="dark"] .erp-branch-badge {
  background-color: var(--bg-muted) !important;
  color: #e2e8f0 !important;
  border-color: var(--border) !important;
}

/* ══ 6. text-dark في أي مكان → أبيض ══ */
[data-theme="dark"] .text-dark,
[data-theme="dark"] code.text-dark,
[data-theme="dark"] span.text-dark,
[data-theme="dark"] td .text-dark {
  color: #f1f5f9 !important;
}

/* ══ 7. text-muted — نهائي (tx2 مش tx3) ══ */
[data-theme="dark"] .text-muted,
[data-theme="dark"] small.text-muted,
[data-theme="dark"] td .text-muted,
[data-theme="dark"] td small.text-muted,
[data-theme="dark"] p.text-muted {
  color: #94a3b8 !important;
}

/* ══ 8. text-secondary → tx2 ══ */
[data-theme="dark"] .text-secondary {
  color: #94a3b8 !important;
}

/* ══ 9. CARDS — مثل Booking ══ */
[data-theme="dark"] .card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .card-header {
  background-color: var(--bg-muted) !important;
  border-bottom-color: var(--border) !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .card-body {
  color: #e2e8f0 !important;
}

/* card مع bg-warning (KPI cards) */
[data-theme="dark"] .card.bg-warning,
[data-theme="dark"] .card.bg-warning.text-dark {
  background-color: var(--amber-s, #451a03) !important;
  border-color: var(--amber, #fbbf24) !important;
}
[data-theme="dark"] .card.bg-warning *,
[data-theme="dark"] .card.bg-warning.text-dark * {
  color: var(--amber, #fbbf24) !important;
}

/* ══ 10. FILTER AREA — مثل Booking ══ */
[data-theme="dark"] .erp-filter-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .erp-filter-header {
  background-color: var(--bg-muted) !important;
  color: #94a3b8 !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="dark"] .erp-filter-body {
  background-color: var(--bg-card) !important;
}
[data-theme="dark"] .erp-filter-label {
  color: #94a3b8 !important;
}
[data-theme="dark"] .erp-filter-input,
[data-theme="dark"] .erp-filter-select {
  background-color: var(--bg-muted) !important;
  color: #f1f5f9 !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .erp-filter-input::placeholder {
  color: #64748b !important;
}

/* ══ 11. FORM CONTROLS عموماً ══ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input.form-control,
[data-theme="dark"] select.form-select {
  background-color: var(--bg-muted) !important;
  color: #f1f5f9 !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .form-control::placeholder {
  color: #64748b !important;
}

/* ══ 12. PAGE HEADER TITLES — مثل Booking ══ */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .container-fluid p.text-muted {
  color: #94a3b8 !important;
}

/* ══ 13. INLINE HARDCODED COLORS — أي لون داكن ظهر في أي صفحة ══ */

/* أزرق داكن → أزرق فاتح */
[data-theme="dark"] [style*="color:#005eb8"],
[data-theme="dark"] [style*="color: #005eb8"],
[data-theme="dark"] [style*="color:#185fa5"],
[data-theme="dark"] [style*="color: #185fa5"],
[data-theme="dark"] [style*="color:#185FA5"],
[data-theme="dark"] [style*="color: #185FA5"],
[data-theme="dark"] [style*="color:#1a56db"],
[data-theme="dark"] [style*="color: #1a56db"],
[data-theme="dark"] [style*="color:#2563eb"],
[data-theme="dark"] [style*="color: #2563eb"],
[data-theme="dark"] [style*="color:#1d4ed8"],
[data-theme="dark"] [style*="color: #1d4ed8"] {
  color: #60a5fa !important;
}

/* رمادي فاتح كـ text color → tx1 */
[data-theme="dark"] [style*="color:#f3f4f6"],
[data-theme="dark"] [style*="color: #f3f4f6"] {
  color: #94a3b8 !important;
}

/* ══ 14. LINKS — مثل Booking (phone links إلخ) ══ */
[data-theme="dark"] .erp-main a:not(.btn):not(.nav-link):not(.page-link):not(.erp-pg-btn) {
  color: #60a5fa !important;
}
[data-theme="dark"] .erp-main a:not(.btn):not(.nav-link):not(.page-link):not(.erp-pg-btn):hover {
  color: #93c5fd !important;
}

/* ══ 15. TABLE-RESPONSIVE wrapper ══ */
[data-theme="dark"] .table-responsive {
  background-color: var(--bg-card) !important;
}

/* ══ 16. card-header small/مuted ══ */
[data-theme="dark"] .card-header small,
[data-theme="dark"] .card-header .text-muted,
[data-theme="dark"] .card-header .text-success {
  color: #94a3b8 !important;
}

/* ══ 17. HR MODULE خصوصيات ══ */
/* payroll fw-bold text-success */
[data-theme="dark"] .fw-bold.text-success,
[data-theme="dark"] td .text-success {
  color: #4ade80 !important;
}

[data-theme="dark"] td .text-danger,
[data-theme="dark"] .fw-bold.text-danger {
  color: #f87171 !important;
}

[data-theme="dark"] td .text-warning {
  color: var(--amber, #fbbf24) !important;
}

/* ══ 18. code elements ══ */
[data-theme="dark"] code {
  background-color: var(--bg-muted) !important;
  color: #93c5fd !important;
}

/* ══ 19. PAGINATION ══ */
[data-theme="dark"] .erp-pg-btn {
  background-color: var(--bg-card) !important;
  color: #94a3b8 !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .erp-pg-btn:hover {
  color: #f1f5f9 !important;
  background-color: var(--bg-muted) !important;
}
[data-theme="dark"] .erp-pg-active {
  color: #ffffff !important;
}
[data-theme="dark"] .erp-pg-info,
[data-theme="dark"] .erp-pg-label {
  color: #94a3b8 !important;
}
[data-theme="dark"] .erp-pg-select,
[data-theme="dark"] .erp-pg-input {
  background-color: var(--bg-muted) !important;
  color: #f1f5f9 !important;
  border-color: var(--border) !important;
}

/* ══ 20. EMPTY STATE ══ */
[data-theme="dark"] td[colspan].text-muted,
[data-theme="dark"] .text-center.py-5.text-muted {
  color: #94a3b8 !important;
}

/* END UNIFY ALL PAGES — BOOKING STANDARD */

/* ══════════════════════════════════════════════════════════════════
   HIGH-SPEC MASTER PATCH — :root[data-theme="dark"]
   specificity (0,2,0) يكسب كل [data-theme="dark"] (0,1,0) السابقة
   مهما كان ترتيبها أو فيها !important
   المرجع: Booking page — الصفحة الوحيدة الشغالة صح
   ══════════════════════════════════════════════════════════════════ */

/* ══ VARIABLES: رفع tx3 علشان text-muted يبقى مقروء ══ */
:root[data-theme="dark"] {
  --tx3: #94a3b8;
}

/* ══ TEXT-MUTED — fix نهائي لا يُهزم ══ */
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] small.text-muted,
:root[data-theme="dark"] p.text-muted,
:root[data-theme="dark"] td .text-muted,
:root[data-theme="dark"] td small.text-muted,
:root[data-theme="dark"] span.text-muted {
  color: #94a3b8 !important;
}

/* ══ TEXT-PRIMARY — Bootstrap blue داكن → أزرق فاتح ══ */
:root[data-theme="dark"] .text-primary,
:root[data-theme="dark"] a.text-primary,
:root[data-theme="dark"] .fw-bold.text-primary,
:root[data-theme="dark"] td .text-primary,
:root[data-theme="dark"] th a.text-primary,
:root[data-theme="dark"] thead th a {
  color: #60a5fa !important;
}

/* ══ THEAD — أبيض كامل ══ */
:root[data-theme="dark"] thead th,
:root[data-theme="dark"] thead td,
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .table thead td,
:root[data-theme="dark"] thead.table-light th {
  color: #f1f5f9 !important;
  background-color: #1e2d42 !important;
}

/* table-light Bootstrap variables */
:root[data-theme="dark"] .table-light {
  --bs-table-color: #f1f5f9 !important;
  --bs-table-bg: #1e2d42 !important;
  --bs-table-border-color: #3b6fa6 !important;
}
:root[data-theme="dark"] .table-light th,
:root[data-theme="dark"] .table-light td {
  color: #f1f5f9 !important;
  background-color: #1e2d42 !important;
}

/* ══ TBODY — نص واضح ══ */
:root[data-theme="dark"] tbody td,
:root[data-theme="dark"] tbody th,
:root[data-theme="dark"] .table tbody td {
  color: #e2e8f0 !important;
}

/* fw-bold داخل td — أسماء المرضى */
:root[data-theme="dark"] td .fw-bold,
:root[data-theme="dark"] td .fw-semibold,
:root[data-theme="dark"] td div.fw-bold {
  color: #f1f5f9 !important;
}

/* ══ PRIMARY-COLOR كـ INLINE TEXT ══ */
:root[data-theme="dark"] [style*="color:var(--primary-color"],
:root[data-theme="dark"] [style*="color: var(--primary-color"] {
  color: #60a5fa !important;
}

/* ══ HARDCODED INLINE DARK COLORS ══ */
/* أزرق داكن → فاتح */
:root[data-theme="dark"] [style*="color:#005eb8"],
:root[data-theme="dark"] [style*="color: #005eb8"],
:root[data-theme="dark"] [style*="color:#185fa5"],
:root[data-theme="dark"] [style*="color: #185fa5"],
:root[data-theme="dark"] [style*="color:#185FA5"],
:root[data-theme="dark"] [style*="color:#1a56db"],
:root[data-theme="dark"] [style*="color:#2563eb"],
:root[data-theme="dark"] [style*="color:#1d4ed8"],
:root[data-theme="dark"] [style*="color:#003d99"],
:root[data-theme="dark"] [style*="color:#0e9f6e"] {
  color: #60a5fa !important;
}

/* أسود وداكن → أبيض */
:root[data-theme="dark"] [style*="color:#111827"],
:root[data-theme="dark"] [style*="color:#374151"],
:root[data-theme="dark"] [style*="color:#4b5563"],
:root[data-theme="dark"] [style*="color:#1e293b"],
:root[data-theme="dark"] [style*="color:#212529"],
:root[data-theme="dark"] [style*="color:#333"],
:root[data-theme="dark"] [style*="color:#000"],
:root[data-theme="dark"] [style*="color:black"] {
  color: #f1f5f9 !important;
}

/* رمادي غامق → tx2 */
:root[data-theme="dark"] [style*="color:#6b7280"],
:root[data-theme="dark"] [style*="color:#6c757d"],
:root[data-theme="dark"] [style*="color:#64748b"],
:root[data-theme="dark"] [style*="color:#475569"],
:root[data-theme="dark"] [style*="color:#9ca3af"],
:root[data-theme="dark"] [style*="color:#adb5bd"],
:root[data-theme="dark"] [style*="color:#6b7280"],
:root[data-theme="dark"] [style*="color:#6B7280"] {
  color: #94a3b8 !important;
}

/* ══ BADGES ══ */
/* bg-light text-dark */
:root[data-theme="dark"] .badge.bg-light,
:root[data-theme="dark"] .badge.bg-light.text-dark,
:root[data-theme="dark"] .badge.bg-light.border {
  background-color: #1e2d42 !important;
  color: #e2e8f0 !important;
  border-color: #3b6fa6 !important;
}

/* bg-warning */
:root[data-theme="dark"] .badge.bg-warning,
:root[data-theme="dark"] .badge.bg-warning.text-dark {
  background-color: #451a03 !important;
  color: #fbbf24 !important;
}

/* bg-info */
:root[data-theme="dark"] .badge.bg-info,
:root[data-theme="dark"] .badge.bg-info.text-dark,
:root[data-theme="dark"] .badge.bg-info.text-white {
  background-color: #0e4d6e !important;
  color: #67e8f9 !important;
}

/* bg-secondary */
:root[data-theme="dark"] .badge.bg-secondary {
  background-color: #1e2d42 !important;
  color: #94a3b8 !important;
}

/* erp-branch-badge */
:root[data-theme="dark"] .erp-branch-badge,
:root[data-theme="dark"] .badge.border.bg-light {
  background-color: #1e2d42 !important;
  color: #e2e8f0 !important;
  border-color: #3b6fa6 !important;
}

/* ══ TEXT UTILITIES ══ */
:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] code.text-dark,
:root[data-theme="dark"] span.text-dark,
:root[data-theme="dark"] td .text-dark {
  color: #f1f5f9 !important;
}

:root[data-theme="dark"] .text-secondary {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .text-body {
  color: #e2e8f0 !important;
}

:root[data-theme="dark"] .text-success {
  color: #4ade80 !important;
}

:root[data-theme="dark"] .text-danger {
  color: #f87171 !important;
}

:root[data-theme="dark"] .text-warning {
  color: #fbbf24 !important;
}

/* ══ HEADINGS ══ */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2,
:root[data-theme="dark"] h3, :root[data-theme="dark"] h4,
:root[data-theme="dark"] h5, :root[data-theme="dark"] h6 {
  color: #f1f5f9 !important;
}

/* ══ GLOBAL ELEMENTS ══ */
:root[data-theme="dark"] td, :root[data-theme="dark"] th {
  color: #e2e8f0 !important;
}

:root[data-theme="dark"] p {
  color: #e2e8f0;
}

:root[data-theme="dark"] small {
  color: #94a3b8;
}

:root[data-theme="dark"] label,
:root[data-theme="dark"] .form-label {
  color: #e2e8f0 !important;
}

:root[data-theme="dark"] code {
  background-color: #1e2d42 !important;
  color: #93c5fd !important;
}

/* ══ FORM CONTROLS ══ */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .erp-filter-input,
:root[data-theme="dark"] .erp-filter-select {
  background-color: #1e2d42 !important;
  color: #f1f5f9 !important;
  border-color: #3b6fa6 !important;
}

:root[data-theme="dark"] .form-control::placeholder,
:root[data-theme="dark"] .erp-filter-input::placeholder {
  color: #64748b !important;
}

/* ══ CARDS ══ */
:root[data-theme="dark"] .card {
  background-color: #162032 !important;
  border-color: #3b6fa6 !important;
}

:root[data-theme="dark"] .card-header {
  background-color: #1e2d42 !important;
  border-bottom-color: #3b6fa6 !important;
  color: #f1f5f9 !important;
}

:root[data-theme="dark"] .card-header small,
:root[data-theme="dark"] .card-header .text-muted {
  color: #94a3b8 !important;
}

:root[data-theme="dark"] .card-body {
  color: #e2e8f0 !important;
}

/* KPI cards bg-warning */
:root[data-theme="dark"] .card.bg-warning {
  background-color: #451a03 !important;
  border-color: #fbbf24 !important;
}
:root[data-theme="dark"] .card.bg-warning * {
  color: #fbbf24 !important;
}

/* ══ FILTER AREA ══ */
:root[data-theme="dark"] .erp-filter-card {
  background-color: #162032 !important;
  border-color: #3b6fa6 !important;
}
:root[data-theme="dark"] .erp-filter-header {
  background-color: #1e2d42 !important;
  color: #94a3b8 !important;
  border-bottom-color: #3b6fa6 !important;
}
:root[data-theme="dark"] .erp-filter-label {
  color: #94a3b8 !important;
}

/* ══ TABLE-RESPONSIVE ══ */
:root[data-theme="dark"] .table-responsive {
  background-color: #162032 !important;
}

/* ══ LINKS ══ */
:root[data-theme="dark"] .erp-main a:not(.btn):not(.nav-link):not(.page-link):not(.erp-pg-btn) {
  color: #60a5fa !important;
}
:root[data-theme="dark"] .erp-main a:not(.btn):not(.nav-link):not(.page-link):not(.erp-pg-btn):hover {
  color: #93c5fd !important;
}

/* ══ PAGINATION ══ */
:root[data-theme="dark"] .erp-pg-btn {
  background-color: #162032 !important;
  color: #94a3b8 !important;
  border-color: #3b6fa6 !important;
}
:root[data-theme="dark"] .erp-pg-btn:hover {
  color: #f1f5f9 !important;
  background-color: #1e2d42 !important;
}
:root[data-theme="dark"] .erp-pg-info,
:root[data-theme="dark"] .erp-pg-label {
  color: #94a3b8 !important;
}

/* END HIGH-SPEC MASTER PATCH */


/* ─────────────────────────────────────────────────────────────────────
   BTN-SM OUTLINE FIX — explicit sm variants to beat Bootstrap reset
   PATCH_btngroup_sm_v271
   ─────────────────────────────────────────────────────────────────────*/
/* old btn-sm block removed */

/* ══════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON SYSTEM — PATCH_btn_v2_fix
   Applied: 2026-06-16
   ──────────────────────────────────────────────────────────────────────
   مكان واحد = كل الأزرار.
   كل زرار يورث شكل login button.
   PRIMARY  → gradient(--primary-color → --border-color)
   DANGER   → gradient أحمر ثابت
   CANCEL   → outline هادي
   ══════════════════════════════════════════════════════════════════════ */

/* ── المتغيرات المشتركة ── */
html body .btn {
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  transition: opacity .2s, transform .1s, box-shadow .2s !important;
  cursor: pointer !important;
}
html body .btn.btn-sm,
html body .btn-sm { border-radius: var(--r-sm) !important; font-size: 12px !important; }
html body .btn.btn-lg,
html body .btn-lg { border-radius: var(--r-lg) !important; }

/* ── PRIMARY — gradient login (+ btn-success, btn-warning, btn-info, erp-btn-new, erp-btn-filter) ── */
html body .btn-primary,
html body .btn-success,
html body .btn-warning,
html body .btn-info,
html body .erp-btn-primary,
html body .erp-btn-new,
html body .erp-btn-filter {
  background: var(--primary-color) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 35%, transparent) !important;
}
html body .btn-primary:hover,
html body .btn-success:hover,
html body .btn-warning:hover,
html body .btn-info:hover,
html body .erp-btn-primary:hover,
html body .erp-btn-new:hover,
html body .erp-btn-filter:hover {
  opacity: .88 !important;
  color: #fff !important;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color) 45%, transparent) !important;
}
html body .btn-primary:active,
html body .btn-success:active,
html body .btn-warning:active,
html body .btn-info:active {
  transform: scale(.98) !important;
  opacity: .82 !important;
}

/* ── DANGER — حذف وعمليات خطيرة ── */
html body .btn-danger {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--red, #dc2626) 85%, #000 15%),
    color-mix(in srgb, var(--red, #dc2626) 65%, #7f1d1d 35%)
  ) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--red, #dc2626) 35%, transparent) !important;
}
html body .btn-danger:hover { opacity: .88 !important; color: #fff !important; }
html body .btn-danger:active { transform: scale(.98) !important; }

/* ── SECONDARY / CANCEL / BACK — outline هادي ── */
html body .btn-secondary,
html body .btn-light,
html body .erp-btn-secondary,
html body .erp-btn-filter-reset {
  background: transparent !important;
  border: 1.5px solid var(--border2, #cbd5e1) !important;
  color: var(--tx2) !important;
  box-shadow: none !important;
}
html body .btn-secondary:hover,
html body .btn-light:hover,
html body .erp-btn-secondary:hover,
html body .erp-btn-filter-reset:hover {
  background: var(--bg-muted) !important;
  color: var(--tx1) !important;
  border-color: var(--primary-color) !important;
}

/* ── OUTLINE VARIANTS — تبقى primary color كلها ── */
html body .btn-outline-primary,
html body .btn.btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}
html body .btn-outline-primary:hover,
html body .btn.btn-outline-primary:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* Edit actions (warning → primary outline) */
html body .btn-outline-warning,
html body .btn.btn-outline-warning {
  background: transparent !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}
html body .btn-outline-warning:hover,
html body .btn.btn-outline-warning:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* Approve / positive (success → primary) */
html body .btn-outline-success,
html body .btn.btn-outline-success {
  background: transparent !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}
html body .btn-outline-success:hover,
html body .btn.btn-outline-success:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* Info actions */
html body .btn-outline-info,
html body .btn.btn-outline-info {
  background: transparent !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  box-shadow: none !important;
}
html body .btn-outline-info:hover,
html body .btn.btn-outline-info:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* Delete actions (danger outline) */
html body .btn-outline-danger,
html body .btn.btn-outline-danger {
  background: transparent !important;
  border: 1.5px solid var(--red, #dc2626) !important;
  color: var(--red, #dc2626) !important;
  box-shadow: none !important;
}
html body .btn-outline-danger:hover,
html body .btn.btn-outline-danger:hover {
  background: var(--red, #dc2626) !important;
  color: #fff !important;
}

/* Secondary outline (cancel, back, reset) */
html body .btn-outline-secondary,
html body .btn.btn-outline-secondary {
  background: transparent !important;
  border: 1.5px solid var(--border2, #cbd5e1) !important;
  color: var(--tx2) !important;
  box-shadow: none !important;
}
html body .btn-outline-secondary:hover,
html body .btn.btn-outline-secondary:hover {
  background: var(--bg-muted) !important;
  color: var(--tx1) !important;
  border-color: var(--primary-color) !important;
}

/* ── modal dismiss buttons ── */
html body button[data-bs-dismiss="modal"] {
  background: transparent !important;
  border: 1.5px solid var(--border2, #cbd5e1) !important;
  color: var(--tx2) !important;
  box-shadow: none !important;
}
html body button[data-bs-dismiss="modal"]:hover {
  background: var(--bg-muted) !important;
  color: var(--tx1) !important;
}

/* ── Dark mode ── */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .erp-btn-secondary {
  border-color: var(--border2) !important;
  color: var(--tx2) !important;
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--bg-muted) !important;
  color: var(--tx1) !important;
}
/* ── END PATCH_btn_v2_fix ── */

/* ══════════════════════════════════════════════════════════════════════
   BTN-SM SPECIFICITY FIX — PATCH_btngroup_sm_fix_v271
   Applied: 2026-06-16
   المشكلة: .btn.btn-sm.btn-outline-* (0,3,0) كانت تكسب على patch الرئيسي
   الحل: html body .btn.btn-sm.btn-outline-* = (0,3,2) يكسب الكل
   ══════════════════════════════════════════════════════════════════════ */

/* ── sm + outline-warning → primary (Edit buttons) ── */
html body .btn.btn-sm.btn-outline-warning,
html body .btn-sm.btn-outline-warning {
  background: transparent !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
html body .btn.btn-sm.btn-outline-warning:hover,
html body .btn-sm.btn-outline-warning:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* ── sm + outline-success → primary (Approve buttons) ── */
html body .btn.btn-sm.btn-outline-success,
html body .btn-sm.btn-outline-success {
  background: transparent !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
html body .btn.btn-sm.btn-outline-success:hover,
html body .btn-sm.btn-outline-success:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* ── sm + outline-info → primary (View/Print buttons) ── */
html body .btn.btn-sm.btn-outline-info,
html body .btn-sm.btn-outline-info {
  background: transparent !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
html body .btn.btn-sm.btn-outline-info:hover,
html body .btn-sm.btn-outline-info:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* ── sm + outline-primary → primary ── */
html body .btn.btn-sm.btn-outline-primary,
html body .btn-sm.btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
html body .btn.btn-sm.btn-outline-primary:hover,
html body .btn-sm.btn-outline-primary:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* ── sm + outline-danger → danger أحمر (Delete buttons) ── */
html body .btn.btn-sm.btn-outline-danger,
html body .btn-sm.btn-outline-danger {
  background: transparent !important;
  border: 1.5px solid var(--red, #dc2626) !important;
  color: var(--red, #dc2626) !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
html body .btn.btn-sm.btn-outline-danger:hover,
html body .btn-sm.btn-outline-danger:hover {
  background: var(--red, #dc2626) !important;
  color: #fff !important;
}

/* ── sm + outline-secondary → secondary هادي ── */
html body .btn.btn-sm.btn-outline-secondary,
html body .btn-sm.btn-outline-secondary {
  background: transparent !important;
  border: 1.5px solid var(--border2, #cbd5e1) !important;
  color: var(--tx2) !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
html body .btn.btn-sm.btn-outline-secondary:hover,
html body .btn-sm.btn-outline-secondary:hover {
  background: var(--bg-muted) !important;
  color: var(--tx1) !important;
  border-color: var(--primary-color) !important;
}

/* ── sm + solid danger ── */
html body .btn.btn-sm.btn-danger,
html body .btn-sm.btn-danger {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--red, #dc2626) 85%, #000 15%),
    color-mix(in srgb, var(--red, #dc2626) 65%, #7f1d1d 35%)
  ) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
}

/* ── END PATCH_btngroup_sm_fix_v271 ── */