/* EDAFI Overtime stylesheet — policy: NO NEW !important (enforced by tests/css-budget.js).
   The 572 legacy !important are mostly repeated [data-theme="dark"] token
   overrides; migrate them per-component to the :root variables below instead
   of adding more. */
:root {
  --bg: #070d18;
  --bg-dark: #070d18;
  --bg-card: #0d1728;
  --bg-card-hover: #122038;
  --navy-deep: #050a14;
  --navy-border: #1e2f4d;
  --card: #0d1728;
  --text: #f8fafc;
  --navy: #f8fafc;
  --muted: #94a3b8;
  --gold: #d4af37;
  --gold-light: #f5d77f;
  --gold-dark: #aa8620;
  --cyan: #06b6d4;
  --cyan-light: #38bdf8;
  --cyan-glow: rgba(6, 182, 212, 0.25);
  --emerald: #10b981;
  --blue: #0284c7;
  --blue-lt: rgba(2, 132, 199, 0.15);
  --green-bg: rgba(16, 185, 129, 0.15);
  --green-tx: #34d399;
  --amber-bg: rgba(245, 158, 11, 0.15);
  --amber-tx: #fbbf24;
  --red-bg: rgba(239, 68, 68, 0.15);
  --red-tx: #f87171;
  --purple-bg: rgba(168, 85, 247, 0.15);
  --purple-tx: #c084fc;
  --line: rgba(212, 175, 55, 0.18);
  --card-line: #1e2f4d;
  --warm-lt: #122038;
  --font-ar: 'Cairo', system-ui, -apple-system, sans-serif;
  --font-en: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-head: 'Cairo', 'Outfit', sans-serif;
  --font-sans: 'Cairo', 'Outfit', system-ui, sans-serif;
}

[data-theme="light"] {
  --bg: #f8fafc;
  --bg-dark: #f8fafc;
  --card: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --text: #0f172a;
  --navy: #0f172a;
  --muted: #64748b;
  --gold: #d97706;
  --gold-light: #f59e0b;
  --gold-dark: #b45309;
  --cyan: #0284c7;
  --cyan-light: #38bdf8;
  --blue: #0284c7;
  --blue-lt: rgba(2, 132, 199, 0.08);
  --green-bg: #ecfdf5;
  --green-tx: #059669;
  --amber-bg: #fffbeb;
  --amber-tx: #d97706;
  --red-bg: #fef2f2;
  --red-tx: #dc2626;
  --purple-bg: #f5f3ff;
  --purple-tx: #7c3aed;
  --line: #e2e8f0;
  --card-line: #cbd5e1;
  --warm-lt: #f8fafc;
}

[data-theme="dark"] {
  --bg: #070d18;
  --bg-dark: #070d18;
  --card: #0d1728;
  --bg-card: #0d1728;
  --bg-card-hover: #122038;
  --text: #f8fafc;
  --navy: #f8fafc;
  --muted: #94a3b8;
  --gold: #d4af37;
  --gold-light: #f5d77f;
  --gold-dark: #aa8620;
  --cyan: #06b6d4;
  --cyan-light: #38bdf8;
  --blue: #0284c7;
  --line: rgba(212, 175, 55, 0.18);
  --card-line: #1e2f4d;
  --warm-lt: #122038;
}

html[dir="rtl"] {
  --font-sans: 'Cairo', system-ui, -apple-system, sans-serif;
  --font-head: 'Cairo', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── SIGNATURE ACCENT BAR ─────────────────────────────────────── */
body::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #d4af37 0%, #06b6d4 50%, #d4af37 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding-top: 3px;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(13, 23, 40, 0.9) 0%, transparent 70%);
  background-attachment: fixed;
}
.wrap { max-width: 1420px; margin: 0 auto; padding: 24px 20px; }

/* ── CARDS — Luxury Rounded Style ────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 26px;
  margin-bottom: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  position: relative;
  transition: all 0.25s ease;
}
.card:hover {
  border-color: rgba(212, 175, 55, 0.35);
}
.card h2 {
  font-family: var(--font-head);
  font-size: 19px;
  color: var(--navy);
  font-weight: 800;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.3px;
}
label { display: block; font-weight: 700; color: var(--navy); margin-bottom: 6px; font-size: 12.5px; }
input, select, textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: all .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}
.btn {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.28);
}
.btn:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.4); 
}
.btn:disabled { background: #475569; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline {
  background: var(--card);
  color: var(--navy);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.btn-outline:hover { background: var(--warm-lt); border-color: var(--gold); }
.tblwrap { 
  overflow-x: auto; 
  border-radius: 16px; 
  border: 1px solid var(--line); 
  background: var(--card); 
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ── NAV BASE — Luxury Glassmorphism ────────────────────────── */
#ot-nav {
  background: rgba(7, 13, 24, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible;
}
/* ── Top Rail ──────────────────────────────────────────────── */
.ot-nav-top {
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0 24px;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Brand */
.ot-nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.ot-nav-logo-chip {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  overflow: visible;         /* allow scale(1.08) to render without clipping */
  flex-shrink: 0;
  background: transparent !important;
  padding: 0 !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.ot-nav-logo-chip:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.45));
}
.ot-nav-logo-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: transparent;
  filter: none !important;
  transform: scale(1.08);    /* fills ~95% of square after viewBox crop */
  transform-origin: center;
}
.ot-nav-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  line-height: 1.2;
}
.ot-nav-brand-name {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
  line-height: 1.2;
  white-space: nowrap;
}
.ot-nav-brand-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(212, 175, 55, 0.88);
  letter-spacing: 0.5px;
  line-height: 1.2;
  white-space: nowrap;
}
[data-theme="dark"] .ot-nav-brand-sub {
  color: rgba(212, 175, 55, 0.88);
}
/* Accent line between brand and user controls */
.ot-nav-spacer { flex: 1; }
/* ── User Controls (top-right) ─────────────────────────────── */
.ot-nav-user {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* Icon-only buttons (bell, theme, lang) */
.ot-nav-icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(148,163,184,0.85);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.ot-nav-icon-btn:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}
.ot-nav-icon-btn.active-icon {
  background: rgba(56,189,248,0.12);
  border-color: rgba(56,189,248,0.3);
  color: #38bdf8;
}
/* Pill buttons (theme label, lang label) */
.ot-nav-pill-btn {
  height: 30px;
  padding: 0 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 15px;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .15s ease;
}
[data-theme="dark"] .ot-nav-pill-btn {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: rgba(203,213,225,0.8);
}
.ot-nav-pill-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: #fff;
}
/* Thin divider between user control groups */
.ot-nav-vsep {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.12);
  margin: 0 6px;
  flex-shrink: 0;
}
/* Profile chip */
.ot-nav-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  transition: all .15s ease;
}
.ot-nav-profile-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}
.ot-nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c4694a, #38bdf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  line-height: 1;
}
.ot-nav-profile-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.ot-nav-profile-name {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
}
.ot-nav-profile-role {
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  margin-top: 1px;
}
[data-theme="dark"] .ot-nav-profile-role {
  color: rgba(148,163,184,0.85);
}
/* Logout button */
.ot-nav-logout-btn {
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
  color: rgba(248,113,113,0.85);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all .15s ease;
  margin-inline-start: 2px;
}
.ot-nav-logout-btn:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.5);
  color: #f87171;
}
/* ── Tab Rail (Bottom) ─────────────────────────────────────── */
.ot-nav-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 24px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ot-nav-tabs::-webkit-scrollbar { display: none; }
.ot-nav-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  border-radius: 20px;
}
.ot-nav-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(212, 175, 55, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.ot-nav-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(6, 182, 212, 0.25)) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3), 0 0 12px rgba(6, 182, 212, 0.15);
  transform: translateY(-1px);
}
[data-theme="light"] .ot-nav-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fafc;
}
[data-theme="light"] .ot-nav-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(212, 175, 55, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .ot-nav-btn.active {
  background: #ffffff !important;
  border: 1.5px solid var(--gold) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
}
/* Notification Bell */
.ot-notif-btn-pro {
  position: relative;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(148,163,184,0.85);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.ot-notif-btn-pro:hover {
  background: rgba(251,191,36,0.1);
  border-color: rgba(251,191,36,0.25);
  color: #fbbf24;
}
/* Legacy ghost button — keep for login screen */
.ot-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 2px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
.ot-btn-ghost:hover { background: rgba(196, 105, 74, 0.3); }
/* Dark-mode body padding adjustment (nav is taller now) */
#ot-nav + .wrap, .wrap { padding-top: 0; }
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ot-nav-brand-sub { display: none; }
  .ot-nav-pill-btn span { display: none; }
  .ot-nav-pill-btn { width: 34px; padding: 0; justify-content: center; border-radius: 8px; }
  .ot-nav-profile-info { display: none; }
  .ot-nav-profile-btn { padding: 0 6px; }
}

/* ── LOGIN ───────────────────────────────────────────────────── */
#ot-login-screen { display: flex; align-items: center; justify-content: center; min-height: 80vh; }
.ot-login-card {
  background: var(--card);
  border-radius: 24px;
  padding: 34px 34px 28px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(229, 169, 59, 0.2);
  border: 1px solid var(--line);
  position: relative;
  text-align: center;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Glowing Top Accent Line */
.ot-login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #d97706, #f59e0b, #38bdf8, #0284c7);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

/* Login Header Controls (Theme & Lang) */
.ot-login-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}
.ot-login-pill-btn {
  border: 1.5px solid var(--line);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 20px;
  cursor: pointer;
  background: var(--card);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ot-login-pill-btn:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 169, 59, 0.18);
}

