/* ===== BHT v5.0 Premium — Custom Stylesheet ===== */

:root {
  --bht-primary: #2563eb;
  --bht-primary-light: #eff6ff;
  --bht-accent-orange: #f97316;
  --bht-accent-teal: #14b8a6;
  --bht-accent-pink: #ec4899;
  --bht-success: #0f9d58;
  --bht-danger: #ea4335;
  --bht-warning: #f9ab00;
  --bht-info: #4285f4;
  --bht-card-bg: #ffffff;
  --bht-body-bg: #f0f2f5;
  --bht-text: #1f2937;
  --bht-text-muted: #5f6776;
  --bht-border: #e5e7eb;
  --bht-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --bht-shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.05);
  --bht-shadow-lg: 0 10px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05);
  --bht-shadow-xl: 0 20px 40px -12px rgba(0,0,0,.15);
  --bht-radius: 14px;
  --bht-radius-sm: 10px;
  --bht-sidebar-width: 260px;
  --bht-navbar-height: 60px;
  --bht-transition: .25s cubic-bezier(.4,0,.2,1);
  --bht-transition-slow: .4s cubic-bezier(.4,0,.2,1);
  --bht-glass-bg: rgba(255,255,255,.72);
  --bht-glass-border: rgba(255,255,255,.25);
  --bht-glass-blur: 16px;
  --bht-gradient-primary: linear-gradient(135deg, #2563eb, #7c3aed);
  --bht-gradient-success: linear-gradient(135deg, #059669, #10b981);
  --bht-gradient-danger: linear-gradient(135deg, #dc2626, #f97316);
  --bht-gradient-warning: linear-gradient(135deg, #f59e0b, #fbbf24);
  --bht-gradient-info: linear-gradient(135deg, #3b82f6, #06b6d4);
  --bht-gradient-purple: linear-gradient(135deg, #7c3aed, #a855f7);
  --bht-gradient-dark: linear-gradient(135deg, #0f172a, #1e293b);
  --bht-gradient-orange: linear-gradient(135deg, #f97316, #fb923c);
  --bht-gradient-teal: linear-gradient(135deg, #14b8a6, #2dd4bf);
  --bht-gradient-pink: linear-gradient(135deg, #ec4899, #f472b6);
}

/* ===== Dark theme ===== */
[data-theme="dark"] {
  --bht-card-bg: #161b22;
  --bht-body-bg: #0d1117;
  --bht-text: #e6edf3;
  --bht-text-muted: #8b949e;
  --bht-border: #30363d;
  --bht-shadow: 0 1px 3px rgba(0,0,0,.3);
  --bht-shadow-md: 0 4px 6px rgba(0,0,0,.35);
  --bht-shadow-lg: 0 10px 25px rgba(0,0,0,.4);
  --bht-shadow-xl: 0 20px 40px rgba(0,0,0,.5);
  --bht-glass-bg: rgba(22,27,34,.8);
  --bht-glass-border: rgba(48,54,61,.5);
  --bht-primary-light: #1c2d4a;
}

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

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .offcanvas {
  background-color: var(--bht-card-bg);
  color: var(--bht-text);
  border-color: var(--bht-border);
}

[data-theme="dark"] .table { color: var(--bht-text); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #0d1117;
  color: var(--bht-text);
  border-color: var(--bht-border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #161b22;
  color: var(--bht-text);
  border-color: var(--bht-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}
[data-theme="dark"] .dropdown-item { color: var(--bht-text); }
[data-theme="dark"] .dropdown-item:hover { background-color: #30363d; }
[data-theme="dark"] .list-group-item {
  background-color: var(--bht-card-bg);
  color: var(--bht-text);
  border-color: var(--bht-border);
}
[data-theme="dark"] .bg-light { background-color: #161b22 !important; }
[data-theme="dark"] .border-bottom { border-color: var(--bht-border) !important; }
[data-theme="dark"] .text-dark { color: var(--bht-text) !important; }
[data-theme="dark"] .login-container {
  background: linear-gradient(135deg, #0a0e14 0%, #111827 30%, #1e1b4b 60%, #0a0e14 100%);
}
[data-theme="dark"] .login-card { background: var(--bht-card-bg); }
[data-theme="dark"] .sidebar { background: var(--bht-card-bg); border-color: var(--bht-border); }
[data-theme="dark"] .sidebar-link:hover { background: rgba(37,99,235,.12); }
[data-theme="dark"] .sidebar-link.active { background: rgba(37,99,235,.18); }

/* ===== Global ===== */
* { font-family: 'Heebo', sans-serif; }

body {
  background: var(--bht-body-bg);
  color: var(--bht-text);
  margin: 0;
  overflow-x: hidden;
  transition: background-color var(--bht-transition-slow), color var(--bht-transition-slow);
}

/* ===== Scroll-triggered animations ===== */
.fade-in {
  animation: fadeIn .4s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-in {
  animation: slideIn .35s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.slide-up {
  animation: slideUp .4s ease-out both;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.scale-in {
  animation: scaleIn .3s ease-out;
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

.bounce-in {
  animation: bounceIn .5s cubic-bezier(.68,-.55,.27,1.55);
}
@keyframes bounceIn {
  from { opacity: 0; transform: scale(.3); }
  50% { transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}

/* Staggered children animation */
.stagger-children > * {
  animation: slideUp .4s ease-out both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 50ms; }
.stagger-children > *:nth-child(3) { animation-delay: 100ms; }
.stagger-children > *:nth-child(4) { animation-delay: 150ms; }
.stagger-children > *:nth-child(5) { animation-delay: 200ms; }
.stagger-children > *:nth-child(6) { animation-delay: 250ms; }

/* ===== Login Screen ===== */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #312e81 50%, #1e1b4b 75%, #0f172a 100%);
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.login-container::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,.15) 0%, transparent 70%);
  top: -200px;
  right: -200px;
  border-radius: 50%;
  animation: floatOrb 8s ease-in-out infinite;
}

.login-container::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(37,99,235,.12) 0%, transparent 70%);
  bottom: -150px;
  left: -100px;
  border-radius: 50%;
  animation: floatOrb 10s ease-in-out infinite reverse;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(.9); }
}

.login-card {
  background: var(--bht-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--bht-glass-border);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--bht-shadow-xl), 0 0 60px rgba(99,102,241,.08);
  text-align: center;
  position: relative;
  z-index: 1;
  animation: scaleIn .5s ease-out;
}

.login-logo {
  width: 88px;
  height: 88px;
  background: var(--bht-gradient-primary);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2.5rem;
  color: #fff;
  box-shadow: 0 8px 32px rgba(37,99,235,.3);
  animation: bounceIn .6s ease-out;
  position: relative;
}
.login-logo::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 26px;
  background: var(--bht-gradient-primary);
  opacity: .2;
  z-index: -1;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: .15; transform: scale(1); }
  50% { opacity: .3; transform: scale(1.06); }
}

.login-title {
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: .25rem;
  background: var(--bht-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.login-subtitle {
  color: var(--bht-text-muted);
  margin-bottom: 2rem;
  font-size: 1rem;
}

.pin-input {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  letter-spacing: .6rem;
  padding: .85rem;
  border: 2px solid var(--bht-border);
  border-radius: var(--bht-radius);
  background: var(--bht-body-bg);
  color: var(--bht-text);
  transition: all var(--bht-transition);
}
.pin-input:focus {
  outline: none;
  border-color: var(--bht-primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
  transform: scale(1.02);
}

.pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bht-border);
  transition: all var(--bht-transition);
}
.pin-dot.filled {
  background: var(--bht-primary);
  box-shadow: 0 0 8px rgba(37,99,235,.4);
  transform: scale(1.15);
}

.login-footer { opacity: .65; }

#login-btn {
  background: var(--bht-gradient-primary);
  border: none;
  border-radius: var(--bht-radius);
  padding: .75rem;
  font-weight: 600;
  font-size: 1.05rem;
  transition: all var(--bht-transition);
  box-shadow: 0 4px 15px rgba(37,99,235,.3);
}
#login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,99,235,.4);
}
#login-btn:active {
  transform: translateY(0);
}

/* ===== Navbar ===== */
#main-navbar {
  background: var(--bht-gradient-dark) !important;
  height: var(--bht-navbar-height);
  z-index: 1040;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#main-navbar .navbar-brand {
  font-size: 1.15rem;
  letter-spacing: .3px;
}

/* ===== Sidebar ===== */
.sidebar {
  width: var(--bht-sidebar-width);
  background: var(--bht-card-bg);
  border-left: 1px solid var(--bht-border);
  height: calc(100vh - var(--bht-navbar-height));
  position: sticky;
  top: var(--bht-navbar-height);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  z-index: 1030;
  transition: width var(--bht-transition-slow), transform var(--bht-transition-slow);
}

.sidebar-nav {
  padding: .5rem .6rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--bht-radius-sm);
  color: var(--bht-text);
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
  transition: all var(--bht-transition);
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
}
.sidebar-link i {
  font-size: 1.15rem;
  width: 24px;
  text-align: center;
  opacity: .65;
  transition: all var(--bht-transition);
}
.sidebar-link span {
  transition: all var(--bht-transition);
}
.sidebar-link:hover {
  background: var(--bht-primary-light);
  color: var(--bht-primary);
  transform: translateX(-2px);
}
.sidebar-link:hover i { opacity: 1; }
.sidebar-link.active {
  background: var(--bht-primary-light);
  color: var(--bht-primary);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--bht-primary);
}
.sidebar-link.active i { opacity: 1; }

.sidebar-footer {
  padding: 1rem;
  text-align: center;
  color: var(--bht-text-muted);
  border-top: 1px solid var(--bht-border);
  font-size: .8rem;
}

/* ===== Main Content ===== */
.main-content {
  padding: 1.5rem 2rem;
  min-height: calc(100vh - var(--bht-navbar-height));
  max-width: 100%;
  overflow-x: hidden;
}

/* ===== Cards — Glass morphism ===== */
.card {
  border: 1px solid var(--bht-border);
  border-radius: var(--bht-radius);
  box-shadow: var(--bht-shadow);
  transition: all var(--bht-transition);
  background: var(--bht-card-bg);
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--bht-shadow-md);
}
.card-clickable {
  cursor: pointer;
}
.card-clickable:hover {
  transform: translateY(-4px);
  box-shadow: var(--bht-shadow-lg);
}
.card-clickable:active {
  transform: translateY(-1px);
}

/* Glass card variant */
.card-glass {
  background: var(--bht-glass-bg);
  backdrop-filter: blur(var(--bht-glass-blur));
  -webkit-backdrop-filter: blur(var(--bht-glass-blur));
  border: 1px solid var(--bht-glass-border);
}

/* ===== Stat Cards — Premium gradient icons ===== */
.stat-card {
  position: relative;
  overflow: hidden;
  border: none;
  transition: all var(--bht-transition);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: .08;
  transition: all var(--bht-transition-slow);
}
.stat-card:hover::before {
  transform: scale(1.3);
  opacity: .12;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bht-shadow-lg);
}

.stat-card .stat-icon {
  position: absolute;
  top: .8rem;
  left: .8rem;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.stat-card .stat-icon.gradient-primary { background: var(--bht-gradient-primary); }
.stat-card .stat-icon.gradient-success { background: var(--bht-gradient-success); }
.stat-card .stat-icon.gradient-danger { background: var(--bht-gradient-danger); }
.stat-card .stat-icon.gradient-warning { background: var(--bht-gradient-warning); }
.stat-card .stat-icon.gradient-info { background: var(--bht-gradient-info); }
.stat-card .stat-icon.gradient-purple { background: var(--bht-gradient-purple); }

/* Fallback for old stat-icon (just icon, no gradient wrapper) */
.stat-card > .stat-icon:not([class*="gradient"]) {
  background: none;
  box-shadow: none;
  font-size: 2.5rem;
  opacity: .1;
  width: auto;
  height: auto;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.5px;
}
.stat-card .stat-label {
  font-size: .82rem;
  color: var(--bht-text-muted);
  font-weight: 500;
  margin-top: 2px;
}

/* ===== Avatar ===== */
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: all var(--bht-transition);
}
.avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.avatar-sm { width: 34px; height: 34px; font-size: .75rem; border-radius: 9px; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.3rem; border-radius: 14px; }
.avatar-xl { width: 84px; height: 84px; font-size: 1.8rem; border-radius: 20px; }

/* ===== Badges ===== */
.badge-status {
  font-size: .75rem;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: .2px;
  transition: all var(--bht-transition);
}
.badge-status:hover { transform: scale(1.05); }

.badge-active { background: #dcfce7; color: #166534; }
.badge-inactive { background: #fee2e2; color: #991b1b; }
.badge-pending { background: #fef3c7; color: #92400e; }

[data-theme="dark"] .badge-active { background: #064e3b; color: #6ee7b7; }
[data-theme="dark"] .badge-inactive { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .badge-pending { background: #78350f; color: #fcd34d; }

/* Badge pulse animation */
.badge-pulse {
  position: relative;
}
.badge-pulse::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  animation: badgePulse 2s ease-in-out infinite;
  background: inherit;
  z-index: -1;
}
@keyframes badgePulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: .3; transform: scale(1.4); }
}

/* ===== Skeleton Loading with shimmer ===== */
.skeleton {
  background: linear-gradient(90deg,
    var(--bht-border) 0%,
    rgba(255,255,255,.4) 40%,
    rgba(255,255,255,.4) 60%,
    var(--bht-border) 100%
  );
  background-size: 300% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: 8px;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg,
    #30363d 0%,
    #3d444d 40%,
    #3d444d 60%,
    #30363d 100%
  );
  background-size: 300% 100%;
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: 14px; }
.skeleton-card { height: 130px; border-radius: var(--bht-radius); }
.skeleton-avatar { width: 42px; height: 42px; border-radius: 12px; }
.skeleton-circle { width: 48px; height: 48px; border-radius: 50%; }

@keyframes shimmer {
  0% { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}

/* ===== Table — Premium ===== */
.table-bht {
  border-collapse: separate;
  border-spacing: 0;
}
.table-bht thead th {
  background: var(--bht-body-bg);
  font-weight: 600;
  font-size: .82rem;
  color: var(--bht-text-muted);
  border-bottom: 2px solid var(--bht-border);
  padding: .85rem 1rem;
  position: sticky;
  top: 0;
  z-index: 2;
  text-transform: none;
  letter-spacing: .2px;
}
.table-bht tbody td {
  padding: .8rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--bht-border);
  transition: background var(--bht-transition);
}
.table-bht tbody tr {
  transition: all var(--bht-transition);
}
.table-bht tbody tr:hover {
  background: var(--bht-primary-light);
}
.table-bht tbody tr:hover td {
  border-bottom-color: rgba(37,99,235,.1);
}
.table-bht tbody tr.selected {
  background: rgba(37,99,235,.12);
}
.table-bht tbody tr:last-child td {
  border-bottom: none;
}

/* ===== Attendance buttons ===== */
.att-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 2px solid var(--bht-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--bht-transition);
  font-size: 1.1rem;
  background: var(--bht-card-bg);
}
.att-btn:hover { transform: scale(1.12); box-shadow: var(--bht-shadow-md); }
.att-btn.present { background: #dcfce7; border-color: #16a34a; color: #16a34a; }
.att-btn.absent { background: #fee2e2; border-color: #dc2626; color: #dc2626; }
.att-btn.late { background: #fef3c7; border-color: #d97706; color: #d97706; }
.att-btn.selected { box-shadow: 0 0 0 3px rgba(37,99,235,.3); transform: scale(1.08); }

/* ===== Tabs ===== */
.nav-tabs-bht {
  border-bottom: 2px solid var(--bht-border);
  gap: 0;
}
.nav-tabs-bht .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--bht-text-muted);
  font-weight: 500;
  padding: .75rem 1.25rem;
  transition: all var(--bht-transition);
  border-radius: 0;
  position: relative;
}
.nav-tabs-bht .nav-link:hover {
  color: var(--bht-primary);
  border-bottom-color: rgba(37,99,235,.3);
}
.nav-tabs-bht .nav-link.active {
  color: var(--bht-primary);
  border-bottom-color: var(--bht-primary);
  font-weight: 600;
}

/* ===== Search ===== */
.search-box {
  position: relative;
}
.search-box i {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--bht-text-muted);
  transition: color var(--bht-transition);
  z-index: 1;
}
.search-box input {
  padding-right: 40px;
  border-radius: var(--bht-radius-sm);
  border: 2px solid var(--bht-border);
  transition: all var(--bht-transition);
}
.search-box input:focus {
  border-color: var(--bht-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.search-box:focus-within i {
  color: var(--bht-primary);
}

/* ===== Form controls — enhanced ===== */
.form-control, .form-select {
  border-radius: var(--bht-radius-sm);
  border: 2px solid var(--bht-border);
  padding: .6rem .85rem;
  transition: all var(--bht-transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bht-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* ===== Toast — slide-in animation ===== */
.toast-bht {
  border-radius: var(--bht-radius);
  border: none;
  box-shadow: var(--bht-shadow-xl);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ===== Modal — backdrop blur ===== */
.modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-content {
  border-radius: 18px;
  border: 1px solid var(--bht-border);
  box-shadow: var(--bht-shadow-xl);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--bht-border);
  padding: 1.25rem 1.5rem;
}
.modal-footer {
  border-top: 1px solid var(--bht-border);
  padding: 1rem 1.5rem;
}

/* ===== Page Header ===== */
.page-header {
  margin-bottom: 1.5rem;
  animation: slideUp .4s ease-out;
}
.page-header h1 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: .25rem;
  letter-spacing: -.3px;
}
.page-header h1 i {
  opacity: .8;
}
.page-header p {
  color: var(--bht-text-muted);
  margin-bottom: 0;
  font-size: .9rem;
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: 3.5rem 2rem;
  color: var(--bht-text-muted);
}
.empty-state i {
  font-size: 4.5rem;
  opacity: .2;
  display: block;
  margin-bottom: 1rem;
  background: var(--bht-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Student Card header ===== */
.student-header {
  background: var(--bht-gradient-primary);
  color: #fff;
  border-radius: var(--bht-radius) var(--bht-radius) 0 0;
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.student-header::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  top: -80px;
  right: -60px;
}
.student-header::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  bottom: -60px;
  left: -40px;
}
.student-header .avatar-xl {
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin: 0 auto 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  border: 3px solid rgba(255,255,255,.25);
}

/* ===== Camera Grid ===== */
.camera-feed {
  border-radius: var(--bht-radius);
  overflow: hidden;
  background: #000;
  position: relative;
  aspect-ratio: 16/9;
  box-shadow: var(--bht-shadow-lg);
}
.camera-feed iframe,
.camera-feed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
}
.camera-label {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  color: #fff;
  padding: .6rem .85rem;
  font-size: .85rem;
  font-weight: 500;
}

/* ===== Phone Dialer ===== */
.dialer-display {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  padding: 1.2rem;
  direction: ltr;
  letter-spacing: 3px;
  min-height: 65px;
  border-bottom: 2px solid var(--bht-border);
  font-variant-numeric: tabular-nums;
}
.dialer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 290px;
  margin: 1.2rem auto;
}
.dialer-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: var(--bht-body-bg);
  font-size: 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--bht-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: var(--bht-shadow);
}
.dialer-btn:hover {
  background: var(--bht-primary-light);
  transform: scale(1.08);
  box-shadow: var(--bht-shadow-md);
}
.dialer-btn:active { transform: scale(.95); }
.dialer-call {
  background: var(--bht-gradient-success) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(15,157,88,.3) !important;
}
.dialer-call:hover {
  box-shadow: 0 6px 20px rgba(15,157,88,.4) !important;
}
.dialer-delete {
  background: transparent !important;
  color: var(--bht-text-muted) !important;
  box-shadow: none !important;
}

/* ===== Charts ===== */
.chart-container {
  position: relative;
  height: 300px;
}

/* ===== Buttons — enhanced ===== */
.btn-primary {
  background: var(--bht-gradient-primary);
  border: none;
  box-shadow: 0 2px 8px rgba(37,99,235,.2);
  transition: all var(--bht-transition);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37,99,235,.3);
  background: var(--bht-gradient-primary);
  filter: brightness(1.05);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-success {
  box-shadow: 0 2px 8px rgba(15,157,88,.2);
}
.btn-success:hover {
  box-shadow: 0 4px 12px rgba(15,157,88,.3);
  transform: translateY(-1px);
}

.btn-danger {
  box-shadow: 0 2px 8px rgba(234,67,53,.2);
}
.btn-danger:hover {
  box-shadow: 0 4px 12px rgba(234,67,53,.3);
  transform: translateY(-1px);
}

/* ===== Progress bars ===== */
.progress {
  border-radius: 10px;
  overflow: hidden;
  background: var(--bht-border);
}
.progress-bar {
  border-radius: 10px;
  transition: width .6s ease;
  background: var(--bht-gradient-primary);
}

/* ===== Finance progress ===== */
.finance-progress {
  height: 10px;
  border-radius: 6px;
  background: var(--bht-border);
  overflow: hidden;
}
.finance-progress-bar {
  height: 100%;
  border-radius: 6px;
  transition: width .6s ease;
  background: var(--bht-gradient-success);
}

/* ===== Kanban columns ===== */
.kanban-col .card {
  border-right-width: 4px !important;
  transition: all var(--bht-transition);
}
.kanban-col .card:hover {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: var(--bht-shadow-md);
}

/* ===== Calendar grid ===== */
#cal-grid .col {
  transition: background var(--bht-transition);
  cursor: default;
}
#cal-grid .col:hover {
  background: var(--bht-primary-light) !important;
}

/* ===== Scrollbar — see section 11 below ===== */

/* ===== Misc utilities ===== */
.clickable { cursor: pointer; }
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gap-row { row-gap: 1rem; }

/* Gradient text utility — see v5.9 section below */

/* Hover glow effect */
.glow-hover {
  transition: all var(--bht-transition);
}
.glow-hover:hover {
  box-shadow: 0 0 20px rgba(37,99,235,.15), var(--bht-shadow-lg);
}

/* Pulse dot (live indicator) */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bht-success);
  display: inline-block;
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--bht-success);
  opacity: 0;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.8); }
}

