:root {
  --brand: #1b2a4a;
  --brand-accent: #2f6fed;
  --brand-text: #1b2a4a;
  --app-bg: #f6f8fa;
  --app-surface: #ffffff;
  --app-surface-2: #f1f3f6;
  --app-border: #eaeef2;
  --app-text: #3d4553;
  --app-text-muted: #57606a;
  --app-text-faint: #9aa3b5;
  --app-hover: #f0f4ff;
  --app-active: #e6edff;
  --app-shadow: rgba(16, 27, 53, 0.14);
}

/* Dark theme — Bootstrap's data-bs-theme=dark recolors its own components
 * (cards, tables, forms, modals, badges...); these tokens flip the app's
 * custom chrome (topbar, sidebar, toasts, menus) to match. */
[data-bs-theme="dark"] {
  --brand-accent: #6c9cff;
  --brand-text: #c3d4ff;
  --app-bg: #0d1220;
  --app-surface: #171f30;
  --app-surface-2: #202a40;
  --app-border: #2a3550;
  --app-text: #c9d2e2;
  --app-text-muted: #93a0b8;
  --app-text-faint: #64728c;
  --app-hover: #26334f;
  --app-active: #2c3a5c;
  --app-shadow: rgba(0, 0, 0, 0.45);
}

body {
  background-color: var(--app-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bg-brand {
  background-color: var(--brand) !important;
}

.navbar-brand {
  letter-spacing: 0.01em;
}

.btn-primary {
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
}

.hero {
  background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%);
}

.card-header {
  border-bottom: 1px solid var(--app-border);
}

.table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--app-text-muted);
  border-bottom-width: 1px;
}

.footer {
  margin-top: 2rem;
}

@media (max-width: 575.98px) {
  .table-responsive {
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
 * Admin shell — fixed top bar with group dropdowns + slim icon-rail sidebar
 * (Linear/HubSpot style).
 * ------------------------------------------------------------------------ */

.admin-shell {
  background-color: var(--app-bg);
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  background: var(--app-surface);
  color: var(--brand-text);
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 1px 2px rgba(16, 27, 53, 0.06);
}

.topbar-brand {
  color: var(--brand-text);
  text-decoration: none;
  font-size: 1.05rem;
  white-space: nowrap;
  margin-right: 0.5rem;
}

.topbar .btn-icon {
  background: transparent;
  border: 0;
  color: var(--app-text-muted);
  font-size: 1.15rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

.topbar .btn-icon:hover {
  background: var(--app-hover);
  color: var(--brand-accent);
}

.topbar .btn-icon:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: -2px;
}

.topbar .dropdown-toggle::after {
  display: none;
}

.topbar-account {
  color: var(--app-text-muted);
  font-size: 0.9rem;
}

/* Top-bar dropdowns — self-contained so they work even if the Bootstrap CDN
 * stylesheet is unavailable. Submenus are hidden by default (display: none),
 * absolutely positioned below their trigger, and opened by toggling .show
 * from the state-toggle JS in base.html. High z-index keeps them overlaying
 * page content rather than pushing it down. */
.topbar .dropdown {
  position: relative;
}

.topbar .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 1050;
  margin: 0;
  padding: 0.4rem 0;
  min-width: 12rem;
  list-style: none;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px var(--app-shadow);
}

.topbar .dropdown-menu-end {
  left: auto;
  right: 0;
}

.topbar .dropdown-menu.show {
  display: block;
}

/* Top-bar layout is self-contained too: without the Bootstrap CDN stylesheet
 * the utility classes on the markup (d-none/d-lg-flex/d-flex/ms-auto/...) are
 * inert, which stacks the five group buttons vertically and shoves the fixed
 * bar off-screen. Replicate the utilities we use so the groups always sit in
 * one row and the bar stays put. These mirror Bootstrap's values, so when the
 * CDN loads they simply agree with it. */
.topbar .topbar-groups {
  display: none;
}

.topbar .ms-auto {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.topbar .topbar-search {
  display: none;
}

.topbar .topbar-account {
  display: none;
}

@media (min-width: 768px) {
  .topbar .topbar-search {
    display: flex;
  }
}

@media (min-width: 992px) {
  .topbar #sidebarToggle {
    display: none;
  }

  .topbar .topbar-groups {
    display: flex;
  }

  .topbar .topbar-account {
    display: inline;
  }
}

/* Group dropdown buttons in the top bar */
.topbar-groups {
  align-items: center;
  gap: 0.15rem;
}

.topbar-group-btn {
  background: transparent;
  border: 0;
  color: var(--app-text);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}

.topbar-group-btn:hover {
  background: var(--app-hover);
  color: var(--brand-text);
}

.topbar-group-btn.active {
  background: var(--app-active);
  color: var(--brand-accent);
  font-weight: 600;
}

.topbar-groups .dropdown-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
}

