:root {
  --sos-brand-green: #8cc63e;
  --sos-brand-yellow: #fff100;
  --sos-brand-blue: #0071bb;
  --sos-brand-black: #000000;
  --blue: #0071bb;
  --blue2: #005b96;
  --green: #0f766e;
  --green2: #115e59;
  --orange: #f97316;
  --orange2: #ea580c;
  --red: #d92d20;
  --line: #dbe4f0;
  --text: #20314f;
  --muted: #6a7890;
  --bg: #f8fafc;
  --panel: #ffffff;
  --shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

html,
body,
button,
input,
select,
textarea,
option,
table,
th,
td,
a,
label,
summary,
details,
.leaflet-container,
.leaflet-control,
.leaflet-popup-content,
.leaflet-popup-content-wrapper,
.leaflet-tooltip {
  font-family: 'Roboto', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
}

/* App layout */
#app-container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 330px 1fr;
  grid-template-rows: 72px 1fr;
  grid-template-areas:
    "top top"
    "side map";
}

/* Topbar */
#topbar {
  grid-area: top;
  min-height: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  z-index: 1200;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  overflow: visible;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 100%;
  overflow: visible;
}

.brand img {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: contain;
}

.brand h1 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.22;
  color: var(--blue);
  font-weight: 700;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.brand small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.site-traffic-widget {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}

.site-traffic-item {
  min-width: 112px;
  min-height: 44px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--text);
}

.site-traffic-item span,
.site-traffic-item small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
}

.site-traffic-item b {
  color: var(--blue2);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

body.theme-dark .site-traffic-item {
  background: #0b1220;
  border-color: var(--line);
}


@media (max-width: 1240px) {
  .site-traffic-widget {
    display: none;
  }
}

.icon-btn {
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--blue);
  cursor: pointer;
  font-weight: 700;
}

/* User/auth buttons */
.user-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.user-name {
  max-width: 180px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.login-btn,
.logout-btn,
.admin-btn,
.edit-data-btn,
.incident-btn,
.recovery-btn,
.top-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.login-btn,
.logout-btn {
  background: var(--green);
}

.login-btn:hover,
.logout-btn:hover {
  background: var(--green2);
}

.admin-btn {
  background: var(--green);
}

.admin-btn:hover {
  background: var(--green2);
}

.edit-data-btn {
  background: var(--orange);
}

.edit-data-btn:hover {
  background: var(--orange2);
}

.incident-btn { background: #b42318; }
.incident-btn:hover { background: #991b1b; }
.recovery-btn { background: #2563eb; }
.recovery-btn:hover { background: #1d4ed8; }

/* Sidebar + map shell */
#sidebar {
  grid-area: side;
  background: #ffffff;
  border-right: 1px solid var(--line);
  overflow: auto;
  z-index: 1100;
}

.sidebar-inner {
  padding: 14px 12px 18px;
}

#map-wrap {
  grid-area: map;
  position: relative;
  min-width: 0;
}

#map {
  height: 100%;
  width: 100%;
  z-index: 1;
}

.admin-boundary-label {
  width: auto !important;
  height: auto !important;
  border: 0;
  background: transparent;
  color: #1f4f96;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, .92),
    1px -1px 0 rgba(255, 255, 255, .92),
    -1px 1px 0 rgba(255, 255, 255, .92),
    1px 1px 0 rgba(255, 255, 255, .92),
    0 2px 4px rgba(15, 23, 42, .34);
}

.admin-boundary-label span {
  display: inline-block;
  transform: translate(-50%, -50%);
}

.admin-boundary-label-province {
  color: #235aa2;
  font-size: 20px;
}

.admin-boundary-label-commune {
  color: #184f8f;
  font-size: 13px;
  font-weight: 750;
}

#map-wrap.is-no-base,
#map-wrap.is-no-base #map,
#map-wrap.is-no-base .leaflet-container {
  background: #2f343a;
}

#map-wrap.is-no-base .leaflet-tile-pane {
  background: transparent;
}

#map-wrap.is-map-loading #map {
  filter: grayscale(.18) saturate(.72) brightness(.88);
}

.mini-map-overview {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 880;
  width: 178px;
  height: 222px;
  overflow: hidden;
  border: 1px solid rgba(91, 109, 133, .42);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 34, 67, .18);
}

.mini-map-overview[hidden] {
  display: none !important;
}

.mini-map-title {
  position: absolute;
  top: 7px;
  left: 8px;
  z-index: 2;
  min-height: 22px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .82);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

.mini-map-canvas {
  width: 100%;
  height: 100%;
  background: transparent;
}

.mini-map-overview .leaflet-container {
  background: transparent;
}

.mini-map-overview .leaflet-interactive {
  outline: none;
}

.mini-map-raster {
  pointer-events: none;
}

@media (max-width: 760px) {
  .mini-map-overview {
    display: none;
  }
}

.map-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f4f7fb;
  pointer-events: auto;
  transition: opacity .22s ease, visibility .22s ease;
}

.map-loading-overlay[hidden],
#map-wrap:not(.is-map-loading) .map-loading-overlay {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.map-loading-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: min(520px, calc(100vw - 48px));
  padding: 14px 16px;
  border: 1px solid rgba(203, 216, 232, .96);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 54px rgba(15, 34, 67, .18);
}

.map-loading-spinner {
  width: 34px;
  height: 34px;
  border: 4px solid #dbe8f8;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: map-loading-spin .82s linear infinite;
}

.map-loading-card strong {
  display: block;
  color: #203f7c;
  font-size: 15px;
  font-weight: 900;
}

.map-loading-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.map-loading-card button {
  display: none;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cbd8e8;
  border-radius: 8px;
  background: #ffffff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.map-loading-overlay.is-slow .map-loading-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes map-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .map-loading-spinner { animation: none; }
}

/* Map overlay */
.status {
  position: absolute;
  left: 16px;
  bottom: 62px;
  top: auto !important;
  z-index: 650 !important;
  max-width: min(560px, calc(100vw - 390px));
  padding: 8px 14px;
  border-radius: 999px;
  background: #1f4a8f;
  color: #ffffff;
  font-size: 12px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.status.error {
  background: rgba(180, 35, 35, 0.94);
}

.map-toolbar {
  position: absolute;
  top: 28px;
  right: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 34, 67, 0.1);
}

.map-toolbar button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  color: var(--blue);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  transition: all 0.2s ease;
}

.map-toolbar button:last-child {
  border-bottom: none;
}

.map-toolbar button:hover,
.map-toolbar button.active {
  border-color: transparent;
  background: rgba(0, 113, 187, 0.1);
  color: var(--blue2);
  box-shadow: none;
}

.map-toolbar button.base-layer-toggle {
  font-size: 17px;
  line-height: 1;
}

.map-toolbar button.base-layer-toggle.is-satellite {
  background: #f1f7ff;
  border-color: #7fb4ff;
}

.map-toolbar button.base-layer-toggle.is-no-base {
  background: #2f343a;
  border-color: #47515d;
  color: #ffffff;
}

.map-readout {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 680;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  font-size: 14px;
  font-weight: 500;
}

.map-coordinate,
.map-scale {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #d7e0ec;
  border-radius: 5px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
  white-space: nowrap;
}

.map-scale {
  min-width: 126px;
  justify-content: center;
}

.legend {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  min-width: 190px;
  max-width: min(380px, calc(100vw - 112px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow);
  font-size: 12px;
}

@media (max-width: 1280px) {
  .legend {
    right: 16px;
    max-width: min(380px, calc(100vw - 112px));
  }
}

@media (max-width: 760px) {
  .legend {
    left: 12px;
    right: 74px;
    bottom: 12px;
    min-width: 0;
    max-width: none;
  }
}

.legend.is-hidden {
  display: none;
}

.print-preview[hidden] {
  display: none !important;
}

.print-preview {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  grid-template-columns: 340px 1fr;
  background: rgba(17, 24, 39, .66);
}

.print-panel {
  position: relative;
  padding: 28px 30px;
  border-right: 1px solid #d7deea;
  background: #ffffff;
  color: var(--text);
  box-shadow: 10px 0 30px rgba(15, 23, 42, .18);
}

.print-panel h3 {
  margin: 0 0 20px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 600;
}

.print-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #9aa6b5;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.print-orientation {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
}

.print-orientation button {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 84px;
  min-height: 84px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #111827;
  cursor: pointer;
}

.print-orientation button.active {
  border-color: #d6dbe4;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .14);
}

.print-page-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 44px;
  border: 2px solid #9aa0a6;
  border-radius: 2px;
  background: #ffffff;
}

.print-page-icon.landscape {
  width: 44px;
  height: 34px;
}

.print-page-icon::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-left: 2px solid #9aa0a6;
  border-bottom: 2px solid #9aa0a6;
}

.print-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 12px 0;
  font-size: 14px;
  color: #0f172a;
}

.print-field select {
  width: 100%;
  height: 32px;
  border: 1px solid #aeb7c4;
  border-radius: 2px;
  background: #ffffff;
  color: #111827;
  font: inherit;
}

.print-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 22px;
  color: #0f172a;
}

.print-toggle input {
  width: 42px;
  height: 22px;
  accent-color: var(--blue);
}

