/* Mission: Patrol Theme System */
:root {
  /* Dark mode (default) */
  --color-primary: #272462;      /* Penn Blue */
  --color-secondary: #3F054F;    /* Russian Violet */
  --color-accent: #156070;       /* Midnight Green */
  --color-interactive: #67288E;  /* Rebecca Purple */
  --color-highlight: #E084FF;    /* Brighter Mauve for dark mode */
  --color-text: #ffffff;
  --color-text-secondary: #e5e7eb;
  --color-bg: #0f172a;
  --color-bg-secondary: #1a1f36;
  --color-border: #374151;
  --color-card: #2d3748;         /* Lighter card background for dark mode */
  --color-danger: #ef4444;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
}

body.light-mode {
  --color-primary: #f9fafb;      /* White/off-white */
  --color-secondary: #E084FF;    /* Bright mauve */
  --color-accent: #156070;       /* Midnight Green */
  --color-interactive: #3F054F;  /* Russian Violet */
  --color-highlight: #7C3AED;    /* Deep purple for light mode */
  --color-text: #1f2937;         /* Darker text */
  --color-text-secondary: #4b5563;
  --color-bg: #ffffff;
  --color-bg-secondary: #f3f4f6;
  --color-border: #d1d5db;
  --color-card: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
    color: #E084FF;
    font-family: 'Sora', sans-serif;
    /* Uncomment below to use Sora instead: */
    /* font-family: 'Sora', sans-serif; */
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
  color: #7C3AED !important;
}

* {
  color-scheme: light dark;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s, color 0.3s;
}

.navbar {
  background-color: #3F054F !important;
  border-bottom: 3px solid var(--color-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.light-mode .navbar {
  background-color: #7C3AED !important;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #E084FF !important;
  font-family: 'Space Grotesk', sans-serif;
  /* Uncomment below to use Sora instead: */
  /* font-family: 'Sora', sans-serif; */
}

body.light-mode .navbar-brand {
  color: #ffffff !important;
}

.navbar .nav-link {
  color: var(--color-text-secondary) !important;
  transition: color 0.2s;
}

body.light-mode .navbar .nav-link {
  color: #ffffff !important;
}

.navbar .nav-link:hover {
  color: #E084FF !important;
}

body.light-mode .navbar .nav-link:hover {
  color: #ffffff !important;
}

.sidebar {
  background-color: var(--color-bg-secondary);
  border-right: 2px solid var(--color-border);
  padding: 20px;
}

.sidebar h5 {
  color: #E084FF;
  font-weight: 700;
  margin-bottom: 20px;
}

body.light-mode .sidebar h5 {
  color: #7C3AED;
}

.sidebar a {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--color-text-secondary);
  border-radius: 6px;
  transition: all 0.2s;
}

.sidebar a:hover {
  background-color: var(--color-interactive);
  color: var(--color-highlight);
}

body.light-mode .sidebar a:hover {
  background-color: #7C3AED;
  color: #ffffff;
}

.card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all 0.3s;
}

body.light-mode .card {
  background-color: #ffffff;
  border-color: #e0e0e0;
}

.card:hover {
  border-color: var(--color-interactive);
  box-shadow: 0 4px 12px rgba(103, 40, 142, 0.2);
}

.card-title {
  color: #E084FF;
  font-weight: 600;
}

body.light-mode .card-title {
  color: #7C3AED !important;
  font-weight: 700;
}

.card-text {
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 600;
}

body.light-mode .card-text {
  color: #272462;
}

.btn-primary {
  background-color: var(--color-interactive);
  border-color: var(--color-interactive);
  color: white;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

body.light-mode .btn-primary {
  background-color: #67288E;
  border-color: #67288E;
  color: white;
}

body.light-mode .btn-primary:hover {
  background-color: #156070;
  border-color: #156070;
  color: white;
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: white;
  font-weight: 600;
}

.btn-success:hover {
  filter: brightness(1.1);
  color: white;
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: white;
  font-weight: 600;
}

.btn-danger:hover {
  filter: brightness(1.1);
  color: white;
}

.table {
  color: var(--color-text);
}

.table thead {
  background-color: #3F054F;
  border-color: #3F054F;
}

.table thead th {
  background-color: #3F054F !important;
  color: #ffffff !important;
  font-weight: 700;
  border-color: #3F054F !important;
  padding: 12px;
}

body.light-mode .table thead {
  background-color: #7C3AED;
  border-color: #7C3AED;
}

body.light-mode .table thead th {
  background-color: #7C3AED !important;
  color: #ffffff !important;
  font-weight: 700;
  border-color: #7C3AED !important;
}

.table tbody tr {
  border-color: var(--color-border);
  background-color: var(--color-card);
}

.table tbody td {
  color: #ffffff !important;
  padding: 12px;
}

body.light-mode .table tbody tr {
  background-color: #f9fafb;
}

body.light-mode .table tbody td {
  color: #1f2937 !important;
}

.table tbody tr:hover {
  background-color: #67288E;
}

.table tbody tr:hover td {
  color: #ffffff !important;
}

body.light-mode .table tbody tr:hover {
  background-color: #d8b4fe;
}

body.light-mode .table tbody tr:hover td {
  color: #5b21b6 !important;
}

.form-control,
.form-select {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text);
}

.form-control::placeholder {
  color: var(--color-text-secondary);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--color-bg-secondary);
  border-color: var(--color-interactive);
  color: var(--color-text);
  box-shadow: 0 0 0 0.2rem rgba(103, 40, 142, 0.25);
}

body.light-mode .form-control,
body.light-mode .form-select {
  background-color: #ffffff;
  border-color: #e5e7eb;
  color: #1f2937;
}

body.light-mode .form-control:focus,
body.light-mode .form-select:focus {
  background-color: #ffffff;
  border-color: #7C3AED;
  color: #1f2937;
}

/* =========================================================
   jsTree theming
   ========================================================= */

/* Remove jsTree's built-in branch/background graphics */
.jstree-default .jstree-node {
    background-image: none !important;
    position: relative;
    margin-left: 24px;
}

/* Remove jsTree's built-in open/close sprite */
.jstree-default .jstree-ocl {
    background-image: none !important;
    position: relative;
}


/* ---------------------------------------------------------
   Tree node
   --------------------------------------------------------- */

.jstree-default .jstree-anchor {
    position: relative;
    color: var(--color-text-secondary);
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    line-height: 24px;
    height: auto;
    text-decoration: none;
}


    /* ---------------------------------------------------------
   Custom branch connector
   --------------------------------------------------------- */

    /* Vertical part of the L */
    .jstree-default .jstree-anchor::before {
        content: "";
        position: absolute;
        left: -22px;
        top: -14px;
        height: calc(50% + 14px);
        border-left: 1px dotted #94a3b8;
        pointer-events: none;
    }

    /* Horizontal part of the L */
    .jstree-default .jstree-anchor::after {
        content: "";
        position: absolute;
        left: -22px;
        top: 50%;
        width: 18px;
        border-top: 1px dotted #94a3b8;
        pointer-events: none;
    }


/* Dark mode connector */
body:not(.light-mode) .jstree-default .jstree-anchor::before,
body:not(.light-mode) .jstree-default .jstree-anchor::after {
    border-color: #94a3b8;
}


/* Light mode connector */
body.light-mode .jstree-default .jstree-anchor::before,
body.light-mode .jstree-default .jstree-anchor::after {
    border-color: #64748b;
}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

.jstree-default .jstree-anchor:hover {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-highlight) !important;
}


/* ---------------------------------------------------------
   Selected
   --------------------------------------------------------- */

.jstree-default .jstree-clicked {
    background-color: var(--color-interactive) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}


    /* Selected + hover */
    .jstree-default .jstree-clicked:hover {
        background-color: var(--color-interactive) !important;
        color: #ffffff !important;
    }


/* Light mode selected */
body.light-mode .jstree-default .jstree-clicked {
    background-color: #7C3AED !important;
    color: #ffffff !important;
}


/* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

.jstree-default .jstree-anchor.jstree-focused {
    outline: none;
}


/* ---------------------------------------------------------
   Expand / collapse arrows
   --------------------------------------------------------- */

.jstree-default .jstree-closed > .jstree-ocl::after {
    content: "▶";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--color-text-secondary);
}


.jstree-default .jstree-open > .jstree-ocl::after {
    content: "▼";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: var(--color-text-secondary);
}


/* Leaf nodes don't need an arrow */
.jstree-default .jstree-leaf > .jstree-ocl::after {
    content: "";
}


/* ---------------------------------------------------------
   Disable jsTree whole-row styling
   --------------------------------------------------------- */

.jstree-default .jstree-wholerow,
.jstree-default .jstree-wholerow-hovered,
.jstree-default .jstree-wholerow-clicked {
    display: none;
}

/* Side panel form styling */
.side-panel .form-control {
  background-color: #1a1f36;
  border-color: #374151;
  color: #ffffff;
}

.side-panel .form-control:focus {
  background-color: #1a1f36;
  border-color: #67288E;
  color: #ffffff;
}

body.light-mode .side-panel .form-control {
  background-color: #ffffff;
  border-color: #e5e7eb;
  color: #1f2937;
}

/* Side panel */
.side-panel {
  position: fixed;
  right: 0;
  top: 60px;
  width: 400px;
  height: calc(100vh - 60px);
  background-color: var(--color-bg-secondary);
  border-left: 2px solid var(--color-border);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  z-index: 1000;
}

.side-panel.open {
  transform: translateX(0);
}

.side-panel-header {
  padding: 16px;
  border-bottom: 2px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.side-panel-header h4 {
  color: #E084FF;
  margin: 0;
}

body.light-mode .side-panel-header h4 {
  color: #7C3AED;
}

.side-panel-body {
  padding: 16px;
}

.side-panel-close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 24px;
}

.side-panel-close:hover {
  color: var(--color-text);
}

/* Theme toggle */
.theme-toggle {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 1.2rem;
  margin-left: 16px;
  transition: color 0.2s;
}

body.light-mode .theme-toggle {
  color: #ffffff;
}

body.light-mode #userName {
  color: #ffffff !important;
}

.theme-toggle:hover {
  color: #E084FF;
}

body.light-mode .theme-toggle:hover {
  color: #ffffff;
}

/* Utility */
.text-accent {
  color: #E084FF !important;
}

body.light-mode .text-accent {
  color: #7C3AED !important;
}

.text-muted {
  color: var(--color-text-secondary);
}

.border-accent {
  border-color: var(--color-interactive) !important;
}


/* Bootstrap Icon alignment */
.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.sidebar .nav-link .bi {
    width: 1.15rem;
    text-align: center;
    flex: 0 0 1.15rem;
}

.card-title .bi {
    margin-right: 0.4rem;
}

.theme-toggle .bi {
    font-size: 1.1rem;
}

/* Bootstrap Icons inside jsTree nodes */
.jstree-default .jstree-themeicon {
    background-image: none !important;
    background-position: 0 0 !important;
    color: currentColor;
    margin-right: 6px;
    font-size: 1rem;
    line-height: 24px;
}

.jstree-default .jstree-clicked .jstree-themeicon {
    color: #ffffff;
}


/* Schedule list route links */
.schedule-route-link {
  color: var(--color-highlight) !important;
  font-weight: 600;
}

.schedule-route-link:hover,
.schedule-route-link:focus {
  color: #ffffff !important;
  text-decoration: underline !important;
}

body.light-mode .schedule-route-link {
  color: #5b21b6 !important;
}

body.light-mode .schedule-route-link:hover,
body.light-mode .schedule-route-link:focus {
  color: #3F054F !important;
}

.table tbody tr:hover .schedule-route-link {
  color: #ffffff !important;
}

body.light-mode .table tbody tr:hover .schedule-route-link {
  color: #3F054F !important;
}


/* Schedule route display */
.schedule-route-subtitle {
  color: var(--color-text-secondary);
  font-size: 1rem;
}

.schedule-route-display[readonly] {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  opacity: 1 !important;
  cursor: default;
}

body.light-mode .schedule-route-display[readonly] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #1f2937 !important;
}

body.light-mode .schedule-route-subtitle {
  color: #4b5563;
}


/* Checkpoint QR preview */
.checkpoint-qr-card {
    background: var(--color-card);
    border-color: var(--color-border);
}

.checkpoint-qr-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 14px;
    border-radius: 8px;
    width: 288px;
    min-height: 288px;
    overflow: hidden;
}

.checkpoint-qr-preview canvas,
.checkpoint-qr-preview img,
.checkpoint-qr-preview svg,
.checkpoint-qr-preview table {
    max-width: 260px;
    max-height: 260px;
    margin: 0 auto;
}

.checkpoint-qr-preview canvas,
.checkpoint-qr-preview img {
    height: auto;
}

.qr-render-message {
    width: 100%;
    padding: 1rem;
    text-align: center;
    background: #fff;
}

.qr-payload {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ============================================================
   Operations dashboard
   ============================================================ */
.operations-page {
  max-width: 1800px;
}

.ops-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-bg-secondary);
}

.ops-live-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-warning);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35);
}

.ops-live-pill.connected .ops-live-dot {
  background: var(--color-success);
  animation: opsPulse 2s infinite;
}

@keyframes opsPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ops-summary-grid .card:hover {
  transform: translateY(-1px);
}

.ops-stat-card .card-body {
  padding: 1rem;
}

