/* ================================================================
   ITDRC Volunteer App — App CSS
   WCAG AAA: 7:1 contrast ratios enforced throughout
   Mobile-first: base styles for mobile, media queries for desktop
   ================================================================ */

/* ---- Custom Properties ---- */
:root {
  --navy: #0d3b66;
  --navy-dark: #082a4a;
  --navy-light: #1a5490;
  --accent: #e05c00;
  --accent-dark: #b34a00;
  --text-primary: #1a1a1a;
  --text-muted: #555555;
  --bg-page: #f8f9fa;
  --table-header-bg: #0d3b66;
  --table-header-text: #ffffff;
  --focus-outline: 3px solid #005fcc;
  --focus-offset: 2px;
  --touch-target: 44px;

  /* Status badge colors (AAA contrast verified) */
  --badge-available-bg: #1a6b1a;
  --badge-available-text: #ffffff;
  --badge-deployed-pending-bg: #7a4500;
  --badge-deployed-pending-text: #ffffff;
  --badge-deployed-bg: #0a3d7a;
  --badge-deployed-text: #ffffff;
  --badge-demobed-bg: #004a6e;
  --badge-demobed-text: #ffffff;
  --badge-en-route-bg: #4a4a00;
  --badge-en-route-text: #ffffff;
  --badge-en-route-op-bg: #0a558c;
  --badge-en-route-op-text: #ffffff;
  --badge-on-site-bg: #14532d;
  --badge-on-site-text: #ffffff;
  --badge-home-bg: #2a2a2a;
  --badge-home-text: #ffffff;
  --badge-cancelled-bg: #8b0000;
  --badge-cancelled-text: #ffffff;
}

