* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;

  width: 100%;
  height: 100%;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color:
    #14262e;

  background:
    #eef2f1;
}

/* =============================================================================
   HEADER
   ============================================================================= */

.top-bar {
  height: 82px;

  padding:
    14px
    22px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  background:
    #14262e;

  color:
    white;
}

.brand h1 {
  margin: 0;

  font-size:
    25px;

  letter-spacing:
    0.7px;
}

.brand p {
  margin:
    4px
    0
    0;

  color:
    #aabcc0;

  font-size:
    13px;
}

.header-right {
  display: flex;

  align-items:
    center;

  gap:
    10px;
}

.live-summary {
  padding:
    8px
    13px;

  border-radius:
    20px;

  background:
    #263c45;

  font-size:
    13px;

  font-weight:
    700;
}

.server-status {
  padding:
    8px
    14px;

  border-radius:
    20px;

  font-size:
    13px;

  font-weight:
    700;
}

.server-status.connected {
  background:
    #dff3e6;

  color:
    #146b32;
}

.server-status.disconnected {
  background:
    #f6deda;

  color:
    #8c271a;
}

/* =============================================================================
   MAIN LAYOUT
   ============================================================================= */

.layout {
  height:
    calc(
      100vh -
      82px
    );

  display:
    grid;

  grid-template-columns:
    350px
    minmax(
      0,
      1fr
    );
}

/* =============================================================================
   DEVICE PANEL
   ============================================================================= */

.device-panel {
  padding:
    18px;

  overflow-y:
    auto;

  background:
    white;

  border-right:
    1px solid
    #ccd6d4;
}

.device-panel-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    12px;
}

.device-panel-header h2 {
  margin:
    0;
}

.device-panel-header p {
  margin:
    4px
    0
    0;

  color:
    #718186;

  font-size:
    11px;
}

#deviceCount {
  min-width:
    32px;

  padding:
    5px
    8px;

  text-align:
    center;

  border-radius:
    15px;

  background:
    #e7ece9;

  font-size:
    12px;

  font-weight:
    700;
}

/* =============================================================================
   OFFLINE DEVICE FILTER
   ============================================================================= */

.device-filter-row {
  margin:
    0
    0
    8px;

  padding:
    2px
    3px;

  min-height:
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    7px;

  border:
    none;

  border-radius:
    0;

  background:
    transparent;
}

.offline-toggle {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  margin:
    0;

  padding:
    0;

  color:
    #596a70;

  font-size:
    11px;

  font-weight:
    600;

  cursor:
    pointer;

  user-select:
    none;
}

.offline-toggle input {
  width:
    13px;

  height:
    13px;

  margin:
    0;

  cursor:
    pointer;

  accent-color:
    #14262e;
}

.offline-count {
  min-width:
    18px;

  padding:
    1px
    5px;

  border-radius:
    8px;

  background:
    #ecefee;

  color:
    #68777b;

  text-align:
    center;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    14px;

  white-space:
    nowrap;
}

.empty-message {
  padding:
    14px
    0;

  color:
    #6f7d80;

  line-height:
    1.5;
}

/* =============================================================================
   DEVICE CARDS
   ============================================================================= */

.device-card {
  width:
    100%;

  margin:
    0
    0
    10px;

  padding:
    14px;

  border:
    1px solid
    #d1dcda;

  border-radius:
    10px;

  background:
    #f8faf9;

  color:
    #14262e;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color
    0.15s ease,
    background
    0.15s ease,
    transform
    0.15s ease,
    opacity
    0.15s ease;
}

.device-card:hover {
  background:
    #eef4f2;

  transform:
    translateY(
      -1px
    );
}

.device-card.selected {
  border:
    2px solid
    #14262e;

  background:
    #e3ece9;

  box-shadow:
    0
    0
    0
    2px
    rgba(
      20,
      38,
      46,
      0.08
    );
}

.device-card.offline-device {
  border-color:
    #d4d8d7;

  background:
    #f1f3f2;

  opacity:
    0.72;
}

.device-card.connection-lost-device {
  border-color:
    #e7b86d;

  background:
    #fff8ed;
}

.device-name {
  font-size:
    15px;

  font-weight:
    700;

  overflow-wrap:
    anywhere;
}

.device-unit {
  margin-top: 4px;
  color: #52656b;
  font-size: 12px;
  font-weight: 700;
}

.device-coordinates {
  margin-top:
    10px;

  font-family:
    monospace;

  font-size:
    12px;
}

.device-last-update {
  margin-top:
    6px;

  color:
    #718186;

  font-size:
    11px;
}

/* =============================================================================
   TEMPORARY MARKER VISIBILITY CONTROL
   ============================================================================= */

.device-card {
  cursor:
    pointer;
}

.device-card-actions {
  margin-top:
    6px;

  display:
    flex;

  justify-content:
    flex-end;

  align-items:
    center;
}

.marker-visibility-button {
  padding:
    3px
    7px;

  border:
    1px solid
    #d3dad8;

  border-radius:
    5px;

  background:
    #f7f9f8;

  color:
    #5d6b70;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    14px;

  cursor:
    pointer;
}

.marker-visibility-button:hover {
  background:
    #edf1ef;

  border-color:
    #bac5c1;
}

.marker-restore-button {
  border-color:
    #aab6b2;

  background:
    #ecefed;

  color:
    #34464c;
}

.marker-temporarily-hidden {
  border-style:
    dashed;
}

/* =============================================================================
   STATUS
   ============================================================================= */