.print-save,
.print-actions .primary {
  border: 0;
  background: #4f7db7;
  color: #ffffff;
  font-weight: 800;
}

.print-save {
  width: 190px;
  height: 38px;
  margin: 0 0 16px 56px;
  border-radius: 0;
  cursor: pointer;
}

.print-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 -30px;
  padding: 16px 12px 0;
  border-top: 1px solid #d7deea;
}

.print-actions button {
  min-width: 86px;
  height: 39px;
  border: 1px solid #b7c0cc;
  background: #ffffff;
  color: #111827;
  font: inherit;
  cursor: pointer;
}

.print-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 36px;
  background: #eeeeee;
}

.print-paper {
  width: min(72vh, 680px);
  aspect-ratio: 210 / 297;
  background: #ffffff;
  box-shadow: 0 0 0 1px #d3d7df, 0 20px 50px rgba(15, 23, 42, .18);
}

.print-paper.landscape {
  width: min(74vw, 980px);
  aspect-ratio: 297 / 210;
}

.print-paper.a3.portrait {
  width: min(80vh, 780px);
}

.print-paper.a3.landscape {
  width: min(82vw, 1120px);
}

.print-map-frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
}

.print-map-frame[data-margin="10"] {
  padding: 28px;
}

.print-map-frame[data-margin="20"] {
  padding: 56px;
}

#printPreviewMap {
  width: 100%;
  height: 100%;
  background: #dbe4ef;
}

.print-north {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 500;
  width: 34px;
  height: 42px;
  display: grid;
  place-items: end center;
  color: #111827;
  font-weight: 900;
  pointer-events: none;
}

.print-north::before {
  content: "";
  position: absolute;
  top: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 28px solid #111827;
}

.print-scale-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 500;
  padding: 4px 8px;
  border: 1px solid rgba(15, 23, 42, .18);
  background: rgba(255, 255, 255, .9);
  color: #111827;
  font-size: 12px;
  pointer-events: none;
}

.legend h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.legend div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.line {
  width: 24px;
  height: 0;
  border-top: 3px solid #000000;
}

.line.red {
  border-color: #d92d20;
}

.line.blue {
  border-color: #1f78ff;
}

.area {
  display: inline-block;
  width: 24px;
  height: 12px;
  border: 2px solid #166534;
  background: rgba(34, 197, 94, .22);
}

.area.protected {
  border-color: #166534;
  background: rgba(34, 197, 94, .24);
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #666666;
}

.dot.cyan {
  background: #06b6d4;
  box-shadow: 0 0 0 1px #0891b2;
}

.dot.sos {
  background: var(--blue);
  box-shadow: 0 0 0 1px var(--blue2);
}


.legend-sos-types {
  margin-top: 6px;
}

.legend-sos-types summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--blue2);
  list-style-position: inside;
}

.legend-tram-type {
  --tram-type-color: #64748b;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--tram-type-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.legend-tram-type svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Leaflet popup common */
.leaflet-popup-pane {
  z-index: 1200 !important;
}

.leaflet-container,
.leaflet-popup-content,
.leaflet-popup-content-wrapper,
.dnc-popup,
.dnc-popup * {
  font-family: 'Roboto', sans-serif;
}

.leaflet-popup-content {
  min-width: 240px;
}

.popup-title {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--blue);
}

.popup-grid {
  display: grid;
  grid-template-columns: 98px 1fr;
  gap: 6px 10px;
  font-size: 13px;
}

.popup-grid b {
  color: var(--muted);
}

/* Trạm SOS popup */
.tram-popup-card {
  min-width: 300px;
  max-width: 380px;
}

.tram-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.tram-badge {
  padding: 6px 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2b5cab, #6b7cff);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.tram-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.tram-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.tram-photo {
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f3f6fb;
}

.placeholder {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #cdd8ea;
  border-radius: 12px;
  background: #f8fbff;
  color: var(--muted);
  font-size: 12px;
}

/* Popup điểm nguy cơ môi trường */
.dnc-popup {
  width: 820px;
  max-width: 78vw;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  color: #20314f;
}

.dnc-popup::-webkit-scrollbar {
  width: 8px;
}

.dnc-popup::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}

.dnc-popup::-webkit-scrollbar-thumb {
  background: #b7c4d8;
  border-radius: 999px;
}

.dnc-popup::-webkit-scrollbar-thumb:hover {
  background: #8fa2bd;
}

.leaflet-popup-content:has(.dnc-popup) {
  width: auto !important;
  max-width: none !important;
  margin: 14px;
}

.leaflet-popup-content-wrapper:has(.dnc-popup) {
  max-height: calc(100vh - 150px);
  border-radius: 16px;
  overflow: hidden;
}

/* Điểm nguy cơ: hiển thị popup dạng modal giữa màn hình, không neo bằng tam giác vào marker */
.dnc-center-popup.leaflet-popup {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 1300 !important;
}

.dnc-center-popup .leaflet-popup-tip-container,
.dnc-center-popup .leaflet-popup-tip {
  display: none !important;
}

.dnc-center-popup .leaflet-popup-content-wrapper {
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
}

.dnc-center-popup .leaflet-popup-close-button {
  top: 10px !important;
  right: 12px !important;
  z-index: 5;
}

.dnc-popup-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e5edf7;
  background: #ffffff;
}

.dnc-popup-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.dnc-popup-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.dnc-popup-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  color: #20314f;
  font-weight: 800;
}

.dnc-popup-subtitle {
  margin-top: 3px;
  font-size: 12px;
  color: #6a7890;
}

.dnc-risk-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dnc-risk-red {
  background: #fee2e2;
  color: #b42318;
}

.dnc-risk-orange {
  background: #ffedd5;
  color: #c2410c;
}

.dnc-risk-yellow {
  background: #fef9c3;
  color: #854d0e;
}

.dnc-risk-green {
  background: #dcfce7;
  color: #166534;
}

.dnc-risk-unknown {
  background: #e5e7eb;
  color: #374151;
}

.dnc-popup-body {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 12px;
}

.dnc-section {
  border: 1px solid #e1e9f5;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.dnc-section-title {
  padding: 8px 10px;
  background: #f6f9ff;
  border-bottom: 1px solid #e1e9f5;
  color: #2b5cab;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dnc-full {
  grid-column: 1 / -1;
}

.dnc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12.5px;
}

.dnc-table th,
.dnc-table td {
  vertical-align: top;
  padding: 7px 9px;
  border-bottom: 1px solid #edf2f7;
}

.dnc-table tr:last-child th,
.dnc-table tr:last-child td {
  border-bottom: 0;
}

.dnc-table th {
  width: 132px;
  min-width: 132px;
  color: #6a7890;
  font-weight: 800;
  text-align: left;
  background: #fbfdff;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}

.dnc-table td {
  color: #20314f;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: anywhere;
}

.dnc-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.dnc-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2b5cab;
  font-size: 12px;
  font-weight: 700;
}

.dnc-note {
  padding: 9px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #334155;
}


/* Điểm nguy cơ: modal cố định giữa viewport, độc lập với Leaflet pane */
.dnc-modal-popup {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: auto;
}

.dnc-modal-card {
  position: relative;
  max-width: min(900px, calc(100vw - 48px));
  max-height: min(78vh, calc(100vh - 120px));
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.dnc-modal-content {
  max-height: min(78vh, calc(100vh - 120px));
  overflow: auto;
  padding: 14px;
}

.dnc-modal-content .dnc-popup {
  width: 820px;
  max-width: calc(100vw - 76px);
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.dnc-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 10;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #64748b;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.dnc-modal-close:hover {
  background: #fee2e2;
  color: #b42318;
}

body.theme-dark .dnc-modal-card {
  background: var(--panel);
  border-color: var(--line);
}

@media (max-width: 900px) {
  .dnc-modal-popup {
    padding: 14px;
    align-items: center;
  }

  .dnc-modal-card,
  .dnc-modal-content {
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 112px);
  }

  .dnc-modal-content .dnc-popup {
    width: 92vw;
    max-width: calc(100vw - 56px);
  }
}

/* Legacy risk popup */
.risk-popup-card {
  min-width: 340px;
  max-width: 460px;
}

.risk-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.risk-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eef4ff;
  font-size: 18px;
}

.risk-score {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0 0 10px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.risk-red {
  background: #fee2e2;
  color: #991b1b;
}

.risk-orange {
  background: #ffedd5;
  color: #9a3412;
}

.risk-yellow {
  background: #fef9c3;
  color: #854d0e;
}

.risk-green {
  background: #dcfce7;
  color: #166534;
}

.risk-unknown {
  background: #e5e7eb;
  color: #374151;
}

.measure-active #map {
  cursor: crosshair;
}

/* Responsive shell: desktop / tablet / mobile */
.mobile-menu-btn,
.mobile-sidebar-head,
.sidebar-backdrop {
  display: none;
}

@media (min-width: 901px) and (max-width: 1280px) {
  #app-container {
    grid-template-columns: 300px 1fr;
  }

  .brand h1 {
    font-size: 16px;
  }

  .brand small {
    max-width: 520px;
  }

  .top-actions {
    gap: 8px;
  }

  .user-info {
    display: none;
  }

  .dnc-popup {
    width: 760px;
    max-width: 82vw;
  }
}