/* Dev environment theme */
.bg-dev { background-color: #e05c00 !important; }
.navbar-dark.bg-dev .navbar-brand { color: #fff; }
.navbar-dark.bg-dev .nav-link {
  color: rgba(255,255,255,0.85);
  padding: 0.75rem 1rem;
}
.navbar-dark.bg-dev .nav-link:hover,
.navbar-dark.bg-dev .nav-link.active { color: #fff; }
.navbar-dark.bg-dev .btn-outline-light { color: #fff; border-color: #fff; }
.mobile-tab-bar.dev-tab { background-color: #fff; border-top-color: #e05c00; }
.mobile-tab-bar.dev-tab .tab-item.active { color: #e05c00; }

/* Fix dropdown menus in navbar (prevent white-on-white from navbar-dark) */
.navbar .dropdown-menu { background-color: #fff !important; color: #212529 !important; }
.navbar .dropdown-menu .dropdown-item { color: #212529 !important; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:active { color: #1a1a1a !important; background-color: #e9ecef !important; }
.navbar .dropdown-menu .dropdown-divider { border-top-color: #dee2e6 !important; }
.navbar .btn-outline-light.show,
.navbar .btn-outline-light.dropdown-toggle:active,
.navbar .btn-outline-light.dropdown-toggle[aria-expanded="true"] {
  color: #212529 !important;
  background-color: #f8f9fa !important;
  border-color: #f8f9fa !important;
}

/* Ensure main content text stays dark */
main { color: var(--text-primary); }
main p, main h1, main h2, main h3, main h4, main h5, main h6,
main label, main td, main th, main li, main span:not(.badge) {
  color: inherit;
}

/* ---- Table header fix (WCAG AAA: white on navy) ---- */
.table-dark th,
.table-dark td,
.table thead.table-dark th {
  background-color: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
}

/* ---- Skip Link (WCAG 2.4.1) ---- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.5rem;
  z-index: 9999;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ---- Focus Indicators (WCAG 2.4.7, AAA) ---- */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus,
.form-select:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.25);
}

/* ---- Touch targets (WCAG 2.5.5, min 44x44px) ---- */
.btn {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-sm { min-height: 38px; }
.nav-link { min-height: var(--touch-target); display: flex; align-items: center; white-space: nowrap; }

/* ---- Navbar ---- */
.bg-navy { background-color: var(--navy) !important; }
.navbar-dark.bg-navy .navbar-brand { color: #fff; }
.navbar-dark.bg-navy .nav-link {
  color: rgba(255,255,255,0.85);
  padding: 0.75rem 1rem;
}
.navbar-dark.bg-navy .nav-link:hover,
.navbar-dark.bg-navy .nav-link.active {
  color: #fff;
  text-decoration: underline;
}
.navbar-dark.bg-navy .nav-link[aria-current="page"] {
  font-weight: 600;
  color: #fff;
}

/* ---- Navbar iOS (slim + blur on mobile) ---- */
@media (max-width: 991.98px) {
  .navbar-ios { padding: 0.25rem 0.75rem; }
  .navbar-ios.bg-navy { background: rgba(13, 59, 102, 0.92) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .navbar-ios.bg-dev { background: rgba(224, 92, 0, 0.92) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

/* ---- iOS Tab Bar ---- */
.mobile-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  border-top: 1px solid #d1d1d6;
  z-index: 1000;
  padding-top: 6px;
  padding-bottom: max(6px, env(safe-area-inset-bottom, 6px));
  /* iOS Safari URL-bar collapse/show transitions can jitter fixed
     elements. Forcing a GPU layer with translate3d keeps the tab
     bar visually pinned to the bottom during those transitions. */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: #8e8e93;
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  padding: 0;
  border: none;
  background: none;
  min-height: var(--touch-target);
  gap: 2px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.tab-item:hover,
.tab-item:focus-visible { color: var(--navy); }
.tab-item.active { color: var(--navy); }
.tab-item svg { stroke-width: 1.8; }
.tab-item.active svg { stroke-width: 2.2; }
.tab-item span { display: block; line-height: 1.2; }

/* Ops bottom sheet styling */
#opsSheet { max-height: 70vh; border-radius: 1rem 1rem 0 0; }

/* Padding to avoid content hiding behind tab bar */
@media (max-width: 991.98px) {
  main { padding-bottom: 100px; }
  footer { padding-bottom: calc(60px + env(safe-area-inset-bottom, 6px)) !important; }
}

/* ---- Cards ---- */
.card {
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  overflow: hidden;
}
.card-hover {
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
  border: 2px solid transparent;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border-color: var(--navy-light);
}
.card-hover:focus-within { border-color: #005fcc; }

/* ---- Status Badges (WCAG AAA contrast) ---- */
.badge-available { background-color: var(--badge-available-bg) !important; color: var(--badge-available-text) !important; }
.badge-deployed-pending { background-color: var(--badge-deployed-pending-bg) !important; color: var(--badge-deployed-pending-text) !important; }
.badge-deployed { background-color: var(--badge-deployed-bg) !important; color: var(--badge-deployed-text) !important; }
.badge-en-route-op { background-color: var(--badge-en-route-op-bg) !important; color: var(--badge-en-route-op-text) !important; }
.badge-on-site { background-color: var(--badge-on-site-bg) !important; color: var(--badge-on-site-text) !important; }
.badge-demobed { background-color: var(--badge-demobed-bg) !important; color: var(--badge-demobed-text) !important; }
.badge-en-route { background-color: var(--badge-en-route-bg) !important; color: var(--badge-en-route-text) !important; }
.badge-home { background-color: var(--badge-home-bg) !important; color: var(--badge-home-text) !important; }
.badge-cancelled { background-color: var(--badge-cancelled-bg) !important; color: var(--badge-cancelled-text) !important; }
.badge { font-size: 0.8rem; padding: 0.35em 0.65em; font-weight: 600; letter-spacing: 0.01em; }

/* ---- Deployment Timeline ---- */
.deployment-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 0.5rem 0;
}
.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 60px;
  position: relative;
}
.timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: #dee2e6;
  z-index: 0;
}
.timeline-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #dee2e6;
  border: 3px solid #adb5bd;
  z-index: 1;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.timeline-dot.active {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(13,59,102,0.25);
}
.timeline-label {
  text-align: center;
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .deployment-timeline { overflow-x: visible; flex-wrap: nowrap; }
  .timeline-step { min-width: 0; }
  .timeline-label {
    white-space: normal;
    font-size: 0.55rem;
    word-break: break-word;
    max-width: 50px;
  }
}

/* ---- Forms ---- */
.form-label { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.form-control, .form-select {
  border-color: #6c757d;
  color: var(--text-primary);
}
.form-control:focus, .form-select:focus { border-color: #005fcc; }
.invalid-feedback { color: #8b0000; font-weight: 600; }
/* Form validation: flagged tab / collapse toggle (WCAG AAA: #8b0000 ~10:1 on
   white; paired with a ⚠ icon + visually-hidden "has errors" text). */
.fe-tab-error { color: #8b0000 !important; font-weight: 700; }
.fe-tab-error .fe-tab-mark { color: #8b0000; }
.nav-tabs .nav-link.fe-tab-error { border-bottom: 3px solid #8b0000; }
.form-text { color: var(--text-muted); }

/* ---- Tables ---- */
.table th { font-weight: 700; color: var(--text-primary); }
.table caption { caption-side: top; font-weight: 600; color: var(--text-muted); margin-bottom: 0.5rem; }

/* ---- Mobile Cards (table → card on mobile) ---- */
@media (max-width: 991.98px) {
  .mobile-cards { border: none; display: block; width: 100%; min-width: 0; }
  .table-responsive:has(.mobile-cards) { overflow: visible; }
  .mobile-cards thead { display: none; }
  .mobile-cards tbody { display: block; }
  .mobile-cards tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .mobile-cards tbody tr.table-danger {
    border-left: 4px solid #8b0000;
  }
  .mobile-cards tbody tr.table-warning {
    border-left: 4px solid #7a4500;
  }
  .mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    border: none;
    border-bottom: none;
  }
  .mobile-cards tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.8rem;
    color: #6c757d;
    flex-shrink: 0;
    margin-right: 1rem;
  }
  .mobile-cards tbody td:first-child {
    font-weight: 700;
    font-size: 1rem;
    padding-bottom: 0.4rem;
  }
  .mobile-cards tbody td:first-child::before {
    display: none;
  }
  .mobile-cards tbody td:last-child {
    justify-content: flex-end;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  .mobile-cards tbody td:last-child::before {
    display: none;
  }
}

/* ---- Breadcrumb ---- */
.breadcrumb-item a { color: var(--navy); text-decoration: underline; }
.breadcrumb-item.active { color: var(--text-muted); }

/* ---- Alert (WCAG - icons alongside color) ---- */
.alert { border-left: 4px solid; border-radius: 0.5rem; }
.alert-warning { border-left-color: #7a4500; }
.alert-success { border-left-color: #1a6b1a; }
.alert-danger { border-left-color: #8b0000; }
.alert-info { border-left-color: #004a6e; }

/* ---- Profile Avatar ---- */
.avatar-circle { font-weight: 700; letter-spacing: -0.02em; user-select: none; }

/* ---- Map ---- */
#sites-map {
  border-radius: 0.75rem;
  border: 1px solid #dee2e6;
  min-height: 300px;
}
@media (min-width: 768px) { #sites-map { min-height: 450px; } }

/* ---- Htmx loading indicator ---- */
.htmx-indicator {
  opacity: 0;
  transition: opacity 0.2s;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ---- Htmx in-flight button feedback (spinner + disabled look) ----
   Applied automatically by htmx: the element with hx-get/hx-post gets the
   .htmx-request class while a request is in flight. Combined with
   hx-disabled-elt on action buttons/forms, users see a spinning icon and
   cannot double-click. */
button.htmx-request,
.btn.htmx-request,
form.htmx-request button[type="submit"],
form.htmx-request button:not([type]) {
  position: relative;
  color: transparent !important;
  text-shadow: none;
  pointer-events: none;
}
button.htmx-request::after,
.btn.htmx-request::after,
form.htmx-request button[type="submit"]::after,
form.htmx-request button:not([type])::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  margin-left: -0.5rem;
  border: 2px solid #ffffff;
  border-right-color: transparent;
  border-radius: 50%;
  animation: htmx-btn-spin 0.7s linear infinite;
}
/* Outline/ghost buttons need a dark spinner since their background is light */
.btn-outline-primary.htmx-request::after,
.btn-outline-secondary.htmx-request::after,
.btn-outline-info.htmx-request::after,
.btn-outline-success.htmx-request::after,
.btn-outline-warning.htmx-request::after,
.btn-outline-danger.htmx-request::after,
.btn-outline-light.htmx-request::after,
.btn-outline-dark.htmx-request::after,
.btn-link.htmx-request::after,
form.htmx-request .btn-outline-primary[type="submit"]::after,
form.htmx-request .btn-outline-secondary[type="submit"]::after,
form.htmx-request .btn-outline-info[type="submit"]::after,
form.htmx-request .btn-outline-success[type="submit"]::after,
form.htmx-request .btn-outline-warning[type="submit"]::after,
form.htmx-request .btn-outline-danger[type="submit"]::after {
  border-color: #0d3b66;
  border-right-color: transparent;
}
@keyframes htmx-btn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  button.htmx-request::after,
  .btn.htmx-request::after,
  form.htmx-request button[type="submit"]::after,
  form.htmx-request button:not([type])::after {
    animation-duration: 2s;
  }
}

/* ---- Desktop optimizations ---- */
@media (min-width: 992px) {
  .card { border-radius: 1rem; }
  .container-xl { max-width: 1200px; }
  h1 { font-size: 1.75rem; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- High contrast mode support ---- */
@media (forced-colors: active) {
  .badge-available, .badge-deployed, .badge-demobed,
  .badge-cancelled, .badge-en-route, .badge-home,
  .badge-deployed-pending { forced-color-adjust: none; }
  .mobile-tab-bar { border-top: 2px solid ButtonText; }
}

/* ---- Conditional row styling for admin boards ---- */
tr.row-overdue { background-color: #fff0f0 !important; }
tr.row-overdue td { color: #8b0000 !important; }
tr.row-approaching-demob { background-color: #fff8e1 !important; }
tr.row-en-route { background-color: #e3f2fd !important; }

/* ---- Print ---- */
@media print {
  .mobile-tab-bar, .navbar, footer { display: none !important; }
  main { padding-bottom: 0 !important; }
  .card { break-inside: avoid; border: 1px solid #000; }
}

/* ---- Mobile page-specific tweaks ---- */
@media (max-width: 991.98px) {
  /* DA detail: action buttons full-width stacked */
  #da-actions-region .d-flex,
  [id^="da-actions-"] .d-flex {
    flex-direction: column;
    gap: 0.5rem;
  }
  [id^="da-actions-"] .d-flex > form,
  [id^="da-actions-"] .d-flex > button,
  [id^="da-actions-"] .d-flex > a {
    width: 100%;
  }
  [id^="da-actions-"] .d-flex form .btn,
  [id^="da-actions-"] .d-flex form input[type="text"],
  [id^="da-actions-"] .d-flex form input[type="datetime-local"] {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  /* DA detail: extend preset buttons equal-width */
  .extend-presets {
    display: flex;
    gap: 0.5rem;
  }
  .extend-presets > button {
    flex: 1;
  }

  /* Forms: submit buttons full-width */
  .btn-mobile-full {
    width: 100%;
  }
}

/* ---- Pull-to-Refresh indicator ---- */
html { overscroll-behavior-y: contain; }
#pull-indicator {
  display: none;
  text-align: center;
  padding: 0;
  height: 0;
  overflow: hidden;
  transition: height 0.2s;
  font-size: 1.5rem;
  color: var(--navy);
}
#pull-indicator.pulling {
  display: block;
}
#pull-indicator.refreshing span {
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Refresh button ---- */
.btn-refresh {
  position: sticky;
  top: 52px;
  float: right;
  z-index: 10;
  width: 36px;
  height: 36px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  background: #fff;
  color: #6c757d;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-right: 1rem;
  margin-top: -0.5rem;
  transition: color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-refresh:hover,
.btn-refresh:focus-visible {
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.btn-refresh:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}
@media print { .btn-refresh { display: none !important; } }
@media (max-width: 991.98px) {
  .btn-refresh {
    top: 48px;
    margin-right: 0.5rem;
  }
}

/* ---- Flight Tracking ---- */
.flight-plane-icon {
  font-size: 20px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Regional Dashboard ---- */
.dashboard-kpi .card {
  border-radius: 0.75rem;
  transition: transform 0.1s;
}
.dashboard-kpi .card:hover {
  transform: translateY(-1px);
}

/* Leaderboard rank badges — WCAG AAA contrast */
.lb-rank-1 { background: #8a6d00 !important; color: #fff !important; }
.lb-rank-2 { background: #595959 !important; color: #fff !important; }
.lb-rank-3 { background: #7a4a1a !important; color: #fff !important; }

/* Leaderboard best-in-category */
.lb-best { color: #1b5e20 !important; font-weight: 700 !important; }

/* Dashboard expandable detail toggle */
#dashboard-content tr[aria-expanded="true"] { background: #f0f4f8; }
#dashboard-content tr[aria-expanded="true"] + tr.d-none { display: table-row !important; }

/* Leaderboard my-region highlight — prominent blue with left accent */
tr.table-primary td { background: #cfe2f3 !important; }
tr.table-primary td:first-child { border-left: 4px solid #0d3b66; }

/* Mobile: leaderboard sticky first column */
@media (max-width: 991.98px) {
  .dashboard-lb-table th:first-child,
  .dashboard-lb-table td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
  }
  tr.table-primary td:first-child { background: #cfe2f3 !important; }
}

/* ---- SitRep [NEEDS INPUT] inline edit ---- */
.sitrep-needs-input {
  background: #fff3cd;
  color: #664d03;
  border: 1px dashed #997a00;
  border-radius: 3px;
  padding: 1px 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9em;
}
.sitrep-needs-input:hover {
  background: #ffe69c;
  border-style: solid;
}
.sitrep-fill-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: baseline;
}
.sitrep-fill-inline input {
  min-width: 180px;
  max-width: 350px;
  padding: 2px 6px;
  border: 2px solid #005fcc;
  border-radius: 3px;
  font-size: 0.9em;
  min-height: 36px;
}
.sitrep-fill-inline button {
  min-height: 36px;
  min-width: 36px;
  padding: 2px 8px;
  font-size: 0.85em;
}

/* ---- JuanGPT welcome image — responsive ---- */
.juangpt-welcome-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
@media (min-width: 576px) {
  .juangpt-welcome-img { width: 160px; height: 160px; }
}
@media (min-width: 992px) {
  .juangpt-welcome-img { width: 200px; height: 200px; }
}

/* ---- JuanGPT Help Widget ---- */
.juangpt-bubble-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: none;
  user-select: none;
  /* iOS Safari URL-bar fixed-position hardening. */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
}
.juangpt-drag-handle {
  width: 24px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: #999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
  margin-bottom: -2px;
  z-index: 1;
}
.juangpt-drag-handle:active { cursor: grabbing; color: #333; }
.juangpt-bubble {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #1a2332;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: box-shadow 0.2s;
  background: #fff;
}
.juangpt-bubble:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.juangpt-bubble-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.juangpt-panel {
  position: fixed;
  width: 380px;
  max-height: 500px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  /* Panel stacks ABOVE the bubble so its close button isn't covered */
  z-index: 1060;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Safe fallback position if JS positioner hasn't run yet */
  bottom: 108px;
  right: 20px;
}
.juangpt-header {
  background: var(--navy, #1a2332);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.juangpt-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  max-height: 350px;
  min-height: 150px;
}
.juangpt-input {
  border-top: 1px solid #dee2e6;
  padding: 8px;
}
.juangpt-msg {
  margin-bottom: 10px;
}
.juangpt-msg-user {
  text-align: right;
}
.juangpt-msg-assistant {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.juangpt-msg-bubble {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 85%;
  font-size: 0.875rem;
  text-align: left;
  word-wrap: break-word;
}
.juangpt-msg-bubble-user {
  background: #0d6efd;
  color: #fff;
}
.juangpt-msg-bubble-assistant {
  background: #f0f0f0;
  color: #212529;
}
.juangpt-welcome { font-size: 0.85rem; }

/* Typing indicator */
.juangpt-loading { border-top: 1px solid #eee; }
.juangpt-typing {
  display: flex;
  gap: 4px;
  align-items: center;
}
.juangpt-typing span {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  animation: juangpt-bounce 1.2s infinite;
}
.juangpt-typing span:nth-child(2) { animation-delay: 0.2s; }
.juangpt-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes juangpt-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* Rich text in assistant messages */
.juangpt-rich p { margin: 0 0 0.4em; }
.juangpt-rich p:last-child { margin-bottom: 0; }
.juangpt-rich ul, .juangpt-rich ol { margin: 0.2em 0; padding-left: 1.2em; }
.juangpt-rich li { margin-bottom: 0.1em; }
.juangpt-rich a { color: #0d6efd; text-decoration: underline; }
.juangpt-rich strong { font-weight: 600; }
.juangpt-rich code { background: #e9ecef; padding: 1px 4px; border-radius: 3px; font-size: 0.8em; }
.juangpt-rich h1, .juangpt-rich h2, .juangpt-rich h3 { font-size: 0.95rem; font-weight: 700; margin: 0.5em 0 0.2em; }
.juangpt-rich table { font-size: 0.8em; border-collapse: collapse; width: 100%; margin: 0.3em 0; }
.juangpt-rich td, .juangpt-rich th { border: 1px solid #dee2e6; padding: 2px 6px; }

/* Wiki article body heading scale — descending h1>h2>h3. Scoped to
   .wiki-content so it beats Bootstrap's element-level defaults (which, with the
   desktop `h1 { font-size: 1.75rem }` override above and no h2/h3 override, made
   h2/h3 render LARGER than h1). Body h1 sits just under the page title (.h3 = 1.75rem). */
.wiki-content h1 { font-size: 1.6rem; font-weight: 700; }
.wiki-content h2 { font-size: 1.35rem; font-weight: 700; }
.wiki-content h3 { font-size: 1.15rem; font-weight: 600; }
.wiki-content h4 { font-size: 1.02rem; font-weight: 600; }
.wiki-content h5 { font-size: 0.95rem; font-weight: 600; }
.wiki-content h6 { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
/* Images render as capped thumbnails and enlarge on click (app.js lightbox).
   Never overflow the column or render at full natural size. An explicit width=
   on the <img> still wins up to 100%. Keyboard-operable + focus indicator for
   WCAG (app.js adds role=button / tabindex / aria-label). */
.wiki-content img {
  max-width: 100%;
  max-height: 340px;
  height: auto;
  cursor: zoom-in;
  border: 1px solid #cfd6df;
  border-radius: 8px;
  background: #fff;
  padding: 3px;
}
.wiki-content img:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
.wiki-content img:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }

/* Ops Roll-up — per-op target link. Always visible on touch devices (no hover);
   hover/focus-revealed on pointer devices to keep the table clean. Hidden while
   the multi-select checkbox column is active (JS toggles .ops-selecting). */
#ops-narrative .ops-target-link { text-decoration: none; }
@media (hover: hover) {
  #ops-narrative .ops-target-link { opacity: 0; transition: opacity 0.12s ease; }
  #ops-narrative tr:hover .ops-target-link,
  #ops-narrative .ops-target-link:focus-visible { opacity: 1; }
}
#ops-narrative.ops-selecting .ops-target-link { display: none; }

/* Consistent vertical rhythm between wiki blocks (ZD-31293). Markdown collapses
   repeated blank lines, so authors can't "add space" with extra returns — these
   margins give predictable spacing between paragraphs, headings, lists, tables,
   and blockquotes instead. Headings get more space above than below so they
   group with the content that follows. */
.wiki-content > *:first-child { margin-top: 0; }
.wiki-content p,
.wiki-content ul,
.wiki-content ol,
.wiki-content blockquote,
.wiki-content pre { margin: 0 0 1rem; }
.wiki-content h1,
.wiki-content h2,
.wiki-content h3,
.wiki-content h4,
.wiki-content h5,
.wiki-content h6 { margin: 1.5rem 0 0.6rem; line-height: 1.25; }

/* Wiki tables (ZD-31292): default markdown tables had no borders, padding, or
   overflow handling. Give them a clean bordered look, a shaded header, zebra
   rows, and horizontal scroll on narrow (mobile) viewports so wide tables don't
   blow out the layout. */
.wiki-content table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  display: block;
  overflow-x: auto;            /* wide tables scroll instead of overflowing @390 */
  -webkit-overflow-scrolling: touch;
}
.wiki-content th,
.wiki-content td {
  border: 1px solid #cfd6df;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.wiki-content th {
  background: #eef2f7;
  font-weight: 700;
  color: #1b2a3a;
}
.wiki-content tbody tr:nth-child(even) { background: #f7f9fb; }
.wiki-content table caption { caption-side: top; font-weight: 600; padding-bottom: 0.4rem; }
/* Same guard inside the Toast UI WYSIWYG editor content area. */
.toastui-editor-contents img { max-width: 100%; height: auto; }
/* LMS lesson tables (markdown): borders/header/zebra/scroll so they're visible —
   mirrors the wiki table style, applied to the learner view AND the editor preview. */
.lms-native-content table,
.toastui-editor-contents table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lms-native-content th, .lms-native-content td,
.toastui-editor-contents th, .toastui-editor-contents td {
  border: 1px solid #cfd6df;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.lms-native-content th,
.toastui-editor-contents th {
  background: #eef2f7;
  font-weight: 700;
  color: #1b2a3a;
}
.lms-native-content tbody tr:nth-child(even),
.toastui-editor-contents tbody tr:nth-child(even) { background: #f7f9fb; }
/* Wiki image crop/resize modal (driven by wiki_toastui.js). */
.wiki-crop-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wiki-crop-panel { background: #fff; border-radius: 8px; padding: 1rem; width: 100%;
  max-width: 560px; max-height: 92vh; overflow: auto; }
.wiki-crop-stage { max-height: 48vh; overflow: hidden; background: #f5f5f5; }
.wiki-crop-stage img { max-width: 100%; display: block; }
/* Click-an-image size popover in the WYSIWYG editor. */
.wiki-size-pop { position: absolute; z-index: 2100; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* Mobile adjustments */
/* Clear the bottom tab bar everywhere it shows (d-lg-none), incl.
   phones in landscape — not just narrow portrait (ZD #33694). */
@media (max-width: 991.98px) {
  .juangpt-bubble-wrap { bottom: 80px; right: 12px; }
}
@media (max-width: 575.98px) {
  .juangpt-bubble { width: 56px; height: 56px; }
  .juangpt-panel {
    bottom: 136px; right: 12px; left: 12px;
    width: auto; max-height: 70vh;
  }
}

/* ---- World Clock Bar (WCAG AAA: 7:1 contrast) ---- */
.wc-bar {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding: 4px 20px;
  font-size: 0.8rem;
  color: #c6d4e3; /* 7.2:1 on #1a2332 — passes AAA */
  border-radius: 0 0 8px 8px;
}
.wc-tz {
  white-space: nowrap;
}
.wc-tz-active {
  color: #fff; /* 15.4:1 on #1a2332 */
  font-weight: 700;
}
@media (min-width: 1200px) {
  .wc-bar { font-size: 0.875rem; gap: 0.8rem; padding: 5px 24px; }
}
@media (min-width: 1600px) {
  .wc-bar { font-size: 1rem; gap: 1rem; padding: 6px 28px; }
}
@media (min-width: 2000px) {
  .wc-bar { font-size: 1.1rem; gap: 1.2rem; padding: 7px 32px; }
}

/* ---- Open Sites Map ---- */
#sites-map { height: 500px; width: 100%; border-radius: 8px; }
.map-legend { background: #fff; padding: 8px 12px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.3); font-size: 12px; line-height: 1.8; }
.map-legend h4 { margin: 0 0 4px 0; font-size: 13px; font-weight: 700; }
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }


/* ---- Phonebook FEMA map ---- */

/* NOTE: deliberately do NOT set `display: contents` on .fema-state — it is
   undefined behavior on SVG elements and hides child paths in some browsers. */

.fema-map-wrap svg.fema-map path {
    cursor: pointer;
    stroke: #ffffff;
    stroke-width: 0.75;
    transition: filter 0.12s ease-out;
}

.fema-map-wrap svg.fema-map path:hover,
.fema-map-wrap svg.fema-map path:focus {
    filter: brightness(1.25);
    stroke-width: 1.5;
}

.fema-map-wrap svg.fema-map path:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fema-map-wrap svg.fema-map path {
        transition: none;
    }
}

/* ── Movement Status pill (Slice A) ─────────────────────────────────── */
.movement-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  margin: 0 0 0.75rem 0;
  background: #f0f4f8;
  color: #14213d;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* Contrast: #f0f4f8 bg + #14213d text → 14.7:1 (AAA: 7:1 required). */
}
.movement-status-pill[hidden] {
  display: none;
}
.movement-status-pill__icon {
  font-size: 1.05rem;
  line-height: 1;
}
.movement-status-pill__sep {
  opacity: 0.55;
}
.movement-status-pill__time {
  opacity: 0.78;
  font-weight: 400;
}

/* ── Tile-disable state (Slice A) ───────────────────────────────────── */
.movement-tile.disabled,
.movement-tile[aria-disabled="true"],
.movement-tile:disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
.movement-tile.disabled [data-tile-caption-action],
.movement-tile[aria-disabled="true"] [data-tile-caption-action],
.movement-tile:disabled [data-tile-caption-action] {
  font-style: italic;
}

/* ── Tag chip (Slice B) ───────────────────────────────────────────── */
.movement-tag-chip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.movement-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  background: #fff3cd;
  color: #5a4400;
  border-radius: 999px;
  font-size: 0.9rem;
  border: 1px solid #ffe69c;
  /* Contrast: #fff3cd + #5a4400 → 8.6:1 (AAA). */
}
.movement-tag-chip[hidden] {
  display: none;
}

/* ── Vehicle crew chip (Slice C2) ────────────────────────────────── */
.movement-tag-chip--vehicle {
  background: #d1ecf1;
  color: #0c5460;
  border-color: #bee5eb;
  /* Contrast: #d1ecf1 + #0c5460 → 7.4:1 (AAA). */
}

/* ── Tag override modal (Slice D) ────────────────────────────────── */
#tagOverrideProgressBar {
  transition: width 1s linear;
}
#tagOverrideModal .modal-content {
  border: 2px solid #ffc107;  /* warning border so it stands out */
}

/* ── ICS-214 status pill (Slice E) ───────────────────────────────── */
.ics214-status-pill {
  display: block;
  padding: 0.4rem 0.85rem;
  margin: 0 0 0.75rem 0;
  background: #f0f4f8;
  color: #14213d;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* Same #f0f4f8 + #14213d = 14.7:1 contrast as the movement pill. */
}
.ics214-status-pill__icon {
  font-size: 1.05rem;
  line-height: 1;
  margin-right: 0.4rem;
}
.ics214-status-pill__sep {
  opacity: 0.55;
  margin: 0 0.4rem;
}
.ics214-status-pill__link {
  opacity: 0.85;
  text-decoration: underline;
}

/* ── EOD reminder banner (Slice E) ───────────────────────────────── */
.eod-reminder-banner {
  border-left: 4px solid #ffc107;
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
}
.eod-reminder-banner a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ── Slice I.6 — WCAG AAA + iOS-native touch targets ─────────────── */
/* Bootstrap primary (#0d6efd) is exactly 4.5:1 on white — passes AA
   but not AAA (7:1). Override to a darker blue that clears AAA. */
:root {
  --bs-primary: #0046c0;
  --bs-primary-rgb: 0, 70, 192;
  --bs-link-color: #0046c0;
  --bs-link-color-rgb: 0, 70, 192;
  --bs-link-hover-color: #002f80;
  --bs-nav-link-color: #0046c0;
  --bs-nav-tabs-link-active-color: #0046c0;
}
.btn-primary {
  --bs-btn-bg: #0046c0;
  --bs-btn-border-color: #0046c0;
  --bs-btn-hover-bg: #003a9e;
  --bs-btn-hover-border-color: #003a9e;
  --bs-btn-active-bg: #002f80;
  --bs-btn-active-border-color: #002f80;
  --bs-btn-disabled-bg: #0046c0;
  --bs-btn-disabled-border-color: #0046c0;
}
.btn-secondary {
  /* Bootstrap default #6c757d → 4.69:1; #565e64 → 6.60:1 (still AA);
     #495057 → ~7.6:1 clears AAA. */
  --bs-btn-bg: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-bg: #3a4046;
  --bs-btn-hover-border-color: #3a4046;
  --bs-btn-disabled-bg: #495057;
  --bs-btn-disabled-border-color: #495057;
}

/* Bootstrap form-switch toggles default to 16px tall — way under
   iOS-native 44px target. Pad the wrapper so the whole row is tappable. */
.form-check.form-switch {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding-left: 2.5em;
}
.form-check.form-switch .form-check-label {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}


/* Bootstrap .btn-outline-warning is yellow text on white = ~3:1, fails
   AA + AAA. Override to a dark amber that clears AAA against white
   stock. Filled .btn-warning stays Bootstrap default (black text on
   yellow = ~12:1 — already AAA). */
.btn-outline-warning {
  --bs-btn-color: #664d03;
  --bs-btn-border-color: #cc8700;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #664d03;
  --bs-btn-hover-border-color: #664d03;
  --bs-btn-focus-shadow-rgb: 102, 77, 3;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #4d3a02;
  --bs-btn-active-border-color: #4d3a02;
  --bs-btn-disabled-color: #664d03;
  --bs-btn-disabled-border-color: #cc8700;
}

/* ─── Field-tech site survey: WCAG AAA + iOS-native touch targets ──────── */
#field-site-form .form-control,
#field-site-form .form-select {
  min-height: 44px;
}
.disposition-radio label,
.services-grid label {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .25rem;
  cursor: pointer;
}
.disposition-radio input,
.services-grid input {
  min-width: 22px;
  min-height: 22px;
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
}
@media (min-width: 576px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}
/* "Other" description box only shows once Other is ticked (ZD #33713). */
.services-block:not(:has(input[value="Other"]:checked)) .services-other {
  display: none;
}
.services-other .form-control { min-height: 44px; }
/* Dup-banner + confirmation action buttons need 44px hit area too. */
.alert-warning .btn-sm,
#field-site-confirm .btn-sm {
  min-height: 44px;
}

.site-card {
  background: #fff;
  transition: background-color .1s;
  min-height: 44px;
}
.site-card:hover, .site-card:focus-visible {
  background: var(--bs-light);
}
.site-card-ribbon { font-weight: 500; }

/* Field-site form — iOS-native + AAA polish (scoped to .field-site-form) */
.field-site-form .form-card {
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 16px;
}
@media (min-width: 768px) {
  .field-site-form .form-card { padding: 20px; }
}
.field-site-form .form-card legend,
.field-site-form .form-card summary {
  font-size: .8rem;
  letter-spacing: .04em;
}
.field-site-form .form-control,
.field-site-form .form-select {
  min-height: 48px;
  font-size: 16px;
}
.field-site-form .form-card details > summary { cursor: pointer; }

/* Sticky bottom action bar with translucent backdrop */
.field-site-sticky-bar {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--bs-border-color);
  padding: 12px 0 16px 0;
  margin: 0 -16px;   /* break out of the container's padding */
  padding-left: 16px;
  padding-right: 16px;
}

/* iOS UISegmentedControl-style disposition picker */
.disposition-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: var(--bs-light);
  border-radius: 10px;
  padding: 4px;
}
.disposition-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
  text-align: center;
  font-size: .875rem;
  cursor: pointer;
}
.disposition-segment input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.disposition-segment:has(input:checked) {
  background: var(--bs-primary);
  color: #fff;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .field-site-sticky-bar { transition: none; }
}

/* Wiki grant editor — typeahead results overlay */
.grant-results { position: absolute; z-index: 1050; width: 100%; max-height: 320px; overflow-y: auto; }
.grant-results li.active,
.grant-results li[aria-selected="true"] { background-color: #005fcc; color: #ffffff; }
.wiki-grant-add .col-12 { position: relative; }

/* Wiki two-column layout: left nav sidebar + main content */
@media (min-width: 992px) {
  .wiki-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
  }
  .wiki-nav {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

/* Wiki nav collapsible tree: chevron, toggle button, subcat nesting, active page */
.wiki-nav .wiki-chevron { transition: transform 0.2s ease; }
.wiki-nav [data-bs-toggle="collapse"][aria-expanded="false"] .wiki-chevron { transform: rotate(-90deg); }
.wiki-nav .wiki-cat-toggle { color: inherit; font-weight: 600; text-decoration: none; width: 100%; text-align: left; justify-content: flex-start; }
.wiki-nav .wiki-subcat { border-left: 2px solid var(--bs-border-color, #dee2e6); margin-left: .5rem; padding-left: .5rem; }
.wiki-nav a[aria-current="page"] { font-weight: 600; }

/* Wiki floating save bar */
.wiki-save-bar { position: sticky; bottom: 0; z-index: 1030; background: var(--bs-body-bg, #fff);
  border-top: 1px solid #dee2e6; padding: .75rem 0; margin-top: 1.5rem;
  backdrop-filter: saturate(180%) blur(6px); }
@media (max-width: 991.98px) { .wiki-save-bar .container-xl { padding-left: 1rem; padding-right: 1rem; } }

/* Pending-225 bulk action bar — sticks to the top on scroll so the score +
   remark + Force-close controls stay reachable while scanning a long list.
   backdrop blur gives scroll context per the mobile-first rule. */
.pending-225-bulk-bar { position: sticky; top: .5rem; z-index: 1020;
  backdrop-filter: saturate(180%) blur(6px); }

/* Wiki markdown toolbar + emoji picker */
.wiki-md-toolbar { position: relative; }
.wiki-emoji-pop { position: absolute; z-index: 1050; top: 100%; left: 0; max-width: 320px; max-height: 220px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: .25rem; padding: .5rem; background: #fff;
  border: 1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.wiki-md-toolbar .btn:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; }
/* LMS native-lesson video embeds (YouTube/Vimeo) — responsive 16:9 */
.lms-video-embed { position: relative; width: 100%; padding-top: 56.25%; margin: 1rem 0; border-radius: 8px; overflow: hidden; background: #000; }
.lms-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Professor C. new-course alert bubble */
.professor-c-bubble-wrap { position: fixed; bottom: 20px; left: 20px; z-index: 1050; }
.professor-c-bubble { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #1a2332;
  padding: 0; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); background: #fff; }
.professor-c-bubble-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.professor-c-panel { position: fixed; width: 360px; max-height: 70vh; background: #fff;
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); z-index: 1060; display: flex;
  flex-direction: column; overflow: hidden; bottom: 108px; left: 20px; }
.professor-c-header { background: var(--navy, #1a2332); color: #fff; padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center; }
.professor-c-body { padding: 12px; overflow-y: auto; }
@media (max-width: 575.98px) {
  .professor-c-bubble-wrap { bottom: 80px; left: 12px; }
  .professor-c-bubble { width: 56px; height: 56px; }
  .professor-c-panel { bottom: 136px; left: 12px; right: 12px; width: auto; }
}

/* ── Navigation loading overlay (app.js toggles .is-active) ─────────────── */
.page-loading {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.page-loading.is-active { display: flex; }
.page-loading__box {
  text-align: center;
  padding: 1.5rem 2rem;
  background: #fff;
  border: 1px solid #cfd6df;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  max-width: 80vw;
}
.page-loading__spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 0.75rem;
  border: 4px solid #d6dee8;
  border-top-color: #005fcc;
  border-radius: 50%;
  animation: page-loading-spin 0.8s linear infinite;
}
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
.page-loading__text { font-weight: 600; color: #1b2a3a; }
@media (prefers-reduced-motion: reduce) {
  .page-loading__spinner { animation-duration: 2s; }
}

/* Wiki prev/next pager */
.wiki-pager-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 576px) { .wiki-pager-grid { grid-template-columns: 1fr 1fr; } }
.wiki-pager-link {
  display: flex; flex-direction: column; gap: .15rem;
  min-height: 48px; padding: .6rem .8rem;
  border: 1px solid var(--bs-border-color); border-radius: .5rem;
  text-decoration: none; color: inherit;
}
.wiki-pager-link.next { text-align: right; align-items: flex-end; }
.wiki-pager-link:hover { border-color: var(--bs-primary); background: var(--bs-tertiary-bg); }
.wiki-pager-link:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; }
.wiki-pager-dir { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color); }
.wiki-pager-eyebrow { font-size: .72rem; color: var(--bs-secondary-color); }
.wiki-pager-title { font-weight: 600; }

/* ── Livestream watch-page two-pane layout (#120 P3) ──────────────────────── */
/* Mobile-first: single column (video then chat below) */
.ls-watch-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 820px;
  margin: 0 auto;
}

/* Desktop ≥992px: side-by-side, video main + chat side-rail */
@media (min-width: 992px) {
  .ls-watch-layout--chat {
    max-width: 1200px;
    flex-direction: row;
    align-items: flex-start;
  }
  .ls-watch-layout--chat .ls-watch-video-col {
    flex: 1 1 0;
    min-width: 0;
  }
  .ls-watch-layout--chat .ls-chat-pane {
    flex: 0 0 340px;
    width: 340px;
  }
}

.ls-watch-video-col { width: 100%; position: relative; }

/* ── Chat pane ─────────────────────────────────────────────────────────────── */
.ls-chat-pane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bs-body-bg);
  /* On mobile: fixed height to stay manageable below the video */
  height: 480px;
  position: relative;
}

@media (min-width: 992px) {
  .ls-chat-pane {
    /* On desktop match roughly the video height (16:9 of the video col width) */
    height: 520px;
  }
}

.ls-chat-header {
  background: var(--bs-tertiary-bg);
  flex-shrink: 0;
}

.ls-chat-messages {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 0.75rem;
  scroll-behavior: smooth;
}

/* Chat message bubbles */
.ls-chat-msg {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  background: var(--bs-secondary-bg);
  position: relative;
  word-break: break-word;
}

.ls-chat-msg--pending { opacity: 0.6; }
.ls-chat-msg--failed  { border-left: 3px solid var(--bs-danger); opacity: 0.8; }

.ls-chat-msg__meta {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.2rem;
}

.ls-chat-msg__body { font-size: 0.9rem; }

.ls-chat-msg__delete {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0.1rem 0.35rem;
  font-size: 0.75rem;
  min-width: 44px;
  min-height: 44px;
}
.ls-chat-msg:hover .ls-chat-msg__delete { opacity: 1; }
.ls-chat-msg__delete:focus-visible { opacity: 1; outline: 3px solid #005fcc; }

/* Reaction bar */
.ls-chat-reactions {
  flex-shrink: 0;
  background: var(--bs-body-bg);
}

/* Composer */
.ls-chat-composer {
  flex-shrink: 0;
  background: var(--bs-body-bg);
}

/* ── Floating reaction overlay ─────────────────────────────────────────────── */
/* Sits over the video; pointer-events:none so video controls remain usable. */
.ls-reaction-overlay {
  position: absolute;
  /* Cover the video area — positioned relative to .ls-watch-video-col which
     is a sibling; we rely on JS animating emoji in the overlay attached to
     the chat pane (desktop) or page flow (mobile). The overlay is placed on
     the watch-layout container via JS. */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

/* Floating emoji animation */
@keyframes ls-float-up {
  0%   { transform: translateY(0) scale(1);   opacity: 1; }
  80%  { transform: translateY(-180px) scale(1.3); opacity: 0.8; }
  100% { transform: translateY(-220px) scale(1.5); opacity: 0; }
}

.ls-reaction-float {
  position: absolute;
  bottom: 10%;
  font-size: 2rem;
  animation: ls-float-up 1.5s ease-out forwards;
  user-select: none;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ls-reaction-float { animation-duration: 0.01ms; }
}

/* Change-status primary action (volunteer detail): dark red with white text in every state
   via Bootstrap's own button variables, so hover / pressed / disabled never fall back to a
   transparent or faded background. White on #a4161a 7.7:1, #85100f 10.1:1, #6a0d0c 12.5:1;
   disabled is a solid dark grey (white on #4d5358 7.8:1), not opacity. */
.sc-btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: #a4161a; --bs-btn-border-color: #a4161a;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #85100f; --bs-btn-hover-border-color: #85100f;
  --bs-btn-focus-shadow-rgb: 164, 22, 26;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #6a0d0c; --bs-btn-active-border-color: #6a0d0c;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #4d5358; --bs-btn-disabled-border-color: #4d5358;
  --bs-btn-disabled-opacity: 1;
  min-height: 44px;
}
@media (max-width: 991.98px) { .sc-btn-danger { min-height: 48px; } }
/* Status-change history (Audit tab): secondary text and the "Status not changed" badge at
   >= 7:1 (Bootstrap's .text-muted / .text-bg-secondary are ~4.6:1). */
.sc-muted-aaa { color: #495057; }                          /* 8.2:1 on white */
.sc-badge-unchanged { background-color: #495057; color: #fff; } /* 8.2:1 */

/* Nav count badges (Travel Documents, Ineligible matches): white on #a4161a is 7.7:1
   (Bootstrap's .bg-danger is ~4.5:1). */
.sc-badge-danger { background-color: #a4161a; color: #fff; }