/* Modern App Icon Badge */
.ot-login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 24px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ot-login-logo:hover {
  transform: translateY(-3px) scale(1.05);
}
.ot-login-logo-chip {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0f1d33 0%, #070e1b 100%);
  border: 1.5px solid rgba(229, 169, 59, 0.45);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 0 24px rgba(229, 169, 59, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  overflow: hidden;
  box-sizing: border-box;
}
.ot-login-logo-chip img {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: contain;
  display: block;
}

/* Brand Typography */
.ot-login-brand-title {
  font-family: 'Cairo', 'Outfit', system-ui, sans-serif;
  font-size: 26px;
  color: var(--navy);
  font-weight: 900;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: -0.5px;
}
.ot-login-brand-title .brand-ar {
  font-weight: 900;
  color: var(--navy);
}
.ot-login-brand-title .brand-sep {
  color: var(--gold);
  font-size: 20px;
  font-weight: 400;
  opacity: 0.85;
}
.ot-login-brand-title .brand-en {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--blue);
  font-size: 22px;
}
.ot-login-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 22px;
  font-weight: 500;
  line-height: 1.5;
}

/* Form Inputs & Selects */
.ot-login-card .ot-form-group {
  margin-bottom: 14px;
  text-align: start;
}
.ot-login-card label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
  display: block;
}
.ot-login-card input, .ot-login-card select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 13.5px;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.ot-login-card input:focus, .ot-login-card select:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Executive Sign In Button */
.ot-btn-login {
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  border: 1px solid rgba(229, 169, 59, 0.35);
  background: linear-gradient(135deg, #0b1528 0%, #172554 50%, #0369a1 100%);
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  margin-top: 6px;
}
.ot-btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.4), 0 0 0 2px rgba(229, 169, 59, 0.6);
  background: linear-gradient(135deg, #0f203d 0%, #1e3a8a 50%, #0284c7 100%);
}
.ot-btn-login:active {
  transform: translateY(0);
}

.login-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 18px;
  text-align: center;
  line-height: 1.5;
}