.ops-stat-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.ops-stat-value {
  margin-top: 0.35rem;
  font-family: 'Sora', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

.ops-stat-note {
  min-height: 1rem;
  margin-top: 0.3rem;
  color: var(--color-warning);
  font-size: 0.7rem;
}

.ops-stat-card[data-stat="completed"] .ops-stat-value { color: var(--color-success); }
.ops-stat-card[data-stat="late"] .ops-stat-value,
.ops-stat-card[data-stat="missed"] .ops-stat-value,
.ops-stat-card[data-stat="alerts"] .ops-stat-value { color: var(--color-danger); }
.ops-stat-card[data-stat="available"] .ops-stat-value { color: var(--color-info); }
.ops-stat-card[data-stat="due"] .ops-stat-value { color: var(--color-warning); }

.ops-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.ops-card-header h5 {
  color: var(--color-highlight);
}

.ops-count-badge {
  background: var(--color-danger);
  color: #fff;
  min-width: 2rem;
}

.ops-filter-group .btn {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.ops-filter-group .btn.active,
.ops-filter-group .btn:hover {
  color: #fff;
  background: var(--color-interactive);
  border-color: var(--color-interactive);
}

.ops-patrol-list,
.ops-alert-list {
  max-height: 580px;
  overflow-y: auto;
}

.ops-patrol-row {
  width: 100%;
  display: grid;
  grid-template-columns: 92px minmax(220px, 1.5fr) minmax(150px, 0.8fr) 145px;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  text-align: left;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.18s ease;
}

.ops-patrol-row:hover,
.ops-patrol-row:focus {
  background: rgba(103, 40, 142, 0.14);
  outline: none;
}

.ops-patrol-time {
  display: flex;
  flex-direction: column;
}

.ops-patrol-time-main {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.ops-patrol-time-date,
.ops-patrol-subtitle,
.ops-patrol-guard {
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.ops-patrol-title {
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.ops-patrol-guard {
  margin-top: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-patrol-progress-wrap {
  color: var(--color-text-secondary);
}

.ops-progress {
  height: 0.42rem;
  background: var(--color-bg-secondary);
}

.ops-progress .progress-bar {
  background: var(--color-success);
}

.ops-patrol-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.ops-patrol-chevron {
  color: var(--color-text-secondary);
}

.ops-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 0.27rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.ops-status-scheduled { background: rgba(148, 163, 184, 0.14); color: var(--color-text-secondary); border-color: rgba(148, 163, 184, 0.3); }
.ops-status-available { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border-color: rgba(59, 130, 246, 0.35); }
.ops-status-due { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.35); }
.ops-status-progress { background: rgba(103, 40, 142, 0.25); color: #e9b7ff; border-color: rgba(224, 132, 255, 0.3); }
.ops-status-completed { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.35); }
.ops-status-late,
.ops-status-missed { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); }
.ops-status-cancelled { background: rgba(107, 114, 128, 0.12); color: var(--color-text-secondary); border-color: rgba(107, 114, 128, 0.25); }

.ops-alert-item {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  border-left: 4px solid var(--color-warning);
}

.ops-alert-item.ops-severity-critical,
.ops-alert-item.ops-severity-high { border-left-color: var(--color-danger); }
.ops-alert-item.ops-severity-low { border-left-color: var(--color-info); }

.ops-alert-title {
  font-weight: 700;
  color: var(--color-text);
}

.ops-alert-time {
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  white-space: nowrap;
}

.ops-alert-severity,
.ops-alert-state {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ops-severity-critical .ops-alert-severity,
.ops-severity-high .ops-alert-severity {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

.ops-alert-state {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.ops-alert-message {
  margin-top: 0.45rem;
  color: var(--color-text-secondary);
  font-size: 0.86rem;
}

.ops-alert-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.55rem;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
}

.ops-alert-context span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.ops-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.ops-activity-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ops-activity-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 74px;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.ops-activity-item:nth-child(odd) {
  border-right: 1px solid var(--color-border);
}

.ops-activity-icon {
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.2rem;
  border-radius: 50%;
  color: var(--color-highlight);
  background: rgba(103, 40, 142, 0.18);
}

.ops-activity-body {
  min-width: 0;
  flex: 1;
}

.ops-activity-link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.ops-offline-tag {
  color: var(--color-warning);
}

.ops-empty {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--color-text-secondary);
  text-align: center;
}

.ops-empty > .bi {
  font-size: 1.5rem;
}

.ops-empty-success > .bi {
  color: var(--color-success);
}

.ops-modal-content {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.ops-modal-content .modal-header {
  background: var(--color-bg-secondary);
  border-bottom-color: var(--color-border);
}

.ops-modal-content .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.ops-detail-metric,
.ops-detail-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.ops-detail-metric {
  height: 100%;
  padding: 0.85rem 1rem;
}

.ops-detail-metric > span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  margin-bottom: 0.25rem;
}

.ops-detail-metric > strong {
  color: var(--color-text);
}

.ops-detail-section {
  padding: 1rem;
}

.ops-detail-section h6 {
  margin-bottom: 1rem;
}

.ops-checkpoint-list {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.ops-checkpoint-row {
  display: grid;
  grid-template-columns: 34px 30px minmax(0, 1fr) 130px;
  gap: 0.55rem;
  align-items: center;
  padding: 0.8rem;
  border-bottom: 1px solid var(--color-border);
}

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

.ops-checkpoint-sequence {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-card);
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
}

.ops-checkpoint-state {
  font-size: 1.05rem;
}

.ops-checkpoint-complete .ops-checkpoint-state { color: var(--color-success); }
.ops-checkpoint-warning .ops-checkpoint-state { color: var(--color-warning); }
.ops-checkpoint-missed .ops-checkpoint-state { color: var(--color-danger); }
.ops-checkpoint-pending .ops-checkpoint-state { color: var(--color-text-secondary); }

.ops-checkpoint-name {
  font-weight: 700;
}

.ops-checkpoint-actual {
  text-align: right;
  font-size: 0.82rem;
}

.ops-detail-list dt,
.ops-detail-list dd {
  margin-bottom: 0.55rem;
}

.ops-detail-list dt {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.ops-person-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ops-person-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
  font-size: 0.74rem;
  font-weight: 600;
}

.ops-person-chip-muted {
  background: rgba(148, 163, 184, 0.12);
  color: var(--color-text-secondary);
}

.ops-timeline {
  position: relative;
}

.ops-timeline-item {
  display: flex;
  gap: 0.7rem;
  position: relative;
  padding-bottom: 1rem;
}

.ops-timeline-item:last-child {
  padding-bottom: 0;
}

.ops-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.9rem;
  top: 1.75rem;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}

.ops-timeline-marker {
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.8rem;
  border-radius: 50%;
  background: var(--color-card);
  color: var(--color-highlight);
  z-index: 1;
}

.ops-timeline-content {
  padding-top: 0.15rem;
  font-size: 0.84rem;
}

body.light-mode .ops-status-available { color: #1d4ed8; }
body.light-mode .ops-status-completed { color: #047857; }
body.light-mode .ops-status-due { color: #b45309; }
body.light-mode .ops-status-late,
body.light-mode .ops-status-missed { color: #b91c1c; }
body.light-mode .ops-status-progress { color: #6d28d9; }
body.light-mode .ops-modal-content .btn-close { filter: none; }
body.light-mode .ops-person-chip { color: #047857; }
body.light-mode .ops-alert-state { color: #1d4ed8; }
body.light-mode .ops-alert-severity { color: #b45309; }
body.light-mode .ops-severity-critical .ops-alert-severity,
body.light-mode .ops-severity-high .ops-alert-severity { color: #b91c1c; }

@media (max-width: 1199.98px) {
  .ops-patrol-row {
    grid-template-columns: 82px minmax(0, 1fr) 125px;
  }

  .ops-patrol-progress-wrap {
    grid-column: 2 / 3;
    grid-row: 2;
  }

  .ops-patrol-status {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 767.98px) {
  .ops-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ops-filter-group {
    width: 100%;
  }

  .ops-filter-group .btn {
    flex: 1;
  }

  .ops-patrol-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .ops-patrol-progress-wrap {
    grid-column: 2;
    grid-row: auto;
  }

  .ops-patrol-status {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-start;
  }

  .ops-activity-list {
    grid-template-columns: 1fr;
  }

  .ops-activity-item:nth-child(odd) {
    border-right: 0;
  }

  .ops-checkpoint-row {
    grid-template-columns: 30px 28px minmax(0, 1fr);
  }

  .ops-checkpoint-actual {
    grid-column: 3;
    text-align: left;
  }
}

.sidebar a.active {
  background-color: var(--color-interactive);
  color: var(--color-highlight);
  font-weight: 600;
}

body.light-mode .sidebar a.active {
  background-color: #7C3AED;
  color: #ffffff;
}

/* ========================================================================== */
/* v26.2 - Observations UI                                                    */
/* ========================================================================== */
.observation-summary-card {
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.observation-summary-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-highlight);
}

.observation-summary-value {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 700;
    color: var(--color-highlight);
}

.observation-table td {
    vertical-align: middle;
}

.observation-description {
    max-width: 520px;
}

.observation-description-full {
    white-space: pre-wrap;
    line-height: 1.65;
}

.observation-detail-list {
    display: grid;
    gap: 0;
}

.observation-detail-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--color-border);
}

.observation-detail-list > div:last-child {
    border-bottom: 0;
}

.observation-detail-list > div > span {
    color: var(--color-text-secondary);
}

.observation-detail-list > div > strong {
    text-align: right;
    overflow-wrap: anywhere;
}

.observation-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.observation-photo-card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    background: var(--color-bg-secondary);
}

.observation-photo-button {
    display: block;
    width: 100%;
    height: 180px;
    padding: 0;
    border: 0;
    background: #000;
    cursor: zoom-in;
}

.observation-photo-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.observation-photo-file {
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.observation-photo-file i {
    font-size: 2.5rem;
}

.observation-photo-meta {
    padding: 0.8rem 0.9rem;
}

.observation-photo-modal-body {
    background: #090909;
}

.observation-photo-modal-body img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .observation-detail-list > div {
        flex-direction: column;
        gap: 0.2rem;
    }

    .observation-detail-list > div > strong {
        text-align: left;
    }
}

/* ========================================================================== */
/* v26.7 - Events centre                                                      */
/* ========================================================================== */
.ops-activity-clickable {
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.ops-activity-clickable:hover,
.ops-activity-clickable:focus {
  color: var(--color-text);
  background: rgba(103, 40, 142, 0.12);
  outline: none;
}

.event-summary-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
}

.event-summary-card span {
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.event-summary-card strong {
  font-family: 'Sora', sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-highlight);
}

.event-summary-attention strong {
  color: var(--color-warning);
}

.events-filter-card .form-label {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.event-category-tabs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.event-category-tabs .btn {
  white-space: nowrap;
}

.events-list-card .card-header {
  background: var(--color-bg-secondary);
  border-bottom-color: var(--color-border);
}

.event-list {
  display: flex;
  flex-direction: column;
}

.event-row {
  display: grid;
  grid-template-columns: 46px 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 92px;
  padding: 0.9rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.16s ease;
}

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

.event-row:hover,
.event-row:focus {
  color: var(--color-text);
  background: rgba(103, 40, 142, 0.12);
  outline: none;
}

.event-row-icon,
.event-detail-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  border-radius: 50%;
  color: var(--color-highlight);
  background: rgba(103, 40, 142, 0.18);
  font-size: 1.05rem;
}

.event-row-time {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.event-row-time strong {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
}

.event-row-time span {
  color: var(--color-text-secondary);
  font-size: 0.73rem;
}

.event-row-main {
  min-width: 0;
}

.event-category,
.event-type,
.event-severity {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
}

.event-category {
  color: var(--color-highlight);
  background: rgba(103, 40, 142, 0.15);
}

.event-type {
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.event-severity-critical,
.event-severity-high {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.12);
}

.event-severity-medium {
  color: var(--color-warning);
  background: rgba(245, 158, 11, 0.12);
}

.event-severity-low {
  color: var(--color-info);
  background: rgba(59, 130, 246, 0.12);
}

.event-title {
  font-weight: 650;
  line-height: 1.3;
}

.event-subtitle {
  margin-top: 0.15rem;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  max-width: 850px;
}

.event-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.35rem;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
}

.event-context span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.event-context .event-offline {
  color: var(--color-warning);
}

.event-row-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-text-secondary);
}

.event-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--color-border);
}

.event-status-success { color: var(--color-success); background: rgba(16, 185, 129, 0.10); }
.event-status-danger { color: var(--color-danger); background: rgba(239, 68, 68, 0.10); }
.event-status-warning { color: var(--color-warning); background: rgba(245, 158, 11, 0.10); }
.event-status-active { color: var(--color-info); background: rgba(59, 130, 246, 0.10); }
.event-status-neutral { color: var(--color-text-secondary); background: var(--color-bg-secondary); }

.event-empty {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--color-text-secondary);
  text-align: center;
  padding: 2rem;
}

.event-empty i {
  font-size: 2rem;
  color: var(--color-highlight);
}

.event-detail-description {
  white-space: pre-wrap;
  line-height: 1.6;
}

.event-detail-list {
  display: grid;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.event-detail-list > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}

.event-detail-list > div:last-child {
  border-bottom: 0;
}

.event-detail-list > div > span {
  color: var(--color-text-secondary);
}

.event-detail-list > div > strong {
  text-align: right;
  overflow-wrap: anywhere;
}

.event-detail-list small {
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-left: 0.3rem;
}

.event-related-list {
  display: flex;
  flex-direction: column;
}

.event-related-list a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.event-related-list a:last-child {
  border-bottom: 0;
}

.event-related-list a:hover {
  background: rgba(103, 40, 142, 0.12);
}

body.light-mode .event-status-success { color: #047857; }
body.light-mode .event-status-danger { color: #b91c1c; }
body.light-mode .event-status-warning { color: #b45309; }
body.light-mode .event-status-active { color: #1d4ed8; }

@media (max-width: 767.98px) {
  .event-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 0.7rem;
  }

  .event-row-time {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
  }

  .event-row-main {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .event-row-status {
    grid-column: 3;
    grid-row: 1;
  }

  .event-row-status .event-status {
    display: none;
  }

  .event-detail-list > div {
    flex-direction: column;
    gap: 0.2rem;
  }

  .event-detail-list > div > strong {
    text-align: left;
  }
}

/* ============================================================
   v26.8 Floorplans
   ============================================================ */
.floorplan-page {
  max-width: 1900px;
}

.floorplan-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.58rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  font-size: 0.73rem;
  font-weight: 700;
}

.floorplan-mode-switch .btn,
.floorplan-window-buttons .btn {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.floorplan-mode-switch .btn.active,
.floorplan-window-buttons .btn.active,
.floorplan-mode-switch .btn:hover,
.floorplan-window-buttons .btn:hover {
  background: var(--color-interactive);
  border-color: var(--color-interactive);
  color: #fff;
}

.floorplan-selector-card .card-body {
  padding: 1rem 1.1rem;
}

.floorplan-floor-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

.floorplan-add-floor-button {
  flex: 0 0 auto;
  height: 36px;
  min-height: 36px;
  padding: .42rem .72rem;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.floorplan-floor-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 32px;
  background: var(--color-border);
  opacity: .9;
}

.floorplan-floor-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}

.floorplan-floor-tabs-sortable {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .18rem;
}

.floorplan-floor-tabs-sortable .floorplan-floor-tab {
  flex: 0 0 auto;
  cursor: grab;
  user-select: none;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.floorplan-floor-tabs-sortable .floorplan-floor-tab:active {
  cursor: grabbing;
}

.floorplan-floor-tabs-dragging .floorplan-floor-tab:not(.floorplan-floor-tab-dragging) {
  transition: transform .12s ease;
}

.floorplan-floor-tab-dragging {
  opacity: .46;
  transform: scale(.97);
  box-shadow: 0 0 0 2px rgba(124,58,237,.22);
}

.floorplan-floor-drag-handle {
  color: var(--color-text-muted);
  margin-right: .05rem;
}

.floorplan-floor-tab.active .floorplan-floor-drag-handle,
.floorplan-floor-tab:hover .floorplan-floor-drag-handle {
  color: currentColor;
}

.floorplan-floor-sort-hint {
  line-height: 1.2;
  text-align: left;
}

.floorplan-flash-message {
  transition: opacity .4s ease, transform .4s ease;
}

.floorplan-flash-message-hide {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.floorplan-modal-content {
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.floorplan-modal-content .modal-header,
.floorplan-modal-content .modal-footer {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

.floorplan-modal-content .modal-body {
  background: var(--color-card);
}

.floorplan-modal-content .modal-title,
.floorplan-modal-content .form-label {
  color: var(--color-text);
}

.floorplan-modal-content .text-muted,
.floorplan-modal-content .form-text {
  color: var(--color-text-secondary) !important;
}

.floorplan-modal-content .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

body.light-mode .floorplan-modal-content .btn-close {
  filter: none;
}

.floorplan-floor-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 36px;
  padding: 0.42rem 0.72rem;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 650;
}

.floorplan-floor-tab:hover,
.floorplan-floor-tab.active {
  color: #fff;
  background: var(--color-interactive);
  border-color: var(--color-interactive);
}

.floorplan-no-image-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.2rem;
  border-radius: 50%;
  background: var(--color-warning);
}

.floorplan-stat-card .card-body {
  padding: 0.9rem 1rem;
}

.floorplan-stat-label {
  min-height: 2.1em;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 650;
}

.floorplan-stat-value {
  margin-top: 0.25rem;
  font-family: 'Sora', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
}

.floorplan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.floorplan-card-header h5 {
  color: var(--color-highlight);
}

.floorplan-map-card {
  overflow: hidden;
}

.floorplan-map-body {
  padding: 0;
  background: repeating-conic-gradient(from 45deg, rgba(148,163,184,.035) 0 25%, transparent 0 50%) 50% / 24px 24px;
}

body.light-mode .floorplan-map-body {
  background: repeating-conic-gradient(from 45deg, rgba(15,23,42,.025) 0 25%, transparent 0 50%) 50% / 24px 24px;
}

.floorplan-scroll-area {
  overflow: auto;
  max-height: calc(100vh - 250px);
  min-height: 440px;
  padding: 1rem;
}

.floorplan-zoom-toolbar {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem;
  border: 1px solid var(--color-border);
  border-radius: .55rem;
  background: var(--color-card);
}

.floorplan-zoom-value {
  min-width: 46px;
  color: var(--color-text-secondary);
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

.floorplan-scroll-area.floorplan-pan-mode {
  cursor: grab;
}

.floorplan-scroll-area.floorplan-panning {
  cursor: grabbing;
}

.floorplan-scroll-area.floorplan-pan-mode .floorplan-canvas:not(.drag-target) {
  cursor: inherit;
}

.floorplan-canvas.floorplan-zoomed-out .floorplan-pin-name {
  display: none;
}

.floorplan-canvas.floorplan-zoomed-in .floorplan-pin-name {
  max-width: 240px;
}

.floorplan-canvas {
  position: relative;
  width: 100%;
  min-width: 640px;
  line-height: 0;
  user-select: none;
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

.floorplan-canvas.is-editing {
  cursor: crosshair;
}

.floorplan-canvas.drag-target {
  outline: 2px dashed rgba(224,132,255,.45);
  outline-offset: 4px;
}

.floorplan-canvas.drag-over {
  outline-color: var(--color-highlight);
  box-shadow: 0 0 0 5px rgba(103,40,142,.16), 0 12px 30px rgba(0,0,0,.16);
}

.floorplan-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.floorplan-pin {
  --pin-color: #64748b;
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transform: translate(-18px, -30px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.floorplan-pin-core {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pin-color);
  box-shadow: 0 0 0 2px rgba(15,23,42,.25);
  transition: transform .16s ease, box-shadow .16s ease;
}

.floorplan-pin-core .bi {
  transform: rotate(45deg);
  color: #fff;
  font-size: 0.95rem;
}

.floorplan-pin-name {
  max-width: 190px;
  overflow: hidden;
  padding: 0.32rem 0.48rem;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 6px;
  background: rgba(15,23,42,.92);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .92;
}

.floorplan-pin:hover .floorplan-pin-core,
.floorplan-pin.selected .floorplan-pin-core {
  transform: rotate(-45deg) scale(1.16);
  box-shadow: 0 0 0 4px rgba(224,132,255,.25);
}

.floorplan-pin.selected {
  z-index: 20;
}

.floorplan-pin-editor {
  --pin-color: #7c3aed;
  cursor: grab;
}

.floorplan-pin-editor:active,
.floorplan-pin.dragging {
  cursor: grabbing;
  opacity: .72;
}

.floorplan-pin-recent { --pin-color: #10b981; }
.floorplan-pin-stale { --pin-color: #f59e0b; }
.floorplan-pin-observation { --pin-color: #f59e0b; }
.floorplan-pin-alert { --pin-color: #ef4444; }
.floorplan-pin-never { --pin-color: #64748b; }

.floorplan-pin-editor.floorplan-pin-recent,
.floorplan-pin-editor.floorplan-pin-stale,
.floorplan-pin-editor.floorplan-pin-observation,
.floorplan-pin-editor.floorplan-pin-alert,
.floorplan-pin-editor.floorplan-pin-never {
  --pin-color: #7c3aed;
}

.floorplan-pin-badge {
  position: absolute;
  top: -10px;
  left: 26px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 .25rem;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
}

.floorplan-pin-alert-badge { background: var(--color-danger); }
.floorplan-pin-observation-badge { background: var(--color-warning); color: #111827; }

.floorplan-pin.placement-flash .floorplan-pin-core {
  animation: floorplanPlacementFlash .65s ease;
}

@keyframes floorplanPlacementFlash {
  0%,100% { box-shadow: 0 0 0 2px rgba(15,23,42,.25); }
  50% { box-shadow: 0 0 0 10px rgba(124,58,237,.28); }
}

.floorplan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.35rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: .72rem;
}

.floorplan-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.floorplan-legend-dot {
  display: inline-block;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
}

.legend-recent { background: #10b981; }
.legend-stale, .legend-observation { background: #f59e0b; }
.legend-alert { background: #ef4444; }
.legend-never { background: #64748b; }

.floorplan-image-missing,
.floorplan-detail-placeholder,
.floorplan-side-empty {
  color: var(--color-text-secondary);
  text-align: center;
}

.floorplan-image-missing {
  display: flex;
  min-height: 480px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.floorplan-image-missing > .bi,
.floorplan-empty-icon {
  color: var(--color-highlight);
  font-size: 3rem;
}

.floorplan-checkpoint-detail {
  min-height: 360px;
}

.floorplan-detail-placeholder {
  display: flex;
  min-height: 300px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1rem;
}

.floorplan-detail-placeholder .bi {
  font-size: 2.3rem;
  color: var(--color-highlight);
}

.floorplan-detail-heading {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.floorplan-detail-status {
  display: inline-flex;
  padding: .2rem .46rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: .68rem;
  font-weight: 700;
}

.floorplan-detail-status.status-recent { color: #6ee7b7; border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.12); }
.floorplan-detail-status.status-stale,
.floorplan-detail-status.status-observation { color: #fbbf24; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.12); }
.floorplan-detail-status.status-alert { color: #fca5a5; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.12); }

.floorplan-detail-section {
  padding: .9rem 0;
  border-top: 1px solid var(--color-border);
}

.floorplan-detail-section h6 {
  margin-bottom: .65rem;
  color: var(--color-text);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.floorplan-detail-section-body {
  display: grid;
  gap: .45rem;
}

.floorplan-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .78rem;
}

.floorplan-detail-row span { color: var(--color-text-secondary); }
.floorplan-detail-row strong { text-align: right; color: var(--color-text); }

.floorplan-detail-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--color-highlight);
  font-size: .78rem;
  font-weight: 650;
  text-decoration: none;
}

.floorplan-detail-link:hover { text-decoration: underline; color: var(--color-highlight); }

.floorplan-checkpoint-source-list {
  max-height: 390px;
  overflow-y: auto;
}

.floorplan-checkpoint-source {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .72rem .75rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: grab;
}

.floorplan-checkpoint-source:hover {
  background: rgba(103,40,142,.14);
}

.floorplan-checkpoint-source.dragging {
  opacity: .55;
  cursor: grabbing;
}

.floorplan-checkpoint-source strong,
.floorplan-checkpoint-source small {
  display: block;
}

.floorplan-checkpoint-source strong { font-size: .8rem; }
.floorplan-checkpoint-source small { color: var(--color-text-secondary); font-size: .68rem; margin-top: .15rem; }
.floorplan-source-grip { color: var(--color-text-secondary); }

.floorplan-side-empty {
  padding: 1.3rem .9rem;
  font-size: .78rem;
}

.floorplan-editor-inspector {
  display: none;
  width: 100%;
  padding: .85rem .9rem;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-card);
  box-shadow: none;
}

.floorplan-editor-inspector.show {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: stretch;
}

.floorplan-editor-inspector::before {
  content: "Selected checkpoint";
  color: var(--color-highlight);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .05rem;
}

.floorplan-editor-inspector strong { color: var(--color-text); font-size: .85rem; }
.floorplan-editor-inspector span { color: var(--color-text-secondary); font-size: .7rem; }
.floorplan-editor-inspector button {
  align-self: flex-start;
  margin-top: .35rem;
}

.floorplan-editor-toast {
  position: fixed;
  left: 50%;
  bottom: 1.35rem;
  z-index: 1090;
  transform: translate(-50%, 18px);
  padding: .65rem .9rem;
  border: 1px solid rgba(16,185,129,.35);
  border-radius: 8px;
  background: rgba(6,78,59,.96);
  color: #fff;
  font-size: .78rem;
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.floorplan-editor-toast.error {
  border-color: rgba(239,68,68,.45);
  background: rgba(127,29,29,.97);
}

.floorplan-editor-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.floorplan-live-main-row {
  align-items: flex-start;
}

.floorplan-coverage-card .card-body {
  padding: .9rem 1rem 1rem;
}

.floorplan-coverage-presets .btn {
  padding-left: .38rem;
  padding-right: .38rem;
  white-space: nowrap;
  font-size: .69rem;
}

.floorplan-coverage-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
  gap: .45rem;
  align-items: end;
}

.floorplan-coverage-range .form-control {
  width: 100%;
  min-width: 0;
  padding-left: .45rem;
  padding-right: .35rem;
  font-size: .72rem;
}

.floorplan-coverage-range .form-control:disabled {
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  opacity: .78;
}

.floorplan-coverage-search {
  display: flex;
  align-items: end;
}

.floorplan-coverage-search .btn {
  width: 34px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.floorplan-live-totals {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.floorplan-side-stat-card .card-body {
  padding: 1rem 1.05rem;
}

.floorplan-side-stat-card .floorplan-stat-label {
  line-height: 1.25;
  margin-bottom: .45rem;
}

.floorplan-side-stat-card .floorplan-stat-value {
  font-size: 1.9rem;
  line-height: 1;
}

@media (min-width: 1400px) {
  .floorplan-live-totals {
    position: sticky;
    top: 1rem;
  }
}

@media (max-width: 1399.98px) {
  .floorplan-live-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
  }
}

@media (max-width: 767.98px) {
  .floorplan-live-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1399.98px) {
  .floorplan-coverage-card {
    margin-top: 0;
  }

  .floorplan-coverage-presets {
    width: auto !important;
  }

  .floorplan-coverage-range {
    max-width: 640px;
  }
}

@media (max-width: 575.98px) {
  .floorplan-coverage-range {
    grid-template-columns: 1fr 1fr;
  }

  .floorplan-coverage-search {
    grid-column: 1 / -1;
  }

  .floorplan-coverage-search .btn {
    width: 100%;
  }
}

body.light-mode .floorplan-pin-name {
  background: rgba(31,41,55,.93);
}

body.light-mode .floorplan-detail-status.status-recent { color: #047857; }
body.light-mode .floorplan-detail-status.status-stale,
body.light-mode .floorplan-detail-status.status-observation { color: #b45309; }
body.light-mode .floorplan-detail-status.status-alert { color: #b91c1c; }

@media (max-width: 991.98px) {
  .floorplan-scroll-area {
    max-height: none;
    min-height: 320px;
    padding: .6rem;
  }

  .floorplan-canvas {
    min-width: 560px;
  }

  .floorplan-pin-name {
    display: none;
  }

  .floorplan-pin:hover .floorplan-pin-name,
  .floorplan-pin.selected .floorplan-pin-name {
    display: inline-block;
  }
}

/* Mission: Patrol v26.9 - Site Plans */
.siteplan-page {
  --siteplan-recent: #10b981;
  --siteplan-stale: #f59e0b;
  --siteplan-observation: #f59e0b;
  --siteplan-alert: #ef4444;
  --siteplan-never: #64748b;
}

.siteplan-source-switch {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.siteplan-source-switch .btn.active {
  background: var(--color-interactive);
  border-color: var(--color-highlight);
  color: #fff;
}

.siteplan-main-row {
  align-items: flex-start;
}

.siteplan-live-totals {
  gap: .8rem;
}

.siteplan-live-totals .floorplan-side-stat-card .card-body {
  padding: .85rem .9rem;
}

.siteplan-live-totals .floorplan-stat-value {
  font-size: 1.72rem;
}

.siteplan-palette-card,
.siteplan-settings-card,
.siteplan-detail-card,
.siteplan-map-card {
  overflow: hidden;
}

.siteplan-palette-section {
  padding: .8rem;
}

.siteplan-palette-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
  color: var(--color-text-secondary);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.siteplan-source-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  max-height: 330px;
  overflow-y: auto;
}

.siteplan-source-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .6rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: .6rem;
  background: var(--color-bg-secondary);
  color: var(--color-text);
  cursor: grab;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.siteplan-source-item:hover,
.siteplan-source-item.selected {
  border-color: var(--color-highlight);
  background: rgba(103,40,142,.14);
}

.siteplan-source-item:active,
.siteplan-source-item.dragging {
  cursor: grabbing;
  opacity: .72;
}

.siteplan-source-item strong,
.siteplan-source-item small {
  display: block;
}

.siteplan-source-item strong {
  color: var(--color-text);
  font-size: .78rem;
}

.siteplan-source-item small {
  margin-top: .08rem;
  color: var(--color-text-secondary);
  font-size: .66rem;
}

.siteplan-source-grip {
  color: var(--color-text-secondary);
}

.siteplan-map-body {
  position: relative;
  min-height: 620px;
}

.siteplan-image-viewport {
  max-height: calc(100vh - 250px);
  min-height: 620px;
}

.siteplan-image-canvas {
  min-width: 720px;
}

.siteplan-image-marker {
  --site-marker-color: var(--siteplan-never);
  position: absolute;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transform: translate(-22px, -22px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.siteplan-marker-building {
  transform: translate(-24px, -24px);
}

.siteplan-image-marker-core,
.siteplan-osm-marker-core {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 3px solid #fff;
  border-radius: 12px;
  background: var(--site-marker-color);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(15,23,42,.22);
}

.siteplan-marker-checkpoint .siteplan-image-marker-core,
.siteplan-marker-checkpoint .siteplan-osm-marker-core {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.siteplan-marker-checkpoint .siteplan-image-marker-core .bi,
.siteplan-marker-checkpoint .siteplan-osm-marker-core .bi {
  transform: rotate(45deg);
}

.siteplan-image-marker-label,
.siteplan-osm-label {
  max-width: 190px;
  overflow: hidden;
  padding: .32rem .48rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  background: rgba(15,23,42,.92);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.siteplan-image-marker.dragging {
  opacity: .7;
}

.siteplan-image-marker:hover .siteplan-image-marker-core,
.siteplan-image-marker:focus-visible .siteplan-image-marker-core {
  box-shadow: 0 0 0 5px rgba(224,132,255,.24);
}

.siteplan-image-canvas.siteplan-zoomed-out .siteplan-image-marker-label {
  display: none;
}

.siteplan-status-recent { --site-marker-color: var(--siteplan-recent); }
.siteplan-status-stale { --site-marker-color: var(--siteplan-stale); }
.siteplan-status-observation { --site-marker-color: var(--siteplan-observation); }
.siteplan-status-alert { --site-marker-color: var(--siteplan-alert); }
.siteplan-status-never { --site-marker-color: var(--siteplan-never); }

.siteplan-marker-badge {
  position: absolute;
  z-index: 15;
  top: -10px;
  left: 30px;
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 .28rem;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
}

.siteplan-marker-badge-alert { background: var(--color-danger); }
.siteplan-marker-badge-observation { background: var(--color-warning); color: #111827; }

.siteplan-osm-map {
  width: 100%;
  height: min(72vh, 760px);
  min-height: 620px;
  background: #d9e2e8;
}

.siteplan-leaflet-div-icon {
  border: 0 !important;
  background: transparent !important;
}

.siteplan-osm-marker {
  --site-marker-color: var(--siteplan-never);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: max-content;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.32));
}

.siteplan-osm-marker .siteplan-marker-badge {
  top: -8px;
  left: 31px;
}

.siteplan-osm-zoom-low .siteplan-osm-label {
  display: none;
}

.siteplan-osm-zoom-low .siteplan-marker-building .siteplan-osm-marker-core {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px;
}

.siteplan-osm-zoom-high .siteplan-osm-label {
  max-width: 230px;
}

.siteplan-osm-map .leaflet-control-zoom a,
.siteplan-osm-map .leaflet-control-attribution {
  color: #1f2937 !important;
}

.siteplan-osm-map .leaflet-control-attribution a {
  color: #5b21b6 !important;
}

.siteplan-map-error {
  display: flex;
  min-height: 620px;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--color-danger);
  text-align: center;
}

.siteplan-detail-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.siteplan-detail-icon {
  --site-marker-color: var(--siteplan-never);
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--site-marker-color);
  color: #fff;
}

.siteplan-detail-status {
  color: var(--color-text-secondary);
}

.siteplan-status-text-recent { color: var(--color-success); }
.siteplan-status-text-stale,
.siteplan-status-text-observation { color: var(--color-warning); }
.siteplan-status-text-alert { color: var(--color-danger); }

.siteplan-detail-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .55rem;
  margin-bottom: 1rem;
}

.siteplan-detail-metric {
  padding: .65rem;
  border: 1px solid var(--color-border);
  border-radius: .55rem;
  background: var(--color-bg-secondary);
}

.siteplan-detail-metric strong,
.siteplan-detail-metric span {
  display: block;
}

.siteplan-detail-metric strong {
  color: var(--color-text);
  font-size: 1.12rem;
}

.siteplan-detail-metric span {
  margin-top: .12rem;
  color: var(--color-text-secondary);
  font-size: .66rem;
}

.siteplan-detail-activity {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.siteplan-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--color-border);
  font-size: .72rem;
}

.siteplan-detail-row span {
  color: var(--color-text-secondary);
}

.siteplan-detail-row strong {
  color: var(--color-text);
  text-align: right;
}

@media (max-width: 1399.98px) {
  .siteplan-map-body,
  .siteplan-image-viewport,
  .siteplan-osm-map {
    min-height: 520px;
  }

  .siteplan-osm-map {
    height: 62vh;
  }
}

@media (max-width: 767.98px) {
  .siteplan-map-body,
  .siteplan-image-viewport,
  .siteplan-osm-map {
    min-height: 420px;
  }

  .siteplan-osm-map {
    height: 58vh;
  }

  .siteplan-image-marker-label {
    display: none;
  }
}

body:not(.light-mode) .siteplan-osm-map .leaflet-control-zoom a {
  background: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-text) !important;
}

body:not(.light-mode) .siteplan-osm-map .leaflet-control-attribution {
  background: rgba(45,55,72,.92);
  color: var(--color-text-secondary) !important;
}

body:not(.light-mode) .siteplan-osm-map .leaflet-control-attribution a {
  color: var(--color-highlight) !important;
}

/* Mission: Patrol v26.9.1 - Site Plan search + live map navigator */
.siteplan-navigator-card {
  overflow: hidden;
}

.siteplan-navigator-group + .siteplan-navigator-group {
  border-top: 1px solid var(--color-border);
}

.siteplan-navigator-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .75rem .85rem;
  color: var(--color-text);
  cursor: pointer;
  font-size: .74rem;
  font-weight: 700;
  list-style: none;
  user-select: none;
}

.siteplan-navigator-group > summary::-webkit-details-marker {
  display: none;
}

.siteplan-navigator-group > summary::after {
  content: "\F282";
  margin-left: auto;
  color: var(--color-text-secondary);
  font-family: "bootstrap-icons";
  font-size: .7rem;
  transition: transform .15s ease;
}

.siteplan-navigator-group[open] > summary::after {
  transform: rotate(180deg);
}

.siteplan-navigator-group > summary .badge {
  margin-left: .25rem;
}

.siteplan-navigator-list {
  display: flex;
  max-height: 280px;
  flex-direction: column;
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
}

.siteplan-navigator-item {
  display: flex;
  align-items: center;
  gap: .42rem;
  width: 100%;
  padding: .58rem .7rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}

.siteplan-navigator-item:last-child {
  border-bottom: 0;
}

.siteplan-navigator-item:hover,
.siteplan-navigator-item.active {
  background: rgba(103,40,142,.13);
}

.siteplan-navigator-item.active {
  box-shadow: inset 3px 0 0 var(--color-highlight);
}

.siteplan-navigator-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.siteplan-navigator-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  border-radius: .35rem;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: .7rem;
}

.siteplan-navigator-status {
  --site-marker-color: var(--siteplan-never);
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--site-marker-color);
  box-shadow: 0 0 0 2px rgba(255,255,255,.12);
}

.siteplan-navigator-empty {
  padding: .85rem;
  color: var(--color-text-secondary);
  font-size: .7rem;
}

.siteplan-osm-map-wrap {
  position: relative;
  min-height: 620px;
}

.siteplan-location-search {
  position: absolute;
  z-index: 1000;
  top: 12px;
  right: 12px;
  width: min(390px, calc(100% - 72px));
  padding: .65rem;
  border: 1px solid var(--color-border);
  border-radius: .7rem;
  background: var(--color-card);
  color: var(--color-text);
  box-shadow: 0 8px 24px rgba(15,23,42,.25);
}

.siteplan-location-search .form-control {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

.siteplan-location-search .form-control::placeholder {
  color: var(--color-text-secondary);
}

.siteplan-location-search-results {
  display: none;
  max-height: 280px;
  margin-top: .5rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: .55rem;
  background: var(--color-card);
}

.siteplan-location-search-results.show {
  display: block;
}

.siteplan-location-search-result {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
  padding: .62rem .68rem;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  font-size: .7rem;
  line-height: 1.35;
}

.siteplan-location-search-result:last-child {
  border-bottom: 0;
}

.siteplan-location-search-result:hover,
.siteplan-location-search-result:focus-visible {
  background: rgba(103,40,142,.13);
}

.siteplan-location-search-result .bi {
  margin-top: .12rem;
  color: var(--color-highlight);
}

.siteplan-location-search-message {
  padding: .7rem;
  color: var(--color-text-secondary);
  font-size: .7rem;
}

.siteplan-location-search-message.error {
  color: var(--color-danger);
}

.siteplan-location-search-credit {
  margin-top: .42rem;
  color: var(--color-text-secondary);
  font-size: .6rem;
  text-align: right;
}

/* Mission: Patrol v26.16.14 - Site Plan Live Search + Quick Search */
.siteplan-location-search-live {
  width: min(620px, calc(100% - 72px));
}

.siteplan-map-search-controls {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}

.siteplan-location-search-form {
  min-width: 0;
  flex: 1 1 auto;
}

.siteplan-quick-search {
  position: relative;
  flex: 0 0 auto;
}

.siteplan-quick-search > summary {
  list-style: none;
}

.siteplan-quick-search > summary::-webkit-details-marker {
  display: none;
}

.siteplan-quick-search-toggle {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  gap: .42rem;
  padding: .36rem .62rem;
  border: 1px solid var(--color-border);
  border-radius: .42rem;
  background: var(--color-bg-secondary);
  color: var(--color-text);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
}

.siteplan-quick-search-toggle:hover,
.siteplan-quick-search-toggle:focus-visible,
.siteplan-quick-search[open] > .siteplan-quick-search-toggle {
  border-color: var(--color-highlight);
  background: rgba(103,40,142,.13);
  color: var(--color-highlight);
}

.siteplan-quick-search-chevron {
  font-size: .62rem;
  transition: transform .15s ease;
}

.siteplan-quick-search[open] .siteplan-quick-search-chevron {
  transform: rotate(180deg);
}

.siteplan-quick-search-menu {
  position: absolute;
  z-index: 1050;
  top: calc(100% + .45rem);
  right: 0;
  width: min(330px, calc(100vw - 48px));
  max-height: 390px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: .62rem;
  background: var(--color-card);
  color: var(--color-text);
  box-shadow: 0 10px 28px rgba(15,23,42,.28);
}

.siteplan-quick-search-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .66rem .72rem;
  color: var(--color-text-secondary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.siteplan-quick-search-heading-divided {
  border-top: 1px solid var(--color-border);
}

.siteplan-quick-search-item {
  display: flex;
  align-items: center;
  gap: .42rem;
  width: 100%;
  padding: .58rem .7rem;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}

.siteplan-quick-search-item:hover,
.siteplan-quick-search-item:focus-visible,
.siteplan-quick-search-item.active {
  background: rgba(103,40,142,.13);
}

.siteplan-quick-search-item.active {
  box-shadow: inset 3px 0 0 var(--color-highlight);
}

.siteplan-quick-search-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  color: var(--color-highlight);
}

.siteplan-quick-search-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.siteplan-quick-search-empty {
  padding: .6rem .72rem .72rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: .68rem;
}

.siteplan-image-quick-search-host {
  position: absolute;
  z-index: 40;
  top: 12px;
  right: 12px;
}

.siteplan-image-quick-search-host .siteplan-quick-search-toggle {
  min-height: 34px;
  border-color: var(--color-border);
  background: var(--color-card);
  box-shadow: 0 6px 18px rgba(15,23,42,.2);
}

@media (max-width: 575.98px) {
  .siteplan-location-search-live .siteplan-map-search-controls {
    flex-direction: column;
  }

  .siteplan-location-search-live .siteplan-quick-search,
  .siteplan-location-search-live .siteplan-quick-search-toggle {
    width: 100%;
  }

  .siteplan-location-search-live .siteplan-quick-search-toggle {
    justify-content: space-between;
  }
}

.siteplan-jump-highlight .siteplan-image-marker-core,
.siteplan-jump-highlight .siteplan-osm-marker-core,
.leaflet-marker-icon.siteplan-jump-highlight .siteplan-osm-marker-core {
  animation: siteplan-jump-pulse 1.8s ease-out;
}

@keyframes siteplan-jump-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224,132,255,.8); }
  35% { box-shadow: 0 0 0 12px rgba(224,132,255,.28); }
  100% { box-shadow: 0 0 0 22px rgba(224,132,255,0); }
}

@media (max-width: 1399.98px) {
  .siteplan-osm-map-wrap {
    min-height: 520px;
  }
}

@media (max-width: 767.98px) {
  .siteplan-osm-map-wrap {
    min-height: 420px;
  }

  .siteplan-location-search {
    top: 10px;
    right: 10px;
    width: calc(100% - 64px);
  }
}

/* ========================================================================== */
/* v26.9.2 - Sidebar information architecture                                */
/* ========================================================================== */

.mission-sidebar-nav .nav-section {
  margin: .15rem .15rem .45rem;
}

.mission-sidebar-nav .nav-section-separated {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.mission-sidebar-nav .nav-section small {
  display: block;
  padding: 0 .6rem;
  color: var(--color-text-secondary);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
}

.mission-sidebar-nav .nav-link {
  min-height: 42px;
  margin-bottom: .18rem;
  padding: .58rem .7rem;
  border-radius: .45rem;
}

.mission-sidebar-nav .nav-branch {
  position: relative;
}

.mission-sidebar-nav .nav-sub-link {
  min-height: 38px;
  margin-left: 2rem;
  padding-top: .48rem;
  padding-bottom: .48rem;
  padding-left: .78rem;
  font-size: .91rem;
}

.mission-sidebar-nav .nav-sub-link::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
  opacity: .9;
}

.mission-sidebar-nav .nav-sub-link .bi {
  width: 1rem;
  flex-basis: 1rem;
  font-size: .88rem;
}

.mission-sidebar-nav .nav-parent-link.context-active {
  color: var(--color-text);
  font-weight: 600;
}

.mission-sidebar-nav .nav-parent-link.context-active::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--color-highlight);
  box-shadow: 0 0 0 3px rgba(224,132,255,.12);
}

body.light-mode .mission-sidebar-nav .nav-parent-link.context-active {
  color: #5b21b6;
}

body.light-mode .mission-sidebar-nav .nav-parent-link.context-active::after {
  background: #7C3AED;
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

.mission-sidebar-nav .nav-sub-link.active {
  background-color: var(--color-interactive);
  color: var(--color-highlight);
}

body.light-mode .mission-sidebar-nav .nav-sub-link.active {
  background-color: #7C3AED;
  color: #ffffff;
}

@media (max-height: 820px) {
  .mission-sidebar-nav .nav-section-separated {
    margin-top: .85rem;
    padding-top: .75rem;
  }

  .mission-sidebar-nav .nav-link {
    min-height: 38px;
    padding-top: .48rem;
    padding-bottom: .48rem;
  }

  .mission-sidebar-nav .nav-sub-link {
    min-height: 34px;
    padding-top: .4rem;
    padding-bottom: .4rem;
  }
}

/* ========================================================================== */
/* v26.9.4 - Independent sidebar scrolling                                    */
/* ========================================================================== */

.mission-app-shell {
  min-height: calc(100vh - 60px);
}

/*
 * Desktop: keep the application shell inside the viewport and give the
 * navigation and page content their own independent vertical scroll areas.
 */
@media (min-width: 992px) {
  .mission-app-shell {
    height: calc(100vh - 60px);
    min-height: 0;
    overflow: hidden;
  }

  .mission-sidebar {
    width: 250px;
    height: 100%;
    min-height: 0;
    flex: 0 0 250px;
    padding: 20px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }

  .mission-main-content {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .mission-sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  .mission-sidebar::-webkit-scrollbar {
    width: 8px;
  }

  .mission-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .mission-sidebar::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--color-border);
    background-clip: padding-box;
  }

  .mission-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
    background-clip: padding-box;
  }
}

/*
 * Tablet/mobile: retain normal document scrolling. This avoids creating nested
 * scroll areas when the navigation and content are naturally stacked.
 */
@media (max-width: 991.98px) {
  .mission-app-shell {
    min-height: calc(100vh - 60px);
    overflow: visible;
  }

  .mission-sidebar {
    width: 250px;
    padding: 20px 0;
    overflow: visible;
  }

  .mission-main-content {
    min-width: 0;
    overflow: visible;
  }
}

/* ========================================================================== */
/* v26.9.5 - Stable navigation width                                          */
/* ========================================================================== */

:root {
  --mission-sidebar-width: 250px;
}

/*
 * Keep the navigation rail physically identical in width on every company
 * screen. width/min-width/max-width plus a zero-grow/zero-shrink flex basis
 * prevents page content, labels, or scrollbar state from changing the rail.
 */
.mission-sidebar {
  box-sizing: border-box;
  width: var(--mission-sidebar-width);
  min-width: var(--mission-sidebar-width);
  max-width: var(--mission-sidebar-width);
  flex: 0 0 var(--mission-sidebar-width);
}

/*
 * Always reserve the desktop scrollbar channel. This avoids the contents
 * shifting sideways between short and long navigation states.
 */
@media (min-width: 992px) {
  .mission-sidebar {
    width: var(--mission-sidebar-width);
    min-width: var(--mission-sidebar-width);
    max-width: var(--mission-sidebar-width);
    flex-basis: var(--mission-sidebar-width);
    overflow-y: scroll;
    scrollbar-gutter: stable;
  }

  .mission-main-content {
    width: calc(100% - var(--mission-sidebar-width));
    min-width: 0;
  }
}

@media (max-width: 991.98px) {
  .mission-sidebar {
    width: var(--mission-sidebar-width);
    min-width: var(--mission-sidebar-width);
    max-width: var(--mission-sidebar-width);
    flex-basis: var(--mission-sidebar-width);
  }
}

/* ========================================================================== */
/* v26.9.7 - Native date/time picker theming                                  */
/* ========================================================================== */

/*
 * Explicitly set the browser-native control colour scheme. This lets Chrome,
 * Edge and other supporting browsers draw the clock/calendar picker glyphs
 * with enough contrast for the active Mission: Patrol theme.
 */
body:not(.light-mode) input[type="time"],
body:not(.light-mode) input[type="date"],
body:not(.light-mode) input[type="datetime-local"],
body:not(.light-mode) input[type="month"],
body:not(.light-mode) input[type="week"] {
  color-scheme: dark;
}

body.light-mode input[type="time"],
body.light-mode input[type="date"],
body.light-mode input[type="datetime-local"],
body.light-mode input[type="month"],
body.light-mode input[type="week"] {
  color-scheme: light;
}

/*
 * Keep the native picker affordance clearly visible without replacing it.
 * The browser still owns the picker and its built-in tooltip/behaviour.
 */
.schedule-time-input::-webkit-calendar-picker-indicator {
  opacity: .9;
  cursor: pointer;
}

body.light-mode .schedule-time-input::-webkit-calendar-picker-indicator {
  opacity: .72;
}

/* ========================================================================== */
/* v26.9.8 - Theme-aware table badges                                         */
/* ========================================================================== */

/*
 * Count badges used by Guards and Routes. These replace Bootstrap's fixed
 * text-bg-secondary badges so the values remain part of the active theme.
 */
.mission-count-badge {
  min-width: 2rem;
  padding: .38rem .55rem;
  border: 1px solid rgba(224, 132, 255, .38);
  background: rgba(103, 40, 142, .34);
  color: #f3c5ff;
  font-weight: 700;
}

body.light-mode .mission-count-badge {
  border-color: rgba(124, 58, 237, .30);
  background: rgba(124, 58, 237, .11);
  color: #5b21b6;
}

/* Schedule assignment mode badges retain semantic distinction while adapting
 * their surfaces/text to dark and light themes. */
.mission-assignment-badge {
  padding: .38rem .58rem;
  border: 1px solid transparent;
  font-weight: 650;
}

.mission-assignment-any {
  border-color: rgba(59, 130, 246, .42);
  background: rgba(59, 130, 246, .20);
  color: #bfdbfe;
}

.mission-assignment-shared {
  border-color: rgba(224, 132, 255, .42);
  background: rgba(103, 40, 142, .36);
  color: #f3c5ff;
}

.mission-assignment-each {
  border-color: rgba(229, 231, 235, .24);
  background: rgba(229, 231, 235, .10);
  color: var(--color-text-secondary);
}

body.light-mode .mission-assignment-any {
  border-color: rgba(37, 99, 235, .28);
  background: rgba(59, 130, 246, .11);
  color: #1d4ed8;
}

body.light-mode .mission-assignment-shared {
  border-color: rgba(124, 58, 237, .30);
  background: rgba(124, 58, 237, .11);
  color: #5b21b6;
}

body.light-mode .mission-assignment-each {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

/* Guard chips on Schedules are links, so give them a themed focus/hover state
 * as well as a theme-aware resting surface. */
.mission-guard-badge {
  padding: .38rem .55rem;
  border: 1px solid rgba(224, 132, 255, .30);
  background: rgba(103, 40, 142, .26);
  color: #f3c5ff !important;
  font-weight: 650;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mission-guard-badge:hover,
.mission-guard-badge:focus-visible {
  border-color: #E084FF;
  background: rgba(103, 40, 142, .55);
  color: #ffffff !important;
}

body.light-mode .mission-guard-badge {
  border-color: rgba(124, 58, 237, .28);
  background: rgba(124, 58, 237, .10);
  color: #5b21b6 !important;
}

body.light-mode .mission-guard-badge:hover,
body.light-mode .mission-guard-badge:focus-visible {
  border-color: #7C3AED;
  background: #7C3AED;
  color: #ffffff !important;
}

/* Keep all of the themed chips readable when the whole row enters the existing
 * purple table-hover state. */
.table tbody tr:hover .mission-count-badge,
.table tbody tr:hover .mission-assignment-badge,
.table tbody tr:hover .mission-guard-badge {
  border-color: rgba(255, 255, 255, .58);
  background: rgba(255, 255, 255, .16);
  color: #ffffff !important;
}

body.light-mode .table tbody tr:hover .mission-count-badge,
body.light-mode .table tbody tr:hover .mission-assignment-badge,
body.light-mode .table tbody tr:hover .mission-guard-badge {
  border-color: rgba(91, 33, 182, .34);
  background: rgba(255, 255, 255, .54);
  color: #3F054F !important;
}

/* ========================================================================== */
/* v26.10.0 - Mission: Patrol Theme System v2                                 */
/* ========================================================================== */

/*
 * All named themes define the same semantic token set. Existing --color-*
 * variables remain supported, while the --theme-* tokens provide consistent
 * surfaces, foregrounds, focus rings and semantic states.
 */

html[data-theme="mission"] {
  /* Branded default derived from the web login screen. */
  --color-primary: #312E81;
  --color-secondary: #0B1429;
  --color-accent: #8B5CF6;
  --color-interactive: #7C3AED;
  --color-highlight: #E9D5FF;
  --color-text: #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-bg: #07101F;
  --color-bg-secondary: #0B1429;
  --color-border: #443A66;
  --color-card: #0F172A;
  --color-danger: #FCA5A5;
  --color-success: #6EE7B7;
  --color-warning: #FBBF24;
  --color-info: #93C5FD;

  --theme-navbar-bg: #030712;
  --theme-navbar-text: #F8FAFC;
  --theme-navbar-brand: #E9D5FF;
  --theme-heading: #E9D5FF;
  --theme-on-interactive: #FFFFFF;
  --theme-control-bg: #0B1224;
  --theme-control-text: #F8FAFC;
  --theme-control-muted: #94A3B8;
  --theme-disabled-bg: #1C2540;
  --theme-disabled-text: #94A3B8;
  --theme-focus-ring: rgba(139,92,246,.32);
  --theme-soft-accent: rgba(124,58,237,.22);
  --theme-soft-accent-border: rgba(196,181,253,.44);
  --theme-soft-accent-text: #E9D5FF;
  --theme-hover-bg: rgba(124,58,237,.20);
  --theme-active-bg: #6D28D9;
  --theme-active-text: #FFFFFF;
  --theme-table-hover-bg: #272154;
  --theme-table-hover-text: #FFFFFF;
  --theme-overlay: rgba(3,7,18,.76);
  --theme-shadow: rgba(0,0,0,.38);
  --theme-native-scheme: dark;

  --theme-success-bg: #047857;
  --theme-success-on: #FFFFFF;
  --theme-success-text: #6EE7B7;
  --theme-success-soft: rgba(4,120,87,.24);
  --theme-warning-bg: #B45309;
  --theme-warning-on: #FFFFFF;
  --theme-warning-text: #FBBF24;
  --theme-warning-soft: rgba(180,83,9,.24);
  --theme-danger-bg: #B91C1C;
  --theme-danger-on: #FFFFFF;
  --theme-danger-text: #FCA5A5;
  --theme-danger-soft: rgba(185,28,28,.24);
  --theme-info-bg: #1D4ED8;
  --theme-info-on: #FFFFFF;
  --theme-info-text: #93C5FD;
  --theme-info-soft: rgba(29,78,216,.24);
  --theme-table-head-bg: #312E81;
  --theme-table-head-text: #FFFFFF;
  --theme-table-head-border: #5147A2;
  --theme-table-stripe-bg: rgba(196,181,253,.035);
}

html[data-theme="light"] {
  --color-primary: #F9FAFB;
  --color-secondary: #EDE9FE;
  --color-accent: #0F766E;
  --color-interactive: #6D28D9;
  --color-highlight: #6D28D9;
  --color-text: #1F2937;
  --color-text-secondary: #4B5563;
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F3F4F6;
  --color-border: #D1D5DB;
  --color-card: #FFFFFF;
  --color-danger: #B91C1C;
  --color-success: #047857;
  --color-warning: #92400E;
  --color-info: #1D4ED8;

  --theme-navbar-bg: #6D28D9;
  --theme-navbar-text: #FFFFFF;
  --theme-navbar-brand: #FFFFFF;
  --theme-heading: #6D28D9;
  --theme-on-interactive: #FFFFFF;
  --theme-control-bg: #FFFFFF;
  --theme-control-text: #1F2937;
  --theme-control-muted: #6B7280;
  --theme-disabled-bg: #E5E7EB;
  --theme-disabled-text: #6B7280;
  --theme-focus-ring: rgba(109,40,217,.28);
  --theme-soft-accent: #F1EAFE;
  --theme-soft-accent-border: #C4B5FD;
  --theme-soft-accent-text: #5B21B6;
  --theme-hover-bg: #EEE7FB;
  --theme-active-bg: #6D28D9;
  --theme-active-text: #FFFFFF;
  --theme-table-hover-bg: #EEE7FB;
  --theme-table-hover-text: #3F054F;
  --theme-overlay: rgba(15,23,42,.45);
  --theme-shadow: rgba(15,23,42,.15);
  --theme-native-scheme: light;

  --theme-success-bg: #047857;
  --theme-success-on: #FFFFFF;
  --theme-success-text: #047857;
  --theme-success-soft: #D1FAE5;
  --theme-warning-bg: #B45309;
  --theme-warning-on: #FFFFFF;
  --theme-warning-text: #92400E;
  --theme-warning-soft: #FEF3C7;
  --theme-danger-bg: #B91C1C;
  --theme-danger-on: #FFFFFF;
  --theme-danger-text: #B91C1C;
  --theme-danger-soft: #FEE2E2;
  --theme-info-bg: #1D4ED8;
  --theme-info-on: #FFFFFF;
  --theme-info-text: #1D4ED8;
  --theme-info-soft: #DBEAFE;
  --theme-table-head-bg: #6D28D9;
  --theme-table-head-text: #FFFFFF;
  --theme-table-head-border: #6D28D9;
  --theme-table-stripe-bg: #F7F4FC;
}

html[data-theme="dark"] {
  --color-primary: #272462;
  --color-secondary: #3F054F;
  --color-accent: #156070;
  --color-interactive: #7C3AED;
  --color-highlight: #E9B7FF;
  --color-text: #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-bg: #0F172A;
  --color-bg-secondary: #1A1F36;
  --color-border: #475569;
  --color-card: #1E293B;
  --color-danger: #FCA5A5;
  --color-success: #6EE7B7;
  --color-warning: #FBBF24;
  --color-info: #93C5FD;

  --theme-navbar-bg: #3F054F;
  --theme-navbar-text: #F8FAFC;
  --theme-navbar-brand: #E9B7FF;
  --theme-heading: #E9B7FF;
  --theme-on-interactive: #FFFFFF;
  --theme-control-bg: #111827;
  --theme-control-text: #F8FAFC;
  --theme-control-muted: #94A3B8;
  --theme-disabled-bg: #273244;
  --theme-disabled-text: #94A3B8;
  --theme-focus-ring: rgba(224,132,255,.30);
  --theme-soft-accent: rgba(124,58,237,.24);
  --theme-soft-accent-border: rgba(224,132,255,.48);
  --theme-soft-accent-text: #F3C5FF;
  --theme-hover-bg: rgba(124,58,237,.24);
  --theme-active-bg: #7C3AED;
  --theme-active-text: #FFFFFF;
  --theme-table-hover-bg: #4C1D6F;
  --theme-table-hover-text: #FFFFFF;
  --theme-overlay: rgba(2,6,23,.72);
  --theme-shadow: rgba(0,0,0,.35);
  --theme-native-scheme: dark;

  --theme-success-bg: #047857;
  --theme-success-on: #FFFFFF;
  --theme-success-text: #6EE7B7;
  --theme-success-soft: rgba(4,120,87,.24);
  --theme-warning-bg: #B45309;
  --theme-warning-on: #FFFFFF;
  --theme-warning-text: #FBBF24;
  --theme-warning-soft: rgba(180,83,9,.24);
  --theme-danger-bg: #B91C1C;
  --theme-danger-on: #FFFFFF;
  --theme-danger-text: #FCA5A5;
  --theme-danger-soft: rgba(185,28,28,.24);
  --theme-info-bg: #1D4ED8;
  --theme-info-on: #FFFFFF;
  --theme-info-text: #93C5FD;
  --theme-info-soft: rgba(29,78,216,.24);
  --theme-table-head-bg: #3F054F;
  --theme-table-head-text: #FFFFFF;
  --theme-table-head-border: #6B267B;
  --theme-table-stripe-bg: rgba(255,255,255,.025);
}

html[data-theme="midnight"] {
  --color-primary: #0B2545;
  --color-secondary: #102A43;
  --color-accent: #0E7490;
  --color-interactive: #0369A1;
  --color-highlight: #7DD3FC;
  --color-text: #F8FAFC;
  --color-text-secondary: #C7D2E0;
  --color-bg: #07111F;
  --color-bg-secondary: #0B1728;
  --color-border: #36506A;
  --color-card: #0F1C2E;
  --color-danger: #FDA4AF;
  --color-success: #6EE7B7;
  --color-warning: #FCD34D;
  --color-info: #7DD3FC;

  --theme-navbar-bg: #0B2545;
  --theme-navbar-text: #FFFFFF;
  --theme-navbar-brand: #BAE6FD;
  --theme-heading: #7DD3FC;
  --theme-on-interactive: #FFFFFF;
  --theme-control-bg: #0A1626;
  --theme-control-text: #F8FAFC;
  --theme-control-muted: #9FB2C8;
  --theme-disabled-bg: #17283B;
  --theme-disabled-text: #9FB2C8;
  --theme-focus-ring: rgba(125,211,252,.28);
  --theme-soft-accent: rgba(3,105,161,.26);
  --theme-soft-accent-border: rgba(125,211,252,.48);
  --theme-soft-accent-text: #BAE6FD;
  --theme-hover-bg: rgba(3,105,161,.26);
  --theme-active-bg: #0369A1;
  --theme-active-text: #FFFFFF;
  --theme-table-hover-bg: #123A5B;
  --theme-table-hover-text: #FFFFFF;
  --theme-overlay: rgba(2,8,23,.72);
  --theme-shadow: rgba(0,0,0,.38);
  --theme-native-scheme: dark;

  --theme-success-bg: #047857;
  --theme-success-on: #FFFFFF;
  --theme-success-text: #6EE7B7;
  --theme-success-soft: rgba(4,120,87,.24);
  --theme-warning-bg: #A16207;
  --theme-warning-on: #FFFFFF;
  --theme-warning-text: #FCD34D;
  --theme-warning-soft: rgba(161,98,7,.25);
  --theme-danger-bg: #BE123C;
  --theme-danger-on: #FFFFFF;
  --theme-danger-text: #FDA4AF;
  --theme-danger-soft: rgba(190,18,60,.24);
  --theme-info-bg: #0369A1;
  --theme-info-on: #FFFFFF;
  --theme-info-text: #7DD3FC;
  --theme-info-soft: rgba(3,105,161,.24);
  --theme-table-head-bg: #0B2545;
  --theme-table-head-text: #FFFFFF;
  --theme-table-head-border: #36506A;
  --theme-table-stripe-bg: rgba(125,211,252,.035);
}

html[data-theme="slate"] {
  --color-primary: #27272A;
  --color-secondary: #3F3F46;
  --color-accent: #6D28D9;
  --color-interactive: #6D28D9;
  --color-highlight: #C4B5FD;
  --color-text: #FAFAFA;
  --color-text-secondary: #D4D4D8;
  --color-bg: #18181B;
  --color-bg-secondary: #202024;
  --color-border: #52525B;
  --color-card: #27272A;
  --color-danger: #FDA4AF;
  --color-success: #86EFAC;
  --color-warning: #FDE047;
  --color-info: #93C5FD;

  --theme-navbar-bg: #27272A;
  --theme-navbar-text: #FAFAFA;
  --theme-navbar-brand: #DDD6FE;
  --theme-heading: #C4B5FD;
  --theme-on-interactive: #FFFFFF;
  --theme-control-bg: #18181B;
  --theme-control-text: #FAFAFA;
  --theme-control-muted: #A1A1AA;
  --theme-disabled-bg: #3F3F46;
  --theme-disabled-text: #A1A1AA;
  --theme-focus-ring: rgba(196,181,253,.28);
  --theme-soft-accent: rgba(109,40,217,.24);
  --theme-soft-accent-border: rgba(196,181,253,.48);
  --theme-soft-accent-text: #DDD6FE;
  --theme-hover-bg: rgba(109,40,217,.24);
  --theme-active-bg: #6D28D9;
  --theme-active-text: #FFFFFF;
  --theme-table-hover-bg: #3F315E;
  --theme-table-hover-text: #FFFFFF;
  --theme-overlay: rgba(0,0,0,.68);
  --theme-shadow: rgba(0,0,0,.38);
  --theme-native-scheme: dark;

  --theme-success-bg: #15803D;
  --theme-success-on: #FFFFFF;
  --theme-success-text: #86EFAC;
  --theme-success-soft: rgba(21,128,61,.24);
  --theme-warning-bg: #A16207;
  --theme-warning-on: #FFFFFF;
  --theme-warning-text: #FDE047;
  --theme-warning-soft: rgba(161,98,7,.25);
  --theme-danger-bg: #BE123C;
  --theme-danger-on: #FFFFFF;
  --theme-danger-text: #FDA4AF;
  --theme-danger-soft: rgba(190,18,60,.24);
  --theme-info-bg: #1D4ED8;
  --theme-info-on: #FFFFFF;
  --theme-info-text: #93C5FD;
  --theme-info-soft: rgba(29,78,216,.24);
  --theme-table-head-bg: #3F3F46;
  --theme-table-head-text: #FFFFFF;
  --theme-table-head-border: #71717A;
  --theme-table-stripe-bg: rgba(196,181,253,.035);
}

html[data-theme="emerald"] {
  --color-primary: #064E3B;
  --color-secondary: #0F3D32;
  --color-accent: #0D9488;
  --color-interactive: #047857;
  --color-highlight: #6EE7B7;
  --color-text: #F0FDF4;
  --color-text-secondary: #C7E9D7;
  --color-bg: #071A16;
  --color-bg-secondary: #0C211C;
  --color-border: #2F5D50;
  --color-card: #102A24;
  --color-danger: #FDA4AF;
  --color-success: #6EE7B7;
  --color-warning: #FCD34D;
  --color-info: #7DD3FC;

  --theme-navbar-bg: #064E3B;
  --theme-navbar-text: #FFFFFF;
  --theme-navbar-brand: #A7F3D0;
  --theme-heading: #6EE7B7;
  --theme-on-interactive: #FFFFFF;
  --theme-control-bg: #081D18;
  --theme-control-text: #F0FDF4;
  --theme-control-muted: #9AC8B5;
  --theme-disabled-bg: #17362D;
  --theme-disabled-text: #9AC8B5;
  --theme-focus-ring: rgba(110,231,183,.27);
  --theme-soft-accent: rgba(4,120,87,.26);
  --theme-soft-accent-border: rgba(110,231,183,.48);
  --theme-soft-accent-text: #A7F3D0;
  --theme-hover-bg: rgba(4,120,87,.26);
  --theme-active-bg: #047857;
  --theme-active-text: #FFFFFF;
  --theme-table-hover-bg: #145844;
  --theme-table-hover-text: #FFFFFF;
  --theme-overlay: rgba(2,20,15,.72);
  --theme-shadow: rgba(0,0,0,.38);
  --theme-native-scheme: dark;

  --theme-success-bg: #047857;
  --theme-success-on: #FFFFFF;
  --theme-success-text: #6EE7B7;
  --theme-success-soft: rgba(4,120,87,.24);
  --theme-warning-bg: #A16207;
  --theme-warning-on: #FFFFFF;
  --theme-warning-text: #FCD34D;
  --theme-warning-soft: rgba(161,98,7,.24);
  --theme-danger-bg: #BE123C;
  --theme-danger-on: #FFFFFF;
  --theme-danger-text: #FDA4AF;
  --theme-danger-soft: rgba(190,18,60,.24);
  --theme-info-bg: #0369A1;
  --theme-info-on: #FFFFFF;
  --theme-info-text: #7DD3FC;
  --theme-info-soft: rgba(3,105,161,.24);
  --theme-table-head-bg: #064E3B;
  --theme-table-head-text: #FFFFFF;
  --theme-table-head-border: #2F5D50;
  --theme-table-stripe-bg: rgba(110,231,183,.035);
}

html[data-theme="high-contrast"] {
  --color-primary: #000000;
  --color-secondary: #000000;
  --color-accent: #00FFFF;
  --color-interactive: #FFD60A;
  --color-highlight: #FFD60A;
  --color-text: #FFFFFF;
  --color-text-secondary: #FFFFFF;
  --color-bg: #000000;
  --color-bg-secondary: #000000;
  --color-border: #FFFFFF;
  --color-card: #000000;
  --color-danger: #FF6B6B;
  --color-success: #00FF66;
  --color-warning: #FFD60A;
  --color-info: #00FFFF;

  --theme-navbar-bg: #000000;
  --theme-navbar-text: #FFFFFF;
  --theme-navbar-brand: #FFD60A;
  --theme-heading: #FFD60A;
  --theme-on-interactive: #000000;
  --theme-control-bg: #000000;
  --theme-control-text: #FFFFFF;
  --theme-control-muted: #FFFFFF;
  --theme-disabled-bg: #1A1A1A;
  --theme-disabled-text: #D9D9D9;
  --theme-focus-ring: #00FFFF;
  --theme-soft-accent: #1B1700;
  --theme-soft-accent-border: #FFD60A;
  --theme-soft-accent-text: #FFD60A;
  --theme-hover-bg: #262000;
  --theme-active-bg: #FFD60A;
  --theme-active-text: #000000;
  --theme-table-hover-bg: #FFD60A;
  --theme-table-hover-text: #000000;
  --theme-overlay: rgba(0,0,0,.85);
  --theme-shadow: rgba(255,255,255,.18);
  --theme-native-scheme: dark;

  --theme-success-bg: #00FF66;
  --theme-success-on: #000000;
  --theme-success-text: #00FF66;
  --theme-success-soft: #001F0C;
  --theme-warning-bg: #FFD60A;
  --theme-warning-on: #000000;
  --theme-warning-text: #FFD60A;
  --theme-warning-soft: #211C00;
  --theme-danger-bg: #FF6B6B;
  --theme-danger-on: #000000;
  --theme-danger-text: #FF8A8A;
  --theme-danger-soft: #2B0000;
  --theme-info-bg: #00FFFF;
  --theme-info-on: #000000;
  --theme-info-text: #00FFFF;
  --theme-info-soft: #002626;
  --theme-table-head-bg: #FFD60A;
  --theme-table-head-text: #000000;
  --theme-table-head-border: #FFFFFF;
  --theme-table-stripe-bg: #101010;
}

/* Core surfaces and typography ------------------------------------------------ */

html[data-theme] {
  color-scheme: var(--theme-native-scheme);
  background: var(--color-bg);
}

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

html[data-theme] body h1,
html[data-theme] body h2,
html[data-theme] body h3,
html[data-theme] body h4,
html[data-theme] body h5,
html[data-theme] body h6,
html[data-theme] body .card-title,
html[data-theme] body .text-accent {
  color: var(--theme-heading) !important;
}

html[data-theme] body .text-muted {
  color: var(--color-text-secondary) !important;
}

html[data-theme] body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) {
  color: var(--color-highlight);
}

html[data-theme] body a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover {
  color: var(--theme-heading);
}

/* Navbar + sidebar ----------------------------------------------------------- */

html[data-theme] body .navbar {
  background-color: var(--theme-navbar-bg) !important;
  border-bottom-color: var(--color-accent);
}

html[data-theme] body .navbar-brand {
  color: var(--theme-navbar-brand) !important;
}

html[data-theme] body .navbar .nav-link,
html[data-theme] body .navbar .btn-link {
  color: var(--theme-navbar-text) !important;
}

html[data-theme] body .navbar .nav-link:hover,
html[data-theme] body .navbar .btn-link:hover {
  color: var(--theme-navbar-brand) !important;
}

html[data-theme] body .sidebar {
  background-color: var(--color-bg-secondary);
  border-right-color: var(--color-border);
}

html[data-theme] body .sidebar a {
  color: var(--color-text-secondary);
}

html[data-theme] body .sidebar a:hover,
html[data-theme] body .mission-sidebar-nav .nav-sub-link.active {
  background-color: var(--theme-active-bg);
  color: var(--theme-active-text) !important;
}

html[data-theme] body .mission-sidebar-nav .nav-parent-link.context-active {
  color: var(--color-text);
}

html[data-theme] body .mission-sidebar-nav .nav-parent-link.context-active::after {
  background: var(--color-highlight);
  box-shadow: 0 0 0 3px var(--theme-focus-ring);
}

html[data-theme] body .mission-sidebar-nav .nav-section small {
  color: var(--color-text-secondary);
}

/* Cards, panels, menus and modals ------------------------------------------- */

html[data-theme] body .card,
html[data-theme] body .modal-content,
html[data-theme] body .dropdown-menu,
html[data-theme] body .list-group-item,
html[data-theme] body .accordion-item,
html[data-theme] body .offcanvas,
html[data-theme] body .side-panel {
  background-color: var(--color-card);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme] body .card:hover {
  border-color: var(--color-interactive);
  box-shadow: 0 4px 14px var(--theme-shadow);
}

html[data-theme] body .card-header,
html[data-theme] body .card-footer,
html[data-theme] body .modal-header,
html[data-theme] body .modal-footer,
html[data-theme] body .accordion-button,
html[data-theme] body .dropdown-header {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme] body .accordion-button:not(.collapsed) {
  background-color: var(--theme-soft-accent);
  color: var(--theme-soft-accent-text);
  box-shadow: inset 0 -1px 0 var(--color-border);
}

html[data-theme] body .dropdown-divider,
html[data-theme] body hr {
  border-color: var(--color-border);
  opacity: 1;
}

html[data-theme] body .dropdown-item {
  color: var(--color-text);
}

html[data-theme] body .dropdown-item:hover,
html[data-theme] body .dropdown-item:focus {
  background: var(--theme-hover-bg);
  color: var(--color-text);
}

html[data-theme] body .dropdown-item.active,
html[data-theme] body .dropdown-item:active {
  background: var(--theme-active-bg);
  color: var(--theme-active-text);
}

/* Forms --------------------------------------------------------------------- */

html[data-theme] body .form-control,
html[data-theme] body .form-select,
html[data-theme] body .form-check-input,
html[data-theme] body .input-group-text {
  background-color: var(--theme-control-bg);
  border-color: var(--color-border);
  color: var(--theme-control-text);
}

html[data-theme] body .form-control::placeholder {
  color: var(--theme-control-muted);
  opacity: 1;
}

html[data-theme] body .form-control:focus,
html[data-theme] body .form-select:focus,
html[data-theme] body .form-check-input:focus {
  background-color: var(--theme-control-bg);
  border-color: var(--color-highlight);
  color: var(--theme-control-text);
  box-shadow: 0 0 0 .2rem var(--theme-focus-ring);
}

html[data-theme] body .form-control:disabled,
html[data-theme] body .form-control[readonly],
html[data-theme] body .form-select:disabled {
  background-color: var(--theme-disabled-bg);
  color: var(--theme-disabled-text);
  opacity: 1;
}

html[data-theme] body select option {
  background: var(--theme-control-bg);
  color: var(--theme-control-text);
}

html[data-theme] body input[type="time"],
html[data-theme] body input[type="date"],
html[data-theme] body input[type="datetime-local"],
html[data-theme] body input[type="month"],
html[data-theme] body input[type="week"] {
  color-scheme: var(--theme-native-scheme);
}

/* Tables -------------------------------------------------------------------- */
/*
 * v26.10.1:
 * Earlier Mission: Patrol table header rules pre-date the multi-theme system
 * and used fixed purple colours with !important. These tokenised rules also
 * use !important deliberately so the selected named theme wins over that
 * legacy layer and Bootstrap table variants on every list page.
 */


html[data-theme] body .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: var(--theme-table-stripe-bg);
  --bs-table-striped-color: var(--color-text);
  --bs-table-hover-bg: var(--theme-table-hover-bg);
  --bs-table-hover-color: var(--theme-table-hover-text);
  color: var(--color-text);
}

html[data-theme] body .table thead,
html[data-theme] body .table thead tr,
html[data-theme] body .table thead th,
html[data-theme] body .table thead td {
  background-color: var(--theme-table-head-bg) !important;
  color: var(--theme-table-head-text) !important;
  border-color: var(--theme-table-head-border) !important;
}

html[data-theme] body .table thead th,
html[data-theme] body .table thead td {
  box-shadow: none !important;
}

html[data-theme] body .table tbody tr,
html[data-theme] body .table tbody td {
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

html[data-theme] body .table tbody tr {
  background-color: var(--color-card);
}

html[data-theme] body .table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: var(--theme-table-stripe-bg);
  color: var(--color-text) !important;
}

html[data-theme] body .table tbody tr:hover,
html[data-theme] body .table tbody tr:hover td,
html[data-theme] body .table.table-striped > tbody > tr:hover > * {
  background-color: var(--theme-table-hover-bg) !important;
  color: var(--theme-table-hover-text) !important;
  --bs-table-accent-bg: var(--theme-table-hover-bg);
}

/* Buttons ------------------------------------------------------------------- */

html[data-theme] body .btn-primary {
  background: var(--color-interactive);
  border-color: var(--color-interactive);
  color: var(--theme-on-interactive);
}

html[data-theme] body .btn-primary:hover,
html[data-theme] body .btn-primary:focus {
  filter: brightness(1.08);
  color: var(--theme-on-interactive);
}

html[data-theme] body .btn-secondary,
html[data-theme] body .btn-outline-secondary {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text);
}

html[data-theme] body .btn-outline-secondary {
  background: transparent;
}

html[data-theme] body .btn-secondary:hover,
html[data-theme] body .btn-outline-secondary:hover,
html[data-theme] body .btn-outline-secondary.active {
  border-color: var(--color-highlight);
  background: var(--theme-hover-bg);
  color: var(--color-text);
}

html[data-theme] body .btn-success {
  background: var(--theme-success-bg);
  border-color: var(--theme-success-bg);
  color: var(--theme-success-on);
}

html[data-theme] body .btn-danger {
  background: var(--theme-danger-bg);
  border-color: var(--theme-danger-bg);
  color: var(--theme-danger-on);
}

html[data-theme] body .btn-warning {
  background: var(--theme-warning-bg);
  border-color: var(--theme-warning-bg);
  color: var(--theme-warning-on);
}

html[data-theme] body .btn-info {
  background: var(--theme-info-bg);
  border-color: var(--theme-info-bg);
  color: var(--theme-info-on);
}

html[data-theme] body .btn:focus-visible,
html[data-theme] body a:focus-visible,
html[data-theme] body button:focus-visible,
html[data-theme] body [tabindex]:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem var(--theme-focus-ring);
}

/* Semantic text, alerts and badges ----------------------------------------- */

html[data-theme] body .text-success { color: var(--theme-success-text) !important; }
html[data-theme] body .text-warning { color: var(--theme-warning-text) !important; }
html[data-theme] body .text-danger { color: var(--theme-danger-text) !important; }
html[data-theme] body .text-info { color: var(--theme-info-text) !important; }

html[data-theme] body .alert-success {
  background: var(--theme-success-soft);
  border-color: var(--theme-success-bg);
  color: var(--color-text);
}

html[data-theme] body .alert-warning {
  background: var(--theme-warning-soft);
  border-color: var(--theme-warning-bg);
  color: var(--color-text);
}

html[data-theme] body .alert-danger {
  background: var(--theme-danger-soft);
  border-color: var(--theme-danger-bg);
  color: var(--color-text);
}

html[data-theme] body .alert-info {
  background: var(--theme-info-soft);
  border-color: var(--theme-info-bg);
  color: var(--color-text);
}

html[data-theme] body .text-bg-primary,
html[data-theme] body .bg-primary {
  background-color: var(--color-interactive) !important;
  color: var(--theme-on-interactive) !important;
}

html[data-theme] body .text-bg-secondary,
html[data-theme] body .bg-secondary {
  background-color: var(--theme-soft-accent) !important;
  color: var(--theme-soft-accent-text) !important;
}

html[data-theme] body .text-bg-success,
html[data-theme] body .bg-success {
  background-color: var(--theme-success-bg) !important;
  color: var(--theme-success-on) !important;
}

html[data-theme] body .text-bg-warning,
html[data-theme] body .bg-warning {
  background-color: var(--theme-warning-bg) !important;
  color: var(--theme-warning-on) !important;
}

html[data-theme] body .text-bg-danger,
html[data-theme] body .bg-danger {
  background-color: var(--theme-danger-bg) !important;
  color: var(--theme-danger-on) !important;
}

html[data-theme] body .text-bg-info,
html[data-theme] body .bg-info {
  background-color: var(--theme-info-bg) !important;
  color: var(--theme-info-on) !important;
}

/* Existing Mission-specific table chips now consume shared theme tokens. */

html[data-theme] body .mission-count-badge,
html[data-theme] body .mission-guard-badge,
html[data-theme] body .mission-assignment-shared {
  border-color: var(--theme-soft-accent-border);
  background: var(--theme-soft-accent);
  color: var(--theme-soft-accent-text) !important;
}

html[data-theme] body .mission-guard-badge:hover,
html[data-theme] body .mission-guard-badge:focus-visible {
  border-color: var(--color-highlight);
  background: var(--theme-active-bg);
  color: var(--theme-active-text) !important;
}

html[data-theme] body .mission-assignment-any {
  border-color: var(--theme-info-bg);
  background: var(--theme-info-soft);
  color: var(--theme-info-text);
}

html[data-theme] body .mission-assignment-each {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

html[data-theme] body .table tbody tr:hover .mission-count-badge,
html[data-theme] body .table tbody tr:hover .mission-assignment-badge,
html[data-theme] body .table tbody tr:hover .mission-guard-badge {
  border-color: currentColor;
  background: color-mix(in srgb, var(--theme-table-hover-text) 14%, transparent);
  color: var(--theme-table-hover-text) !important;
}

/* jsTree -------------------------------------------------------------------- */

html[data-theme] body .jstree-default .jstree-anchor {
  color: var(--color-text);
}

html[data-theme] body .jstree-default .jstree-anchor:hover {
  background: var(--theme-hover-bg);
  color: var(--color-text);
}

html[data-theme] body .jstree-default .jstree-clicked {
  background: var(--theme-active-bg);
  color: var(--theme-active-text);
  box-shadow: none;
}

html[data-theme] body .jstree-default .jstree-clicked .jstree-themeicon {
  color: var(--theme-active-text);
}

/* Theme picker -------------------------------------------------------------- */
/*
 * v26.10.2:
 * Theme swatches now use a cleaner double-ring treatment and slightly larger
 * circular surface so the edges render more cleanly against the menu background.
 */


html[data-theme] body .theme-toggle {
  display: inline-flex;
  width: 38px;
  height: 38px;
  margin-left: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--theme-navbar-text);
}

html[data-theme] body .theme-toggle::after {
  display: none;
}

html[data-theme] body .theme-toggle:hover,
html[data-theme] body .theme-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--theme-navbar-text) 35%, transparent);
  background: color-mix(in srgb, var(--theme-navbar-text) 12%, transparent);
  color: var(--theme-navbar-brand);
}

.mission-theme-menu {
  width: 300px;
  padding: .45rem;
  border-radius: .75rem;
  box-shadow: 0 16px 40px var(--theme-shadow);
}

.mission-theme-menu-heading {
  padding: .45rem .6rem .35rem;
  color: var(--color-text-secondary);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mission-theme-option {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  padding: .45rem .55rem;
  border-radius: .5rem;
}

.mission-theme-option-label {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.mission-theme-option-label strong {
  color: inherit;
  font-size: .82rem;
  font-weight: 700;
}

.mission-theme-option-label small {
  color: var(--color-text-secondary);
  font-size: .68rem;
}

.mission-theme-option.active .mission-theme-option-label small {
  color: currentColor;
  opacity: .78;
}

.mission-theme-check {
  visibility: hidden;
  color: currentColor;
}

.mission-theme-option.active .mission-theme-check {
  visibility: visible;
}

.mission-theme-swatch {
  position: relative;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  isolation: isolate;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 0 0 1px rgba(15,23,42,.28);
}

.mission-theme-swatch::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 1px 2px rgba(0,0,0,.18);
  pointer-events: none;
}

html[data-theme="light"] body .mission-theme-swatch {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.9),
    0 0 0 1px rgba(109,40,217,.22);
}

html[data-theme="light"] body .mission-theme-swatch::after {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 1px 2px rgba(31,41,55,.12);
}

.theme-swatch-system {
  background: linear-gradient(90deg, #FFFFFF 0 50%, #111827 50% 100%);
  color: #7C3AED;
}

.theme-swatch-mission { background: linear-gradient(135deg, #07101F 0 42%, #7C3AED 42% 72%, #E9D5FF 72% 100%); }
.theme-swatch-light { background: linear-gradient(135deg, #FFFFFF 0 58%, #6D28D9 58% 100%); }
.theme-swatch-dark { background: linear-gradient(135deg, #0F172A 0 58%, #E9B7FF 58% 100%); }
.theme-swatch-midnight { background: linear-gradient(135deg, #07111F 0 58%, #7DD3FC 58% 100%); }
.theme-swatch-slate { background: linear-gradient(135deg, #18181B 0 58%, #C4B5FD 58% 100%); }
.theme-swatch-emerald { background: linear-gradient(135deg, #071A16 0 58%, #6EE7B7 58% 100%); }
.theme-swatch-high-contrast { background: linear-gradient(135deg, #000000 0 58%, #FFD60A 58% 100%); }

/* High contrast enhancements ------------------------------------------------ */

html[data-theme="high-contrast"] body .card,
html[data-theme="high-contrast"] body .form-control,
html[data-theme="high-contrast"] body .form-select,
html[data-theme="high-contrast"] body .btn,
html[data-theme="high-contrast"] body .dropdown-menu,
html[data-theme="high-contrast"] body .modal-content,
html[data-theme="high-contrast"] body .table,
html[data-theme="high-contrast"] body .sidebar {
  border-width: 2px;
}

html[data-theme="high-contrast"] body .mission-sidebar-nav .nav-sub-link.active,
html[data-theme="high-contrast"] body .sidebar a:hover {
  outline: 2px solid #FFFFFF;
  outline-offset: -2px;
}

html[data-theme="high-contrast"] body :focus-visible {
  outline: 3px solid #00FFFF !important;
  outline-offset: 3px !important;
}

/* Leaflet controls keep their map semantics but match surrounding chrome. */

html[data-theme] body .leaflet-bar a,
html[data-theme] body .leaflet-control-layers,
html[data-theme] body .leaflet-popup-content-wrapper,
html[data-theme] body .leaflet-popup-tip {
  background: var(--color-card);
  color: var(--color-text);
  border-color: var(--color-border);
}

html[data-theme] body .leaflet-bar a:hover {
  background: var(--theme-hover-bg);
  color: var(--color-text);
}



/* ========================================================================== */
/* v26.10.3 - Summary card record drill-down                                  */
/* ========================================================================== */
.summary-record-link { display:block; color:inherit !important; text-decoration:none !important; border-radius:.75rem; }
.summary-record-card { cursor:pointer; transition:transform .14s ease,border-color .14s ease,background-color .14s ease,box-shadow .14s ease; }
.summary-record-link:hover .summary-record-card,
.summary-record-card[role="button"]:hover { transform:translateY(-2px); border-color:var(--color-highlight) !important; box-shadow:0 6px 18px var(--theme-shadow); }
.summary-record-link:focus-visible { outline:2px solid var(--color-highlight); outline-offset:3px; }
.summary-record-link:focus-visible .summary-record-card,
.summary-record-card[role="button"]:focus-visible,
.summary-record-card-active { border-color:var(--color-highlight) !important; box-shadow:0 0 0 2px var(--theme-focus-ring),0 6px 18px var(--theme-shadow); }
.summary-record-card[role="button"]:focus-visible { outline:none; }
.summary-record-card-active { background:linear-gradient(var(--theme-soft-accent),var(--theme-soft-accent)),var(--color-card); }
@media (prefers-reduced-motion: reduce) { .summary-record-card { transition:none; } .summary-record-link:hover .summary-record-card,.summary-record-card[role="button"]:hover { transform:none; } }

/* ========================================================================== */
/* v26.10.4 - Filter clarity + zero-count summary cards                       */
/* ========================================================================== */

.summary-record-link-disabled,
.summary-record-link[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.summary-record-link-disabled .summary-record-card,
.summary-record-card-disabled {
  cursor: default !important;
  transform: none !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
  opacity: .62;
}

.summary-record-link-disabled:hover .summary-record-card,
.summary-record-card-disabled:hover {
  transform: none !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
}

.active-filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .65rem .75rem;
  border: 1px solid var(--theme-soft-accent-border);
  border-radius: .65rem;
  background: var(--theme-soft-accent);
  color: var(--color-text);
}

.active-filter-summary-compact {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

.active-filter-heading {
  color: var(--theme-soft-accent-text);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .015em;
}

.active-filter-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  padding: .28rem .5rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-text);
  font-size: .72rem;
}

.active-filter-label {
  color: var(--color-text-secondary);
}

.active-filter-value {
  color: var(--color-text);
  font-weight: 800;
}

.filter-label-active {
  color: var(--theme-heading) !important;
  font-weight: 800 !important;
}

.clear-filter-button {
  font-weight: 700;
  white-space: nowrap;
}

.ops-filter-group .btn.active {
  font-weight: 800;
}

@media (max-width: 575.98px) {
  .active-filter-summary {
    align-items: stretch;
  }

  .active-filter-summary .clear-filter-button {
    width: 100%;
    margin-left: 0 !important;
  }
}

/* ========================================================================== */
/* v26.11.0 - Custom theme                                                    */
/* ========================================================================== */

/*
 * Safe dark defaults are present even before a custom palette is saved.
 * Saved custom values are applied as inline CSS variables and override these.
 */
html[data-theme="custom"] {
  --color-primary: #272462;
  --color-secondary: #3F054F;
  --color-accent: #E9B7FF;
  --color-interactive: #7C3AED;
  --color-highlight: #E9B7FF;
  --color-text: #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-bg: #0F172A;
  --color-bg-secondary: #1A1F36;
  --color-border: #475569;
  --color-card: #1E293B;
  --color-danger: #FCA5A5;
  --color-success: #6EE7B7;
  --color-warning: #FBBF24;
  --color-info: #93C5FD;

  --theme-navbar-bg: #3F054F;
  --theme-navbar-text: #FFFFFF;
  --theme-navbar-brand: #E9B7FF;
  --theme-heading: #E9B7FF;
  --theme-on-interactive: #FFFFFF;
  --theme-control-bg: #111827;
  --theme-control-text: #F8FAFC;
  --theme-control-muted: #CBD5E1;
  --theme-disabled-bg: #273244;
  --theme-disabled-text: #CBD5E1;
  --theme-focus-ring: rgba(233,183,255,.28);
  --theme-soft-accent: #2A1D46;
  --theme-soft-accent-border: #8C70A8;
  --theme-soft-accent-text: #E9B7FF;
  --theme-hover-bg: #32234F;
  --theme-active-bg: #7C3AED;
  --theme-active-text: #FFFFFF;
  --theme-table-hover-bg: #4C1D6F;
  --theme-table-hover-text: #FFFFFF;
  --theme-overlay: rgba(2,6,23,.72);
  --theme-shadow: rgba(0,0,0,.35);
  --theme-native-scheme: dark;

  --theme-success-bg: #047857;
  --theme-success-on: #FFFFFF;
  --theme-success-text: #6EE7B7;
  --theme-success-soft: #123E34;
  --theme-warning-bg: #B45309;
  --theme-warning-on: #FFFFFF;
  --theme-warning-text: #FBBF24;
  --theme-warning-soft: #432C12;
  --theme-danger-bg: #B91C1C;
  --theme-danger-on: #FFFFFF;
  --theme-danger-text: #FCA5A5;
  --theme-danger-soft: #431A22;
  --theme-info-bg: #1D4ED8;
  --theme-info-on: #FFFFFF;
  --theme-info-text: #93C5FD;
  --theme-info-soft: #172D58;

  --theme-table-head-bg: #3F054F;
  --theme-table-head-text: #FFFFFF;
  --theme-table-head-border: #6B267B;
  --theme-table-stripe-bg: #202A3C;
}

.theme-swatch-custom {
  background: linear-gradient(135deg, #0F172A 0 58%, #E9B7FF 58% 100%);
}

.custom-theme-modal {
  border-color: var(--color-border);
}

.custom-theme-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.custom-theme-toolbar > div:first-child {
  min-width: 220px;
}

.custom-theme-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.custom-theme-section {
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  background: var(--color-bg-secondary);
}

.custom-theme-section > h6 {
  margin-bottom: .85rem;
  color: var(--theme-heading);
}

.custom-theme-colour-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.custom-theme-colour-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 74px;
  align-items: center;
  gap: .55rem;
  min-height: 52px;
  padding: .55rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: .6rem;
  background: var(--color-card);
}

.custom-theme-colour-item label {
  margin: 0;
  color: var(--color-text);
  font-size: .76rem;
  font-weight: 650;
}

.custom-theme-colour-item input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: .45rem;
  background: var(--theme-control-bg);
  cursor: pointer;
}

.custom-theme-colour-item input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.custom-theme-colour-item input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: .3rem;
}

.custom-theme-colour-item input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: .3rem;
}

.custom-theme-colour-item code {
  color: var(--color-text-secondary);
  font-size: .68rem;
  text-align: right;
}

.custom-theme-preview-wrap {
  position: sticky;
  top: 0;
}

.custom-theme-preview {
  overflow: hidden;
  border: 1px solid var(--custom-preview-border, var(--color-border));
  border-radius: .8rem;
  background: var(--custom-preview-bg, var(--color-bg));
  color: var(--custom-preview-text, var(--color-text));
  box-shadow: 0 8px 24px var(--theme-shadow);
}

.custom-theme-preview-navbar {
  padding: .7rem .85rem;
  background: var(--custom-preview-navbar, var(--theme-navbar-bg));
  color: var(--custom-preview-navbar-text, var(--theme-navbar-text));
  font-size: .76rem;
  font-weight: 800;
}

.custom-theme-preview-body {
  padding: 1rem;
  background: var(--custom-preview-bg, var(--color-bg));
}

.custom-theme-preview-body h5 {
  color: var(--custom-preview-highlight, var(--theme-heading)) !important;
}

.custom-theme-preview-body > p {
  color: var(--custom-preview-muted, var(--color-text-secondary));
  font-size: .75rem;
}

.custom-theme-preview-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem;
  border: 1px solid var(--custom-preview-border, var(--color-border));
  border-radius: .55rem;
  background: var(--custom-preview-card, var(--color-card));
}

.custom-theme-preview-card span {
  color: var(--custom-preview-muted, var(--color-text-secondary));
  font-size: .68rem;
}

.custom-theme-preview-card button {
  align-self: flex-start;
  margin-top: .3rem;
  padding: .35rem .65rem;
  border: 1px solid var(--custom-preview-primary, var(--color-interactive));
  border-radius: .4rem;
  background: var(--custom-preview-primary, var(--color-interactive));
  color: var(--custom-preview-primary-text, #FFFFFF);
  font-size: .68rem;
  font-weight: 700;
}

.custom-theme-preview-status {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .75rem;
}

.custom-theme-preview-status span {
  padding: .25rem .45rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 750;
}

.custom-theme-preview-status .success {
  background: var(--custom-preview-success);
  color: var(--custom-preview-success-text);
}
.custom-theme-preview-status .warning {
  background: var(--custom-preview-warning);
  color: var(--custom-preview-warning-text);
}
.custom-theme-preview-status .danger {
  background: var(--custom-preview-danger);
  color: var(--custom-preview-danger-text);
}
.custom-theme-preview-status .info {
  background: var(--custom-preview-info);
  color: var(--custom-preview-info-text);
}

.custom-theme-preview-table {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: .75rem;
  overflow: hidden;
  border: 1px solid var(--custom-preview-border);
  border-radius: .45rem;
  font-size: .68rem;
}

.custom-theme-preview-table > div {
  padding: .4rem .5rem;
}

.custom-theme-preview-table .head {
  background: var(--custom-preview-table);
  color: var(--custom-preview-table-text);
  font-weight: 750;
}

.custom-theme-contrast-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.custom-theme-contrast-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .4rem .5rem;
  border: 1px solid var(--color-border);
  border-radius: .45rem;
  background: var(--color-bg-secondary);
  font-size: .68rem;
}

.custom-theme-contrast-row strong {
  font-variant-numeric: tabular-nums;
}

.custom-theme-contrast-row.pass strong {
  color: var(--theme-success-text);
}

.custom-theme-contrast-row.fail strong {
  color: var(--theme-danger-text);
}

.custom-theme-contrast-row.fail {
  border-color: var(--theme-danger-bg);
}

@media (max-width: 767.98px) {
  .custom-theme-colour-grid {
    grid-template-columns: 1fr;
  }

  .custom-theme-colour-item {
    grid-template-columns: minmax(0, 1fr) 46px 74px;
  }

  .custom-theme-preview-wrap {
    position: static;
  }
}


/* ========================================================================== */
/* v26.11.1 - Custom theme preset starter list                                */
/* ========================================================================== */

.custom-theme-preset-panel { padding:1rem; border:1px solid var(--color-border); border-radius:.75rem; background:var(--color-bg-secondary); }
.custom-theme-preset-panel h6 { color:var(--theme-heading); }
.custom-theme-preset-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; }
.custom-theme-preset-option { display:grid; grid-template-columns:32px minmax(0,1fr) 20px; align-items:center; gap:.6rem; min-height:58px; padding:.6rem .65rem; border:1px solid var(--color-border); border-radius:.6rem; background:var(--color-card); color:var(--color-text); text-align:left; transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease,transform .14s ease; }
.custom-theme-preset-option:hover,.custom-theme-preset-option:focus-visible { border-color:var(--color-highlight); background:var(--theme-hover-bg); color:var(--color-text); transform:translateY(-1px); }
.custom-theme-preset-option.active { border-color:var(--color-highlight); background:var(--theme-soft-accent); box-shadow:0 0 0 2px var(--theme-focus-ring); }
.custom-theme-preset-option > span:nth-child(2) { display:flex; min-width:0; flex-direction:column; }
.custom-theme-preset-option strong { color:inherit; font-size:.76rem; font-weight:750; }
.custom-theme-preset-option small { margin-top:.08rem; color:var(--color-text-secondary); font-size:.62rem; line-height:1.2; }
.custom-theme-preset-option.active small { color:var(--color-text); opacity:.8; }
.custom-theme-preset-check { visibility:hidden; color:var(--theme-heading); }
.custom-theme-preset-option.active .custom-theme-preset-check { visibility:visible; }
@media (max-width:1199.98px) { .custom-theme-preset-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px) { .custom-theme-preset-list { grid-template-columns:1fr; } }

/* ========================================================================== */
/* v26.11.2 - Custom theme apply/edit split                                  */
/* ========================================================================== */

.mission-theme-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: .35rem;
}

.mission-theme-custom-row .mission-theme-custom-apply {
  min-width: 0;
  border-radius: .5rem;
}

.mission-theme-custom-edit {
  align-self: center;
  min-width: 58px;
  margin-right: .15rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text);
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}

.mission-theme-custom-edit:hover,
.mission-theme-custom-edit:focus-visible {
  border-color: var(--color-highlight);
  background: var(--theme-hover-bg);
  color: var(--color-text);
}

.mission-theme-custom-row:has(.mission-theme-custom-apply.active) .mission-theme-custom-edit {
  border-color: var(--theme-soft-accent-border);
}

@media (max-width: 575.98px) {
  .mission-theme-custom-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .mission-theme-custom-edit {
    min-width: 54px;
    padding-left: .45rem;
    padding-right: .45rem;
  }
}

/* ========================================================================== */
/* v26.11.3 - Observations filter parity with Events                          */
/* ========================================================================== */

.observations-filter-card .form-label {
  margin-bottom: .5rem;
}

.observations-filter-card .input-group-text {
  color: var(--color-text-secondary);
}

.observations-filter-card .btn-primary {
  min-height: 38px;
}

/* ========================================================================== */
/* v26.12.0 - Standard list-page filters                                      */
/* ========================================================================== */

.standard-filter-card .form-label {
  margin-bottom: .5rem;
}

.standard-filter-card .input-group-text {
  color: var(--color-text-secondary);
}

.standard-filter-card .btn-primary {
  min-height: 38px;
}

.standard-filter-card .active-filter-summary {
  margin-bottom: 0;
}

/* v26.12.1 - Routes now uses the shared standard-filter-card pattern. */

/* v26.12.2 - Guards now uses the shared standard-filter-card pattern. */

/* ========================================================================== */
/* v26.13.0 - Route overlays on Site Plan and Floorplans                      */
/* ========================================================================== */

.route-overlay-card .card-body {
  min-width: 0;
}

.route-overlay-summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem;
  border: 1px solid var(--color-border);
  border-radius: .6rem;
  background: var(--color-bg-secondary);
}

.route-overlay-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.route-overlay-summary strong {
  color: var(--color-text);
  font-size: .78rem;
}

.route-overlay-summary small {
  margin-top: .08rem;
  color: var(--color-text-secondary);
  font-size: .66rem;
  line-height: 1.25;
}

.route-overlay-swatch,
.route-overlay-legend-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-border);
}

.route-overlay-step-list {
  display: flex;
  max-height: 320px;
  flex-direction: column;
  gap: .35rem;
  overflow-y: auto;
  padding-right: .15rem;
}

.route-overlay-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  width: 100%;
  min-height: 42px;
  padding: .4rem .45rem;
  border: 1px solid var(--color-border);
  border-radius: .5rem;
  background: var(--color-card);
  color: var(--color-text) !important;
  text-align: left;
  text-decoration: none !important;
}

button.route-overlay-step {
  cursor: pointer;
}

.route-overlay-step:hover,
.route-overlay-step:focus-visible {
  border-color: var(--color-highlight);
  background: var(--theme-hover-bg);
}

.route-overlay-step-current {
  border-color: var(--theme-soft-accent-border);
  background: var(--theme-soft-accent);
}

.route-overlay-step-unplaced {
  opacity: .66;
}

.route-overlay-step-number {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(15,23,42,.28);
}

.route-overlay-step-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.route-overlay-step-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-overlay-step-copy small {
  overflow: hidden;
  margin-top: .08rem;
  color: var(--color-text-secondary);
  font-size: .62rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-overlay-svg {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.siteplan-route-overlay-svg {
  z-index: 6;
}

.route-overlay-svg line {
  stroke: var(--route-overlay-color, #2563EB);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: .78;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.route-overlay-muted {
  opacity: .34 !important;
  filter: grayscale(.25) drop-shadow(0 1px 2px rgba(0,0,0,.18)) !important;
}

.route-overlay-pin {
  --pin-color: var(--route-overlay-color, #2563EB) !important;
  --site-marker-color: var(--route-overlay-color, #2563EB) !important;
  z-index: 18 !important;
  opacity: 1 !important;
}

.route-overlay-pin .floorplan-pin-core,
.route-overlay-pin .siteplan-image-marker-core,
.route-overlay-pin .siteplan-osm-marker-core {
  background: var(--route-overlay-color, #2563EB) !important;
  color: var(--route-overlay-text, #FFFFFF) !important;
  border-color: #FFFFFF;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--route-overlay-color, #2563EB) 58%, #000),
    0 0 0 6px color-mix(in srgb, var(--route-overlay-color, #2563EB) 22%, transparent);
}

.route-overlay-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--route-overlay-text, #FFFFFF);
  font-size: .78rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.02em;
}

.floorplan-pin-core .route-overlay-number {
  transform: rotate(45deg);
}

.siteplan-marker-checkpoint .route-overlay-number {
  transform: rotate(45deg);
}

.route-overlay-number-multi {
  font-size: .58rem;
  letter-spacing: -.04em;
}

.route-overlay-legend {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
}

.route-overlay-pulse .floorplan-pin-core {
  animation: routeOverlayPulse 1.5s ease;
}

@keyframes routeOverlayPulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--route-overlay-color, #2563EB) 58%, #000),
      0 0 0 6px color-mix(in srgb, var(--route-overlay-color, #2563EB) 22%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 2px #FFFFFF,
      0 0 0 14px color-mix(in srgb, var(--route-overlay-color, #2563EB) 42%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-overlay-pulse .floorplan-pin-core {
    animation: none;
  }
}

@media (max-width: 1399.98px) {
  .route-overlay-step-list {
    max-height: 260px;
  }
}


/* ========================================================================== */
/* v26.14.12 - Unified MISSION: Patrol shell branding                         */
/* ========================================================================== */

/* Match the login-screen wordmark treatment while still respecting the
 * active authenticated theme's navbar colours. */
.mission-navbar-brand {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-decoration: none;
}

.mission-navbar-brand-mark {
  width: 38px;
  height: 38px;
  padding: 2px;
  display: inline-block;
  flex: 0 0 38px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--theme-navbar-brand) 42%, transparent);
  background: color-mix(in srgb, var(--theme-navbar-brand) 10%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--theme-navbar-brand) 18%, transparent);
}

.mission-navbar-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.mission-navbar-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .28em;
  line-height: 1;
}

html[data-theme] body .mission-navbar-wordmark strong {
  color: var(--theme-navbar-text) !important;
  font-weight: 700;
}

html[data-theme] body .mission-navbar-wordmark > span {
  color: var(--theme-navbar-brand) !important;
  font-weight: 700;
}

/* Keep navigation surfaces deliberately solid. The branded map belongs to the
 * workspace only so navigation and controls never compete with decoration. */
html[data-theme] body .mission-sidebar {
  background-color: var(--color-bg-secondary) !important;
  position: relative;
  z-index: 3;
  box-shadow: 7px 0 22px color-mix(in srgb, var(--theme-shadow) 55%, transparent);
}

html[data-theme] body .mission-main-content {
  position: relative;
  /* Do not create a stacking context here. Bootstrap modal backdrops are
   * appended at document level; isolating the workspace can place that
   * backdrop above a modal rendered by a Razor page inside this element. */
  isolation: auto;
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 42% 18%, color-mix(in srgb, var(--color-interactive) 8%, transparent), transparent 34%),
    radial-gradient(circle at 88% 74%, color-mix(in srgb, var(--color-highlight) 5%, transparent), transparent 28%),
    url('/images/workspace-map-bg.svg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: cover, cover, cover;
}

/* Content surfaces remain intentionally stronger than the decorative layer. */
html[data-theme] body .mission-main-content .card,
html[data-theme] body .mission-main-content .accordion-item,
html[data-theme] body .mission-main-content .list-group-item,
html[data-theme] body .mission-main-content .side-panel {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--theme-shadow) 42%, transparent);
}

html[data-theme="mission"] body .mission-main-content {
  background-color: #07101F;
  background-image:
    radial-gradient(circle at 45% 104%, rgba(124,58,237,.16), transparent 31%),
    radial-gradient(circle at 8% 32%, rgba(59,130,246,.065), transparent 25%),
    linear-gradient(rgba(7,16,31,.44), rgba(9,20,46,.44)),
    url('/images/workspace-map-bg.svg');
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, center, center, center;
  background-size: cover, cover, cover, cover;
}

html[data-theme="light"] body .mission-main-content {
  background-image:
    radial-gradient(circle at 42% 18%, rgba(124, 58, 237, .035), transparent 34%),
    linear-gradient(rgba(255,255,255,.73), rgba(255,255,255,.73)),
    url('/images/workspace-map-bg.svg');
}

html[data-theme="high-contrast"] body .mission-main-content {
  background-image: none;
}

@media (max-width: 767.98px) {
  .mission-navbar-brand {
    font-size: 1.28rem !important;
    gap: 8px;
  }

  .mission-navbar-brand-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
  }

  .mission-navbar-brand-mark img { border-radius: 8px; }

  /* On small working screens prioritise the application data over decoration. */
  html[data-theme] body .mission-main-content {
    background-image:
      radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--color-interactive) 5%, transparent), transparent 38%),
      url('/images/workspace-map-bg.svg');
    background-size: cover, 150% auto;
    background-position: center, center top;
  }
}


/* ========================================================================== */
/* v26.14.15 - Users & Access table overflow cleanup                          */
/* ========================================================================== */

/*
 * This table comfortably fits on normal desktop widths. Do not make its
 * wrapper a scroll container there: doing so can cause Chromium to render a
 * small vertical scrollbar/gutter beside the table header.
 */
.users-access-card {
  overflow: hidden;
}

.users-access-table-wrap {
  width: 100%;
  overflow: visible;
}

.users-access-table {
  width: 100%;
  margin-bottom: 0;
}

/* Only narrow devices need horizontal table scrolling. Explicitly suppress
 * vertical overflow so no inner vertical scrollbar appears beside the header. */
@media (max-width: 767.98px) {
  .users-access-card {
    overflow: hidden;
  }

  .users-access-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto;
  }

  .users-access-table {
    min-width: 720px;
  }
}


/* ========================================================================== */
/* v26.14.16 - Clean workspace scrolling                                      */
/* ========================================================================== */

/*
 * The desktop workspace is intentionally its own scroll region so the sidebar
 * can scroll independently. On Windows/Chromium the native vertical scrollbar
 * can sit visually over the right edge of wide tables and appear to belong to
 * the table header. Keep the workspace scrollable, but hide only its scrollbar
 * chrome. The sidebar retains its visible scrollbar.
 */
@media (min-width: 992px) {
  .mission-main-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .mission-main-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
}


/* ========================================================================== */
/* v26.14.23 - Company context in authenticated header                         */
/* ========================================================================== */
.mission-navbar-company {
  min-width: 0;
  max-width: min(42vw, 620px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--theme-navbar-text) 82%, transparent);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

@media (max-width: 767.98px) {
  .mission-navbar-company {
    max-width: 34vw;
    font-size: .82rem;
  }
}


/* ========================================================================== */
/* v26.14.25 - Authenticated access-denied workspace                          */
/* ========================================================================== */

/*
 * Access-denied messages for signed-in users belong inside the normal app
 * shell. Centre the message in the working area while retaining the header,
 * company context and left navigation.
 */
.mission-access-denied-workspace {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(.5rem, 2vw, 1.5rem);
}

.mission-access-denied-card {
  width: min(100%, 620px);
  margin: 0;
}

@media (max-width: 991.98px) {
  .mission-access-denied-workspace {
    min-height: 58vh;
  }
}


/* ========================================================================== */
/* v26.14.27 - Bootstrap modal stacking fix                                   */
/* ========================================================================== */
/*
 * Keep page-level Bootstrap dialogs in the document stacking context.
 * The v26.14 branded workspace previously used isolation:isolate, which
 * trapped .modal (z-index 1055) beneath Bootstrap's body-level .modal-backdrop
 * (z-index 1050) despite the modal's numerically higher z-index.
 */
html[data-theme] body .mission-main-content {
  isolation: auto;
}

/* ========================================================================== */
/* v26.16.0 - Guard self-service portal                                       */
/* ========================================================================== */
.guard-portal-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.guard-portal-heading h1,
.guard-portal-eyebrow + h1 {
  margin-bottom: .25rem;
}

.guard-portal-eyebrow {
  color: var(--color-primary);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

.guard-portal-stat {
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.guard-portal-stat:hover {
  color: inherit;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.12);
}

.guard-portal-stat .card-body {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.guard-portal-stat strong {
  display: block;
  font-size: 1.2rem;
}

.guard-portal-stat-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: .85rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  font-size: 1.2rem;
}

.guard-next-patrol {
  padding: .25rem;
}

.guard-next-date {
  color: var(--color-primary);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.guard-next-time {
  margin-top: .2rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
}

.guard-portal-empty {
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: var(--color-text-muted);
  text-align: center;
}

.guard-portal-empty i {
  font-size: 2rem;
  color: color-mix(in srgb, var(--color-primary) 65%, var(--color-text-muted));
}

.guard-portal-list .list-group-item {
  color: var(--color-text-primary);
  background: transparent;
  border-color: var(--color-border);
}

.guard-portal-list .list-group-item:hover,
.guard-portal-list .list-group-item:focus {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.guard-observation-details dt {
  color: var(--color-text-muted);
  font-weight: 600;
}

.guard-observation-details dd {
  margin-bottom: 1rem;
}

.guard-observation-description,
.guard-update-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.guard-activity-timeline {
  position: relative;
}

.guard-activity-item {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .9rem;
  padding-bottom: 1.35rem;
}

.guard-activity-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.18rem;
  top: 2.15rem;
  bottom: .15rem;
  width: 2px;
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
}

.guard-activity-dot {
  position: relative;
  z-index: 1;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}

.guard-activity-dot-success {
  color: #fff;
  background: #198754;
  border-color: #198754;
}

.guard-activity-content {
  min-width: 0;
  padding-top: .15rem;
}

.guard-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.guard-photo-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: .75rem;
  aspect-ratio: 1;
  background: var(--color-bg-secondary);
}

.guard-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guard-photo-tile span {
  position: absolute;
  left: .4rem;
  right: .4rem;
  bottom: .4rem;
  padding: .25rem .4rem;
  border-radius: .4rem;
  color: #fff;
  background: rgba(0,0,0,.65);
  font-size: .7rem;
  text-align: center;
}

.guard-account-metric {
  display: grid;
  grid-template-columns: 2.4rem minmax(0,1fr);
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.2rem;
}

.guard-account-metric > i {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: .7rem;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.guard-account-metric span,
.guard-account-metric strong {
  display: block;
}

.guard-account-metric span {
  color: var(--color-text-muted);
  font-size: .8rem;
}

.min-width-0 { min-width: 0; }

@media (max-width: 767.98px) {
  .guard-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guard-portal-heading { align-items: flex-start; }
}

@media (max-width: 479.98px) {
  .guard-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v26.16.2 - plan calibration anchors */
.siteplan-calibration-source-row,
.floorplan-calibration-source-row {
    display: flex;
    align-items: stretch;
    gap: .25rem;
}
.siteplan-calibration-source-row .siteplan-source-item,
.floorplan-calibration-source-row .floorplan-calibration-source {
    flex: 1 1 auto;
    min-width: 0;
}
.siteplan-calibration-source.is-positioned,
.floorplan-calibration-source.is-positioned {
    box-shadow: inset 3px 0 0 var(--theme-accent, #9a6cff);
}
.siteplan-calibration-remove,
.floorplan-calibration-remove {
    flex: 0 0 auto;
    align-self: center;
    text-decoration: none;
}
.siteplan-calibration-marker,
.floorplan-calibration-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 7;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--theme-accent, #a78bfa);
    cursor: grab;
}
.siteplan-calibration-marker:active,
.floorplan-calibration-marker:active { cursor: grabbing; }
.siteplan-calibration-marker-core,
.floorplan-calibration-marker-core {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(7, 17, 31, .94);
    border: 2px solid currentColor;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, .18), 0 4px 12px rgba(0, 0, 0, .35);
    font-size: 16px;
}
.siteplan-calibration-marker-label,
.floorplan-calibration-marker-label {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(7, 17, 31, .92);
    color: #f5f1ff;
    font-size: .7rem;
    font-weight: 600;
    pointer-events: none;
}
.siteplan-calibration-source.selected,
.floorplan-calibration-source.selected {
    outline: 2px solid var(--theme-accent, #a78bfa);
    outline-offset: -2px;
}
.floorplan-calibration-source {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}
.floorplan-calibration-source:hover {
    background: rgba(103,40,142,.14);
}
.floorplan-calibration-source strong { font-size: .8rem; }
.floorplan-calibration-source small { color: var(--color-text-secondary); font-size: .68rem; margin-top: .15rem; }
.floorplan-calibration-list {
    max-height: 390px;
    overflow-y: auto;
}
.floorplan-calibration-source small,
.siteplan-calibration-source small {
    display: block;
}

/* v26.16.3 - calculated plan calibration and GPS checkpoint projections */
.plan-calibration-status {
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    border-radius: .75rem;
    padding: .75rem;
    background: color-mix(in srgb, var(--color-surface) 88%, var(--color-primary) 12%);
}
.plan-calibration-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}
.plan-calibration-metrics > span {
    min-width: 0;
    border-radius: .55rem;
    padding: .45rem .5rem;
    background: color-mix(in srgb, var(--color-bg) 72%, transparent);
}
.plan-calibration-metrics small,
.plan-calibration-metrics strong { display: block; }
.plan-calibration-metrics small {
    color: var(--color-text-muted);
    font-size: .65rem;
}
.plan-calibration-metrics strong {
    color: var(--color-text);
    font-size: .78rem;
    margin-top: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.siteplan-gps-projection-marker,
.floorplan-gps-projection-marker {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--theme-accent, #a78bfa);
    opacity: .82;
    cursor: default;
}
.siteplan-gps-projection-marker.is-actionable,
.floorplan-gps-projection-marker.is-actionable {
    cursor: pointer;
}
.siteplan-gps-projection-marker.is-actionable:hover,
.floorplan-gps-projection-marker.is-actionable:hover {
    opacity: 1;
    z-index: 9;
}
.plan-gps-projection-core {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px dashed currentColor;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
    font-size: 13px;
}
.plan-gps-projection-label {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 190px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    color: var(--color-text);
    border: 1px dashed color-mix(in srgb, var(--color-primary) 55%, transparent);
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
@media (max-width: 575.98px) {
    .plan-calibration-metrics { grid-template-columns: 1fr; }
}

/* v26.16.4 - reusable calibration meshes */
.plan-mesh-panel .card-header,
.plan-mesh-panel.siteplan-palette-section { border-color: var(--color-border); }
.plan-mesh-summary { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.65rem .75rem; border:1px solid var(--color-border); border-radius:.6rem; background:color-mix(in srgb, var(--color-card) 88%, var(--color-interactive) 12%); }
.plan-mesh-summary span { color:var(--color-text-secondary); font-size:.78rem; }
.plan-mesh-builder > summary { cursor:pointer; padding:.75rem 1rem; font-weight:600; color:var(--color-text); }
.plan-mesh-source-checks { display:flex; flex-direction:column; gap:.35rem; max-height:16rem; overflow:auto; padding-right:.2rem; }
.plan-mesh-source-check { display:flex; gap:.55rem; align-items:flex-start; padding:.55rem .6rem; border:1px solid var(--color-border); border-radius:.55rem; background:var(--color-card); cursor:pointer; }
.plan-mesh-source-check span { display:flex; flex-direction:column; min-width:0; }
.plan-mesh-source-check strong { font-size:.86rem; color:var(--color-text); }
.plan-mesh-source-check small { color:var(--color-text-secondary); line-height:1.25; }
.plan-calibration-mesh-svg { position:absolute; inset:0; width:100%; height:100%; z-index:8; pointer-events:none; overflow:visible; }
.plan-calibration-mesh-svg polyline { fill:color-mix(in srgb, var(--color-interactive) 8%, transparent); stroke:var(--color-interactive); stroke-width:.55; stroke-dasharray:1.6 1.1; vector-effect:non-scaling-stroke; }
.plan-calibration-mesh-point { position:absolute; transform:translate(-50%,-50%); z-index:11; border:0; background:transparent; padding:0; cursor:grab; touch-action:none; color:var(--color-text); }
.plan-calibration-mesh-point:active { cursor:grabbing; }
.plan-calibration-mesh-point > span { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--color-interactive); color:#fff; border:2px solid color-mix(in srgb, #fff 80%, var(--color-interactive)); box-shadow:0 2px 10px rgba(0,0,0,.35); font-weight:700; }
.plan-calibration-mesh-point > small { position:absolute; top:2.15rem; left:50%; transform:translateX(-50%); white-space:nowrap; max-width:11rem; overflow:hidden; text-overflow:ellipsis; padding:.15rem .4rem; border-radius:.35rem; background:color-mix(in srgb, var(--color-card) 90%, transparent); color:var(--color-text); font-size:.7rem; box-shadow:0 1px 5px rgba(0,0,0,.25); pointer-events:none; }
.plan-mesh-align-controls.is-dirty #siteMeshSave,
.plan-mesh-align-controls.is-dirty #floorMeshSave { box-shadow:0 0 0 .18rem color-mix(in srgb, var(--color-interactive) 24%, transparent); }


/* v26.16.5 - GPS checkpoint positioning from aligned calibration mesh */
.plan-position-gps-derived {
    --gps-derived-accent: color-mix(in srgb, var(--color-primary) 82%, white);
}
.plan-position-gps-derived .siteplan-image-marker-core,
.plan-position-gps-derived .floorplan-pin-core {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 2px 8px rgba(0,0,0,.28);
}
.plan-gps-derived-badge {
    position: absolute;
    left: 50%;
    top: calc(100% + 1.75rem);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .08rem .35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 88%, var(--color-surface));
    color: #fff;
    border: 1px solid color-mix(in srgb, #fff 30%, transparent);
    box-shadow: 0 1px 5px rgba(0,0,0,.25);
    font-size: .58rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
}
.floorplan-gps-candidate { cursor: pointer; opacity: .9; }
.floorplan-gps-candidate:hover,
.floorplan-gps-candidate:focus-visible { opacity: 1; z-index: 12; }
.floorplan-gps-candidate:disabled { opacity: .55; cursor: wait; }

/* v26.16.6 - point-by-point mesh alignment / best-fit GPS calibration */
.plan-calibration-mesh-point.is-dragging > span {
    transform: scale(1.12);
    box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--color-interactive) 28%, transparent), 0 4px 14px rgba(0,0,0,.42);
}
.plan-mesh-align-controls.is-dirty .plan-mesh-summary {
    border-color: color-mix(in srgb, var(--color-interactive) 58%, var(--color-border));
}


/* v26.16.7 - Site Plan / Floorplan editor tidy-up */
.plan-image-frame {
    margin: 1rem;
    border: 2px solid color-mix(in srgb, var(--color-border) 78%, var(--color-highlight) 22%);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--color-card) 94%, #000 6%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-highlight) 10%, transparent),
                0 8px 24px rgba(0,0,0,.12);
}
.floorplan-map-body .plan-image-frame {
    width: calc(100% - 2rem);
}
.plan-image-frame .floorplan-canvas {
    border-width: 1px;
    border-color: color-mix(in srgb, var(--color-border) 82%, #000 18%);
}
@media (max-width: 767.98px) {
    .plan-image-frame {
        margin: .65rem;
    }
    .floorplan-map-body .plan-image-frame {
        width: calc(100% - 1.3rem);
    }
}

.plan-collapsible-panel {
    overflow: hidden;
}
.plan-collapsible-panel > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.plan-collapsible-panel > summary::-webkit-details-marker {
    display: none;
}
.plan-collapsible-summary {
    margin: 0 !important;
}
.plan-collapsible-summary:hover {
    background: color-mix(in srgb, var(--color-bg-secondary) 84%, var(--color-interactive) 16%);
}
.plan-collapse-icon {
    transition: transform .18s ease;
}
.plan-collapsible-panel[open] > .plan-collapsible-summary .plan-collapse-icon {
    transform: rotate(180deg);
}
details.siteplan-palette-section.plan-collapsible-panel {
    padding: 0;
}
details.siteplan-palette-section.plan-collapsible-panel > .siteplan-palette-heading {
    margin: 0;
    padding: .8rem;
}
details.siteplan-palette-section.plan-collapsible-panel > .siteplan-source-list,
details.siteplan-palette-section.plan-collapsible-panel > .plan-mesh-builder,
details.siteplan-palette-section.plan-collapsible-panel > .plan-mesh-align-controls {
    margin-left: .8rem;
    margin-right: .8rem;
}
details.siteplan-palette-section.plan-collapsible-panel > .siteplan-source-list {
    margin-bottom: .8rem;
}

.plan-context-menu {
    position: fixed;
    z-index: 1100;
    min-width: 210px;
    max-width: min(320px, calc(100vw - 16px));
    padding: .35rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-highlight) 18%);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--color-card) 96%, #000 4%);
    color: var(--color-text);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.plan-context-menu-title {
    padding: .45rem .55rem .35rem;
    color: var(--color-text-secondary);
    font-size: .72rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plan-context-menu-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .55rem .6rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    font-size: .82rem;
}
.plan-context-menu-item:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-interactive) 18%, transparent);
}
.plan-context-menu-item.danger {
    color: var(--color-danger, #ef4444);
}
.plan-context-menu-item.danger:hover:not(:disabled) {
    background: color-mix(in srgb, #ef4444 14%, transparent);
}
.plan-context-menu-item:disabled {
    color: var(--color-text-muted);
    cursor: default;
    opacity: .75;
}

.floorplan-floor-tab[data-floor-id] {
    position: relative;
}
.floorplan-page[data-mode="edit"] .floorplan-floor-tab[data-floor-id] {
    cursor: context-menu;
}
.floorplan-floor-tabs-sortable .floorplan-floor-tab[data-floor-id] {
    cursor: grab;
}
.floorplan-floor-tabs-sortable .floorplan-floor-tab[data-floor-id]:active {
    cursor: grabbing;
}

/* v26.16.8 - Unified Site Plan / Floorplan editor layout */
.plan-image-management-card {
    border-color: color-mix(in srgb, var(--color-border) 82%, var(--color-highlight) 18%);
    background: color-mix(in srgb, var(--color-card) 97%, var(--color-interactive) 3%);
}
.plan-image-management-card .card-body {
    padding: .9rem 1rem;
}
.plan-image-management-title {
    min-width: 12rem;
    max-width: 20rem;
}
.plan-image-management-title h6 {
    color: var(--color-text);
    font-weight: 700;
}
.plan-image-upload-form {
    min-width: 0;
}
.plan-image-upload-form .form-control[type="file"] {
    min-width: 14rem;
}
.plan-mesh-selected-actions {
    background: color-mix(in srgb, var(--color-card) 96%, var(--color-interactive) 4%);
}
.plan-mesh-inline-editor {
    background: color-mix(in srgb, var(--color-card) 92%, var(--color-bg-secondary) 8%);
}
.siteplan-main-row .floorplan-editor-card .siteplan-source-list {
    max-height: 19rem;
    overflow-y: auto;
}
.siteplan-main-row .floorplan-editor-card .siteplan-source-item {
    width: 100%;
}
@media (min-width: 1400px) {
    .siteplan-main-row > .col-xxl-9,
    .floorplan-live-main-row > .col-xxl-9 {
        align-self: flex-start;
    }
}
@media (max-width: 767.98px) {
    .plan-image-management-title {
        min-width: 0;
        max-width: none;
    }
    .plan-image-upload-form .form-control[type="file"] {
        min-width: 0;
    }
}


/* v26.16.12 - Edit plan placed / unplaced management */
.plan-placement-groups {
  max-height: 520px;
  overflow-y: auto;
}

.plan-placement-section + .plan-placement-section {
  border-top: 1px solid var(--color-border);
}

.plan-placement-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .8rem .45rem;
  color: var(--color-text-secondary);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.plan-placement-list {
  display: flex;
  flex-direction: column;
  gap: .42rem;
  padding: 0 .7rem .75rem;
}

.plan-placement-list.siteplan-source-list,
.plan-placement-list.floorplan-checkpoint-source-list {
  max-height: none;
  overflow: visible;
}

.plan-placement-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .58rem .62rem;
  border: 1px solid var(--color-border);
  border-radius: .6rem;
  background: var(--color-bg-secondary);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}

.plan-placement-row:hover,
.plan-placement-row:focus-visible {
  border-color: var(--color-highlight);
  background: rgba(103,40,142,.14);
}

.plan-placement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  color: var(--color-highlight);
  flex: 0 0 auto;
}

.plan-placement-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.plan-placement-copy strong,
.plan-placement-copy small {
  display: block;
}

.plan-placement-copy strong {
  overflow: hidden;
  color: var(--color-text);
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-placement-copy small {
  margin-top: .08rem;
  color: var(--color-text-secondary);
  font-size: .66rem;
}

.plan-placement-remove {
  flex: 0 0 auto;
  padding: .22rem .42rem;
  line-height: 1.1;
}

.plan-placement-gps {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: .66rem;
  font-weight: 700;
}

.plan-placement-empty {
  padding: .65rem .2rem .8rem;
  color: var(--color-text-secondary);
  font-size: .76rem;
}

/* ============================================================
   MISSION: Patrol v26.16.15 - Live Plan pop-out workspace
   ============================================================ */
body.plan-popout-body > .navbar {
  display: none !important;
}

body.plan-popout-body > .d-flex {
  height: 100vh;
  min-height: 100vh !important;
  overflow: hidden;
}

body.plan-popout-body > .d-flex > .sidebar {
  display: none !important;
}

body.plan-popout-body > .d-flex > main {
  min-width: 0;
  height: 100vh;
  padding: 0 !important;
  overflow: hidden;
}

body.plan-popout-body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.plan-popout-host {
  width: 100vw;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
}

.plan-popout-mode {
  width: 100%;
  max-width: none;
  height: 100vh;
  padding: .65rem !important;
  overflow: hidden;
}

.plan-popout-mode .plan-page-header,
.plan-popout-mode .plan-page-selector {
  display: none !important;
}

.plan-popout-mode .siteplan-main-row,
.plan-popout-mode .floorplan-live-main-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: .65rem;
  width: 100%;
  height: 100%;
  margin: 0;
}

.plan-popout-mode .plan-summary-column,
.plan-popout-mode .plan-map-column {
  width: 100%;
  max-width: none;
  padding: 0;
}

.plan-popout-mode .plan-summary-column {
  flex: 0 0 auto;
}

.plan-popout-mode .plan-popout-summary {
  margin: 0 !important;
}

.plan-popout-mode .plan-popout-summary > .card-body {
  padding: .7rem;
}

.plan-popout-mode .plan-popout-summary .floorplan-live-totals {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: .6rem;
}

.plan-popout-mode .plan-popout-summary .floorplan-side-stat-card .card-body {
  padding: .65rem .8rem;
}

.plan-popout-mode .plan-popout-summary .floorplan-stat-label {
  min-height: 0;
  margin-bottom: .25rem;
}

.plan-popout-mode .plan-popout-summary .floorplan-stat-value {
  margin-top: 0;
  font-size: 1.45rem;
}

.plan-popout-mode .plan-map-column {
  flex: 1 1 auto;
  min-height: 0;
}

.plan-popout-mode .plan-map-column > .floorplan-map-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

.plan-popout-mode .plan-map-column > .floorplan-map-card > .floorplan-map-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.plan-popout-mode .floorplan-scroll-area,
.plan-popout-mode .siteplan-image-viewport {
  height: calc(100% - 1rem);
  min-height: 0;
  max-height: none;
  margin: .5rem;
}

.plan-popout-mode .floorplan-map-body .plan-image-frame {
  width: calc(100% - 1rem);
}

.plan-popout-mode .siteplan-map-body,
.plan-popout-mode .siteplan-osm-map-wrap,
.plan-popout-mode .siteplan-osm-map {
  height: 100%;
  min-height: 0;
}

.plan-popout-mode .siteplan-location-search-live {
  width: min(680px, calc(100% - 86px));
}

.plan-popout-mode .plan-tools-column {
  position: fixed;
  z-index: 1080;
  top: 0;
  right: 0;
  width: 0 !important;
  height: 100vh;
  padding: 0 !important;
  pointer-events: none;
}

.plan-popout-mode .plan-popout-drawer {
  --plan-drawer-offset: 0px;
  position: fixed;
  z-index: 1082;
  top: calc(var(--plan-drawer-center-y, 50vh) + var(--plan-drawer-offset));
  right: var(--plan-drawer-right, .65rem);
  width: min(410px, calc(100vw - 62px));
  max-height: min(72vh, calc(100vh - 1.3rem));
  margin: 0 !important;
  overflow: auto;
  border-radius: .75rem 0 0 .75rem;
  box-shadow: -10px 12px 30px rgba(0,0,0,.28);
  transform: translateY(-50%) translateX(calc(100% - 68px));
  transition: transform .18s ease, box-shadow .18s ease;
  pointer-events: auto;
}

.plan-popout-mode .plan-popout-drawer-route {
  --plan-drawer-offset: 0px;
}

.plan-popout-mode .plan-popout-drawer-details {
  --plan-drawer-offset: 62px;
}

.plan-popout-mode .plan-popout-drawer:not(.plan-popout-drawer-route):not(.plan-popout-drawer-details) {
  --plan-drawer-offset: -62px;
}

.plan-popout-mode .plan-popout-drawer[open] {
  z-index: 1090;
  transform: translateY(-50%) translateX(0);
  box-shadow: -16px 18px 42px rgba(0,0,0,.38);
}

.plan-popout-mode .plan-popout-drawer:not([open]) {
  height: 54px;
  overflow: hidden;
}

.plan-popout-mode .plan-popout-drawer:not([open]) > .plan-collapsible-summary {
  width: 68px;
  min-height: 54px;
  padding: 0;
  justify-content: center;
  gap: .25rem;
  border-bottom: 0;
  border-radius: .7rem 0 0 .7rem;
}

.plan-popout-mode .plan-popout-drawer:not([open]) > .plan-collapsible-summary > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-popout-mode .plan-popout-drawer:not([open]) > .plan-collapsible-summary h5 {
  width: 28px;
  height: 28px;
  margin: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  white-space: nowrap;
}

.plan-popout-mode .plan-popout-drawer:not([open]) > .plan-collapsible-summary h5 > i {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  color: var(--color-highlight);
  font-size: 1.25rem;
}

.plan-popout-mode .plan-popout-drawer:not([open]) > .plan-collapsible-summary .plan-collapse-icon {
  display: inline-block;
  flex: 0 0 auto;
  color: var(--color-text-secondary);
  font-size: .72rem;
  transform: rotate(90deg);
}

.plan-popout-mode .plan-popout-drawer[open] > .plan-collapsible-summary {
  position: sticky;
  z-index: 2;
  top: 0;
}

.plan-popout-mode .plan-popout-drawer > .card-body {
  background: var(--color-card);
}

@media (max-width: 767.98px) {
  .plan-popout-mode {
    padding: .4rem !important;
  }

  .plan-popout-mode .siteplan-main-row,
  .plan-popout-mode .floorplan-live-main-row {
    gap: .4rem;
  }

  .plan-popout-mode .plan-popout-drawer {
    width: min(360px, calc(100vw - 54px));
  }

  .plan-popout-mode .plan-popout-summary .floorplan-live-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MISSION: Patrol v26.17.2 - patrol accountability */
.event-accountability-card {
  border-color: color-mix(in srgb, var(--color-highlight) 32%, var(--color-border));
}

.event-accountability-reason {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.65rem;
  background: var(--color-bg-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.event-accountability-list {
  padding-bottom: 0;
}

.ops-accountability-section {
  border-color: color-mix(in srgb, var(--color-highlight) 32%, var(--color-border));
}

.ops-accountability-reason {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 0.6rem;
  background: var(--color-bg-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.ops-break-anywhere {
  overflow-wrap: anywhere;
}

/* MISSION: Patrol v26.17.2.1 - accountability reason formatting hotfix */
.event-accountability-reason,
.ops-accountability-reason {
  white-space: normal;
}

.event-accountability-reason > div:first-child,
.ops-accountability-reason > div:first-child {
  margin-bottom: 0.35rem !important;
  font-weight: 600;
}

.event-accountability-reason > div:last-child,
.ops-accountability-reason > div:last-child {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}


/* MISSION: Patrol v26.17.3 - occurrence accountability balance */
.event-accountability-wide .card-body {
  padding: 1rem;
}

.event-accountability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 1rem 1.25rem;
  align-items: start;
}

.event-accountability-wide .event-accountability-reason {
  margin: 0;
  min-height: 100%;
}

.event-accountability-wide .event-accountability-list {
  min-width: 0;
}

.event-accountability-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 1199.98px) {
  .event-accountability-grid {
    grid-template-columns: 1fr;
  }

  .event-accountability-wide .event-accountability-reason {
    min-height: auto;
  }
}

/* MISSION: Patrol v26.18.0 - Patrol History */
.patrol-history-table tbody tr,
.patrol-history-checkpoint-table tbody tr,
.patrol-history-observation-table tbody tr {
    transition: background-color .15s ease;
}

.patrol-history-table tbody tr:hover,
.patrol-history-checkpoint-table tbody tr:hover,
.patrol-history-observation-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}

.patrol-history-late-note {
    color: var(--color-warning);
    margin-top: .2rem;
}

.patrol-history-sequence {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    font-weight: 700;
}

.patrol-history-event-link {
    color: var(--color-text-primary);
    font-weight: 600;
    text-decoration: none;
}

.patrol-history-event-link:hover {
    color: var(--color-accent);
}

.patrol-history-details-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
}

.patrol-history-details-summary::-webkit-details-marker {
    display: none;
}

.patrol-history-details-summary::after {
    content: "\F282";
    font-family: bootstrap-icons;
    margin-left: auto;
    transition: transform .15s ease;
}

.patrol-history-evidence[open] > .patrol-history-details-summary::after {
    transform: rotate(180deg);
}

.patrol-history-evidence > .table-responsive {
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1200px) {
    .patrol-history-filter-card .patrol-history-date-col {
        flex: 0 0 auto;
        width: 12.5%;
    }
}

@media (max-width: 767.98px) {
    .patrol-history-table,
    .patrol-history-checkpoint-table,
    .patrol-history-observation-table {
        min-width: 850px;
    }
}