@media (max-height: 760px) {
  .dnc-popup {
    max-height: calc(100vh - 130px);
  }

  .leaflet-popup-content-wrapper:has(.dnc-popup) {
    max-height: calc(100vh - 100px);
  }
}

@media (max-width: 900px) {
  html,
  body {
    overflow: hidden;
  }

  #app-container {
    height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas:
      "top"
      "map";
  }

  #topbar {
    min-height: 64px;
    height: 64px;
    padding: 7px 10px;
    gap: 8px;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    color: var(--blue);
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .brand img {
    width: 32px;
    height: 32px;
  }

  .brand h1 {
    max-width: 48vw;
    font-size: 14px;
  }

  .brand small {
    display: none;
  }

  .top-actions {
    flex: 0 0 auto;
    max-width: 42vw;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top-actions::-webkit-scrollbar {
    display: none;
  }

  .icon-btn {
    display: none;
  }

  .user-box {
    gap: 6px;
  }

  .user-info {
    display: none;
  }

  .login-btn,
  .logout-btn,
  .admin-btn,
  .edit-data-btn {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .admin-btn,
  .edit-data-btn {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    width: min(88vw, 380px);
    max-width: 380px;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 12px 0 32px rgba(15, 23, 42, 0.18);
    z-index: 1500;
    -webkit-overflow-scrolling: touch;
  }

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

  .sidebar-backdrop {
    position: fixed;
    inset: 64px 0 0 0;
    display: none;
    background: rgba(15, 23, 42, 0.38);
    z-index: 1400;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }

  .mobile-sidebar-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -14px -12px 12px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
    color: var(--blue);
  }

  .mobile-sidebar-head button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  #map-wrap {
    min-height: 0;
  }

  .status {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    border-radius: 12px;
    white-space: normal;
    line-height: 1.35;
  }

  .map-toolbar {
    top: auto;
    right: 12px;
    bottom: 92px;
  }

  .map-toolbar button {
    width: 42px;
    height: 42px;
  }

  .legend {
    right: 12px;
    bottom: 12px;
    min-width: 0;
    max-width: calc(100vw - 24px);
    padding: 10px 12px;
  }

  .dnc-popup {
    width: 92vw;
    max-width: 92vw;
    max-height: calc(100vh - 150px);
  }

  .dnc-popup-body {
    grid-template-columns: 1fr;
  }

  .dnc-full {
    grid-column: auto;
  }

  .dnc-popup-header {
    flex-direction: column;
  }

  .dnc-risk-badge {
    align-self: flex-start;
  }

  .dnc-table th {
    width: 120px;
    min-width: 120px;
  }
}

@media (max-width: 520px) {
  .brand h1 {
    max-width: 36vw;
    font-size: 13px;
  }

  .top-actions {
    max-width: 44vw;
  }

  .login-btn,
  .logout-btn,
  .admin-btn,
  .edit-data-btn {
    padding: 0 8px;
  }

  .admin-btn {
    display: none;
  }

  .legend h4 {
    display: none;
  }

  .legend div {
    margin-top: 4px;
  }
}

/* Module switcher and phase-specific panels */
.module-box {
  border-top: 0;
  padding-top: 0;
}

.module-switcher {
  display: grid;
  gap: 8px;
}

.module-btn {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #cfd9e8;
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}

.module-btn.active {
  border-color: var(--blue);
  background: #eaf1ff;
  color: var(--blue);
}

.module-actions {
  display: grid;
  gap: 8px;
}

.module-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.module-action-link.primary { background: var(--blue); }
.module-action-link.incident { background: #b42318; }
.module-action-link.recovery { background: #2563eb; }

.mini-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
  font-size: 13px;
  line-height: 1.55;
}

.incident-popup,
.recovery-popup {
  min-width: 320px;
  max-width: min(400px, calc(100vw - 80px));
  overflow: hidden;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  color: var(--text);
}

.leaflet-popup-content .incident-popup {
  width: min(400px, calc(100vw - 80px));
}

.incident-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.incident-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eef4ff;
  font-size: 18px;
}

.incident-popup h3,
.recovery-popup h3 {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 16px;
}

.incident-sub {
  color: var(--muted);
  font-size: 12px;
}

.incident-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 4px 0 10px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.incident-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.incident-table th,
.incident-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #edf2f7;
  vertical-align: top;
  text-align: left;
}

.incident-table th {
  width: 130px;
  color: var(--muted);
  background: #fbfdff;
}

.incident-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.incident-actions a,
.incident-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.incident-actions button {
  background: #0f766e;
}

.incident-photo-section {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #edf2f7;
}

.incident-photo-title {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.incident-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}

.incident-photo-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  max-height: 132px;
  border: 1px solid #dbe5f3;
  border-radius: 8px;
  background: #f8fbff;
  cursor: zoom-in;
}

.incident-photo-grid .incident-photo-link:only-child {
  aspect-ratio: 2.2 / 1;
  max-height: 178px;
}

.incident-photo-link img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.incident-photo-empty {
  padding: 8px 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: var(--muted);
  background: #f8fbff;
  font-size: 12px;
}
.dot.incident {
  background: #dc2626;
  box-shadow: 0 0 0 1px #b42318;
}

.dot.recovery {
  background: #2563eb;
  box-shadow: 0 0 0 1px #1d4ed8;
}


/* ===== 3 phân hệ bản đồ: topbar mode switcher ===== */
.top-mode-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
}

.top-mode-btn {
  height: 34px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--blue);
  border: 1px solid transparent;
  border-radius: 9px;
}

.top-mode-btn.active,
.top-mode-btn:hover {
  background: var(--blue);
  color: #ffffff;
}

body[data-module-mode="incident"] .top-mode-btn.active {
  background: #b42318;
}

body[data-module-mode="recovery"] .top-mode-btn.active {
  background: #2563eb;
}

.mode-admin-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mode-tool-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.mode-tool-list > div {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbff;
}

body[data-module-mode="incident"] .panel-edit {
  border-color: #fecaca;
  background: #fff1f2;
}

body[data-module-mode="incident"] .panel-edit h3 {
  color: #991b1b;
}

body[data-module-mode="incident"] .sidebar-edit-link {
  background: #b42318;
}

body[data-module-mode="incident"] .sidebar-edit-link:hover {
  background: #991b1b;
}

body[data-module-mode="recovery"] .panel-edit {
  border-color: #bfdbfe;
  background: #eff6ff;
}

body[data-module-mode="recovery"] .panel-edit h3 {
  color: #1d4ed8;
}

body[data-module-mode="recovery"] .sidebar-edit-link {
  background: #2563eb;
}

body[data-module-mode="recovery"] .sidebar-edit-link:hover {
  background: #1d4ed8;
}

body[data-module-mode="incident"] .module-btn.active {
  border-color: #b42318;
  background: #fff1f2;
  color: #991b1b;
}

body[data-module-mode="recovery"] .module-btn.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