/* Gradient divider */
.divider-gradient {
  height: 3px;
  border: none;
  background: var(--bht-gradient-primary);
  border-radius: 2px;
  opacity: .3;
}

/* Card with colored top border */
.card-top-primary { border-top: 3px solid var(--bht-primary); }
.card-top-success { border-top: 3px solid var(--bht-success); }
.card-top-danger { border-top: 3px solid var(--bht-danger); }
.card-top-warning { border-top: 3px solid var(--bht-warning); }

/* Hover lift for any element */
.hover-lift {
  transition: all var(--bht-transition);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--bht-shadow-lg);
}

/* Number counter animation */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.count-anim {
  animation: countUp .5s ease-out;
}

/* Print styles — see comprehensive @media print in section 10 below */

/* Custom Bootstrap overrides */
.dropdown-menu {
  border-radius: var(--bht-radius);
  border: 1px solid var(--bht-border);
  box-shadow: var(--bht-shadow-lg);
  padding: .5rem;
  animation: scaleIn .2s ease-out;
}
.dropdown-item {
  border-radius: 8px;
  padding: .5rem .75rem;
  transition: all var(--bht-transition);
}
.dropdown-item:hover {
  background: var(--bht-primary-light);
}

/* Badge sizes in sidebar */
.sidebar-badge {
  font-size: .65rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: auto;
}

/* ===== Sidebar Collapsible Categories ===== */
.sidebar-category {
  margin-bottom: 2px;
}

.sidebar-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: none;
  border-radius: var(--bht-radius-sm);
  color: var(--bht-text-muted);
  font-weight: 600;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--bht-transition);
  text-align: right;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.sidebar-cat-header:hover {
  background: var(--bht-primary-light);
  color: var(--bht-primary);
}

.sidebar-cat-icon {
  font-size: 1rem;
  width: 22px;
  text-align: center;
  opacity: .7;
}

.sidebar-cat-title {
  flex: 1;
  text-align: right;
}

.sidebar-cat-badge {
  font-size: .65rem;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--bht-border);
  color: var(--bht-text-muted);
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  line-height: 1.5;
}

.sidebar-cat-header:hover .sidebar-cat-badge {
  background: var(--bht-primary);
  color: #fff;
}

.sidebar-cat-arrow {
  font-size: .7rem;
  transition: transform var(--bht-transition);
  opacity: .65;
}

.sidebar-cat-header[aria-expanded="false"] .sidebar-cat-arrow {
  transform: rotate(90deg);
}

[dir="rtl"] .sidebar-cat-header[aria-expanded="false"] .sidebar-cat-arrow {
  transform: rotate(-90deg);
}

.sidebar-cat-body {
  overflow: hidden;
  max-height: 500px;
  transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  opacity: 1;
}

.sidebar-cat-body.collapsed {
  max-height: 0;
  opacity: 0;
}

.sidebar-cat-body .sidebar-link {
  padding-right: 40px;
  font-size: .85rem;
}

[data-theme="dark"] .sidebar-cat-header:hover {
  background: rgba(37,99,235,.12);
}

[data-theme="dark"] .sidebar-cat-badge {
  background: var(--bht-border);
  color: var(--bht-text-muted);
}

[data-theme="dark"] .sidebar-cat-header:hover .sidebar-cat-badge {
  background: var(--bht-primary);
  color: #fff;
}

/* Tooltip with gradient */
.tooltip-inner {
  background: var(--bht-gradient-dark);
  border-radius: 8px;
  padding: .4rem .75rem;
}

/* Loading spinner overlay */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
  z-index: 10;
}
[data-theme="dark"] .loading-overlay {
  background: rgba(13,17,23,.7);
}

/* Custom spinner */
.spinner-gradient {
  width: 40px;
  height: 40px;
  border: 3px solid var(--bht-border);
  border-top-color: var(--bht-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Attendance row highlight */
.att-row {
  transition: all var(--bht-transition);
  border-radius: 8px;
}
.att-row:hover {
  background: var(--bht-primary-light);
}

/* Staff salary status colors */
.salary-paid { background: #dcfce7; }
.salary-pending { background: #fef3c7; }

/* Medical info card */
.medical-card {
  border-right: 4px solid var(--bht-danger);
}

/* Schedule grid */
.schedule-cell {
  min-height: 50px;
  padding: .5rem;
  border: 1px solid var(--bht-border);
  transition: background var(--bht-transition);
  cursor: pointer;
}
.schedule-cell:hover {
  background: var(--bht-primary-light);
}
.schedule-cell .badge {
  font-size: .7rem;
}

/* Activity log timeline */
.activity-item {
  position: relative;
  padding-right: 2rem;
}
.activity-item::before {
  content: '';
  position: absolute;
  right: .5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bht-border);
}
.activity-item::after {
  content: '';
  position: absolute;
  right: .25rem;
  top: .75rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bht-primary);
  border: 2px solid var(--bht-card-bg);
}

/* Theme toggle smooth */
#theme-toggle {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--bht-transition);
}
#theme-toggle:hover {
  transform: rotate(30deg);
  background: rgba(255,255,255,.15);
}

/* Checkbox and switch styling */
.form-check-input:checked {
  background-color: var(--bht-primary);
  border-color: var(--bht-primary);
}
.form-switch .form-check-input {
  transition: all var(--bht-transition);
}
.form-switch .form-check-input:checked {
  box-shadow: 0 0 8px rgba(37,99,235,.3);
}

/* ===== Navbar Logo Placeholder ===== */
.navbar-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bht-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
  transition: all var(--bht-transition);
}
.navbar-logo:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
}

/* ===== Card Hover Effects — Gradient Border ===== */
.card-hover-gradient {
  position: relative;
  transition: all var(--bht-transition);
}
.card-hover-gradient::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--bht-radius) + 1px);
  background: var(--bht-gradient-primary);
  opacity: 0;
  transition: opacity var(--bht-transition);
  z-index: -1;
}
.card-hover-gradient:hover::before {
  opacity: 1;
}
.card-hover-gradient:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: var(--bht-shadow-lg);
}

/* Stat card gradient background strip */
.stat-card-strip {
  position: relative;
  overflow: hidden;
}
.stat-card-strip::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 0 0 var(--bht-radius) var(--bht-radius);
  transition: height var(--bht-transition);
}
.stat-card-strip:hover::after {
  height: 6px;
}
.stat-card-strip.strip-primary::after { background: var(--bht-gradient-primary); }
.stat-card-strip.strip-success::after { background: var(--bht-gradient-success); }
.stat-card-strip.strip-danger::after { background: var(--bht-gradient-danger); }
.stat-card-strip.strip-warning::after { background: var(--bht-gradient-warning); }
.stat-card-strip.strip-info::after { background: var(--bht-gradient-info); }
.stat-card-strip.strip-purple::after { background: var(--bht-gradient-purple); }
.stat-card-strip.strip-orange::after { background: var(--bht-gradient-orange); }
.stat-card-strip.strip-teal::after { background: var(--bht-gradient-teal); }
.stat-card-strip.strip-pink::after { background: var(--bht-gradient-pink); }

/* Smoother table row hover (override) */
.table-bht tbody tr:hover {
  background: var(--bht-primary-light);
  box-shadow: inset 3px 0 0 var(--bht-primary);
}