.topbar-groups .dropdown-item.active {
  background: var(--app-active);
  color: var(--brand-accent);
  font-weight: 600;
}

.topbar-groups .dropdown-menu {
  border: 1px solid var(--app-border);
  border-radius: 0.6rem;
  min-width: 12rem;
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--app-surface-2);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.35rem 0.7rem;
  color: var(--app-text-faint);
  width: 240px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.topbar-search:focus-within {
  background: var(--app-surface);
  border-color: var(--brand-accent);
}

.topbar-search input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--app-text);
  width: 100%;
  font-size: 0.9rem;
}

.topbar-search input::placeholder {
  color: var(--app-text-faint);
}

.app-body {
  display: flex;
  min-height: 100vh;
  padding-top: 56px; /* room for the fixed top bar */
}

/* Slim icon rail — always slim, no collapse toggle needed */
.sidebar {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  width: 64px;
  flex-shrink: 0;
  background: var(--app-surface);
  border-right: 1px solid var(--app-border);
  padding: 0.75rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  overflow: visible;
  z-index: 1020;
}

.rail-group {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  color: var(--app-text-muted);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.rail-group:hover,
.rail-group:focus-within {
  background: var(--app-hover);
  color: var(--brand-text);
}

.rail-group.active {
  background: var(--app-active);
  color: var(--brand-accent);
}

.rail-label {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.55rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 1032;
}

/* The flyout already names the group in its title, so hide the overlapping
 * tooltip label while the flyout is open. The label still acts as the group
 * heading in the mobile drawer. */
.rail-group:hover .rail-label,
.rail-group:focus-within .rail-label {
  opacity: 0;
}

/* Flyout with the group's links, shown on hover/focus */
.rail-flyout {
  position: absolute;
  left: calc(100% + 10px);
  top: -8px;
  min-width: 210px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.7rem;
  box-shadow: 0 10px 30px var(--app-shadow);
  padding: 0.5rem;
  opacity: 0;
  transform: translateX(-6px);
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 1031;
}

.rail-group:hover .rail-flyout,
.rail-group:focus-within .rail-flyout {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

.rail-flyout-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text-faint);
  padding: 0.25rem 0.6rem 0.45rem;
}

.rail-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.6rem;
  border-radius: 0.5rem;
  color: var(--app-text);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.rail-link:hover {
  background: var(--app-hover);
  color: var(--brand-text);
}

.rail-link.active {
  background: var(--app-active);
  color: var(--brand-accent);
  font-weight: 600;
}

.rail-link i {
  font-size: 0.95rem;
  width: 1.1rem;
  text-align: center;
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
}

/* Mobile drawer */
.sidebar-backdrop {
  display: none;
}

@media (max-width: 991.98px) {
  .app-body {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    height: auto;
    width: 250px;
    align-items: stretch;
    padding: 1rem;
    overflow-y: auto;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 30px rgba(16, 27, 53, 0.25);
  }

  /* On mobile the rail becomes a stacked list: group header + its links */
  .rail-group {
    width: auto;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    padding: 0.75rem 0 0.25rem;
    border-radius: 0;
    font-size: 0.95rem;
    color: var(--app-text);
    border-bottom: 1px solid var(--app-border);
  }

  .rail-group:hover,
  .rail-group:focus-within {
    background: transparent;
    color: var(--app-text);
  }

  .rail-group.active {
    background: transparent;
    color: var(--brand-accent);
  }

  .rail-label {
    position: static;
    transform: none;
    background: transparent;
    color: var(--app-text-faint);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0.6rem 0.3rem;
    opacity: 1;
    order: 1;
  }

  .rail-group .bi {
    font-size: 1.05rem;
    width: 1.3rem;
    text-align: center;
    flex-shrink: 0;
  }

  .rail-flyout {
    display: block;
    position: static;
    opacity: 1;
    transform: none;
    visibility: visible;
    min-width: 0;
    box-shadow: none;
    border: 0;
    padding: 0;
  }

  .rail-flyout-title {
    display: none;
  }

  .rail-link {
    padding: 0.45rem 0.6rem;
  }

  .rail-link.active {
    background: var(--app-active);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(16, 27, 53, 0.45);
    z-index: 1035;
  }

  .main-content {
    padding: 1rem;
  }
}

/* --------------------------------------------------------------------------
 * Interaction layer — toasts, micro-interactions, keyboard modal, back-to-top,
 * password toggles, stat counters, page-load reveal. All motion is disabled
 * for prefers-reduced-motion (see the override at the end of this file).
 * ------------------------------------------------------------------------ */

/* Gentle page-load reveal for the main content (not the fixed navbar) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

main.container > *,
.main-content > * {
  animation: fadeUp 0.28s ease both;
}

/* Toast notifications (flash messages upgraded in base.html) */
.toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-left: 3px solid var(--brand-accent);
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px var(--app-shadow);
  padding: 0.7rem 0.9rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast-item.in { opacity: 1; transform: none; }