@media (max-width: 1280px) {
  .top-mode-btn {
    padding: 0 10px;
    font-size: 12px;
  }

  .mode-admin-actions .mode-admin-link {
    max-width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 900px) {
  .top-mode-switcher {
    max-width: 42vw;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top-mode-switcher::-webkit-scrollbar {
    display: none;
  }

  .mode-admin-actions {
    display: none;
  }
}

@media (max-width: 640px) {
  .top-mode-switcher {
    display: none;
  }
}

/* =========================================================
   FIX FONT/NÚT LEFT SIDEBAR - PHÂN HỆ NGHIỆP VỤ
   Ghi đè cuối file để tránh bị CSS cũ .module-btn chi phối.
   ========================================================= */

.module-box {
  padding-top: 12px !important;
}

.module-switcher {
  display: grid !important;
  gap: 8px !important;
}

.module-btn {
  width: 100% !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 14px !important;
  border: 1px solid #cfd9e8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #20314f !important;
  font-family: 'Roboto', sans-serif;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease !important;
}

.module-btn:hover {
  border-color: #2b5cab !important;
  background: #f3f7ff !important;
  color: #2b5cab !important;
  transform: translateY(-1px) !important;
}

.module-btn.active,
.module-btn[aria-pressed="true"] {
  border-color: #2b5cab !important;
  background: #eaf1ff !important;
  color: #1f4a8f !important;
  font-weight: 800 !important;
  box-shadow: inset 3px 0 0 #2b5cab !important;
  outline: none !important;
}

.module-btn:focus,
.module-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

.module-btn.active:focus,
.module-btn.active:active,
.module-btn[aria-pressed="true"]:focus,
.module-btn[aria-pressed="true"]:active {
  outline: none !important;
  box-shadow: inset 3px 0 0 #2b5cab !important;
}

.module-btn:focus-visible {
  outline: 3px solid rgba(43, 92, 171, 0.16) !important;
  outline-offset: 2px !important;
}

body[data-module-mode="incident"] .module-btn.active,
body[data-module-mode="incident"] .module-btn[aria-pressed="true"] {
  border-color: #b42318 !important;
  background: #fff1f2 !important;
  color: #991b1b !important;
  box-shadow: inset 3px 0 0 #b42318 !important;
}

body[data-module-mode="incident"] .module-btn.active:focus,
body[data-module-mode="incident"] .module-btn.active:active {
  box-shadow: inset 3px 0 0 #b42318 !important;
}

body[data-module-mode="recovery"] .module-btn.active,
body[data-module-mode="recovery"] .module-btn[aria-pressed="true"] {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: inset 3px 0 0 #2563eb !important;
}

body[data-module-mode="recovery"] .module-btn.active:focus,
body[data-module-mode="recovery"] .module-btn.active:active {
  box-shadow: inset 3px 0 0 #2563eb !important;
}

.module-box .hint,
.module-box .mode-desc,
.module-box .business-mode-desc {
  margin-top: 8px !important;
  color: #6a7890 !important;
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

/* Card quản trị theo phân hệ trong sidebar */
.panel-edit {
  padding: 12px !important;
  border-radius: 12px !important;
}

.panel-edit h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.sidebar-edit-link {
  min-height: 38px !important;
  font-family: 'Roboto', sans-serif;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  border-radius: 10px !important;
}


/* Nội bộ SOS: nhân sự, vật tư và tìm trạm gần nhất */
.tram-popup-card {
  max-width: 430px;
}

.tram-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.tram-section h4 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--blue);
}

.tram-empty,
.tram-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.tram-staff-list {
  display: grid;
  gap: 8px;
}

.tram-staff-item {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbff;
}

.tram-staff-role {
  font-size: 11px;
  font-weight: 800;
  color: #b42318;
  text-transform: uppercase;
}

.tram-staff-name {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.tram-staff-text {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.tram-action-row {
  margin-top: 10px;
}

.tram-action-btn {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: #b42318;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.tram-inventory-summary {
  display: grid;
  gap: 8px;
}

.tram-kpi {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff7ed;
}

.tram-kpi b {
  font-size: 18px;
  color: #b45309;
}

.tram-kpi span {
  font-size: 12px;
  color: var(--muted);
}

.tram-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tram-chip-list span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 11px;
}

.tram-unit-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.tram-unit-list div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 12px;
}

.tram-details {
  margin-top: 8px;
  font-size: 12px;
}

.tram-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--blue);
}

.tram-table-wrap {
  max-height: 220px;
  overflow: auto;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.tram-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.tram-table th,
.tram-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.tram-table th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  text-align: left;
}

.tram-table .number {
  text-align: right;
  white-space: nowrap;
}

.nearest-toolbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.nearest-toolbox .module-action-link {
  border: 0;
  cursor: pointer;
}

.nearest-results {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.nearest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
}

.nearest-head button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: #fee2e2;
  color: #b42318;
  font-weight: 900;
  cursor: pointer;
}

.nearest-item {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.nearest-item:hover {
  border-color: #b42318;
  background: #fff7f7;
}

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

.nearest-item strong {
  color: var(--text);
  font-size: 13px;
}

.nearest-item strong span {
  color: var(--blue);
}

.nearest-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.nearest-picking {
  cursor: crosshair !important;
}

/* SOS compact popup + inventory drawer */
.tram-popup-card {
  max-width: 340px;
}

.tram-section.compact {
  margin-top: 8px;
  padding-top: 8px;
}

.tram-section.compact h4 {
  margin-bottom: 6px;
}

.tram-staff-list.compact {
  gap: 6px;
}

.tram-staff-item.compact {
  padding: 7px 8px;
}

.tram-inventory-summary.compact {
  gap: 6px;
}

.tram-action-row.two-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tram-action-btn.secondary {
  background: var(--blue);
}

.tram-action-btn.weather-action {
  background: #16a34a;
}

.tram-action-btn.weather-action:hover {
  background: #15803d;
}

.tram-photo-details {
  margin-top: 8px;
  font-size: 12px;
}

.tram-photo-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--blue);
}

.tram-photo-details .tram-photo {
  margin-top: 8px;
  max-height: 180px;
  object-fit: cover;
}

.tram-photo-slider {
  margin-top: 8px;
}

.tram-photo-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f3f6fb;
}

.tram-photo-track {
  display: flex;
  transition: transform 0.2s ease;
}

.tram-photo-slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: #edf2f7;
}

.tram-photo-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.tram-photo-nav {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.tram-photo-nav:hover {
  background: rgba(15, 23, 42, 0.82);
}

.tram-photo-nav.prev {
  left: 8px;
}

.tram-photo-nav.next {
  right: 8px;
}

.tram-photo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.tram-photo-count {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.tram-photo-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tram-photo-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
}

.tram-photo-dot.active {
  width: 18px;
  background: var(--blue);
}

.tram-photo-lightbox {
  position: fixed;
  inset: 0;
  /* Luôn nằm trên popup trạm SOS, panel vật tư, menu tài khoản và các modal khác. */
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(15, 23, 42, 0.88);
}

.tram-photo-lightbox.open {
  display: flex;
}

body.has-photo-lightbox {
  overflow: hidden;
}

.tram-lightbox-figure {
  width: min(1180px, calc(100vw - 96px));
  max-height: calc(100vh - 72px);
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
}

.tram-lightbox-image {
  max-width: 100%;
  max-height: calc(100vh - 122px);
  justify-self: center;
  align-self: center;
  object-fit: contain;
  border-radius: 8px;
  background: #0f172a;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.tram-lightbox-caption {
  min-height: 18px;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.tram-lightbox-close,
.tram-lightbox-nav {
  position: fixed;
  z-index: 20001;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  cursor: pointer;
}

.tram-lightbox-close:hover,
.tram-lightbox-nav:hover {
  background: rgba(37, 99, 235, 0.84);
}

.tram-lightbox-close {
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  font-size: 28px;
  line-height: 1;
}

.tram-lightbox-nav {
  top: 50%;
  width: 46px;
  height: 46px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

.tram-lightbox-nav.prev {
  left: 22px;
}

.tram-lightbox-nav.next {
  right: 22px;
}

@media (max-width: 700px) {
  .tram-photo-lightbox {
    padding: 14px;
  }

  .tram-lightbox-figure {
    width: calc(100vw - 28px);
  }

  .tram-lightbox-nav {
    width: 38px;
    height: 38px;
    font-size: 28px;
  }

  .tram-lightbox-nav.prev {
    left: 10px;
  }

  .tram-lightbox-nav.next {
    right: 10px;
  }
}

.inventory-panel {
  position: fixed;
  top: 92px;
  right: 18px;
  bottom: 18px;
  width: min(620px, calc(100vw - 36px));
  z-index: 1200;
  display: none;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
}

.inventory-panel.open {
  display: grid;
}

.inventory-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.inventory-panel-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

.inventory-panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.inventory-panel-head button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fee2e2;
  color: #b42318;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.inventory-panel-summary {
  display: grid;
  gap: 10px;
}

.inventory-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.inventory-kpi {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff7ed;
}

.inventory-kpi b,
.inventory-kpi span {
  display: block;
}

.inventory-kpi b {
  color: #b45309;
  font-size: 22px;
}

.inventory-kpi span {
  color: var(--muted);
  font-size: 12px;
}

.inventory-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inventory-chip-list span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 12px;
}

.inventory-unit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.inventory-unit-grid div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 12px;
}

.inventory-panel-tools {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.inventory-panel-tools input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
}

.inventory-panel-tools button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: var(--blue);
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.inventory-table-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 13px;
}

.inventory-table-meta span {
  color: var(--muted);
}

.inventory-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.inventory-table th,
.inventory-table td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.inventory-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f5f9;
  color: var(--text);
  text-align: left;
}

.inventory-table .number {
  text-align: right;
  white-space: nowrap;
}

.inventory-empty-cell {
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .inventory-panel {
    top: 78px;
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }

  .inventory-unit-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Nearest station analysis drawer */
.nearest-panel {
  position: fixed;
  top: 92px;
  right: 18px;
  bottom: 18px;
  width: min(520px, calc(100vw - 36px));
  z-index: 1195;
  display: none;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
}

.nearest-panel.open {
  display: grid;
}

.nearest-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.nearest-panel-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

.nearest-panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.nearest-panel-head button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #fee2e2;
  color: #b42318;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.nearest-panel-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
}

.nearest-panel-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.nearest-panel-summary div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff7ed;
}

.nearest-panel-summary b,
.nearest-panel-summary span {
  display: block;
}

.nearest-panel-summary b {
  color: #b45309;
  font-size: 18px;
}

.nearest-panel-summary span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.nearest-note {
  padding: 9px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
  line-height: 1.45;
}

.nearest-list {
  display: grid;
  gap: 8px;
}

.nearest-panel-item {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
}

.nearest-panel-item:hover {
  border-color: #b42318;
  background: #fff7f7;
}

.nearest-rank {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fee2e2;
  color: #b42318;
  font-weight: 700;
}

.nearest-info strong,
.nearest-info span,
.nearest-info small,
.nearest-distance b,
.nearest-distance span {
  display: block;
}

.nearest-info strong {
  color: var(--text);
  font-size: 13px;
}