/* ===== Kanban Board ===== */
.kanban-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
.kanban-column {
  min-height: 200px;
  min-width: 280px;
  flex: 1;
  background: var(--bht-body-bg);
  border-radius: var(--bht-radius);
  padding: .75rem;
}
.kanban-column-header {
  font-weight: 700;
  font-size: .9rem;
  padding: .5rem .75rem;
  margin-bottom: .75rem;
  border-radius: var(--bht-radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kanban-card {
  cursor: grab;
  transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  border-radius: var(--bht-radius-sm);
  padding: .75rem;
  margin-bottom: .5rem;
  background: var(--bht-card-bg);
  border: 1px solid var(--bht-border);
  box-shadow: var(--bht-shadow);
}
.kanban-card:hover {
  box-shadow: var(--bht-shadow-md);
  transform: translateY(-2px);
}
.kanban-card:active {
  cursor: grabbing;
  opacity: .8;
  transform: rotate(2deg);
  box-shadow: var(--bht-shadow-lg);
}
.kanban-card.dragging {
  opacity: .65;
  transform: rotate(3deg);
}
.kanban-column.drag-over {
  background: var(--bht-primary-light);
  border: 2px dashed var(--bht-primary);
}

/* ===== Phone Dialer Refinements ===== */
.dialer-btn .dialer-sub {
  font-size: .55rem;
  font-weight: 400;
  color: var(--bht-text-muted);
  display: block;
  letter-spacing: 2px;
  margin-top: -2px;
}
.dialer-hangup {
  background: var(--bht-gradient-danger) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(220,38,38,.35) !important;
}
.dialer-hangup:hover {
  box-shadow: 0 8px 28px rgba(220,38,38,.45) !important;
  transform: scale(1.08);
}
.dialer-actions {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* ===== Schedule Grid — Weekly Timetable ===== */
.schedule-grid {
  display: grid;
  border: 1px solid var(--bht-border);
  border-radius: var(--bht-radius);
  overflow: hidden;
  background: var(--bht-card-bg);
}
.schedule-grid-header {
  display: contents;
}
.schedule-grid-header .schedule-day {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bht-body-bg);
  font-weight: 700;
  font-size: .85rem;
  text-align: center;
  padding: .75rem .5rem;
  border-bottom: 2px solid var(--bht-border);
  border-left: 1px solid var(--bht-border);
  color: var(--bht-text);
}
.schedule-grid-header .schedule-day:first-child {
  border-left: none;
}
.schedule-hour-col {
  position: sticky;
  right: 0;
  z-index: 4;
  background: var(--bht-body-bg);
  font-weight: 600;
  font-size: .8rem;
  text-align: center;
  padding: .5rem;
  border-bottom: 1px solid var(--bht-border);
  border-left: 1px solid var(--bht-border);
  color: var(--bht-text-muted);
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.schedule-lesson {
  background: var(--bht-primary-light);
  border-right: 3px solid var(--bht-primary);
  border-radius: 6px;
  padding: .35rem .5rem;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  transition: all var(--bht-transition);
  cursor: pointer;
}
.schedule-lesson:hover {
  transform: scale(1.03);
  box-shadow: var(--bht-shadow-md);
}
.schedule-lesson .lesson-subject {
  font-weight: 700;
  font-size: .8rem;
}
.schedule-lesson .lesson-teacher {
  color: var(--bht-text-muted);
  font-size: .7rem;
}
.schedule-lesson.lesson-primary { border-right-color: var(--bht-primary); background: var(--bht-primary-light); }
.schedule-lesson.lesson-success { border-right-color: var(--bht-success); background: #dcfce7; }
.schedule-lesson.lesson-warning { border-right-color: var(--bht-warning); background: #fef3c7; }
.schedule-lesson.lesson-danger { border-right-color: var(--bht-danger); background: #fee2e2; }
.schedule-lesson.lesson-purple { border-right-color: #7c3aed; background: #f3e8ff; }
.schedule-lesson.lesson-teal { border-right-color: var(--bht-accent-teal); background: #ccfbf1; }

[data-theme="dark"] .schedule-lesson.lesson-primary { background: #1c2d4a; }
[data-theme="dark"] .schedule-lesson.lesson-success { background: #064e3b; }
[data-theme="dark"] .schedule-lesson.lesson-warning { background: #78350f; }
[data-theme="dark"] .schedule-lesson.lesson-danger { background: #7f1d1d; }
[data-theme="dark"] .schedule-lesson.lesson-purple { background: #2e1065; }
[data-theme="dark"] .schedule-lesson.lesson-teal { background: #134e4a; }

/* ===== Enhanced Print Styles ===== */
@media print {
  .sidebar, #main-navbar, .toast-container, #theme-toggle,
  .offcanvas, .offcanvas-backdrop, .btn-print-hide,
  .modal-backdrop, .tooltip, .popover { display: none !important; }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  .main-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .stat-card::before, .stat-card::after,
  .stat-card-strip::after,
  .card-hover-gradient::before { display: none !important; }

  .table-bht, .table {
    border-collapse: collapse !important;
  }
  .table-bht th, .table-bht td,
  .table th, .table td {
    border: 1px solid #999 !important;
    padding: .4rem .5rem !important;
    background: #fff !important;
    color: #000 !important;
  }
  .table-bht thead th, .table thead th {
    background: #eee !important;
    font-weight: 700 !important;
  }

  .badge-status {
    border: 1px solid #999;
    color: #000 !important;
    background: #f0f0f0 !important;
  }
  .avatar {
    border: 1px solid #ccc;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  a { text-decoration: none !important; color: #000 !important; }
  .page-header { margin-bottom: 1rem; }
  .page-header h1 { font-size: 1.3rem; }
}

/* ===== Mobile — Card Stacking & Table Cards ===== */
@media (max-width: 767.98px) {
  .row > [class*="col-"] > .card {
    margin-bottom: .75rem;
  }
  .stat-card .stat-value { font-size: 1.6rem; }
  .stat-card .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    border-radius: 10px;
  }

  /* Responsive table to stacked cards */
  .table-responsive-cards thead { display: none; }
  .table-responsive-cards tbody tr {
    display: block;
    margin-bottom: .75rem;
    border: 1px solid var(--bht-border);
    border-radius: var(--bht-radius-sm);
    padding: .75rem;
    background: var(--bht-card-bg);
    box-shadow: var(--bht-shadow);
  }
  .table-responsive-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .35rem 0;
    border: none;
    border-bottom: 1px solid var(--bht-border);
    font-size: .85rem;
  }
  .table-responsive-cards tbody td:last-child {
    border-bottom: none;
  }
  .table-responsive-cards tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bht-text-muted);
    font-size: .8rem;
    flex-shrink: 0;
    margin-left: 1rem;
  }

  /* Sidebar categories in mobile offcanvas */
  .offcanvas .sidebar-cat-header {
    padding: 12px 16px;
    font-size: .85rem;
  }
  .offcanvas .sidebar-cat-body .sidebar-link {
    padding: 10px 16px 10px 48px;
  }

  /* Dialer smaller on mobile */
  .dialer-grid {
    max-width: 260px;
    gap: 10px;
  }
  .dialer-btn {
    width: 64px;
    height: 64px;
    font-size: 1.3rem;
  }
  .dialer-call {
    width: 64px;
    height: 64px;
  }
  .dialer-display {
    font-size: 1.5rem;
    padding: .8rem;
  }

  /* Kanban columns stack vertically */
  .kanban-board {
    flex-direction: column;
  }
  .kanban-column {
    min-width: unset;
  }

  /* Schedule grid scroll */
  .schedule-grid-wrapper {
    overflow-x: auto;
    /* removed: -webkit-overflow-scrolling deprecated */
  }
}

/* ===== Accent Color Utilities ===== */
.text-accent-orange { color: var(--bht-accent-orange); }
.text-accent-teal { color: var(--bht-accent-teal); }
.text-accent-pink { color: var(--bht-accent-pink); }
.bg-accent-orange { background: var(--bht-accent-orange); }
.bg-accent-teal { background: var(--bht-accent-teal); }
.bg-accent-pink { background: var(--bht-accent-pink); }
.bg-accent-orange-light { background: #fff7ed; }
.bg-accent-teal-light { background: #f0fdfa; }
.bg-accent-pink-light { background: #fdf2f8; }
[data-theme="dark"] .bg-accent-orange-light { background: #431407; }
[data-theme="dark"] .bg-accent-teal-light { background: #134e4a; }
[data-theme="dark"] .bg-accent-pink-light { background: #500724; }

/* Gradient icon variants for new accents */
.stat-card .stat-icon.gradient-orange { background: var(--bht-gradient-orange); }
.stat-card .stat-icon.gradient-teal { background: var(--bht-gradient-teal); }
.stat-card .stat-icon.gradient-pink { background: var(--bht-gradient-pink); }

/* ===== Stat Card Gradient Strips ===== */
.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 var(--bht-radius) var(--bht-radius);
  background: var(--bht-gradient-primary);
}
.stat-card:nth-child(2)::after { background: var(--bht-gradient-success); }
.stat-card:nth-child(3)::after { background: var(--bht-gradient-info); }
.stat-card:nth-child(4)::after { background: var(--bht-gradient-warning); }

/* ===== Global Search Dropdown ===== */
#search-results {
  border-radius: var(--bht-radius);
  box-shadow: var(--bht-shadow-xl);
  border: 1px solid var(--bht-border);
  z-index: 1050;
}
#search-results .dropdown-item {
  border-radius: 8px;
  transition: all var(--bht-transition);
}
#search-results .dropdown-item:hover {
  background: var(--bht-primary-light);
}
[data-theme="dark"] #search-results {
  background: var(--bht-card-bg);
}

/* ===== Form Builder ===== */
.form-field-item {
  background: var(--bht-body-bg);
  border: 1px solid var(--bht-border);
  border-radius: var(--bht-radius-sm);
  padding: 1rem;
  margin-bottom: .5rem;
  transition: all var(--bht-transition);
}
.form-field-item:hover {
  border-color: var(--bht-primary);
  box-shadow: var(--bht-shadow);
}
.form-color-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all var(--bht-transition);
}
.form-color-option:hover { transform: scale(1.15); }
.form-color-option.selected { border-color: var(--bht-text); box-shadow: 0 0 0 2px var(--bht-card-bg), 0 0 0 4px var(--bht-text); }

/* ===== Communication Page ===== */
.comm-template-card {
  cursor: pointer;
  transition: all var(--bht-transition);
  border: 2px solid transparent;
}
.comm-template-card:hover {
  border-color: var(--bht-primary);
  transform: translateY(-2px);
  box-shadow: var(--bht-shadow-md);
}
.comm-recipient-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .8rem;
  background: var(--bht-primary-light);
  color: var(--bht-primary);
  transition: all var(--bht-transition);
}

/* ===== Student Card Scrollable Tabs ===== */
.nav-tabs-bht {
  flex-wrap: nowrap;
  overflow-x: auto;
  /* removed: -webkit-overflow-scrolling deprecated */
  scrollbar-width: none;
}
.nav-tabs-bht::-webkit-scrollbar { display: none; }
.nav-tabs-bht .nav-link {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== Report Chart Cards ===== */
.report-chart-card {
  min-height: 320px;
}
.report-stat {
  text-align: center;
  padding: 1.5rem 1rem;
}
.report-stat .fs-2 {
  font-variant-numeric: tabular-nums;
}

/* ===== FAB ===== */
#fab-btn {
  transition: all var(--bht-transition);
}
#fab-btn:hover {
  transform: rotate(45deg) scale(1.1);
}
#fab-menu a {
  animation: slideUp .2s ease-out both;
  border-radius: 20px !important;
}
#fab-menu a:nth-child(1) { animation-delay: 0ms; }
#fab-menu a:nth-child(2) { animation-delay: 50ms; }
#fab-menu a:nth-child(3) { animation-delay: 100ms; }
#fab-menu a:nth-child(4) { animation-delay: 150ms; }

#scroll-top {
  transition: all var(--bht-transition);
}
#scroll-top:hover {
  transform: translateY(-3px);
}

/* ===== Page transitions ===== */
.fade-in .card {
  animation: cardSlideUp .4s ease-out both;
}
.fade-in .card:nth-child(1) { animation-delay: 0ms; }
.fade-in .card:nth-child(2) { animation-delay: 60ms; }
.fade-in .card:nth-child(3) { animation-delay: 120ms; }
.fade-in .card:nth-child(4) { animation-delay: 180ms; }
.fade-in .card:nth-child(5) { animation-delay: 240ms; }
.fade-in .card:nth-child(6) { animation-delay: 300ms; }

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

/* ===== Stat card number counter animation ===== */
.stat-value {
  animation: countFadeIn .6s ease-out;
}
@keyframes countFadeIn {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Table row stagger ===== */
.table-bht tbody tr {
  animation: rowFadeIn .3s ease-out both;
}
.table-bht tbody tr:nth-child(1) { animation-delay: 0ms; }
.table-bht tbody tr:nth-child(2) { animation-delay: 30ms; }
.table-bht tbody tr:nth-child(3) { animation-delay: 60ms; }
.table-bht tbody tr:nth-child(4) { animation-delay: 90ms; }
.table-bht tbody tr:nth-child(5) { animation-delay: 120ms; }
.table-bht tbody tr:nth-child(6) { animation-delay: 150ms; }
.table-bht tbody tr:nth-child(7) { animation-delay: 180ms; }
.table-bht tbody tr:nth-child(8) { animation-delay: 210ms; }

@keyframes rowFadeIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== Sidebar link hover effect ===== */
.sidebar-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bht-gradient-primary);
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--bht-transition);
  z-index: -1;
}
.sidebar-link:hover::before { opacity: .06; }
.sidebar-link.active::before { opacity: .1; }

/* ===== Notification bell pulse ===== */
#notif-count:not(.d-none) {
  animation: bellPulse 2s ease-in-out infinite;
}
@keyframes bellPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.2); }
}

/* ===== Chart card hover ===== */
.chart-container canvas {
  transition: transform .3s ease;
}
.card:hover .chart-container canvas {
  transform: scale(1.01);
}

/* ===== AI chat bubbles ===== */
#ai-chat .bg-primary {
  border-radius: 18px 18px 4px 18px !important;
}
#ai-chat .bg-light {
  border-radius: 18px 18px 18px 4px !important;
}

/* ===== Birthday card special ===== */
#dash-birthdays {
  border-right: 4px solid #ec4899;
  background: linear-gradient(135deg, rgba(236,72,153,.03) 0%, transparent 100%);
}

/* ===== Recent pages chips ===== */
#recent-pages .badge {
  transition: all var(--bht-transition);
  cursor: pointer;
}
#recent-pages .badge:hover {
  background: var(--bht-primary) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ===== Card shimmer on hover ===== */
.card-clickable::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%);
  background-size: 200% 200%;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card-clickable:hover::after {
  opacity: 1;
  animation: shimmerSlide 1.5s ease infinite;
}
@keyframes shimmerSlide {
  from { background-position: 200% 200%; }
  to { background-position: -200% -200%; }
}

/* ===== Accessibility ===== */
:focus-visible {
  outline: 3px solid var(--bht-primary);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
/* Skip to content link */
.skip-link {
  position: absolute; top: -40px; right: 0; background: var(--bht-primary);
  color: white; padding: 8px 16px; z-index: 10000; border-radius: 0 0 8px 8px;
  transition: top .3s;
}
.skip-link:focus { top: 0; }
/* Reduced motion */

/* Auto dark mode for OS-level preference (Verou recommendation) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bht-body-bg: #0d1117;
    --bht-card-bg: #161b22;
    --bht-text: #e6edf3;
    --bht-text-muted: #8b949e;
    --bht-border: #30363d;
    --bht-sidebar-bg: #010409;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* High contrast mode */
@media (forced-colors: active) {
  .card { border: 2px solid; }
  .badge { border: 1px solid; }
}

/* ============================================================
   PROFESSIONAL POLISH ENHANCEMENTS — Appended
   ============================================================ */

/* ===== 2. Table Improvements ===== */
.table-bht tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, .018);
}
[data-theme="dark"] .table-bht tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, .025);
}
.table-bht tbody tr:hover {
  background: var(--bht-primary-light) !important;
}
.table-bht thead th {
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  background: rgba(240, 242, 245, .92);
}
[data-theme="dark"] .table-bht thead th {
  background: rgba(13, 17, 23, .92);
}

/* ===== 4. Stats Cards — Subtle Gradient Backgrounds ===== */
.stat-card-gradient {
  background: linear-gradient(135deg, rgba(37, 99, 235, .04) 0%, rgba(124, 58, 237, .04) 100%);
}
.stat-card-gradient.gradient-bg-success {
  background: linear-gradient(135deg, rgba(5, 150, 105, .05) 0%, rgba(16, 185, 129, .04) 100%);
}
.stat-card-gradient.gradient-bg-danger {
  background: linear-gradient(135deg, rgba(220, 38, 38, .05) 0%, rgba(249, 115, 22, .04) 100%);
}
.stat-card-gradient.gradient-bg-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, .05) 0%, rgba(251, 191, 36, .04) 100%);
}
.stat-card-gradient.gradient-bg-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, .05) 0%, rgba(6, 182, 212, .04) 100%);
}
.stat-card-gradient.gradient-bg-purple {
  background: linear-gradient(135deg, rgba(124, 58, 237, .05) 0%, rgba(168, 85, 247, .04) 100%);
}

/* Number roll-up keyframes */
@keyframes numberRollUp {
  0%   { opacity: 0; transform: translateY(20px) scale(.7); filter: blur(4px); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.03); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.stat-number-anim {
  animation: numberRollUp .65s cubic-bezier(.23, 1, .32, 1) both;
}

/* ===== 6. Sidebar Active State — RTL Right Border Accent ===== */
.sidebar-link.active {
  background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, .08) 100%);
  border-right: none;
  box-shadow: inset -3px 0 0 var(--bht-primary);
}
[dir="rtl"] .sidebar-link.active,
.sidebar-link.active {
  box-shadow: inset 3px 0 0 var(--bht-primary);
}
.sidebar-link.active i {
  color: var(--bht-primary);
  filter: drop-shadow(0 0 4px rgba(37, 99, 235, .25));
}

/* ===== 7. Toast Notifications — Slide-in from Top-Right ===== */
.toast-container {
  z-index: 1090;
}
.toast-slide-in {
  animation: toastSlideInFromRight .4s cubic-bezier(.22, 1, .36, 1);
}
@keyframes toastSlideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
.toast-slide-out {
  animation: toastSlideOut .3s ease-in forwards;
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* ===== 8. Modal Backdrop — Stronger Blur ===== */
.modal-backdrop.show {
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  background-color: rgba(0, 0, 0, .45);
}
[data-theme="dark"] .modal-backdrop.show {
  background-color: rgba(0, 0, 0, .6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ===== 9. Progress Bars — Gradient + Animated Stripes ===== */
.progress-bar {
  background: linear-gradient(135deg, var(--bht-primary) 0%, #6366f1 50%, var(--bht-primary) 100%);
  background-size: 200% 100%;
  animation: progressGradient 2s linear infinite;
  position: relative;
  overflow: hidden;
}
@keyframes progressGradient {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.progress-bar-striped,
.progress-bar-animated {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, .15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .15) 50%,
    rgba(255, 255, 255, .15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progressStripes 1s linear infinite;
}
@keyframes progressStripes {
  from { background-position: 1rem 0; }
  to { background-position: 0 0; }
}

/* Progress bar color variants */
.progress-bar.bg-success {
  background: linear-gradient(135deg, #059669, #10b981, #059669);
  background-size: 200% 100%;
  animation: progressGradient 2s linear infinite;
}
.progress-bar.bg-danger {
  background: linear-gradient(135deg, #dc2626, #f97316, #dc2626);
  background-size: 200% 100%;
  animation: progressGradient 2s linear infinite;
}
.progress-bar.bg-warning {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  background-size: 200% 100%;
  animation: progressGradient 2s linear infinite;
}

/* ===== 10. Print Styles — Extended Clean Layout ===== */
@media print {
  /* Hide interactive elements */
  .sidebar, #main-navbar, .toast-container, #theme-toggle,
  .offcanvas, .offcanvas-backdrop, .btn-print-hide,
  .modal-backdrop, .tooltip, .popover,
  #fab-container, #scroll-top, #toast-container,
  .search-box, .btn, button:not(.btn-print-show),
  .form-check, .form-switch, .dropdown-toggle,
  .pagination, .breadcrumb { display: none !important; }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-family: 'Heebo', 'David', 'Arial', sans-serif !important;
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }

  .main-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    color: #000 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    page-break-inside: avoid;
    background: #fff !important;
  }

  .card-header {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #ccc !important;
  }

  img, .chart-container, .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a[href]::after {
    content: none !important;
  }

  .badge {
    border: 1px solid #999 !important;
    padding: 2px 8px !important;
  }

  /* Page margins */
  @page {
    margin: 1.5cm;
    size: A4;
  }

  @page :first {
    margin-top: 2cm;
  }
}

/* ===== 11. Custom Scrollbar — Thin Webkit ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .15);
  border-radius: 3px;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .3);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .25);
}
/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .15) transparent;
}
[data-theme="dark"] * {
  scrollbar-color: rgba(255, 255, 255, .12) transparent;
}

/* ===== 12. Loading Skeleton — Enhanced Shimmer ===== */
.skeleton-loader {
  position: relative;
  overflow: hidden;
  background: var(--bht-border);
  border-radius: 8px;
}
.skeleton-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .5) 50%,
    transparent 100%
  );
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  transform: translateX(-100%);
}
@keyframes skeletonShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
[data-theme="dark"] .skeleton-loader {
  background: #30363d;
}
[data-theme="dark"] .skeleton-loader::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .08) 50%,
    transparent 100%
  );
}
.skeleton-loader.skeleton-text { height: 14px; width: 80%; margin-bottom: 8px; }
.skeleton-loader.skeleton-heading { height: 26px; width: 50%; margin-bottom: 14px; }
.skeleton-loader.skeleton-block { height: 120px; width: 100%; }
.skeleton-loader.skeleton-circle { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-loader.skeleton-avatar { width: 42px; height: 42px; border-radius: 12px; }

/* ===== 13. Button Press Effect ===== */
.btn:active:not(:disabled) {
  transform: scale(.97) !important;
  transition: transform .1s ease;
}
/* Subtle ink-ripple on click */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.btn:active::after {
  opacity: 1;
  transition: opacity 0s;
}

/* ===== 14. Responsive Improvements ===== */
@media (max-width: 991.98px) {
  /* Better spacing on tablet */
  .main-content {
    padding: 1rem 1.25rem;
  }
  .page-header h1 {
    font-size: 1.35rem;
  }
  /* Collapse stat cards to 2-column */
  .stat-cards-row > [class*="col-lg"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 767.98px) {
  /* Tighter mobile spacing */
  .main-content {
    padding: .75rem;
  }
  .page-header {
    margin-bottom: 1rem;
  }
  .page-header h1 {
    font-size: 1.2rem;
  }
  .page-header p {
    font-size: .8rem;
  }
  /* Stack stat cards on small mobile */
  .stat-cards-row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: .5rem;
  }
  /* Card padding reduction */
  .card-body {
    padding: .85rem;
  }
  /* Modal full-width on mobile */
  .modal-dialog {
    margin: .5rem;
  }
  .modal-content {
    border-radius: 14px;
  }
  /* FAB smaller */
  #fab-btn {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }
  /* Collapsible sections */
  .section-collapsible .section-header {
    cursor: pointer;
    user-select: none;
  }
  .section-collapsible .section-header::after {
    content: '\F282'; /* bi-chevron-down */
    font-family: 'bootstrap-icons';
    float: left;
    transition: transform var(--bht-transition);
  }
  .section-collapsible.collapsed .section-body {
    display: none;
  }
  .section-collapsible.collapsed .section-header::after {
    transform: rotate(-90deg);
  }
}

@media (max-width: 399.98px) {
  /* Ultra-small screens */
  .stat-card .stat-value { font-size: 1.3rem; }
  .stat-card .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .avatar { width: 36px; height: 36px; font-size: .75rem; }
  .login-card { padding: 1.5rem 1rem; }
  .dialer-btn { width: 56px; height: 56px; font-size: 1.1rem; }
}

/* ===== 15. Dark Mode — Extended CSS Custom Properties ===== */
:root {
  /* Surface levels for layered UIs */
  --bht-surface-1: #f8f9fa;
  /* Overlay colors */
  /* State colors */
  /* Focus ring */
  --bht-focus-ring: 0 0 0 3px rgba(37, 99, 235, .2);
  /* Elevation tokens */
  /* Typography */
  /* Spacing scale */
}

[data-theme="dark"] {
  --bht-surface-1: #161b22;
  --bht-focus-ring: 0 0 0 3px rgba(37, 99, 235, .35);
}

/* ===== Bonus: Micro-interactions ===== */

/* Smooth hover for all interactive elements */
a, button, .btn, input, select, textarea,
.nav-link, .dropdown-item, .list-group-item-action {
  transition: all var(--bht-transition);
}

/* Subtle focus ring for accessibility */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
  outline: none;
  box-shadow: var(--bht-focus-ring);
}