.toast-item.out { opacity: 0; transform: translateY(-6px); }

.toast-success { border-left-color: #198754; }
.toast-danger { border-left-color: #dc3545; }
.toast-warning { border-left-color: #f0ad4e; }

.toast-icon {
  font-size: 1.1rem;
  color: var(--brand-accent);
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.toast-success .toast-icon { color: #198754; }
.toast-danger .toast-icon { color: #dc3545; }
.toast-warning .toast-icon { color: #b8860b; }

.toast-body { min-width: 0; }
.toast-title { font-weight: 600; font-size: 0.85rem; }
.toast-msg { font-size: 0.85rem; color: var(--app-text-muted); word-break: break-word; }
.toast-close { flex-shrink: 0; margin-left: auto; font-size: 0.7rem; }

@media (max-width: 575.98px) {
  .toast-stack {
    top: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

/* Back-to-top floating button */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--brand-text);
  box-shadow: 0 6px 18px rgba(16, 27, 53, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--app-hover); color: var(--brand-accent); }

/* Keyboard-shortcuts modal (admin) */
.shortcuts-modal[hidden] { display: none; }

.shortcuts-modal {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.shortcuts-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 27, 53, 0.5);
  animation: fadeIn 0.15s ease both;
}

.shortcuts-panel {
  position: relative;
  width: min(420px, 100%);
  background: var(--app-surface);
  border-radius: 0.8rem;
  box-shadow: 0 20px 60px rgba(16, 27, 53, 0.3);
  overflow: hidden;
  animation: popIn 0.16s ease both;
}

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--app-border);
}

.shortcuts-body { padding: 0.5rem 1.1rem 1rem; }

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--app-border);
  font-size: 0.9rem;
}

.shortcut-row:last-child { border-bottom: 0; }

.shortcut-row kbd {
  font-family: inherit;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-bottom-width: 2px;
  border-radius: 0.35rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.8rem;
  color: var(--app-text);
  min-width: 1.6rem;
  text-align: center;
}

.shortcut-row span { color: var(--app-text-muted); }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Password visibility toggle */
.password-field { position: relative; }
.password-field .form-control { padding-right: 2.6rem; }

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--app-text-faint);
  padding: 0.35rem;
  border-radius: 0.35rem;
  line-height: 1;
}

.password-toggle:hover { color: var(--brand-accent); }

/* Dashboard stat cards — gentle hover lift */
.stat-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(16, 27, 53, 0.08) !important;
}

/* Button press feedback */
.btn:active {
  transform: translateY(1px);
}

/* Apply-form sticky progress bar */
.apply-progress {
  position: sticky;
  top: 0;
  z-index: 1020;
}

.apply-progress .progress {
  background: var(--app-surface-2);
  border-radius: 999px;
}

.apply-progress .progress-bar {
  background: var(--brand-accent);
  transition: width 0.25s ease;
}

/* Application-received celebration */
.success-pop {
  display: inline-block;
  animation: successPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes successPop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Theme switcher (System / Light / Dark) — self-contained dropdown, no
 * Bootstrap JS dependency (same convention as the top-bar menus). */
.theme-dropdown {
  position: relative;
  display: inline-block;
}

.theme-toggle {
  background: transparent;
  border: 0;
  color: var(--app-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.4rem 0.55rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: var(--app-hover);
  color: var(--brand-accent);
}

.navbar-dark .theme-toggle {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .theme-toggle:hover {
  color: #fff;
}

.theme-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1050;
  min-width: 10rem;
  padding: 0.4rem 0;
  margin: 0;
  list-style: none;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px var(--app-shadow);
}

.theme-menu.show {
  display: block;
}

.theme-option {
  display: flex;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--app-text);
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
  text-align: left;
  cursor: pointer;
}

.theme-option:hover {
  background: var(--app-hover);
  color: var(--brand-text);
}

.theme-option.active {
  background: var(--app-active);
  color: var(--brand-accent);
  font-weight: 600;
}

/* Dark theme overrides for the template-level light utilities. Bootstrap's
 * bg-white / bg-light / text-bg-light are literal colors that ignore
 * data-bs-theme, so re-point them at the app's dark surfaces. */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--app-surface) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--app-surface-2) !important;
}

[data-bs-theme="dark"] .text-bg-light {
  background-color: var(--app-surface-2) !important;
  color: var(--app-text) !important;
}

[data-bs-theme="dark"] .hero {
  background: linear-gradient(180deg, #141c30 0%, var(--app-bg) 100%);
}

/* Accessible focus ring everywhere */
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Kill all motion for users who ask for reduced motion */
@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;
  }
}