.nearest-info span {
  margin-top: 2px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.nearest-info small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.nearest-distance {
  min-width: 76px;
  padding: 8px;
  border-radius: 12px;
  background: #f8fafc;
  text-align: right;
}

.nearest-distance b {
  color: #b42318;
  font-size: 18px;
}

.nearest-distance span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.nearest-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .nearest-panel {
    top: 78px;
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }

  .nearest-panel-summary {
    grid-template-columns: 1fr;
  }

  .nearest-panel-item {
    grid-template-columns: 30px 1fr;
  }

  .nearest-distance {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* About link + initial data disclaimer modal */
.about-web-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(43, 92, 171, 0.25);
  background: #fff;
  color: #2b5cab;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

.about-web-btn:hover {
  background: #eff6ff;
  border-color: rgba(43, 92, 171, 0.45);
}

body.has-data-disclaimer {
  overflow: hidden;
}

.data-disclaimer-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.data-disclaimer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.56);
}

.data-disclaimer-box {
  position: relative;
  width: min(720px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(219, 228, 240, 0.95);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.data-disclaimer-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid #e5edf7;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 70%);
}

.data-disclaimer-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: #b45309;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.data-disclaimer-head h2 {
  margin: 0;
  color: #1f4a8f;
  font-size: 24px;
  line-height: 1.25;
}

.data-disclaimer-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  border-radius: 999px;
  background: #e5edf7;
  color: #20314f;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.data-disclaimer-close:hover {
  background: #dbeafe;
}

.data-disclaimer-body {
  padding: 20px 24px 8px;
  color: #20314f;
  font-size: 15px;
  line-height: 1.65;
}

.data-disclaimer-body p {
  margin: 0 0 12px;
}

.data-disclaimer-body p:last-child {
  padding: 12px 14px;
  border-left: 5px solid #b42318;
  border-radius: 12px;
  background: #fff1f2;
  color: #991b1b;
  font-weight: 700;
}

.data-disclaimer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 22px;
}

.data-disclaimer-link,
.data-disclaimer-accept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.data-disclaimer-link {
  border: 1px solid #dbe4f0;
  background: #fff;
  color: #2b5cab;
}

.data-disclaimer-link:hover {
  background: #eff6ff;
}

.data-disclaimer-accept {
  border: 1px solid #2b5cab;
  background: #2b5cab;
  color: #fff;
}

.data-disclaimer-accept:hover {
  background: #1f4a8f;
}

@media (max-width: 768px) {
  .about-web-btn {
    min-height: 32px;
    padding: 0 9px;
    font-size: 12px;
  }

  .data-disclaimer-modal {
    align-items: flex-end;
    padding: 10px;
  }

  .data-disclaimer-box {
    max-height: 90vh;
    border-radius: 16px;
  }

  .data-disclaimer-head,
  .data-disclaimer-body,
  .data-disclaimer-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .data-disclaimer-head h2 {
    font-size: 20px;
  }

  .data-disclaimer-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Language switch button */
.lang-switch {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.lang-switch:hover {
  background: rgba(255, 255, 255, 0.15);
}

}

/* Mobile more menu container for desktop */
.mobile-more-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-more-menu > summary {
  display: none;
}
.more-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mobile liquid-glass header and dock */
.mobile-liquid-dock {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --mobile-topbar-h: 70px;
    --mobile-bottom-dock-h: 76px;
  }

  #app-container {
    grid-template-rows: calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px) + 10px) 1fr;
  }

  #topbar {
    align-self: start;
    min-height: var(--mobile-topbar-h);
    height: var(--mobile-topbar-h);
    width: calc(100vw - 18px);
    margin: calc(env(safe-area-inset-top, 0px) + 6px) 9px 0;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.74);
    overflow: hidden;
  }

  .mobile-menu-btn {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(43, 92, 171, 0.16);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    font-size: 24px;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: 7px;
  }

  .brand img {
    width: 38px;
    height: 38px;
  }

  .brand h1 {
    max-width: none;
    font-size: 13px;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .brand h1::after {
    display: none;
  }

  .brand small {
    display: none;
  }

  .top-actions {
    flex: 0 0 auto;
    max-width: none;
    gap: 6px;
    overflow: visible;
  }

  .top-actions .user-info {
    display: none !important;
  }

  .top-actions .icon-btn,
  .top-actions .top-mode-switcher,
  .top-actions .mode-admin-actions,
  .top-actions .admin-btn,
  .top-actions .edit-data-btn,
  .top-actions .incident-btn,
  .top-actions .recovery-btn {
    display: flex !important;
  }

  .mobile-more-menu {
    display: block;
    position: relative;
  }
  
  .mobile-more-menu > summary {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(43, 92, 171, 0.16);
    background: rgba(255, 255, 255, 0.62);
    color: var(--blue);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
  }
  
  .mobile-more-menu > summary::-webkit-details-marker {
    display: none;
  }
  
  .mobile-more-menu[open] > summary {
    background: rgba(255, 255, 255, 0.9);
  }
  
  .more-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: -60px; /* Offset to center relative to the button somewhat */
    min-width: 220px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.20);
    z-index: 3000;
    flex-direction: column;
    gap: 12px;
  }
  
  .mobile-more-menu[open] .more-dropdown {
    display: flex;
  }

  .top-mode-switcher {
    flex-direction: column;
    height: auto;
    border-radius: 12px;
    background: #e2e8f0;
  }
  
  .top-mode-btn {
    width: 100%;
    min-height: 40px;
  }
  
  .mode-admin-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .mode-admin-actions .mode-admin-link {
    width: 100%;
    max-width: none;
    min-height: 40px;
    justify-content: center;
  }
  
  .top-actions .icon-btn {
    width: 100%;
    min-height: 40px;
    border-radius: 10px;
    justify-content: center;
    font-size: 14px;
    gap: 8px;
  }

  .about-web-btn,
  .login-btn,
  .logout-btn {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(43, 92, 171, 0.16);
    background: rgba(255, 255, 255, 0.62);
    color: var(--blue);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    font-size: 0 !important;
    overflow: hidden;
  }

  .lang-switch {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(43, 92, 171, 0.16);
    background: rgba(255, 255, 255, 0.62);
    color: var(--blue);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    font-size: 14px !important;
  }

  .about-web-btn::before {
    content: "i";
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: 900;
    font-family: 'Roboto', sans-serif;
  }

  .login-btn::before {
    content: "↪";
    font-size: 22px;
    font-weight: 900;
  }

  .logout-btn::before {
    content: "⎋";
    font-size: 20px;
    font-weight: 900;
  }

  .user-box {
    gap: 0;
  }

  #sidebar {
    top: calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px) + 12px);
    bottom: calc(var(--mobile-bottom-dock-h) + env(safe-area-inset-bottom, 0px) + 10px);
    border-radius: 0 22px 22px 0;
  }

  .sidebar-backdrop {
    inset: calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px) + 12px) 0 0 0;
  }

  .mobile-liquid-dock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 1300;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    min-height: var(--mobile-bottom-dock-h);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.74);
  }

  .mobile-liquid-dock button,
  .mobile-liquid-dock a {
    min-width: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: #1f314f;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
  }

  .mobile-liquid-dock button:active,
  .mobile-liquid-dock a:active {
    background: rgba(43, 92, 171, 0.12);
    transform: translateY(1px);
  }

  .mobile-liquid-dock span {
    font-size: 23px;
    line-height: 1;
  }

  .mobile-liquid-dock b {
    font-size: 12px;
    line-height: 1.1;
    font-weight: 900;
    white-space: nowrap;
  }

  .status {
    bottom: calc(var(--mobile-bottom-dock-h) + env(safe-area-inset-bottom, 0px) + 22px);
  }

  .map-toolbar {
    bottom: calc(var(--mobile-bottom-dock-h) + env(safe-area-inset-bottom, 0px) + 72px);
  }

  .inventory-panel,
  .nearest-panel {
    top: calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px) + 18px);
    bottom: calc(var(--mobile-bottom-dock-h) + env(safe-area-inset-bottom, 0px) + 12px);
    border-radius: 24px;
  }
}

@media (max-width: 380px) {
  .brand img {
    display: none;
  }

  .brand h1::after {
    content: "SOS";
    font-size: 18px;
  }

  .about-web-btn,
  .login-btn,
  .logout-btn,
  .lang-switch {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .mobile-liquid-dock b {
    font-size: 11px;
  }
}

/* Mobile cleanup: remove non-essential map overlays that collide with the liquid dock */
@media (max-width: 768px) {
  #statusBox,
  .status,
  #legendBox,
  .legend,
  .map-legend,
  .leaflet-control-attribution {
    display: none !important;
  }

  .map-toolbar {
    bottom: calc(var(--mobile-bottom-dock-h, 82px) + env(safe-area-inset-bottom, 0px) + 28px) !important;
  }

  .inventory-panel,
  .nearest-panel {
    bottom: calc(var(--mobile-bottom-dock-h, 82px) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}

/* ===== FIX TOPBAR DESKTOP: gom chức năng tài khoản để tránh đè tiêu đề ===== */
#topbar .brand {
  flex: 1 1 360px;
  min-width: 240px;
  overflow: hidden;
}

#topbar .brand > div {
  min-width: 0;
  overflow: hidden;
}

#topbar .brand h1,
#topbar .brand small {
  overflow: hidden;
  text-overflow: ellipsis;
}