/* Table sort indicator */
.table-bht th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 1.5rem;
}
.table-bht th[data-sort]::after {
  content: '\F145'; /* bi-chevron-expand */
  font-family: 'bootstrap-icons';
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .3;
  font-size: .7rem;
  transition: opacity var(--bht-transition);
}
.table-bht th[data-sort]:hover::after {
  opacity: .7;
}
.table-bht th[data-sort].sort-asc::after {
  content: '\F148'; /* bi-chevron-up */
  opacity: 1;
  color: var(--bht-primary);
}
.table-bht th[data-sort].sort-desc::after {
  content: '\F140'; /* bi-chevron-down */
  opacity: 1;
  color: var(--bht-primary);
}

/* Subtle border-glow on card focus-within */
.card:focus-within {
  border-color: rgba(37, 99, 235, .3);
  box-shadow: var(--bht-shadow-md), 0 0 0 1px rgba(37, 99, 235, .1);
}

/* Smooth image loading */
img.lazy-load {
  opacity: 0;
  transition: opacity .4s ease;
}
img.lazy-load.loaded {
  opacity: 1;
}

/* Tooltip arrow color fix */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: #1e293b;
}

/* Status dot utility */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
.status-dot-success { background: var(--bht-success); }
.status-dot-danger { background: var(--bht-danger); }
.status-dot-warning { background: var(--bht-warning); }
.status-dot-info { background: var(--bht-info); }

/* Text selection color */
::selection {
  background: rgba(37, 99, 235, .2);
  color: inherit;
}
[data-theme="dark"] ::selection {
  background: rgba(37, 99, 235, .35);
}

/* ===== v5.9 Premium Visual Upgrades ===== */

/* Glassmorphism nav */
#main-navbar {
  background: linear-gradient(135deg, var(--bht-primary) 0%, #1e3a8a 50%, #0f172a 100%) !important;
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Animated gradient sidebar header */
.sidebar-nav::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #ec4899, #f97316, #2563eb);
  background-size: 200% 100%;
  animation: rainbowBar 4s linear infinite;
}
@keyframes rainbowBar {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Page enter animation */
.main-content {
  animation: pageSlideIn .35s ease-out;
}
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Card glass effect */
.card {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.92) !important;
  transition: background-color .25s cubic, color .25s cubic, transform .25s cubic, box-shadow .25s cubic, opacity .25s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] .card {
  background: rgba(30,41,59,.85) !important;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bht-shadow-lg);
}

/* Stat card premium */
.card .fs-4.fw-bold, .card .fs-3.fw-bold {
  background: linear-gradient(135deg, var(--bht-primary), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Progress bar glow */
.progress-bar {
  box-shadow: 0 0 8px currentColor;
  transition: width .6s ease;
}

/* Badge pulse for alerts */
.badge.bg-danger {
  animation: subtlePulse 2s ease-in-out infinite;
}
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.4); }
  50% { box-shadow: 0 0 0 6px rgba(220,53,69,0); }
}

/* Floating action button upgrade */
.fab-btn, [id*="fab"] .btn-primary {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(37,99,235,.4);
  transition: all .3s;
}
.fab-btn:hover, [id*="fab"] .btn-primary:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 8px 30px rgba(37,99,235,.6);
}

/* Table row hover glow */
.table tbody tr {
  transition: all .2s;
}
.table tbody tr:hover {
  background: rgba(37,99,235,.04) !important;
  box-shadow: inset 3px 0 0 var(--bht-primary);
}

/* Modal upgrade */
.modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
  overflow: hidden;
}
.modal-header {
  border-radius: 16px 16px 0 0;
}
.modal.show .modal-dialog {
  animation: modalPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop {
  from { transform: scale(.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Input focus glow */
.form-control:focus, .form-select:focus {
  border-color: var(--bht-primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}

/* Sidebar link animated underline */
.sidebar-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--bht-primary);
  transition: width .3s;
}
.sidebar-link:hover::after, .sidebar-link.active::after {
  width: 100%;
}

/* Toast slide-in */
.toast {
  animation: toastIn .4s cubic-bezier(.4,0,.2,1);
}
@keyframes toastIn {
  from { transform: translateX(100%) scale(.8); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Avatar ring */
.avatar-ring {
  border: 3px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#2563eb,#7c3aed) border-box;
  border-radius: 50%;
}

/* Scroll indicator */
.main-content::-webkit-scrollbar {
  width: 5px;
}
.main-content::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--bht-primary), #7c3aed);
  border-radius: 10px;
}

/* Number counter animation (reuses @keyframes countUp defined above) */
.stat-number {
  animation: countUp .5s ease-out both;
}

/* Landing page gradient enhancement */
.landing-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 30%, #7c3aed 60%, #4f46e5 100%) !important;
  position: relative;
  overflow: hidden;
}
.landing-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 60%);
  animation: heroGlow 8s ease-in-out infinite;
}
@keyframes heroGlow {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(5%,5%); }
}

/* Notification dot animated */
.notif-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  display: inline-block;
  animation: notifBlink 1.5s ease-in-out infinite;
}
@keyframes notifBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* ============================================================
   PREMIUM SIDEBAR STYLING
   ============================================================ */

/* ===== 1. Category Headers — Unique Gradient Left Borders ===== */
.sidebar-category[data-cat="main"] .sidebar-cat-header,
.sidebar-category:nth-child(1) > .sidebar-cat-header {
  border-right: 3px solid transparent;
  border-image: linear-gradient(180deg, #2563eb, #6366f1) 1;
}
.sidebar-category[data-cat="students"] .sidebar-cat-header,
.sidebar-category:nth-child(2) > .sidebar-cat-header {
  border-right: 3px solid transparent;
  border-image: linear-gradient(180deg, #059669, #10b981) 1;
}
.sidebar-category[data-cat="finance"] .sidebar-cat-header,
.sidebar-category:nth-child(3) > .sidebar-cat-header {
  border-right: 3px solid transparent;
  border-image: linear-gradient(180deg, #f59e0b, #f97316) 1;
}
.sidebar-category[data-cat="academics"] .sidebar-cat-header,
.sidebar-category:nth-child(4) > .sidebar-cat-header {
  border-right: 3px solid transparent;
  border-image: linear-gradient(180deg, #7c3aed, #a855f7) 1;
}
.sidebar-category[data-cat="staff"] .sidebar-cat-header,
.sidebar-category:nth-child(5) > .sidebar-cat-header {
  border-right: 3px solid transparent;
  border-image: linear-gradient(180deg, #ec4899, #f472b6) 1;
}
.sidebar-category[data-cat="tools"] .sidebar-cat-header,
.sidebar-category:nth-child(6) > .sidebar-cat-header {
  border-right: 3px solid transparent;
  border-image: linear-gradient(180deg, #0ea5e9, #06b6d4) 1;
}
.sidebar-category[data-cat="reports"] .sidebar-cat-header,
.sidebar-category:nth-child(7) > .sidebar-cat-header {
  border-right: 3px solid transparent;
  border-image: linear-gradient(180deg, #dc2626, #ef4444) 1;
}
.sidebar-category[data-cat="settings"] .sidebar-cat-header,
.sidebar-category:nth-child(8) > .sidebar-cat-header {
  border-right: 3px solid transparent;
  border-image: linear-gradient(180deg, #64748b, #94a3b8) 1;
}

/* ===== 2. Sidebar Link Icons — Gradient Background Circle on Hover ===== */
.sidebar-link i,
.sidebar-link .bi {
  position: relative;
  z-index: 1;
  transition: background-color .3s cubic, color .3s cubic, transform .3s cubic, box-shadow .3s cubic, opacity .3s cubic-bezier(.4, 0, .2, 1);
}
.sidebar-link i::before,
.sidebar-link .bi::before {
  position: relative;
  z-index: 2;
}
.sidebar-link::before {
  /* Reset existing ::before if needed — keeping backward compat */
}
.sidebar-link .sidebar-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background-color .3s cubic, color .3s cubic, transform .3s cubic, box-shadow .3s cubic, opacity .3s cubic-bezier(.4, 0, .2, 1);
  flex-shrink: 0;
}
.sidebar-link:hover .sidebar-icon-wrap,
.sidebar-link:hover > i,
.sidebar-link:hover > .bi {
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(99, 102, 241, .12));
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(37, 99, 235, .15);
}
.sidebar-link.active .sidebar-icon-wrap,
.sidebar-link.active > i,
.sidebar-link.active > .bi {
  background: linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(99, 102, 241, .18));
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(37, 99, 235, .2);
}
/* Per-category icon hover colors */
.sidebar-category:nth-child(2) .sidebar-link:hover > i,
.sidebar-category:nth-child(2) .sidebar-link:hover > .bi {
  background: linear-gradient(135deg, rgba(5, 150, 105, .12), rgba(16, 185, 129, .12));
  box-shadow: 0 0 12px rgba(5, 150, 105, .15);
}
.sidebar-category:nth-child(3) .sidebar-link:hover > i,
.sidebar-category:nth-child(3) .sidebar-link:hover > .bi {
  background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(249, 115, 22, .12));
  box-shadow: 0 0 12px rgba(245, 158, 11, .15);
}
.sidebar-category:nth-child(4) .sidebar-link:hover > i,
.sidebar-category:nth-child(4) .sidebar-link:hover > .bi {
  background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(168, 85, 247, .12));
  box-shadow: 0 0 12px rgba(124, 58, 237, .15);
}
.sidebar-category:nth-child(5) .sidebar-link:hover > i,
.sidebar-category:nth-child(5) .sidebar-link:hover > .bi {
  background: linear-gradient(135deg, rgba(236, 72, 153, .12), rgba(244, 114, 182, .12));
  box-shadow: 0 0 12px rgba(236, 72, 153, .15);
}
.sidebar-category:nth-child(6) .sidebar-link:hover > i,
.sidebar-category:nth-child(6) .sidebar-link:hover > .bi {
  background: linear-gradient(135deg, rgba(14, 165, 233, .12), rgba(6, 182, 212, .12));
  box-shadow: 0 0 12px rgba(14, 165, 233, .15);
}

/* ===== 3. Active Link — Animated Gradient Left Border with Glow ===== */
.sidebar-link.active {
  position: relative;
  border-right: none;
}
.sidebar-link.active::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, #2563eb, #7c3aed, #ec4899);
  background-size: 100% 200%;
  animation: sidebarActiveGlow 3s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(37, 99, 235, .4), 0 0 16px rgba(124, 58, 237, .2);
}
[dir="rtl"] .sidebar-link.active::after {
  right: 0;
  left: auto;
  border-radius: 3px 0 0 3px;
}
@keyframes sidebarActiveGlow {
  0%, 100% {
    background-position: 0% 0%;
    box-shadow: 0 0 8px rgba(37, 99, 235, .4), 0 0 16px rgba(124, 58, 237, .2);
  }
  33% {
    background-position: 0% 100%;
    box-shadow: 0 0 8px rgba(124, 58, 237, .4), 0 0 16px rgba(236, 72, 153, .2);
  }
  66% {
    background-position: 0% 200%;
    box-shadow: 0 0 8px rgba(236, 72, 153, .4), 0 0 16px rgba(37, 99, 235, .2);
  }
}
.sidebar-link.active {
  background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, .06) 50%, rgba(124, 58, 237, .04) 100%);
}

/* ===== 4. Category Badges — Pill Style with Gradient Backgrounds ===== */
.sidebar-cat-badge {
  background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(99, 102, 241, .1)) !important;
  color: var(--bht-primary) !important;
  font-weight: 700;
  font-size: .6rem;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .02em;
  border: 1px solid rgba(37, 99, 235, .15);
  transition: background-color .3s cubic, color .3s cubic, transform .3s cubic, box-shadow .3s cubic, opacity .3s cubic-bezier(.4, 0, .2, 1);
}
.sidebar-cat-header:hover .sidebar-cat-badge {
  background: linear-gradient(135deg, #2563eb, #6366f1) !important;
  color: #fff !important;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
  transform: scale(1.05);
}
/* Per-category badge gradient variants */
.sidebar-category:nth-child(2) .sidebar-cat-badge {
  background: linear-gradient(135deg, rgba(5, 150, 105, .1), rgba(16, 185, 129, .1)) !important;
  color: #059669 !important;
  border-color: rgba(5, 150, 105, .15);
}
.sidebar-category:nth-child(2) .sidebar-cat-header:hover .sidebar-cat-badge {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #fff !important;
}
.sidebar-category:nth-child(3) .sidebar-cat-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, .1), rgba(249, 115, 22, .1)) !important;
  color: #d97706 !important;
  border-color: rgba(245, 158, 11, .15);
}
.sidebar-category:nth-child(3) .sidebar-cat-header:hover .sidebar-cat-badge {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #fff !important;
}
.sidebar-category:nth-child(4) .sidebar-cat-badge {
  background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(168, 85, 247, .1)) !important;
  color: #7c3aed !important;
  border-color: rgba(124, 58, 237, .15);
}
.sidebar-category:nth-child(4) .sidebar-cat-header:hover .sidebar-cat-badge {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
}
.sidebar-category:nth-child(5) .sidebar-cat-badge {
  background: linear-gradient(135deg, rgba(236, 72, 153, .1), rgba(244, 114, 182, .1)) !important;
  color: #db2777 !important;
  border-color: rgba(236, 72, 153, .15);
}
.sidebar-category:nth-child(5) .sidebar-cat-header:hover .sidebar-cat-badge {
  background: linear-gradient(135deg, #ec4899, #f472b6) !important;
  color: #fff !important;
}
.sidebar-category:nth-child(6) .sidebar-cat-badge {
  background: linear-gradient(135deg, rgba(14, 165, 233, .1), rgba(6, 182, 212, .1)) !important;
  color: #0284c7 !important;
  border-color: rgba(14, 165, 233, .15);
}
.sidebar-category:nth-child(6) .sidebar-cat-header:hover .sidebar-cat-badge {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4) !important;
  color: #fff !important;
}