.status-badge,
.popup-status {
  display:
    inline-block;

  padding:
    4px
    7px;

  border-radius:
    6px;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.5px;

  white-space:
    nowrap;
}

.status-live {
  background:
    #dcefe2;

  color:
    #166534;
}

.status-connected {
  background:
    #dceaf1;

  color:
    #245b72;
}

.status-offline {
  background:
    #e7e7e7;

  color:
    #555;
}

.status-lost {
  background:
    #f7e6cf;

  color:
    #8a5200;
}

.status-unknown {
  background:
    #eeeeee;

  color:
    #555;
}

/* =============================================================================
   DUTY TYPE BADGES
   ============================================================================= */

.duty-badge,
.popup-duty {
  display:
    inline-block;

  padding:
    4px
    7px;

  border-radius:
    6px;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.4px;

  white-space:
    nowrap;
}

.duty-stationary {
  background:
    #064E3B;

  color:
    #ffffff;
}

.duty-moving {
  background:
    #082F49;

  color:
    #ffffff;
}

.duty-unknown {
  background:
    #e5e7eb;

  color:
    #4b5563;
}

.duty-last-known {
  background:
    #eceeed;

  color:
    #596568;
}

/* =============================================================================
   MAP
   ============================================================================= */

.map-panel {
  min-width:
    0;
}

#map {
  width:
    100%;

  height:
    100%;
}

/* =============================================================================
   CAIMS MAP MARKERS — SRV-003
   ============================================================================= */

/*
  No permanent outer circle/ring.

  Stationary:
    green full human silhouette.

  Moving:
    blue recognizable car.

  Selection is handled separately by the dotted Leaflet halo.
*/

.caims-duty-marker {
  width:
    48px !important;

  height:
    48px !important;

  margin:
    0;

  padding:
    0;

  border:
    none;

  background:
    transparent;
}

.duty-marker-symbol {
  width:
    48px;

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    none;

  background:
    transparent;

  box-shadow:
    none;
}

.duty-marker-image {
  display: block;
  pointer-events: none;
  user-select: none;
  max-width: none;
}

.caims-duty-marker-stationary .duty-marker-image-stationary {
  width: 38px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.42));
}

.caims-duty-marker-moving .duty-marker-image-moving {
  width: 48px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.30));
}

.caims-marker-connection-lost .duty-marker-image {
  opacity: 0.68;
  filter:
    drop-shadow(0 0 3px rgba(217, 145, 28, 0.95))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
}

.caims-duty-marker-offline .duty-marker-image {
  opacity: 0.60;
  filter:
    grayscale(100%)
    brightness(0.88)
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}

/* =============================================================================
   STATIONARY — FULL HUMAN
   ============================================================================= */

.caims-duty-marker-stationary
.human-part {
  fill:
    #000000;

  stroke:
    #ffffff;

  stroke-width:
    1.1;

  stroke-linejoin:
    round;

  paint-order:
    stroke fill;
}

.caims-duty-marker-stationary .spy-hat-band,
.caims-duty-marker-stationary .spy-face-shadow {
  fill: #000000;
}

.caims-duty-marker-stationary .spy-lapel {
  fill: #000000;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 0.55;
  stroke-linejoin: round;
}

.caims-duty-marker-stationary .spy-tie {
  fill: #ffffff;
  opacity: 0.92;
}

.caims-duty-marker-stationary
.duty-marker-symbol svg {
  width:
    38px;

  height:
    52px;

  overflow:
    visible;

  filter:
    drop-shadow(
      0
      2px
      3px
      rgba(
        0,
        0,
        0,
        0.42
      )
    );
}

/* =============================================================================
   MOVING — PROPER CAR
   ============================================================================= */

.caims-duty-marker-moving
.duty-marker-symbol svg {
  width:
    48px;

  height:
    40px;

  overflow:
    visible;

  filter:
    drop-shadow(
      0
      2px
      2px
      rgba(
        0,
        0,
        0,
        0.30
      )
    );
}

.caims-duty-marker-moving
.car-body {
  fill:
    #2563eb;

  stroke:
    rgba(
      255,
      255,
      255,
      0.95
    );

  stroke-width:
    0.8;

  paint-order:
    stroke fill;
}

.caims-duty-marker-moving
.car-window {
  fill:
    #172554;
}

.caims-duty-marker-moving .car-side-panel {
  fill: #1d4ed8;
  stroke: rgba(255, 255, 255, 0.58);
  stroke-width: 0.55;
}

.caims-duty-marker-moving .car-window-divider {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 0.8;
  opacity: 0.8;
}

.caims-duty-marker-moving .car-hood {
  fill: #3b82f6;
  opacity: 0.9;
}

.caims-duty-marker-moving .car-highlight {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.15;
  stroke-linecap: round;
  opacity: 0.9;
}

.caims-duty-marker-moving
.car-wheel {
  fill:
    #1f2937;
}

.caims-duty-marker-moving
.car-wheel-center {
  fill:
    #d1d5db;
}

.caims-duty-marker-moving
.car-detail {
  fill:
    #ffffff;
}

/* =============================================================================
   UNKNOWN DUTY
   ============================================================================= */

.caims-duty-marker-unknown
.duty-marker-symbol svg {
  width:
    27px;

  height:
    31px;

  filter:
    drop-shadow(
      0
      2px
      2px
      rgba(
        0,
        0,
        0,
        0.22
      )
    );
}

.caims-duty-marker-unknown
.unknown-device-body {
  fill:
    #667085;
}

.caims-duty-marker-unknown
.device-screen {
  fill:
    #ffffff;
}

/* =============================================================================
   CONNECTION LOST
   ============================================================================= */