#topbar .top-actions {
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

#topbar .user-box {
  min-width: 0;
  flex: 0 1 auto;
  gap: 8px;
}

#topbar .user-info {
  flex: 0 1 128px;
  min-width: 0;
  max-width: 140px;
  overflow: hidden;
}

#topbar .user-name,
#topbar .user-role {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 901px) and (max-width: 1500px) {
  #topbar {
    gap: 10px;
  }

  #topbar .brand {
    flex-basis: 300px;
    min-width: 220px;
  }

  #topbar .top-actions {
    gap: 8px;
  }

  #topbar .user-info {
    max-width: 112px;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  #topbar .user-info {
    display: none;
  }
}

#topbar .user-info {
  max-width: 128px;
  flex: 0 1 128px;
}

#topbar .mode-admin-actions .mode-admin-link {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 901px) and (max-width: 1500px) {
  #topbar .user-info {
    max-width: 112px;
    flex-basis: 112px;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  #topbar .user-info {
    display: none;
  }
}

.account-menu {
  position: relative;
  flex: 0 0 auto;
}

.account-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  border: 0;
  background: var(--green);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu[open] > summary,
.account-menu > summary:hover {
  background: var(--green2);
}

.account-menu-icon {
  font-size: 15px;
  line-height: 1;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
  z-index: 3000;
}

.account-dropdown a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.account-dropdown a:hover {
  background: #eff6ff;
  color: var(--blue);
}

.account-dropdown a.danger {
  color: #b42318;
}

.account-dropdown a.danger:hover {
  background: #fff1f2;
  color: #991b1b;
}

@media (max-width: 1440px) {
  #topbar {
    gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }

  #topbar .brand h1 {
    font-size: 18px;
  }

  #topbar .brand small {
    max-width: 460px;
  }

  #topbar .user-info {
    max-width: 118px;
    flex-basis: 118px;
  }

  .about-web-btn,
  .top-mode-btn,
  .edit-data-btn,
  .incident-btn,
  .recovery-btn,
  .account-menu > summary {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }
}

@media (max-width: 1180px) {
  #topbar .user-info {
    display: none;
  }

  #topbar .mode-admin-actions .mode-admin-link {
    max-width: 118px;
  }

  .account-menu-label {
    display: none;
  }

  .account-menu > summary {
    width: 40px;
    padding: 0;
  }
}

@media (max-width: 900px) {
  #topbar .account-menu {
    display: block !important;
  }

  .account-menu > summary {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(43, 92, 171, 0.16);
    background: rgba(255, 255, 255, 0.62);
    color: var(--blue);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  .account-menu > summary:hover,
  .account-menu[open] > summary {
    background: rgba(255, 255, 255, 0.82);
  }

  .account-menu-icon {
    font-size: 19px;
  }

  .account-dropdown {
    position: fixed;
    top: calc(var(--mobile-topbar-h) + env(safe-area-inset-top, 0px) + 14px);
    right: 12px;
    left: auto;
    min-width: min(260px, calc(100vw - 24px));
  }
}

/* Marker cluster cho trạm SOS: giảm chồng icon khi zoom xa */
.sos-cluster-icon {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(14, 116, 144, 0.96));
  border: 3px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sos-cluster-count {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.32);
}

.tram-sos-marker-icon {
  filter: drop-shadow(0 4px 7px rgba(15, 23, 42, 0.22));
}