/* ── INTERACTIVE KPI CARDS — Luxury Executive Board ──────────── */
.ot-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.ot-summary-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 14px 16px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.ot-summary-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: transparent;
  transition: all 0.25s ease;
}
.ot-summary-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  border-color: rgba(212, 175, 55, 0.4);
}
.ot-summary-item span {
  display: block;
  font-family: 'Outfit', 'Cairo', sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.ot-summary-item small {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
/* KPI Variants — Jewel Tone Accents */
.ot-summary-item.kpi-trainers,
.ot-summary-item.ok {
  border-color: rgba(6, 182, 212, 0.22);
}
.ot-summary-item.kpi-trainers::before,
.ot-summary-item.ok::before {
  background: linear-gradient(90deg, #0284c7, #38bdf8);
}
.ot-summary-item.kpi-trainers span,
.ot-summary-item.ok span {
  color: #38bdf8;
}

.ot-summary-item.kpi-hours {
  border-color: rgba(212, 175, 55, 0.25);
}
.ot-summary-item.kpi-hours::before {
  background: linear-gradient(90deg, #d4af37, #f59e0b);
}
.ot-summary-item.kpi-hours span {
  color: #f59e0b;
}

.ot-summary-item.kpi-weekend {
  border-color: rgba(168, 85, 247, 0.25);
}
.ot-summary-item.kpi-weekend::before {
  background: linear-gradient(90deg, #7c3aed, #c084fc);
}
.ot-summary-item.kpi-weekend span {
  color: #c084fc;
}

.ot-summary-item.kpi-total {
  border-color: rgba(212, 175, 55, 0.35);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.06) 0%, var(--card) 100%);
}
.ot-summary-item.kpi-total::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.ot-summary-item.kpi-total span {
  color: #fbbf24;
}

.ot-summary-item.kpi-head-approved {
  border-color: rgba(16, 185, 129, 0.25);
}
.ot-summary-item.kpi-head-approved::before {
  background: linear-gradient(90deg, #059669, #34d399);
}
.ot-summary-item.kpi-head-approved span {
  color: #34d399;
}

.ot-summary-item.kpi-pending-head,
.ot-summary-item.warn {
  border-color: rgba(245, 158, 11, 0.25);
}
.ot-summary-item.kpi-pending-head::before,
.ot-summary-item.warn::before {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}
.ot-summary-item.kpi-pending-head span,
.ot-summary-item.warn span {
  color: #fbbf24;
}

.ot-summary-item.kpi-approved-final {
  border-color: rgba(16, 185, 129, 0.25);
}
.ot-summary-item.kpi-approved-final::before {
  background: linear-gradient(90deg, #10b981, #6ee7b7);
}
.ot-summary-item.kpi-approved-final span {
  color: #10b981;
}

.ot-summary-item.kpi-rejected,
.ot-summary-item.err {
  border-color: rgba(239, 68, 68, 0.25);
}
.ot-summary-item.kpi-rejected::before,
.ot-summary-item.err::before {
  background: linear-gradient(90deg, #dc2626, #f87171);
}
.ot-summary-item.kpi-rejected span,
.ot-summary-item.err span {
  color: #f87171;
}

/* Active filter glow ring */
.ot-summary-item.active-kpi {
  box-shadow: 0 0 0 2px var(--cyan), 0 14px 32px rgba(6, 182, 212, 0.35) !important;
  transform: translateY(-3px);
  border-color: var(--cyan) !important;
}

/* ── REGIONAL FILTER PILLS ───────────────────────────────────── */
.ot-filter-bar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  border-inline-start: 4px solid var(--gold);
  padding: 12px 20px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.ot-filter-title {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ot-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.ot-pill-btn {
  background: var(--warm-lt);
  border: 1.5px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  white-space: nowrap;
}
.ot-pill-btn:hover {
  background: rgba(6, 182, 212, 0.12);
  color: var(--cyan);
  border-color: var(--cyan);
  transform: translateY(-1px);
}
.ot-pill-btn.active {
  background: linear-gradient(135deg, #d4af37, #f59e0b) !important;
  color: #070d18 !important;
  border-color: #d4af37 !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.ot-chart-badge-branch {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-weight: 800;
  display: inline-block;
  line-height: 1.4;
}
.ot-chart-badge-project {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-weight: 800;
  display: inline-block;
  line-height: 1.4;
}
.ot-chart-badge-trend {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #fbbf24;
  font-weight: 800;
  display: inline-block;
  line-height: 1.4;
}

/* ── BRANCH BLOCK CARDS — Luxury Rounded Style ───────────────── */
.branch-block-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  transition: all 0.25s ease;
}
.branch-block-card:hover {
  border-color: rgba(212, 175, 55, 0.35);
}
.branch-block-header {
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: #ffffff;
}
.branch-header-jeddah {
  background: linear-gradient(135deg, #0b3b32 0%, #134e42 50%, #1a6b5a 100%);
  border-bottom: 2px solid rgba(26, 107, 90, 0.6);
}
.branch-header-riyadh {
  background: linear-gradient(135deg, #45121b 0%, #5e1623 50%, #7d1c2d 100%);
  border-bottom: 2px solid rgba(125, 28, 45, 0.6);
}
.branch-header-north-riyadh {
  background: linear-gradient(135deg, #0f3443 0%, #1a5360 50%, #246e7f 100%);
  border-bottom: 2px solid rgba(36, 110, 127, 0.6);
}
.branch-header-abha {
  background: linear-gradient(135deg, #143b23 0%, #1d5232 50%, #297044 100%);
  border-bottom: 2px solid rgba(41, 112, 68, 0.6);
}
.branch-header-dammam {
  background: linear-gradient(135deg, #3d2a0f 0%, #573a14 50%, #754d19 100%);
  border-bottom: 2px solid rgba(117, 77, 25, 0.6);
}
.branch-header-rabigh {
  background: linear-gradient(135deg, #2b173d 0%, #3e2059 50%, #562a7a 100%);
  border-bottom: 2px solid rgba(86, 42, 122, 0.6);
}

.branch-title-group { display: flex; align-items: center; gap: 10px; }
.branch-title-group h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: #fff;
  font-family: var(--font-head);
  letter-spacing: 0.3px;
}
.branch-sup-info { font-size: 13px; opacity: .92; font-weight: 600; }
.branch-badges-group { display: flex; gap: 6px; flex-wrap: wrap; }
.branch-badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
}
.branch-badge-total {
  background: #0f172a;
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  font-weight: 800;
  border-radius: 10px;
  padding: 4px 12px;
}
[data-theme="light"] .branch-badge-total {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(255,255,255,0.85);
}
.trainer-badge-total {
  background: rgba(2, 132, 199, 0.12);
  color: #38bdf8;
  font-size: 13px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

/* ── WEEKLY TABLE ────────────────────────────────────────────── */
.ot-weekly-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--card); }
.ot-weekly-table thead th {
  background: #091322 !important;
  color: #ffffff;
  padding: 12px 10px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  border-bottom: 2px solid var(--gold) !important;
  position: sticky;
  top: 0;
  z-index: 5;
}
[data-theme="light"] .ot-weekly-table thead th {
  background: #0f172a !important;
  color: #ffffff;
}
.ot-weekly-table tbody td {
  padding: 11px 10px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
}
.ot-weekly-table tbody tr:hover { background: var(--bg-card-hover); }
.trainer-header-row td {
  background: #111c30 !important;
  font-weight: 800;
  color: #f8fafc !important;
  border-top: 2px solid var(--card-line) !important;
  padding: 13px 18px !important;
  font-size: 14.5px;
}
[data-theme="light"] .trainer-header-row td {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.trainer-avatar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  border-radius: 8px;
  font-size: 13px;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}
.cell-shift-label { font-weight: 700; color: var(--muted); background: var(--warm-lt); font-size: 13px; }

/* Subject / Task Badges */
.badge-shift-m {
  background: rgba(2, 132, 199, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
}
.badge-shift-e {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
}
.badge-wknd {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
}

.cell-course {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  font-weight: 800;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-block;
  font-size: 12.5px;
}
.cell-task {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  font-weight: 700;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-block;
  font-size: 12px;
}
.cell-postpone {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  font-weight: 800;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-block;
  font-size: 12.5px;
}

/* Location Badges */
.cell-location { font-weight: 800; font-size: 13.5px; display: inline-block; padding: 4px 12px; border-radius: 8px; letter-spacing: 0.2px; }
.loc-jeddah { background: rgba(6, 182, 212, 0.12); color: #38bdf8; border: 1px solid rgba(6, 182, 212, 0.3); }
.loc-riyadh { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.loc-north-riyadh { background: rgba(20, 184, 166, 0.12); color: #2dd4bf; border: 1px solid rgba(20, 184, 166, 0.3); }
.loc-abha { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.loc-dammam { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.loc-rabigh { background: rgba(168, 85, 247, 0.12); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }

/* Project Badges */
.ot-badge-proj {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  background: rgba(2, 132, 199, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* ── REQUESTS SECTION & TABS ─────────────────────────────────── */
.ot-requests-filter-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ot-req-tab {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ot-req-tab:hover { background: var(--warm-lt); color: var(--navy); border-color: rgba(212, 175, 55, 0.3); }
.ot-req-tab.active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.ot-active-filter-banner {
  background: rgba(2, 132, 199, 0.12);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-left: 4px solid var(--cyan);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: #38bdf8;
  font-weight: 700;
}
.ot-btn-clear-filter {
  background: var(--card);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  border-radius: 10px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s ease;
}
.ot-btn-clear-filter:hover {
  background: rgba(2, 132, 199, 0.2);
  border-color: #38bdf8;
}

/* ── REQUESTS TABLE ──────────────────────────────────────────── */
.tblwrap-requests {
  max-height: 72vh;
  overflow: auto;
  position: relative;
  border-radius: 16px;
  border: 1.5px solid var(--card-line);
}
.tblwrap-requests::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.tblwrap-requests::-webkit-scrollbar-track {
  background: var(--bg);
  border-radius: 4px;
}
.tblwrap-requests::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
.tblwrap-requests::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

.ot-requests-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  background: var(--card);
}
.ot-requests-table thead th {
  background: #091322 !important;
  color: #ffffff;
  padding: 13px 10px;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  border-bottom: 2px solid var(--gold) !important;
  position: sticky;
  top: 0;
  z-index: 25;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .ot-requests-table thead th {
  background: #0f172a !important;
  color: #ffffff;
}
.ot-requests-table tbody td {
  padding: 10px 10px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  vertical-align: middle;
}
.ot-requests-table tbody tr:hover { background: var(--bg-card-hover); }
.ot-requests-table tbody tr:nth-child(even) { background: rgba(18, 32, 56, 0.4); }
[data-theme="light"] .ot-requests-table tbody tr:nth-child(even) { background: rgba(241, 245, 249, 0.6); }
.ot-requests-table tbody tr:nth-child(even):hover { background: var(--bg-card-hover); }
.ot-requests-table tbody tr.req-detail-row td { padding: 9px 6px; }
.ot-requests-table .cell-course,
.ot-requests-table .cell-task,
.ot-requests-table .cell-postpone {
  padding: 3px 8px;
  font-size: 11.5px;
  border-radius: 6px;
  display: inline-block;
  white-space: nowrap;
}

.req-status {
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.req-pending { background: rgba(245, 158, 11, 0.14); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
.req-head_approved { background: rgba(6, 182, 212, 0.14); color: #38bdf8; border: 1px solid rgba(6, 182, 212, 0.35); }
.req-approved { background: rgba(16, 185, 129, 0.14); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); }
.req-rejected { background: rgba(239, 68, 68, 0.14); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.35); }

/* ── BUTTONS — Luxury Style ──────────────────────────────────── */
.ot-btn {
  border: none;
  border-radius: 12px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.ot-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(0,0,0,0.3);
}
.ot-btn:active { transform: translateY(0); }
.ot-btn-success {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
}
.ot-btn-success:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
}
.ot-btn-blue {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}
.ot-btn-gold {
  background: linear-gradient(135deg, #d4af37 0%, #f59e0b 50%, #fbbf24 100%) !important;
  color: #070d18 !important;
  border: 1px solid rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35) !important;
  font-weight: 900 !important;
}
.ot-btn-gold:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
  box-shadow: 0 10px 26px rgba(212, 175, 55, 0.5) !important;
}
.ot-btn-outline {
  background: var(--card);
  color: var(--navy);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.ot-btn-outline:hover {
  background: var(--warm-lt);
  border-color: var(--gold);
}
.ot-btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35) !important;
}
.ot-btn-primary:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
}
.ot-btn-err {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35) !important;
}
.ot-btn-xs {
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}

/* ── WEEK ACTIONS ────────────────────────────────────────────── */
.ot-week-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 20px; }
.week-select-strip { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.week-select-strip select { flex: 1; min-width: 200px; max-width: 500px; border-radius: 12px; }

/* ── MODALS (FIXED OVERLAY POPUP) — Luxury Dark Glass ───────── */
.ot-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: otFadeIn .2s ease;
}
.ot-modal-box {
  background: var(--card);
  border-radius: 24px;
  border: 1px solid var(--line);
  border-top: 3.5px solid var(--gold) !important;
  padding: 30px 32px;
  width: 100%;
  max-width: 580px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: otSlideUp .2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ot-modal-box h3 {
  font-family: var(--font-head);
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.ot-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  align-items: center;
  flex-wrap: wrap;
}
@keyframes otFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes otSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── TABS INSIDE MODALS ───────────────────────────────────────── */
.ot-btn-tab {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
.ot-btn-tab:hover { background: var(--warm-lt); color: var(--navy); }
.ot-btn-tab.active { background: var(--card); color: var(--navy); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 1px solid var(--line); }

/* ── STATUS BADGES ────────────────────────────────────────────── */
.ot-status-badge {
  border-radius: 10px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-draft { background: var(--warm-lt); color: var(--muted); border: 1px solid var(--line); }
.badge-submitted { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
.badge-approved { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); }
.badge-hr { background: rgba(6, 182, 212, 0.15); color: #38bdf8; border: 1px solid rgba(6, 182, 212, 0.35); }

/* ── FORM & DAYS GRID ─────────────────────────────────────────── */
.ot-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
/* Legacy 5-day grid (used in admin/head display tables) */
.ot-days-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ot-day-input label { font-size: 11.5px; text-align: center; margin-bottom: 4px; color: var(--navy); }
.ot-day-input input { text-align: center; font-weight: 700; border-radius: 8px; }
@media (max-width: 768px) { .ot-days-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── 7-DAY SCHEDULE GRID (trainer submission form) ────────────── */
.ot-days-grid-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.ot-days-grid-7 .ot-day-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card-hover, #f8fafc);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 8px;
  transition: all 0.2s ease;
}
.ot-days-grid-7 .ot-day-input:hover {
  border-color: rgba(2, 132, 199, 0.4);
}
.ot-days-grid-7 .ot-day-input.weekend {
  background: rgba(56, 189, 248, 0.07);
  border-color: rgba(56, 189, 248, 0.45);
}
.ot-day-label {
  font-size: 12.5px;
  font-weight: 800;
  text-align: center;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.ot-day-wknd-badge { font-size: 11px; }
.ot-day-task-input {
  width: 100%;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid var(--card-line);
  background: var(--card);
  color: var(--text);
  box-sizing: border-box;
}
.ot-day-hours-input {
  width: 100%;
  text-align: center;
  font-size: 14.5px;
  font-weight: 800;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  background: var(--card);
  box-sizing: border-box;
}
.ot-day-max-hint {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  font-weight: 500;
}
@media (max-width: 900px) {
  .ot-days-grid-7 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .ot-days-grid-7 { grid-template-columns: repeat(2, 1fr); }
}
/* Dark mode for 7-day grid */
[data-theme="dark"] .ot-days-grid-7 .ot-day-input {
  background: #151f30;
  border-color: #2d3f5e;
}
[data-theme="dark"] .ot-days-grid-7 .ot-day-input:hover {
  border-color: #38bdf8;
}
[data-theme="dark"] .ot-days-grid-7 .ot-day-input.weekend {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.4);
}
[data-theme="dark"] .ot-day-label { color: #f8fafc; }
[data-theme="dark"] .ot-day-hours-input {
  border-color: #38bdf8;
  color: #38bdf8;
  background: #0f1f30;
}

/* Official Base Work Pill in Day Cards */
.ot-day-base-pill {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 5px 4px;
  border-radius: 6px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.25);
  color: #0284c7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}
.ot-day-base-pill.weekend {
  background: rgba(148, 163, 184, 0.1);
  border: 1px dashed rgba(148, 163, 184, 0.35);
  color: var(--muted);
}
[data-theme="dark"] .ot-day-base-pill {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}
[data-theme="dark"] .ot-day-base-pill.weekend {
  background: rgba(148, 163, 184, 0.07);
  border-color: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
}

/* OT Span Badge in Day Cards */
.ot-day-ot-span {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #d97706;
  white-space: nowrap;
  min-height: 18px;
  line-height: 18px;
}
[data-theme="dark"] .ot-day-ot-span {
  color: #f59e0b;
}

/* Cell Base Shift Badge in Tables */
.cell-base-shift {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 12px;
  background: rgba(2, 132, 199, 0.09);
  border: 1px solid rgba(2, 132, 199, 0.25);
  color: #0284c7;
  white-space: nowrap;
}
[data-theme="dark"] .cell-base-shift {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

/* ── DATA MANAGEMENT TAB & GROUPED TRAINERS — Luxury Modern ─── */
.manage-grid {
  display: grid;
  grid-template-columns: minmax(320px, 360px) 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .manage-grid { grid-template-columns: 1fr; }
}

.ot-branch-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 16px;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}
.ot-branch-card:hover {
  border-color: rgba(212, 175, 55, 0.35);
}
.ot-branch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--warm-lt);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}
.ot-branch-header:hover {
  background: var(--bg-card-hover);
}
.ot-branch-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ot-branch-icon {
  font-size: 18px;
}
.ot-branch-name-ar {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
}
.ot-branch-name-en {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}
.ot-branch-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ot-branch-sh-tag {
  font-size: 11.5px;
  color: var(--navy);
  background: var(--card);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.ot-branch-count-pill {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}
.ot-branch-chevron {
  font-size: 13px;
  color: var(--muted);
  transition: transform 0.25s ease;
  display: inline-block;
  font-weight: 700;
}
.ot-branch-card.collapsed .ot-branch-chevron {
  transform: rotate(-90deg);
}
.ot-branch-card.collapsed .ot-branch-body,
.ot-branch-body.collapsed {
  display: none !important;
}

.ot-trainer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  transition: background 0.15s ease;
  gap: 14px;
}
.ot-trainer-row:last-child {
  border-bottom: none;
}
.ot-trainer-row:hover {
  background: var(--bg-card-hover);
}
.ot-trainer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.ot-trainer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ot-trainer-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--navy);
}
.ot-trainer-details {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ot-trainer-email {
  font-size: 11.5px;
  color: #38bdf8;
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: monospace;
  font-weight: 600;
}
.ot-trainer-head {
  font-size: 11.5px;
  color: var(--muted);
  background: var(--warm-lt);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-weight: 600;
}
.ot-tag-must-change {
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ot-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  transition: background .15s ease;
  border-radius: 12px;
  margin-bottom: 6px;
}
.ot-list-item:hover { background: var(--warm-lt); }

.ot-archive-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--cyan);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.ot-archive-card:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.4);
}
.ot-archive-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ot-archive-meta {
  display: flex;
  gap: 16px;
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.ot-archive-notes {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text);
  background: var(--warm-lt);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* ── TOAST NOTIFICATIONS ──────────────────────────────────────── */
.ot-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(7, 13, 24, 0.95);
  backdrop-filter: blur(16px);
  color: #ffffff;
  padding: 13px 30px;
  border-radius: 30px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  z-index: 99999;
  opacity: 0;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.ot-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.ot-toast.success { border-color: rgba(16, 185, 129, 0.5); }
.ot-toast.error { border-color: rgba(239, 68, 68, 0.5); }
.ot-toast.warn { border-color: rgba(245, 158, 11, 0.5); }

/* ── otConfirm Dialog — Luxury Style ──────────────────────────── */
#modal-ot-confirm {
  position: fixed; inset: 0; background: rgba(3, 7, 18, 0.82);
  display: none; align-items: center; justify-content: center;
  z-index: 99998; backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: fadeIn .2s ease;
}
#modal-ot-confirm.show { display: flex; }
.otc-box {
  background: var(--card);
  border-radius: 24px;
  border: 1px solid var(--line);
  border-top: 3.5px solid var(--gold) !important;
  padding: 0;
  max-width: 480px; width: 92%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
  transform: scale(.94); opacity: 0;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .18s;
  overflow: hidden;
}
#modal-ot-confirm.show .otc-box { transform: scale(1); opacity: 1; }
.otc-header {
  padding: 24px 26px 0 26px;
  display: flex; align-items: flex-start; gap: 14px;
}
.otc-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0; margin-top: 2px;
}
.otc-icon.danger  { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); }
.otc-icon.warning { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); }
.otc-icon.success { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); }
.otc-icon.info    { background: rgba(2, 132, 199, 0.15); border: 1px solid rgba(56, 189, 248, 0.3); }
.otc-title {
  font-family: var(--font-head);
  font-size: 17px; font-weight: 800; color: var(--navy);
  margin: 0 0 4px 0; line-height: 1.3;
}
.otc-msg {
  font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0;
}
.otc-detail {
  margin: 16px 26px 0 26px;
  background: var(--warm-lt);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px;
  font-size: 12.5px; color: var(--text);
  font-weight: 500; line-height: 1.5;
}
.otc-detail strong { color: var(--navy); }
.otc-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 22px 26px;
}
.otc-btn-cancel {
  padding: 9px 20px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--muted); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s ease;
}
.otc-btn-cancel:hover { background: var(--warm-lt); border-color: var(--gold); color: var(--navy); }
.otc-btn-confirm {
  padding: 9px 22px; border-radius: 10px; border: none;
  font-size: 13px; font-weight: 800; cursor: pointer;
  transition: all .15s ease; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.otc-btn-confirm.danger  { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.otc-btn-confirm.warning { background: linear-gradient(135deg, #d97706, #b45309); }
.otc-btn-confirm.success { background: linear-gradient(135deg, #059669, #10b981); }
.otc-btn-confirm.info    { background: linear-gradient(135deg, #0284c7, #0369a1); }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ── KPI PILLS (Top Bar) — Luxury Rounded Pill ───────────────── */
.ot-kpi-pill {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}
.ot-kpi-pill:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* ── DARK THEME (EDAFI LUXURY HIGH CONTRAST) ─────────────────── */
[data-theme="dark"] {
  --bg: #070d18;
  --card: #0d1728;
  --text: #f8fafc;
  --navy: #f8fafc;
  --muted: #94a3b8;
  --gold: #d4af37;
  --gold-light: #f5d77f;
  --cyan: #06b6d4;
  --cyan-light: #38bdf8;
  --blue: #0284c7;
  --blue-lt: rgba(2, 132, 199, 0.15);
  --green-bg: rgba(16, 185, 129, 0.15);
  --green-tx: #34d399;
  --amber-bg: rgba(245, 158, 11, 0.15);
  --amber-tx: #fbbf24;
  --red-bg: rgba(239, 68, 68, 0.15);
  --red-tx: #f87171;
  --purple-bg: rgba(168, 85, 247, 0.15);
  --purple-tx: #c084fc;
  --line: rgba(212, 175, 55, 0.18);
  --card-line: #1e2f4d;
  --warm-lt: #122038;
}

[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #122038 !important;
  color: #f8fafc !important;
  border-color: #1e2f4d !important;
}
[data-theme="dark"] select option {
  background: #0d1728 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .ot-branch-box,
[data-theme="dark"] .ot-trainer-card,
[data-theme="dark"] .ot-archive-card,
[data-theme="dark"] .ot-list-item,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .otc-box,
[data-theme="dark"] .ot-charts-container {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .ot-kpi-pill {
  background: #0d1728 !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .ot-kpi-pill span {
  color: #f8fafc !important;
}

[data-theme="dark"] .tblwrap {
  background: var(--card) !important;
  border-color: var(--line) !important;
}

/* ── BUTTONS IN DARK MODE (VIBRANT LUXURY PALETTE) ───────────── */
[data-theme="dark"] .btn,
[data-theme="dark"] .ot-btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35) !important;
}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .ot-btn-primary:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  border-color: #7dd3fc !important;
  color: #ffffff !important;
}

[data-theme="dark"] .ot-btn-gold {
  background: linear-gradient(135deg, #d4af37 0%, #f59e0b 50%, #fbbf24 100%) !important;
  color: #070d18 !important;
  border: 1px solid rgba(212, 175, 55, 0.6) !important;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4) !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .ot-btn-gold:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.55) !important;
}

[data-theme="dark"] .ot-btn-success {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .ot-btn-success:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
}

[data-theme="dark"] .ot-btn-blue {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}

[data-theme="dark"] .ot-btn-err {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

[data-theme="dark"] .btn-outline,
[data-theme="dark"] .ot-btn-outline {
  background: #122038 !important;
  color: #f1f5f9 !important;
  border: 1.5px solid #1e2f4d !important;
}
[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .ot-btn-outline:hover {
  background: #182a4a !important;
  border-color: var(--gold) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .ot-pill-btn {
  background: #122038 !important;
  color: #94a3b8 !important;
  border-color: #1e2f4d !important;
}
[data-theme="dark"] .ot-pill-btn.active {
  background: linear-gradient(135deg, #d4af37, #f59e0b) !important;
  color: #070d18 !important;
  border-color: #d4af37 !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35) !important;
}

/* ── STATUS BADGES IN DARK MODE ──────────────────────────────── */
[data-theme="dark"] .ot-status-badge.badge-draft {
  background: #122038 !important;
  color: #94a3b8 !important;
  border: 1px solid #1e2f4d !important;
}
[data-theme="dark"] .ot-status-badge.badge-submitted {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
[data-theme="dark"] .ot-status-badge.badge-approved {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}
[data-theme="dark"] .ot-status-badge.badge-hr {
  background: rgba(6, 182, 212, 0.18) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(6, 182, 212, 0.4) !important;
}

/* ── REQUESTS TABS & FILTER BANNERS ──────────────────────────── */
[data-theme="dark"] .ot-req-tab {
  background: #122038 !important;
  color: #94a3b8 !important;
  border-color: #1e2f4d !important;
}
[data-theme="dark"] .ot-req-tab:hover {
  background: #182a4a !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .ot-req-tab.active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}
[data-theme="dark"] .ot-active-filter-banner {
  background: #122038 !important;
  border-color: #1e2f4d !important;
  border-left-color: #38bdf8 !important;
  color: #38bdf8 !important;
}
[data-theme="dark"] .ot-proj-summary-card {
  background: #122038 !important;
  border-color: #1e2f4d !important;
  border-inline-start: 3px solid #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .ot-summary-item {
  background: #0d1728 !important;
  border-color: rgba(212, 175, 55, 0.18) !important;
}
[data-theme="dark"] .ot-summary-item small {
  color: #94a3b8 !important;
}
[data-theme="dark"] .ot-summary-item.active-kpi {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4) !important;
}

/* ── REQUESTS TABLE IN DARK MODE ──────────────────────────────── */
[data-theme="dark"] .ot-requests-table {
  background: #0d1728 !important;
  border-color: #1e2f4d !important;
}
[data-theme="dark"] .ot-requests-table thead th {
  background: #070d18 !important;
  color: #f8fafc !important;
  border-bottom: 2px solid var(--gold) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .ot-requests-table tbody tr {
  background: #0d1728 !important;
}
[data-theme="dark"] .ot-requests-table tbody tr:nth-child(even) {
  background: #122038 !important;
}
[data-theme="dark"] .ot-requests-table tbody tr:hover {
  background: #182a4a !important;
}
[data-theme="dark"] .ot-requests-table tbody td {
  border: 1px solid #1e2f4d !important;
  color: #f8fafc !important;
}

/* ── BRANCH MATRIX & WEEKLY TABLE IN DARK MODE ────────────────── */
[data-theme="dark"] .branch-block-card {
  background: #0d1728 !important;
  border: 1px solid #1e2f4d !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .ot-weekly-table {
  background: #0d1728 !important;
}
[data-theme="dark"] .ot-weekly-table thead th {
  background: #070d18 !important;
  color: #f8fafc !important;
  border-bottom: 2px solid var(--gold) !important;
}
[data-theme="dark"] .ot-weekly-table tbody td {
  border: 1px solid #1e2f4d !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] .ot-weekly-table tbody tr {
  background: #0d1728 !important;
}
[data-theme="dark"] .ot-weekly-table tbody tr:hover {
  background: #182a4a !important;
}
[data-theme="dark"] .trainer-header-row td {
  background: #122038 !important;
  border-top: 2px solid #1e2f4d !important;
  border-bottom: 1px solid #1e2f4d !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .trainer-header-row strong {
  color: #ffffff !important;
}

/* ── BRANCH HEADER GRADIENTS (VIBRANT & HIGH CONTRAST) ────────── */
[data-theme="dark"] .branch-header-jeddah {
  background: linear-gradient(135deg, #0b3b32 0%, #134e42 50%, #1a6b5a 100%) !important;
  border-bottom: 2px solid #10b981 !important;
}
[data-theme="dark"] .branch-header-riyadh {
  background: linear-gradient(135deg, #45121b 0%, #5e1623 50%, #7d1c2d 100%) !important;
  border-bottom: 2px solid #f87171 !important;
}
[data-theme="dark"] .branch-header-north-riyadh {
  background: linear-gradient(135deg, #0f3443 0%, #1a5360 50%, #246e7f 100%) !important;
  border-bottom: 2px solid #2dd4bf !important;
}
[data-theme="dark"] .branch-header-abha {
  background: linear-gradient(135deg, #14532d 0%, #052e16 100%) !important;
  border-bottom: 2px solid #22c55e !important;
}
[data-theme="dark"] .branch-header-dammam {
  background: linear-gradient(135deg, #713f12 0%, #422006 100%) !important;
  border-bottom: 2px solid #eab308 !important;
}
[data-theme="dark"] .branch-header-rabigh {
  background: linear-gradient(135deg, #581c87 0%, #3b0764 100%) !important;
  border-bottom: 2px solid #a855f7 !important;
}

/* ── BADGES & CELLS IN DARK MODE ──────────────────────────────── */
[data-theme="dark"] .branch-badge-total {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1.5px solid #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .trainer-badge-total {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.2) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .ot-chart-badge-branch {
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.15) !important;
}
[data-theme="dark"] .ot-chart-badge-project {
  background: rgba(74, 222, 128, 0.15) !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  color: #4ade80 !important;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.15) !important;
}
[data-theme="dark"] .cell-course {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.45) !important;
}
[data-theme="dark"] .cell-task {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #fde047 !important;
  border: 1px solid rgba(253, 224, 71, 0.45) !important;
}
[data-theme="dark"] .cell-postpone {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(248, 113, 113, 0.45) !important;
}
[data-theme="dark"] .badge-shift-m {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
}
[data-theme="dark"] .badge-shift-e {
  background: rgba(168, 85, 247, 0.2) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
}
[data-theme="dark"] .badge-wknd {
  background: rgba(234, 179, 8, 0.22) !important;
  color: #fde047 !important;
  border: 1px solid rgba(253, 224, 71, 0.5) !important;
}
[data-theme="dark"] .ot-badge-proj {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

/* ── STATUS BADGES IN DARK MODE ───────────────────────────────── */
[data-theme="dark"] .req-pending {
  background: rgba(234, 179, 8, 0.18) !important;
  color: #fde047 !important;
  border: 1px solid rgba(253, 224, 71, 0.4) !important;
}
[data-theme="dark"] .req-head_approved {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}
[data-theme="dark"] .req-approved {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.4) !important;
}
[data-theme="dark"] .req-rejected {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border: 1px solid rgba(248, 113, 113, 0.4) !important;
}

/* ── LOCATION BADGES IN DARK MODE ─────────────────────────────── */
[data-theme="dark"] .loc-jeddah {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}
[data-theme="dark"] .loc-riyadh {
  background: rgba(248, 113, 113, 0.16) !important;
  color: #f87171 !important;
  border: 1px solid rgba(248, 113, 113, 0.4) !important;
}
[data-theme="dark"] .loc-north-riyadh {
  background: rgba(45, 212, 191, 0.16) !important;
  color: #2dd4bf !important;
  border: 1px solid rgba(45, 212, 191, 0.4) !important;
}
[data-theme="dark"] .loc-abha {
  background: rgba(74, 222, 128, 0.16) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.4) !important;
}
[data-theme="dark"] .loc-dammam {
  background: rgba(250, 204, 21, 0.16) !important;
  color: #facc15 !important;
  border: 1px solid rgba(250, 204, 21, 0.4) !important;
}
[data-theme="dark"] .loc-rabigh {
  background: rgba(192, 132, 252, 0.16) !important;
  color: #c084fc !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
}

/* ── MODALS & CONFIRM DIALOGS ─────────────────────────────────── */
[data-theme="dark"] .ot-modal-box {
  background: #151f30 !important;
  border: 1px solid #2d3f5e !important;
  border-top: 4px solid #f97316 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
}
[data-theme="dark"] .ot-modal-box h3 {
  color: #f8fafc !important;
}
[data-theme="dark"] .ot-modal-actions {
  border-top-color: #223048 !important;
}
[data-theme="dark"] .ot-btn-tab {
  color: #94a3b8 !important;
}
[data-theme="dark"] .ot-btn-tab:hover {
  background: #1e2c42 !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .ot-btn-tab.active {
  background: #1e2c42 !important;
  color: #38bdf8 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .otc-header {
  background: #182438 !important;
  border-color: #223048 !important;
}
[data-theme="dark"] .otc-body {
  background: #151f30 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .otc-footer {
  background: #182438 !important;
  border-color: #223048 !important;
}

/* ── EMAIL MODAL PREVIEW AREA IN DARK MODE ───────────────────── */
[data-theme="dark"] #modal-email .ot-modal-box > div:nth-child(2) {
  background: #0f172a !important;
  border-color: #223048 !important;
}
[data-theme="dark"] #email-plain-content {
  background: #182438 !important;
  color: #f8fafc !important;
  border-color: #2d3f5e !important;
}

/* ── REGIONAL & AUDIT FILTER BARS IN DARK MODE ───────────────── */
[data-theme="dark"] .ot-filter-bar {
  background: #151f30 !important;
  border: 1px solid #2d3f5e !important;
  border-left: 4px solid #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] .ot-filter-title {
  color: #f8fafc !important;
}
[data-theme="dark"] .ot-filter-pills .ot-pill-btn {
  background: #182438 !important;
  color: #cbd5e1 !important;
  border: 1px solid #2d3f5e !important;
}
[data-theme="dark"] .ot-filter-pills .ot-pill-btn:hover {
  background: #23344e !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}
[data-theme="dark"] .ot-filter-pills .ot-pill-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.4) !important;
}

/* ── DATA MANAGEMENT IN DARK MODE ────────────────────────────── */
[data-theme="dark"] .ot-branch-card {
  background: #151f30 !important;
  border: 1.5px solid #2d3f5e !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .ot-branch-header {
  background: #1a273e !important;
  border-bottom: 1px solid #2d3f5e !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .ot-branch-header:hover {
  background: #223450 !important;
}
[data-theme="dark"] .ot-branch-name-ar {
  color: #ffffff !important;
}
[data-theme="dark"] .ot-branch-name-en {
  color: #94a3b8 !important;
}
[data-theme="dark"] .ot-branch-sh-tag {
  background: #182438 !important;
  color: #38bdf8 !important;
  border: 1px solid #2d3f5e !important;
}
[data-theme="dark"] .ot-branch-count-pill {
  background: #0284c7 !important;
  color: #ffffff !important;
}
[data-theme="dark"] .ot-branch-chevron {
  color: #94a3b8 !important;
}

/* Trainer Rows in Data Management */
[data-theme="dark"] .ot-trainer-row {
  background: #151f30 !important;
  border-bottom: 1px solid #223048 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .ot-trainer-row:hover {
  background: #1c283c !important;
}
[data-theme="dark"] .ot-trainer-name {
  color: #ffffff !important;
  font-weight: 700 !important;
}
[data-theme="dark"] .ot-trainer-details span {
  color: #94a3b8 !important;
}
[data-theme="dark"] .ot-trainer-details .ot-detail-email {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .ot-trainer-details .ot-detail-location {
  color: #38bdf8 !important;
}
[data-theme="dark"] .ot-trainer-details .ot-detail-head {
  color: #a78bfa !important;
}

/* Section Heads List in Data Management */
[data-theme="dark"] .ot-list-item {
  background: #151f30 !important;
  border: 1px solid #2d3f5e !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .ot-list-item:hover {
  background: #1c283c !important;
}
[data-theme="dark"] .ot-list-item > div > div:first-child {
  color: #ffffff !important;
}
[data-theme="dark"] .ot-list-item small {
  color: #38bdf8 !important;
}

/* Must Change Password Badge */
[data-theme="dark"] .ot-tag-must-change {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #fde047 !important;
  border: 1px solid rgba(234, 179, 8, 0.45) !important;
}

/* Forms & Inputs in Data Management */
[data-theme="dark"] #add-trainer-box,
[data-theme="dark"] #add-sh-box {
  background: #182438 !important;
  border: 1px solid #2d3f5e !important;
}
[data-theme="dark"] #manage-trainer-search {
  background: #182438 !important;
  color: #f8fafc !important;
  border: 1.5px solid #2d3f5e !important;
}
[data-theme="dark"] #manage-trainer-search::placeholder {
  color: #64748b !important;
}
[data-theme="dark"] #manage-branch-pills .ot-pill-btn {
  background: #182438 !important;
  color: #94a3b8 !important;
  border: 1px solid #2d3f5e !important;
}
[data-theme="dark"] #manage-branch-pills .ot-pill-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

/* ── AUDIT LOGS IN DARK MODE ─────────────────────────────────── */
[data-theme="dark"] #log-filter-q,
[data-theme="dark"] #log-filter-action,
[data-theme="dark"] #log-filter-role,
[data-theme="dark"] #log-filter-status {
  background: #182438 !important;
  color: #f8fafc !important;
  border: 1.5px solid #2d3f5e !important;
}
[data-theme="dark"] #log-filter-q::placeholder {
  color: #64748b !important;
}
[data-theme="dark"] #ot-logs-table {
  background: #151f30 !important;
  border-color: #2d3f5e !important;
}
[data-theme="dark"] #ot-logs-table thead th {
  background: #1e2c42 !important;
  color: #f8fafc !important;
  border: 1px solid #2d3f5e !important;
  border-bottom: 2px solid #0284c7 !important;
}
[data-theme="dark"] #ot-logs-table tbody td {
  background: transparent !important;
  border: 1px solid #223048 !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] #ot-logs-table tbody tr {
  background: #151f30 !important;
}
[data-theme="dark"] #ot-logs-table tbody tr:nth-child(even) {
  background: #192437 !important;
}
[data-theme="dark"] #ot-logs-table tbody tr:hover {
  background: #23344e !important;
}
[data-theme="dark"] .ot-log-date {
  color: #94a3b8 !important;
}
[data-theme="dark"] .ot-log-details {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .ot-log-ip code {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}
[data-theme="dark"] .ot-log-ip small {
  color: #94a3b8 !important;
}
[data-theme="dark"] #logs-pagination-info {
  color: #94a3b8 !important;
}

/* ── ARCHIVE TAB IN DARK MODE ────────────────────────────────── */
[data-theme="dark"] .ot-archive-card {
  background: #151f30 !important;
  border: 1px solid #2d3f5e !important;
  border-inline-start: 4px solid #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .ot-archive-card:hover {
  background: #1c283c !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="dark"] .ot-archive-header strong {
  color: #ffffff !important;
}
[data-theme="dark"] .ot-archive-meta {
  color: #94a3b8 !important;
}
[data-theme="dark"] .ot-archive-notes {
  background: #182438 !important;
  color: #cbd5e1 !important;
  border: 1px solid #2d3f5e !important;
}

/* ── EMPTY STATES & FOOTER IN DARK MODE ───────────────────────── */
[data-theme="dark"] .ot-empty-state {
  background: #151f30 !important;
  border: 1px dashed #2d3f5e !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] footer {
  border-top-color: #223048 !important;
  color: #94a3b8 !important;
}

/* ── DETAILED REQUESTS 2-ROW TABLE IN DARK MODE ──────────────── */
[data-theme="dark"] .req-header-row td {
  background: #1c283c !important;
  border-top: 2px solid #2d3f5e !important;
  border-bottom: 1px solid #223048 !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .req-header-row strong {
  color: #ffffff !important;
}
[data-theme="dark"] .req-detail-row td {
  background: #151f30 !important;
  border: 1px solid #223048 !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] .req-detail-row:hover td {
  background: #23344e !important;
}
[data-theme="dark"] .req-detail-row:nth-child(4n) td {
  background: #192437 !important;
}
[data-theme="dark"] .req-detail-row:nth-child(4n):hover td {
  background: #23344e !important;
}

/* ── CONFIRMATION DIALOG (OTC) IN DARK MODE ─────────────────── */
[data-theme="dark"] .otc-title {
  color: #f8fafc !important;
}
[data-theme="dark"] .otc-msg {
  color: #cbd5e1 !important;
}
[data-theme="dark"] .otc-detail {
  background: #182438 !important;
  border-color: #2d3f5e !important;
  color: #cbd5e1 !important;
}
[data-theme="dark"] .otc-detail strong {
  color: #f8fafc !important;
}
[data-theme="dark"] .otc-btn-cancel {
  background: #182438 !important;
  color: #cbd5e1 !important;
  border-color: #2d3f5e !important;
}
[data-theme="dark"] .otc-btn-cancel:hover {
  background: #23344e !important;
  border-color: #38bdf8 !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .otc-icon.danger  { background: rgba(239,68,68,0.2) !important; }
[data-theme="dark"] .otc-icon.warning { background: rgba(234,179,8,0.2) !important; }
[data-theme="dark"] .otc-icon.success { background: rgba(34,197,94,0.2) !important; }
[data-theme="dark"] .otc-icon.info    { background: rgba(59,130,246,0.2) !important; }

/* ── EMAIL MODAL IN DARK MODE ───────────────────────────────── */
[data-theme="dark"] #modal-email .ot-modal-box {
  background: #151f30 !important;
  border-color: #2d3f5e !important;
  color: #f8fafc !important;
}
[data-theme="dark"] #modal-email h3 {
  color: #f8fafc !important;
}
[data-theme="dark"] #modal-email p {
  color: #94a3b8 !important;
}
[data-theme="dark"] #email-preview-scroll-wrapper {
  background: #0b1120 !important;
  border-color: #223048 !important;
}
[data-theme="dark"] #email-view-preview {
  background: #ffffff !important; /* Email paper is intentionally clean white */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
  border: 1px solid #1e293b !important;
}
/* Ensure the email paper document is completely isolated from dark mode CSS overrides */
#email-html-content,
#email-html-content * {
  color-scheme: light !important;
}
[data-theme="dark"] #email-tab-preview,
[data-theme="dark"] #email-tab-text,
[data-theme="dark"] #email-tab-code {
  background: #182438 !important;
  color: #cbd5e1 !important;
  border: 1px solid #2d3f5e !important;
}
[data-theme="dark"] #email-tab-preview.active,
[data-theme="dark"] #email-tab-text.active,
[data-theme="dark"] #email-tab-code.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}
[data-theme="dark"] #email-plain-content {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border-color: #223048 !important;
}

/* ── FILTER BANNER CLEAR BUTTON IN DARK MODE ─────────────────── */
[data-theme="dark"] .ot-btn-clear-filter {
  background: #182438 !important;
  border-color: #2d3f5e !important;
  color: #38bdf8 !important;
}
[data-theme="dark"] .ot-btn-clear-filter:hover {
  background: #23344e !important;
}

/* ── NOTIFICATION BELL & POPOVER ────────────────────────────── */
.ot-notif-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ot-notif-btn {
  position: relative;
  padding: 6px 10px !important;
  border-radius: 50% !important;
  font-size: 15px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  color: #fff;
}
.ot-notif-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.05);
}
.ot-notif-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--navy);
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
  animation: pulseBadge 2s infinite;
}
@keyframes pulseBadge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.ot-notif-popover {
  position: absolute;
  top: 100%;
  inset-inline-end: 0;
  margin-top: 10px;
  width: 330px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  z-index: 9999;
  overflow: hidden;
  animation: fadeIn .15s ease;
  text-align: start;
}
.ot-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--warm-lt);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
}
.ot-notif-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ot-notif-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  cursor: pointer;
  transition: background .12s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ot-notif-item:hover {
  background: var(--warm-lt);
}
.ot-notif-item:last-child {
  border-bottom: none;
}
.ot-notif-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}