/*
  Preserve last-known human/car semantic.
  Reduce certainty and add a subtle amber attention shadow.

  No solid permanent ring.
*/

.caims-marker-connection-lost
.duty-marker-symbol {
  opacity:
    0.68;
}

.caims-marker-connection-lost
.duty-marker-symbol svg {
  filter:
    drop-shadow(
      0
      0
      3px
      rgba(
        217,
        145,
        28,
        0.95
      )
    )
    drop-shadow(
      0
      2px
      2px
      rgba(
        0,
        0,
        0,
        0.22
      )
    );
}

/* =============================================================================
   OFFLINE REVEALED
   ============================================================================= */

.caims-duty-marker-offline
.duty-marker-symbol {
  opacity:
    0.60;
}

/* Remove active green/blue duty appearance. */

.caims-duty-marker-offline
.human-part,
.caims-duty-marker-offline
.spy-hat-band,
.caims-duty-marker-offline
.spy-face-shadow,
.caims-duty-marker-offline
.spy-lapel,
.caims-duty-marker-offline
.car-body,
.caims-duty-marker-offline
.car-side-panel,
.caims-duty-marker-offline
.car-hood,
.caims-duty-marker-offline
.unknown-device-body {
  fill:
    #7b8588 !important;
}

.caims-duty-marker-offline
.car-window {
  fill:
    #e5e7eb !important;
}

.caims-duty-marker-offline .car-window-divider,
.caims-duty-marker-offline .car-highlight {
  stroke: #d1d5db !important;
}

.caims-duty-marker-offline
.car-wheel {
  fill:
    #5f6769 !important;
}

.caims-duty-marker-offline
.car-wheel-center,
.caims-duty-marker-offline
.car-detail,
.caims-duty-marker-offline
.device-screen {
  fill:
    #f5f6f6 !important;
}

/* =============================================================================
   PERMANENT DEVICE NAME
   ============================================================================= */

.device-marker-label {
  padding:
    4px
    7px;

  border:
    1px solid
    #14262e;

  border-radius:
    5px;

  background:
    rgba(
      255,
      255,
      255,
      0.96
    );

  color:
    #14262e;

  font-size:
    11px;

  font-weight:
    700;

  box-shadow:
    0
    1px
    4px
    rgba(
      0,
      0,
      0,
      0.20
    );
}

.device-marker-label-content,
.popup-unit,
.popup-duty-slot,
.device-unit,
.device-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.device-marker-label {
  max-width: 180px;
  white-space: normal;
  text-align: center;
}

.device-marker-label-content {
  width: max-content;
  max-width: 160px;
  flex-direction: column;
  gap: 2px;
}

.device-marker-label-content > span:last-child {
  display: block;
  width: max-content;
  max-width: 160px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sector-shape {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  align-items: center;
  justify-content: center;
  color: #33474f;
  font-size: 15px;
  line-height: 1;
}

.sector-shape-empty { display: none; }
.device-name-text { min-width: 0; overflow-wrap: anywhere; }
.device-sector-only { min-height: 17px; }

.device-marker-label::before {
  display:
    none;
}

.offline-marker-label {
  border-color:
    #8a9496;

  color:
    #626d70;

  background:
    rgba(
      241,
      243,
      242,
      0.96
    );
}

.connection-lost-marker-label {
  border-color:
    #d49732;

  color:
    #7b5008;

  background:
    rgba(
      255,
      248,
      237,
      0.97
    );
}

/* =============================================================================
   POPUP
   ============================================================================= */

.map-popup {
  min-width:
    220px;

  max-width:
    min(280px, calc(100vw - 72px));

  line-height:
    1.35;
}

.popup-name-header {
  margin-bottom: 7px;
  padding: 0 20px 7px;
  border-bottom: 1px solid #dce4e6;
  text-align: center;
}

.popup-name-header strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.popup-status {
  margin-bottom:
    0;
}

.popup-duty {
  margin: 0;
}

.popup-coordinate {
  font-family:
    monospace;

  font-weight:
    600;
}

.popup-time {
  color:
    #66777b;

  font-size:
    11px;
}

/* =============================================================================
   LEAFLET ROUTE PRESENTATION
   ============================================================================= */

/*
  Route visibility itself is controlled in app.js.

  No CSS rule is used to decide which device track is visible.

  This avoids confusing stored route state with presentation state.
*/

.leaflet-interactive {
  transition:
    opacity
    0.12s ease;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (
  max-width:
  800px
) {
  .layout {
    height:
      auto;

    grid-template-columns:
      1fr;

    grid-template-rows:
      auto
      70vh;
  }

  .device-panel {
    max-height:
      40vh;

    border-right:
      none;

    border-bottom:
      1px solid
      #ccd6d4;
  }

  .header-right {
    gap:
      5px;
  }

  .live-summary {
    display:
      none;
  }

}

/* =============================================================================
   TRACK VISIBILITY CONTROLS
   ============================================================================= */

.track-control-row {
  margin:
    0
    0
    8px;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    25px;
}

.track-control-label {
  margin-right:
    2px;

  color:
    #68777b;

  font-size:
    10px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.35px;
}

.track-control-button {
  padding:
    4px
    7px;

  border:
    1px solid
    #d2d9d7;

  border-radius:
    6px;

  background:
    #f7f9f8;

  color:
    #43565c;

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background
    0.12s ease,
    border-color
    0.12s ease,
    color
    0.12s ease;
}

.track-control-button:hover:not(:disabled) {
  background:
    #edf2f0;
}

.track-control-button:disabled {
  opacity:
    0.40;

  cursor:
    default;
}

/* All currently visible Stationary devices selected */

.stationary-track-control.active {
  border-color:
    #000000;

  background:
    #e5e7eb;

  color:
    #000000;
}

/* All currently visible Moving devices selected */

.moving-track-control.active {
  border-color:
    #2563eb;

  background:
    #e5edff;

  color:
    #1d4ed8;
}

.clear-track-control {
  margin-left:
    auto;

  color:
    #6b7477;
}

.all-track-control.active {
  border-color:
    #334155;

  background:
    #e8edf2;

  color:
    #1f2937;
}

/* =============================================================================
   HISTORICAL TIME WINDOW
   ============================================================================= */

.history-window-panel {
  margin:
    0
    0
    12px;

  padding:
    10px
    11px;

  border:
    1px solid
    #d8e0de;

  border-radius:
    8px;

  background:
    #f8faf9;
}

.history-window-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}

.history-window-title {
  color:
    #596a70;

  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.45px;
}

.history-window-value {
  color:
    #24363d;

  font-size:
    11px;

  white-space:
    nowrap;
}

.history-window-slider {
  width:
    100%;

  margin:
    9px
    0
    4px;

  cursor:
    pointer;

  accent-color:
    #334155;
}

.history-window-slider:disabled {
  opacity:
    0.45;

  cursor:
    default;
}

.history-window-meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  color:
    #718186;

  font-size:
    9px;
}

