/*
Purpose: "Smart Campus" cohesive modern skin layered on top of style.css responsive plumbing.
Caller: Linked after /css/style.css in landing, login, admin, and guru EJS views.
Deps: CSS custom properties (tokens) defined in /css/style.css :root.
MainFuncs: Restyles buttons, cards, forms, navbars, hero, stat cards, tabs, login, tables, modals.
SideEffects: Changes browser presentation only. Mobile-first (<430px priority).
*/

/* ---------- Base typography rhythm ---------- */
.app-shell {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.app-shell h1, .app-shell h2, .app-shell h3,
.app-shell .section-title {
  letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */
.app-shell .btn,
.login-container .btn {
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background-color var(--transition-fast), border-color var(--transition-fast);
}
.app-shell .btn:active,
.login-container .btn:active { transform: translateY(1px); }
.app-shell .btn-lg { min-height: 48px; }

.app-shell .btn-primary,
.login-container .btn-primary {
  background-image: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%) !important;
  background-color: var(--primary-600) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--shadow-primary);
}
.app-shell .btn-primary:hover,
.login-container .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.40);
  color: #fff !important;
}
.app-shell .btn-outline-primary {
  border: 1.5px solid var(--primary-600) !important;
  color: var(--primary-600) !important;
  background: transparent;
}
.app-shell .btn-outline-primary:hover {
  background: var(--primary-600) !important;
  color: #fff !important;
}
.app-shell .btn-success {
  background-image: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
  border: none !important;
  color: #fff !important;
}
.app-shell .btn-danger {
  background-image: linear-gradient(135deg, #f87171 0%, #dc2626 100%) !important;
  border: none !important;
  color: #fff !important;
}

/* ---------- Cards ---------- */
.app-shell .card,
.app-shell .card-clean,
.login-container .card-clean {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm);
  background: var(--bg-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}
.app-shell .card:hover,
.app-shell .card-clean:hover {
  box-shadow: var(--shadow-md);
}
.app-shell .card-header {
  background: var(--surface-2) !important;
  color: var(--text-heading) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  font-weight: 600;
}

/* ---------- Forms ---------- */
.app-shell .form-control,
.app-shell .form-select,
.login-container .form-control {
  border-radius: var(--radius-md) !important;
  border: 1.5px solid var(--border-color) !important;
  background: var(--surface-1);
  color: var(--text-body) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.app-shell .form-control-lg,
.login-container .form-control-lg { min-height: 50px; }
.app-shell .form-control:focus,
.app-shell .form-select:focus,
.login-container .form-control:focus {
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 4px var(--ring) !important;
}
.app-shell .form-label,
.login-container .form-label {
  font-weight: 600;
  color: var(--text-heading) !important;
  margin-bottom: 0.4rem;
}
/* input-group seams: the global .form-control border-radius !important (above) overrides
   Bootstrap's corner-squaring, so grouped controls render as separate rounded boxes with a
   broken outline at the seam (reported on the login password field). Re-square the inner
   edges so the input + addon read as one continuous pill, in both child orders. */
.app-shell .input-group > :not(:last-child):not(.dropdown-menu),
.login-container .input-group > :not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.app-shell .input-group > :not(:first-child):not(.dropdown-menu),
.login-container .input-group > :not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.login-container .input-group .form-control { border-right: 0 !important; }
.login-container .input-group .btn {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  border: 1.5px solid var(--border-color) !important;
  border-left: 0 !important;
  background: var(--surface-1);
}

/* ---------- Badges ---------- */
.app-shell .badge {
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.4em 0.7em;
}

/* ---------- Toasts ---------- */
.toast-container { z-index: 1090; }

/* ---------- News card "read more" link (synced from sman1dander.info) ---------- */
.news-readmore {
  color: var(--primary-600) !important;
  font-weight: 600;
  text-decoration: none;
}
.news-readmore:hover { text-decoration: underline; }
.news-readmore .bi { font-size: 0.85em; }

/* ---------- Responsive stacked tables (.table-stack): cards on phones, full table >= md ---------- */
@media (max-width: 767.98px) {
  .table-stack thead {
    /* header row redundant once each cell carries its data-label */
    display: none;
  }
  .table-stack,
  .table-stack tbody,
  .table-stack tbody tr,
  .table-stack tbody td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .table-stack tbody tr {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.9rem;
  }
  .table-stack tbody td {
    padding: 0.5rem 0 !important;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    text-align: left !important;
    overflow-wrap: anywhere;
  }
  .table-stack tbody tr td:last-child {
    border-bottom: 0;
  }
  .table-stack tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
  }
}

/* ---------- Glass navbars (landing / admin / guru) ---------- */
.navbar-landing,
.navbar-admin,
.navbar-guru {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-xs);
  padding-block: 0.65rem;
}
.navbar-landing .navbar-brand,
.navbar-admin .navbar-brand,
.navbar-guru .navbar-brand {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-heading) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.navbar-landing .navbar-brand i,
.navbar-admin .navbar-brand i,
.navbar-guru .navbar-brand i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary-500), var(--accent-600));
  color: #fff !important;
  font-size: 1.05rem;
  box-shadow: var(--shadow-primary);
  flex: 0 0 auto;
}
.navbar-landing .nav-link {
  font-weight: 600;
  color: var(--text-body) !important;
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.navbar-landing .nav-link:hover,
.navbar-landing .nav-link:focus {
  background: var(--primary-50);
  color: var(--primary-700) !important;
}
[data-bs-theme="dark"] .navbar-landing .nav-link:hover {
  background: rgba(59, 130, 246, 0.14);
}

/* ---------- Theme toggle (manual light/dark) ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-heading);
  font-size: 1.1rem;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
}
.theme-toggle i { line-height: 1; }
.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--primary-50);
  border-color: var(--primary-500);
  color: var(--primary-700);
  transform: translateY(-1px);
}
.theme-toggle:active { transform: translateY(0); }
[data-bs-theme="dark"] .theme-toggle:hover,
[data-bs-theme="dark"] .theme-toggle:focus-visible {
  background: rgba(59, 130, 246, 0.16);
  color: #fff;
}
/* floating variant for pages without a navbar (login) */
.theme-toggle-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1050;
  box-shadow: var(--shadow-md);
}

/* Prominent "Login Guru" call-to-action in the landing navbar */
.navbar-landing .nav-cta-login {
  background: linear-gradient(135deg, var(--primary-500), var(--accent-600));
  color: #fff !important;
  box-shadow: var(--shadow-primary);
  padding-inline: 1.15rem !important;
}
.navbar-landing .nav-cta-login:hover,
.navbar-landing .nav-cta-login:focus {
  background: linear-gradient(135deg, var(--primary-500), var(--accent-600)) !important;
  color: #fff !important;
  filter: brightness(1.06);
  transform: translateY(-1px);
}
/* Desktop: keep the toggle at the far right, after the menu */
@media (min-width: 992px) {
  .navbar-landing .navbar-actions { order: 3; margin-left: 0.6rem; }
  .navbar-landing .navbar-collapse { order: 2; }
}

/* Custom hamburger toggler */
.navbar-toggler-custom {
  width: 44px; height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--surface-1);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