/* Dark mode badge adjustments */
[data-theme="dark"] .sidebar-cat-badge {
  border-color: rgba(37, 99, 235, .25);
}

/* ===== 5. Sidebar Footer — Version Text with Gradient ===== */
.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--bht-border);
  margin-top: auto;
}
.sidebar-footer .sidebar-version {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: versionGradientShift 4s ease-in-out infinite;
}
@keyframes versionGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.sidebar-footer .sidebar-version-label {
  font-size: .65rem;
  color: var(--bht-text-muted);
  display: block;
  margin-bottom: 2px;
}
.sidebar-footer:hover .sidebar-version {
  animation-duration: 1.5s;
}

/* ===== 6. Mobile Sidebar — Full-Screen Overlay with Blur Backdrop ===== */
@media (max-width: 991.98px) {
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
  }
  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .sidebar.sidebar-mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
    overflow-y: auto;
    background: var(--bht-card-bg);
  }
  [dir="rtl"] .sidebar.sidebar-mobile {
    right: auto;
    left: 0;
    transform: translateX(-100%);
  }
  .sidebar.sidebar-mobile.open {
    transform: translateX(0);
    box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
  }
  [dir="rtl"] .sidebar.sidebar-mobile.open {
    box-shadow: 8px 0 30px rgba(0, 0, 0, .2);
  }

  /* Mobile sidebar header */
  .sidebar-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bht-border);
    background: linear-gradient(135deg, rgba(37, 99, 235, .04), rgba(124, 58, 237, .04));
  }
  .sidebar-mobile-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bht-body-bg);
    color: var(--bht-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
  }
  .sidebar-mobile-close:hover {
    background: rgba(220, 38, 38, .1);
    color: #dc2626;
    transform: rotate(90deg);
  }

  /* Full-screen overlay effect */
  .sidebar.sidebar-mobile .sidebar-nav {
    padding-bottom: 80px;
  }

  /* Offcanvas sidebar override for full blur */
  .offcanvas.offcanvas-end,
  .offcanvas.offcanvas-start {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

[data-theme="dark"] .sidebar-overlay {
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
}
[data-theme="dark"] .sidebar.sidebar-mobile {
  background: var(--bht-surface-1);
}
[data-theme="dark"] .sidebar.sidebar-mobile.open {
  box-shadow: -8px 0 40px rgba(0, 0, 0, .5);
}

/* ===== 7. Sidebar Scrollbar — Thin Custom Scrollbar ===== */
.sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}
.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(37, 99, 235, .2), rgba(124, 58, 237, .2));
  border-radius: 4px;
  transition: background .2s;
}
.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(37, 99, 235, .4), rgba(124, 58, 237, .4));
}
.sidebar::-webkit-scrollbar-corner,
.sidebar-nav::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox sidebar scrollbar */
.sidebar,
.sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 99, 235, .2) transparent;
}
.sidebar:hover,
.sidebar-nav:hover {
  scrollbar-color: rgba(37, 99, 235, .35) transparent;
}

/* Dark mode sidebar scrollbar */
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 102, 241, .25), rgba(168, 85, 247, .25));
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, .45), rgba(168, 85, 247, .45));
}
[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar-nav {
  scrollbar-color: rgba(99, 102, 241, .25) transparent;
}
[data-theme="dark"] .sidebar:hover,
[data-theme="dark"] .sidebar-nav:hover {
  scrollbar-color: rgba(99, 102, 241, .4) transparent;
}

/* ==========================================================================
   COMPREHENSIVE DARK MODE POLISH — v5.10
   All rules use [data-theme="dark"] prefix. Append-only.
   ========================================================================== */

/* ===== 1. Landing Page Dark Mode ===== */
[data-theme="dark"] .landing-features-section {
  background: #111827;
}
[data-theme="dark"] .landing-feature-card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, .05);
  color: var(--bht-text);
}
[data-theme="dark"] .landing-feature-card:hover {
  background: #263548;
  border-color: rgba(99, 102, 241, .2);
}
[data-theme="dark"] .landing-feature-card h5,
[data-theme="dark"] .landing-feature-card p {
  color: var(--bht-text);
}
[data-theme="dark"] .landing-testimonials {
  background: linear-gradient(135deg, #1e1b4b, #1a1a2e);
}
[data-theme="dark"] .landing-testimonial-card {
  background: #1e293b;
  color: var(--bht-text);
  border-color: rgba(255, 255, 255, .05);
}
[data-theme="dark"] .landing-testimonial-card:hover {
  background: #263548;
}
[data-theme="dark"] .landing-testimonial-card p,
[data-theme="dark"] .landing-testimonial-card small {
  color: var(--bht-text-muted);
}
[data-theme="dark"] .landing-testimonial-card strong {
  color: var(--bht-text);
}
[data-theme="dark"] #landing-page .card {
  background: var(--bht-card-bg);
  color: var(--bht-text);
  border-color: var(--bht-border);
}
[data-theme="dark"] #landing-page .text-muted {
  color: var(--bht-text-muted) !important;
}
[data-theme="dark"] #landing-page .bg-light {
  background: #161b22 !important;
}
[data-theme="dark"] .landing-desc {
  color: rgba(255, 255, 255, .6);
}

/* ===== 2. Login Screen Dark Mode ===== */
[data-theme="dark"] .login-card {
  background: rgba(22, 27, 34, .85);
  border-color: rgba(48, 54, 61, .6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-theme="dark"] .login-card .form-label {
  color: var(--bht-text);
}
[data-theme="dark"] .login-title {
  background: linear-gradient(135deg, #e2e8f0, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .login-subtitle {
  color: var(--bht-text-muted);
}
[data-theme="dark"] .login-footer {
  color: var(--bht-text-muted);
}
[data-theme="dark"] .card-glass {
  background: rgba(22, 27, 34, .7);
  border-color: rgba(48, 54, 61, .5);
}

/* ===== 3. All Form Elements ===== */
[data-theme="dark"] textarea.form-control {
  background-color: #0d1117;
  color: var(--bht-text);
  border-color: var(--bht-border);
}
[data-theme="dark"] textarea.form-control:focus {
  background-color: #161b22;
  color: var(--bht-text);
  border-color: var(--bht-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #484f58;
}
[data-theme="dark"] .form-check-input {
  background-color: #21262d;
  border-color: var(--bht-border);
}
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--bht-primary);
  border-color: var(--bht-primary);
}
[data-theme="dark"] .form-check-label {
  color: var(--bht-text);
}
[data-theme="dark"] .form-floating > label {
  color: var(--bht-text-muted);
}
[data-theme="dark"] .form-floating > .form-control:focus ~ label,
[data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label,
[data-theme="dark"] .form-floating > .form-select ~ label {
  color: var(--bht-text-muted);
}
[data-theme="dark"] .input-group-text {
  background-color: #21262d;
  color: var(--bht-text);
  border-color: var(--bht-border);
}
[data-theme="dark"] .form-range::-webkit-slider-runnable-track {
  background: #30363d;
}
[data-theme="dark"] .form-range::-webkit-slider-thumb {
  background: var(--bht-primary);
}
[data-theme="dark"] .form-switch .form-check-input {
  background-color: #30363d;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238b949e'/%3e%3c/svg%3e");
}
[data-theme="dark"] .form-switch .form-check-input:checked {
  background-color: var(--bht-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
[data-theme="dark"] .form-text {
  color: var(--bht-text-muted);
}
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-control:disabled {
  background-color: #161b22;
  color: var(--bht-text-muted);
  opacity: .7;
}

/* ===== 4. Chart Containers ===== */
[data-theme="dark"] .chart-container {
  background: var(--bht-card-bg);
  border-radius: var(--bht-radius-sm);
}
[data-theme="dark"] .report-chart-card {
  background: var(--bht-card-bg);
  border-color: var(--bht-border);
}
[data-theme="dark"] .report-chart-card .card-header,
[data-theme="dark"] .report-chart-card .card-body {
  background: transparent;
  color: var(--bht-text);
}

/* ===== 5. Modals — Full Coverage ===== */
[data-theme="dark"] .modal-content {
  background-color: var(--bht-card-bg);
  color: var(--bht-text);
  border-color: var(--bht-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .modal-header {
  background-color: #1c2128;
  border-bottom-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="dark"] .modal-footer {
  background-color: #1c2128;
  border-top-color: var(--bht-border);
}
[data-theme="dark"] .modal-body {
  color: var(--bht-text);
}
[data-theme="dark"] .modal-title {
  color: var(--bht-text);
}
[data-theme="dark"] .modal .form-control,
[data-theme="dark"] .modal .form-select {
  background-color: #0d1117;
  color: var(--bht-text);
  border-color: var(--bht-border);
}
[data-theme="dark"] .modal .form-control:focus,
[data-theme="dark"] .modal .form-select:focus {
  background-color: #161b22;
  border-color: var(--bht-primary);
}
[data-theme="dark"] .modal .text-muted {
  color: var(--bht-text-muted) !important;
}

/* ===== 6. Dropdowns — Enhanced ===== */
[data-theme="dark"] .dropdown-menu {
  background-color: #1c2128;
  border-color: var(--bht-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .dropdown-item {
  color: var(--bht-text);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background-color: #30363d;
  color: #fff;
}
[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
  background-color: var(--bht-primary);
  color: #fff;
}
[data-theme="dark"] .dropdown-divider {
  border-color: var(--bht-border);
}
[data-theme="dark"] .dropdown-header {
  color: var(--bht-text-muted);
}

/* ===== 7. Tables — Comprehensive ===== */
[data-theme="dark"] .table {
  color: var(--bht-text);
  border-color: var(--bht-border);
}
[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--bht-text);
  border-bottom-color: var(--bht-border);
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255, 255, 255, .02);
  color: var(--bht-text);
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: rgba(37, 99, 235, .08);
  color: var(--bht-text);
}
[data-theme="dark"] .table thead,
[data-theme="dark"] .table thead th {
  background-color: #1c2128;
  color: var(--bht-text);
  border-bottom-color: var(--bht-border);
}
[data-theme="dark"] .table-bordered > :not(caption) > * > * {
  border-color: var(--bht-border);
}
[data-theme="dark"] .table-light {
  background-color: #1c2128;
  color: var(--bht-text);
}
[data-theme="dark"] .table-dark {
  background-color: #0d1117;
  color: var(--bht-text);
}
[data-theme="dark"] table caption {
  color: var(--bht-text-muted);
}

/* ===== 8. Alerts — Dark Variants ===== */
[data-theme="dark"] .alert-primary {
  background-color: rgba(37, 99, 235, .15);
  border-color: rgba(37, 99, 235, .25);
  color: #93c5fd;
}
[data-theme="dark"] .alert-success {
  background-color: rgba(15, 157, 88, .15);
  border-color: rgba(15, 157, 88, .25);
  color: #6ee7b7;
}
[data-theme="dark"] .alert-danger {
  background-color: rgba(234, 67, 53, .15);
  border-color: rgba(234, 67, 53, .25);
  color: #fca5a5;
}
[data-theme="dark"] .alert-warning {
  background-color: rgba(249, 171, 0, .15);
  border-color: rgba(249, 171, 0, .25);
  color: #fcd34d;
}
[data-theme="dark"] .alert-info {
  background-color: rgba(66, 133, 244, .15);
  border-color: rgba(66, 133, 244, .25);
  color: #93c5fd;
}
[data-theme="dark"] .alert-secondary {
  background-color: rgba(95, 99, 104, .15);
  border-color: rgba(95, 99, 104, .25);
  color: #d1d5db;
}
[data-theme="dark"] .alert-light {
  background-color: #1c2128;
  border-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] .alert-dark {
  background-color: #0d1117;
  border-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] .alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="dark"] .alert a {
  color: #93c5fd;
}

/* ===== 9. Nav Pills & Tabs — Dark Active States ===== */
[data-theme="dark"] .nav-pills .nav-link {
  color: var(--bht-text-muted);
}
[data-theme="dark"] .nav-pills .nav-link:hover {
  color: var(--bht-text);
  background-color: rgba(37, 99, 235, .1);
}
[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--bht-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
}
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--bht-border);
}
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--bht-text-muted);
  border-color: transparent;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--bht-text);
  border-color: var(--bht-border) var(--bht-border) transparent;
  background-color: rgba(37, 99, 235, .06);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--bht-primary);
  background-color: var(--bht-card-bg);
  border-color: var(--bht-border) var(--bht-border) var(--bht-card-bg);
}
[data-theme="dark"] .nav-tabs-bht .nav-link {
  color: var(--bht-text-muted);
}
[data-theme="dark"] .nav-tabs-bht .nav-link:hover {
  color: var(--bht-text);
  background: rgba(37, 99, 235, .08);
}
[data-theme="dark"] .nav-tabs-bht .nav-link.active {
  color: #fff;
  background: var(--bht-gradient-primary);
}
[data-theme="dark"] .tab-content {
  color: var(--bht-text);
}

/* ===== 10. Calendar Grids ===== */
[data-theme="dark"] #cal-grid .col {
  background-color: var(--bht-card-bg);
  border-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] #cal-grid .col:hover {
  background: rgba(37, 99, 235, .12) !important;
}
[data-theme="dark"] #cal-grid .col.today,
[data-theme="dark"] #cal-grid .col.cal-today {
  background-color: rgba(37, 99, 235, .18) !important;
  border-color: var(--bht-primary);
}
[data-theme="dark"] #cal-grid .col.other-month {
  opacity: .4;
}
[data-theme="dark"] .cal-day-header,
[data-theme="dark"] .calendar-header {
  background-color: #1c2128;
  color: var(--bht-text);
  border-color: var(--bht-border);
}
[data-theme="dark"] .cal-event,
[data-theme="dark"] .calendar-event {
  background-color: rgba(37, 99, 235, .15);
  color: #93c5fd;
  border-color: rgba(37, 99, 235, .3);
}

/* ===== 11. Print Preview / Print Center ===== */
[data-theme="dark"] .print-preview,
[data-theme="dark"] .print-center-preview,
[data-theme="dark"] .preview-area {
  background-color: #1c2128;
  border-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] .print-preview-frame,
[data-theme="dark"] .print-frame {
  background: #21262d;
  border-color: var(--bht-border);
}

/* ===== 12. Tooltips & Popovers ===== */
[data-theme="dark"] .tooltip-inner {
  background: linear-gradient(135deg, #1c2128, #21262d);
  color: #e6edf3;
  border: 1px solid var(--bht-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: #1c2128;
}
[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: #21262d;
}
[data-theme="dark"] .bs-tooltip-start .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: #1c2128;
}
[data-theme="dark"] .bs-tooltip-end .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: #1c2128;
}
[data-theme="dark"] .popover {
  background-color: #1c2128;
  border-color: var(--bht-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .popover-header {
  background-color: #21262d;
  border-bottom-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] .popover-body {
  color: var(--bht-text);
}
[data-theme="dark"] .bs-popover-top > .popover-arrow::before,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
  border-top-color: var(--bht-border);
}
[data-theme="dark"] .bs-popover-top > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
  border-top-color: #1c2128;
}
[data-theme="dark"] .bs-popover-bottom > .popover-arrow::before,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
  border-bottom-color: var(--bht-border);
}
[data-theme="dark"] .bs-popover-bottom > .popover-arrow::after,
[data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
  border-bottom-color: #1c2128;
}

/* ===== 13. Additional Dark Mode Coverage ===== */

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
  background-color: transparent;
  color: var(--bht-text-muted);
}
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--bht-text-muted);
}
[data-theme="dark"] .breadcrumb-item a {
  color: var(--bht-primary);
}
[data-theme="dark"] .breadcrumb-item.active {
  color: var(--bht-text-muted);
}

/* Pagination */
[data-theme="dark"] .page-link {
  background-color: var(--bht-card-bg);
  border-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] .page-link:hover {
  background-color: #21262d;
  border-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--bht-primary);
  border-color: var(--bht-primary);
  color: #fff;
}
[data-theme="dark"] .page-item.disabled .page-link {
  background-color: #0d1117;
  border-color: var(--bht-border);
  color: var(--bht-text-muted);
}

/* Accordion */
[data-theme="dark"] .accordion-item {
  background-color: var(--bht-card-bg);
  border-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] .accordion-button {
  background-color: var(--bht-card-bg);
  color: var(--bht-text);
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: rgba(37, 99, 235, .1);
  color: #93c5fd;
}
[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(2);
}
[data-theme="dark"] .accordion-body {
  background-color: var(--bht-card-bg);
  color: var(--bht-text);
}