.history-window-status {
  margin-top:
    6px;

  color:
    #596a70;

  font-size:
    9px;

  line-height:
    1.35;
}

.history-window-status.loading {
  color:
    #556b73;
}

.history-window-status.error {
  color:
    #9a3412;
}

/* =============================================================================
   DEVICE SECTIONS
   ============================================================================= */

.device-section {
  margin-top:
    8px;
}

.device-section-header {
  min-height:
    26px;

  padding:
    3px
    2px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  border-bottom:
    1px solid
    #dde3e1;
}

.device-section-title {
  color:
    #596a70;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.55px;
}

.device-section-count {
  min-width:
    20px;

  padding:
    1px
    6px;

  border-radius:
    9px;

  background:
    #edf1ef;

  color:
    #596a70;

  text-align:
    center;

  font-size:
    9px;

  font-weight:
    700;
}

/* =============================================================================
   OFFLINE SECTION
   ============================================================================= */

.offline-device-section {
  margin-top:
    12px;
}

.offline-section-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}

.offline-count {
  min-width:
    18px;

  padding:
    1px
    5px;

  border-radius:
    8px;

  background:
    #ecefee;

  color:
    #68777b;

  text-align:
    center;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    14px;
}

.offline-toggle {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  margin:
    0;

  padding:
    0;

  color:
    #596a70;

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

  user-select:
    none;
}

.offline-toggle input {
  width:
    12px;

  height:
    12px;

  margin:
    0;

  cursor:
    pointer;
}

.history-window-status:empty {
  display:
    none;
}