.navbar-toggler-custom span {
  display: block; width: 20px; height: 2px;
  background: var(--text-heading); border-radius: 2px;
}

/* ---------- Touch targets >= 44px (a11y) ---------- */
/* The mobile toggler resolved to 36-40px via .landing-shell media rules, and
   footer links/contacts were only 16-21px tall. Enforce --touch-target-min. */
.landing-shell .navbar-toggler-custom,
.navbar-landing .navbar-toggler-custom {
  width: var(--touch-target-min) !important;
  min-width: var(--touch-target-min) !important;
  height: var(--touch-target-min) !important;
  min-height: var(--touch-target-min) !important;
}
.footer-links a,
.footer-contact-link {
  display: inline-flex !important;
  align-items: center;
  min-height: var(--touch-target-min) !important;
}
.footer-links li { margin-bottom: 0.1rem; }

/* ---------- Hero ---------- */
.hero-modern {
  background: var(--hero-gradient);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
}
.hero-modern .hero-title,
.hero-modern .hero-description,
.hero-modern .hero-feature-item,
.hero-modern .hero-feature-item span,
.hero-modern .hero-badge {
  color: #fff !important;
}
.hero-title { font-weight: 800; line-height: 1.08; }
.hero-title-highlight {
  background: linear-gradient(120deg, #fde68a 0%, #fca5f1 60%, #a5f3fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-description { color: rgba(255, 255, 255, 0.92) !important; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.95rem;
  font-weight: 600; font-size: 0.85rem;
}
.hero-features { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding-left: 0; }
.hero-feature-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.85rem;
}
.hero-feature-item i { color: #86efac !important; }

/* Hero visual card */
.hero-visual-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--radius-2xl);
  padding: 2.25rem;
  box-shadow: var(--shadow-xl);
}
.hero-visual-icon, .hero-visual-motto { color: #fff !important; }
.hero-visual-icon-circle {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff !important;
}
.hero-visual-icon-circle i { color: #fff !important; }

/* ---------- Stat cards ---------- */
.stat-card-modern {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.stat-card-modern:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stat-icon-modern {
  border-radius: 14px !important;
  color: #fff !important;
  box-shadow: var(--shadow-md);
}
.stat-icon-primary { background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important; }
.stat-icon-success { background: linear-gradient(135deg, #34d399, #059669) !important; }
.stat-icon-info { background: linear-gradient(135deg, #38bdf8, #2563eb) !important; }
.stat-icon-warning { background: linear-gradient(135deg, #fbbf24, #d97706) !important; }
.stat-icon-modern i { color: #fff !important; }
.stat-value { font-weight: 800; color: var(--text-heading) !important; }

/* ---------- Section titles ---------- */
.section-title { font-weight: 800; color: var(--text-heading) !important; }
.section-subtitle { color: var(--text-muted) !important; }

/* ---------- Segmented tabs ---------- */
.tab-nav-list {
  display: inline-flex;
  gap: 0.25rem;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 0.3rem;
}
.tab-btn-modern {
  border: none !important;
  background: transparent !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  color: var(--text-muted) !important;
  padding: 0.55rem 1rem !important;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.tab-btn-modern i { color: inherit !important; }
.tab-btn-modern:hover { color: var(--text-heading) !important; }
.tab-btn-modern.active {
  background: var(--bg-card) !important;
  color: var(--primary-700) !important;
  box-shadow: var(--shadow-sm);
}
.tab-btn-modern.active i { color: var(--primary-600) !important; }
.tab-btn-modern::after { display: none !important; }

/* ---------- Login ---------- */
.login-container {
  min-height: 100vh;
  min-height: 100svh;
  justify-content: center;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(37, 99, 235, 0.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(124, 58, 237, 0.16), transparent 55%),
    var(--bg-app);
  padding-block: 2rem;
}
.login-card {
  border-radius: var(--radius-2xl) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-xl) !important;
  width: 100%;
  max-width: 430px;
  background: var(--bg-card);
}
.login-logo {
  width: 68px; height: 68px;
  border-radius: 20px;
  display: grid; place-items: center;
  margin-inline: auto;
  background: linear-gradient(135deg, var(--primary-500), var(--accent-600));
  color: #fff !important;
  font-size: 1.9rem;
  box-shadow: var(--shadow-primary);
}
.login-logo i { color: #fff !important; }
.login-header { text-align: center; }
.login-title { font-weight: 800; color: var(--text-heading) !important; }
.login-school-name { color: var(--text-heading) !important; }
.login-subtitle { color: var(--text-muted) !important; }
.login-footer { margin-top: 1.5rem; }

/* Login alerts: flex layout keeps icon/text/dismiss aligned; the dismiss button
   is a small centered glyph with a 44px tap area (was a 76x84 alert-dismissible
   button that overflowed the alert and floated off-center). */
.login-container .alert { text-align: left; }
.login-container .alert.alert-dismissible { position: relative; padding-right: 2.5rem; }
/* Dismiss button: stays absolute (out of flow, so the message keeps full width and
   doesn't wrap early), shrunk to a small glyph and vertically centered; the 44px
   ::before keeps the tap target accessible. */
.login-container .alert .btn-close {
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
}
.login-container .alert .btn-close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  transform: translate(-50%, -50%);
}

/* Dismissible flash alerts (admin/guru dashboards): the global .btn-close sets a 44px
   touch target but Bootstrap's .alert-dismissible .btn-close padding (1.25rem 1rem) +
   content-box inflated it to ~76x84, taller than the alert, so the X anchored at top:0
   sat well below center. Constrain to a centered, border-box 44x44 target. Scoped to the
   admin/guru shells so the login page keeps its own close-button rules above. */
.admin-shell .alert-dismissible .btn-close,
.guru-shell .alert-dismissible .btn-close {
  box-sizing: border-box;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  background-size: 0.85rem;
}

/* SweetAlert2 dark mode: the library ships a light theme only, so its popups/toasts
   rendered as a white box on the app's dark surfaces (out of sync with the theme).
   Re-skin to the app's dark tokens. data-bs-theme lives on <html>, so this matches the
   swal container appended to <body>. */
[data-bs-theme="dark"] .swal2-popup {
  background: var(--bg-card);
  color: var(--text-body);
  border: 1px solid var(--border-color);
}
[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container {
  color: var(--text-body);
}
[data-bs-theme="dark"] .swal2-close {
  color: var(--text-muted);
}
[data-bs-theme="dark"] .swal2-close:hover {
  color: var(--text-body);
}
[data-bs-theme="dark"] .swal2-timer-progress-bar {
  background: rgba(255, 255, 255, 0.28);
}

/* ---------- Tables ---------- */
.app-shell .table {
  --bs-table-bg: transparent;          /* inherit card bg (fixes white rows in dark mode) */
  --bs-table-color: var(--text-body);
  --bs-table-striped-color: var(--text-body);
  --bs-table-striped-bg: color-mix(in srgb, var(--text-heading) 4%, transparent);
  --bs-table-hover-color: var(--text-heading);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-border-color: var(--border-color);
  color: var(--text-body);
}
.app-shell .table > thead th {
  background: var(--surface-2);
  color: var(--text-muted) !important;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
}
.app-shell .table > tbody td { vertical-align: middle; color: var(--text-body) !important; }
.app-shell .table-responsive { border-radius: var(--radius-md); }

/* ---------- Modals & dropdowns ---------- */
.app-shell .modal-content {
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-xl);
}
/* Tall modals here wrap header/body/footer in a <form>, which breaks Bootstrap's
   .modal-dialog-scrollable (it expects those as direct children of .modal-content):
   the body never becomes the scrolling flex child, so it overflows and the footer
   actions get pushed off-screen on short viewports. Promote the wrapping form to the
   flex column so .modal-body scrolls internally and the Save button stays reachable. */
.app-shell .modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.app-shell .modal-dialog-scrollable .modal-content > form > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.app-shell .modal-header {
  border-bottom: 1px solid var(--border-color);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.app-shell .dropdown-menu {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
}
.app-shell .dropdown-item { border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; }

/* ============================================================================
   Admin & Guru specifics
   ============================================================================ */

/* Nav links (admin / guru) as pill hover + active */
.navbar-admin .nav-link,
.navbar-guru .nav-link {
  font-weight: 600;
  color: var(--text-body) !important;
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.navbar-admin .nav-link:hover,
.navbar-admin .nav-link:focus,
.navbar-guru .nav-link:hover,
.navbar-guru .nav-link:focus {
  background: var(--primary-50);
  color: var(--primary-700) !important;
}
.navbar-admin .nav-link.active,
.navbar-guru .nav-link.active {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: #fff !important;
  box-shadow: var(--shadow-primary);
}
.navbar-admin .nav-link.active i,
.navbar-guru .nav-link.active i { color: #fff !important; }
[data-bs-theme="dark"] .navbar-admin .nav-link:hover,
[data-bs-theme="dark"] .navbar-guru .nav-link:hover { background: rgba(59, 130, 246, 0.14); }

/* Metric/stat icon chips -> vibrant gradients */
.admin-shell .icon-wrapper,
.guru-shell .icon-wrapper,
.app-shell .metric-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px !important;
  color: #fff !important;
  box-shadow: var(--shadow-md);
}
.admin-shell .icon-wrapper i,
.guru-shell .icon-wrapper i,
.app-shell .metric-icon i { color: #fff !important; line-height: 1; display: flex; align-items: center; justify-content: center; }
.app-shell .icon-wrapper.bg-primary-subtle { background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important; }
.app-shell .icon-wrapper.bg-success-subtle { background: linear-gradient(135deg, #34d399, #059669) !important; }
.app-shell .icon-wrapper.bg-info-subtle { background: linear-gradient(135deg, #38bdf8, #2563eb) !important; }
.app-shell .icon-wrapper.bg-warning-subtle { background: linear-gradient(135deg, #fbbf24, #d97706) !important; }
.app-shell .icon-wrapper.bg-danger-subtle { background: linear-gradient(135deg, #f87171, #dc2626) !important; }
.app-shell .icon-wrapper.bg-secondary-subtle { background: linear-gradient(135deg, #94a3b8, #475569) !important; }

/* Metric value emphasis */
.admin-shell .dashboard-metric-value,
.guru-shell .dashboard-metric-value {
  color: var(--text-heading) !important;
  font-weight: 800;
}

/* Alerts: rounder + soft */
.app-shell .alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

/* List groups */
.app-shell .list-group-item { border-color: var(--border-color); }

/* Sub-tabs (status pages) keep readable on glass */
.app-shell .nav-tabs { border-bottom: 1px solid var(--border-color); }
.app-shell .nav-tabs .nav-link {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--text-muted) !important;
  font-weight: 600;
}
.app-shell .nav-tabs .nav-link.active {
  color: var(--primary-700) !important;
  border-color: var(--border-color) var(--border-color) var(--bg-card);
}

/* ============================================================================
   CCTV viewer (camera picker + single / 2x2 grid stage)
   ============================================================================ */
.cctv-viewer .cctv-live-badge { letter-spacing: 0.03em; }

.cctv-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.cctv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-body);
  border-radius: var(--radius-pill);
  padding: 0.32rem 0.7rem;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}
.cctv-chip:hover { border-color: var(--primary-400); color: var(--primary-700); }
.cctv-chip.active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
}
.cctv-chip.active i, .cctv-chip.active .cctv-chip-loc { color: #fff !important; }
.cctv-chip i { color: var(--primary-600); font-size: 0.85rem; }
.cctv-chip-loc { font-weight: 500; opacity: 0.7; font-size: 0.78em; }

.cctv-stage {
  display: grid;
  gap: 0.75rem;
  transition: gap 0.2s ease;
}
.cctv-stage[data-layout="1"] { grid-template-columns: 1fr; }
.cctv-stage[data-layout="4"] { grid-template-columns: repeat(2, 1fr); }
.cctv-stage[data-layout="9"] { grid-template-columns: repeat(3, 1fr); }
/* Single-camera tile: keep it intentional, not edge-to-edge / dominant (#9/#10). */
.cctv-viewer[data-cctv-mode="preview"] .cctv-stage[data-layout="1"] { max-width: 560px; margin-inline: auto; }
.cctv-viewer[data-cctv-mode="full"] .cctv-stage[data-layout="1"] { max-width: min(100%, 980px, calc(76vh * 16 / 9)); margin-inline: auto; }

/* Lazy CCTV card grid (full monitor page): placeholders; click a card -> popup live. */
.cctv-stage--cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 0.85rem;
  max-width: none !important;
  margin-inline: 0 !important;
}
.cctv-card {
  display: flex; flex-direction: column;
  text-align: left; padding: 0; overflow: hidden;
  background: var(--bg-card); color: var(--text-body);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.cctv-card:hover, .cctv-card:focus-visible {
  border-color: var(--primary-500); box-shadow: var(--shadow-md); transform: translateY(-2px); outline: none;
}
.cctv-card-thumb {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: rgba(255, 255, 255, 0.45);
}
.cctv-card-cam { font-size: 2rem; line-height: 1; }
.cctv-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* While the popup stream connects, let the <video> poster (camera snapshot) show
   through instead of a near-opaque black overlay. */
.cctv-popup-frame .cctv-overlay[data-state="connecting"] { background: rgba(2, 6, 23, 0.35); }
.cctv-card-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 2.4rem; opacity: 0; transition: opacity var(--transition-fast);
}
.cctv-card:hover .cctv-card-play, .cctv-card:focus-visible .cctv-card-play { opacity: 0.95; }
.cctv-card-meta { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.75rem; min-width: 0; }
.cctv-card-name { font-weight: 700; color: var(--text-heading); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cctv-card-loc { font-size: 0.76rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cctv-stage .cctv-cell { animation: cctv-cell-in 0.22s ease; }
@keyframes cctv-cell-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
.cctv-stage:fullscreen {
  background: #000;
  padding: 0.75rem;
  align-content: center;
}

.cctv-cell {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  outline: none;
  cursor: pointer;
  /* IMPORTANT: do NOT set touch-action: none — it broke page scroll on mobile.
     Mobile users get clean fullscreen + native pinch-zoom instead of janky JS pan. */
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.cctv-cell.cctv-zoomed { cursor: zoom-out; }
.cctv-cell:focus-visible { box-shadow: 0 0 0 3px var(--ring); border-color: var(--primary-500); }
.cctv-cell video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  transform-origin: center center;
  transition: transform 0.18s ease;
  will-change: transform;
  -webkit-user-select: none; user-select: none;
}

/* Player state overlays */
.cctv-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  text-align: center;
  background: rgba(2, 6, 23, 0.78);
  color: #e5e7eb;
}
.cctv-overlay[data-state="playing"] { display: none; }
.cctv-overlay .cctv-ov { display: none; flex-direction: column; align-items: center; gap: 0.4rem; max-width: 92%; }
.cctv-overlay[data-state="connecting"] .cctv-ov-loading { display: flex; }
.cctv-overlay[data-state="offline"] .cctv-ov-offline { display: flex; }
.cctv-overlay[data-state="unsupported"] .cctv-ov-unsupported { display: flex; }
.cctv-overlay[data-state="error"] .cctv-ov-error { display: flex; }
.cctv-overlay[data-state="paused"] .cctv-ov-paused { display: flex; }
.cctv-overlay[data-state="paused"] { background: rgba(2, 6, 23, 0.6); }
.cctv-overlay .cctv-ov-paused i { color: #93c5fd; }
.cctv-overlay .cctv-ov i { font-size: 1.6rem; }
.cctv-overlay .cctv-ov-offline i { color: #fbbf24; }
.cctv-overlay .cctv-ov-unsupported i { color: #f87171; }
.cctv-overlay .cctv-ov-error i { color: #f87171; }
.cctv-overlay .cctv-ov small { opacity: 0.7; }
.cctv-overlay .cctv-ov-text { font-size: 0.82rem; line-height: 1.45; }
.cctv-overlay .cctv-ov-text strong { color: #fde68a; }
.cctv-spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  animation: cctv-spin 0.8s linear infinite;
}
@keyframes cctv-spin { to { transform: rotate(360deg); } }

/* Strip placed along the BOTTOM edge: camera label (left) + controls (right). Kept off the
   top edge so it never covers the camera's burned-in clock/timestamp (which sits at the top
   of most CCTV OSDs); the label hugs bottom-left while the camera's own burned-in channel
   name sits bottom-right, so both stay readable. Label is always visible; controls fade in
   on hover (desktop) or after a tap (mobile). */
.cctv-cell-top {
  position: absolute;
  inset: auto 0.5rem 0.5rem 0.5rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none;
}
.cctv-cell-top > * { pointer-events: auto; }
.cctv-cell-controls {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.cctv-cell:hover .cctv-cell-controls,
.cctv-cell:focus-within .cctv-cell-controls,
.cctv-cell:fullscreen .cctv-cell-controls,
.cctv-cell.cctv-controls-visible .cctv-cell-controls { opacity: 1; transform: translateY(0); }

.cctv-cell-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: calc(100% - 6rem);
  padding: 0.22rem 0.7rem 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(2, 6, 23, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cctv-cell-name { overflow: hidden; text-overflow: ellipsis; }
.cctv-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #64748b;            /* default/idle = slate, no pulse */
  flex: 0 0 auto;
}
.cctv-live-dot[data-state="playing"] {
  background: #22c55e;            /* green = actually streaming */
  animation: cctv-live-pulse 1.6s ease-out infinite;
}
.cctv-live-dot[data-state="connecting"] { background: #fbbf24; }  /* amber */
.cctv-live-dot[data-state="offline"],
.cctv-live-dot[data-state="error"],
.cctv-live-dot[data-state="unsupported"],
.cctv-live-dot[data-state="paused"] { background: #64748b; }      /* slate, static */
@keyframes cctv-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
/* Header LIVE/OFFLINE badge reflects whether any stream is actually playing */
.cctv-live-badge { transition: background-color 0.2s ease, color 0.2s ease; }
.cctv-live-badge[data-live="off"] {
  background: rgba(100, 116, 139, 0.18) !important;
  color: #64748b !important;
}

.cctv-cell-controls { display: inline-flex; gap: 0.3rem; }
.cctv-cell-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px;
  background: rgba(2, 6, 23, 0.6);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.cctv-cell-btn:hover { background: rgba(37, 99, 235, 0.8); }
.cctv-cell-btn:active { transform: scale(0.94); }

/* Stats overlay (bottom-left) */
.cctv-cell-stats {
  position: absolute;
  left: 0.5rem; bottom: 0.5rem;
  z-index: 4;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cctv-cell-stats span {
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(2, 6, 23, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #e2e8f0;
}

/* Header stats toggle active state */
.cctv-stats-btn.active {
  background: var(--primary-600) !important;
  color: #fff !important;
  border-color: var(--primary-600) !important;
}

/* Fullscreen on a single cell — make it fill the screen nicely */
.cctv-cell:fullscreen {
  width: 100vw; height: 100vh; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none;
}
.cctv-cell:fullscreen video { object-fit: contain; }

/* Phones: keep multi-view legible — 9-up becomes 2 columns. */
@media (max-width: 575.98px) {
  .cctv-stage[data-layout="9"] { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   Admin & Guru elevation — elegant, consistent, dark-mode-clean
   ============================================================================ */

/* Cleaner, consistent card headers (transparent + hairline, primary-accented icon) */
.admin-shell .card-header,
.guru-shell .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 1rem 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.admin-shell .card-header h5,
.admin-shell .card-header h6,
.guru-shell .card-header h5,
.guru-shell .card-header h6 { font-weight: 700; letter-spacing: -0.01em; }
.admin-shell .card-header > i:first-child,
.admin-shell .card-header h5 > i:first-child,
.guru-shell .card-header > i:first-child,
.guru-shell .card-header h5 > i:first-child { color: var(--primary-600); }

/* Consistent body padding + uniform card spacing/elevation */
.admin-shell .card .card-body,
.guru-shell .card .card-body { padding: 1.25rem; }
.admin-shell .card.card-clean,
.guru-shell .card.card-clean { box-shadow: var(--shadow-sm); }
.admin-shell .card.card-clean:hover,
.guru-shell .card.card-clean:hover { box-shadow: var(--shadow-md); }

/* Dashboard metric cards — uniform size + refined accent */
.dashboard-metric-card {
  position: relative;
  overflow: hidden;
}
.dashboard-metric-card .card-body { display: flex; flex-direction: column; gap: 0.25rem; }
.dashboard-metric-card:hover { transform: translateY(-3px); }
.dashboard-metric-grid > [class*="col"] { display: flex; }
.dashboard-metric-grid > [class*="col"] > .card { width: 100%; }

/* Tables — more breathing room, elegant rows */
.admin-shell .table > :not(caption) > * > *,
.guru-shell .table > :not(caption) > * > * { padding: 0.8rem 1rem; }
.admin-shell .table > tbody > tr,
.guru-shell .table > tbody > tr { transition: background var(--transition-fast); }
.admin-shell .table-responsive,
.guru-shell .table-responsive {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  /* IMPORTANT: only clip the Y axis. `overflow: hidden` shorthand killed touch
     horizontal scroll on mobile (programmatic scrollLeft worked, finger drag
     didn't) — verified with real touch emulation. Keep overflow-x: auto. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.admin-shell .table-responsive > .table,
.guru-shell .table-responsive > .table { margin-bottom: 0; }

/* Consistent page heading block */
.admin-shell .app-main > h2,
.guru-shell .app-main > h2,
.admin-shell .app-main .page-title,
.guru-shell .app-main .page-title { font-weight: 800; letter-spacing: -0.02em; }

/* Pills/badges inside tables stay legible in both themes */
.admin-shell .table .badge,
.guru-shell .table .badge { font-weight: 600; }

/* Form sections inside cards: consistent control spacing */
.admin-shell .form-control,
.admin-shell .form-select,
.guru-shell .form-control,
.guru-shell .form-select { min-height: 44px; }

/* Radio/option selection cards (e.g. user type) — consistent, theme-aware */
.admin-shell .form-check-label,
.guru-shell .form-check-label { color: var(--text-body); }

/* Dropdown account toggle on guru navbar */
.navbar-guru .dropdown-toggle { border-radius: var(--radius-pill); font-weight: 600; }

/* Alerts: rounded + theme-aware (Bootstrap handles colors via data-bs-theme now) */
.app-shell .alert { border-radius: var(--radius-md); }

/* ============================================================================
   CCTV camera management — card list (mobile-safe; no hidden action columns)
   ============================================================================ */
/* Vertical, breathable card (see docs/UI.md §3 rule 3): header (icon + name +
   location) → meta chips → a SEPARATED action row. No more cramming a name,
   badges and three buttons into one squeezed horizontal strip. */
/* 1 column on phones; a tidy auto-fit grid from tablet up so cards stay a
   sensible width (≈320–400px) instead of one ultra-wide card with stretched
   buttons. Scales cleanly as more cameras are added. */
.cctv-empty-icon { font-size: 2rem; }
/* Users table: keep the Actions column reachable on mobile (sticky to right edge). */
@media (max-width: 767.98px) {
  .users-table thead th:last-child,
  .users-table tbody td:last-child {
    position: sticky; right: 0; z-index: 2;
    background: var(--bg-card);
    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.18);
  }
}
.cctv-cam-list { display: grid; grid-template-columns: 1fr; gap: 0.85rem; }
@media (min-width: 768px) {
  .cctv-cam-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
.cctv-cam-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cctv-cam-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.cctv-cam-head { display: flex; align-items: center; gap: 0.75rem; }
.cctv-cam-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--primary-500), var(--accent-600));
  color: #fff; font-size: 1.2rem;
  box-shadow: var(--shadow-primary);
}
.cctv-cam-titles { flex: 1 1 auto; min-width: 0; }
.cctv-cam-name {
  font-weight: 700; color: var(--text-heading); line-height: 1.25; font-size: 1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cctv-cam-sub {
  font-size: 0.82rem; color: var(--text-muted); margin-top: 1px;
  display: flex; align-items: center; gap: 0.3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cctv-cam-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.cctv-cam-stream {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  color: var(--primary-600); background: var(--surface-2);
  border: 1px solid var(--border-color);
  padding: 0.15rem 0.55rem; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 0.3rem;
}

.cctv-cam-actions {
  display: flex; gap: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color);
}
.cctv-cam-actions .btn {
  flex: 1 1 0; min-width: 0;
  min-height: 42px;
  border-radius: 11px;
}

/* ============================================================================
   CCTV viewer header — compact, consistent, mobile-first
   ============================================================================ */
.cctv-viewer .card-header { gap: 0.5rem; padding: 0.85rem 1rem; }
.cctv-viewer .card-header > h5 { font-size: 0.98rem; }

/* All header pills/buttons share the same size + style for visual rhythm. */
.cctv-mode-group .btn,
.cctv-layout-group .btn,
.cctv-fs-btn,
.cctv-stats-btn {
  min-height: 44px; min-width: 44px;
  padding: 0 0.55rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.cctv-fs-btn,
.cctv-stats-btn {
  border-radius: 10px !important;
}
.cctv-layout-group .btn { border-radius: 0 !important; }
.cctv-layout-group .btn:first-child { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; }
.cctv-layout-group .btn:last-child { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; }

.cctv-live-badge {
  min-height: 44px; padding-inline: 0.7rem;
  display: inline-flex; align-items: center;
  font-size: 0.75rem;
}
.cctv-chip-loc {
  padding-left: 0.4rem; margin-left: 0.1rem;
  border-left: 1px solid currentColor; opacity: 0.55;
}
@media (max-width: 575.98px) {
  .cctv-viewer .card-header > h5 { width: 100%; }
  /* On phones: only show essential header chrome to avoid the 6-control jam. */
  .cctv-viewer .cctv-live-badge,
  .cctv-viewer .cctv-fs-btn { display: none; }
  /* Per-cell expand button is more useful than a stage-wide fullscreen on touch. */
}

/* ============================================================================
   CCTV Popup viewer — a CENTERED modal on EVERY device (phone → desktop).
   One big video with zoom controls OUTSIDE the video, plus drag-to-pan and
   pinch/wheel zoom-to-point inside the frame (touch-action:none). See docs/UI.md.
   ============================================================================ */
html.cctv-popup-open { overflow: hidden; }

.cctv-popup {
  position: fixed; inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;     /* vertical-center on ALL sizes (was bottom-sheet) */
  justify-content: center; /* horizontal-center */
  padding: 1rem;           /* gutter so the modal never touches screen edges */
}
@media (min-width: 768px) { .cctv-popup { padding: 1.5rem; } }

.cctv-popup-backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 6, 23, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.cctv-popup.cctv-popup-visible .cctv-popup-backdrop { opacity: 1; }

.cctv-popup-sheet {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  background: var(--bg-card);
  color: var(--text-body);
  border-radius: var(--radius-2xl);   /* all corners rounded — a true modal */
  display: flex; flex-direction: column;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), opacity 0.16s ease;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.cctv-popup.cctv-popup-visible .cctv-popup-sheet { transform: scale(1) translateY(0); opacity: 1; }

.cctv-popup-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
}
.cctv-popup-grab { display: none; } /* centered modal — no bottom-sheet handle */
.cctv-popup-title { flex: 1 1 auto; min-width: 0; }
.cctv-popup-name { font-weight: 800; color: var(--text-heading); letter-spacing: -0.01em; font-size: 1rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cctv-popup-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cctv-popup-close-btn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-1); color: var(--text-body);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.cctv-popup-close-btn:hover { background: var(--surface-2); color: var(--text-heading); border-color: var(--border-strong); }

.cctv-popup-stage {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  min-height: 0;
}
.cctv-popup-frame {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  touch-action: none;   /* custom pan/pinch; page scroll already locked while open */
}
.cctv-popup-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  transform-origin: center center;
  transition: transform 0.18s ease;
  will-change: transform;
}
.cctv-popup-frame.cctv-zoomed { cursor: grab; }
.cctv-popup-frame.cctv-zoomed:active { cursor: grabbing; }

.cctv-popup-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-top: 1px solid var(--border-color);
  background: var(--surface-2);
}
.cctv-popup-zoom {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
}
button.cctv-popup-zoom-val { border: 0; background: transparent; cursor: pointer; }
button.cctv-popup-zoom-val:hover { text-decoration: underline; }
.cctv-popup-zoom-val {
  min-width: 48px; text-align: center;
  font-weight: 700; font-size: 0.82rem; color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.cctv-popup-right { display: inline-flex; gap: 0.4rem; }
.cctv-popup-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-body);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.cctv-popup-zoom .cctv-popup-btn { border: 0; background: transparent; width: 44px; height: 44px; border-radius: 999px; }
.cctv-popup-btn:hover { background: var(--surface-2); color: var(--text-heading); }
.cctv-popup-btn:active { transform: scale(0.94); }
.cctv-popup-zoom .cctv-popup-btn:hover { background: var(--surface-2); color: var(--primary-700); }

/* Fullscreen the sheet: stretch video to fill */
.cctv-popup-sheet:fullscreen {
  width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0;
}
.cctv-popup-sheet:fullscreen .cctv-popup-stage { flex: 1 1 auto; }
.cctv-popup-sheet:fullscreen .cctv-popup-frame { aspect-ratio: auto; height: 100%; }

/* Cell looks clickable now that tapping opens the popup */
.cctv-cell { cursor: pointer; }
.cctv-cell.cctv-zoomed { cursor: pointer; }

/* Camera-management: preview-marked card gets a soft accent */
.admin-shell .cctv-cam-item.is-preview {
  border-color: var(--warning-500);
  box-shadow: 0 0 0 1px var(--warning-500) inset;
}
.admin-shell .cctv-cam-item .preview-btn { color: var(--warning-600); border-color: var(--warning-500); }
.admin-shell .cctv-cam-item .preview-btn:hover { background: var(--warning-500); color: #fff; }
.admin-shell .cctv-cam-item .preview-btn .bi-star-fill { color: var(--warning-500); }
.admin-shell .cctv-cam-item.is-preview .preview-btn { background: var(--warning-500); border-color: var(--warning-500); color: #fff; }
.admin-shell .cctv-cam-item.is-preview .preview-btn .bi-star-fill { color: #fff; }

/* ============================================================================
   Icon alignment — single source of truth (see docs/UI.md §3 rule 1).

   Two contexts, two techniques:
   1. INLINE icon next to text (headings, labels, paragraphs, table cells):
      Bootstrap Icons sit ~0.125em high on the baseline. The official fix is a
      small negative vertical-align. It is a no-op inside flex parents, so it
      never conflicts with technique 2.
   2. FLEX containers (buttons, nav links, badges, chips): lay the icon and label
      out as a centered row and use `gap` for the space between them. `gap`
      (unlike margins) ALSO spaces raw text-node labels — e.g. `<i></i> Tambah`
      — so an icon never jams against its text. That jamming was the previous
      bug: `inline-flex` collapses the HTML whitespace, and a `margin-left` on
      `i + *` can't target a text node, so the gap vanished entirely.
   ============================================================================ */
.app-shell .bi,
.login-container .bi { vertical-align: -0.125em; }

.app-shell .btn,
.login-container .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
}
.app-shell .navbar-nav .nav-link,
.app-shell .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.app-shell .badge,
.app-shell .cctv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  vertical-align: middle;
}
/* Inside a flex parent vertical-align is ignored — neutralize the inline nudge
   so the flex centering stays exact and the glyph box hugs tight. */
.app-shell .btn > .bi,
.app-shell .nav-link > .bi,
.app-shell .badge > .bi,
.app-shell .cctv-chip > .bi,
.app-shell .dropdown-item > .bi,
.login-container .btn > .bi { vertical-align: 0; line-height: 1; }

/* ============================================================================
   POLISH LAYER (v2) — cohesive refinements on top of the Smart Campus skin.
   Token-driven, additive, no markup changes; loaded last so it wins the cascade.
   Scope: type rendering, keyboard focus, selection, scrollbars, reduced motion,
   and a few elevated surfaces (hero depth, button sheen, card/login definition).
   ============================================================================ */

/* ---- Crisper type + aligned numerals ------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Tighter optical tracking on display headings — more premium, less generic. */
.hero-title,
.login-title,
.login-school-name,
.section-title,
.app-shell h1,
.app-shell h2 { letter-spacing: -0.02em; }
/* Dashboard figures & table data line up in neat columns (tabular figures). */
.stat-value,
.dashboard-metric-value,
.app-shell .table,
.cctv-cell-stats { font-variant-numeric: tabular-nums; }

/* ---- One crisp, branded keyboard-focus ring ------------------------------ */
/* Only shows for :focus-visible, so mouse users keep the clean look. Inputs are
   excluded — they already signal focus with a branded border. */
.app-shell a:focus-visible,
.app-shell .btn:focus-visible,
.app-shell .nav-link:focus-visible,
.app-shell .dropdown-item:focus-visible,
.app-shell .page-link:focus-visible,
.app-shell .tab-btn-modern:focus-visible,
.app-shell .cctv-chip:focus-visible,
.app-shell .navbar-toggler:focus-visible,
.app-shell summary:focus-visible,
.app-shell [tabindex]:not([tabindex="-1"]):focus-visible,
.login-container a:focus-visible,
.login-container .btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ---- Themed selection + subtle scrollbars -------------------------------- */
::selection { background: var(--primary-500); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); background-clip: content-box; }

/* ---- Richer hero: layered light gives the gradient real depth ------------ */
/* All extra layers are backgrounds (behind content) — zero stacking/contrast risk. */
.hero-modern {
  background:
    radial-gradient(1100px 460px at 8% -12%, rgba(255, 255, 255, 0.20), transparent 60%),
    radial-gradient(900px 620px at 102% 4%, rgba(167, 139, 250, 0.32), transparent 56%),
    var(--hero-gradient);
}

/* ---- Buttons: a subtle top-sheen for a tactile, premium feel ------------- */
.app-shell .btn-primary,
.login-container .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), var(--shadow-primary);
}
.app-shell .btn-primary:hover,
.login-container .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 12px 28px rgba(37, 99, 235, 0.40);
}
.app-shell .btn-success,
.app-shell .btn-danger {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-sm);
}

/* ---- Cards: a touch more definition on hover ----------------------------- */
.stat-card-modern,
.dashboard-metric-card {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}
.stat-card-modern:hover,
.dashboard-metric-card:hover {
  border-color: color-mix(in srgb, var(--primary-500) 32%, var(--border-color));
}

/* ---- Login card: deeper, warmer elevation -------------------------------- */
.login-card {
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--glass-border);
}

/* ---- Metric/stat cards: a slim color-matched cap (clean dashboard cue) ---- */
.stat-card-modern { overflow: hidden; }
.stat-card-modern,
.dashboard-metric-card { position: relative; }
.stat-card-modern::before,
.dashboard-metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-700));
  z-index: 1;
}
/* Match the cap to the card's icon hue. Progressive: engines without :has()
   simply keep the primary cap above — no breakage. */
.dashboard-metric-card:has(.bg-info-subtle)::before,
.stat-card-modern:has(.stat-icon-info)::before { background: linear-gradient(90deg, #38bdf8, #2563eb); }
.dashboard-metric-card:has(.bg-success-subtle)::before,
.stat-card-modern:has(.stat-icon-success)::before { background: linear-gradient(90deg, #34d399, #059669); }
.dashboard-metric-card:has(.bg-warning-subtle)::before,
.stat-card-modern:has(.stat-icon-warning)::before { background: linear-gradient(90deg, #fbbf24, #d97706); }
.dashboard-metric-card:has(.bg-danger-subtle)::before { background: linear-gradient(90deg, #f87171, #dc2626); }

/* ---- Respect users who prefer reduced motion (a11y) ---------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   LANDING REVAMP (v3) — "Aurora Campus"
   A fresh, modern, elegant restyle of the PUBLIC landing page only. Everything
   is scoped under .landing-page (the body class) so it cannot leak to the app
   pages, and it's loaded last so it wins the cascade. No markup logic / no JS
   hooks changed — purely presentation over the existing structure.
   ============================================================================ */

/* --- Living canvas: one soft aurora backdrop the whole page floats on ------ */
.landing-page {
  background:
    radial-gradient(1100px 620px at 100% -2%, rgba(124, 58, 237, 0.07), transparent 60%),
    radial-gradient(1000px 600px at 0% 5%, rgba(37, 99, 235, 0.07), transparent 55%),
    var(--bg-app);
  background-repeat: no-repeat;
}
/* dissolve the opaque section fills so the canvas flows behind everything */
.landing-page .section-bg-app,
.landing-page .stats-section-mobile,
.landing-page .tab-section-modern,
.landing-page .feedback-section-modern { background: transparent !important; }
.landing-page .border-bottom { border-bottom: 0 !important; }

/* --- Section headings: bigger, tighter, more editorial -------------------- */
.landing-page .section-title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.025em;
  font-weight: 800;
}
.landing-page .section-subtitle { font-size: 0.98rem; }

/* --- HERO: immersive aurora ---------------------------------------------- */
.landing-page .hero-modern {
  min-height: min(86vh, 780px);
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(5rem, 9vw, 8rem);
  border-bottom: 0;
  background:
    radial-gradient(880px 520px at 12% -12%, rgba(255, 255, 255, 0.22), transparent 60%),
    radial-gradient(760px 640px at 106% 8%, rgba(167, 139, 250, 0.45), transparent 55%),
    radial-gradient(640px 560px at 82% 116%, rgba(56, 189, 248, 0.38), transparent 55%),
    var(--hero-gradient);
}
/* a faint dot grid adds texture without noise */
.landing-page .hero-modern::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 60% 35%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 60% 35%, #000, transparent 72%);
}
/* vibrant, blurred floating orbs (replace the faint white ones) */
.landing-page .hero-decoration { filter: blur(10px); opacity: 0.9; }
.landing-page .hero-decoration-1 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.55), transparent 70%);
}
.landing-page .hero-decoration-2 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.55), transparent 70%);
}
.landing-page .hero-decoration-3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.42), transparent 70%);
}
.landing-page .hero-badge {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.30);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.landing-page .hero-title {
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-bottom: 1.25rem;
}
.landing-page .hero-description {
  font-size: clamp(1rem, 1.25vw, 1.13rem);
  line-height: 1.7;
  max-width: 58ch;
}
/* CTA row (markup added in the hero) */
.landing-page .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}
.landing-page .hero-cta .btn {
  border-radius: var(--radius-pill);
  padding: 0.72rem 1.5rem;
  font-weight: 700;
  font-size: 0.98rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.landing-page .hero-cta .btn-hero-primary {
  background: #fff;
  color: var(--primary-700);
  border: none;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.22);
}
.landing-page .hero-cta .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(2, 6, 23, 0.28); }
.landing-page .hero-cta .btn-hero-ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.landing-page .hero-cta .btn-hero-ghost:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
/* The global readability rule (style.css: `span { color: var(--text-body) !important }`)
   overrode the CTA label colour — invisible on the white primary button and out of
   sync with its (unaffected) icon. Force label + icon to take the button's own colour. */
.landing-page .hero-cta .btn span,
.landing-page .hero-cta .btn i { color: inherit !important; }
/* refined glass visual card */
.landing-page .hero-visual-card {
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 30px 60px rgba(2, 6, 23, 0.28);
}

/* --- STATS: float the row up so it overlaps the hero base ------------------ */
.landing-page .stats-section-mobile {
  margin-top: clamp(-4.5rem, -6vw, -3rem);
  position: relative;
  z-index: 3;
  padding-bottom: 0;
}
.landing-page .stat-card-modern {
  border-radius: var(--radius-xl) !important;
  padding: 1.25rem 1.1rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent) !important;
}
.landing-page .stat-card-modern:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.landing-page .stat-icon-modern { border-radius: 16px !important; box-shadow: var(--shadow-md); }
.landing-page .stat-value { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; }

/* --- TAB NAV: a sleek glass segmented bar --------------------------------- */
.landing-page .tab-nav-list {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}
.landing-page .tab-btn-modern {
  border-radius: var(--radius-pill) !important;
  padding: 0.55rem 1.15rem !important;
  border: 0 !important;
  font-weight: 700;
  color: var(--text-muted) !important;
}
.landing-page .tab-btn-modern i { color: inherit !important; }
.landing-page .tab-btn-modern:hover { color: var(--text-heading) !important; background: color-mix(in srgb, var(--primary-500) 10%, transparent) !important; }
.landing-page .tab-btn-modern.active {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  color: #fff !important;
  box-shadow: var(--shadow-primary);
}
.landing-page .tab-btn-modern.active i { color: #fff !important; }
.landing-page .tab-btn-modern::after { display: none !important; }

/* --- CARDS: one refined glass family (news / info / feature) --------------- */
.landing-page .news-card-modern,
.landing-page .feature-card-modern,
.landing-page .card-clean {
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-color) !important;
  background: var(--surface-1) !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.landing-page .news-card-modern:hover,
.landing-page .feature-card-modern:hover,
.landing-page .card-clean:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary-500) 28%, var(--border-color)) !important;
}
.landing-page .news-card-modern { padding: 1.35rem 1.5rem; }
.landing-page .news-icon-wrapper { border-radius: 16px; box-shadow: var(--shadow-sm); }
.landing-page .news-title { font-weight: 700; letter-spacing: -0.01em; }
.landing-page .news-badge-primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: #fff;
  border: 0;
}
/* feature cards: lift the gradient icon + arrow affordance */
.landing-page .feature-card-modern { padding: 1.6rem; }
.landing-page .feature-icon-modern { border-radius: 18px; box-shadow: var(--shadow-md); transition: transform var(--transition-normal); }
.landing-page .feature-card-modern:hover .feature-icon-modern { transform: translateY(-3px) scale(1.04); }
.landing-page .feature-btn { gap: 0.45rem; transition: gap var(--transition-fast); }
.landing-page .feature-card-modern:hover .feature-btn { gap: 0.75rem; }

/* --- STATUS (jaringan): pill sub-tabs to match the main nav ---------------- */
.landing-page .status-tabs-list { border-bottom: 0 !important; gap: 0.4rem; }
.landing-page .status-tabs-list .nav-link {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text-muted) !important;
  font-weight: 600;
  padding: 0.42rem 0.95rem;
  white-space: nowrap;
}
.landing-page .status-tabs-list .nav-link:hover { border-color: var(--primary-400) !important; color: var(--primary-700) !important; }
.landing-page .status-tabs-list .nav-link.active {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* --- STATUS (jaringan) iframe: a clean framed surface --------------------- */
.landing-page .uptime-kuma-container {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--surface-1);
}

/* --- FEEDBACK: elegant glass panel ---------------------------------------- */
.landing-page .feedback-card-modern {
  border-radius: var(--radius-2xl) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-xl);
  background: var(--surface-1) !important;
}
.landing-page .feedback-icon-wrapper {
  background: linear-gradient(135deg, var(--primary-500), var(--accent-600)) !important;
  box-shadow: var(--shadow-primary);
}
.landing-page .feedback-submit-btn {
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700)) !important;
  box-shadow: var(--shadow-primary);
}
.landing-page .feedback-form-control { border-radius: var(--radius-md) !important; }

/* --- FOOTER: refined, elevated ------------------------------------------- */
.landing-page .footer-modern {
  border-top: 1px solid var(--border-color);
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(124, 58, 237, 0.06), transparent 60%),
    var(--surface-2);
}
.landing-page .footer-social-link {
  border-radius: 12px;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.landing-page .footer-social-link:hover { transform: translateY(-2px); }

/* --- Gentle entrance: sections rise in on load (reduced-motion disables) --- */
@media (prefers-reduced-motion: no-preference) {
  .landing-page .hero-content .col-lg-7 > *,
  .landing-page .landing-stats-grid > * {
    animation: landingRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .landing-page .hero-content .col-lg-7 > *:nth-child(2) { animation-delay: 0.06s; }
  .landing-page .hero-content .col-lg-7 > *:nth-child(3) { animation-delay: 0.12s; }
  .landing-page .hero-content .col-lg-7 > *:nth-child(4) { animation-delay: 0.18s; }
  .landing-page .hero-content .col-lg-7 > *:nth-child(5) { animation-delay: 0.24s; }
  .landing-page .landing-stats-grid > *:nth-child(2) { animation-delay: 0.06s; }
  .landing-page .landing-stats-grid > *:nth-child(3) { animation-delay: 0.12s; }
  .landing-page .landing-stats-grid > *:nth-child(4) { animation-delay: 0.18s; }
}
@keyframes landingRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   LANDING DARK-MODE AURORA — gradation fix.
   The base revamp reused the bright light-mode --hero-gradient verbatim, so in
   dark mode the hero read as a luminous block glued onto a near-black page with
   a hard seam. These dark-only overrides deepen the hero into a jewel tone,
   mute the white glow, fade the hero base into the canvas colour, and lift the
   canvas glow so colour flows continuously hero -> content -> footer.
   ============================================================================ */
[data-bs-theme="dark"] .landing-page {
  background:
    radial-gradient(1200px 760px at 100% -2%, rgba(124, 58, 237, 0.16), transparent 55%),
    radial-gradient(1040px 700px at 0% 3%, rgba(37, 99, 235, 0.13), transparent 50%),
    var(--bg-app);
}
[data-bs-theme="dark"] .landing-page .hero-modern {
  background:
    linear-gradient(180deg, transparent 50%, rgba(11, 18, 32, 0.92) 100%),
    radial-gradient(820px 480px at 12% -14%, rgba(255, 255, 255, 0.06), transparent 60%),
    radial-gradient(860px 660px at 104% 4%, rgba(139, 92, 246, 0.40), transparent 58%),
    radial-gradient(700px 580px at 80% 122%, rgba(37, 99, 235, 0.32), transparent 60%),
    linear-gradient(150deg, #16224a 0%, #1c1b46 52%, #2a1056 100%);
}
/* the dot grid runs too hot on the deep base — soften it */
[data-bs-theme="dark"] .landing-page .hero-modern::after { opacity: 0.45; }
/* slightly cooler, glassier hero badge/visual so they sit in the jewel base */
[data-bs-theme="dark"] .landing-page .hero-visual-card {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.16);
}
/* crisper floating stat cards over the deepened hero base */
[data-bs-theme="dark"] .landing-page .stat-card-modern {
  background: color-mix(in srgb, var(--surface-1) 92%, transparent) !important;
  border-color: var(--border-strong);
}
/* feedback header carried its own tint -> two-tone seam; unify with the card */
[data-bs-theme="dark"] .landing-page .feedback-header { background: transparent !important; }
/* footer: a touch more glow so it isn't flat */
[data-bs-theme="dark"] .landing-page .footer-modern {
  background:
    radial-gradient(760px 320px at 100% 0%, rgba(124, 58, 237, 0.13), transparent 60%),
    var(--surface-2);
}

/* ============================================================================
   Landing — premium polish layer (modern & elegant; additive, landing-scoped)
   ============================================================================ */
/* Smooth, tactile hover lift on all content cards */
.landing-page .stat-card-modern,
.landing-page .news-card-modern,
.landing-page .feature-card-modern {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast);
  will-change: transform;
}
.landing-page .stat-card-modern:hover,
.landing-page .news-card-modern:hover,
.landing-page .feature-card-modern:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-300, var(--primary-500));
}

/* Stat cards: a thin gradient accent that reveals on hover */
.landing-page .stat-card-modern { position: relative; overflow: hidden; }
.landing-page .stat-card-modern::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-500), var(--accent-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}
.landing-page .stat-card-modern:hover::before { transform: scaleX(1); }

/* Service cards: the CTA arrow eases forward on hover */
.landing-page .feature-btn i { transition: transform var(--transition-fast); }
.landing-page .feature-card-modern:hover .feature-btn i { transform: translateX(4px); }
/* Service icon gives a subtle pop on hover */
.landing-page .feature-icon-modern { transition: transform var(--transition-fast); }
.landing-page .feature-card-modern:hover .feature-icon-modern { transform: translateY(-2px) scale(1.04); }

/* Hero: heavier CTA weight + a soft sheen on the visual card */
.landing-page .hero-cta .btn { font-weight: 700; letter-spacing: 0.01em; }
.landing-page .hero-badge { letter-spacing: 0.02em; }
.landing-page .hero-visual-card { position: relative; overflow: hidden; }
.landing-page .hero-visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, transparent 30%, rgba(255, 255, 255, 0.10) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.9s ease;
  pointer-events: none;
}
.landing-page .hero-visual:hover .hero-visual-card::after { transform: translateX(120%); }

/* Refined section headings */
.landing-page .section-title { font-weight: 800; letter-spacing: -0.01em; }

/* Tabs + feedback submit: micro-interaction consistency */
.landing-page .tab-btn-modern { transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); }
.landing-page .feedback-submit-btn { transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); }
.landing-page .feedback-submit-btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .landing-page .stat-card-modern,
  .landing-page .news-card-modern,
  .landing-page .feature-card-modern,
  .landing-page .feature-icon-modern,
  .landing-page .hero-visual-card::after,
  .landing-page .feedback-submit-btn { transition: none; }
  .landing-page .stat-card-modern:hover,
  .landing-page .news-card-modern:hover,
  .landing-page .feature-card-modern:hover,
  .landing-page .feedback-submit-btn:hover { transform: none; }
}