/* Toast */
[data-theme="dark"] .toast {
  background-color: #1c2128;
  color: var(--bht-text);
  border-color: var(--bht-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .toast-header {
  background-color: #21262d;
  color: var(--bht-text);
  border-bottom-color: var(--bht-border);
}
[data-theme="dark"] .toast-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Offcanvas */
[data-theme="dark"] .offcanvas {
  background-color: var(--bht-card-bg);
  color: var(--bht-text);
  border-color: var(--bht-border);
}
[data-theme="dark"] .offcanvas-header {
  border-bottom-color: var(--bht-border);
}
[data-theme="dark"] .offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

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

/* Badge variants */
[data-theme="dark"] .badge.bg-light {
  background-color: #21262d !important;
  color: var(--bht-text) !important;
}
[data-theme="dark"] .badge.bg-dark {
  background-color: #0d1117 !important;
}

/* Text utility overrides */
[data-theme="dark"] .text-body {
  color: var(--bht-text) !important;
}
[data-theme="dark"] .text-muted {
  color: var(--bht-text-muted) !important;
}
[data-theme="dark"] .text-body-secondary {
  color: var(--bht-text-muted) !important;
}

/* Background utility overrides */
[data-theme="dark"] .bg-body {
  background-color: var(--bht-body-bg) !important;
}
[data-theme="dark"] .bg-body-secondary {
  background-color: #161b22 !important;
}
[data-theme="dark"] .bg-body-tertiary {
  background-color: #1c2128 !important;
}
[data-theme="dark"] .bg-white {
  background-color: var(--bht-card-bg) !important;
}

/* Borders */
[data-theme="dark"] .border {
  border-color: var(--bht-border) !important;
}
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-end,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start {
  border-color: var(--bht-border) !important;
}

/* hr element */
[data-theme="dark"] hr {
  border-color: var(--bht-border);
  opacity: .3;
}

/* Kanban cards in dark mode */
[data-theme="dark"] .kanban-col .card {
  background: var(--bht-card-bg);
  color: var(--bht-text);
}
[data-theme="dark"] .kanban-col .card:hover {
  background: #1c2128;
}

/* Stat cards */
[data-theme="dark"] .stat-card {
  background: var(--bht-card-bg);
  color: var(--bht-text);
}
[data-theme="dark"] .stat-card-gradient {
  background: linear-gradient(135deg, rgba(37, 99, 235, .08) 0%, rgba(124, 58, 237, .08) 100%);
}
[data-theme="dark"] .stat-card-gradient.gradient-bg-success {
  background: linear-gradient(135deg, rgba(5, 150, 105, .1) 0%, rgba(16, 185, 129, .08) 100%);
}
[data-theme="dark"] .stat-card-gradient.gradient-bg-danger {
  background: linear-gradient(135deg, rgba(220, 38, 38, .1) 0%, rgba(249, 115, 22, .08) 100%);
}
[data-theme="dark"] .stat-card-gradient.gradient-bg-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, .1) 0%, rgba(251, 191, 36, .08) 100%);
}

/* Empty state / placeholder text */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .no-data {
  color: var(--bht-text-muted);
}

/* Code / pre blocks */
[data-theme="dark"] code {
  background: #21262d;
  color: #f97583;
  border-radius: 4px;
  padding: .15em .4em;
}
[data-theme="dark"] pre {
  background: #0d1117;
  color: var(--bht-text);
  border: 1px solid var(--bht-border);
  border-radius: var(--bht-radius-sm);
  padding: 1rem;
}

/* Schedule lessons dark variants (supplement) */
[data-theme="dark"] .schedule-lesson {
  border-color: rgba(255, 255, 255, .06);
  color: var(--bht-text);
}

/* Search results */
[data-theme="dark"] #search-results .list-group-item:hover {
  background-color: #21262d;
}

/* Card header / footer in dark mode */
[data-theme="dark"] .card-header {
  background-color: #1c2128;
  border-bottom-color: var(--bht-border);
  color: var(--bht-text);
}
[data-theme="dark"] .card-footer {
  background-color: #1c2128;
  border-top-color: var(--bht-border);
  color: var(--bht-text);
}

/* Finance progress bar dark */
[data-theme="dark"] .finance-progress {
  background: #30363d;
}

/* Progress bar track */
[data-theme="dark"] .progress {
  background: #30363d;
}

/* AI Assistant Chat — typing dots animation */
.ai-typing-dots span {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--bs-primary);
  animation: aiDotBounce 1.4s infinite ease-in-out both;
}
.ai-typing-dots span:nth-child(1) { animation-delay: 0s; }
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiDotBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* AI chat message rows */
.ai-msg-row { animation: aiFadeIn 0.3s ease; }
@keyframes aiFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   RESPONSIVE & MOBILE — Comprehensive Rules
   ============================================================= */

/* ── Safe Areas (notch / bottom bar) ── */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .bht-sidebar {
    padding-top: calc(var(--bht-navbar-height) + env(safe-area-inset-top));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .fab, .bht-fab {
    bottom: calc(1rem + env(safe-area-inset-bottom));
    right: calc(1rem + env(safe-area-inset-right));
  }
}

/* ── Touch Optimizations ── */
@media (pointer: coarse) {
  /* Minimum touch target 44×44 */
  a, button, .btn, .nav-link, .dropdown-item,
  .list-group-item-action, .page-link, input[type="checkbox"],
  input[type="radio"], select, .form-select {
    min-height: 44px;
    min-width: 44px;
  }
  .dropdown-item, .list-group-item-action {
    padding-top: .625rem;
    padding-bottom: .625rem;
  }
  .btn-sm {
    min-height: 38px;
    min-width: 38px;
    padding: .375rem .75rem;
  }
  /* Remove hover effects on touch */
  .card:hover,
  .btn:hover,
  .list-group-item:hover,
  .nav-link:hover,
  .table tbody tr:hover {
    transform: none !important;
    box-shadow: var(--bht-shadow) !important;
  }
  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
    /* removed: -webkit-overflow-scrolling deprecated */
  }
  .table-responsive, .bht-table-wrap {
    /* removed: -webkit-overflow-scrolling deprecated */
  }
}

/* ── Pull-to-refresh indicator placeholder ── */
.ptr-indicator {
  display: none;
  text-align: center;
  padding: .75rem;
  color: var(--bht-text-muted);
  font-size: .85rem;
}
.ptr-indicator.active { display: block; }

/* =============================================================
   Tablet — 577px – 991px
   ============================================================= */
@media (max-width: 991.98px) {
  /* Stats cards 2 columns */
  .stats-row, .stat-cards, .dashboard-stats,
  .row-cols-4, .row-cols-md-4, .row-cols-lg-4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem;
  }
  .stats-row > *, .stat-cards > *, .dashboard-stats > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Cards 2 per row */
  .card-grid, .cards-container, .row-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .75rem;
  }

  /* Sidebar: collapsible */
  .bht-sidebar {
    transform: translateX(100%);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--bht-sidebar-width);
    z-index: 1050;
    transition: transform var(--bht-transition);
  }
  .bht-sidebar.show, .bht-sidebar.open {
    transform: translateX(0);
  }
  .bht-main, .main-content {
    margin-right: 0 !important;
    width: 100% !important;
  }
  .sidebar-toggle { display: inline-flex !important; }
}

/* =============================================================
   Phone — max-width 576px
   ============================================================= */
@media (max-width: 576px) {
  /* Base spacing */
  .bht-main, .main-content {
    padding: .5rem !important;
    margin-right: 0 !important;
  }
  .container, .container-fluid {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  /* Stats cards: 2 columns, smaller font */
  .stats-row, .stat-cards, .dashboard-stats,
  .row-cols-4, .row-cols-md-4, .row-cols-lg-4,
  .row-cols-3, .row-cols-md-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .5rem;
  }
  .stats-row > *, .stat-cards > *, .dashboard-stats > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .stat-card, .stats-row .card, .stat-cards .card {
    font-size: .8rem;
    padding: .5rem !important;
  }
  .stat-card h3, .stat-card .stat-value,
  .stat-cards .card h3 {
    font-size: 1.25rem;
  }
  .stat-card .stat-label, .stat-card small {
    font-size: .7rem;
  }

  /* Tables: horizontal scroll, smaller font */
  .table-responsive, .bht-table-wrap {
    overflow-x: auto;
    /* removed: -webkit-overflow-scrolling deprecated */
    margin: 0 -.5rem;
    padding: 0 .5rem;
  }
  table, .table {
    font-size: .78rem;
  }
  .table th, .table td {
    padding: .35rem .4rem;
    white-space: nowrap;
  }

  /* Modals: full width, no margin */
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100dvh;
  }
  .modal-content {
    border-radius: 0 !important;
    border: none !important;
    min-height: 100dvh;
  }
  .modal-header { padding: .75rem 1rem; }
  .modal-body { padding: .75rem; }
  .modal-footer {
    padding: .5rem .75rem;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .modal-footer .btn { flex: 1 1 auto; }

  /* Cards: no margin, full width */
  .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: var(--bht-radius-sm) !important;
  }
  .card-body { padding: .75rem; }
  .card-grid, .cards-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .5rem;
  }

  /* Hide secondary info on cards */
  .card .card-description,
  .card .card-notes,
  .card .text-muted.small:not(.stat-label),
  .card .d-none-mobile,
  .hide-mobile {
    display: none !important;
  }

  /* Sidebar: full overlay with blur */
  .bht-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100% !important;
    max-width: 100%;
    z-index: 1060;
    transform: translateX(100%);
    transition: transform var(--bht-transition);
    backdrop-filter: blur(var(--bht-glass-blur));
    -webkit-backdrop-filter: blur(var(--bht-glass-blur));
  }
  .bht-sidebar.show, .bht-sidebar.open {
    transform: translateX(0);
  }
  .bht-sidebar .sidebar-close {
    display: flex !important;
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 10;
  }

  /* Sidebar overlay backdrop */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1055;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bht-transition);
  }
  .sidebar-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  /* FAB: smaller, bottom-right safe area */
  .fab, .bht-fab, .btn-fab {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.1rem !important;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    right: calc(.75rem + env(safe-area-inset-right, 0px));
    box-shadow: var(--bht-shadow-lg);
  }

  /* Charts: constrain height */
  canvas, .chart-container, .chartjs-container {
    max-height: 250px !important;
  }

  /* Navbar compact */
  .bht-navbar, .navbar {
    padding: .25rem .5rem;
  }
  .navbar-brand { font-size: .95rem; }
  .bht-navbar .nav-link { font-size: .85rem; }

  /* Page headers compact */
  .page-header, .section-title {
    font-size: 1.15rem;
    margin-bottom: .5rem;
  }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.15rem; }
  h3 { font-size: 1rem; }

  /* Search bar full width */
  .search-bar, .bht-search, input[type="search"] {
    width: 100% !important;
  }

  /* Badge / pill compact */
  .badge { font-size: .65rem; padding: .2em .5em; }

  /* Tabs scrollable */
  .nav-tabs, .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* removed: -webkit-overflow-scrolling deprecated */
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar,
  .nav-pills::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link, .nav-pills .nav-link {
    white-space: nowrap;
    font-size: .8rem;
    padding: .4rem .75rem;
  }

  /* Forms compact */
  .form-label { font-size: .8rem; margin-bottom: .2rem; }
  .form-control, .form-select { font-size: .85rem; padding: .4rem .6rem; }

  /* Toast / alerts at top full width */
  .toast-container {
    top: env(safe-area-inset-top, 0) !important;
    left: 0 !important;
    right: 0 !important;
    padding: .5rem;
  }
  .toast { width: 100% !important; max-width: 100% !important; }
}

/* =============================================================
   Small phones — max-width 360px (extra compact)
   ============================================================= */
@media (max-width: 360px) {
  .stats-row, .stat-cards, .dashboard-stats {
    grid-template-columns: 1fr !important;
  }
  .stat-card h3, .stat-card .stat-value { font-size: 1.1rem; }
  .modal-footer .btn { font-size: .78rem; }
  .table th, .table td { padding: .25rem .3rem; font-size: .72rem; }
}

/* =============================================================
   Landscape phone — short viewport
   ============================================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .bht-navbar, .navbar { padding: .15rem .5rem; }
  .bht-sidebar { padding-top: var(--bht-navbar-height); }
  .modal-content { min-height: auto; }
  canvas, .chart-container { max-height: 180px !important; }
}

/* =============================================================
   Print-friendly (hide non-essential)
   ============================================================= */
@media print {
  .bht-sidebar, .bht-navbar, .navbar,
  .fab, .bht-fab, .btn-fab,
  .sidebar-backdrop, .toast-container,
  .sidebar-toggle { display: none !important; }
  .bht-main, .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
}

/* Haredi UX: larger text for readability */
.card, .list-group-item, .table { font-size: 0.95rem; }
.btn { font-size: 0.9rem; }
h5, .h5 { font-size: 1.15rem; }

/* Breadcrumb navigation for detail/card pages */
.breadcrumb-nav {
  font-size: 0.85rem;
  padding: 0.5rem 0;
  color: #6c757d;
}
.breadcrumb-nav a {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb-nav a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.breadcrumb-nav .separator {
  margin: 0 0.4rem;
  opacity: 0.5;
}
[data-theme="dark"] .breadcrumb-nav a {
  color: #60a5fa;
}
[data-theme="dark"] .breadcrumb-nav a:hover {
  color: #93bbfd;
}
[data-theme="dark"] .stat-card { background: #1e293b; }
[data-theme="dark"] .empty-state { color: #94a3b8; }
[data-theme="dark"] .breadcrumb-nav { color: #94a3b8; }

/* ===== Email Module Styles ===== */
.email-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}
.email-row.border-start {
  border-color: var(--bs-primary) !important;
}
.email-msg-body {
  font-family: 'Heebo', sans-serif;
  color: var(--bht-text);
}
.email-collapsed .email-msg-body {
  display: none;
}
.email-collapsed .card-body {
  opacity: .65;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
[data-theme="dark"] .email-row {
  background: #1e293b;
}
[data-theme="dark"] .email-row:hover {
  background: #253347;
}

/* ===== Improved Mobile Touch Targets ===== */
@media (max-width: 767.98px) {
  .btn-sm {
    min-height: 36px;
    padding: .375rem .625rem;
  }
  .form-check-input {
    width: 1.2em;
    height: 1.2em;
  }
  .page-header h1 {
    font-size: 1.25rem;
  }
  .page-header .btn {
    font-size: .8rem;
  }
  /* Email mobile: full width folders */
  #email-folders .list-group-item {
    padding: .6rem .75rem;
  }
}

/* ===== Better Loading States ===== */
/* removed duplicate @keyframes shimmer */
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton-line {
  animation: shimmer 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
}
[data-theme="dark"] .skeleton-line {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200px 100%;
}

/* ===== Smooth Page Transitions ===== */
.fade-in {
  animation: fadeIn .2s ease-out;
}
/* removed duplicate @keyframes fadeIn */
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Improved Print Styles ===== */
@media print {
  .sidebar, .navbar, #fab-container, #scroll-top, .btn, .modal { display: none !important; }
  .main-content { margin: 0 !important; padding: 0 !important; }
  #main-content { width: 100% !important; }
  body { font-size: 12pt; }
}

/* ===== Email Badge Pulse ===== */
#sidebar-email-badge:not(:empty) {
  animation: badgePulse 2s ease-in-out infinite;
}
/* removed duplicate @keyframes badgePulse */
  50% { transform: scale(1.15); }
}

/* ===== Clickable Phone Numbers ===== */
a[href^="tel:"] {
  color: var(--bs-success);
  text-decoration: none;
  font-weight: 500;
}
a[href^="tel:"]:hover {
  text-decoration: underline;
  color: #059669;
}
a[href^="tel:"]::before {
  content: "\F4C3"; /* bi-telephone */
  font-family: "bootstrap-icons";
  margin-left: 4px;
  font-size: .8em;
}
a[href^="sms:"] {
  color: var(--bs-info);
  text-decoration: none;
}
a[href^="sms:"]:hover {
  text-decoration: underline;
}

/* ===== Better Focus Styles for Accessibility ===== */
:focus-visible {
  outline: 2px solid var(--bs-primary) !important;
  outline-offset: 2px;
}
.sidebar-link:focus-visible {
  background: var(--bs-primary-bg-subtle);
  border-radius: var(--bht-radius-sm);
}

/* ===== Keyboard Shortcut Badges ===== */
kbd {
  background: #1e293b;
  color: #e2e8f0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .8em;
  font-family: monospace;
  border: 1px solid #475569;
}
[data-theme="dark"] kbd {
  background: #334155;
  border-color: #64748b;
}

/* ===== Smooth Scrolling ===== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== Selection Color ===== */
::selection { background: #3b82f6; color: #fff; }
[data-theme="dark"] ::selection { background: #6366f1; }

/* ===== Email Body Word Break ===== */
.email-msg-body { word-break: break-word; overflow-wrap: break-word; }

/* ===== Safe Area for Notched Phones ===== */
@supports (padding: env(safe-area-inset-bottom)) {
  #fab-container { bottom: calc(80px + env(safe-area-inset-bottom)); }
  #scroll-top { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .navbar { padding-top: env(safe-area-inset-top); }
}

/* ===== Table Row Hover ===== */
.table-bht tbody tr:hover, .table tbody tr:hover {
  background: rgba(59, 130, 246, .05) !important;
}
[data-theme="dark"] .table-bht tbody tr:hover, [data-theme="dark"] .table tbody tr:hover {
  background: rgba(99, 102, 241, .1) !important;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ===== Clickable Cards ===== */
.card-clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.card-clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.1) !important; }
.card-clickable:active { transform: translateY(0); }

/* ===== Empty State Enhancement ===== */
.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--bs-secondary);
}
.empty-state i { font-size: 3rem; opacity: .4; margin-bottom: 1rem; display: block; }
.empty-state h5 { font-weight: 600; margin-bottom: .5rem; }