.logout-button {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.login-page {
  box-sizing: border-box;
  min-height: 100vh;
  margin: 0;
  padding: 24px 16px;
  display: grid;
  place-items: center;
  background: #eef2f6;
}

body.caims-login-page {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 52%) minmax(320px, 48%);
  align-items: center;
  overflow: hidden;
  padding: clamp(20px, 3vw, 48px);
  background-color: #031d25;
  background-image:
    linear-gradient(rgba(3, 20, 27, 0.1), rgba(3, 20, 27, 0.1)),
    url('/assets/images/login/caims-login-background.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.caims-login-page .login-card {
  grid-column: 2;
  justify-self: center;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 18px 48px rgba(7, 20, 27, 0.32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (max-width: 800px) {
  body.caims-login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
    background-image:
      linear-gradient(rgba(3, 20, 27, 0.1), rgba(3, 20, 27, 0.1)),
      url('/assets/images/login/caims-login-background-mobile.png');
    background-size: cover;
  }

  .caims-login-page .login-card {
    grid-column: auto;
  }
}

.login-card {
  box-sizing: border-box;
  width: min(380px, calc(100% - 32px));
  padding: 32px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16);
  text-align: center;
}

.login-card h1 { margin: 0; color: #14262e; letter-spacing: 0.06em; }
.login-card h2 { margin: 8px 0 24px; color: #596a70; font-size: 0.9rem; letter-spacing: 0.18em; }
.login-card form { display: grid; gap: 9px; text-align: left; }
.login-card label { color: #43545a; font-size: 0.85rem; font-weight: 700; }
.login-card input, .login-card button { box-sizing: border-box; width: 100%; padding: 11px; font: inherit; }
.login-card input { border: 1px solid #bdc9cd; border-radius: 7px; }
.login-card button { margin-top: 8px; cursor: pointer; }
.login-card button { border: 1px solid #14262e; border-radius: 7px; color: #fff; background: #14262e; font-weight: 800; text-align: center; }
.login-error { color: #b91c1c; text-align: center; }

.settings-link { color: #fff; }
.organizational-filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 10px; margin: 0 16px 14px; }
.group-filter-control { display: grid; gap: 5px; min-width: 0; color: #52656b; font-size: 0.78rem; font-weight: 800; }
.group-filter-control[hidden], .profile-menu a[hidden] { display: none !important; }
.group-filter-control select { box-sizing: border-box; width: 100%; min-width: 0; padding: 7px 28px 7px 9px; border: 1px solid #b8c6ca; border-radius: 7px; color: #14262e; background: #fff; font: inherit; }
.native-unit-filter, .native-sector-filter { position: absolute; width: 1px !important; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.group-filter-control { position: relative; }
.unit-picker-button, .unit-picker-option { display: flex; align-items: center; gap: 8px; color: #14262e; background: #fff; font: inherit; text-align: left; }
.unit-picker-button { position: relative; box-sizing: border-box; width: 100%; min-width: 0; min-height: 36px; padding: 7px 28px 7px 9px; border: 1px solid #b8c6ca; border-radius: 7px; cursor: pointer; }
.unit-picker-button::after { content: ''; position: absolute; top: 50%; right: 10px; border: 4px solid transparent; border-top-color: #52656b; transform: translateY(-1px); }
.unit-picker-button:focus-visible { border-color: #4d8798; outline: 0; box-shadow: 0 0 0 .16rem rgba(77,135,152,.18); }
.unit-picker-options { position: absolute; z-index: 2200; top: calc(100% + 4px); right: 0; left: 0; max-height: min(260px, 45vh); overflow-y: auto; padding: 4px; border: 1px solid #b8c6ca; border-radius: 7px; background: #fff; box-shadow: 0 8px 22px rgba(15,23,42,.18); }
.unit-picker-options[hidden] { display: none; }
.unit-picker-option { width: 100%; min-height: 36px; padding: 7px 6px; border: 0; border-radius: 5px; cursor: pointer; }
.unit-picker-option:hover, .unit-picker-option:focus-visible, .unit-picker-option[aria-selected="true"] { outline: 0; background: #edf3f4; }
.unit-palette-swatch { box-sizing: border-box; width: 17px; height: 17px; flex: 0 0 17px; border: 1px solid rgba(20,38,46,.35); border-radius: 50%; background: var(--unit-palette-color, transparent); }
.unit-palette-swatch-silver { border-color: #60666a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.65); }
.unit-palette-swatch-all { border-style: dashed; background: #fff; }
.profile-menu-container { position: relative; }
.profile-button { box-sizing: border-box; width: 38px; height: 38px; min-width: 38px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; }
.profile-button:hover, .profile-button[aria-expanded="true"] { background: rgba(255,255,255,.2); }
.profile-button svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.profile-menu { position: absolute; z-index: 2000; top: calc(100% + 9px); right: 0; width: 220px; padding: 8px; border: 1px solid #d7e0e3; border-radius: 10px; color: #24363d; background: #fff; box-shadow: 0 12px 32px rgba(15,23,42,.2); }
.profile-menu[hidden] { display: none; }
.profile-identity { display: grid; gap: 3px; padding: 9px 10px 11px; border-bottom: 1px solid #e2e8ea; }
.profile-identity span { color: #68787d; font-size: .75rem; overflow-wrap: anywhere; }
.profile-menu a, .profile-menu form button { box-sizing: border-box; width: 100%; display: block; margin: 3px 0 0; padding: 9px 10px; border: 0; border-radius: 6px; color: #24363d; background: transparent; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.profile-menu a:hover, .profile-menu form button:hover { background: #eef3f2; }
.checksum-value { font-family: Consolas, monospace; font-size: .78rem; overflow-wrap: anywhere; }
.default-password-warning {
  max-width: 360px;
  padding: 7px 10px;
  border-radius: 6px;
  color: #7c2d12;
  background: #fef3c7;
  font-size: 0.85rem;
}
.administration-card {
  width: min(720px, calc(100% - 32px));
  padding: 32px;
  border-radius: 12px;
  background: #fff;
}
.administration-card section { margin-top: 28px; }
.administration-card form { display: grid; gap: 10px; }
.administration-card input, .administration-card button { padding: 11px; font: inherit; }
.administration-card button { margin-top: 8px; cursor: pointer; }
.form-message { color: #166534; }
.admin-item { display: grid; gap: 0.5rem; margin: 0.75rem 0; padding: 0.75rem; border: 1px solid #ccd6df; border-radius: 6px; }

/* Groups V1 administration and role-appropriate settings */
.admin-page { align-items: start; padding: 32px 0; }
.administration-card { box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12); }
.admin-page .administration-card { width: min(1080px, calc(100% - 32px)); }
.admin-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.admin-page-header h1 { margin: 0; }
.admin-subtitle { margin: 8px 0 0; color: #5f6f75; }
.admin-header-actions, .admin-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-header-actions form { display: block; }
.secondary-button, .primary-button, .admin-item-actions button, .admin-account-item button {
  width: auto; margin: 0; padding: 9px 13px; border: 1px solid #aebbbf; border-radius: 7px;
  color: #24363d; background: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.primary-button { justify-self: start; border-color: #14262e; color: #fff; background: #14262e; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.admin-create-grid { grid-template-columns: minmax(320px, 540px); }
.admin-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.admin-overview article { display: grid; gap: 3px; padding: 16px 18px; border: 1px solid #d7e0e3; border-radius: 10px; background: #fbfcfc; }
.admin-overview strong { color: #14262e; font-size: 1.5rem; }
.admin-overview span { color: #68787d; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.admin-profile-button { color: #14262e; border-color: #aebbbf; background: #f5f8f7; }
.admin-profile-menu { color: #24363d; }
.admin-section-card { margin-top: 0 !important; padding: 22px; border: 1px solid #d7e0e3; border-radius: 10px; background: #fbfcfc; }
.admin-section-card h2 { margin: 0 0 18px; font-size: 1.15rem; }
.admin-wide-section { margin-top: 20px !important; }
.compact-form { display: grid; gap: 12px; }
.compact-form label { display: grid; gap: 6px; color: #43545a; font-weight: 700; }
.compact-form input { box-sizing: border-box; width: 100%; border: 1px solid #bdc9cd; border-radius: 7px; }
.divided-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid #d7e0e3; }
.admin-list { display: grid; gap: 12px; }
.admin-item { margin: 0; padding: 16px; border-color: #d2dcdf; border-radius: 9px; background: #fff; }
.admin-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0; }
.admin-detail-grid div, .account-summary dl div { display: grid; gap: 3px; }
.admin-detail-grid dt, .account-summary dt { color: #68787d; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.admin-detail-grid dd, .account-summary dd { margin: 0; overflow-wrap: anywhere; }
.state-badge { display: inline-block; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.state-badge.active, .state-badge.unlocked { color: #166534; background: #dcfce7; }
.state-badge.inactive, .state-badge.locked { color: #991b1b; background: #fee2e2; }
.admin-account-item { grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) auto auto; align-items: center; }
.admin-role { display: block; margin-top: 4px; color: #68787d; font-size: 0.78rem; font-weight: 800; }
.form-message.error { color: #b91c1c; }
.settings-card { width: min(620px, calc(100% - 32px)); }
.account-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }

@media (max-width: 760px) {
  .admin-page-header, .admin-header-actions { align-items: stretch; flex-direction: column; }
  .admin-grid, .admin-overview, .admin-detail-grid, .admin-account-item, .account-summary dl { grid-template-columns: 1fr; }
  .admin-header-actions .secondary-button, .admin-header-actions form button { display: block; box-sizing: border-box; width: 100%; text-align: center; }
}

/* =============================================================================
   CAIMS-SRV-022 RESPONSIVE OPERATIONAL SHELL
   Bootstrap and AdminLTE provide the component foundation; these rules keep
   the CAIMS map and existing operational controls purpose-built and compact.
   ============================================================================= */

body.caims-dashboard {
  --caims-header-height: 58px;
  --caims-panel-width: 340px;
  overflow: hidden;
  color: #26373d;
  background: #e9eef0;
}

.caims-dashboard .top-bar {
  position: relative;
  z-index: 1060;
  height: var(--caims-header-height);
  min-height: var(--caims-header-height);
  padding: 0 16px;
  border: 0;
  background: #14262e;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}

.brand-shell {
  display: flex;
  align-items: center;
  gap: 11px;
}

.caims-dashboard .brand h1 {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.09em;
}

.sidebar-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 7px;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible,
.sidebar-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
}

.sidebar-toggle span {
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.caims-dashboard .header-right {
  margin-left: auto;
}

.caims-dashboard .layout {
  position: relative;
  min-height: 0;
  height: calc(100vh - var(--caims-header-height));
  display: grid;
  grid-template-columns: var(--caims-panel-width) minmax(0, 1fr);
  grid-template-rows: 1fr;
  margin: 0;
  overflow: hidden;
  transition: grid-template-columns 180ms ease;
}

.caims-dashboard.sidebar-collapsed .layout {
  grid-template-columns: 0 minmax(0, 1fr);
}

.caims-dashboard .device-panel.operational-drawer {
  position: relative;
  inset: auto;
  width: var(--caims-panel-width);
  min-width: var(--caims-panel-width);
  max-width: none;
  height: 100%;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #ccd6d4;
  background: #fff;
  box-shadow: none;
  transition: transform 180ms ease, visibility 180ms ease;
}

.caims-dashboard.sidebar-collapsed .device-panel {
  visibility: hidden;
  transform: translateX(-100%);
}

.navbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.navbar-status .live-summary,
.navbar-status .server-status {
  padding: 5px 9px;
  font-size: 0.69rem;
  line-height: 1.2;
  white-space: nowrap;
}

.navbar-status .default-password-warning {
  width: auto;
  max-width: none;
  padding: 5px 8px;
  font-size: 0.69rem;
  line-height: 1.2;
  white-space: nowrap;
}

.warning-compact { display: none; }

.caims-dashboard .device-panel-header {
  margin-bottom: 10px;
}

.caims-dashboard .device-panel-header h2 {
  color: #20343c;
  font-size: 1.1rem;
  font-weight: 700;
}

.group-filter-control select:focus {
  border-color: #4d8798;
  box-shadow: 0 0 0 0.16rem rgba(77, 135, 152, 0.18);
}

.caims-dashboard .organizational-filter-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 13px;
}

.caims-dashboard .group-filter-control select {
  min-height: 36px;
}

.caims-dashboard .track-control-row {
  flex-wrap: wrap;
}

.caims-dashboard .device-card {
  padding: 11px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.caims-dashboard .device-card-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 8px;
  align-items: stretch;
}

.caims-dashboard .device-card-primary,
.caims-dashboard .device-card-details {
  min-width: 0;
}

.caims-dashboard .device-card-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.caims-dashboard .device-card-side {
  display: flex;
  width: max-content;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.caims-dashboard .device-card-side > .status-badge,
.caims-dashboard .device-card-side > .device-card-duty {
  align-self: flex-end;
}

.caims-dashboard .device-unit {
  margin-top: 0;
}

.caims-dashboard .device-card-tail {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 0 auto;
  text-align: right;
}

.caims-dashboard .device-card-tail > .connection-lost-countdown {
  align-self: flex-end;
}

.caims-dashboard .device-coordinates { margin-top: 5px; }
.caims-dashboard .device-last-update { margin-top: 4px; }
.caims-dashboard .device-card-actions {
  width: 100%;
  margin: auto 0 0;
  justify-content: flex-end;
}

.popup-unit {
  margin-top: 2px;
  color: #52656b;
  font-size: 0.75rem;
  font-weight: 700;
}

.popup-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  column-gap: 8px;
  row-gap: 4px;
  padding-right: 12px;
}

.popup-unit-slot {
  min-width: 0;
}

.popup-state-column {
  display: flex;
  width: max-content;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.popup-duty-slot {
  min-width: 0;
  justify-self: start;
}

.popup-duty-row {
  grid-column: 1 / -1;
  min-width: 0;
  justify-self: center;
  text-align: center;
}

.popup-state-column > .popup-status,
.popup-state-column > .connection-lost-countdown {
  align-self: flex-end;
}

.map-popup hr {
  margin: 7px 0;
}

.popup-details {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.popup-detail-row,
.popup-time {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px;
  align-items: start;
}

.popup-detail-row strong,
.popup-time strong {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.connection-lost-countdown {
  margin-top: 5px;
  color: #9a5b08;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.device-card-tail .connection-lost-countdown,
.popup-state-column .connection-lost-countdown {
  text-align: right;
}

.map-popup .connection-lost-countdown {
  margin-top: 1px;
}

.caims-dashboard .map-panel {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.caims-dashboard #map {
  min-height: 100%;
  outline: none;
}

.sidebar-backdrop,
.sidebar-backdrop[hidden] {
  display: none;
}

@media (max-width: 991.98px) {
  body.caims-dashboard {
    --caims-panel-width: min(88vw, 340px);
  }

  .caims-dashboard .layout,
  .caims-dashboard.sidebar-collapsed .layout {
    height: calc(100dvh - var(--caims-header-height));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
  }

  .caims-dashboard .device-panel.operational-drawer {
    position: fixed;
    z-index: 1050;
    top: var(--caims-header-height);
    bottom: 0;
    left: 0;
    width: var(--caims-panel-width);
    min-width: 0;
    height: auto;
    visibility: hidden;
    transform: translateX(-102%);
    pointer-events: none;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.24);
  }

  .caims-dashboard.sidebar-open .device-panel.operational-drawer {
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
  }

  .caims-dashboard .sidebar-backdrop:not([hidden]) {
    position: fixed;
    z-index: 1040;
    inset: var(--caims-header-height) 0 0;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.42);
    pointer-events: auto;
  }

  .caims-dashboard .map-panel {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (max-width: 430px) {
  .caims-dashboard .top-bar {
    padding: 0 10px;
  }

  .sidebar-toggle,
  .caims-dashboard .profile-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .caims-dashboard .profile-menu {
    position: fixed;
    top: calc(var(--caims-header-height) - 2px);
    right: 8px;
    width: min(240px, calc(100vw - 16px));
  }

  .navbar-status { gap: 4px; }
  .navbar-status .server-status { font-size: 0; }
  .navbar-status .server-status::after { font-size: 0.67rem; }
  .navbar-status .server-status.connected::after { content: "Online"; }
  .navbar-status .server-status.disconnected::after { content: "Offline"; }
  .navbar-status .default-password-warning { padding-inline: 6px; }
  .navbar-status .warning-full { display: none; }
  .navbar-status .warning-compact { display: inline; }
}

@media (max-width: 330px) {
  .caims-dashboard .organizational-filter-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caims-dashboard .layout,
  .caims-dashboard .device-panel.operational-drawer {
    transition-duration: 0.01ms;
  }
}

/* Read-only Administration workspace. */
.caims-admin-page {
  --admin-nav-width: 248px;
  min-height: 100vh;
  margin: 0;
  color: #1e293b;
  background: #f1f5f9;
}

.admin-topbar {
  position: fixed;
  z-index: 1040;
  inset: 0 0 auto 0;
  min-height: 58px;
  padding: 0 20px;
  background: #0f2747;
  box-shadow: 0 2px 10px rgba(15, 39, 71, 0.25);
}

.admin-brand { color: #fff; font-size: 1.05rem; font-weight: 500; text-decoration: none; }
.admin-brand span { font-weight: 800; letter-spacing: .05em; }
.admin-topbar-actions { display: flex; align-items: center; gap: 14px; }
.admin-identity { color: #dbeafe; font-size: .84rem; }
.admin-menu-button { display: none; border: 0; color: #fff; background: transparent; font-size: 1.5rem; }

.admin-sidebar {
  position: fixed;
  z-index: 1030;
  top: 58px;
  bottom: 0;
  left: 0;
  display: flex;
  width: var(--admin-nav-width);
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  padding: 20px 14px;
  color: #cbd5e1;
  background: #172033;
}

.admin-sidebar nav { display: grid; gap: 4px; }
.admin-sidebar a,
.admin-sidebar button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  color: #cbd5e1;
  background: transparent;
  text-align: left;
  text-decoration: none;
}
.admin-sidebar a:hover,
.admin-sidebar a:focus-visible,
.admin-sidebar button:hover,
.admin-sidebar button:focus-visible { color: #fff; background: #26344e; }
.admin-sidebar a.active,
.admin-sidebar a[aria-current="page"] { color: #fff; background: #31527d; box-shadow: inset 3px 0 0 #60a5fa; }
.admin-sidebar a[hidden],
.admin-section[hidden],
.advanced-user-column[hidden],
.advanced-unit-column[hidden] { display: none !important; }
.admin-sidebar-account { display: grid; gap: 2px; padding-top: 18px; border-top: 1px solid #334155; }
.admin-sidebar-account form { margin: 0; }

.admin-content { min-width: 0; max-width: 1600px; margin-left: var(--admin-nav-width); padding: 86px 28px 36px; }
.admin-page-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-page-title h1 { margin: 0; font-size: 1.75rem; font-weight: 700; }
.admin-eyebrow { margin: 0 0 2px; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.admin-section { margin-bottom: 22px; padding: 22px; border: 1px solid #dbe3ed; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .04); scroll-margin-top: 76px; }
.admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.admin-section-heading h2 { margin: 0; color: #15233a; font-size: 1.2rem; font-weight: 700; }
.admin-section-heading p { margin: 3px 0 0; color: #64748b; font-size: .88rem; }
.admin-search { width: min(230px, 100%); }
.admin-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.admin-loading { margin: 0; color: #64748b; }

.admin-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; }
.admin-metric-card { min-height: 94px; padding: 16px; border-left: 4px solid #2563eb; border-radius: 7px; background: #f8fafc; }
.admin-metric-card strong { display: block; margin-top: 9px; color: #0f2747; font-size: 1.25rem; overflow-wrap: anywhere; }
.admin-metric-label { color: #64748b; font-size: .77rem; font-weight: 700; text-transform: uppercase; }
.admin-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.admin-detail-item { padding: 14px; border: 1px solid #e2e8f0; border-radius: 7px; }
.admin-detail-item span { display: block; color: #64748b; font-size: .78rem; }
.admin-detail-item strong { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.admin-section .table { min-width: 720px; margin: 0; font-size: .88rem; }
.admin-section .table th { color: #475569; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.admin-section td small { display: block; margin-top: 3px; color: #64748b; }
.admin-account-note,
.admin-assignment-list { overflow-wrap: anywhere; }
.admin-code { color: #475569; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.admin-sector-shape { color: #334155; font-size: 1.08rem; }
.admin-palette { display: inline-flex; align-items: center; white-space: nowrap; }
.admin-palette-dot { width: 17px; height: 17px; margin-right: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .2); }
.admin-palette-silver { outline: 1px solid #64748b; outline-offset: 1px; }
.admin-status { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: .69rem; font-weight: 800; }
.admin-status-active { color: #166534; background: #dcfce7; }
.admin-status-inactive { color: #991b1b; background: #fee2e2; }
.admin-status-locked { color: #92400e; background: #fef3c7; }
.admin-permission-cell { max-width: 340px; }
.admin-user-actions { min-width: 190px; }
.admin-user-actions .btn { margin: 2px 4px 2px 0; white-space: nowrap; }
.admin-choice-fieldset { padding: 12px; border: 1px solid #dbe3ed; border-radius: 8px; }
.admin-choice-fieldset legend { float: none; width: auto; margin: 0 0 8px; padding: 0 5px; font-size: .85rem; font-weight: 700; }
.admin-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 8px; }
.admin-choice { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; cursor: pointer; }
.admin-choice input { flex: 0 0 auto; }
.admin-choice-identity { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.admin-choice-identity .admin-palette { font-size: 0; }
.admin-user-editor-panel { overflow: visible; }
.admin-user-editor-form { display: grid; gap: 18px; }
.admin-form-group { padding: 18px; border: 1px solid #dbe3ed; border-radius: 8px; background: #f8fafc; }
.admin-form-group h3 { margin: 0 0 15px; color: #1e293b; font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 2px; }
.admin-user-editor-form-modal { padding: 18px; }
.admin-user-editor-form-modal .admin-form-group { padding: 14px; }
#userEditorModal .modal-dialog,
#credentialModal .modal-dialog { max-height: calc(100dvh - 1rem); margin-block: .5rem; }
#userEditorModal .modal-content,
#credentialModal .modal-content { max-height: calc(100dvh - 1rem); }
#userEditorModal .modal-body,
#credentialModal .modal-body { overscroll-behavior: contain; }
.admin-capability-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 7px; border-radius: 4px; color: #1e3a8a; background: #dbeafe; font-size: .7rem; }
.admin-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-summary-card { display: flex; align-items: baseline; gap: 9px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 7px; }
.admin-summary-card strong { color: #0f2747; font-size: 1.45rem; }
.admin-summary-card span { color: #64748b; }
.admin-capability-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.admin-capability-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 7px; }
.admin-capability-row strong,
.admin-capability-row code { display: block; }
.admin-capability-row code { margin-top: 2px; color: #64748b; font-size: .72rem; }
.admin-sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .admin-menu-button { display: block; }
  .admin-sidebar { visibility: hidden; transform: translateX(-102%); transition: transform .18s ease, visibility .18s; }
  .admin-sidebar-open .admin-sidebar { visibility: visible; transform: translateX(0); }
  .admin-sidebar-backdrop:not([hidden]) { position: fixed; z-index: 1020; inset: 58px 0 0; display: block; border: 0; background: rgba(15, 23, 42, .45); }
  .admin-content { width: 100%; margin-left: 0; padding-inline: 16px; overflow-x: hidden; }
}

@media (max-width: 575px) {
  .admin-topbar { padding-inline: 10px; }
  .admin-brand { font-size: .92rem; }
  .admin-identity { display: none; }
  .admin-content { padding-top: 76px; }
  .admin-section { padding: 16px; }
  .admin-section-heading { align-items: stretch; flex-direction: column; }
  .admin-search { width: 100%; }
  .admin-heading-actions { align-items: stretch; flex-direction: column; }
  .admin-summary-grid { grid-template-columns: 1fr; }
  .admin-form-group { padding: 14px; }
  .admin-choice-grid { grid-template-columns: 1fr; }
  .admin-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .admin-form-actions .btn { width: 100%; }
}