/* ── Windows Desktop Notification Banner ──────────────────────── */
.ot-desktop-notif-banner {
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.ot-notif-perm-box {
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
}
.ot-notif-perm-box.granted {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
}
.ot-notif-perm-test-btn {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s ease;
}
.ot-notif-perm-test-btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.ot-notif-perm-box.denied {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
}
.ot-notif-perm-box.default {
  background: rgba(2, 132, 199, 0.07);
  border: 1px dashed rgba(2, 132, 199, 0.35);
  text-align: center;
  padding: 8px;
}
.ot-notif-perm-enable-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
  transition: all .15s ease;
}
.ot-notif-perm-enable-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.ot-notif-perm-box.unsupported {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--muted);
  text-align: center;
}

/* ── MOBILE RESPONSIVE ENHANCEMENTS (PRO COMPREHENSIVE) ──────── */
@media (max-width: 768px) {
  .wrap { padding: 8px 6px; }

  /* 1. Header & Navigation */
  #ot-nav {
    padding: 0 !important;
    gap: 0 !important;
  }
  .ot-nav-top {
    height: auto !important;
    min-height: 52px;
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }
  .ot-nav-brand {
    justify-content: flex-start !important;
    gap: 8px;
  }
  .ot-nav-logo-chip {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
  }
  .ot-nav-logo-chip img {
    width: 100% !important;
    height: 100% !important;
  }
  .ot-nav-brand-name {
    font-size: 13.5px !important;
  }
  .ot-nav-brand-sub {
    display: none !important;
  }
  .ot-nav-user {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  .ot-nav-pill-btn {
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
  .ot-nav-profile-btn {
    height: 30px !important;
    padding: 0 6px !important;
  }
  .ot-nav-profile-info {
    display: none !important;
  }
  .ot-nav-logout-btn {
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
  .ot-nav-tabs {
    display: flex !important;
    overflow-x: auto !important;
    width: 100% !important;
    padding: 0 8px 6px !important;
    gap: 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  .ot-nav-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* 2. Cards & Structure */
  .card {
    padding: 14px 12px !important;
    margin-bottom: 14px !important;
    border-radius: 4px !important;
  }
  .card h2 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  /* 3. Requests & Weekly Tables (CRITICAL: Enforce min-width & smooth touch scroll) */
  .ot-requests-table,
  .ot-weekly-table {
    min-width: 860px !important;
    font-size: 12.5px !important;
  }
  .tblwrap,
  .tblwrap-requests {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 4px !important;
  }
  .tblwrap-requests {
    max-height: 75vh !important;
  }
  .ot-requests-table thead th,
  .ot-weekly-table thead th {
    padding: 9px 6px !important;
    font-size: 12px !important;
  }
  .ot-requests-table tbody td,
  .ot-weekly-table tbody td {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
  .trainer-header-row td {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  /* 4. Daily Days Grid (5 Days in 1 Row — No Orphan Days) */
  .ot-days-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  .ot-day-input {
    min-width: 0 !important;
  }
  .ot-day-input label {
    font-size: 10.5px !important;
    margin-bottom: 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: center;
  }
  .ot-day-input input {
    padding: 7px 2px !important;
    font-size: 11.5px !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* 5. Form Grids */
  .ot-form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ot-form-group {
    margin-bottom: 10px !important;
  }

  /* 6. Summary Strips & KPI Cards */
  .ot-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .ot-summary-item {
    padding: 10px 8px !important;
  }
  .ot-summary-item span {
    font-size: 22px !important;
  }
  .ot-summary-item small {
    font-size: 11px !important;
  }

  /* 7. Branch Header & Badges */
  .branch-block-header {
    padding: 10px 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .branch-badges-group {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .branch-badge {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
  }

  /* 8. Week Actions Bar */
  .ot-week-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .ot-week-actions .ot-btn,
  .ot-week-actions .ot-status-badge {
    flex: 1 1 calc(50% - 6px) !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    padding: 8px 6px !important;
  }

  /* 9. Regional Filter Bar */
  .ot-filter-bar {
    padding: 8px 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .ot-filter-pills {
    width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  .ot-pill-btn {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* 10. Modals */
  .ot-modal {
    padding: 8px !important;
  }
  .ot-modal-box {
    padding: 16px 14px !important;
    max-height: 94vh !important;
    border-radius: 6px !important;
  }
  .ot-modal-box h3 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }
  .ot-modal-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
  }
  .ot-modal-actions button {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px !important;
  }

  /* 11. Data Management Grids */
  .manage-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .ot-trainer-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .ot-trainer-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  /* 12. Notifications & Popovers */
  .ot-notif-popover {
    width: calc(100vw - 20px) !important;
    inset-inline-end: -10px !important;
  }

  /* 13. Charts */
  #ot-charts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── Trainer Live Status Pulse Badge ────────────────────────────── */
.ot-badge-pulse-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  animation: ot-pulse-glow 1.8s infinite;
  transition: transform 0.15s ease;
  white-space: nowrap;
}
.ot-badge-pulse-new:hover {
  transform: scale(1.08);
}
@keyframes ot-pulse-glow {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
  70% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* ── Enhanced Archive Cards ──────────────────────────────────────── */
.ot-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.ot-archive-card-pro {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ot-archive-card-pro:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--blue);
}
.ot-archive-kpi-pill {
  background: var(--bg);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ot-chart-badge-trend {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(14, 165, 233, 0.15);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.3);
}
[data-theme="dark"] .ot-chart-badge-trend {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

/* ── 3-Column Charts Grid Responsive Layout ── */
#ot-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 992px) {
  #ot-charts-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Section Head Routing Badge in Trainer Form ── */
.ot-sh-routing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  color: #0369a1;
  font-weight: 600;
  margin: 0;
  box-sizing: border-box;
  width: auto;
  animation: fadeIn 0.2s ease-in-out;
}
.ot-sh-routing-badge .ot-sh-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.ot-sh-routing-badge .ot-sh-label {
  color: #0284c7;
  font-weight: 700;
}
.ot-sh-routing-badge .ot-sh-name {
  color: var(--navy);
  font-weight: 800;
}
[data-theme="dark"] .ot-sh-routing-badge {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #bae6fd;
}
[data-theme="dark"] .ot-sh-routing-badge .ot-sh-label {
  color: #38bdf8;
}
[data-theme="dark"] .ot-sh-routing-badge .ot-sh-name {
  color: #f8fafc;
}

/* ── Proof of Work / Assignment Image Upload & Viewer ───────── */
.ot-proof-upload-zone {
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: var(--warm-lt);
  transition: all 0.2s ease;
  overflow: hidden;
  margin-top: 4px;
}
.ot-proof-upload-zone:hover {
  border-color: var(--blue);
  background: rgba(2, 132, 199, 0.04);
}
.ot-proof-upload-zone.dragover {
  border-color: var(--blue) !important;
  background: rgba(2, 132, 199, 0.1) !important;
  transform: scale(1.005);
}
.ot-proof-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.3);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  line-height: 1.3;
}
.ot-proof-badge-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
  transform: translateY(-1px);
}
[data-theme="dark"] .ot-proof-upload-zone {
  border-color: #2d3f5e;
  background: #141e30;
}
[data-theme="dark"] .ot-proof-upload-zone:hover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
}
[data-theme="dark"] .ot-proof-upload-zone.dragover {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
}
[data-theme="dark"] .ot-proof-badge-btn {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
}
[data-theme="dark"] .ot-proof-badge-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.3);
}
#modal-proof-viewer .ot-modal-box {
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPop {
  0% { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   v4.6.1 Trainer View Overhaul: Balanced Layout & Zero Empty Voids
   ═══════════════════════════════════════════════════════════════════ */

/* Top 4 Configuration Selects Grid */
.ot-trainer-top-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) {
  .ot-trainer-top-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .ot-trainer-top-grid { grid-template-columns: 1fr; }
}

/* Section Head Routing & Context Ribbon */
.ot-trainer-context-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(56, 189, 248, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 10px;
  padding: 8px 14px;
  margin: 10px 0 16px;
  min-height: 42px;
}
[data-theme="dark"] .ot-trainer-context-bar {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.25);
}

/* Executive KPI Metrics Ribbon (4 Cards) */
.ot-kpi-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 16px 0;
}
@media (max-width: 980px) {
  .ot-kpi-metric-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ot-kpi-metric-strip { grid-template-columns: 1fr; }
}

.ot-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-hover, #f8fafc);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ot-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.ot-kpi-card .ot-kpi-icon {
  font-size: 26px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
}
.ot-kpi-card .ot-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ot-kpi-card .ot-kpi-lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ot-kpi-card .ot-kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}
.ot-kpi-card .ot-kpi-val small {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-inline-start: 2px;
}
.ot-kpi-card .ot-kpi-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* KPI Card Variants */
.ot-kpi-card.base {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.04);
}
.ot-kpi-card.base .ot-kpi-icon { background: rgba(56, 189, 248, 0.12); }
.ot-kpi-card.base .ot-kpi-val { color: #0284c7; }

.ot-kpi-card.weekday {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.04);
}
.ot-kpi-card.weekday .ot-kpi-icon { background: rgba(99, 102, 241, 0.12); }
.ot-kpi-card.weekday .ot-kpi-val { color: var(--blue); }