/* ===== Badge Improvements ===== */
.badge { font-weight: 500; }
.badge.bg-light { border: 1px solid var(--bs-border-color); }

/* ===== Better Spinner ===== */
.spinner-border { border-width: 2px; }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: 2px; }

/* ===== Toast Enhancement ===== */
.toast-container { z-index: 10000 !important; }

/* ===== Mobile Notification Dropdown ===== */
@media (max-width: 767.98px) {
  #notif-dropdown { width: 280px !important; max-height: 350px; }
  .page-header h1 { font-size: 1.2rem; }
  .page-header p { font-size: .8rem; }
}

/* ===== Dark Mode Cards ===== */
[data-theme="dark"] .card { border-color: #334155; }
[data-theme="dark"] .card-header { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .list-group-item { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .modal-content { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .modal-header { border-color: #334155; }
[data-theme="dark"] .modal-footer { border-color: #334155; }
[data-theme="dark"] .dropdown-menu { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .dropdown-item { color: #e2e8f0; }
[data-theme="dark"] .dropdown-item:hover { background: #334155; }
[data-theme="dark"] .form-control { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .form-select { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .input-group-text { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .alert { border-color: #334155; }
[data-theme="dark"] .nav-tabs .nav-link { color: #94a3b8; }
[data-theme="dark"] .nav-tabs .nav-link.active { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .accordion-button { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .accordion-body { background: #0f172a; }
[data-theme="dark"] .progress { background: #334155; }
[data-theme="dark"] hr { border-color: #334155; }

/* ===== Dark Mode Final Touches ===== */
[data-theme="dark"] .border { border-color: #334155 !important; }
[data-theme="dark"] .border-bottom { border-color: #334155 !important; }
[data-theme="dark"] .bg-light { background: #1e293b !important; }
[data-theme="dark"] .text-dark { color: #e2e8f0 !important; }
[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.3) !important; }
[data-theme="dark"] .table { color: #e2e8f0; }
[data-theme="dark"] .table-bht th { background: #1e293b; }
[data-theme="dark"] .dialer-display { background: #0f172a; color: #e2e8f0; }
[data-theme="dark"] .dialer-btn { background: #1e293b; color: #e2e8f0; border-color: #334155; }
[data-theme="dark"] .dialer-btn:hover { background: #334155; }
[data-theme="dark"] .sidebar { background: #0f172a !important; }
[data-theme="dark"] .sidebar-link { color: #94a3b8; }
[data-theme="dark"] .sidebar-link:hover { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .sidebar-link.active { background: #1e3a5f; color: #60a5fa; }
[data-theme="dark"] .sidebar-cat-header { color: #94a3b8; }
[data-theme="dark"] .sidebar-footer { border-color: #334155; }
[data-theme="dark"] .offcanvas { background: #0f172a; }
[data-theme="dark"] .navbar { background: #0f172a !important; }
[data-theme="dark"] body { background: #0f172a; color: #e2e8f0; }

/* ===== Mobile Tap Highlight ===== */
.btn, .sidebar-link, .card-clickable, .att-btn, .email-row {
  -webkit-tap-highlight-color: rgba(59, 130, 246, .15);
}

/* ===== Text Truncation Utilities ===== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== RTL Form Polish ===== */
.form-label { font-weight: 500; font-size: .875rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .2);
}
.form-control::placeholder { opacity: .65; }

/* ===== Sidebar Category Transition ===== */
.sidebar-cat-body {
  transition: max-height .25s ease;
  overflow: hidden;
}
.sidebar-cat-body.collapsed { max-height: 0 !important; }

/* ===== Command Palette Dark Mode ===== */
[data-theme="dark"] #command-palette > div { background: #1e293b !important; }
[data-theme="dark"] #command-palette input { background: #0f172a; color: #e2e8f0; border: none; }
[data-theme="dark"] .cmd-item:hover { background: #334155 !important; }

/* ===== Notification Bell Shake ===== */
#notif-count:not(.d-none) {
  animation: bellShake 3s ease-in-out infinite;
}
@keyframes bellShake {
  0%, 90%, 100% { transform: translate(-50%, 0); }
  92%, 96% { transform: translate(-50%, -2px) rotate(5deg); }
  94%, 98% { transform: translate(-50%, -2px) rotate(-5deg); }
}

/* ===== Avatar Hover Zoom ===== */
.avatar { transition: transform .2s; }
.avatar:hover { transform: scale(1.1); }

/* ===== Page Header Gradient ===== */
.page-header h1 i { transition: color .2s; }
.page-header:hover h1 i { color: var(--bs-primary) !important; }

/* ===== Loading Bar Glow ===== */
#bht-loading-bar {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6) !important;
  background-size: 200% 100%;
  animation: loadingGlow 1.5s linear infinite;
}
@keyframes loadingGlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ═══════════════════════════════════════════
   BHT v6.7 — End of Day Summary
   April 27, 2026 — 122 upgrades in one day
   52,000+ lines | 354 commits | 0 errors
   Built with love for בית התלמוד
   ═══════════════════════════════════════════ */

/* ===== Tooltip Styling ===== */
[title] { position: relative; }
.tooltip-inner { font-family: Heebo, sans-serif; font-size: .8rem; }

/* ===== Dark Mode Loading Bar ===== */
[data-theme="dark"] #bht-loading-bar {
  background: linear-gradient(90deg, #6366f1, #a78bfa, #6366f1) !important;
}

/* ===== Dark Mode Quick Notes ===== */
[data-theme="dark"] #dash-quick-note {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

/* ===== Dark Mode Email Page ===== */
[data-theme="dark"] .email-row { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .email-row:hover { background: #253347 !important; }
[data-theme="dark"] #email-folders .list-group-item { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] #email-folders .list-group-item.active { background: #1e3a5f; border-color: #3b82f6; }

/* ===== Dark Mode Print Center ===== */
[data-theme="dark"] .pc-template-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .pc-template-card:hover { background: #253347; }

/* ===== Dark Mode Attendance Buttons ===== */
[data-theme="dark"] .att-btn { background: #1e293b; border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .att-btn:hover { background: #334155; }
[data-theme="dark"] .att-btn.selected.present { background: #065f46; color: #6ee7b7; }
[data-theme="dark"] .att-btn.selected.absent { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .att-btn.selected.late { background: #78350f; color: #fcd34d; }

/* ===== Dark Mode Behavior Cards ===== */
[data-theme="dark"] .card.border-success { border-color: #065f46 !important; }
[data-theme="dark"] .card.border-danger { border-color: #7f1d1d !important; }
[data-theme="dark"] .card.border-warning { border-color: #78350f !important; }
[data-theme="dark"] .card.border-info { border-color: #164e63 !important; }
[data-theme="dark"] .card.border-primary { border-color: #1e3a5f !important; }

/* ===== Dark Mode Stat Card Icons ===== */
[data-theme="dark"] .stat-card { background: #1e293b !important; border-color: #334155; }
[data-theme="dark"] .stat-card .stat-value { color: #e2e8f0; }
[data-theme="dark"] .stat-card .stat-label { color: #94a3b8; }

/* ===== Dark Mode Search Results ===== */
[data-theme="dark"] #search-results { background: #1e293b; border-color: #334155; }
[data-theme="dark"] #search-results .dropdown-item { color: #e2e8f0; }
[data-theme="dark"] #search-results .dropdown-item:hover { background: #334155; }
[data-theme="dark"] #search-results .dropdown-item.active { background: #1e3a5f; }

/* ===== Dark Mode Charts ===== */
[data-theme="dark"] canvas { filter: brightness(.95); }
[data-theme="dark"] .chart-container { background: #1e293b; border-radius: 8px; padding: 8px; }

/* ===== Dark Mode Dialer Grid ===== */
[data-theme="dark"] .dialer-grid { gap: 8px; }
[data-theme="dark"] .dialer-call { background: #059669 !important; }
[data-theme="dark"] .dialer-delete { background: #334155 !important; color: #94a3b8 !important; }

/* ===== Dark Mode Login Screen ===== */
[data-theme="dark"] .login-pin-dot { border-color: #475569; background: #0f172a; }
[data-theme="dark"] .login-pin-dot.filled { background: #3b82f6; border-color: #3b82f6; }
[data-theme="dark"] .login-error-v2 { color: #fca5a5; }

/* ===== Round 27: Mobile UX hardening (v6.8) ===== */
/* Tables: horizontal-scroll wrapper with subtle shadow indicator on overflow */
@media (max-width: 767.98px) {
  .table-responsive,
  .card > .table {
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to left, var(--bs-body-bg) 30%, rgba(255,255,255,0)) left center,
      linear-gradient(to right, var(--bs-body-bg) 30%, rgba(255,255,255,0)) right center,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) right center;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  /* Touch targets: every interactive button/icon-link gets at least 40px hit area */
  .btn-sm, .btn-group-sm > .btn { min-height: 40px; min-width: 40px; }
  /* Modals: use full available width on small screens */
  .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
  .modal-body { padding: 1rem; }
  /* Form inputs: prevent iOS zoom-on-focus by ensuring 16px font-size */
  input, select, textarea { font-size: 16px !important; }
}

/* RTL number inputs: keep digits LTR for readability of phone/amount fields */
input[type="tel"], input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"] {
  direction: ltr;
  text-align: right;
}

/* Focus ring: clearer keyboard-nav indicator (a11y) */
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  box-shadow: none;
}

/* Print: hide noisy chrome */
@media print {
  .sidebar, .topbar, .modal-backdrop, .toast-container, #shortcuts-overlay, #command-palette,
  .btn, .btn-group, .dropdown-toggle, .pagination, .floating-action, [data-bs-toggle="tooltip"] {
    display: none !important;
  }
  body { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  a[href]:after { content: ''; }
}

/* ===== Batch 1 expert upgrades (v6.8) ===== */

/* Stronger reduced-motion: kill ALL animations + smooth-scroll for users who request it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .landing-particles, .landing-icon-v2, .sidebar-link.active::after,
  .progress-bar, .badge.bg-danger { animation: none !important; }
}

/* Kill always-on infinite animations (battery + cognitive cost). Make opt-in via .is-active */
.sidebar-link.active::after,
.sidebar-link.active::before { animation: none !important; }
.progress-bar:not(.is-pulsing) { animation: none !important; }
.badge.bg-danger:not(.badge-pulse) { animation: none !important; }
.sidebar-nav::before { animation-iteration-count: 1 !important; }

/* Skip link visible only on focus */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Unified chip system (replaces ad-hoc badges across pages) */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1;
  background: var(--chip-bg, #dbeafe);
  color: var(--chip-fg, #1e40af);
  border: 1px solid color-mix(in srgb, var(--chip-fg, #1e40af) 25%, transparent);
}
.chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
}
.chip-success { --chip-bg: #dcfce7; --chip-fg: #166534; }
.chip-danger  { --chip-bg: #fee2e2; --chip-fg: #991b1b; }
.chip-warning { --chip-bg: #fef3c7; --chip-fg: #78350f; }
.chip-info    { --chip-bg: #dbeafe; --chip-fg: #1e40af; }
.chip-muted   { --chip-bg: #f3f4f6; --chip-fg: #4b5563; }

/* Better empty state (radial blob behind icon, anchored CTA slot) */
.empty-state-v2 {
  padding: 4rem 2rem; text-align: center; position: relative;
}
.empty-state-v2::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -65%); width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.10), transparent 70%);
  z-index: 0; pointer-events: none;
}
.empty-state-v2 > * { position: relative; z-index: 1; }
.empty-state-v2 i { font-size: 3.5rem; opacity: .8; color: #3b82f6; }
.empty-state-v2 h5 { font-weight: 700; margin-top: .75rem; }

/* Required-field asterisk: wrapped in aria-hidden span at template level; visual emphasis here */
label .req-asterisk { color: #dc2626; margin-inline-start: 4px; font-weight: 700; }

/* ===== Animations / micro-interactions ===== */

/* Top progress bar on route change */
#route-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
  transition: width .25s ease, opacity .3s;
  box-shadow: 0 0 8px rgba(37,99,235,.5);
  pointer-events: none;
}
#route-bar.done { width: 100% !important; opacity: 0; }

/* Page enter animation */
.page-enter { animation: pageEnter .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Optimistic row remove / add */
.row-removing { animation: rowOut .35s ease forwards; }
@keyframes rowOut { to { opacity: 0; transform: translateX(20px); max-height: 0; padding: 0; border: 0; } }
.row-incoming { animation: rowIn .4s cubic-bezier(.2,.7,.2,1); }
@keyframes rowIn {
  from { background: rgba(34,197,94,.18); transform: translateX(-12px); opacity: 0; }
  to { background: transparent; transform: none; opacity: 1; }
}

/* Button ripple */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0);
  animation: rip .55s ease-out;
  pointer-events: none;
}
@keyframes rip { to { transform: scale(4); opacity: 0; } }

/* Form field focus underline slide */
.form-control, .form-select {
  background-image: linear-gradient(#3b82f6, #3b82f6);
  background-size: 0 2px;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.2,.7,.2,1), border-color .2s;
}
.form-control:focus, .form-select:focus { background-size: 100% 2px; }

/* Success checkmark draw animation */
.ck-svg { width: 48px; height: 48px; }
.ck-svg circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: ckDraw .5s ease forwards; }
.ck-svg path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: ckDraw .35s .35s ease forwards; }
@keyframes ckDraw { to { stroke-dashoffset: 0; } }

/* Toast slide-in from start edge with overshoot */
.toast-bht.showing, .toast-bht.show { animation: toastIn .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-110%) scale(.92); }
  to { opacity: 1; transform: none; }
}

/* ===== Color tokens / contrast ===== */

/* Inverse text on warning (white-on-yellow fails WCAG AA — was 3.4:1) */
.btn-warning, .badge.bg-warning, .text-bg-warning { color: #1a1a1a !important; }
.alert-warning { color: #78350f; }

/* Color-blind safe palette (Okabe-Ito) — opt in via [data-palette="cb"] on root */
[data-palette="cb"] {
  --bht-primary: #0072B2; --bht-success: #009E73;
  --bht-danger:  #D55E00; --bht-warning: #E69F00;
  --bht-info:    #56B4E9;
}

/* High-contrast mode (auto-detect prefers-contrast or opt-in via [data-contrast="high"]) */
[data-contrast="high"], html[data-contrast="high"] body {
  --bs-body-color: #000;
  --bs-border-color: #000;
}
[data-contrast="high"] .card, [data-contrast="high"] .btn,
[data-contrast="high"] input, [data-contrast="high"] .form-control {
  border-width: 2px !important;
}
[data-contrast="high"] *:focus-visible { outline: 3px solid #000 !important; outline-offset: 3px; }
@media (prefers-contrast: more) {
  .card, .btn, input, .form-control { border-width: 1.5px !important; }
}

/* ===== Print: B/W-safe status patterns (survives mono printers) ===== */
@media print {
  .pc-status, .badge.status-marker {
    display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
  }
  .pc-status::before, .badge.status-marker::before {
    content: ''; width: 10px; height: 10px;
    border: 1pt solid #000; display: inline-block;
  }
  .pc-status.ok::before, .badge.status-marker.ok::before { background: #000; }
  .pc-status.absent::before, .badge.status-marker.absent::before {
    background: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 4px);
  }
  .pc-status.late::before, .badge.status-marker.late::before {
    background: repeating-linear-gradient(0deg, #000 0 1.5px, #fff 1.5px 4px);
  }
  .pc-status.excused::before { background: #fff; border-style: dashed; }
  /* Tables: header dark, repeat across page breaks */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  table, figure, .card, .chart-container { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
  /* Hint browsers to honor print colors for status patterns */
  .pc-status, .pc-status::before, .badge.status-marker, .badge.status-marker::before {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ===== Hebrew typography + RTL polish (v6.9 marathon Day 1) ===== */

/* Typography tokens */
:root {
  --fs-base: 1rem;
  --fs-ratio: 1.25;  /* Major Third modular scale */
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 700;
  --rhythm: 1.5rem;
}

/* Modular type scale — h1-h6 with predictable ratios */
h6 { font-size: var(--fs-base); }
h5 { font-size: 1.25rem; }
h4 { font-size: 1.5rem; }
h3 { font-size: 1.75rem; }
h2 { font-size: 2rem; }
h1, .page-header h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.15; }

/* Font-weight tier strategy — semantic instead of magic numbers */
body { font-weight: var(--fw-body); }
.btn, .badge, .form-label, .nav-link, .chip { font-weight: var(--fw-medium); }
.card-title, .stat-label, th, .modal-title, .table-bht thead th { font-weight: var(--fw-semibold); }
h1, h2, .stat-value, .login-title, .page-header h1 { font-weight: var(--fw-display); }

/* Optical letter-spacing — negative tracking on display, positive on caps/badges */
h1, h2, .login-title, .stat-card .stat-value { letter-spacing: -0.015em; }
h3, h4 { letter-spacing: -0.01em; }
.badge, .chip, .table-bht thead th, .stat-label { letter-spacing: 0.03em; }

/* Vertical rhythm — baseline-locked spacing */
h1, h2, h3, h4, h5, h6 { margin-block-start: 0; line-height: 1.25; }
.card-body > *:last-child, .modal-body > *:last-child { margin-block-end: 0; }

/* Underline polish — avoids collision with Hebrew descenders (ק ך ן) */
a, .breadcrumb-item a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: auto;
}
a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.btn-link, .nav-link { text-decoration-thickness: from-font; }

/* text-wrap balance — eliminates orphans in short Hebrew titles */
h1, h2, h3, .page-header h1, .modal-title, .card-title, .login-title,
.empty-state h5, .empty-state-v2 h5 { text-wrap: balance; }
p, .toast-body, .alert, .stat-label { text-wrap: pretty; }
.badge, .chip, .btn { white-space: nowrap; }

body {
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "locl" 1;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== Day 1: Visual UI master + Color systems ===== */

/* Surface elevation tiers (cards-on-cards, dropdown-on-modal) */
:root {
  --bht-surface-1: #f8f9fa;
  --bht-surface-2: #ffffff;
  --bht-surface-3: #fdfdfd;
  --bht-info-soft: #eff6ff;
  --bht-success-soft: #ecfdf5;
  --bht-danger-soft: #fef2f2;
  --bht-warning-soft: #fffbeb;
  --bht-chag: #7c3aed;
  --bht-chag-soft: #f3e8ff;
  --bht-shabbat: #0891b2;
  --bht-shabbat-soft: #cffafe;
  --bht-yarzeit: #475569;
  --bht-yarzeit-soft: #e2e8f0;
  --bht-rosh-chodesh: #ca8a04;
  --bht-rosh-chodesh-soft: #fef9c3;
  --bht-primary-rgb: 37 99 235;
}
[data-theme="dark"] {
  --bht-surface-1: #161b22;
  --bht-surface-2: #1c2128;
  --bht-surface-3: #22272e;
  --bht-info-soft: #0c2340;
  --bht-success-soft: #052e1f;
  --bht-danger-soft: #3b0d0d;
  --bht-warning-soft: #3a2806;
  --bht-primary: #60a5fa;       /* lightened for AA on #0d1117 */
  --bht-primary-light: #1e3a5f;
}
[data-palette="cb"] { --bht-primary-rgb: 0 114 178; }

/* Hebrew calendar event tints */
.event-chag { background: var(--bht-chag-soft); color: var(--bht-chag); border-inline-start: 3px solid var(--bht-chag); }
.event-shabbat { background: var(--bht-shabbat-soft); color: var(--bht-shabbat); border-inline-start: 3px solid var(--bht-shabbat); }
.event-yarzeit { background: var(--bht-yarzeit-soft); color: var(--bht-yarzeit); border-inline-start: 3px solid var(--bht-yarzeit); font-style: italic; }
.event-rosh-chodesh { background: var(--bht-rosh-chodesh-soft); color: var(--bht-rosh-chodesh); border-inline-start: 3px solid var(--bht-rosh-chodesh); }

/* Page-header underline accent */
.page-header { padding-bottom: 1rem; border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.1)); position: relative; margin-bottom: 1.5rem; }
.page-header::after { content: ''; position: absolute; bottom: -1px; right: 0; width: 64px; height: 3px;
  background: linear-gradient(135deg, #2563eb, #7c3aed); border-radius: 2px; }

/* Card padding standard (premium feel) */
.card-body { padding: 1.25rem 1.4rem; }
.card-header { padding: .9rem 1.4rem; background: transparent; border-bottom: 1px solid rgba(0,0,0,.08); font-weight: 600; }
@media (max-width: 575.98px) { .card-body { padding: 1rem; } }

/* Premium hr with fade edges */
hr, .hr-soft { border: 0; height: 1px; opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12) 15%, rgba(0,0,0,.12) 85%, transparent);
  margin: 1.25rem 0; }
[data-theme="dark"] hr, [data-theme="dark"] .hr-soft {
  background: linear-gradient(90deg, transparent, #30363d 15%, #30363d 85%, transparent); }

/* Alert with leading accent bar */
.alert { position: relative; overflow: hidden; padding-inline-start: 1.1rem; }
.alert::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: currentColor; opacity: .7; }

/* List-group hover slide-indent */
.list-group-item-action { transition: background .18s, padding-inline-start .18s; position: relative; }
.list-group-item-action:hover { padding-inline-start: 1.4rem; }
.list-group-item-action:hover::before { content: ''; position: absolute; inset-inline-start: 0; top: 10%; bottom: 10%; width: 3px; background: #2563eb; border-radius: 0 3px 3px 0; }

/* Section-title eyebrow tier */
.section-title { display: flex; align-items: center; gap: .6rem; margin: 1.75rem 0 .9rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bs-secondary, #6c757d); }
.section-title::after { content: ''; flex: 1; height: 1px; background: rgba(0,0,0,.1); }
.section-title i { color: #2563eb; font-size: 1rem; letter-spacing: 0; }

/* Button-group seam consistency */
.btn-group > .btn + .btn { margin-inline-start: -1px; }
.btn-group .btn.active { z-index: 2; box-shadow: inset 0 0 0 1px color-mix(in srgb, #2563eb 40%, transparent); }

/* Dark-mode badge/att-btn — fix visible bug where present/absent stay light-pink */
[data-theme="dark"] .badge-active   { background: #052e1f; color: #86efac; border: 1px solid #064e3b; }
[data-theme="dark"] .badge-inactive { background: #2a0a0a; color: #fda4af; border: 1px solid #7f1d1d; }
[data-theme="dark"] .att-btn.present { background: #052e1f; border-color: #16a34a; color: #86efac; }
[data-theme="dark"] .att-btn.absent  { background: #2a0a0a; border-color: #dc2626; color: #fca5a5; }
[data-theme="dark"] .att-btn.late    { background: #3a2806; border-color: #d97706; color: #fcd34d; }
[data-theme="dark"] a { color: #93c5fd; }
[data-theme="dark"] a:hover { color: #bfdbfe; }

/* Forced-colors mode (Windows High Contrast) — preserve semantic meaning */
@media (forced-colors: active) {
  .chip, .badge-active, .badge-inactive, .att-btn { border: 1px solid CanvasText !important; forced-color-adjust: none; }
  .event-chag, .event-shabbat, .event-yarzeit { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ===== Animation polish ===== */

/* Scroll-triggered reveal (paired with IntersectionObserver in utils.js) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Button press depth */
.btn { transition: transform .08s ease-out, box-shadow .15s, background-color .15s, filter .15s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); box-shadow: inset 0 2px 4px rgba(0,0,0,.12); filter: brightness(.93); }

/* Success pulse (ring-burst) — apply class .saved-pulse for 700ms */
.saved-pulse { position: relative; animation: savedTint .7s ease-out; }
.saved-pulse::before { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(34,197,94,.85); animation: savedRing .7s cubic-bezier(.2,.7,.2,1) forwards; pointer-events: none; }
@keyframes savedRing { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes savedTint { 0%, 100% { background-color: transparent; } 30% { background-color: rgba(34,197,94,.12); } }

/* Modal backdrop blur */
.modal-backdrop.show { backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1); }

/* Sticky-header shadow on scroll */
.topbar { transition: box-shadow .25s, backdrop-filter .25s; }
body.scrolled .topbar { box-shadow: 0 4px 14px rgba(15,23,42,.08); backdrop-filter: blur(14px) saturate(1.1); }

/* ===== Tablet wins (768-1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Larger tap targets between phone-44 and desktop-32 */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; padding: .45rem .85rem; }
  .table td, .table th { padding: .85rem .6rem; }
  .nav-link, .dropdown-item, .list-group-item-action { min-height: 44px; }
  /* Two-col form layout — use horizontal space */
  .modal-body .row.g-3 > .col-md-4 { flex: 0 0 50%; max-width: 50%; }
}

/* Skip hover transforms on touch devices (iPad portrait reports any-hover:none) */
@media (any-hover: none) {
  .card:hover, .btn:hover, .list-group-item:hover, tr:hover {
    transform: none !important;
  }
}

/* ===== Native-feel tap states (mobile) ===== */
@media (hover: none) {
  .btn, .list-group-item, .card[role="button"], .sidebar-link, #mobile-bottom-nav a {
    -webkit-tap-highlight-color: transparent;
    transition: transform .08s, background-color .12s, filter .12s;
  }
  .btn:active { transform: scale(.96); filter: brightness(.92); }
  #mobile-bottom-nav a:active { transform: scale(.9); }
  a, button { touch-action: manipulation; }
}

/* Sticky search-pill at top of list pages on mobile */
@media (max-width: 991.98px) {
  .search-box {
    position: sticky;
    top: calc(56px + env(safe-area-inset-top, 0));
    z-index: 1025;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    border-radius: 0 0 999px 999px;
  }
}

/* Pull-to-refresh spin */
.spin-anim { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Auto-hide top navbar on scroll-down (mobile) */
#main-navbar { transition: transform .25s ease; }

/* ===== Dark mode polish (Day 1-9) ===== */

/* Chart canvas dim — reduces glare on #0d1117 */
[data-theme="dark"] .chart-container canvas,
[data-theme="dark"] canvas { filter: brightness(.88) saturate(.92) contrast(1.05); }

/* Focus ring glow on dark (cyan halo) */
[data-theme="dark"] :focus-visible {
  outline-color: #38bdf8 !important;
  box-shadow: 0 0 0 4px rgba(56,189,248,.25);
}

/* Gradient drift — primary too dim on dark */
[data-theme="dark"] {
  --bht-gradient-primary: linear-gradient(135deg, #60a5fa, #a78bfa);
  --bht-gradient-info: linear-gradient(135deg, #38bdf8, #22d3ee);
}

/* Empty-state icons + illustration brightness */
[data-theme="dark"] .empty-state i, [data-theme="dark"] .empty-state-v2 i { opacity: .65; color: #94a3b8; }
[data-theme="dark"] img.illustration, [data-theme="dark"] .empty-state img { filter: brightness(.9) contrast(1.1); }

/* Scrollbar corner + track */
[data-theme="dark"] ::-webkit-scrollbar-corner { background: #0d1117; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255,255,255,.02); }

/* mark highlight (search live-filter) */
[data-theme="dark"] mark, [data-theme="dark"] .mark {
  background: rgba(250,204,21,.25);
  color: #fde68a;
  padding: 0 .2em;
  border-radius: 3px;
}

/* blockquote + hr drift */
[data-theme="dark"] blockquote {
  border-right: 4px solid #38bdf8;
  background: rgba(56,189,248,.06);
  color: var(--bs-secondary-color, #adb5bd);
  padding: .75rem 1rem;
}
[data-theme="dark"] hr {
  background: linear-gradient(90deg, transparent, #475569 50%, transparent);
}

/* ===== Print quality (Day 1-10) ===== */
@media print {
  /* Paper-size switcher via body data-attr */
  body[data-paper="letter"] { @page { size: Letter; margin: 0.75in; } }
  body[data-paper="a4-landscape"] { @page { size: A4 landscape; margin: 1cm 1.5cm; } }

  /* Diagonal watermark via data-watermark attr (טיוטה / מוסדי / סודי) */
  body[data-watermark]::before {
    content: attr(data-watermark);
    position: fixed; inset: 0;
    display: grid; place-items: center;
    font: 700 96pt Heebo, serif;
    color: rgba(0,0,0,.07);
    transform: rotate(-32deg);
    z-index: 9999;
    pointer-events: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* Typographic polish */
  p, li, dd { orphans: 3; widows: 3; }
}

/* ===== Render perf: content-visibility:auto on long lists ===== */
.student-card, .att-row, .fin-row, .behavior-row, .homework-card,
.list-group-item, .table-bht tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 80px;
}

/* contain:layout/paint on offscreen-prone widgets */
.card, .modal-body { contain: layout style; }

/* ===== Mobile perf — kill backdrop-filter, infinite anims, multi-layer shadows ===== */
@media (max-width: 991.98px), (hover: none) {
  /* Backdrop blur forces compositor off-screen pass — kill on phones */
  .login-card, .topbar, .glass, .bht-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .modal-backdrop.show {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
}

/* ===== WCAG AA contrast fixes (Day 4-3) ===== */
.chip-info { --chip-fg: #1e3a8a; }
.badge-pending { color: #78350f !important; }
.att-btn.late { color: #92400e !important; border-color: #92400e !important; }
.att-btn.present { color: #166534 !important; border-color: #166534 !important; }
.att-btn.absent { color: #991b1b !important; border-color: #991b1b !important; }
.breadcrumb-item a { color: #1d4ed8 !important; }
.breadcrumb-item.active { color: #52596a !important; }

/* ===== Focus visibility upgrades (Day 4-7) ===== */
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-visible {
  background: rgba(37,99,235,.1);
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
.form-control.is-invalid:focus-visible, .form-select.is-invalid:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(220,38,38,.35);
  outline: none;
}

@media (max-width: 991.98px) {
  /* Disable always-on infinite animations (battery + GPU) */
  .login-bg::before, .orb, .pulse-glow, .shimmer,
  .badge-pulse, .bell-pulse, .progress-stripes, .rainbow-bar { animation: none !important; }

  /* Simpler shadow tokens on mobile */
  :root {
    --bht-shadow: 0 1px 2px rgba(0,0,0,.08);
    --bht-shadow-md: 0 2px 4px rgba(0,0,0,.08);
    --bht-shadow-lg: 0 4px 8px rgba(0,0,0,.1);
    --bht-shadow-xl: 0 6px 12px rgba(0,0,0,.12);
  }
}

/* Wider touch-action coverage (kill 300ms delay on more elements) */
a, button, [role="button"], .list-group-item, .nav-link, .card[role="button"],
.search-box input, #mobile-bottom-nav a, .tab-pane { touch-action: manipulation; }
.modal-body, .table-responsive { touch-action: pan-y; }

@media print {
  h1 + p, h2 + p, h3 + p { page-break-before: avoid; break-before: avoid; }
  table.pc-table, table.table-bht { table-layout: fixed; word-wrap: break-word; }
  tr { page-break-inside: avoid; break-inside: avoid; }
  caption { caption-side: top; font-weight: 700; color: #000; }
}
.table, .stat-value, .badge, td, th, .dialer-display, .chip {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* unicode-bidi:plaintext lets each container compute its own bidi paragraph —
   handles "כיתה א-3", "WhatsApp 050-1234567" etc. without RLM hacks */
.card-title, .stat-label, .badge, .toast-body, .alert, .form-label, .modal-title,
.empty-state h5, .empty-state-v2 h5 { unicode-bidi: plaintext; }

/* LTR-isolated atoms: codes, IDs, file names, emails, URLs */
code, kbd, .file-name, .doc-id, .invoice-no, .email, .url, .ltr-iso {
  direction: ltr; unicode-bidi: isolate; text-align: start;
}

/* Numeric columns in tables: right-align (end), tabular, LTR isolated */
.table-bht td.num, .table-bht th.num,
.table-bht td[data-type="number"], .table-bht td[data-type="currency"] {
  text-align: end;
  direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ===== Mobile UX additions ===== */

/* Sticky table headers within table-responsive on small screens */
@media (max-width: 991.98px) {
  .table-responsive { max-height: calc(100vh - 200px); overflow: auto; -webkit-overflow-scrolling: touch; }
  .table-bht thead th, .table thead th {
    position: sticky; top: 0; z-index: 5;
    background: var(--bs-card-bg, #fff);
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
  }
}

/* iOS safe-area for floating UI */
#fab-container { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
#scroll-top { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
.toast-container { bottom: calc(env(safe-area-inset-bottom)) !important; }

/* Mobile bottom-nav: clear content underneath + active highlight */
@media (max-width: 991.98px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  #mobile-bottom-nav a { padding: 4px 6px; transition: color .15s; }
  #mobile-bottom-nav a.active { color: #1d4ed8 !important; font-weight: 700; }
  #mobile-bottom-nav a:hover { color: #1d4ed8; }
  /* Hide desktop sidebar on mobile (offcanvas takes over) */
  .sidebar.d-lg-block { display: none !important; }
}

/* Bottom-sheet modals on phones (slide up from bottom, rounded top corners) */
@media (max-width: 575.98px) {
  .modal-dialog:not(.modal-fullscreen):not(.modal-dialog-centered) {
    margin: 0; position: fixed; left: 0; right: 0; bottom: 0; max-width: 100%;
  }
  .modal-content { border-radius: 18px 18px 0 0; max-height: 90vh; }
  .modal.fade .modal-dialog:not(.modal-fullscreen) { transform: translateY(100%); transition: transform .3s ease; }
  .modal.show .modal-dialog:not(.modal-fullscreen) { transform: translateY(0); }
  /* Drag handle indicator at the top */
  .modal-content::after {
    content: ""; display: block;
    width: 40px; height: 4px; background: rgba(0,0,0,.18);
    border-radius: 2px; position: absolute; top: 8px;
    left: 50%; transform: translateX(-50%);
  }
}