.tram-sos-type-marker {
  --tram-type-color: #2563eb;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--tram-type-color);
  border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tram-sos-type-core {
  width: 78%;
  height: 78%;
  border-radius: 999px;
  background: #fff;
  color: var(--tram-type-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tram-sos-type-core svg {
  width: 82%;
  height: 82%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.tram-sos-type-core img {
  width: 94%;
  height: 94%;
  object-fit: contain;
  display: block;
}

.tram-sos-type-office-sos { --tram-type-color: #0f766e; }
.tram-sos-type-office-customer { --tram-type-color: #2b5cab; }
.tram-sos-type-container { --tram-type-color: #f97316; }
.tram-sos-type-response-boat { --tram-type-color: #0284c7; }
.tram-sos-type-petrol-station { --tram-type-color: #dc2626; }
.tram-sos-type-oil-tanker { --tram-type-color: #334155; }
.tram-sos-type-unknown { --tram-type-color: #64748b; }

/* Tooltip rê chuột qua điểm trạm SOS: tên trạm + mã trạm · tỉnh */
.leaflet-tooltip.tram-sos-tooltip {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
  white-space: nowrap;
  font-family: 'Roboto', sans-serif;
}
.leaflet-tooltip.tram-sos-tooltip::before { display: none; }
.tram-tip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px 7px 8px;
}
.tram-tip-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: contain;
  background: #eef4ff;
  flex-shrink: 0;
}
.tram-tip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tram-tip-name {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
  color: #1f2f4d;
}
.tram-tip-meta {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7890;
}
body.theme-dark .leaflet-tooltip.tram-sos-tooltip {
  background: #1e2a40;
  border-color: #2f3f59;
}
body.theme-dark .tram-tip-logo { background: #243049; }
body.theme-dark .tram-tip-name { color: #e2e8f0; }
body.theme-dark .tram-tip-meta { color: #94a3b8; }

/* Nút nổi "Hủy chỉ đường" ở mép dưới giữa bản đồ (khi đang hiện 5 trạm gần nhất) */
.nearest-cancel-fab {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
  transition: background .15s ease, transform .12s ease;
}
.nearest-cancel-fab:hover { background: #b91c1c; }
.nearest-cancel-fab:active { transform: translateX(-50%) scale(0.97); }
.nearest-cancel-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nearest-cancel-fab[hidden] { display: none; }
.nearest-cancel-fab-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11px;
  line-height: 1;
}

.tram-sos-type-office-sos,
.tram-sos-type-office-customer,
.tram-sos-type-office-sos .tram-sos-type-core,
.tram-sos-type-office-customer .tram-sos-type-core {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 36%, 100% 100%, 0 100%, 0 36%);
}

.tram-sos-type-container,
.tram-sos-type-container .tram-sos-type-core {
  border-radius: 4px;
}

.tram-sos-type-response-boat,
.tram-sos-type-response-boat .tram-sos-type-core,
.tram-sos-type-oil-tanker,
.tram-sos-type-oil-tanker .tram-sos-type-core {
  border-radius: 0;
  clip-path: polygon(4% 18%, 96% 18%, 82% 82%, 50% 100%, 18% 82%);
}

.tram-sos-type-petrol-station,
.tram-sos-type-petrol-station .tram-sos-type-core,
.tram-sos-type-unknown,
.tram-sos-type-unknown .tram-sos-type-core {
  border-radius: 0;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

@media (max-width: 768px) {
  .sos-cluster-icon {
    transform: scale(0.92);
  }

  .sos-cluster-count {
    font-size: 13px;
  }
}


/* User theme: dark mode overrides */
body.theme-dark,
body.theme-system {
  color-scheme: light;
}
body.theme-dark {
  --bg: #0f172a;
  --panel: #111827;
  --line: #334155;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --blue: #60a5fa;
  --blue2: #3b82f6;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
body.theme-dark #topbar,
body.theme-dark #sidebar,
body.theme-dark .panel,
body.theme-dark .module-box,
body.theme-dark .utility-panel,
body.theme-dark .action-card,
body.theme-dark .account-dropdown,
body.theme-dark .leaflet-control,
body.theme-dark .leaflet-control-layers,
body.theme-dark .leaflet-popup-content-wrapper,
body.theme-dark .leaflet-popup-tip {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark button.icon-btn {
  background: #0b1220 !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.theme-dark .brand h1,
body.theme-dark .user-name,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark label,
body.theme-dark .leaflet-control-layers label {
  color: var(--text) !important;
}
body.theme-dark .brand small,
body.theme-dark .user-role,
body.theme-dark .hint,
body.theme-dark .muted,
body.theme-dark small {
  color: var(--muted) !important;
}
body.theme-dark .account-dropdown a {
  color: var(--text) !important;
}
body.theme-dark .account-dropdown a.danger {
  color: #fca5a5 !important;
}


/* ===== Roboto typography final override ===== */
.brand h1,
.popup-title,
.dnc-popup-title,
.tram-title,
.inventory-panel-head h3 {
  font-weight: 700 !important;
  letter-spacing: 0;
}

.brand small,
.popup-grid,
.tram-popup-card,
.dnc-popup,
.account-dropdown a,
.top-mode-btn,
.mode-admin-link,
.icon-btn,
.about-web-btn {
  font-family: 'Roboto', sans-serif !important;
}

.account-menu > summary,
.top-mode-btn,
.mode-admin-link,
.icon-btn,
.about-web-btn,
.login-btn,
.logout-btn,
.admin-btn,
.edit-data-btn,
.incident-btn,
.recovery-btn {
  font-weight: 700 !important;
}

.account-dropdown a {
  font-weight: 500 !important;
  line-height: 1.35;
}

.account-dropdown a[aria-current="page"],
.account-dropdown a:hover {
  font-weight: 700 !important;
}

.tram-section h4,
.tram-photo-details summary,
.popup-grid b,
.dnc-popup-label {
  font-weight: 700 !important;
}

.leaflet-popup-content,
.tram-popup-card,
.dnc-popup {
  font-size: 13px;
  line-height: 1.45;
}

/* ===== MOBILE TOPBAR/BOTTOM DOCK REBALANCE - 2026-05 ===== */
.more-dropdown .lang-switch {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(43, 92, 171, 0.25);
  background: #ffffff;
  color: #2b5cab;
  font-weight: 800;
  font-size: 13px;
}

@media (max-width: 900px) {
  #topbar {
    overflow: visible !important;
    width: calc(100vw - 20px);
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 8px;
  }

  #topbar .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  #topbar .brand h1 {
    font-size: clamp(13px, 3.7vw, 16px);
    line-height: 1.22;
    letter-spacing: 0;
  }

  #topbar .top-actions {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    overflow: visible;
    gap: 6px;
  }

  /* Trên mobile chỉ giữ nút ba chấm ở góc phải; các mục phụ nằm trong menu xổ xuống. */
  .mobile-more-menu {
    position: static;
  }

  .mobile-more-menu > summary {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .mobile-more-menu .more-dropdown {
    position: fixed;
    top: calc(var(--mobile-topbar-h, 70px) + env(safe-area-inset-top, 0px) + 18px);
    right: 12px;
    left: auto;
    width: min(288px, calc(100vw - 24px));
    min-width: 0;
    max-height: calc(100dvh - var(--mobile-topbar-h, 70px) - 36px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    align-items: stretch;
    gap: 8px;
    z-index: 4000;
  }

  .mobile-more-menu .more-dropdown .icon-btn,
  .mobile-more-menu .more-dropdown .about-web-btn,
  .mobile-more-menu .more-dropdown .lang-switch,
  .mobile-more-menu .more-dropdown .mode-admin-link,
  .mobile-more-menu .more-dropdown .top-mode-btn {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    justify-content: center;
    font-weight: 800;
  }

  .mobile-more-menu .more-dropdown .about-web-btn,
  .mobile-more-menu .more-dropdown .lang-switch,
  .mobile-more-menu .more-dropdown .icon-btn {
    border: 1px solid rgba(43, 92, 171, 0.18);
    background: #ffffff;
    color: #2b5cab;
    box-shadow: none;
  }

  .mobile-more-menu .more-dropdown .about-web-btn::before,
  .mobile-more-menu .more-dropdown .login-btn::before,
  .mobile-more-menu .more-dropdown .logout-btn::before {
    content: none !important;
  }

  .mobile-liquid-dock {
    grid-auto-columns: minmax(0, 1fr);
    max-width: 520px;
    margin: 0 auto;
    left: 12px;
    right: 12px;
  }
}

#map-wrap > #legendBox.legend {
  right: 16px !important;
  max-width: min(390px, calc(100% - 32px)) !important;
}

@media (max-width: 760px) {
  #map-wrap > #legendBox.legend {
    left: 12px !important;
    right: 74px !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 420px) {
  #topbar {
    gap: 7px;
  }

  .mobile-menu-btn,
  .mobile-more-menu > summary,
  .account-menu > summary,
  .login-btn,
  .logout-btn {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }
}


/* Desktop: các nút Home/Giới thiệu/Ngôn ngữ/phân hệ hiển thị trực tiếp trên topbar. */
@media (min-width: 901px) {
  .mobile-more-menu {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }
  .mobile-more-menu > summary {
    display: none !important;
  }
  .mobile-more-menu .more-dropdown {
    display: flex !important;
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* Weather / hydromet online panel */
.weather-panel .hint {
  margin-bottom: 10px;
}

.weather-input-group {
  margin-top: 10px;
}

.weather-selected-title {
  margin: 10px 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #0f766e;
}

.weather-content {
  display: grid;
  gap: 10px;
}

.weather-empty,
.weather-loading,
.weather-error {
  padding: 12px;
  border-radius: 14px;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.18);
  font-size: 13px;
  line-height: 1.45;
}

.weather-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.22);
  color: #991b1b;
}

.weather-card {
  border-radius: 18px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.weather-card.weather-watch {
  border-color: rgba(234, 179, 8, 0.45);
}

.weather-card.weather-warning {
  border-color: rgba(249, 115, 22, 0.5);
}

.weather-card.weather-danger {
  border-color: rgba(220, 38, 38, 0.55);
}

.weather-headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.weather-headline b,
.weather-headline strong {
  display: block;
  font-size: 14px;
}

.weather-headline span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-top: 2px;
}

.weather-headline strong {
  border-radius: 999px;
  background: #e0f2fe;
  color: #075985;
  padding: 5px 9px;
  white-space: nowrap;
}

.weather-watch .weather-headline strong {
  background: #fef9c3;
  color: #854d0e;
}

.weather-warning .weather-headline strong {
  background: #ffedd5;
  color: #9a3412;
}

.weather-danger .weather-headline strong {
  background: #fee2e2;
  color: #991b1b;
}

.weather-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.weather-kpi-grid div {
  border-radius: 14px;
  padding: 9px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.weather-kpi-grid b,
.weather-kpi-grid span {
  display: block;
}

.weather-kpi-grid b {
  font-size: 15px;
  color: #0f172a;
}

.weather-kpi-grid span {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.weather-alert-box {
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.18);
}

.weather-alert-box b {
  display: block;
  margin-bottom: 6px;
}

.weather-alert-box p {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.weather-forecast-list {
  margin-top: 10px;
  display: grid;
  gap: 7px;
}

.weather-forecast-list > b {
  font-size: 13px;
}

.weather-forecast-list div {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.weather-forecast-list span:first-child {
  font-weight: 800;
}

.weather-forecast-list span:last-child,
.weather-source-note {
  color: #64748b;
  font-size: 12px;
}

.weather-source-note {
  margin-top: 10px;
  line-height: 1.35;
}


.dnc-action-stack {
  display: grid;
  gap: 8px;
}

.dnc-edit-risk-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  background: #f97316;
  color: #ffffff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.dnc-edit-risk-btn:hover {
  filter: brightness(1.05);
  color: #ffffff;
  text-decoration: none;
}

.dnc-weather-btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  background: #0f766e;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.dnc-weather-btn:hover {
  filter: brightness(1.05);
}

body.weather-picking #map {
  cursor: crosshair;
}

body.theme-dark .weather-card,
body.theme-dark .weather-kpi-grid div,
body.theme-dark .weather-forecast-list div {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.25);
}

body.theme-dark .weather-kpi-grid b {
  color: #e5e7eb;
}

body.theme-dark .weather-selected-title {
  color: #5eead4;
}

body.theme-dark .weather-empty,
body.theme-dark .weather-loading,
body.theme-dark .weather-alert-box {
  background: rgba(45, 212, 191, 0.08);
  border-color: rgba(45, 212, 191, 0.2);
}


.inventory-warehouse-list{margin-top:10px;padding:10px;border:1px dashed #cfd9e8;border-radius:12px;background:#f8fbff;font-size:12px;color:#41516c;display:flex;flex-direction:column;gap:5px}.inventory-warehouse-list b{color:#20314f}.inventory-warehouse-list span{line-height:1.35}.inventory-muted{color:#6a7890;font-size:12px}.tram-substation-details{margin:10px 0}.tram-substation-details .tram-table th:first-child,.tram-substation-details .tram-table td:first-child{white-space:nowrap;width:72px}

/* Trạm SOS: hạn chế popup bị xê dịch và giới hạn chiều cao khi trạm có nhiều kho/vật tư */
.sos-tram-popup .leaflet-popup-tip-container,
.sos-tram-popup .leaflet-popup-tip {
  display: none !important;
}

.sos-tram-popup .leaflet-popup-content-wrapper {
  border-radius: 18px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
}

.sos-tram-popup .leaflet-popup-content {
  width: auto !important;
  max-width: min(520px, calc(100vw - 34px)) !important;
  margin: 14px;
}

.sos-tram-popup .tram-popup-card {
  width: min(500px, calc(100vw - 62px));
  min-width: 0;
  max-width: none;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.sos-tram-popup .tram-popup-card::-webkit-scrollbar,
.tram-table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sos-tram-popup .tram-popup-card::-webkit-scrollbar-thumb,
.tram-table-wrap::-webkit-scrollbar-thumb {
  background: #b7c4d8;
  border-radius: 999px;
}

.sos-tram-popup .tram-table-wrap {
  max-height: 320px;
  overflow: auto;
}

.sos-tram-popup .tram-note a,
.inventory-warehouse-list a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

@media(max-width: 768px) {
  .sos-tram-popup .leaflet-popup-content {
    max-width: calc(100vw - 24px) !important;
    margin: 10px;
  }
  .sos-tram-popup .tram-popup-card {
    width: calc(100vw - 44px);
    max-height: calc(100vh - 130px);
  }
}


.inventory-panel-footer {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.inventory-panel-footer:empty {
  display: none;
}

.inventory-panel-footer a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.inventory-panel-summary .inventory-empty-cell {
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #f8fafc;
}

body.theme-dark .inventory-panel-footer,
body.theme-dark .inventory-warehouse-list,
body.theme-dark .inventory-panel-summary .inventory-empty-cell {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(148, 163, 184, 0.28);
}

/* Trạm SOS: popup trung tâm ổn định, không phụ thuộc neo marker Leaflet */
.tram-sos-center-popup {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
}

.tram-sos-center-card {
  position: relative;
  width: min(560px, calc(100vw - 36px));
  max-height: min(76vh, 720px);
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.28);
  pointer-events: auto;
}

.tram-sos-center-content {
  max-height: min(76vh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
}

.tram-sos-center-content .tram-popup-card {
  width: 100%;
  min-width: 0;
  max-width: none;
}


/* Khi panel Danh mục vật tư mở, đẩy popup trạm sang trái để không bị che khuất. */
.tram-sos-center-popup.inventory-panel-open,
.tram-sos-center-popup.nearest-panel-open {
  justify-content: flex-start;
  padding-left: max(348px, calc(50vw - 660px));
  padding-right: min(650px, calc(100vw - 348px));
}

.tram-sos-center-popup.inventory-panel-open .tram-sos-center-card,
.tram-sos-center-popup.nearest-panel-open .tram-sos-center-card {
  width: min(560px, calc(100vw - 1000px));
  min-width: 460px;
}

@media(max-width: 1180px) {
  .tram-sos-center-popup.inventory-panel-open,
  .tram-sos-center-popup.nearest-panel-open {
    justify-content: center;
    padding: 12px;
  }

  .tram-sos-center-popup.inventory-panel-open .tram-sos-center-card,
  .tram-sos-center-popup.nearest-panel-open .tram-sos-center-card {
    width: min(560px, calc(100vw - 24px));
    min-width: 0;
  }
}

.tram-sos-center-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #fee2e2;
  color: #dc2626;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.tram-sos-center-close:hover {
  background: #fecaca;
}

.tram-sos-center-content::-webkit-scrollbar {
  width: 8px;
}

.tram-sos-center-content::-webkit-scrollbar-thumb {
  background: #b7c4d8;
  border-radius: 999px;
}

body.theme-dark .tram-sos-center-card {
  background: #0f172a;
  color: #e5edf8;
}

@media(max-width: 768px) {
  .tram-sos-center-popup {
    padding: 10px;
  }

  .tram-sos-center-card {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 110px);
  }

  .tram-sos-center-content {
    max-height: calc(100vh - 110px);
    padding: 12px;
  }
}

/* Chú giải: tách rõ Điểm nguy cơ và Trạm SOS */
.legend .legend-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.legend .legend-section > b {
  display: block;
  margin-bottom: 5px;
  color: var(--blue2);
  font-size: 12px;
}

.tram-sos-type-generic { --tram-type-color: var(--blue); }

.nearest-rank {
  background: var(--nearest-route-color, #b42318);
}

.nearest-route-meta {
  margin-top: 5px !important;
  font-weight: 800;
}

.nearest-route-meta.ready { color: #087f72 !important; }
.nearest-route-meta.pending { color: #2858ad !important; }
.nearest-route-meta.fallback { color: #b45309 !important; }

.nearest-distance small {
  display: block;
  margin-top: 2px;
  color: #087f72;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.nearest-note.routing {
  border-color: #bfd5ff;
  background: #eef5ff;
  color: #2858ad;
}

/* Automobile routes: animated dashes with a light casing stay readable over administrative borders. */
.webgis-route-casing {
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.42));
}

.webgis-route-animated {
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: webgis-route-flow 1.05s linear infinite;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.34));
}

.webgis-route-animated.webgis-route-fallback {
  animation-duration: 1.55s;
}

@keyframes webgis-route-flow {
  to { stroke-dashoffset: -44; }
}

@media (prefers-reduced-motion: reduce) {
  .webgis-route-animated { animation: none; }
}

/* UI polish pass: clearer hierarchy, steadier controls, better map readability. */
:root {
  --ui-focus: 0 0 0 3px rgba(44, 107, 203, .18);
  --ui-panel-shadow: 0 18px 44px rgba(15, 34, 67, .14);
  --ui-control-shadow: 0 8px 20px rgba(31, 74, 143, .12);
}

#topbar {
  border-bottom: 1px solid rgba(203, 216, 232, .86);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 28px rgba(15, 34, 67, .08);
}

.brand img {
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(43, 92, 171, .10), 0 8px 18px rgba(15, 34, 67, .10);
}

.brand h1 {
  color: #244f9b;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 900;
  letter-spacing: 0;
}

.brand small { color: #65758d; }

.top-actions { gap: 9px; }

.top-mode-switcher {
  border: 1px solid #d8e3f4;
  border-radius: 12px;
  background: #f2f7ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
}

.icon-btn,
.about-web-btn,
.lang-switch,
.login-btn,
.account-menu > summary,
.top-mode-btn,
.mode-admin-link {
  min-height: 36px;
  border-radius: 8px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.icon-btn:hover,
.about-web-btn:hover,
.lang-switch:hover,
.login-btn:hover,
.account-menu > summary:hover,
.top-mode-btn:hover,
.mode-admin-link:hover {
  box-shadow: var(--ui-control-shadow);
  transform: translateY(-1px);
}

.icon-btn:focus-visible,
.about-web-btn:focus-visible,
.lang-switch:focus-visible,
.login-btn:focus-visible,
.account-menu > summary:focus-visible,
.top-mode-btn:focus-visible,
.mode-admin-link:focus-visible,
.action-card:focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus);
}

#sidebar {
  border-right: 1px solid rgba(203, 216, 232, .92);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 10px 0 30px rgba(15, 34, 67, .07);
}

.sidebar-title {
  color: #244f9b;
  letter-spacing: 0;
}

.action-card {
  border-color: #cddbf0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.action-card:hover {
  border-color: #8fb1e7;
  box-shadow: 0 10px 24px rgba(31, 74, 143, .11);
  transform: translateY(-1px);
}

.side-card,
.side-list,
.side-section {
  border-color: #d9e4f4;
  background: rgba(255, 255, 255, .82);
}

.legend,
.tram-sos-center-card,
.inventory-panel,
.nearest-panel,
.leaflet-popup-content-wrapper {
  border: 1px solid rgba(203, 216, 232, .92);
  box-shadow: var(--ui-panel-shadow);
}

.legend {
  border-radius: 12px;
  background: rgba(255, 255, 255, .97);
}

.legend h4,
.tram-sos-center-card h2,
.nearest-panel h2,
.inventory-panel h2 {
  color: #203f7c;
  letter-spacing: 0;
}

.tram-sos-center-card,
.inventory-panel,
.nearest-panel {
  border-radius: 16px;
}

.tram-action-btn,
.nearest-panel-item,
.inventory-panel-tools button {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.tram-action-btn:hover,
.nearest-panel-item:hover,
.inventory-panel-tools button:hover {
  box-shadow: var(--ui-control-shadow);
  transform: translateY(-1px);
}

.nearest-panel-item {
  border-color: #dbe6f6;
  border-radius: 14px;
}

.leaflet-control-zoom a {
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(15, 34, 67, .12);
}

body.theme-dark #topbar {
  border-bottom-color: #263548;
  background: rgba(15, 23, 42, .96);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

body.theme-dark #sidebar,
body.theme-dark .legend,
body.theme-dark .tram-sos-center-card,
body.theme-dark .inventory-panel,
body.theme-dark .nearest-panel,
body.theme-dark .leaflet-popup-content-wrapper {
  border-color: #334155;
  background: rgba(17, 24, 39, .97);
  color: #e5e7eb;
}

body.theme-dark .action-card,
body.theme-dark .side-card,
body.theme-dark .side-list,
body.theme-dark .side-section {
  border-color: #334155;
  background: #111827;
}

@media (max-width: 900px) {
  #topbar {
    box-shadow: 0 8px 24px rgba(15, 34, 67, .10);
  }

  .top-actions {
    gap: 7px;
  }

  .legend,
  .tram-sos-center-card,
  .inventory-panel,
  .nearest-panel {
    border-radius: 12px;
  }

  .map-loading-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .map-loading-card button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media print {
  html,
  body,
  #app-container,
  #map-wrap,
  #map,
  .print-preview,
  .print-workspace,
  .print-paper,
  .print-map-frame,
  #printPreviewMap {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #app-container {
    display: block !important;
  }

  #topbar,
  #sidebar,
  .sidebar-backdrop,
  .map-toolbar,
  .mobile-liquid-dock,
  .status,
  .map-loading-overlay,
  .print-panel,
  .leaflet-control-container {
    display: none !important;
  }

  .map-print-preview-mode #map-wrap {
    display: none !important;
  }

  .map-print-preview-mode .print-preview {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    background: #ffffff !important;
  }

  .map-print-preview-mode .print-workspace {
    display: block !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  .map-print-preview-mode .print-paper {
    box-shadow: none !important;
  }

  #map-wrap {
    position: fixed !important;
    inset: 0 !important;
  }

  .legend,
  .map-readout,
  .print-north,
  .print-scale-label {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}