.ot-kpi-card.weekend {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.04);
}
.ot-kpi-card.weekend .ot-kpi-icon { background: rgba(245, 158, 11, 0.12); }
.ot-kpi-card.weekend .ot-kpi-val { color: var(--amber-tx); }

.ot-kpi-card.total {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
}
.ot-kpi-card.total .ot-kpi-icon { background: rgba(16, 185, 129, 0.14); }
.ot-kpi-card.total .ot-kpi-val { color: #059669; }

/* Dark mode for KPI Cards */
[data-theme="dark"] .ot-kpi-card {
  background: #151f30;
  border-color: #2d3f5e;
}
[data-theme="dark"] .ot-kpi-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .ot-kpi-card.base {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.3);
}
[data-theme="dark"] .ot-kpi-card.base .ot-kpi-val { color: #38bdf8; }

[data-theme="dark"] .ot-kpi-card.weekday {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}
[data-theme="dark"] .ot-kpi-card.weekday .ot-kpi-val { color: #818cf8; }

[data-theme="dark"] .ot-kpi-card.weekend {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}
[data-theme="dark"] .ot-kpi-card.weekend .ot-kpi-val { color: #fbbf24; }

[data-theme="dark"] .ot-kpi-card.total {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
}
[data-theme="dark"] .ot-kpi-card.total .ot-kpi-val { color: #34d399; }

/* Balanced 2-Column Bottom Grid (Task & Proof) */
.ot-trainer-bottom-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  margin: 18px 0 10px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .ot-trainer-bottom-grid { grid-template-columns: 1fr; }
}

.ot-bottom-card {
  display: flex;
  flex-direction: column;
  background: var(--card-hover, #f8fafc);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-sizing: border-box;
}
[data-theme="dark"] .ot-bottom-card {
  background: #151f30;
  border-color: #2d3f5e;
}
.ot-bottom-card .ot-card-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-theme="dark"] .ot-bottom-card .ot-card-label {
  color: #f8fafc;
}

.ot-task-textarea {
  width: 100%;
  flex: 1;
  min-height: 106px;
  border: 1.5px solid var(--card-line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.5;
  transition: border-color 0.2s;
}
.ot-task-textarea:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.ot-bottom-card .ot-proof-upload-zone {
  flex: 1;
  min-height: 106px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 2px dashed rgba(56, 189, 248, 0.45);
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.03);
  box-sizing: border-box;
  padding: 8px;
}

/* Submit Trainer Button Styling */
.ot-btn-submit-trainer {
  width: 100%;
  font-size: 15px;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff !important;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ot-btn-submit-trainer:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.5);
  filter: brightness(1.08);
}
.ot-btn-submit-trainer:active {
  transform: translateY(0);
}

/* Daily Schedule Cell Base Work Pill in Tables (Admin, Section Head, Trainer) */
.tbl-day-base-pill {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 3px;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding: 1px 2px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}
.tbl-day-base-pill.weekend {
  color: #94a3b8;
  background: rgba(56, 189, 248, 0.05);
  opacity: 0.9;
}
[data-theme="dark"] .tbl-day-base-pill {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
}
[data-theme="dark"] .tbl-day-base-pill.weekend {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.08);
}
.tbl-day-ot-span {
  font-size: 9.5px;
  color: #d97706;
  font-weight: 700;
  margin-top: 1px;
  white-space: nowrap;
}
[data-theme="dark"] .tbl-day-ot-span {
  color: #f59e0b;
}