/* assets/css/app/chunk-01.css */
:root {
  --red: #cf2b25;
  --red-dark: #a91e1a;
  --green: #64c95f;
  --blue: #196eb8;
  --line: #cfcfcf;
  --panel: #f4f4f4;
  --text: #202020;
  --muted: #66717a;
  --shadow: 0 1px 4px rgba(0, 0, 0, .22);
  --lp-hour-width: 72px;
  --lp-day-width: 1728px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.35 Arial, Helvetica, sans-serif;
  color: var(--text);
  background: #e9e9e9;
  overflow: hidden;
}

body.auth-locked {
  background: #d9dde2;
}

body.auth-locked .topbar,
body.auth-locked .layout,
body.auth-locked .window-dock,
body.auth-locked .modal:not(#loginModal) {
  display: none !important;
}

.topbar {
  height: 64px;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #8f1d19 0%, #c72a24 58%, #1f2937 100%);
  color: white;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .22);
  z-index: 20;
  position: relative;
}

.brand { font-weight: 900; display: flex; align-items: center; gap: 11px; letter-spacing: .2px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 24px;
  border: 2px solid white;
  font-weight: 800;
}

.global-search { position: relative; justify-self: stretch; width: 100%; max-width: 520px; }
.global-search input {
  min-height: 40px;
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.14);
  color: white;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.global-search input::placeholder { color: rgba(255,255,255,.72); }
input, select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #b9b9b9;
  padding: 7px 9px;
  background: white;
  color: var(--text);
}

label:has(> .picker-results),
.order-field,
.stop-picker-card label,
.base-build-section label,
.activity-form-grid label,
.pkw-activity-form label,
.admin-field {
  position: relative;
}

.search-results, .picker-results {
  z-index: 50;
  margin-top: 6px;
  width: 100%;
  max-height: 230px;
  overflow: auto;
  background: white;
  color: var(--text);
  border: 1px solid #cbd5e1;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
  display: none;
}
.search-results { position: absolute; }
.picker-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
}

.result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 11px;
  border-bottom: 1px solid #edf2f7;
  cursor: pointer;
}
.result:last-child { border-bottom: 0; }
.result:hover { background: #f8fafc; }
.result span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result strong {
  color: #0f172a;
  font-size: 13px;
}
.result small {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 3px 7px;
  background: #f1f5f9;
  color: #475569;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.top-actions { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.time-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  background: rgba(15,23,42,.28);
  border: 1px solid rgba(255,255,255,.16);
}
.time-button {
  min-height: 34px;
  border-color: rgba(255,255,255,.2);
  background: rgba(15,23,42,.26);
  color: white;
  font-weight: 700;
  padding: 0 10px;
}
.time-button.active {
  background: white;
  border-color: white;
  color: #9f1f1f;
}
.admin-only { display: none; }
.is-admin .admin-only { display: inline-flex; }
[hidden],
body:not(.is-admin) .admin-only {
  display: none !important;
}
.game-clock {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  font-weight: 800;
  background: rgba(255,255,255,.16);
  color: white;
  min-width: 120px;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
}
.money {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  font-weight: 700;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
}

.layout {
  height: calc(100vh - 64px);
  position: relative;
  overflow: hidden;
  padding: 0;
}

body.view-maponly .topbar,
body.view-maponly .floating-window,
body.view-maponly .window-dock {
  display: none !important;
}

body.view-maponly .layout {
  height: 100vh;
  display: block !important;
}

body.view-maponly.auth-locked #loginModal {
  display: none !important;
}

body.view-maponly #map {
  display: block !important;
  height: 100vh;
  min-height: 100vh;
}

.map-view-header {
  display: none;
}

body.view-controlsonly #map {
  display: none;
}

body.view-controlsonly .topbar {
  height: auto;
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
}

body.view-controlsonly .brand {
  white-space: nowrap;
}

body.view-controlsonly .global-search {
  min-width: 180px;
}

body.view-controlsonly .top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

body.view-controlsonly .time-controls {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: min(520px, 100%);
}

.company-chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(135deg, #0f8b8d, #2563eb);
  color: white;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .28);
}

.company-chat-fab[hidden] {
  display: none !important;
}

.company-chat-fab.active {
  background: linear-gradient(135deg, #0f172a, #0f8b8d);
}

.company-chat-fab em {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #ef4444;
  color: white;
  font-style: normal;
  font-size: 11px;
}

.company-chat-panel {
  position: fixed;
  right: 22px;
  bottom: 80px;
  z-index: 901;
  width: min(420px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  display: none;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid #c8d3df;
  background: #f8fafc;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .32);
}

.company-chat-panel.open {
  display: grid;
}

.company-chat-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid #dbe4ef;
  background: white;
}

.company-chat-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-chat-head strong {
  color: #0f172a;
  font-size: 16px;
}

.company-chat-head span {
  color: var(--muted);
  font-size: 12px;
}

.company-chat-messages {
  display: grid;
  align-content: end;
  gap: 10px;
  padding: 14px;
  overflow: auto;
}

.company-chat-message {
  justify-self: start;
  max-width: 86%;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid #dbe4ef;
  background: white;
}

.company-chat-message.own {
  justify-self: end;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.company-chat-message > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.company-chat-message strong {
  color: #0f172a;
  font-size: 12px;
}

.company-chat-message small {
  color: var(--muted);
  font-size: 11px;
}

.company-chat-message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.company-chat-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #cbd5e1;
  overflow: hidden;
  background: #f8fafc;
  cursor: zoom-in;
}

.company-chat-image-button img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: white;
}

.company-chat-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #dbe4ef;
  background: white;
}

.company-chat-form input {
}

.company-chat-file {
  display: none !important;
}

.company-chat-attach {
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 36px;
  border: 1px solid #b8c7d8;
  background: #f8fafc;
  color: #0f8b8d;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.company-chat-attach:hover {
  border-color: #0f8b8d;
  background: #e6fffb;
}

.company-chat-image-name {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 6px 9px;
  background: #ecfeff;
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.view-controlsonly .layout {
  background: #dfe4e8;
}

#accountPanel {
  left: 26px;
  top: 372px;
  width: 460px;
  height: 360px;
}

#accountPanel.modal {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
}

.map-notification {
  position: fixed;
  right: 16px;
  top: auto;
  bottom: 18px;
  z-index: 5000;
  width: min(420px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  pointer-events: none;
}

.map-toast {
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px 1fr 34px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(15, 23, 42, .94);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-left: 4px solid #22c55e;
  box-shadow: 0 18px 45px rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateX(calc(100% + 24px));
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.map-toast.show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.map-toast.danger {
  background: rgba(127, 29, 29, .96);
  border-color: rgba(248, 113, 113, .55);
  border-left-color: #ef4444;
  box-shadow: 0 18px 45px rgba(127, 29, 29, .42);
}

.map-toast.danger .map-notification-icon {
  background: rgba(239, 68, 68, .2);
  border-color: rgba(252, 165, 165, .62);
  color: #fecaca;
}

.map-notification strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  letter-spacing: .1px;
}

.map-notification-content {
  min-width: 0;
}

.map-notification-content span {
  display: block;
  color: rgba(255,255,255,.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-notification-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.45);
  color: #bbf7d0;
  font-weight: 900;
}

.map-notification button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

body.view-maponly .map-notification {
  top: 16px;
}

#map {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border: 0;
  box-shadow: none;
}

.map-layer-control {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  pointer-events: auto;
}

.map-layer-toggle {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, .82);
  background: rgba(248, 250, 252, .96);
  color: #0f172a;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .16);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

.map-layer-toggle .header-icon,
.map-layer-toggle svg {
  width: 18px;
  height: 18px;
}

.map-layer-toggle.active {
  border-color: #0f8b8d;
  background: linear-gradient(135deg, #0f8b8d, #2563eb);
  color: #fff;
}

.map-layer-panel {
  position: absolute;
  top: 46px;
  right: 0;
  width: 252px;
  display: none;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, .72);
  background: rgba(248, 250, 252, .98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .22);
  color: #0f172a;
}

.map-layer-panel.open {
  display: grid;
}

body.ui-window-design:not(.view-maponly) .map-layer-control {
  grid-area: map !important;
  position: relative !important;
  justify-self: end !important;
  align-self: start !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  width: max-content !important;
  height: max-content !important;
}

.map-layer-panel-head {
  display: grid;
  gap: 1px;
  padding: 2px 2px 6px;
}

.map-layer-panel-head strong {
  font-size: 13px;
}

.map-layer-panel-head span {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.map-layer-divider {
  margin: 3px 2px 0;
  padding-top: 7px;
  border-top: 1px solid rgba(148, 163, 184, .45);
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.map-layer-row {
  position: relative;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 4px 6px 8px;
  cursor: pointer;
  font-weight: 850;
}

.map-layer-row:hover {
  background: rgba(14, 165, 233, .08);
}

.map-layer-row.is-muted {
  color: #64748b;
}

.map-layer-row input.map-layer-switch {
  position: absolute;
  right: 12px;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

.map-layer-switch-track {
  position: relative;
  width: 42px;
  height: 22px;
  background: #cbd5e1;
  border: 1px solid #94a3b8;
  transition: background .16s ease, border-color .16s ease;
}

.map-layer-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .28);
  transition: transform .16s ease;
}

.map-layer-switch:checked + .map-layer-switch-track {
  border-color: #0f8b8d;
  background: linear-gradient(135deg, #0f8b8d, #2563eb);
}

.map-layer-switch:checked + .map-layer-switch-track::after {
  transform: translateX(20px);
}

.panel, .side-panel {
  background: var(--panel);
  border: 1px solid #bcbcbc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  min-width: 0;
}
.compact { overflow: auto; }
.panel-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #c8c8c8;
  background: linear-gradient(#f8f8f8, #dddddd);
  cursor: move;
  user-select: none;
}
h2, h3 { margin: 0; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }

.side-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 0;
  overflow: visible;
}

.floating-window {
  position: absolute;
  z-index: 500;
  resize: both;
  overflow: auto;
  min-width: 260px;
  min-height: 180px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 72px);
}
.floating-window.hidden-window {
  display: none !important;
}

#depotPanel {
  left: 14px;
  bottom: 14px;
  width: 420px;
  height: 290px;
}

#sitesPanel {
  left: 448px;
  bottom: 14px;
  width: 360px;
  height: 290px;
}

#overviewPanel {
  right: 14px;
  top: 14px;
  width: 520px;
  height: 650px;
}

#notificationsPanel {
  left: 456px;
  bottom: 14px;
  width: 420px;
  height: 210px;
}

#contractsPanel {
  right: 28px;
  top: 300px;
  width: 430px;
  height: 420px;
}

#locoPlanningPanel {
  left: 120px;
  top: 78px;
  width: 920px;
  height: 560px;
  min-width: 520px;
  min-height: 330px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden !important;
}

.planning-pane { display: none; min-height: 0; overflow: hidden; }
.planning-pane.active { display: block; min-height: 0; height: 100%; overflow: hidden; }

.planning-pane > .inline-loco-planner {
  height: 100%;
  min-height: 0;
}

.personnel-planner {
  --personnel-split: 64%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.personnel-split-layout {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(120px, var(--personnel-split)) 10px minmax(92px, 1fr);
  overflow: hidden;
}

.personnel-split-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: rgba(255,255,255,.86);
}

.personnel-roster-section .lp-board {
  min-height: 0;
  height: 100%;
}

.personnel-roster-section .lp-grid-wrap,
.personnel-open-section .personnel-assignment-list {
  min-height: 0;
  overflow: auto;
}

.personnel-roster-section .lp-left {
  min-height: 0;
  overflow: hidden;
}

.personnel-open-section #personnelOpenAssignmentList {
  max-height: none;
  height: 100%;
  padding: 10px 12px 12px;
}

.personnel-section-head {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-bottom: 1px solid #d8dee8;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}

.personnel-open-section .sub-head {
  display: none;
}

.personnel-split-handle {
  width: 100%;
  height: 10px;
  min-height: 10px;
  padding: 0;
  border: 0;
  border-top: 1px solid #d8dee8;
  border-bottom: 1px solid #d8dee8;
  background: linear-gradient(#f8fafc, #eef2f7);
  cursor: row-resize;
  position: relative;
}

.personnel-split-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 4px;
  transform: translate(-50%, -50%);
  background: #94a3b8;
}

#personnelPlanningPane.is-resizing .personnel-split-handle::after {
  background: var(--blue);
}

#personnelPlanningPane .lp-left {
  width: 220px;
}

#carPlanningPane .lp-left {
  width: 220px;
}

#personnelPlanningPane .lp-grid {
  background-size: calc(var(--lp-hour-width) / 4) 54px;
}

#carPlanningPane .lp-grid {
  background-size: calc(var(--lp-hour-width) / 4) 54px;
}

#personnelPlanningPane .lp-row {
  height: 54px;
}

#carPlanningPane .lp-row {
  height: 54px;
}

#personnelPlanningPane .lp-res-row {
  min-height: 54px;
  height: 54px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding-top: 6px;
  padding-bottom: 6px;
  overflow: hidden;
}

#carPlanningPane .lp-res-row {
  min-height: 54px;
  height: 54px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding-top: 6px;
  padding-bottom: 6px;
  overflow: hidden;
}

#personnelPlanningPane .personnel-res-row strong,
#personnelPlanningPane .personnel-res-row span,
#carPlanningPane .personnel-res-row strong,
#carPlanningPane .personnel-res-row span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#personnelPlanningPane .personnel-res-row strong {
  font-size: 13px;
}

#carPlanningPane .car-planner {
  gap: 12px;
}

.car-open-section {
  display: grid;
  gap: 8px;
  min-height: 120px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-top: 1px solid #dbe3ee;
  background: #f8fafc;
}

#personnelPlanningPane .personnel-res-row span {
  font-size: 12px;
  line-height: 1.25;
}

#personnelPlanningPane .lp-activity {
  min-width: 0 !important;
  max-width: none;
  min-height: 10px;
  padding: 0 6px;
  line-height: 1;
}

#personnelPlanningPane .personnel-assignment {
  min-height: auto;
}

.personnel-pane-head {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 12px 0;
}

.personnel-res-row {
  position: relative;
  padding-right: 12px;
}

.personnel-res-row .personnel-fire {
  display: none;
}

.personnel-offer-strip {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(148, 163, 184, .25);
}

.personnel-offer-strip .personnel-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.personnel-plus {
  display: inline-grid;
  place-items: center;
}

.personnel-plus .header-icon,
.personnel-plus svg {
  width: 19px;
  height: 19px;
}

.personnel-overview-card {
  width: 95vw;
  height: 95vh;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.personnel-overview-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
  border-top: 1px solid #d7e0ea;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
}

.personnel-overview-tabs button {
  width: auto;
  min-width: 110px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid #d7e0ea;
  background: #eef2f7;
  color: #334155;
  padding: 9px 14px;
  font-weight: 800;
  cursor: pointer;
}

.personnel-overview-tabs button.active {
  background: #dbeafe;
  border-color: #bfdbfe;
  color: #0b57d0;
}

.personnel-overview-pane {
  display: none !important;
}

.personnel-overview-pane.active {
  display: grid !important;
}

.personnel-overview-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 16px;
  min-height: 0;
  overflow: hidden;
  padding: 16px;
}

.personnel-training-box {
  grid-column: 1 / -1;
}

.personnel-training-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
  align-items: end;
}

.training-page {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: #f4f7fb;
}

.personnel-training-page {
  border-top: 1px solid #d7e0ea;
  grid-template-columns: minmax(620px, 1.35fr) minmax(360px, .65fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}

.personnel-training-page .training-form-grid {
  grid-template-columns: minmax(280px, 360px) minmax(360px, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 0;
}

.personnel-training-page #scheduleTrainingButton {
  align-self: end;
}

.training-form-card,
.training-list-card {
  display: grid;
  gap: 10px;
  min-height: 0;
  border: 1px solid #d7e0ea;
  background: #fff;
  padding: 12px;
}

.training-form-card {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.training-form-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(360px, 1fr);
  gap: 10px;
  align-items: stretch;
}

.training-form-grid label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.training-form-grid select,
.training-form-grid input {
  min-width: 0;
}

.training-form-grid input[readonly] {
  background: #eef2f7;
  color: #475569;
  cursor: default;
}

.training-people-field {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  padding: 12px;
  border: 1px solid #d8e2ee;
  background: #f8fafc;
}

.training-settings-card {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, auto) auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8e2ee;
  background: #f8fafc;
}

.training-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}

.training-settings-grid label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.training-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}

.training-checkbox-list,
.training-offer-list {
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
}

.training-offer-list {
  max-height: 250px;
}

.training-offer-list:empty {
  display: none;
}

.training-person-check,
.training-offer {
  display: grid;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8e2ee;
  background: #f8fafc;
  padding: 9px 10px;
}

.training-person-check {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.training-offer {
  grid-template-columns: auto minmax(0, 1fr);
}

.training-person-check {
  min-height: 42px;
  position: relative;
}

#trainingPersonSelect .training-person-check {
  min-height: 44px;
  padding: 8px 10px;
}

@media (max-width: 1150px) {
  .personnel-training-page {
    grid-template-columns: 1fr;
  }

  .personnel-training-page .training-form-grid,
  .training-form-grid {
    grid-template-columns: 1fr;
  }

  .training-settings-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 720px) {
  .training-settings-grid,
  .training-action-row {
    grid-template-columns: 1fr;
  }
}

.training-person-check span,
.training-offer span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.training-person-check strong,
.training-person-check small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-person-info {
  width: 30px;
  height: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.training-person-info .header-icon {
  width: 16px;
  height: 16px;
}

.person-training-info-card {
  width: min(620px, calc(100vw - 32px));
  max-height: 86vh;
}.schedule-edit-card {
  width: min(760px, calc(100vw - 32px));
  height: auto;
  max-height: 86vh;
}.schedule-extend-card {
  width: min(520px, calc(100vw - 32px));
  height: auto;
  max-height: 86vh;
}

.schedule-extend-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.schedule-extend-body label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.schedule-extend-body p {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
}

.schedule-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.schedule-edit-grid label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.schedule-edit-grid .wide {
  grid-column: 1 / -1;
}

.schedule-edit-stops {
  display: grid;
  gap: 10px;
  margin: 0 16px 14px;
  padding: 12px;
  border: 1px solid #d8e2ee;
  background: #f8fafc;
}

.schedule-edit-stops-head {
  display: grid;
  gap: 3px;
}

.schedule-edit-stops-head strong {
  color: #0f172a;
}

.schedule-edit-stops-head span,
.schedule-edit-stop-hint {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.schedule-edit-stop-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px auto;
  gap: 10px;
  align-items: end;
}

.schedule-edit-stop-controls label {
  position: relative;
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.schedule-edit-stop-controls .picker-results {
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow: auto;
  z-index: 3;
}

.schedule-edit-stop-result {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  text-align: left;
}

.schedule-edit-stop-result:hover {
  background: #eff6ff;
}

.schedule-edit-stop-result span,
.schedule-edit-stop-result strong,
.schedule-edit-stop-result small {
  display: block;
}

.schedule-edit-stop-result small {
  color: #64748b;
  font-size: 11px;
}

.schedule-edit-stop-result b {
  color: #2563eb;
  font-size: 11px;
}

.schedule-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px 16px;
  border-top: 1px solid #d8e2ee;
}

.schedule-edit-actions span {
  color: #0f172a;
  font-weight: 900;
}

.training-info-list {
  display: grid;
  gap: 8px;
  max-height: 62vh;
  overflow: auto;
  padding: 14px;
}

.training-info-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #d8e2ee;
  background: #f8fafc;
}

.training-info-row .header-icon {
  width: 18px;
  height: 18px;
}

.training-info-row.done .header-icon {
  color: #16a34a;
}

.training-info-row.missing .header-icon {
  color: #dc2626;
}

.training-person-check small,
.training-offer small {
  color: #64748b;
  font-size: 11px;
}

.training-offer:has(input:checked),
.training-person-check:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
}

.shift-trainee-card {
  width: min(640px, calc(100vw - 32px));
  max-height: 82vh;
}

.shift-trainee-body {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: 48vh;
  overflow: auto;
  padding: 14px;
}

.shift-trainee-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #d8e2ee;
  background: #f8fafc;
}

.personnel-overview-grid section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

.personnel-overview-grid .personnel-list {
  align-content: start;
  overflow: auto;
}

.personnel-assignment[draggable="true"] {
  cursor: grab;
}

.personnel-assignment[draggable="true"]:active {
  cursor: grabbing;
}

.personnel-drop-row,
.personnel-res-row {
  outline-offset: -3px;
}

.personnel-layout {
  display: grid;
  gap: 12px;
  padding: 14px;
  min-height: 0;
  overflow: auto;
}

.personnel-hire-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.personnel-list,
.personnel-assignment-list,
.personnel-checks {
  display: grid;
  gap: 8px;
}

#personnelOpenAssignmentList {
  max-height: 230px;
  overflow: auto;
  padding: 0 12px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
  align-content: start;
}

.personnel-card,
.personnel-assignment {
  box-sizing: border-box;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(255, 255, 255, .76);
  padding: 9px 11px;
}

.personnel-assignment {
  display: grid;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

#personnelOpenAssignmentList .personnel-assignment {
  min-height: 58px;
  padding: 7px 8px 7px 12px;
  border-left-width: 5px;
}

#personnelOpenAssignmentList .personnel-assignment.lp-inspection { border-left-color: #8b5cf6; background: rgba(139, 92, 246, .10); }
#personnelOpenAssignmentList .personnel-assignment.lp-brake { border-left-color: #f59e0b; background: rgba(245, 158, 11, .12); }
#personnelOpenAssignmentList .personnel-assignment.lp-shunt { border-left-color: #a16207; background: rgba(161, 98, 7, .12); }
#personnelOpenAssignmentList .personnel-assignment.lp-cargo { border-left-color: #10b981; background: rgba(16, 185, 129, .12); }
#personnelOpenAssignmentList .personnel-assignment.lp-fuel { border-left-color: #06b6d4; background: rgba(6, 182, 212, .12); }
#personnelOpenAssignmentList .personnel-assignment.lp-trip { border-left-color: #2563eb; background: rgba(37, 99, 235, .12); }
#personnelOpenAssignmentList .personnel-assignment.lp-training { border-left-color: #64748b; background: rgba(100, 116, 139, .12); }
#personnelOpenAssignmentList .personnel-assignment.lp-rest { border-left-color: #16a34a; background: rgba(22, 163, 74, .12); }

.personnel-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.personnel-offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
}

.personnel-offer-card > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.personnel-offer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.personnel-offer-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.personnel-offer-filters select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.personnel-qual-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.personnel-qual-chips em {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 7px;
  background: #eef4ff;
  color: #31527a;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.personnel-card span,
.personnel-assignment span,
.personnel-assignment small {
  display: block;
  color: #64748b;
  font-size: 12px;
}

.personnel-fire {
  border-color: rgba(220, 38, 38, .35);
  color: #b91c1c;
}

.personnel-hire {
  border-color: rgba(22, 163, 74, .35);
  color: #15803d;
}

.personnel-plan {
  display: grid;
  gap: 8px;
}

.personnel-plan-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: stretch;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(248, 250, 252, .82);
  padding: 8px;
}

.personnel-plan-name {
  display: grid;
  align-content: center;
  gap: 2px;
  border-right: 1px solid rgba(148, 163, 184, .25);
  padding-right: 8px;
}

.personnel-plan-name span {
  color: #64748b;
  font-size: 12px;
}

.personnel-plan-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.personnel-plan-items span {
  border: 1px solid rgba(37, 99, 235, .24);
  background: rgba(37, 99, 235, .1);
  color: #1d4ed8;
  padding: 4px 8px;
  font-size: 12px;
}

.personnel-plan-items span.done {
  border-color: rgba(22, 163, 74, .28);
  background: rgba(22, 163, 74, .1);
  color: #15803d;
}

.personnel-assignment.needs-personnel {
  border-color: rgba(220, 38, 38, .45);
  background: rgba(254, 242, 242, .86);
}

.personnel-assignment-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 0;
}

.personnel-assignment-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.personnel-assignment-head strong {
  font-size: 12px;
  line-height: 1.2;
}

#personnelOpenAssignmentList .personnel-assignment-head span:not(.personnel-role-chip),
#personnelOpenAssignmentList .personnel-assignment-head small,
#personnelOpenAssignmentList .personnel-assigned-line,
#personnelOpenAssignmentList .assign-hint {
  font-size: 11px;
}

.personnel-assignment-head span:not(.personnel-role-chip),
.personnel-assignment-head small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personnel-role-chip {
  flex: 0 0 auto;
  border: 1px solid rgba(37, 99, 235, .18);
  background: rgba(37, 99, 235, .08);
  color: #1d4ed8 !important;
  padding: 3px 6px;
  font-size: 10px !important;
  font-weight: 800;
}

#personnelOpenAssignmentList .personnel-role-chip {
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personnel-assigned-line {
  display: block;
  color: #475569;
  font-size: 12px;
  line-height: 1.25;
  margin-top: 0;
}

.personnel-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.personnel-checks label.muted {
  opacity: .48;
}

body.dark-mode .personnel-card,
body.dark-mode .personnel-assignment {
  background: #182235;
  border-color: #2f3d52;
  color: #e5e7eb;
}

body.dark-mode #personnelOpenAssignmentList .personnel-assignment.lp-inspection { border-left-color: #a78bfa; background: rgba(167, 139, 250, .16); }
body.dark-mode #personnelOpenAssignmentList .personnel-assignment.lp-brake { border-left-color: #fbbf24; background: rgba(251, 191, 36, .16); }
body.dark-mode #personnelOpenAssignmentList .personnel-assignment.lp-shunt { border-left-color: #ca8a04; background: rgba(202, 138, 4, .18); }
body.dark-mode #personnelOpenAssignmentList .personnel-assignment.lp-cargo { border-left-color: #34d399; background: rgba(52, 211, 153, .15); }
body.dark-mode #personnelOpenAssignmentList .personnel-assignment.lp-fuel { border-left-color: #22d3ee; background: rgba(34, 211, 238, .15); }
body.dark-mode #personnelOpenAssignmentList .personnel-assignment.lp-trip { border-left-color: #60a5fa; background: rgba(96, 165, 250, .16); }
body.dark-mode #personnelOpenAssignmentList .personnel-assignment.lp-training { border-left-color: #94a3b8; background: rgba(148, 163, 184, .14); }
body.dark-mode #personnelOpenAssignmentList .personnel-assignment.lp-rest { border-left-color: #4ade80; background: rgba(74, 222, 128, .15); }

body.dark-mode .personnel-card span,
body.dark-mode .personnel-assignment span,
body.dark-mode .personnel-assignment small {
  color: #9fb0c7;
}

body.dark-mode .personnel-assignment.needs-personnel {
  background: rgba(127, 29, 29, .28);
  border-color: rgba(248, 113, 113, .45);
}

body.dark-mode .personnel-role-chip {
  background: rgba(96, 165, 250, .14);
  border-color: rgba(147, 197, 253, .24);
  color: #bfdbfe !important;
}

body.dark-mode .personnel-assigned-line {
  color: #cbd5e1;
}

body.dark-mode .personnel-plan-row {
  background: #182235;
  border-color: #2f3d52;
}

body.dark-mode .personnel-plan-name {
  border-right-color: #2f3d52;
}

body.dark-mode .personnel-plan-name span {
  color: #9fb0c7;
}

body.dark-mode .personnel-plan-items span {
  background: rgba(59, 130, 246, .18);
  border-color: rgba(96, 165, 250, .32);
  color: #bfdbfe;
}

body.dark-mode .personnel-plan-items span.done {
  background: rgba(34, 197, 94, .16);
  border-color: rgba(74, 222, 128, .28);
  color: #bbf7d0;
}

.window-dock {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 700;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(244, 244, 244, .94);
  border: 1px solid #bcbcbc;
  box-shadow: var(--shadow);
}

.dock-button {
  min-height: 28px;
  padding: 0 10px;
  font-weight: 700;
}

.dock-button.active {
  background: linear-gradient(#5ccb5c, #27942d);
  color: white;
  border-color: #328135;
}

.window-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #c8c8c8;
}

.window-tab {
  border: 0;
  border-right: 1px solid #c8c8c8;
  background: linear-gradient(#f6f6f6, #dddddd);
  font-weight: 700;
}

.window-tab.active {
  background: linear-gradient(#5ccb5c, #27942d);
  color: white;
}

.schedule-view {
  display: none;
  min-height: 0;
}

.schedule-view.active {
  display: block;
}

.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.planner-range-control {
  display: grid;
  grid-template-columns: auto 118px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  font-weight: 800;
}

.planner-range-control.hidden {
  display: none !important;
}

.planner-range-control input {
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid #c4cbd7;
  background: #fff;
  font: inherit;
}

.plus-button {
  width: 32px;
  height: 30px;
  min-height: 30px;
  border-color: #328135;
  background: linear-gradient(#6bd46b, #27942d);
  color: white;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.small-action {
  min-height: 30px;
  padding: 0 10px;
  font-weight: 800;
}

.order-box {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 320px minmax(420px, 1fr);
  gap: 10px;
  background: #f9f9f9;
  overflow: auto;
  min-height: 0;
}
.order-form {
  display: grid;
  align-content: start;
  gap: 10px;
}
.order-route-view {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 360px;
  gap: 10px;
}
label { display: grid; gap: 5px; font-weight: 700; position: relative; }
.speed-row { display: grid; grid-template-columns: 1fr 84px; gap: 8px; align-items: center; }
output { font-weight: 700; color: var(--red); text-align: right; }

.order-modal-card .speed-row {
  grid-template-columns: minmax(100px, 160px) auto;
  justify-content: start;
  align-items: center;
}

.order-modal-card .speed-row input[type="number"] {
  min-height: 38px;
  margin-top: 0;
  text-align: right;
  font-weight: 900;
}

.order-modal-card .speed-row span {
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

button {
  min-height: 30px;
  border: 1px solid #aaa;
  background: linear-gradient(#fff, #dadada);
  cursor: pointer;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.primary {
  border-color: #328135;
  background: linear-gradient(#5ccb5c, #27942d);
  color: white;
  font-weight: 700;
}
.danger {
  border-color: #9c1d19;
  background: linear-gradient(#ef5a54, #bf2520);
}
.order-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

.order-stop-quick {
  flex: 1 1 420px;
  max-width: 640px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid #dbe3ed;
  background: #ffffff;
}

.order-stop-quick-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-top: 2px;
}

.order-stop-quick-list > strong {
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.order-stop-quick-list .stop-list {
  max-height: 170px;
  overflow: auto;
  padding: 0;
  background: transparent;
}

.order-stop-quick-list .stop-empty {
  background: #f8fafc;
}
.order-stop-quick label {
  color: #0f172a;
  font-size: 12px;
}
.order-stop-quick input {
  min-height: 36px;
  border-color: #cbd5e1;
  font-weight: 800;
}
.order-modal-card .order-form input:focus,
.order-modal-card .order-form select:focus,
.order-stop-quick input:focus {
  outline: none;
  border-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, .18);
}
.order-stop-quick button {
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}.order-modal-card .modal-head {
  flex-wrap: wrap;
}.order-modal-card .modal-head > div:first-child {
  flex: 0 1 280px;
}

.route-preview {
  padding: 10px 11px;
  display: grid;
  gap: 8px;
  background: #dff1fb;
  border: 1px solid #9dccdf;
  color: #105475;
}

.route-preview-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.route-preview-meta span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(14, 116, 144, .18);
  background: rgba(255, 255, 255, .55);
  color: #164e63;
  font-size: 12px;
  font-weight: 900;
}

.route-preview-meta b {
  color: #64748b;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.route-warning,
.schedule-detail-warning {
  display: block;
  margin-top: 4px;
  color: #b45309;
  font-style: normal;
  font-weight: 800;
}

.route-preview .route-warning {
  color: #92400e;
}

.route-choice-list {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}

.route-choice-list[hidden] {
  display: none !important;
}

.route-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.route-choice-head span {
  color: #64748b;
  font-size: 11px;
}

.route-choice-card {
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 0;
  padding: 10px;
  border: 1px solid #d7e3f1;
  background: #fff;
  color: #0f172a;
  text-align: left;
  box-shadow: none;
}

.route-choice-card:hover {
  border-color: #38bdf8;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}

.route-choice-card.active {
  border-color: #128c98;
  background: #e8f8fb;
  box-shadow: inset 4px 0 0 #128c98;
}

.route-choice-title,
.route-choice-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.route-choice-title strong {
  font-size: 13px;
}

.route-choice-title small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.route-choice-facts b {
  padding: 3px 7px;
  background: #eef2ff;
  color: #1e3a8a;
  font-size: 11px;
}

.route-choice-card .route-profile-summary {
  margin-top: 0;
}

.route-choice-card em {
  color: #92400e;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.route-choice-card > i {
  justify-self: start;
  padding: 4px 8px;
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.route-choice-card.active > i {
  background: #128c98;
  color: #fff;
}

.route-profile-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.route-profile-summary span,
.station-event-tags em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 4px 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
}

.route-profile-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  background: #64748b;
}

.route-profile-dot.electric { background: #16a34a; }
.route-profile-dot.diesel { background: #f97316; }
.route-profile-dot.unknown { background: #64748b; }
.route-profile-dot.speed { background: #2563eb; }
.route-profile-dot.event { background: #dc2626; }

.route-section-details {
  margin-top: 10px;
  border: 1px solid #dbe3ed;
  background: #f8fafc;
  overflow: hidden;
}

.route-section-details summary {
  cursor: pointer;
  padding: 9px 10px;
  color: #334155;
  font-weight: 900;
}

.route-section-details > div {
  display: grid;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid #e2e8f0;
}

.route-section-details > div > strong {
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
}

.route-section-details > div > span {
  display: grid;
  grid-template-columns: 12px minmax(90px, 160px) 1fr;
  align-items: center;
  gap: 7px;
  color: #334155;
  font-size: 12px;
}

.station-event-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.station-event-tags em {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.order-stops-box {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 1px solid #c8d1dc;
  background: #f8fafc;
  overflow: hidden;
}
.order-modal-card .order-stops-box {
  display: none !important;
}
.order-stops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #dbe3ed;
  background: linear-gradient(#ffffff, #eef4fb);
}
.order-modal-card .order-stops-head {
  background: linear-gradient(#ffffff, #eef4fb);
}
.order-stops-head div {
  display: grid;
  gap: 2px;
}
.order-stops-head strong {
  color: #0f172a;
  font-size: 16px;
}
.order-stops-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.stop-picker-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #ffffff;
}
.stop-picker-card-hidden {
  display: none !important;
}
.stop-manual-field {
  padding: 10px;
  border: 1px solid #dbe3ed;
  background: #ffffff;
  color: #0f172a;
  box-shadow: none;
}
.stop-manual-field #stopManualInput {
  min-height: 42px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}
.stop-manual-button {
  min-height: 40px;
  border-color: #166534;
  background: #16a34a;
  color: #ffffff;
  font-weight: 900;
}
.stop-suggestion-list {
  display: grid;
  gap: 6px;
  max-height: 224px;
  overflow: auto;
  padding: 2px;
  border: 1px solid #dbe3ed;
  background: #f8fafc;
}
.stop-suggestion {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #94a3b8;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}
.stop-suggestion:hover,
.stop-suggestion.selected {
  border-color: #94a3b8;
  border-left-color: #64748b;
  background: #f8fafc;
}
.stop-suggestion span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.stop-suggestion strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stop-suggestion small {
  padding: 2px 6px;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}
.stop-suggestion b {
  padding: 4px 7px;
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  white-space: nowrap;
}
.stop-suggestion.selected b {
  background: #dcfce7;
  color: #166534;
}
.stop-add-row {
  display: grid;
  grid-template-columns: minmax(96px, 124px) minmax(170px, 1fr);
  gap: 10px;
  align-items: end;
}
.stop-add-row #addStopButton {
  min-height: 36px;
  border-color: #166534;
  background: #16a34a;
  color: #ffffff;
  font-weight: 900;
}
.stop-list {
  display: grid;
  gap: 6px;
  min-height: 42px;
  padding: 10px;
  background: #ffffff;
}
.stop-chip {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dbe3ed;
  border-left: 3px solid var(--green);
  background: white;
  box-shadow: 0 4px 10px rgba(15,23,42,.06);
}
.stop-chip b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
}
.stop-chip span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.stop-chip strong,
.stop-chip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stop-chip small {
  color: #64748b;
  font-size: 11px;
}
.stop-chip button {
  width: 26px;
  height: 26px;
  padding: 0;
  border-color: #fecaca;
  background: #fff1f2;
  color: #991b1b;
  font-weight: 900;
}
.stop-empty {
  padding: 8px;
  color: var(--muted);
  background: white;
  border: 1px dashed #c4ccd4;
}

.schedule-list {
  overflow: auto;
  padding: 12px 14px;
}
.archive-block {
  min-height: 0;
  border-top: 0;
}
.archive-head {
  min-height: 38px;
  padding: 8px 14px 0;
}
.archive-list .schedule-card {
  opacity: .82;
  border-left-color: #777;
}
.schedule-card {
  border-left: 5px solid var(--red);
  background: linear-gradient(#fefefe, #e4e4e4);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  margin-bottom: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.schedule-card.active { border-left-color: var(--green); }
.schedule-card:hover { outline: 2px solid rgba(25, 110, 184, .22); }
.schedule-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
}
.badge {
  color: white;
  background: var(--red);
  padding: 2px 6px;
  font-size: 12px;
}
.schedule-card.active .badge { background: var(--green); }
.schedule-meta { margin: 6px 0; color: var(--muted); }
.schedule-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.schedule-card-foot > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.schedule-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.schedule-actions button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 900;
}
.assign-row { display: grid; grid-template-columns: 1fr; gap: 8px; cursor: default; }
.assign-hint {
  color: #a23b35;
  font-size: 12px;
}

.contract-list {
  padding: 10px;
  overflow: auto;
}

.contract-card {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  padding: 10px;
  background: linear-gradient(#fff, #e8e8e8);
  border-left: 5px solid #7d5a22;
  box-shadow: var(--shadow);
}

.contract-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.contract-progress {
  height: 12px;
  background: #cfcfcf;
  border: 1px solid #aaa;
  overflow: hidden;
}

.contract-progress span {
  display: block;
  height: 100%;
  background: var(--green);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 14px 18px 22px;
  overflow: auto;
  height: 100%;
}
.timeline li {
  position: relative;
  padding: 0 0 15px 22px;
  border-left: 3px solid #d53a35;
}
.timeline .segment-bar {
  position: absolute;
  left: -3px;
  top: 16px;
  bottom: 0;
  width: 3px;
  background: #d53a35;
  overflow: hidden;
}
.timeline .segment-bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--green);
  transform: scaleY(var(--segment-progress, 0));
  transform-origin: top;
  transition: transform .6s linear;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  width: 12px;
  height: 12px;
  border: 2px solid white;
  background: #d53a35;
  box-shadow: 0 0 0 1px #a91e1a;
  z-index: 1;
}
.timeline li:last-child { border-left-color: transparent; }
.timeline li:last-child .segment-bar { display: none; }
.timeline strong { display: block; }
.timeline span { color: var(--muted); font-size: 12px; }
.timeline li.complete {
  border-left-color: var(--green);
}
.timeline li.complete::before {
  background: var(--green);
  box-shadow: 0 0 0 1px #2f8f38;
}
.timeline li.complete strong {
  color: #21752b;
}
.timeline li.complete:last-child {
  border-left-color: transparent;
}
.timeline .time-grid {
  display: grid;
  grid-template-columns: minmax(95px, 1fr) minmax(95px, 1fr);
  gap: 3px 10px;
  margin-top: 5px;
  padding: 6px 8px;
  background: #f5f7f9;
  border: 1px solid #d5dde5;
}
.timeline .actual {
  color: #21752b;
}
.timeline .time-head {
  font-weight: 800;
  color: #34495e;
}
.pause-editor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 4px;
  padding: 4px 7px;
  border: 1px solid #c7d0d8;
  background: #f5f8fa;
  font-size: 12px;
}
.pause-editor input[type="number"] {
  width: 58px;
  padding: 3px 4px;
}
.pause-editor.small {
  margin-left: 6px;
}

.depot-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px 14px;
}

.sites-layout {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  height: 100%;
  padding: 12px 14px;
}

.site-field {
  display: grid;
  gap: 5px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  position: relative;
}

.site-field input {
  min-height: 34px;
  border: 1px solid #cbd5e1;
  padding: 0 10px;
  background: #ffffff;
}

.site-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
}

.site-add-row .plus-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
}

.site-list {
  display: grid;
  gap: 8px;
  max-height: 150px;
  overflow: auto;
}

.site-card {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #dbe3ee;
  border-left: 4px solid #0f766e;
  background: #ffffff;
  cursor: pointer;
}

.site-card.main {
  border-left-color: #2563eb;
}

.site-card strong {
  color: #0f172a;
  font-size: 13px;
}

.site-card span {
  color: #64748b;
  font-size: 12px;
}

.sub-head {
  font-weight: 700;
  margin-bottom: 8px;
  color: #444;
}
.shop-row { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px; }
.modal-shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-content: start;
  padding: 14px;
  overflow: auto;
}
.shop-section {
  display: grid;
  gap: 8px;
}
.shop-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: white;
  border-left: 4px solid var(--red);
}
.wagon-card { border-left-color: #7d5a22; }
.car-card { border-left-color: #0f766e; }
.car-art {
  display: grid;
  place-items: center;
  color: #0f766e;
  font-weight: 900;
}
.shop-location-select {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}
.shop-location-select select {
  min-height: 30px;
  border: 1px solid #cbd5e1;
  padding: 0 8px;
  background: #ffffff;
}
.vehicle-image {
  height: 92px;
  border: 1px solid #c8c8c8;
  background: linear-gradient(#edf4f7 0 58%, #d5d5d5 58% 63%, #9a9a9a 63% 66%, #f4f4f4 66%);
  position: relative;
  overflow: hidden;
}
.vehicle-image::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 24px;
  height: 30px;
  background: var(--red);
  box-shadow: inset 0 -8px rgba(0,0,0,.18);
}
.vehicle-image::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 15px;
  height: 13px;
  background:
    radial-gradient(circle at 12px 7px, #222 0 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 12px) 7px, #222 0 6px, transparent 7px),
    linear-gradient(#333, #333) center 7px / 100% 3px no-repeat;
}
.vehicle-image.has-image {
  background: #f4f4f4;
}
.vehicle-image.has-image::before,
.vehicle-image.has-image::after {
  content: none;
}
.vehicle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loco-art::before {
  clip-path: polygon(0 0, 82% 0, 100% 34%, 100% 100%, 0 100%);
}
.art-101::before { background: #d72b25; }
.art-193::before { background: #58b857; }
.art-185::before { background: #196eb8; }
.wagon-art::before {
  background: #7d5a22;
}
.art-sgns::before {
  background:
    linear-gradient(90deg, #2f73b8 0 32%, #f1c84b 32% 64%, #c9433c 64%);
}
.art-zacns::before {
  height: 26px;
  background: #8f8f8f;
}
.art-habbins::before {
  background:
    repeating-linear-gradient(90deg, #7d5a22 0 18px, #9a7440 18px 23px);
}
.cargo-icons {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.cargo-icons span {
  width: 28px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid #b7b7b7;
  background: #f6f6f6;
  color: #2c2c2c;
  font-weight: 800;
  font-size: 15px;
}
.cargo-icons img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}
.shop-card span {
  color: var(--muted);
  font-size: 12px;
}
.shop-acquire-controls {
  display: grid;
  grid-template-columns: 82px 1fr 1fr;
  gap: 7px;
  align-items: center;
}
.shop-acquire-controls input {
  min-height: 32px;
  padding: 5px 7px;
}
.buy-loco, .buy-wagon, .rent-loco, .rent-wagon { text-align: center; font-weight: 700; }
.rent-loco, .rent-wagon {
  background: #f7f9fb;
  border-color: #8ca1b3;
}
.loco-list { display: grid; gap: 7px; }
.loco {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 7px 8px;
  background: white;
  border-left: 4px solid var(--blue);
}
.loco span { color: var(--muted); }
.wagon-item { border-left-color: #7d5a22; }
.depot-row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #d8e1ee;
  border-left: 4px solid var(--blue);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, .07), transparent 44%),
    #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}
.depot-locate-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 0;
  border-radius: 50%;
  align-self: center;
  border: 1px solid #15803d;
  background: linear-gradient(180deg, #2dcc62, #15803d);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}
.depot-locate-button:hover {
  border-color: #166534;
  background: linear-gradient(180deg, #22c55e, #166534);
}
.depot-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.depot-vehicle-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.depot-vehicle-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.depot-vehicle-name small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.depot-status {
  display: block;
  min-width: 0;
  padding: 5px 8px;
  background: #eef4ff;
  color: #334155 !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}
.depot-metrics {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 92px;
}
.depot-metrics span {
  padding: 5px 8px;
  background: #f1f5f9;
  color: #334155 !important;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.depot-fuel {
  background: #eefbf3;
  color: #166534 !important;
}
.depot-fuel-low {
  color: var(--red) !important;
  background: #fff1f2;
  font-weight: 900;
}
.radio-log { margin: 14px; padding: 14px; background: #dff1fb; border: 1px solid #9dccdf; color: #105475; }

.station-marker {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: white;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  font-size: 10px;
}

.station-special-marker {
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 30px;
  overflow: hidden;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,.38);
  font-size: 16px;
  font-weight: 900;
  background: transparent;
}

.station-marker-segment {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  color: white;
}

.station-marker-segment.base,
.station-special-marker.base .station-marker-segment {
  background: #14532d;
}

.station-marker-segment.site,
.station-special-marker.site .station-marker-segment {
  background: #0f766e;
}

.station-marker-segment.fuel,
.station-special-marker.fuel .station-marker-segment {
  background: #dc2626;
}

.station-special-marker.both {
  min-width: 60px;
  gap: 0;
  background: transparent;
  font-size: 13px;
}

.station-special-marker .station-marker-segment.base {
  background: #14532d;
}

.station-special-marker .station-marker-segment.site {
  background: #0f766e;
}

.station-special-marker .station-marker-segment.fuel {
  background: #dc2626;
}
.train-marker {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: white;
  border: 3px solid white;
  box-shadow: 0 1px 7px rgba(0,0,0,.45);
  font-weight: 800;
  font-size: 18px;
}
.loco-marker {
  width: 58px;
  height: 24px;
  display: grid;
  place-items: center;
  background: #196eb8;
  color: white;
  border: 2px solid white;
  box-shadow: 0 1px 7px rgba(0,0,0,.45);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loco-marker.running {
  background: var(--green);
}
.loco-marker.multiple-traction-marker {
  width: 132px;
  padding: 0 8px;
  font-size: 9px;
}

.wagon-marker {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #f2c94c;
  color: #222;
  border: 2px solid #333;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  font-weight: 900;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

.wagon-marker span {
  display: block;
  transform: rotate(45deg);
}

.car-marker {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #0f766e;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

.car-marker span {
  display: block;
  transform: rotate(45deg);
}

.car-marker.running {
  background: var(--green);
}

.station-special-marker.contract-poi-marker {
  min-width: 34px;
  width: 34px;
  height: 40px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.station-special-marker.contract-poi-marker.accepted {
  border-color: transparent;
  box-shadow: none;
}

.station-special-marker.contract-poi-marker .station-marker-segment.contract-poi-segment {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border: 2px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  background: #dc2626;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

.station-special-marker.contract-poi-marker .station-marker-segment.contract-poi-segment svg {
  transform: rotate(45deg);
}

.station-special-marker.contract-poi-marker.accepted .station-marker-segment.contract-poi-segment {
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .22), 0 2px 8px rgba(0, 0, 0, .38);
}

.contract-map-popup {
  display: grid;
  gap: 5px;
  min-width: 210px;
  color: #0f172a;
  font-size: 12px;
}

.contract-map-popup strong {
  font-size: 13px;
}

.contract-map-popup span {
  color: #334155;
}

.contract-map-popup button {
  width: fit-content;
  margin-top: 4px;
  padding: 6px 10px;
  border: 0;
  background: linear-gradient(135deg, #0f8b8d, #2563eb);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.remote-loco-marker {
  width: 52px;
  height: 22px;
  display: grid;
  place-items: center;
  background: #6f42c1;
  color: white;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remote-loco-marker.running {
  background: #2d9cdb;
}

.remote-wagon-marker {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: #d9b54a;
  color: #222;
  border: 2px solid #6c5a24;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
  font-size: 12px;
  font-weight: 900;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

.remote-wagon-marker span {
  display: block;
  transform: rotate(45deg);
}

.remote-car-marker {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: #0f766e;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
  font-size: 8px;
  font-weight: 900;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

.remote-car-marker span {
  display: block;
  transform: rotate(45deg);
}

.remote-car-marker.running {
  background: #22a06b;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 0;
  background: rgba(0,0,0,.42);
  z-index: 1000;
}
.modal.open { display: grid; }.modal-card {
  width: 95vw;
  height: 95vh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.order-modal-card {
  width: 95vw;
  height: 95vh;
  max-height: 95vh;
}.base-modal-card {
  width: min(640px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
  max-height: min(760px, calc(100vh - 48px));
}

.maintenance-card {
  width: min(420px, 92vw);
  height: auto;
  min-height: 0;
}

.maintenance-message {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-left: 5px solid #dc2626;
  background: #fff7ed;
  color: #7f1d1d;
}

.maintenance-message strong {
  font-size: 17px;
}

.maintenance-message span {
  color: #991b1b;
}.fleet-card {
  width: min(1120px, 95vw);
  height: min(780px, 92vh);
}
.fleet-list {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: start;
  overflow: auto;
  background: #f4f7fb;
}

.fleet-filter-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #d6dee8;
  background: #f8fafc;
}
.fleet-item {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #cfd8e3;
  box-shadow: 0 6px 18px rgba(27, 38, 49, .08);
}
.fleet-item.due {
  border-color: #d83a34;
  box-shadow: 0 6px 22px rgba(197, 34, 28, .14);
}
.fleet-item-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.fleet-item-head > div {
  display: grid;
  gap: 5px;
}
.fleet-item-head strong {
  color: #111827;
  font-size: 15px;
}
.fleet-item-head span,
.fleet-facts span,
.fleet-offer span {
  color: var(--muted);
  font-size: 12px;
}
.fleet-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  background: #eef4ff;
  color: #174ea6 !important;
  font-weight: 800;
}
.fleet-item.due .fleet-status {
  background: #fee2e2;
  color: #b42318 !important;
}
.fleet-condition {
  height: 9px;
  overflow: hidden;
  background: #e5e7eb;
}
.fleet-condition span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #d83a34, #f1c232, #20a957);
}
.fleet-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fleet-facts span {
  padding: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.fleet-facts strong {
  display: block;
  margin-top: 2px;
  color: #111827;
}
.fleet-offers {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid #e2e8f0;
}
.fleet-offer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #dde6ef;
}
.fleet-offer > div {
  display: grid;
  gap: 4px;
}
.accept-inspection-offer {
  background: #0f6f3d;
  border-color: #0f6f3d;
  color: white;
  font-weight: 800;
}.login-card {
  width: min(720px, 95vw);
  height: auto;
  max-height: 95vh;
}.profile-card {
  width: min(620px, 94vw);
  height: auto;
}

.multiplayer-card {
  width: min(980px, 95vw);
  height: min(780px, 92vh);
  max-height: 92vh;
}

.multiplayer-layout {
  display: grid;
  gap: 14px;
  grid-template-rows: auto auto 1fr auto auto;
  padding: 18px;
  overflow: auto;
  background:
    linear-gradient(135deg, rgba(15,139,141,.08), transparent 36%),
    #f4f7fb;
}

.multiplayer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 12px;
  align-items: stretch;
}

.multiplayer-hero > div,
.multiplayer-panel,
.multiplayer-owner-panel,
.multiplayer-footer {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: white;
  border: 1px solid #c8d3df;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.multiplayer-hero span,
.multiplayer-hero small,
.multiplayer-panel .sub-head span,
.company-card span,
.company-code,
.company-member span,
.multiplayer-owner-panel span {
  color: var(--muted);
  font-size: 12px;
}

.multiplayer-hero strong {
  color: #0f172a;
  font-size: 24px;
}

.multiplayer-code-box {
  justify-items: end;
  align-content: center;
}

.multiplayer-code-box strong {
  padding: 8px 12px;
  background: #0f172a;
  color: white;
  letter-spacing: .08em;
  font-size: 18px;
}


/* assets/css/app/chunk-02.css */

.multiplayer-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
  gap: 14px;
}

.multiplayer-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: end;
}

.create-company-entry {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbe4ef;
  background: linear-gradient(180deg, #ffffff, #f1f8fb);
}

.create-company-entry .entry-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #0f8b8d, #2563eb);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.create-company-entry strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
}

.create-company-entry span {
  color: var(--muted);
  font-size: 12px;
}

.company-base-requirement {
  display: block;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(20, 184, 166, .26);
  background: rgba(20, 184, 166, .10);
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.company-base-requirement.missing {
  border-color: rgba(239, 68, 68, .28);
  background: rgba(254, 226, 226, .74);
  color: #991b1b;
}

.company-foundation-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbe4ef;
  background: #f8fafc;
}

.company-foundation-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.company-foundation-row > div > span {
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
}

.company-foundation-row .company-base-requirement {
  margin-top: 0;
}

.company-member-list {
  display: grid;
  gap: 6px;
  max-height: 245px;
  overflow: auto;
}

.company-member {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 7px 8px;
  border: 1px solid #dbe4ef;
  background: #f8fafc;
}

.company-member.owner {
  border-color: #0f8b8d;
  background: #ecfeff;
}

.company-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #0f8b8d, #2563eb);
  color: white !important;
  font-weight: 900;
  font-size: 11px;
}

.company-member strong {
  display: block;
  color: #0f172a;
  font-size: 12px;
  line-height: 1.2;
}

.company-member em {
  padding: 3px 6px;
  background: #eef2f7;
  color: #64748b;
  font-style: normal;
  font-weight: 900;
  font-size: 10px;
}

.company-member em.online {
  background: #dcfce7;
  color: #166534;
}

.company-list {
  display: grid;
  gap: 10px;
  max-height: 240px;
  overflow: auto;
}

.company-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dbe4ef;
  background: #f8fafc;
}

.company-card.active {
  border-color: #0f8b8d;
  background: #ecfeff;
}

.company-card strong {
  color: #0f172a;
}

.company-code {
  display: inline-flex;
  width: max-content;
  margin-top: 4px;
  padding: 4px 8px;
  background: #eaf2ff;
  color: #0f52ba;
  font-weight: 900;
}

.multiplayer-owner-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: #fecaca;
  background: #fff7f7;
}

.multiplayer-owner-panel strong {
  color: #7f1d1d;
}

.multiplayer-footer {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.secondary-button {
  border-color: #9fb0c4;
  background: linear-gradient(#fff, #e8eef6);
  color: #0f172a;
  font-weight: 800;
}

.company-create-card {
  width: min(520px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
  max-height: min(560px, 78vh);
}

.company-create-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: #f8fafc;
}

.company-create-body > label {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #dbe4ef;
  background: #fff;
  color: #0f172a;
  font-weight: 900;
}

.company-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  padding-top: 2px;
}

@media (max-width: 820px) {
  .multiplayer-card {
    height: 94vh;
  }

  .multiplayer-hero,
  .multiplayer-main-grid,
  .multiplayer-footer,
  .multiplayer-owner-panel {
    grid-template-columns: 1fr;
  }

  .multiplayer-code-box {
    justify-items: start;
  }

  .multiplayer-actions {
    grid-template-columns: 1fr;
  }

  .create-company-entry,
  .company-foundation-row,
  .company-create-actions {
    grid-template-columns: 1fr;
  }

  .company-create-actions {
    display: grid;
  }
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}

.profile-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: white;
  border: 1px solid #c8c8c8;
}

.profile-box.wide {
  grid-column: 1 / -1;
}

.profile-box span {
  color: var(--muted);
}

body.auth-locked #loginModal {
  display: grid;
  background:
    linear-gradient(rgba(197, 34, 28, .92), rgba(138, 20, 17, .94)),
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.2), transparent 34%),
    #c5221c;
  z-index: 5000;
}body.auth-locked .login-card {
  width: min(760px, 94vw);
  max-height: 94vh;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.auth-tabs button.active {
  background: var(--red);
  color: white;
  border-color: #9f1d18;
}
.auth-pane {
  display: none;
  gap: 10px;
}
.auth-pane.active {
  display: grid;
}
.admin-card {
  width: 95vw;
  height: 95vh;
  background: #e7ebef;
}
.hidden-control {
  display: none !important;
}
.login-form,
.admin-grid {
  display: grid;
  gap: 12px;
  padding: 16px;
  align-content: start;
  overflow: auto;
}
.admin-grid {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  align-items: start;
}
.admin-tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  padding: 0 0 4px;
  border-bottom: 1px solid #c7d0d8;
}
.admin-tab {
  padding: 9px 13px;
  border: 1px solid #b9c4ce;
  background: #f8fafc;
  color: #1b2631;
  font-weight: 700;
}
.admin-tab.active {
  background: var(--red);
  border-color: var(--red);
  color: white;
}
.admin-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1px solid #c8d1dc;
  border-top: 3px solid var(--blue);
  box-shadow: 0 2px 8px rgba(27, 38, 49, 0.08);
}
.admin-box h3 {
  margin: 0 0 4px;
  font-size: 14px;
  color: #1b2631;
  text-transform: uppercase;
}
.admin-box input,
.admin-box select,
.admin-box textarea {
  border: 1px solid #b8c2cc;
  padding: 8px 9px;
  background: #f8fafc;
}
.admin-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-list span {
  padding: 4px 7px;
  background: #eee;
  border: 1px solid #ccc;
}

.cargo-admin-chip {
  display: inline-grid;
  grid-template-columns: 28px minmax(0, auto);
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 9px 4px 4px !important;
  border: 1px solid #dbe3ee !important;
  background: #f8fafc !important;
  color: #334155;
}

.cargo-admin-chip img,
.admin-cargo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cargo-admin-chip b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
}

.cargo-admin-chip img {
  width: 28px;
  height: 26px;
}

.cargo-admin-chip em {
  min-width: 0;
  overflow: hidden;
  color: #334155;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-data-box {
  grid-column: 1;
  min-height: calc(95vh - 150px);
  align-content: start;
}
.admin-editor {
  display: grid;
  gap: 12px;
  max-height: calc(95vh - 92px);
  overflow: auto;
  padding: 16px;
}
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}
.admin-edit-card {
  width: min(840px, 95vw);
  height: min(95vh, 760px);
}
.admin-edit-section {
  display: none;
}
.admin-edit-section.active {
  display: grid;
}
.admin-edit-section.active:not([data-editor="places"]) {
  align-content: start;
}
.admin-edit-section[data-editor="places"] {
  grid-template-rows: auto minmax(280px, 1fr) auto auto;
}
.admin-place-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: start;
}
.admin-place-form .picker-results {
  grid-column: auto;
  top: 60px;
  left: 0;
  right: 0;
  max-height: 150px;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
}
.admin-field {
  font-size: 12px;
  color: #46515c;
}
.admin-field.compact {
  min-width: 140px;
}
.admin-field.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-field.checkbox-field input {
  width: auto;
}
.admin-edit-section .primary {
  justify-self: start;
  min-width: 170px;
}
.admin-drive-box,
.admin-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d2d9e0;
  background: #f7f9fb;
}
.admin-drive-box > strong,
.admin-checkbox-grid > strong {
  grid-column: 1 / -1;
}
.admin-drive-box label,
.admin-checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  font-weight: 600;
}
.admin-drive-box input[type="checkbox"],
.admin-checkbox-grid input[type="checkbox"] {
  width: auto;
  min-height: 0;
}
.admin-drive-box .admin-field {
  display: grid;
}
.admin-drive-box .admin-field input {
  min-height: 30px;
  padding: 5px 7px;
}
.admin-toolbar input {
  width: min(360px, 45%);
}
.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  overflow: auto;
  max-height: calc(95vh - 245px);
  padding-right: 4px;
}

.admin-card-grid.admin-cargo-list {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.admin-data-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #c8d1dc;
  border-left: 4px solid var(--blue);
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(27, 38, 49, .08);
}
.admin-data-card:hover {
  background: #f0f7fd;
}
.admin-data-card span {
  color: #66717a;
  font-size: 12px;
}

.admin-cargo-card {
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.admin-cargo-card > strong,
.admin-cargo-card > span {
  grid-column: 2;
}

.admin-cargo-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-cargo-preview {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
  overflow: hidden;
}

.admin-cargo-preview span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #dbeafe;
  color: #1d4ed8 !important;
  font-size: 15px;
  font-weight: 900;
}

.admin-cargo-preview img {
  padding: 7px;
}

.admin-cargo-wagons {
  display: grid;
  gap: 6px;
}

.admin-cargo-wagons small {
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-cargo-wagon-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-cargo-wagon-tags > span {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid #d7e4f2;
  background: #f8fbff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.admin-cargo-wagon-tags > span small {
  padding: 2px 6px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 10px;
  text-transform: none;
}

.admin-cargo-wagon-tags em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.admin-vehicle-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 248px;
  padding: 0;
  border-left-width: 1px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
}

.admin-card-image {
  display: grid;
  place-items: center;
  width: 100%;
  height: 140px;
  min-height: 140px;
  border: 0;
  border-bottom: 1px solid #d7e0ea;
  background: linear-gradient(180deg, #f8fafc 0%, #e8eef5 100%);
  color: #52606d;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  overflow: hidden;
}

.admin-card-image img {
  width: 100%;
  height: 100%;
  max-height: 140px;
  object-fit: contain;
  padding: 12px;
}

.admin-card-content {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 14px 86px 14px 14px;
}

.admin-card-content strong {
  font-size: 15px;
  color: #0f172a;
}

.admin-card-content span {
  padding: 6px 8px;
  background: #f8fafc;
}

.admin-card-content strong,
.admin-card-content span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-area-map {
  height: 100%;
  min-height: 320px;
  border: 1px solid #b8c2cc;
  cursor: crosshair;
}
.area-handle {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  background: #2e9f3f;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 1px 5px rgba(0,0,0,.35);
}

.place-handle {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .38);
}
.admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.admin-data-box .assign-hint {
  min-height: 20px;
  color: #526171;
}
@media (max-width: 980px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-tabs,
  .admin-data-box {
    grid-column: 1;
    grid-row: auto;
    min-height: auto;
  }
}.shop-modal-card {
  width: 95vw;
  height: 95vh;
  max-height: 95vh;
}.activity-modal-card {
  width: 95vw;
  height: 95vh;
}
.loco-activity-card {
  width: 95vw;
  height: 95vh;
}
.loco-plan-card {
  width: 95vw;
  height: 95vh;
}
.loco-planner {
  min-height: 0;
  display: grid;
  grid-template-rows: 46px auto 1fr auto;
  background: white;
  color: #1f2d3d;
}
.lp-tabs {
  display: flex;
  align-items: end;
  gap: 18px;
  padding-left: 22px;
  border-bottom: 1px solid #cfcfcf;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 13px;
}
.lp-tab {
  border: 0;
  background: transparent;
  color: #777;
  padding: 14px 7px 10px;
}
.lp-tab.active {
  color: #0f4f7f;
  border-bottom: 2px solid #0f4f7f;
}
.lp-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(180px, 280px) 1fr;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #ddd;
}
.lp-toolbar label {
  font-size: 12px;
  color: #6d747c;
}
.lp-title {
  text-align: center;
  color: #0f4f7f;
}
.lp-title span {
  display: block;
  margin-top: 4px;
  color: #66717a;
  font-size: 12px;
}
.lp-board {
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(220px, 20vw, 320px) 1fr;
  overflow: hidden;
}
.lp-left {
  border-right: 2px solid #d2d2d2;
  display: grid;
  grid-template-rows: 58px 1fr;
  min-height: 0;
}
.lp-head {
  padding: 18px 12px;
  color: #0f4f7f;
  font-weight: 700;
  border-bottom: 1px solid #d6d6d6;
}
.lp-resource-list {
  overflow: hidden;
  position: relative;
  background: #fbfbfb;
}
.lp-resource-rows {
  will-change: transform;
}
.lp-res-row {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  min-height: 62px;
  border-bottom: 1px solid #dedede;
  padding: 8px 13px;
  cursor: pointer;
}
.lp-res-row:hover { background: #eef6fb; }
.lp-res-row.active {
  background: #e8f3fb;
  box-shadow: inset 4px 0 0 #0f4f7f;
}
.lp-res-row.personnel-blocked {
  box-shadow: inset 4px 0 0 #dc2626;
}
.lp-res-row.mt-member-locked {
  cursor: not-allowed;
  opacity: .72;
  background: #f1f5f9;
  box-shadow: inset 4px 0 0 #64748b;
}
.lp-res-row.mt-member-locked:hover {
  background: #f1f5f9;
}
.lp-res-row strong {
  display: block;
  color: #0f4f7f;
}
.lp-res-row span {
  color: #66717a;
  font-size: 12px;
}

#wagonPlanningPane .lp-resource-list {
  overflow: hidden;
}

#wagonPlanningPane .lp-res-row,
#wagonPlanningPane .lp-row {
  height: 62px;
  min-height: 62px;
  max-height: 62px;
  box-sizing: border-box;
}

#wagonPlanningPane .wagon-res-row {
  display: grid;
  align-content: center;
  gap: 3px;
  cursor: default;
}

#wagonPlanningPane .wagon-res-row strong,
#wagonPlanningPane .wagon-res-row span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#wagonPlanningPane .wagon-res-row:hover {
  background: transparent;
}

#wagonAssignmentList .lp-activity {
  cursor: help;
}
.lp-activity.lp-mt-mirror {
  cursor: help;
  opacity: .58;
  border-style: dashed;
  pointer-events: auto;
}
.lp-grid-wrap {
  overflow: auto;
  position: relative;
}
.lp-timeline {
  min-width: var(--lp-day-width);
  position: relative;
}
.lp-hours {
  height: 58px;
  display: grid;
  grid-template-columns: repeat(24, var(--lp-hour-width));
  position: sticky;
  top: 0;
  z-index: 2;
  background: white;
  border-bottom: 1px solid #d6d6d6;
}
.lp-hour {
  padding: 19px 8px;
  border-right: 1px solid #e2e2e2;
  color: #66717a;
  font-size: 12px;
}
.lp-day-head {
  font-weight: 800;
  color: #0f4f7f;
  background: #e8f3fb;
}
.week-hours {
  grid-template-columns: repeat(var(--planner-days, 7), calc(var(--lp-hour-width) * 24));
}
.lp-day-group {
  display: grid;
  grid-template-rows: 28px 30px;
  border-right: 2px solid #c8c8c8;
  background: white;
}
.lp-day-group .lp-day-head {
  display: grid;
  place-items: center;
  border-bottom: 1px solid #d6d6d6;
}
.lp-day-hours {
  display: grid;
  grid-template-columns: repeat(24, var(--lp-hour-width));
}
.lp-day-hours span {
  padding: 7px 4px;
  border-right: 1px solid #e2e2e2;
  color: #66717a;
  font-size: 12px;
}
.lp-grid {
  position: relative;
  min-height: 260px;
  background-image: linear-gradient(to right, #e7e7e7 1px, transparent 1px);
  background-size: calc(var(--lp-hour-width) / 4) 62px;
}

.lp-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 7;
  width: 3px;
  pointer-events: none;
  background: #16a34a;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, .18), 0 0 14px rgba(22, 163, 74, .35);
}

.lp-now-line span {
  position: sticky;
  top: 6px;
  display: inline-grid;
  place-items: center;
  min-width: 58px;
  transform: translateX(-50%);
  background: #16a34a;
  color: white;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 0 5px 16px rgba(22, 101, 52, .28);
}
.lp-row {
  position: relative;
  height: 62px;
  border-bottom: 1px solid #dedede;
}
.lp-activity {
  position: absolute;
  top: 9px;
  height: 44px;
  padding: 6px 9px;
  color: white;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  font-size: 12px;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.lp-activity strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-inspection { background: #8e62d9; }
.lp-brake { background: #f6a623; }
.lp-shunt { background: #7d5a22; }
.lp-cargo { background: #2f8a65; }
.lp-fuel { background: #0f9f8f; }
.lp-trip { background: #1f75ad; }
.lp-training { background: #64748b; }
.lp-trainee {
  border-style: dashed !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38);
}
.lp-locked { cursor: not-allowed; opacity: .9; }
.lp-done { outline: 3px solid rgba(131, 209, 31, .85); }
.lp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid #ddd;
  background: #f8f8f8;
}

.inline-loco-planner {
  min-height: 0;
  height: calc(100% - 42px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: white;
}

.activity-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  align-items: end;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.modal-activity-form {
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border-bottom: 0;
}
.activity-form-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(260px, 520px);
  gap: 12px;
  align-content: start;
  align-items: start;
  justify-content: start;
  padding: 18px;
}
.activity-form-grid label {
  min-width: 0;
}
.activity-form-grid .picker-results {
  max-height: 170px;
}
.activity-modal-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 12px 18px;
  border-top: 1px solid #c8c8c8;
  background: linear-gradient(#f8f8f8, #e4e4e4);
}
.activity-modal-footer .assign-hint {
  min-height: 20px;
}

.activity-form button {
  min-height: 38px;
}

#activityWagonSelect {
  min-height: 70px;
}

.wagon-select-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.wagon-select-actions button {
  min-height: 34px;
  font-size: 12px;
  font-weight: 800;
}

.wagon-checkbox-list {
  display: grid;
  gap: 6px;
  max-height: 210px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #b8b8b8;
  background: #fff;
}

.wagon-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px;
  border: 1px solid #e0e0e0;
  background: #f8f8f8;
}

.wagon-checkbox input {
  margin-top: 2px;
}

.wagon-checkbox.auto-wagon-checkbox {
  opacity: 1;
  border-color: rgba(20, 184, 166, .42);
  background: linear-gradient(180deg, #f0fdfa, #ffffff);
}

.wagon-checkbox.auto-wagon-checkbox input {
  accent-color: #0f766e;
}

.wagon-checkbox span {
  display: grid;
  gap: 2px;
}

.wagon-checkbox small {
  color: var(--muted);
  line-height: 1.25;
}

.field-preview {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.activity-detail-list {
  margin: 0;
  padding: 18px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  list-style: none;
}

.activity-detail-list li {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  background: white;
  border-left: 5px solid var(--blue);
  box-shadow: var(--shadow);
}

.activity-detail-list span,
.activity-detail-list small {
  color: var(--muted);
}

.activity-times {
  display: grid;
  grid-template-columns: 150px repeat(2, minmax(210px, 1fr));
  align-items: end;
  gap: 6px;
}

.activity-game-time {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid #d8e2ee;
  background: #f8fafc;
}

.activity-game-time strong {
  font-size: 12px;
  color: #475569;
}

.activity-game-time span {
  color: #0f172a;
  font-weight: 800;
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  place-items: center;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(4px);
}

.loading-screen.open {
  display: grid;
}.loading-card {
  width: min(420px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
}.loading-card span {
  color: #64748b;
}

.loading-progress {
  width: 100%;
  height: 9px;
  overflow: hidden;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
}

.loading-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #0f8b8d 0%, #2563eb 100%);
  transition: width .22s ease;
}

.loading-progress-label {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #bfdbfe;
  border-top-color: #2563eb;
  animation: railops-spin .8s linear infinite;
}

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

.lp-scale-bar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) 90px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid #d6d6d6;
  background: #f7f7f7;
  color: var(--muted);
}

.lp-scale-bar output {
  text-align: right;
  font-weight: 700;
  color: var(--text);
}

.inline-board {
  grid-template-columns: 220px 1fr;
}

#activityHint {
  grid-column: 1 / -1;
}
.base-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f9f9f9;
  overflow: visible;
}

.base-build-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e0ea;
  background: #ffffff;
}

.base-build-section label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  position: relative;
}

.base-build-section input {
  min-height: 34px;
  border: 1px solid #cbd5e1;
  padding: 0 10px;
  background: #ffffff;
}

.base-map-picker {
  display: grid;
  gap: 8px;
  border: 1px solid #cbd5e1;
  padding: 8px;
  background: #f8fafc;
}

.base-map-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.base-map-picker-head strong {
  color: #0f172a;
  font-size: 13px;
}

.base-pick-map {
  width: 100%;
  height: min(34vh, 320px);
  min-height: 230px;
  border: 1px solid #b8c7d9;
  overflow: hidden;
  background: #dbeafe;
}

.base-pick-map.leaflet-container,
.base-pick-map .leaflet-container {
  cursor: crosshair;
}

body.dark-mode .base-map-picker {
  border-color: #334155;
  background: #111827;
}

body.dark-mode .base-map-picker-head strong {
  color: #e5edf7;
}

body.dark-mode .base-pick-map {
  border-color: #334155;
  background: #0f172a;
}

.base-map-pick-button {
  min-height: 36px;
  border: 1px solid #0f766e;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #ffffff;
  font-weight: 900;
}

.base-map-pick-button.active {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #b45309, #dc2626);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

.leaflet-container.base-map-pick-active {
  cursor: crosshair;
}

.base-build-section select {
  min-height: 34px;
  border: 1px solid #cbd5e1;
  padding: 0 10px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
}

.site-detail-card {
  width: min(1120px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
  max-height: min(760px, calc(100vh - 48px));
}

.site-detail-body {
  display: grid;
  gap: 0;
  padding: 12px;
  overflow: auto;
  background: #f7f7f7;
}

.site-edit-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
}

.site-edit-box label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.site-edit-box input {
  min-height: 36px;
  border: 1px solid #cbd5e1;
  padding: 0 10px;
  color: #0f172a;
  font-weight: 800;
}

.site-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.site-edit-actions button {
  min-height: 36px;
  padding: 0 14px;
  font-weight: 900;
}

.site-modal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid #d4d4d4;
}

.site-modal-tabs button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #d4d4d4;
  border-bottom: 0;
  background: #ffffff;
  color: #0369a1;
  font-weight: 700;
}

.site-modal-tabs button.active {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

.site-modal-tabs button:disabled {
  opacity: .55;
}

.site-upgrade-list {
  display: grid;
  gap: 0;
  background: #ffffff;
}

.site-upgrade-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  align-items: start;
  border-bottom: 1px solid #d6d6d6;
}

.site-upgrade-row {
  padding: 12px 8px;
  min-height: 82px;
}

.site-upgrade-main {
  display: grid;
  gap: 4px;
}

.site-upgrade-main strong {
  color: #262626;
  font-size: 14px;
}

.site-upgrade-main span,
.site-upgrade-main em {
  color: #303030;
  font-size: 13px;
  line-height: 1.45;
}

.site-upgrade-main em {
  margin-top: 10px;
}

.site-upgrade-buy {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.site-upgrade-button,
.site-buy-button {
  min-height: 34px;
  border: 1px solid #15803d;
  padding: 0 14px;
  background: linear-gradient(#4ade80, #16a34a);
  color: #ffffff;
  font-weight: 800;
}

.site-upgrade-button:disabled,
.site-buy-button:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.site-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.site-cost-row span {
  color: #334155;
  font-weight: 900;
}

@media (max-width: 760px) {
  .site-edit-box {
    grid-template-columns: 1fr;
  }

  .site-edit-actions {
    justify-content: stretch;
  }

  .site-edit-actions button {
    flex: 1 1 150px;
  }

  .site-upgrade-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .site-upgrade-buy {
    justify-items: stretch;
  }
}.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.icon-button {
  width: 34px;
  height: 34px;
  font-size: 24px;
  line-height: 1;
}
.modal-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 380px;
  gap: 10px;
  padding: 10px;
}
.detail-map {
  min-height: 360px;
  border: 1px solid #aaa;
}
.empty-timeline li {
  border-left-color: transparent;
}

@media (max-width: 1100px) {
  body { overflow: auto; }
  .layout { height: auto; grid-template-columns: 1fr; }
  .map-column { grid-template-rows: 520px auto; }
  .bottom-grid { grid-template-columns: 1fr; }
  .side-panel { min-height: 760px; }
  .modal-body { grid-template-columns: 1fr; grid-template-rows: 360px 1fr; }
  .order-box { grid-template-columns: 1fr; }
  .order-route-view { grid-template-columns: 1fr; grid-template-rows: 360px 1fr; }
  .depot-layout { grid-template-columns: 1fr; }
  .shop-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { grid-template-columns: 1fr; height: auto; padding: 8px; gap: 8px; }
  .top-actions { height: 42px; }
  .layout { padding: 10px; }
  .map-column { grid-template-rows: 420px auto; }
  .order-actions { grid-template-columns: 1fr; }
  .activity-modal-footer { grid-template-columns: 1fr; }
  .activity-modal-footer .primary { width: 100%; }
}

/* Targeted overview refinements */
.topbar {
  z-index: 980;
}

.global-search {
  z-index: 3;
}

.search-results {
  z-index: 1400;
  max-height: min(420px, calc(100vh - 88px));
  box-shadow: 0 24px 70px rgba(15,23,42,.28);
}.profile-card {
  width: min(760px, 94vw);
}

.profile-grid {
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  padding: 18px;
  background: #f8fafc;
}

.profile-box {
  gap: 10px;
  padding: 18px;
  border-color: #e2e8f0;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}

.profile-box strong {
  color: #0f172a;
  font-size: 20px;
}

.profile-box span {
  display: block;
  padding: 8px 10px;
  background: #f8fafc;
  color: #475569;
}

.profile-box.wide {
  grid-template-columns: 1fr 1fr;
}

.profile-danger {
  border-color: #fecaca;
  background: #fff7f7;
}

.profile-password {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.profile-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-password-grid input {
  min-width: 0;
}

.profile-password-grid button {
  min-height: 40px;
}

@media (max-width: 760px) {
  .profile-password-grid {
    grid-template-columns: 1fr;
  }
}

.profile-delete-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.profile-delete-row input {
  flex: 1;
  min-width: 0;
}

.danger-button {
  border: 1px solid #b91c1c;
  background: #dc2626;
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.danger-button:hover {
  background: #b91c1c;
}

.shop-card .vehicle-image img {
  object-fit: contain;
  padding: 8px;
  background: #eef2f7;
}

.shop-card .vehicle-image.has-image {
  background: #eef2f7;
}

.account-list {
  overflow: auto;
}

.account-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 13px;
}

.account-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 12px;
  text-align: left;
  color: #64748b;
  background: #f8fafc;
  font-size: 12px;
  text-transform: uppercase;
}

.account-table td {
  padding: 12px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.account-table td:first-child {
  border-left: 1px solid #e2e8f0;
  white-space: nowrap;
}

.account-table td:last-child {
  border-right: 1px solid #e2e8f0;
}

.account-table tr.income td:nth-child(4) strong {
  color: #15803d;
}

.account-table tr.expense td:nth-child(4) strong {
  color: #b91c1c;
}

#contractsPanel .window-tabs {
  display: grid;
  grid-template-columns: repeat(3, max-content) minmax(116px, 1fr) minmax(116px, 1fr);
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}

.contract-filter {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(148, 163, 184, .55);
  background: #ffffff;
  color: #0f172a;
  padding: 0 10px;
  font-weight: 700;
}

#contractsPanel .contract-list {
  padding: 10px;
}

#contractsPanel .contract-card {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 13px 14px;
  background: #ffffff;
  border: 1px solid #d7e0ea;
  border-left: 4px solid #2563eb;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
  overflow: hidden;
}

#contractsPanel .contract-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-width: 0;
}

#contractsPanel .contract-title > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#contractsPanel .contract-title strong {
  color: #0f172a;
  font-size: 15px;
}

#contractsPanel .contract-title small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

#contractsPanel .contract-title b {
  padding: 4px 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  white-space: nowrap;
  justify-self: end;
}

#contractsPanel .contract-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#contractsPanel .contract-info-button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, .25);
  background: #eff6ff;
  color: #1d4ed8;
  cursor: pointer;
}

#contractsPanel .contract-info-button:hover {
  background: #dbeafe;
  border-color: rgba(37, 99, 235, .45);
}

#contractsPanel .contract-info-button .header-icon,
#contractsPanel .contract-info-button svg {
  width: 15px;
  height: 15px;
}

#contractsPanel .contract-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 13px;
}

#contractsPanel .contract-route span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#contractsPanel .contract-route i {
  color: #2563eb;
  font-style: normal;
  font-weight: 900;
}

#contractsPanel .contract-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#contractsPanel .contract-facts span {
  padding: 5px 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

body.dark-mode #contractsPanel .contract-title b,
body.dark-mode #contractsPanel .contract-facts span {
  background: rgba(15, 23, 42, .92);
  border: 1px solid rgba(148, 163, 184, .36);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.dark-mode #contractsPanel .contract-facts span:nth-child(2) {
  color: #bfdbfe;
}

body.dark-mode #contractsPanel .contract-facts span:nth-child(3) {
  color: #fde68a;
}

body.dark-mode #contractsPanel .contract-route,
body.dark-mode #contractsPanel .contract-delivery {
  color: #dbeafe;
}

body.dark-mode #contractsPanel .contract-filter,
body.dark-mode .contract-filter {
  border-color: rgba(148, 163, 184, .45);
  background: #111827;
  color: #f8fafc;
}

body.dark-mode #contractsPanel .contract-filter option,
body.dark-mode .contract-filter option {
  background: #111827;
  color: #f8fafc;
}

body.dark-mode .contract-stop-list {
  border-color: rgba(148, 163, 184, .35);
  background: rgba(15, 23, 42, .72);
  color: #dbeafe;
}

body.dark-mode .contract-stop-list > strong {
  color: #f8fafc;
}

body.dark-mode .contract-stop-list span {
  border-color: rgba(148, 163, 184, .35);
  background: rgba(30, 41, 59, .92);
}

body.dark-mode .contract-stop-count {
  border-color: rgba(148, 163, 184, .35);
  background: rgba(15, 23, 42, .72);
  color: #dbeafe;
}

body.dark-mode #contractsPanel .contract-route i {
  color: #60a5fa;
}

#contractsPanel .accept-contract {
  width: 100%;
  min-height: 32px;
  font-size: 12px;
  font-weight: 900;
}

.contract-detail-card {
  width: min(860px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
}

.contract-detail-body {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  gap: 14px;
  padding: 14px;
  overflow: auto;
}

.contract-detail-facts {
  display: grid;
  align-content: start;
  gap: 12px;
}

.contract-detail-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e0ea;
  background: #f8fafc;
}

.contract-detail-route div,
.contract-detail-grid div {
  min-width: 0;
}

.contract-detail-route small,
.contract-detail-grid small {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.contract-detail-route strong,
.contract-detail-grid strong {
  color: #0f172a;
  font-size: 13px;
}

.contract-detail-route span {
  color: #2563eb;
  font-weight: 900;
}

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

.contract-detail-grid div,
.contract-detail-progress {
  padding: 10px;
  border: 1px solid #d7e0ea;
  background: #ffffff;
}

.contract-detail-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.contract-detail-progress span {
  padding: 5px 8px;
  background: #eff6ff;
  color: #1d4ed8;
}

.contract-detail-map-wrap {
  min-height: 340px;
  border: 1px solid #d7e0ea;
  overflow: hidden;
  background: #e2e8f0;
}

.contract-detail-map {
  width: 100%;
  height: 100%;
  min-height: 340px;
}

@media (max-width: 520px) {
  #contractsPanel .window-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #contractsPanel .contract-filter {
    grid-column: span 3;
  }

  #contractsPanel .contract-route {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #contractsPanel .contract-route i {
    display: none;
  }

  .contract-detail-body {
    grid-template-columns: 1fr;
  }

  .contract-detail-grid {
    grid-template-columns: 1fr;
  }
}

#contractsPanel .contract-progress {
  height: 10px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
}

#contractsPanel .contract-progress span {
  background: #16a34a;
}

#contractsPanel .contract-delivery {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.contract-stop-list {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #dbe3ed;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
}

.contract-stop-list.empty {
  font-weight: 700;
}

.contract-stop-list > strong {
  color: #0f172a;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.contract-stop-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.contract-stop-list span {
  padding: 4px 7px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-weight: 800;
}

.contract-stop-count {
  padding: 8px 10px;
  border: 1px solid #dbe3ed;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.contract-card.archived {
  opacity: .86;
  border-left-color: #64748b;
}

.lp-activity {
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  color: transparent;
}

.lp-activity strong,
.lp-activity span:not(.activity-color-only) {
  display: none;
}

.activity-color-only {
  display: block;
  width: 100%;
  height: 100%;
}

.activity-warning {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 0 0 1px rgba(154,52,18,.28);
}

.lp-conflict {
  outline: 3px solid rgba(220,38,38,.95) !important;
  box-shadow: inset 0 0 0 2px rgba(220,38,38,.98), 0 4px 16px rgba(185,28,28,.24) !important;
}

.lp-prep-warning {
  box-shadow: inset 0 0 0 2px rgba(220,38,38,.95), 0 4px 16px rgba(185,28,28,.24);
}

.lp-staff-warning {
  box-shadow: inset 0 0 0 3px rgba(220,38,38,.98), 0 4px 16px rgba(185,28,28,.24);
}

.lp-duty-warning {
  outline: 3px solid rgba(245, 158, 11, .95) !important;
  box-shadow: inset 0 0 0 2px rgba(245, 158, 11, .95), 0 4px 16px rgba(180, 83, 9, .24) !important;
}

.lp-duty-warning .activity-warning {
  background: #f59e0b;
  color: #111827;
  box-shadow: 0 0 0 2px rgba(254, 243, 199, .95), 0 4px 12px rgba(120, 53, 15, .32);
}

.lp-prep-warning .activity-warning {
  background: #dc2626;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(254,226,226,.95), 0 4px 12px rgba(127,29,29,.32);
}

.lp-activity:hover {
  outline: 2px solid rgba(15,23,42,.22);
  outline-offset: 2px;
  filter: brightness(1.05);
}

.activity-context-menu {
  position: fixed;
  z-index: 9000;
  display: none;
  width: 150px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15,23,42,.22);
}

.activity-context-menu.open {
  display: grid;
  gap: 4px;
}

.activity-context-menu button {
  min-height: 34px;
  justify-content: start;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0 10px;
}

.activity-context-menu button:hover {
  background: #eff6ff;
}

.activity-context-menu button[data-action="delete"]:hover {
  background: #fee2e2;
  color: #991b1b;
}

body.dark-mode .profile-box strong {
  color: #f8fafc;
}

body.dark-mode .profile-box span,
body.dark-mode .account-table th,
body.dark-mode .activity-context-menu button:hover {
  background: #0f172a;
  color: #cbd5e1;
}

body.dark-mode .shop-card .vehicle-image img,
body.dark-mode .shop-card .vehicle-image.has-image {
  background: #111827;
}.map-notification button {
  position: relative;
  overflow: hidden;
}

.map-notification button::before {
  content: "x";
  color: #fff;
  font-size: 16px;
}

.actual-note {
  color: #b45309 !important;
  font-weight: 800;
}

.activity-trip-history {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #d8e2ee;
}

.activity-trip-stop {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid #d8e2ee;
  background: #f8fafc;
}

.activity-trip-stop span {
  font-weight: 900;
  color: #0f172a;
}

.activity-trip-stop small {
  color: #64748b;
  white-space: nowrap;
}

body.dark-mode .activity-trip-history {
  border-color: #334155;
}

body.dark-mode .activity-trip-stop {
  background: #111827;
  border-color: #334155;
}

body.dark-mode .activity-trip-stop span {
  color: #f8fafc;
}

body.dark-mode .activity-trip-stop small {
  color: #cbd5e1;
}

.order-details-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d7e0ea;
  background: #f8fafc;
}

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

.admin-data-card {
  position: relative;
  padding-right: 92px;
}

.admin-vehicle-card {
  padding-right: 0;
}

.admin-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 28px;
  padding: 0 10px;
  border-color: #fecaca;
  background: #fff1f2;
  color: #991b1b;
  font-weight: 800;
}.account-card {
  width: min(860px, 94vw);
  height: min(640px, 90vh);
  grid-template-rows: auto auto minmax(0, 1fr);
}

.account-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px;
}

.account-summary div {
  min-height: 74px;
  padding: 12px 14px;
  box-shadow: none;
}

.account-summary strong {
  font-size: 19px;
}

.account-list {
  display: block;
  min-height: 0;
  padding: 10px 16px 16px;
  overflow: auto;
  background: #f8fafc;
}

.account-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 13px;
}

.account-table thead {
  background: #eef2f7;
}

.account-table th {
  position: sticky;
  top: 0;
  padding: 10px 12px;
  background: #eef2f7;
  color: #475569;
}

.account-table td {
  padding: 12px;
  border: 0;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.account-table td:first-child,
.account-table td:last-child {
  border-left: 0;
  border-right: 0;
}

.account-table tbody tr:hover td {
  background: #f8fafc;
}

@media (max-width: 760px) {
  .order-detail-grid,
  .account-summary {
    grid-template-columns: 1fr;
  }
}

/* Usability pass */
.floating-window {
  overflow: auto !important;
}

.floating-window > .schedule-list,
.floating-window > .contract-list,
.floating-window > .depot-layout,
.floating-window > .radio-log,
.floating-window > .inline-loco-planner {
  min-height: 0;
}

.order-box {
  grid-template-columns: minmax(300px, 380px) minmax(560px, 1fr);
  gap: 16px;
}

.order-form {
  gap: 12px;
  padding-right: 4px;
}

.order-modal-card .order-box {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  grid-template-columns: minmax(280px, 360px) minmax(420px, 1fr) minmax(300px, 380px);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}

.order-modal-card .order-form {
  min-height: 0;
  overflow: auto;
  padding: 0 6px 6px 0;
  align-content: start;
}

.order-modal-card .order-route-view {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.order-modal-card #orderMap {
  min-height: 0;
  height: 100%;
  width: 100%;
}


/* assets/css/app/chunk-03.css */

.order-timeline-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(120px, 20%) minmax(0, 80%);
  gap: 10px;
  overflow: hidden;
  padding: 0 6px 6px 0;
}

.order-schedule-details,
.order-timeline-scroll {
  min-height: 0;
  border: 1px solid #d4dbe6;
  background: #fff;
  overflow: auto;
  overscroll-behavior: contain;
}

.order-schedule-details {
  list-style: none;
  margin: 0;
  padding: 0;
}

.order-schedule-details > li {
  margin: 0;
}

.order-schedule-details.empty-timeline > li {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  color: var(--muted);
}

.order-schedule-details .schedule-detail-box {
  min-height: 100%;
  margin: 0;
  border: 0 !important;
  border-left: 4px solid #2563eb !important;
}

.order-timeline-panel .timeline {
  min-height: 100%;
}

.order-timeline-scroll .timeline {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

@media (max-width: 1180px) {
  .order-modal-card .order-box {
    grid-template-columns: minmax(260px, 340px) minmax(360px, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(220px, .55fr);
  }

  .order-timeline-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .order-modal-card .order-box {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(260px, .9fr) 320px minmax(240px, .7fr);
  }

  .order-modal-card .order-form,
  .order-timeline-panel {
    padding-right: 0;
  }
}

.order-form > label,
.order-stops-box,
.order-details-box,
.route-preview {
  border-color: #dbe3ed;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
}

.order-form > label {
  padding: 10px;
}

.order-details-box .sub-head,
.order-stops-box .sub-head {
  margin-bottom: 0;
  color: #0f172a;
}

.order-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 10px 0 0;
  background: linear-gradient(transparent, #f8fafc 25%);
}

.schedule-detail-box {
  margin-bottom: 12px;
  padding: 14px 16px !important;
  border: 1px solid #dbe3ed !important;
  border-left: 4px solid #2563eb !important;
  background: #fff;
}

.schedule-detail-box::before,
.schedule-detail-box .segment-bar {
  display: none !important;
}

.schedule-detail-route-title {
  display: block;
  margin-top: 10px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.schedule-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.schedule-detail-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  background: #f8fafc;
  color: #334155;
  overflow-wrap: anywhere;
}

.schedule-detail-grid b {
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.schedule-route-choice {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.schedule-route-choice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.schedule-route-choice-head span {
  color: #64748b;
  font-size: 11px;
}

.schedule-route-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
}

.schedule-route-choice-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 9px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  text-align: left;
  box-shadow: none;
}

.schedule-route-choice-card:hover {
  border-color: #38bdf8;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.schedule-route-choice-card.active {
  border-color: #0f8d8d;
  background: #e8f8fb;
  box-shadow: inset 0 0 0 2px rgba(15, 141, 141, .18);
}

.schedule-route-choice-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.schedule-route-choice-title strong,
.schedule-route-choice-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-route-choice-title strong {
  font-size: 12px;
}

.schedule-route-choice-title small {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.schedule-route-choice-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.schedule-route-choice-card .route-profile-summary {
  gap: 4px;
  margin-top: 0;
}

.schedule-route-choice-card .route-profile-summary span {
  padding: 3px 6px;
  font-size: 10px;
}

.schedule-route-choice-values b,
.schedule-route-choice-card i {
  width: fit-content;
  padding: 3px 6px;
  background: #eef2ff;
  color: #1e3a8a;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.schedule-route-choice-card i {
  background: #e2e8f0;
  color: #334155;
}

.schedule-route-choice-card.active i {
  background: #0f8d8d;
  color: #ffffff;
}

.wagon-list-card {
  width: min(1180px, 96vw);
  height: min(680px, 92vh);
  grid-template-rows: auto minmax(0, 1fr);
}

.wagon-list-table-wrap {
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: #f8fafc;
}

.wagon-list-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: #fff;
  font-size: 13px;
}

.wagon-list-table th,
.wagon-list-table td {
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
  text-align: left;
}

.wagon-list-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-top: 0;
  background: #eef2f7;
  color: #475569;
  font-size: 12px;
  text-transform: uppercase;
}

body.dark-mode {
  background: #0b1220;
}

body.dark-mode .layout,
body.dark-mode.view-controlsonly .layout {
  background: #111827;
}body.dark-mode .floating-window,
body.dark-mode .side-panel,
body.dark-mode .panel,
body.dark-mode .modal-card,
body.dark-mode .window-dock {
  color: #e5edf7;
}

body.dark-mode .lp-left,
body.dark-mode .lp-board,
body.dark-mode .lp-grid,
body.dark-mode .lp-row,
body.dark-mode .lp-hour,
body.dark-mode .lp-head,
body.dark-mode .lp-day-head,
body.dark-mode .lp-day-hours,
body.dark-mode .inline-loco-planner {
  background: #0b1220;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-mode .lp-res-row,
body.dark-mode .schedule-card,
body.dark-mode .contract-card,
body.dark-mode .loco,
body.dark-mode .order-form > label,
body.dark-mode .order-stops-box,
body.dark-mode .order-details-box,
body.dark-mode .route-preview,
body.dark-mode .schedule-detail-box,
body.dark-mode .schedule-detail-grid span,
body.dark-mode .wagon-list-table,
body.dark-mode .wagon-list-table td,
body.dark-mode .wagon-list-table-wrap {
  background: #172235;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode .wagon-list-table th,
body.dark-mode .account-table th {
  background: #0f172a;
  color: #cbd5e1;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #0b1220;
  border-color: #475569;
  color: #f8fafc;
}

body.dark-mode .profile-danger {
  background: #24121a;
  border-color: #7f1d1d;
}

body.dark-mode .admin-card-image {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-mode .cargo-admin-chip,
body.dark-mode .admin-cargo-preview {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #e5edf7;
}

body.dark-mode .cargo-admin-chip em {
  color: #e5edf7;
}

body.dark-mode .cargo-admin-chip b,
body.dark-mode .admin-cargo-preview span {
  background: #1e3a8a;
  color: #dbeafe !important;
}

body.dark-mode .admin-cargo-main strong {
  color: #f8fafc;
}

body.dark-mode .admin-cargo-wagons small {
  color: #cbd5e1;
}

body.dark-mode .admin-cargo-wagon-tags > span {
  background: #0f172a;
  border-color: rgba(148, 163, 184, .34);
  color: #f8fafc;
}

body.dark-mode .admin-cargo-wagon-tags > span small {
  background: rgba(56, 189, 248, .16);
  color: #7dd3fc;
}

body.dark-mode .admin-cargo-wagon-tags em {
  color: #94a3b8;
}

body.dark-mode .fleet-list {
  background: #0b1220;
}

body.dark-mode .fleet-item,
body.dark-mode .fleet-facts span,
body.dark-mode .fleet-offer {
  background: #111827;
  border-color: #334155;
}

body.dark-mode .fleet-item-head strong,
body.dark-mode .fleet-facts strong,
body.dark-mode .fleet-offer strong {
  color: #f8fafc;
}

body.dark-mode .fleet-condition {
  background: #263244;
}

body.dark-mode .fleet-status {
  background: #1e3a8a;
  color: #dbeafe !important;
}

body.dark-mode .fleet-item.due .fleet-status {
  background: #7f1d1d;
  color: #fee2e2 !important;
}

body.dark-mode .training-page,
body.dark-mode .training-form-card,
body.dark-mode .training-list-card,
body.dark-mode .training-person-check,
body.dark-mode .training-offer {
  background: #172235;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode .training-person-check small,
body.dark-mode .training-offer small,
body.dark-mode .training-form-grid label {
  color: #cbd5e1;
}

body.dark-mode .training-person-check:has(input:checked),
body.dark-mode .training-offer:has(input:checked) {
  background: #1e3a8a;
  border-color: #60a5fa;
}

body.dark-mode .personnel-overview-tabs {
  border-color: #334155;
}

body.dark-mode .personnel-overview-tabs button {
  background: #172235;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-mode .personnel-overview-tabs button.active {
  background: #1e3a8a;
  border-color: #60a5fa;
  color: #eff6ff;
}

/* Admin redesign */
#adminModal .admin-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #eef3f8;
  border: 1px solid rgba(148, 163, 184, .55);
  box-shadow: 0 26px 80px rgba(15, 23, 42, .28);
}

#adminModal .admin-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

#adminModal .admin-tabs {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 16px 12px;
  border: 0;
  border-right: 1px solid #dbe3ee;
  background: #f8fafc;
  overflow: auto;
}

#adminModal .admin-tab {
  justify-content: flex-start;
  min-height: 40px;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  font-weight: 800;
  text-align: left;
  padding: 0 12px;
}

#adminModal .admin-tab:hover {
  background: #eaf2ff;
  color: #1d4ed8;
}

#adminModal .admin-tab.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

#adminModal .admin-data-box {
  grid-column: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 0;
  border: 0;
  background: #eef3f8;
  box-shadow: none;
}

#adminModal .admin-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto auto minmax(220px, 360px);
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #dbe3ee;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
}

#adminModal .admin-toolbar h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
}

#adminModal .admin-data-box .assign-hint {
  margin-top: 2px;
  color: #64748b;
  font-size: 12px;
}

#adminModal .admin-toolbar .primary {
  min-height: 38px;
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

#adminModal .admin-place-io {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#adminModal .admin-place-io[hidden] {
  display: none !important;
}

#adminModal .admin-place-io .secondary {
  min-height: 38px;
  white-space: nowrap;
}

#adminModal .admin-place-io .danger-button {
  min-height: 38px;
  padding: 8px 12px;
  white-space: nowrap;
}

#adminModal .admin-place-io .danger-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

#adminModal .admin-toolbar input {
  width: 100%;
  min-height: 38px;
  border-color: #cbd5e1;
  background: #fff;
}

#adminModal .admin-card-grid {
  max-height: none;
  min-height: 0;
  overflow: auto;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  padding: 16px;
}

#adminModal .admin-card-grid.admin-places-map-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}

#adminModal .admin-data-card {
  min-height: 106px;
  padding: 14px 86px 14px 14px;
  border: 1px solid #dbe3ee;
  border-left: 4px solid #2563eb;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#adminModal .admin-user-card {
  padding-right: 96px;
}

#adminModal .admin-data-card:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
}

#adminModal .admin-data-card strong {
  color: #0f172a;
  font-size: 15px;
}

#adminModal .admin-data-card span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

#adminModal .admin-vehicle-card {
  min-height: 260px;
  padding: 0;
  border-left-width: 1px;
}

#adminModal .admin-card-image {
  height: 132px;
  min-height: 132px;
  background: linear-gradient(180deg, #f8fafc 0%, #edf3f9 100%);
}

#adminModal .admin-card-content {
  padding: 14px 86px 14px 14px;
}

#adminModal .admin-card-content span {
  background: #f8fafc;
  border: 1px solid #edf2f7;
}

#adminModal .admin-delete {
  top: 12px;
  right: 12px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  background: #fff1f2;
  color: #be123c;
  display: grid;
  place-items: center;
}

#adminModal .admin-card-action {
  position: absolute;
  top: 12px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}

#adminModal .admin-reset-state {
  right: 52px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
}

#adminModal .admin-delete svg,
#adminFuelModal .admin-delete svg,
#adminModal .admin-card-action svg,
#adminModal #adminNewEntry svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#adminModal .admin-fuel-card-item strong {
  display: flex;
  align-items: center;
  gap: 8px;
}

#adminModal .admin-fuel-card-item .header-icon {
  width: 20px;
  height: 20px;
  color: #0891b2;
}

#adminFuelModal .admin-fuel-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: #eef3f8;
  border: 1px solid rgba(148, 163, 184, .55);
}

#adminFuelModal .admin-fuel-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 14px;
  padding: 16px;
  overflow: hidden;
}

#adminFuelModal .admin-fuel-picker,
#adminFuelModal .admin-fuel-current {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid #dbe3ee;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

#adminFuelModal .admin-fuel-current > strong {
  color: #0f172a;
}

#adminFuelModal .admin-field {
  display: grid;
  gap: 6px;
  color: #475569;
  font-weight: 700;
}

#adminFuelModal .admin-field input {
  min-height: 38px;
  border: 1px solid #cbd5e1;
  padding: 0 10px;
}

#adminFuelModal .admin-fuel-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
}

#adminFuelModal .admin-fuel-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

#adminFuelModal .admin-fuel-row.current {
  grid-template-columns: minmax(0, 1fr) auto;
}

#adminFuelModal .admin-fuel-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#adminFuelModal .admin-fuel-row strong {
  color: #0f172a;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#adminFuelModal .admin-fuel-row small {
  color: #64748b;
  font-size: 12px;
}

#adminFuelModal .admin-fuel-remove {
  position: static;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #be123c;
  background: #fff1f2;
}

#adminFuelModal .admin-fuel-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #dbe3ee;
  background: #ffffff;
}

#adminEditModal .admin-edit-card,
#adminUserModal .admin-user-detail-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #eef3f8;
}

#adminEditModal .admin-editor {
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 16px;
}

#adminEditModal .admin-box,
#adminUserModal .admin-user-summary div,
#adminUserModal .admin-user-stats div,
#adminUserModal .admin-user-password {
  border: 1px solid #dbe3ee;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

#adminEditModal .admin-box {
  padding: 16px;
}

#adminEditModal .admin-box h3 {
  color: #0f172a;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

#adminEditModal .admin-field {
  display: grid;
  gap: 6px;
  color: #475569;
  font-weight: 700;
}

#adminEditModal .admin-field.checkbox-field {
  display: flex;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
}

#adminEditModal .admin-drive-box,
#adminEditModal .admin-checkbox-grid {
  background: #f8fafc;
  border-color: #dbe3ee;
}

#adminEditModal .admin-area-map {
  width: 100%;
  height: clamp(360px, 52vh, 560px);
  min-height: 360px;
  display: block;
  position: relative;
  border-color: #cbd5e1;
  overflow: hidden;
}

#adminEditModal .admin-edit-section[data-editor="places"].active {
  gap: 12px;
  grid-template-rows: auto minmax(360px, 1fr) auto auto;
  min-height: min(760px, calc(95vh - 120px));
}

#adminEditModal .admin-area-map.leaflet-container {
  background: #dbe7f0;
}

#adminEditModal .admin-area-map .leaflet-tile-pane {
  opacity: 1;
}

body.dark-mode #adminModal .admin-card,
body.dark-mode #adminModal .admin-data-box,
body.dark-mode #adminEditModal .admin-edit-card,
body.dark-mode #adminFuelModal .admin-fuel-card,
body.dark-mode #adminUserModal .admin-user-detail-card {
  background: #0b1220;
  border-color: #334155;
}

body.dark-mode #adminModal .admin-tabs {
  background: #0f172a;
  border-color: #334155;
}

body.dark-mode #adminModal .admin-tab {
  color: #cbd5e1;
}

body.dark-mode #adminModal .admin-tab:hover {
  background: #172235;
  color: #bfdbfe;
}

body.dark-mode #adminModal .admin-data-card,
body.dark-mode #adminEditModal .admin-box,
body.dark-mode #adminFuelModal .admin-fuel-picker,
body.dark-mode #adminFuelModal .admin-fuel-current,
body.dark-mode #adminFuelModal .admin-fuel-row,
body.dark-mode #adminUserModal .admin-user-summary div,
body.dark-mode #adminUserModal .admin-user-stats div,
body.dark-mode #adminUserModal .admin-user-password {
  background: #172235;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode #adminModal .admin-data-card strong,
body.dark-mode #adminModal .admin-toolbar h3,
body.dark-mode #adminEditModal .admin-box h3,
body.dark-mode #adminFuelModal .admin-fuel-row strong,
body.dark-mode #adminFuelModal .admin-fuel-current > strong,
body.dark-mode #adminUserModal strong {
  color: #f8fafc;
}

body.dark-mode #adminModal .admin-data-card span,
body.dark-mode #adminModal .admin-data-box .assign-hint,
body.dark-mode #adminEditModal .admin-field,
body.dark-mode #adminFuelModal .admin-field,
body.dark-mode #adminFuelModal .admin-fuel-row small,
body.dark-mode #adminUserModal span {
  color: #cbd5e1;
}

body.dark-mode #adminModal .admin-card-content span,
body.dark-mode #adminEditModal .admin-field.checkbox-field,
body.dark-mode #adminEditModal .admin-drive-box,
body.dark-mode #adminFuelModal .admin-fuel-footer,
body.dark-mode #adminEditModal .admin-checkbox-grid {
  background: #0f172a;
  border-color: #334155;
}

@media (max-width: 920px) {
  #adminModal .admin-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  #adminModal .admin-tabs {
    grid-column: 1;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #dbe3ee;
  }

  #adminModal .admin-tab {
    width: auto;
    white-space: nowrap;
  }

  #adminModal .admin-data-box {
    grid-column: 1;
  }

  #adminModal .admin-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #adminFuelModal .admin-fuel-layout {
    grid-template-columns: 1fr;
  }

  #adminFuelModal .admin-fuel-footer {
    grid-template-columns: 1fr;
  }
}

/* Final main header polish */
body:not(.view-maponly) .topbar {
  height: 64px;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(260px, 520px) minmax(0, auto);
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #8f1d19 0%, #c72a24 56%, #111827 100%);
  border-bottom: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 42px rgba(15,23,42,.24);
}

body:not(.view-maponly) .top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: auto;
}

body:not(.view-maponly) .time-controls {
  height: auto;
  padding: 5px;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(15,23,42,.28);
}

body:not(.view-maponly) .time-button {
  min-height: 34px;
  border-color: rgba(255,255,255,.2);
  background: rgba(15,23,42,.26);
}

body:not(.view-maponly) .time-button.active {
  background: #fff;
  border-color: #fff;
  color: #9f1f1f;
}

body:not(.view-maponly) .icon-action {
  width: 38px;
  min-width: 38px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
}

body:not(.view-maponly) .icon-action i {
  display: grid !important;
  place-items: center;
  width: 20px;
  height: 20px;
  color: currentColor !important;
  font-style: normal !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px;
  line-height: 1;
}

body:not(.view-maponly) .icon-action i::before {
  display: block !important;
  content: none !important;
  color: currentColor !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.icon-action i[data-fallback]::before { content: none !important; }

.header-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.header-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loco-fuel {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.loco-fuel-track {
  height: 8px;
  overflow: hidden;
  background: rgba(148, 163, 184, .26);
  border: 1px solid rgba(148, 163, 184, .34);
}

.loco-fuel-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #facc15);
  transition: width .45s ease;
}

.loco-fuel.low .loco-fuel-fill {
  background: linear-gradient(90deg, #ef4444, #f97316);
}

.loco-fuel small {
  color: var(--muted);
  font-size: 11px;
}

body.dark-mode .loco-fuel-track {
  background: rgba(15, 23, 42, .75);
  border-color: rgba(148, 163, 184, .32);
}

.admin-user-detail-card {
  width: min(860px, 95vw);
  height: auto;
  max-height: 95vh;
}

.admin-user-detail {
  display: grid;
  gap: 16px;
  overflow: auto;
  padding: 18px;
}

.admin-user-summary,
.admin-user-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.admin-user-summary div,
.admin-user-stats div,
.admin-user-password {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.admin-user-summary span,
.admin-user-stats span,
.admin-user-password span {
  color: var(--muted);
  font-size: 12px;
}

.admin-user-summary strong,
.admin-user-stats strong,
.admin-user-password strong {
  color: #0f172a;
}

.admin-user-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 720px) {
  .admin-user-password-row {
    grid-template-columns: 1fr;
  }
}

body.dark-mode .admin-user-summary div,
body.dark-mode .admin-user-stats div,
body.dark-mode .admin-user-password {
  background: #172235;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode .admin-user-summary strong,
body.dark-mode .admin-user-stats strong,
body.dark-mode .admin-user-password strong {
  color: #f8fafc;
}

.password-reveal {
  display: block;
  position: relative;
  width: 100%;
}

.password-reveal input {
  min-width: 0;
  width: 100%;
  padding-right: 92px !important;
}

.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #cbd5e1;
  background: #eef4ff;
  color: #0f172a;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  padding: 7px 10px;
  min-height: 0;
  cursor: pointer;
  z-index: 2;
}

.password-toggle:hover {
  background: #eaf1fb;
  border-color: #93b5e8;
}

body.dark-mode .password-toggle {
  background: #111827;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode .password-toggle:hover {
  background: #172235;
  border-color: #60a5fa;
}

#adminEditModal .admin-edit-section[data-editor="places"].active {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  grid-template-rows: auto minmax(360px, 1fr) auto;
  gap: 14px;
  align-items: stretch;
}

#adminEditModal .admin-edit-section[data-editor="places"] h3 {
  grid-column: 1 / -1;
  margin: 0;
}

#adminEditModal .admin-place-form {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
}

#adminEditModal .admin-place-form .picker-results {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  max-height: 170px;
  overflow: auto;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
}

#adminEditModal .admin-edit-section[data-editor="places"] #adminAreaHint {
  grid-column: 1 / 2;
  color: #b91c1c;
  font-weight: 700;
}

#adminEditModal .admin-edit-section[data-editor="places"] #adminSavePlace {
  grid-column: 2 / 3;
  justify-self: end;
  min-width: 220px;
}

#adminEditModal .admin-edit-section[data-editor="places"] .admin-area-map {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  height: 100%;
  min-height: 480px;
}

.admin-user-map-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.admin-user-map-card > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.admin-user-map {
  height: 300px;
  min-height: 300px;
  border: 1px solid #dbe3ee;
  overflow: hidden;
  background: #dbe7f0;
}

body.dark-mode .admin-user-map-card,
body.dark-mode #adminEditModal .admin-place-form {
  background: #172235;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode .admin-user-map {
  border-color: #334155;
}

@media (max-width: 900px) {
  #adminEditModal .admin-edit-section[data-editor="places"].active {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(360px, 1fr) auto auto;
  }

  #adminEditModal .admin-edit-section[data-editor="places"] .admin-area-map,
  #adminEditModal .admin-edit-section[data-editor="places"] #adminAreaHint,
  #adminEditModal .admin-edit-section[data-editor="places"] #adminSavePlace {
    grid-column: 1;
    grid-row: auto;
  }

  #adminEditModal .admin-edit-section[data-editor="places"] #adminSavePlace {
    justify-self: stretch;
  }
}/* Global popup sizing */
.modal-card,
.login-card,
.profile-card,
.admin-card,
.admin-edit-card,
.admin-user-detail-card,
.admin-live-map-card,
.base-modal-card,
.shop-modal-card,
.fleet-card,
.activity-modal-card,
.loco-activity-card,
.loco-plan-card,
.order-modal-card,
.account-card,
.wagon-list-card {
  width: 95vw !important;
  height: 95vh !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
}.base-modal-card {
  width: min(900px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-width: min(900px, calc(100vw - 32px)) !important;
  max-height: min(860px, calc(100vh - 48px)) !important;
  min-height: 0 !important;
}.base-modal-card .base-box {
  align-content: start !important;
  overflow: auto !important;
}

.site-detail-card {
  width: min(1120px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-width: min(1120px, calc(100vw - 32px)) !important;
  max-height: min(760px, calc(100vh - 48px)) !important;
  min-height: 0 !important;
}.login-card,
.shift-trainee-card,
.person-training-info-card,
.schedule-edit-card,
.schedule-extend-card {
  width: min(640px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-width: min(640px, calc(100vw - 32px)) !important;
  max-height: 86vh !important;
}.activity-modal-card {
  width: min(1040px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-width: min(1040px, calc(100vw - 32px)) !important;
  max-height: 88vh !important;
}.activity-modal-card .modal-activity-form {
  max-height: calc(88vh - 74px);
}.activity-modal-card .activity-form-grid {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 10px;
  padding: 14px;
}.activity-modal-card .activity-form-grid label,
.activity-modal-card .activity-times {
  padding: 10px;
}.activity-modal-card #activityWagonLabel,
.activity-modal-card #activityTripPreview,
.activity-modal-card .activity-times {
  grid-column: 1 / -1;
}.activity-modal-card .activity-times input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 820px) {.activity-modal-card .activity-times {
  grid-template-columns: 1fr;
}
}.activity-modal-card .activity-trip-preview {
  min-height: 260px;
  margin: 0 14px 14px;
}

.pkw-activity-card {
  width: min(780px, calc(100vw - 24px)) !important;
  height: min(760px, calc(100vh - 24px)) !important;
  max-width: min(780px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 24px) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: visible !important;
}

.pkw-activity-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  padding: 16px;
  overflow: visible;
}

.pkw-activity-form label {
  position: relative;
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.pkw-personnel-field {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.pkw-personnel-field .field-label {
  color: inherit;
}

.pkw-activity-form input,
.pkw-activity-form select {
  min-height: 36px;
  border: 1px solid #cbd5e1;
  padding: 0 10px;
  font: inherit;
  background: #fff;
  color: #0f172a;
}

.pkw-activity-form .picker-results {
  z-index: 30000 !important;
  max-height: min(46vh, 440px);
}

.pkw-activity-form label:has(.picker-results) {
  z-index: 40;
}

.pkw-personnel-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 112px;
  max-height: 184px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}

.pkw-personnel-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid #d7e3f1;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.pkw-personnel-option:hover {
  border-color: #38bdf8;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.pkw-personnel-option:has(input:checked) {
  border-color: #128c98;
  background: #e8f8fb;
  box-shadow: inset 3px 0 0 #128c98;
}

.pkw-personnel-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: #128c98;
}

.pkw-personnel-option strong,
.pkw-personnel-option small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pkw-personnel-option strong {
  color: #0f172a;
  font-size: 13px;
}

.pkw-personnel-option small {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.pkw-personnel-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 92px;
  padding: 12px;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  text-align: center;
}

.pkw-activity-form .field-preview {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

body.dark-mode .pkw-activity-form select,
body.dark-mode .pkw-activity-form input {
  background: #10151b;
  border-color: #3a4451;
  color: #f3f6fa;
}

body.dark-mode .pkw-activity-form .field-preview {
  color: #9fb0c6;
}

body.dark-mode .pkw-personnel-field {
  color: #e6edf7;
}

body.dark-mode .pkw-personnel-check-list {
  background: #0f1724;
  border-color: #334155;
}

body.dark-mode .pkw-personnel-option {
  background: #131d2b;
  border-color: #334155;
}

body.dark-mode .pkw-personnel-option:hover {
  border-color: #38bdf8;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

body.dark-mode .pkw-personnel-option:has(input:checked) {
  border-color: #26c6da;
  background: #0c2832;
  box-shadow: inset 3px 0 0 #26c6da;
}

body.dark-mode .pkw-personnel-option strong {
  color: #f8fafc;
}

body.dark-mode .pkw-personnel-option small,
body.dark-mode .pkw-personnel-empty {
  color: #9fb0c6;
}

body.dark-mode .pkw-personnel-empty {
  border-color: #334155;
}

.pkw-activity-preview {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e3a8a;
  font-weight: 800;
}

.hotel-offer-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.hotel-offer {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.hotel-offer span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.hotel-offer.active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

/* Hotel management redesign */
.hotel-activity-card {
  width: min(860px, calc(100vw - 36px)) !important;
  max-width: min(860px, calc(100vw - 36px)) !important;
  max-height: min(760px, calc(100vh - 34px)) !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  border: 1px solid #cbd8e7 !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28) !important;
}

.hotel-activity-form {
  grid-template-columns: minmax(260px, .95fr) minmax(360px, 1.4fr) !important;
  gap: 14px !important;
  padding: 16px !important;
  overflow: auto !important;
}

.hotel-activity-form label {
  padding: 12px !important;
  border: 1px solid #dce6f2 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.hotel-activity-form label:first-child {
  grid-row: span 2;
}

.hotel-activity-form input {
  border-color: #c8d6e6 !important;
  background: #f8fbff !important;
}

.hotel-activity-form input:focus {
  outline: 3px solid rgba(20, 184, 166, .22) !important;
  border-color: #0f766e !important;
}

.hotel-offer-list {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-height: 260px !important;
  overflow: auto !important;
  padding: 2px 2px 4px !important;
}

.hotel-offer {
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px 10px !important;
  padding: 12px !important;
  border: 1px solid #d5e1ef !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,246,252,.96)) !important;
  box-shadow: 0 9px 22px rgba(15, 23, 42, .07) !important;
}

.hotel-offer:hover {
  border-color: #7dd3c7 !important;
  transform: translateY(-1px);
}

.hotel-offer-icon {
  grid-row: 1 / 3 !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #e8faf7, #d9f3ef) !important;
  color: #0f766e !important;
  border: 1px solid #a7eee3 !important;
  font-weight: 900 !important;
}

.hotel-offer-main {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.hotel-offer-main strong {
  color: #102033 !important;
  font-size: 14px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.hotel-offer-main span,
.hotel-offer-facts span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.hotel-offer-facts {
  display: grid !important;
  justify-items: end !important;
  gap: 2px !important;
  white-space: nowrap !important;
}

.hotel-offer-facts b {
  color: #0f172a !important;
  font-size: 13px !important;
}

.hotel-offer-capacity {
  grid-column: 2 / 4 !important;
  width: fit-content !important;
  padding: 4px 8px !important;
  background: #eef4ff !important;
  color: #2563eb !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.hotel-offer.active {
  border-color: #0f766e !important;
  background:
    linear-gradient(135deg, rgba(232, 250, 247, .98), rgba(239, 246, 255, .98)) !important;
  box-shadow: inset 4px 0 0 #0f766e, 0 12px 26px rgba(15, 118, 110, .13) !important;
}

.hotel-offer.active .hotel-offer-icon {
  background: #0f766e !important;
  border-color: #0f766e !important;
  color: #ffffff !important;
}

.hotel-activity-form .pkw-activity-preview {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid #cfe8e4 !important;
  background: linear-gradient(135deg, #ecfdf9, #eff6ff) !important;
  color: #102033 !important;
}

.hotel-activity-form .pkw-activity-preview span {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  color: #334155 !important;
  font-size: 12px !important;
}

.hotel-activity-form .pkw-activity-preview b {
  color: #0f766e !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

.hotel-activity-form + .modal-actions,
.hotel-activity-card .modal-actions {
  background: #ffffff !important;
  border-top: 1px solid #d8e3f0 !important;
}

.hotel-activity-card #hotelActivityHint {
  color: #b91c1c !important;
  font-weight: 800 !important;
}

body.dark-mode .hotel-activity-card {
  background: #0f172a !important;
  border-color: #334155 !important;
}

@media (max-width: 720px) {
  .hotel-activity-form,
  .hotel-offer-list,
  .hotel-activity-form .pkw-activity-preview {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .pkw-activity-form,
  .pkw-personnel-check-list {
    grid-template-columns: 1fr;
  }
}

.compact-select {
  min-height: 32px;
  max-width: 170px;
  padding: 0 8px;
  font-weight: 800;
}.login-card {
  min-height: 0 !important;
}

.shift-trainee-card,
.person-training-info-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Stable activity colors */
.lp-activity.lp-inspection { background: #8b5cf6 !important; }
.lp-activity.lp-brake { background: #f59e0b !important; }
.lp-activity.lp-shunt { background: #a16207 !important; }
.lp-activity.lp-cargo { background: #10b981 !important; }
.lp-activity.lp-fuel { background: #06b6d4 !important; }
.lp-activity.lp-parking { background: #475569 !important; }
.lp-activity.lp-trip { background: #2563eb !important; }
.lp-activity.lp-training { background: #64748b !important; }
.lp-activity.lp-rest { background: #16a34a !important; }
.lp-activity .activity-color-only { background: inherit; }

body.dark-mode .lp-activity.lp-inspection { background: #a78bfa !important; }
body.dark-mode .lp-activity.lp-brake { background: #fbbf24 !important; }
body.dark-mode .lp-activity.lp-shunt { background: #ca8a04 !important; }
body.dark-mode .lp-activity.lp-cargo { background: #34d399 !important; }
body.dark-mode .lp-activity.lp-fuel { background: #22d3ee !important; }
body.dark-mode .lp-activity.lp-parking { background: #64748b !important; }
body.dark-mode .lp-activity.lp-trip { background: #60a5fa !important; }
body.dark-mode .lp-activity.lp-training { background: #94a3b8 !important; }
body.dark-mode .lp-activity.lp-rest { background: #4ade80 !important; }

body:not(.view-maponly) .icon-action:hover {
  background: rgba(255,255,255,.2);
  transform: translateY(-1px);
}

body:not(.view-maponly) .icon-action:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

body:not(.view-maponly) .game-clock,
body:not(.view-maponly) .money {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.16);
}

body:not(.view-maponly) .global-search {
  justify-self: stretch;
  width: 100%;
  max-width: 520px;
}

body:not(.view-maponly) .global-search input {
  min-height: 40px;
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.14);
  color: #fff;
}

body:not(.view-maponly) .global-search input::placeholder {
  color: rgba(255,255,255,.72);
}

body.dark-mode:not(.view-maponly) .topbar {
  background: linear-gradient(135deg, #111827 0%, #7f1d1d 58%, #0f172a 100%);
}/* Final vehicle shop layout */
.shop-modal-card .modal-shop-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 18px;
}

.shop-switch {
  grid-column: 1 / 2;
  display: inline-flex;
  width: fit-content;
  gap: 6px;
  padding: 6px;
  border: 1px solid #d8e1ec;
  background: #eef4fb;
}

.shop-tab {
  min-width: 110px;
  min-height: 36px;
  border-color: transparent;
  background: transparent;
  color: #334155;
  font-weight: 900;
}

.shop-tab.active {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 8px 18px rgba(37,99,235,.22);
}

.shop-section {
  display: none;
  min-height: 0;
  overflow: auto;
}

.shop-section.active {
  display: grid;
}.shop-modal-card .shop-row {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}.shop-modal-card .shop-card {
  position: relative;
  grid-template-rows: 220px auto auto auto;
  min-height: 430px;
  padding: 18px;
  gap: 12px;
}.shop-modal-card .shop-card .vehicle-image {
  height: 220px;
}.shop-modal-card .vehicle-image img {
  object-fit: contain;
  padding: 8px;
}

.shop-info-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.92);
  color: #1d4ed8;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15,23,42,.16);
}

.shop-info-popup {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(15,23,42,.45);
}

.shop-info-popup.open {
  display: grid;
}.shop-info-dialog {
  position: relative;
  width: min(520px, 96vw);
  max-height: min(720px, 90vh);
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  overflow: auto;
}

.shop-info-head strong {
  color: #0f172a;
  font-size: 18px;
}

.shop-info-head span {
  color: #64748b;
}.shop-info-dialog dl {
  display: grid;
  gap: 8px;
  margin: 0;
}.shop-info-dialog dl div {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(120px, 1fr);
  gap: 10px;
  padding: 10px;
}

.vehicle-purchase-popup {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .48);
}

.vehicle-purchase-popup.open {
  display: grid;
}.vehicle-purchase-dialog {
  position: relative;
  width: min(480px, 94vw);
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  padding: 22px;
}

.vehicle-purchase-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #0f766e;
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
}

.vehicle-purchase-popup.danger .vehicle-purchase-icon {
  background: #dc2626;
}

.vehicle-purchase-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #0f172a;
}

.vehicle-purchase-copy strong {
  font-size: 18px;
  font-weight: 900;
}

.vehicle-purchase-copy span,
.vehicle-purchase-copy small {
  color: #475569;
  font-weight: 750;
  line-height: 1.35;
}

.vehicle-purchase-ok {
  grid-column: 2;
  justify-self: start;
  min-width: 110px;
}

.vehicle-purchase-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #cbd8e7;
  background: #ffffff;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}.game-dialog {
  align-items: start;
}.game-dialog-copy {
  gap: 10px;
  padding-right: 34px;
}.game-dialog-message {
  display: grid;
  gap: 4px;
}.game-dialog-input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  color: #0f172a;
  font: inherit;
  font-weight: 800;
  outline: none;
}.game-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}.game-dialog-cancel,
.game-dialog-ok {
  min-height: 38px;
  padding: 0 15px;
  font-weight: 900;
}.game-dialog-cancel {
  color: #334155;
}.game-dialog-ok {
  min-width: 118px;
}

body.dark-mode .vehicle-purchase-copy,
body.dark-mode .vehicle-purchase-copy strong {
  color: #f8fafc;
}

body.dark-mode .vehicle-purchase-copy span,
body.dark-mode .vehicle-purchase-copy small {
  color: #cbd5e1;
}body.dark-mode .vehicle-purchase-close,
body.dark-mode .game-dialog-cancel,
body.dark-mode .game-dialog-input {
  color: #f8fafc;
}.shop-info-dialog dt {
  color: #64748b;
  font-weight: 800;
}.shop-info-dialog dd {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
  text-align: right;
}

.shop-info-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  min-height: 34px;
  font-weight: 900;
}body.dark-mode .shop-info-head strong,
body.dark-mode .shop-info-dialog dd {
  color: #f8fafc;
}body.dark-mode .shop-info-head span,
body.dark-mode .shop-info-dialog dt {
  color: #cbd5e1;
}

@media (max-width: 1220px) {
  body:not(.view-maponly) .topbar {
    grid-template-columns: 1fr;
    height: auto;
    align-items: stretch;
  }

  body:not(.view-maponly) .top-actions,
  body:not(.view-maponly) .time-controls {
    flex-wrap: wrap;
    justify-content: flex-start;
  }.shop-modal-card .shop-row {
  grid-template-columns: 1fr;
}
}

/* Personnel modal layout polish */
#personnelOverviewModal .personnel-overview-card {
  width: 95vw;
  height: 95vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #f8fafc;
}#personnelOverviewModal .modal-head h2 {
  margin: 0;
}

#personnelOverviewModal .head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#personnelOverviewModal .personnel-overview-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 12px 16px 0;
  padding: 4px;
  border: 1px solid #dbe3ee;
  background: #eef2f7;
}

#personnelOverviewModal .personnel-overview-tabs button {
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 850;
}

#personnelOverviewModal .personnel-overview-tabs button.active {
  background: #fff;
  color: #0b57d0;
  box-shadow: 0 1px 4px rgba(15,23,42,.12);
}

#personnelOverviewModal .personnel-overview-pane {
  min-height: 0;
}

#personnelOverviewModal .personnel-overview-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  overflow: hidden;
}

#personnelOverviewModal .personnel-overview-grid section,
#personnelOverviewModal .training-form-card,
#personnelOverviewModal .training-list-card {
  background: #fff;
  border: 1px solid #dbe3ee;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
}

#personnelOverviewModal .personnel-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

#personnelOverviewModal .personnel-card {
  background: #fff;
}

#personnelOverviewModal .personnel-training-page {
  padding: 16px;
  gap: 14px;
  background: transparent;
}

body.dark-mode #personnelOverviewModal .personnel-overview-card,
body.dark-mode #personnelOverviewModal .personnel-overview-tabs {
  background: #0f172a;
}

body.dark-mode #personnelOverviewModal .personnel-overview-tabs button.active {
  background: #1e3a8a;
  color: #eff6ff;
}

body.dark-mode #personnelOverviewModal .training-form-grid input[readonly] {
  background: #0f172a;
  color: #cbd5e1;
}body.dark-mode .shift-trainee-card,
body.dark-mode .shift-trainee-actions,
body.dark-mode .person-training-info-card,
body.dark-mode .training-info-row,
body.dark-mode .schedule-edit-card,
body.dark-mode .schedule-extend-card,
body.dark-mode .activity-game-time,
body.dark-mode .loading-card {
  color: #e5edf7;
}

body.dark-mode .schedule-edit-grid label {
  color: #cbd5e1;
}

body.dark-mode .schedule-extend-body label,
body.dark-mode .schedule-extend-body p,
body.dark-mode .schedule-card-foot > span {
  color: #cbd5e1;
}

body.dark-mode .personnel-qual-chips em {
  background: #1e3a8a;
  color: #dbeafe;
}

body.dark-mode .schedule-edit-actions {
  border-top-color: #334155;
}

body.dark-mode .schedule-edit-actions span {
  color: #f8fafc;
}body.dark-mode .activity-game-time strong,
body.dark-mode .loading-card span {
  color: #cbd5e1;
}

body.dark-mode .loading-progress {
  background: #0f172a;
  border-color: #334155;
}

body.dark-mode .loading-progress-label {
  color: #dbeafe;
}

body.dark-mode .activity-game-time span {
  color: #f8fafc;
}

body.dark-mode .training-person-info {
  background: #1e3a8a;
  border-color: #60a5fa;
  color: #dbeafe;
}

/* Responsive header controls */
body:not(.view-maponly) .topbar {
  height: auto !important;
  min-height: 64px;
  grid-template-columns: minmax(190px, max-content) minmax(160px, 1fr) minmax(0, auto) !important;
  align-items: center;
}

body:not(.view-maponly) .global-search {
  max-width: none !important;
  min-width: 0;
}

body:not(.view-maponly) .top-actions {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}

body:not(.view-maponly) .time-controls {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

body:not(.view-maponly) .game-clock,
body:not(.view-maponly) .money {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

body.view-controlsonly .topbar {
  grid-template-columns: minmax(180px, max-content) minmax(180px, 1fr) !important;
  grid-template-areas:
    "brand search"
    "actions actions";
  align-items: stretch;
}

body.view-controlsonly .brand {
  grid-area: brand;
}

body.view-controlsonly .global-search {
  grid-area: search;
}

body.view-controlsonly .top-actions {
  grid-area: actions;
  justify-content: stretch;
}

body.view-controlsonly .time-controls {
  flex: 1 1 520px;
  justify-content: flex-start;
}

body.view-controlsonly .game-clock,
body.view-controlsonly .money {
  flex: 1 1 110px;
}

@media (max-width: 980px) {
  body:not(.view-maponly) .topbar {
    grid-template-columns: 1fr !important;
  }

  body:not(.view-maponly) .brand,
  body:not(.view-maponly) .global-search,
  body:not(.view-maponly) .top-actions {
    grid-column: 1;
  }

  body:not(.view-maponly) .top-actions,
  body:not(.view-maponly) .time-controls {
    justify-content: flex-start;
  }
}

/* Header overlap fix */
body:not(.view-maponly) .topbar {
  grid-template-columns: minmax(210px, 260px) minmax(180px, 360px) minmax(max-content, 1fr) !important;
  gap: 12px;
}

body:not(.view-maponly) .brand,
body:not(.view-maponly) .global-search,
body:not(.view-maponly) .top-actions {
  min-width: 0;
}

body:not(.view-maponly) .global-search {
  width: 100%;
  max-width: 360px !important;
  z-index: 6;
}

body:not(.view-maponly) .global-search input {
  width: 100%;
}

body:not(.view-maponly) .top-actions {
  position: relative;
  z-index: 8;
  justify-self: end;
  flex-wrap: nowrap;
}

body:not(.view-maponly) .time-controls {
  flex: 0 0 auto;
}

@media (max-width: 1360px) {
  body:not(.view-maponly) .topbar {
    grid-template-columns: minmax(170px, 230px) minmax(150px, 300px) minmax(max-content, 1fr) !important;
    gap: 8px;
  }

  body:not(.view-maponly) .brand {
    font-size: 13px;
  }

  body:not(.view-maponly) .time-button {
    padding-inline: 8px;
  }

  body:not(.view-maponly) .game-clock,
  body:not(.view-maponly) .money {
    min-width: auto;
    padding-inline: 10px;
  }
}

/* Final responsive override for main header */
body:not(.view-maponly) .topbar {
  height: auto !important;
  min-height: 64px;
  grid-template-columns: minmax(190px, max-content) minmax(160px, 1fr) minmax(0, auto) !important;
  align-items: center;
}

body:not(.view-maponly) .global-search {
  max-width: none !important;
  min-width: 0;
}

body:not(.view-maponly) .top-actions {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}

body:not(.view-maponly) .time-controls {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

body:not(.view-maponly) .game-clock,
body:not(.view-maponly) .money {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

body.view-controlsonly .topbar {
  grid-template-columns: minmax(180px, max-content) minmax(180px, 1fr) !important;
  grid-template-areas:
    "brand search"
    "actions actions";
  align-items: stretch;
}

body.view-controlsonly .brand {
  grid-area: brand;
}

body.view-controlsonly .global-search {
  grid-area: search;
}

body.view-controlsonly .top-actions {
  grid-area: actions;
  justify-content: stretch;
}

body.view-controlsonly .time-controls {
  flex: 1 1 520px;
  justify-content: flex-start;
}

body.view-controlsonly .game-clock,
body.view-controlsonly .money {
  flex: 1 1 110px;
}

@media (max-width: 980px) {
  body:not(.view-maponly) .topbar {
    grid-template-columns: 1fr !important;
  }

  body:not(.view-maponly) .brand,
  body:not(.view-maponly) .global-search,
  body:not(.view-maponly) .top-actions {
    grid-column: 1;
  }

  body:not(.view-maponly) .top-actions,
  body:not(.view-maponly) .time-controls {
    justify-content: flex-start;
  }
}/* Dark mode readability pass */
body.dark-mode .floating-window,
body.dark-mode .panel,
body.dark-mode .window-dock,
body.dark-mode .modal-card,
body.dark-mode .inline-loco-planner,
body.dark-mode .loco-planner {
  color: #e5edf7;
}

body.dark-mode .panel-head,
body.dark-mode .window-tabs,
body.dark-mode .personnel-pane-head,
body.dark-mode .personnel-section-head,
body.dark-mode .lp-toolbar,
body.dark-mode .lp-scale-bar {
  background: #111827;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode .panel-head h2,
body.dark-mode .planning-title,
body.dark-mode #planningTitle,
body.dark-mode .lp-head,
body.dark-mode .lp-title,
body.dark-mode .lp-res-row strong,
body.dark-mode .loco strong,
body.dark-mode .schedule-title,
body.dark-mode .contract-title,
body.dark-mode .contract-card strong,
body.dark-mode .schedule-card strong {
  color: #f8fafc;
}

body.dark-mode .panel-head span,
body.dark-mode .window-tabs span,
body.dark-mode .lp-title span,
body.dark-mode .lp-toolbar label,
body.dark-mode .lp-res-row span,
body.dark-mode .schedule-meta,
body.dark-mode .contract-card,
body.dark-mode .contract-card p,
body.dark-mode .loco,
body.dark-mode .loco small,
body.dark-mode .loco span {
  color: #cbd5e1;
}

body.dark-mode .lp-resource-list,
body.dark-mode .lp-resource-rows,
body.dark-mode .lp-grid-wrap,
body.dark-mode .lp-timeline,
body.dark-mode .lp-grid,
body.dark-mode .lp-left,
body.dark-mode .lp-hours,
body.dark-mode .lp-day-group,
body.dark-mode .lp-day-hours,
body.dark-mode .lp-row,
body.dark-mode .personnel-split-section {
  background-color: #0b1220;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode .personnel-split-handle {
  background: linear-gradient(#111827, #0f172a);
  border-color: #334155;
}

body.dark-mode .personnel-split-handle::after {
  background: #64748b;
}

body.dark-mode .lp-grid {
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, .18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, .16) 1px, transparent 1px);
}

body.dark-mode .lp-hour,
body.dark-mode .lp-day-hours span {
  border-color: #243244;
  color: #dbe4f0;
}

body.dark-mode .lp-day-head {
  background: #10213a;
  border-color: #334155;
  color: #bfdbfe;
}

body.dark-mode .lp-res-row {
  background: #0f172a;
  border-bottom-color: #334155;
  color: #e5edf7;
}

body.dark-mode .lp-res-row:hover,
body.dark-mode .lp-res-row.active {
  background: #1e293b;
  box-shadow: inset 4px 0 0 #60a5fa;
}

body.dark-mode .schedule-list,
body.dark-mode .contract-list,
body.dark-mode .archive-list,
body.dark-mode .radio-log {
  background: #0b1220;
  color: #e5edf7;
}

body.dark-mode .schedule-card,
body.dark-mode .contract-card,
body.dark-mode .loco {
  background: #172235;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode .window-tab {
  background: #172235;
  border-color: #334155;
  color: #dbeafe;
}

body.dark-mode .window-tab.active,
body.dark-mode .dock-button.active {
  background: #1d4ed8;
  border-color: #60a5fa;
  color: #ffffff;
}

body.dark-mode .time-button,
body.dark-mode .icon-button,
body.dark-mode .plus-button {
  color: #f8fafc;
}

body.dark-mode input[type="range"] {
  accent-color: #60a5fa;
}/* Fleet overview redesign */
.fleet-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden !important;
}.fleet-card .modal-head {
  grid-row: 1;
}

.fleet-filter-tabs {
  grid-row: 2;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  min-height: 58px;
  height: auto !important;
  background: #f8fafc;
  border-bottom: 1px solid #dbe3ee;
}

.fleet-filter-tabs .window-tab {
  width: auto !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 16px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  line-height: 1 !important;
}

.fleet-filter-tabs .window-tab.active {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

.fleet-list {
  grid-row: 3;
  min-height: 0;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  overflow: auto;
  align-content: start;
  background: #eef3f8;
}

.fleet-item {
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #d7e0eb;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.fleet-media {
  min-height: 132px;
  border: 1px solid #dbe3ee;
  background: linear-gradient(180deg, #f8fafc 0%, #e8eef6 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.fleet-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.fleet-media span {
  font-weight: 900;
  color: #64748b;
}

.fleet-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.fleet-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.fleet-item-head > div {
  min-width: 0;
}

.fleet-item-head strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
}

.fleet-item-head span,
.fleet-item-head em {
  display: block;
  color: #64748b;
  font-style: normal;
  font-size: 13px;
  margin-top: 3px;
}

.fleet-status {
  white-space: nowrap;
}

.fleet-facts {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.fleet-facts span {
  padding: 10px;
}

.fleet-offer {
}

.fleet-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.fleet-actions span {
  color: #64748b;
  font-weight: 800;
}

.fleet-dispose {
  min-height: 34px;
  border: 1px solid #dc2626;
  background: #fff1f2;
  color: #b91c1c;
  font-weight: 900;
}.multiple-traction-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden !important;
}

.multiple-traction-existing {
  padding: 14px 18px 0;
  min-height: 0;
}

.multiple-traction-existing-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e0eb;
  background: #ffffff;
}

.multiple-traction-existing-list {
  display: grid;
  gap: 8px;
  max-height: 170px;
  overflow: auto;
}

.multiple-traction-existing-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
}

.multiple-traction-existing-item strong,
.multiple-traction-existing-item small {
  display: block;
}

.multiple-traction-existing-item small {
  color: #64748b;
  margin-top: 2px;
}

.multiple-traction-disband {
  min-height: 32px;
  border: 1px solid #dc2626;
  background: #fff1f2;
  color: #b91c1c;
  font-weight: 900;
}

.multiple-traction-groups {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.multiple-traction-group {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d7e0eb;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.multiple-traction-group-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
}

.multiple-traction-group-head strong {
  color: #0f172a;
}

.multiple-traction-group-head span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.multiple-traction-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.multiple-traction-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
}

.multiple-traction-option input {
  width: 18px;
  height: 18px;
}

.multiple-traction-option strong,
.multiple-traction-option small {
  display: block;
}

.multiple-traction-option small {
  color: #64748b;
  margin-top: 2px;
}

.multiple-traction-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid #dbe3ee;
  background: #f8fafc;
}

.multiple-traction-actions span {
  color: #64748b;
  font-weight: 800;
}

.multiple-traction-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}body.dark-mode #multipleTractionModal .multiple-traction-card {
  color: #e5edf7 !important;
}


/* assets/css/app/chunk-04.css */

body.dark-mode #multipleTractionModal .multiple-traction-existing,
body.dark-mode #multipleTractionModal .multiple-traction-groups {
  scrollbar-color: #475569 #0b1220;
}

body.dark-mode #multipleTractionModal .multiple-traction-existing-box,
body.dark-mode #multipleTractionModal .multiple-traction-group {
  border-color: rgba(148, 163, 184, .32) !important;
  background: linear-gradient(180deg, #111827, #0f172a) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .34) !important;
}

body.dark-mode #multipleTractionModal .multiple-traction-group-head {
  border-bottom-color: rgba(148, 163, 184, .25) !important;
}

body.dark-mode #multipleTractionModal .multiple-traction-existing-item,
body.dark-mode #multipleTractionModal .multiple-traction-option {
  border-color: rgba(148, 163, 184, .28) !important;
  background: #0b1324 !important;
  color: #e5edf7 !important;
}

body.dark-mode #multipleTractionModal .multiple-traction-option:hover,
body.dark-mode #multipleTractionModal .multiple-traction-existing-item:hover {
  border-color: rgba(45, 212, 191, .55) !important;
  background: #102033 !important;
}

body.dark-mode #multipleTractionModal .multiple-traction-option:has(input:checked) {
  border-color: #2dd4bf !important;
  background: rgba(20, 184, 166, .16) !important;
  box-shadow: inset 4px 0 0 #14b8a6, 0 12px 26px rgba(20, 184, 166, .12) !important;
}

body.dark-mode #multipleTractionModal .multiple-traction-option input {
  accent-color: #14b8a6;
}

body.dark-mode #multipleTractionModal .multiple-traction-option input:disabled ~ span {
  opacity: .45;
}

body.dark-mode #multipleTractionModal .multiple-traction-actions {
  border-top-color: #334155 !important;
  background: linear-gradient(180deg, #101827, #0b1220) !important;
}

body.dark-mode #multipleTractionModal .multiple-traction-disband {
  border-color: rgba(248, 113, 113, .65) !important;
  background: rgba(127, 29, 29, .35) !important;
  color: #fecaca !important;
}

body.dark-mode #multipleTractionModal .multiple-traction-disband:hover {
  border-color: #fca5a5 !important;
  background: rgba(185, 28, 28, .52) !important;
}

body.dark-mode #multipleTractionModal .empty-state {
  border-color: rgba(148, 163, 184, .28) !important;
  background: rgba(15, 23, 42, .74) !important;
  color: #cbd5e1 !important;
}

.admin-live-map-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden !important;
}

.admin-live-map {
  min-height: 0;
  height: 100%;
  background: #dbe7f0;
}

#adminLivePlayerFilter {
  width: min(260px, 32vw);
  min-height: 36px;
}

.admin-inline-live-map,
.admin-settings-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #dbe3ee;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.admin-inline-live-map {
  grid-template-rows: auto minmax(420px, 1fr);
  min-height: 560px;
}

.admin-places-overview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  border: 1px solid #dbe3ee;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.admin-places-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border-bottom: 1px solid #dbe3ee;
  background: #f8fafc;
}

.admin-places-overview-head strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
}

.admin-places-overview-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.admin-places-overview-map {
  min-height: 520px;
  height: 100%;
  background: #dbe7f0;
}

.admin-place-map-popup {
  display: grid;
  gap: 6px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
}

.admin-place-map-popup-shell .leaflet-popup-content {
  width: 326px !important;
  max-width: min(326px, calc(100vw - 88px)) !important;
  margin: 10px 12px;
  overflow: hidden;
}

.admin-place-map-popup strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.admin-place-map-popup span {
  color: #475569;
  overflow-wrap: anywhere;
}

.admin-place-map-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}

.admin-place-map-actions button {
  width: auto;
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.admin-place-map-actions .danger-button {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b91c1c;
}

.admin-place-map-actions .header-icon,
.admin-place-map-actions svg {
  width: 14px;
  height: 14px;
}

.admin-inline-live-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin-inline-live-head strong,
.admin-settings-panel strong {
  color: #0f172a;
  font-size: 16px;
}

.admin-inline-live-head span,
.admin-settings-panel span {
  color: #64748b;
  font-size: 13px;
}

.admin-inline-live-head select {
  margin-left: auto;
  width: min(280px, 36vw);
  min-height: 36px;
}

.admin-settings-panel {
  align-content: start;
  max-width: 520px;
}

.admin-mail-settings,
.admin-google-settings {
  max-width: 920px;
}

.admin-mail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.admin-mail-grid label,
.admin-mail-settings > label,
.admin-google-settings > label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.admin-google-redirect {
  grid-column: 1 / -1;
}

.admin-mail-grid input,
.admin-mail-grid select {
  min-height: 38px;
  border: 1px solid #cbd5e1;
  padding: 0 10px;
  background: #fff;
  color: #0f172a;
}

.admin-mail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-settings-panel button {
  width: fit-content;
  min-height: 38px;
  padding: 0 16px;
}

.live-player-status {
  font-weight: 900;
}

.live-player-status.online {
  color: #16a34a;
}

.live-player-status.offline {
  color: #dc2626;
}

#adminUserRoleFilter {
  min-height: 36px;
  border: 1px solid #cbd5e1;
  background: #fff;
  padding: 0 10px;
  font-weight: 800;
}

body.dark-mode .fleet-filter-tabs {
  background: #111827;
  border-color: #334155;
}

body.dark-mode .fleet-filter-tabs .window-tab {
  background: #172235 !important;
  border-color: #334155 !important;
  color: #dbeafe !important;
}

body.dark-mode .fleet-filter-tabs .window-tab.active {
  background: #1d4ed8 !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
}

body.dark-mode .fleet-item,
body.dark-mode .fleet-media,
body.dark-mode .fleet-facts span,
body.dark-mode .fleet-offer,
body.dark-mode .admin-live-map-card {
  background: #172235;
  border-color: #334155;
}

body.dark-mode .fleet-item-head strong,
body.dark-mode .fleet-facts strong,
body.dark-mode .fleet-offer strong {
  color: #f8fafc;
}

body.dark-mode .fleet-actions {
  border-color: #334155;
}

body.dark-mode .fleet-dispose {
  background: #3f1d24;
  border-color: #ef4444;
  color: #fecdd3;
}

body.dark-mode #adminUserRoleFilter {
  background: #172235;
  border-color: #334155;
  color: #e5edf7;
}

@media (max-width: 760px) {
  .fleet-item {
    grid-template-columns: 1fr;
  }

  .fleet-media {
    min-height: 180px;
  }

  .fleet-facts {
    grid-template-columns: 1fr 1fr;
  }
}

/* Final compact header corrections */
body.view-controlsonly .topbar {
  grid-template-columns: auto minmax(220px, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 8px 14px !important;
}

body.view-controlsonly .top-actions {
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 7px !important;
}

body.view-controlsonly .time-controls {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  max-width: 540px;
}

body.view-maponly .map-view-header {
  top: 10px;
  width: min(760px, calc(100vw - 24px));
  min-height: 46px;
  padding: 7px 10px;
}

body.view-maponly .map-view-status {
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.view-maponly .map-view-status span {
  padding: 4px 7px;
}

/* Wiki, invoices and compact header polish */
.schedule-actions .schedule-icon-action {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.schedule-actions .schedule-icon-action .header-icon {
  width: 18px;
  height: 18px;
}

.account-tabs {
  padding: 10px 16px 0;
  border-bottom: 0;
  background: transparent;
}

.invoice-list {
  min-height: 0;
  overflow: auto;
  padding: 14px 16px 18px;
}

.invoice-table small {
  color: var(--muted);
  font-weight: 700;
}

.invoice-table tr.invoice-overdue td {
  background: #fff1f2;
}

.wiki-card {
  width: 95vw;
  height: 95vh;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.wiki-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: #f8fafc;
}

.wiki-layout .wiki-nav {
  display: none;
}

.wiki-nav {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border-right: 1px solid #dbe3ee;
  background: #eef4fb;
  overflow: auto;
}

.wiki-nav button {
  min-height: 38px;
  border: 1px solid transparent;
  background: transparent;
  color: #334155;
  font-weight: 900;
  text-align: left;
  padding: 0 12px;
}

.wiki-nav button.active,
.wiki-nav button:hover {
  background: white;
  border-color: #bfdbfe;
  color: #0b56d0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.wiki-content {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.wiki-html-shell {
  min-height: 100%;
  display: grid;
  grid-template-rows: minmax(420px, 1fr) auto;
  gap: 14px;
}

.wiki-html-frame {
  width: 100%;
  height: 100%;
  min-height: 58vh;
  border: 1px solid #dbe3ee;
  background: #fff;
}

.wiki-html-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}

.wiki-html-editor-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.wiki-html-editor-head h3 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 18px;
}

.wiki-html-editor-head span {
  color: #475569;
  font-weight: 800;
}

.wiki-html-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.wiki-file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  cursor: pointer;
}

.wiki-file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

#wikiHtmlEditor {
  width: 100%;
  min-height: 320px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  padding: 12px;
  font: 13px/1.5 Consolas, "Courier New", monospace;
  resize: vertical;
}

.wiki-hero {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #ffffff, #eff6ff);
}

.wiki-hero .header-icon {
  width: 48px;
  height: 48px;
  color: #2563eb;
}

.wiki-hero h3 {
  margin: 0 0 6px;
  font-size: 24px;
  color: #0f172a;
}

.wiki-hero p {
  margin: 0;
  color: #475569;
  line-height: 1.5;
}

.wiki-progress {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.wiki-progress span {
  color: #334155;
  font-weight: 800;
}

.wiki-progress div {
  height: 10px;
  overflow: hidden;
  background: #dbe3ee;
}

.wiki-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #2563eb);
}

.wiki-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.wiki-text {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.wiki-text section {
  padding: 16px 18px;
  border: 1px solid #dbe3ee;
  background: #fff;
}

.wiki-text h4 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 18px;
}

.wiki-text p {
  margin: 0;
  color: #334155;
  line-height: 1.6;
}

.wiki-guide {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.wiki-guide-scene {
  position: relative;
  min-height: 118px;
  padding: 58px 18px 18px;
  border: 1px solid #dbe3ee;
  background:
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, .12), transparent 28%),
    linear-gradient(135deg, #ffffff, #f8fafc);
  overflow: hidden;
}

.wiki-guide-scene.playing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .10), transparent);
  animation: wikiScan 2.2s linear infinite;
  pointer-events: none;
}

.wiki-guide-line {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 48px;
  height: 8px;
  background: #dbe3ee;
}

.wiki-guide-line i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #2563eb);
  transition: width .45s ease;
}

.wiki-guide-train {
  position: absolute;
  top: 28px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #1d4ed8;
  color: white;
  box-shadow: 0 10px 28px rgba(29, 78, 216, .28);
  transition: left .45s ease;
  animation: wikiPulse 1.8s ease-in-out infinite;
}

.wiki-guide-train .header-icon {
  width: 20px;
  height: 20px;
}

.wiki-guide-scene button {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border: 2px solid #cbd5e1;
  background: white;
  color: #475569;
  font-weight: 1000;
}

.wiki-guide-scene button.done {
  border-color: #22c55e;
  color: #15803d;
}

.wiki-guide-scene button.active {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1d4ed8;
  transform: scale(1.08);
}

.wiki-demo-caption {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  max-width: min(320px, 45%);
  padding: 8px 10px;
  background: rgba(15, 23, 42, .86);
  color: white;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .2);
}

.wiki-guide-card {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dbe3ee;
  background: white;
  animation: wikiSlide .28s ease;
}

.wiki-guide-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 1000;
}

.wiki-guide-card h4 {
  margin: 0 0 6px;
  font-size: 20px;
  color: #0f172a;
}

.wiki-guide-card p {
  margin: 0;
  color: #334155;
  line-height: 1.55;
}

.wiki-practice {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}

.wiki-practice summary {
  cursor: pointer;
  color: #1d4ed8;
  font-weight: 1000;
}

.wiki-practice p {
  margin: 10px 0 0;
  color: #243247;
}

.wiki-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.wiki-media-item {
  margin: 0;
  overflow: hidden;
  border: 1px solid #dbe3ee;
  background: #fff;
}

.wiki-media-item img,
.wiki-media-item video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  background: #0f172a;
}

.wiki-media-item figcaption {
  padding: 10px 12px;
  color: #475569;
  font-weight: 800;
}

.wiki-editor {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
}

.wiki-editor-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.wiki-editor-head h4,
.wiki-media-editor strong {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
}

.wiki-editor-head p {
  margin: 4px 0 0;
  color: #475569;
  font-weight: 700;
}

.wiki-editor-grid,
.wiki-media-add {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 12px;
}

.wiki-editor-grid .admin-field:last-child {
  grid-column: 1 / -1;
}

.wiki-editor-list,
.wiki-media-editor {
  display: grid;
  gap: 10px;
}

.wiki-editor-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr 38px;
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid #dbe3ee;
  background: #fff;
}

.wiki-editor-media-row {
  grid-template-columns: 110px minmax(180px, 1fr) minmax(160px, 260px) 38px;
}

.wiki-editor-row input,
.wiki-editor-row select,
.wiki-editor-row textarea,
.wiki-media-add input,
.wiki-media-add select,
.wiki-editor .admin-field input,
.wiki-editor .admin-field textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  padding: 9px 10px;
  font: inherit;
}

.wiki-editor-row textarea,
.wiki-editor .admin-field textarea {
  resize: vertical;
  min-height: 92px;
}

.wiki-media-add {
  grid-template-columns: 110px minmax(180px, 1fr) minmax(180px, 1fr) minmax(160px, 260px) auto;
  align-items: center;
}

body.view-controlsonly .topbar {
  grid-template-columns: minmax(190px, max-content) minmax(160px, 1fr) minmax(0, auto) !important;
  grid-template-areas: none !important;
  min-height: 64px !important;
  padding: 10px 14px !important;
  align-items: center !important;
}

body.view-controlsonly .top-actions {
  grid-area: actions;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  max-width: none;
}

body.view-controlsonly .time-controls {
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

body.view-controlsonly .global-search {
  max-width: none !important;
}

body.view-controlsonly .time-button,
body.view-controlsonly .game-clock,
body.view-controlsonly .money {
  min-height: 34px;
  padding-inline: 10px;
}

body.view-controlsonly .icon-action {
  width: 40px;
  padding: 0;
}

body.dark-mode .invoice-table tr.invoice-overdue td {
  background: #3f1d24;
}

body.dark-mode .wiki-layout,
body.dark-mode .wiki-content,
body.dark-mode .wiki-steps section,
body.dark-mode .wiki-hero,
body.dark-mode .wiki-html-frame {
  background: #111827;
  border-color: #334155;
}

body.dark-mode .wiki-html-editor {
  background: #172235;
  border-color: #3b82f6;
}

body.dark-mode .wiki-html-editor-head h3 {
  color: #f8fafc;
}

body.dark-mode .wiki-html-editor-head span {
  color: #cbd5e1;
}

body.dark-mode #wikiHtmlEditor {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}

body.dark-mode .wiki-nav {
  background: #0f172a;
  border-color: #334155;
}

body.dark-mode .wiki-nav button {
  color: #cbd5e1;
}

body.dark-mode .wiki-nav button.active,
body.dark-mode .wiki-nav button:hover {
  background: #172235;
  border-color: #60a5fa;
  color: #dbeafe;
}

body.dark-mode .wiki-hero h3,
body.dark-mode .wiki-text h4,
body.dark-mode .wiki-text p,
body.dark-mode .wiki-guide-card h4,
body.dark-mode .wiki-guide-card p {
  color: #f8fafc;
}

body.dark-mode .wiki-hero p {
  color: #cbd5e1;
}

body.dark-mode .wiki-progress span,
body.dark-mode .wiki-practice p {
  color: #cbd5e1;
}

body.dark-mode .wiki-guide-scene,
body.dark-mode .wiki-text section,
body.dark-mode .wiki-guide-card,
body.dark-mode .wiki-media-item,
body.dark-mode .wiki-editor-row {
  background: #111827;
  border-color: #334155;
}

body.dark-mode .wiki-editor {
  background: #172235;
  border-color: #3b82f6;
}

body.dark-mode .wiki-editor-head h4,
body.dark-mode .wiki-media-editor strong,
body.dark-mode .wiki-media-item figcaption {
  color: #f8fafc;
}

body.dark-mode .wiki-editor-head p {
  color: #cbd5e1;
}

body.dark-mode .wiki-editor-row input,
body.dark-mode .wiki-editor-row select,
body.dark-mode .wiki-editor-row textarea,
body.dark-mode .wiki-media-add input,
body.dark-mode .wiki-media-add select,
body.dark-mode .wiki-editor .admin-field input,
body.dark-mode .wiki-editor .admin-field textarea {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}

body.dark-mode .wiki-guide-scene button {
  background: #172235;
  border-color: #475569;
  color: #cbd5e1;
}

body.dark-mode .wiki-guide-scene button.active {
  background: #1e3a8a;
  border-color: #60a5fa;
  color: #eff6ff;
}

body.dark-mode .wiki-demo-caption {
  background: rgba(219, 234, 254, .92);
  color: #0f172a;
}

body.dark-mode .wiki-practice {
  background: #0f1f38;
  border-color: #2563eb;
}

@media (max-width: 1100px) {
  body.view-controlsonly .topbar {
    grid-template-columns: auto minmax(160px, 1fr) !important;
    grid-template-areas:
      "brand search"
      "actions actions" !important;
  }

  body.view-controlsonly .top-actions {
    max-width: 100%;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  body.view-controlsonly .time-controls {
    flex-wrap: wrap !important;
  }
}

@keyframes wikiPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes wikiSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wikiScan {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (max-width: 760px) {
  .wiki-layout {
    grid-template-columns: 1fr;
  }

  .wiki-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #dbe3ee;
  }

  .wiki-editor-head,
  .wiki-editor-grid,
  .wiki-editor-row,
  .wiki-editor-media-row,
  .wiki-media-add {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wiki-editor-head {
    align-items: stretch;
  }
}

/* Keep the top header geometry stable. */
body.view-controlsonly .topbar {
  grid-template-columns: minmax(190px, max-content) minmax(160px, 1fr) minmax(0, auto) !important;
  grid-template-areas: none !important;
  min-height: 64px !important;
  align-items: center !important;
}

body.view-controlsonly .brand,
body.view-controlsonly .global-search,
body.view-controlsonly .top-actions {
  grid-area: auto !important;
}

body.view-controlsonly .top-actions {
  justify-self: end !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

body.view-controlsonly .time-controls {
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* App notifications are toasts on the right edge, not a separate window. */
.map-notification {
  position: fixed !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  bottom: 18px !important;
  width: min(420px, calc(100vw - 28px)) !important;
  z-index: 5000 !important;
}

.map-toast.show {
  transform: translateX(0) !important;
}

body.view-maponly .map-notification {
  top: auto !important;
  bottom: 18px !important;
}

/* Compact course participant picker. */
#personnelOverviewModal #trainingPersonSelect.training-checkbox-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  align-content: start !important;
  align-items: start !important;
  gap: 8px !important;
}

#personnelOverviewModal #trainingPersonSelect .training-person-check {
  min-height: 56px !important;
  height: auto !important;
  padding: 8px 10px !important;
  grid-template-columns: 22px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  gap: 8px !important;
}

#personnelOverviewModal #trainingPersonSelect .training-person-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

#personnelOverviewModal #trainingPersonSelect .training-person-check strong,
#personnelOverviewModal #trainingPersonSelect .training-person-check small {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#personnelOverviewModal #trainingPersonSelect .training-person-info {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}

/* Compact control header keeps the same geometry as the normal view. */
body.view-controlsonly .topbar {
  height: 64px !important;
  min-height: 64px !important;
  grid-template-columns: minmax(220px, 280px) minmax(260px, 1fr) auto !important;
  grid-template-areas: none !important;
  gap: 18px !important;
  padding: 8px 14px !important;
  align-items: center !important;
}

body.view-controlsonly .brand,
body.view-controlsonly .global-search,
body.view-controlsonly .top-actions {
  grid-area: auto !important;
  grid-column: auto !important;
}

body.view-controlsonly .brand {
  min-width: 0 !important;
}

body.view-controlsonly .global-search {
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 260px !important;
  max-width: 520px !important;
}

body.view-controlsonly .top-actions {
  display: flex !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-height: 48px !important;
  max-width: none !important;
}

body.view-controlsonly .time-controls {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

body.view-controlsonly .time-button,
body.view-controlsonly .game-clock,
body.view-controlsonly .money {
  min-height: 34px !important;
}

@media (max-width: 1180px) {
  body.view-controlsonly .topbar {
    height: auto !important;
    grid-template-columns: minmax(180px, max-content) minmax(180px, 1fr) !important;
    grid-template-areas:
      "brand search"
      "actions actions" !important;
  }

  body.view-controlsonly .top-actions {
    grid-area: actions !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }

  body.view-controlsonly .time-controls {
    flex-wrap: wrap !important;
  }
}/* Modern read-only activity detail view */
#activityModal.activity-view-mode .activity-modal-card {
  width: min(1180px, calc(100vw - 48px)) !important;
  height: min(820px, calc(100vh - 56px)) !important;
  max-height: calc(100vh - 56px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}#activityModal.activity-view-mode .modal-head h2 {
  line-height: 1.15 !important;
}

#activityModal.activity-view-mode .modal-activity-form {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  padding: 14px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}

#activityModal.activity-view-mode .activity-form-grid {
  display: none !important;
}

#activityModal.activity-view-mode .activity-trip-preview {
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(340px, .95fr) !important;
  gap: 14px !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#activityModal.activity-view-mode .activity-trip-map {
  min-height: 0 !important;
  height: 100% !important;
  border: 1px solid #dbe3ee !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .08) !important;
}

#activityModal.activity-view-mode #activityTripInfo.route-preview {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 14px !important;
  border: 1px solid #dbe3ee !important;
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .08) !important;
}

.activity-trip-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #dbe3ee !important;
}

.activity-trip-summary > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

.activity-trip-summary > div:first-child {
  grid-column: 1 / -1 !important;
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

.activity-trip-summary span {
  color: #64748b !important;
  font-size: 12px !important;
}

.activity-trip-summary strong {
  color: #0f172a !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#activityModal.activity-view-mode .activity-trip-history {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin-top: 12px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  overflow: auto !important;
}

.activity-trip-history-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 6px 2px 8px !important;
  background: #ffffff !important;
}

.activity-trip-history-head strong {
  color: #0f172a !important;
  font-size: 14px !important;
}

.activity-trip-history-head span {
  color: #64748b !important;
  font-size: 12px !important;
}

#activityModal.activity-view-mode .activity-trip-stop {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid #dbe3ee !important;
  background: #f8fafc !important;
}

.activity-trip-dot {
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.activity-trip-stop-main {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.activity-trip-stop-main strong {
  overflow: hidden !important;
  color: #0f172a !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.activity-trip-times {
  display: grid !important;
  gap: 3px !important;
  justify-items: end !important;
  color: #64748b !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

.activity-trip-times b {
  color: #0f172a !important;
}

#activityModal.activity-view-mode .activity-trip-stop .actual-note {
  color: #b45309 !important;
  font-weight: 800 !important;
}

#activityModal.activity-view-mode .activity-modal-footer {
  grid-template-columns: 1fr !important;
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #dbe3ee !important;
  background: #ffffff !important;
}

#activityModal.activity-view-mode #addActivityToPlan {
  display: none !important;
}

#activityModal.activity-view-mode #activityHint {
  min-height: auto !important;
  margin: 0 !important;
  color: #475569 !important;
  font-weight: 700 !important;
}

body.dark-mode #activityModal.activity-view-mode .modal-activity-form {
  background: #08111f !important;
}

body.dark-mode #activityModal.activity-view-mode #activityTripInfo.route-preview,
body.dark-mode #activityModal.activity-view-mode .activity-modal-footer,
body.dark-mode .activity-trip-history-head {
  background: #101b2d !important;
  border-color: #26364f !important;
}

body.dark-mode #activityModal.activity-view-mode .activity-trip-map,
body.dark-mode #activityModal.activity-view-mode .activity-trip-stop,
body.dark-mode .activity-trip-summary > div {
  background: #0c1626 !important;
  border-color: #26364f !important;
}

body.dark-mode .activity-trip-summary > div:first-child {
  background: #102449 !important;
  border-color: #1d4ed8 !important;
}

body.dark-mode .activity-trip-summary strong,
body.dark-mode .activity-trip-history-head strong,
body.dark-mode .activity-trip-stop-main strong,
body.dark-mode .activity-trip-times b {
  color: #f8fafc !important;
}

@media (max-width: 900px) {#activityModal.activity-view-mode .activity-modal-card {
  width: calc(100vw - 20px) !important;
  height: calc(100vh - 20px) !important;
  max-height: calc(100vh - 20px) !important;
}

  #activityModal.activity-view-mode .activity-trip-preview {
    grid-template-columns: 1fr !important;
    grid-template-rows: 360px minmax(0, 1fr) !important;
  }

  #activityModal.activity-view-mode .activity-trip-stop {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  #activityModal.activity-view-mode .activity-trip-times {
    grid-column: 2 !important;
    justify-items: start !important;
  }
}

/* Profile design switcher */
.profile-design {
  gap: 14px !important;
}

.profile-design > strong {
  font-size: 16px !important;
}

.profile-design-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.profile-design-card {
  width: 118px;
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 10px 8px;
  border: 2px solid transparent;
  background: #f1f5f9;
  color: #1f2937;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.profile-design-card:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
}

.profile-design-card.active {
  border-color: #22c55e;
  background: #dcfce7;
}

.profile-design-card b {
  font-size: 13px;
  line-height: 1.15;
}

.design-preview {
  position: relative;
  width: 92px;
  height: 76px;
  display: block;
  border: 3px solid #b7b7b7;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px #d8d8d8;
}

.design-preview span {
  position: absolute;
  display: block;
  border: 2px solid #b7b7b7;
  background: #f8fafc;
}

.design-preview .preview-top {
  left: 8px;
  right: 8px;
  top: 8px;
  height: 4px;
  border-width: 0;
  background: #b7b7b7;
}

.design-preview-standard .preview-map {
  left: 8px;
  right: 8px;
  top: 22px;
  height: 22px;
}

.design-preview-standard .preview-cell:nth-child(3) {
  left: 8px;
  bottom: 8px;
  width: 23px;
  height: 20px;
}

.design-preview-standard .preview-cell:nth-child(4) {
  left: 34px;
  bottom: 8px;
  width: 23px;
  height: 20px;
}

.design-preview-standard .preview-cell:nth-child(5) {
  right: 8px;
  bottom: 8px;
  width: 23px;
  height: 20px;
}

.design-preview-window .preview-side {
  top: 24px;
  width: 16px;
  height: 36px;
}

.design-preview-window .preview-side.left {
  left: 8px;
}

.design-preview-window .preview-side.right {
  right: 8px;
}

.design-preview-window .preview-map {
  left: 30px;
  right: 30px;
  top: 28px;
  height: 26px;
  border-style: dashed;
}

.design-preview-window .preview-popup {
  left: 35px;
  right: 35px;
  bottom: 7px;
  height: 7px;
  background: #dbeafe;
  border-color: #9ca3af;
}

body.dark-mode .profile-design-card {
  background: #172235;
  color: #e5edf7;
  border-color: #334155;
}

body.dark-mode .profile-design-card.active {
  background: #14351f;
  border-color: #22c55e;
}

body.dark-mode .design-preview {
  background: #0f172a;
  border-color: #64748b;
  box-shadow: inset 0 0 0 1px #26364f;
}

body.dark-mode .design-preview span {
  background: #182232;
  border-color: #64748b;
}

body.dark-mode .design-preview .preview-top {
  background: #64748b;
}

/* Optional window design: planning opens like a centered popup. */
body.ui-window-design #locoPlanningPanel {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(1180px, calc(100vw - 42px)) !important;
  height: min(780px, calc(100vh - 96px)) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1700 !important;
  resize: both !important;
  overflow: hidden !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .35) !important;
}

body.ui-window-design #locoPlanningPanel.hidden-window {
  display: none !important;
}

body.ui-window-design #locoPlanningPanel .panel-head {
  cursor: default !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #dbe3ee !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

body.ui-window-design #locoPlanningPanel .panel-head h2 {
  font-size: 17px !important;
}

body.ui-window-design #locoPlanningPanel .planning-pane.active,
body.ui-window-design #locoPlanningPanel .inline-loco-planner,
body.ui-window-design #locoPlanningPanel .personnel-planner {
  height: 100% !important;
  min-height: 0 !important;
}

body.ui-window-design #locoPlanningPanel .planning-pane.active {
  display: block !important;
}

body.ui-window-design #locoPlanningPanel .inline-loco-planner {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

body.ui-window-design #locoPlanningPanel .personnel-split-layout {
  min-height: 0 !important;
}

body.ui-window-design #locoPlanningPanel .lp-board {
  min-height: 0 !important;
}

body.ui-window-design .window-dock .dock-button[data-window="locoPlanningPanel"] {
  border-color: #22c55e;
}

body.dark-mode.ui-window-design #locoPlanningPanel .panel-head {
  background: linear-gradient(180deg, #111c2f, #0b1220) !important;
  border-color: #26364f !important;
}

body.dark-mode.ui-window-design #locoPlanningPanel {
  box-shadow: 0 30px 90px rgba(0, 0, 0, .58) !important;
}

@media (max-width: 900px) {
  body.ui-window-design #locoPlanningPanel {
    width: calc(100vw - 18px) !important;
    height: calc(100vh - 84px) !important;
  }

  .profile-design-options {
    gap: 10px;
  }
}

/* Fixed dashboard design, inspired by classic browser management games. */
body.ui-window-design {
  overflow: hidden !important;
  background: #f3f4f6 !important;
}

body.ui-window-design .topbar {
  position: relative !important;
  height: 44px !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: auto minmax(220px, 1fr) auto !important;
  gap: 10px !important;
  padding: 4px 14px !important;
  border-bottom: 1px solid #d1d5db !important;
  background: #ffffff !important;
  box-shadow: none !important;
  z-index: 50 !important;
}

body.ui-window-design .brand {
  color: #111827 !important;
  font-size: 14px !important;
}

body.ui-window-design .brand-mark {
  width: 30px !important;
  height: 24px !important;
}

body.ui-window-design .global-search input,
body.ui-window-design .time-button,
body.ui-window-design .game-clock,
body.ui-window-design .money {
  min-height: 28px !important;
  height: 28px !important;
  box-shadow: none !important;
}

body.ui-window-design .top-actions,
body.ui-window-design .time-controls {
  gap: 4px !important;
  flex-wrap: nowrap !important;
}

body.ui-window-design .layout.map-stage {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 1.6fr) minmax(300px, 1fr) minmax(320px, 1fr) minmax(320px, 1fr) !important;
  grid-template-rows: minmax(320px, 52vh) minmax(250px, 1fr) !important;
  grid-template-areas:
    "map map map contracts"
    "depot sites schedules planning" !important;
  gap: 10px !important;
  height: calc(100vh - 44px) !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
  overflow: hidden !important;
  background: #f3f4f6 !important;
}

body.ui-window-design #map {
  grid-area: map !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 1px solid #a3a3a3 !important;
  z-index: 1 !important;
}

body.ui-window-design #contractsPanel {
  grid-area: contracts !important;
}

body.ui-window-design #depotPanel {
  grid-area: depot !important;
}

body.ui-window-design #sitesPanel {
  grid-area: sites !important;
}

body.ui-window-design #overviewPanel {
  grid-area: schedules !important;
}

body.ui-window-design #locoPlanningPanel {
  grid-area: planning !important;
}

body.ui-window-design .floating-window,
body.ui-window-design #locoPlanningPanel {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  transform: none !important;
  resize: none !important;
  overflow: hidden !important;
  border: 1px solid #b8b8b8 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  z-index: 2 !important;
}

body.ui-window-design .floating-window.hidden-window,
body.ui-window-design #locoPlanningPanel.hidden-window {
  display: grid !important;
}

body.ui-window-design #depotPanel,
body.ui-window-design #sitesPanel,
body.ui-window-design #locoPlanningPanel {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

body.ui-window-design #contractsPanel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

body.ui-window-design .panel-head {
  min-height: 36px !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid #c8c8c8 !important;
  background: linear-gradient(#f7f7f7, #e5e5e5) !important;
  color: #222 !important;
  cursor: default !important;
}

body.ui-window-design .panel-head h2 {
  color: #222 !important;
  font-size: 14px !important;
}

body.ui-window-design .panel-head span,
body.ui-window-design .head-actions {
  color: #4b5563 !important;
  font-size: 12px !important;
}

body.ui-window-design .window-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  padding: 6px 8px !important;
  border-bottom: 1px solid #c8c8c8 !important;
  background: #f4f4f4 !important;
}

body.ui-window-design .window-tab,
body.ui-window-design .contract-filter,
body.ui-window-design .dock-button,
body.ui-window-design .primary,
body.ui-window-design .plus-button {
  min-height: 24px !important;
  height: auto !important;
  border: 1px solid #b8b8b8 !important;
  background: linear-gradient(#ffffff, #e5e5e5) !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body.ui-window-design .contract-filter {
  min-height: 24px !important;
  height: 28px !important;
  padding: 0 8px !important;
}

body.ui-window-design #contractsPanel .window-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, max-content) minmax(116px, 1fr) minmax(116px, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
}

body.ui-window-design #contractsPanel .contract-filter {
  width: 100% !important;
}

body.ui-window-design .window-tab.active,
body.ui-window-design .dock-button.active {
  background: linear-gradient(#4ade80, #16a34a) !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

body.ui-window-design .schedule-list,
body.ui-window-design .contract-list,
body.ui-window-design .depot-layout,
body.ui-window-design .radio-log,
body.ui-window-design .planning-pane.active {
  min-height: 0 !important;
  overflow: auto !important;
}

body.ui-window-design .schedule-card,
body.ui-window-design .contract-card,
body.ui-window-design .loco {
  margin: 6px 8px !important;
  border: 1px solid #d7d7d7 !important;
  border-left: 4px solid #2563eb !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .depot-row {
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
}

body.ui-window-design #locoPlanningPanel .panel-head {
  grid-row: 1 !important;
}

body.ui-window-design #locoPlanningPanel .planning-pane {
  min-height: 0 !important;
}

body.ui-window-design #locoPlanningPanel .inline-loco-planner,
body.ui-window-design #locoPlanningPanel .personnel-planner {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

body.ui-window-design #locoPlanningPanel .lp-board,
body.ui-window-design #locoPlanningPanel .personnel-split-layout {
  min-height: 0 !important;
}

body.ui-window-design .window-dock {
  display: none !important;
}

body.ui-window-design .map-view-header {
  display: none !important;
}

body.ui-window-design .map-notification {
  top: auto !important;
  bottom: 18px !important;
}

body.dark-mode.ui-window-design {
  background: #0b1220 !important;
}

body.dark-mode.ui-window-design .topbar,
body.dark-mode.ui-window-design .layout.map-stage {
  background: #0b1220 !important;
}

body.dark-mode.ui-window-design .floating-window,
body.dark-mode.ui-window-design #locoPlanningPanel {
  background: #111827 !important;
  border-color: #334155 !important;
}

body.dark-mode.ui-window-design .panel-head,
body.dark-mode.ui-window-design #locoPlanningPanel .panel-head,
body.dark-mode.ui-window-design .window-tabs {
  background: #172235 !important;
  border-color: #334155 !important;
  color: #e5edf7 !important;
}

body.dark-mode.ui-window-design .panel-head h2,
body.dark-mode.ui-window-design .brand {
  color: #f8fafc !important;
}

body.dark-mode.ui-window-design .schedule-card,
body.dark-mode.ui-window-design .contract-card,
body.dark-mode.ui-window-design .loco {
  background: #182232 !important;
  border-color: #334155 !important;
  color: #e5edf7 !important;
}

body.dark-mode.ui-window-design .contract-filter,
body.dark-mode.ui-window-design #contractsPanel .contract-filter {
  background: #0f172a !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

body.dark-mode.ui-window-design .contract-filter option,
body.dark-mode.ui-window-design #contractsPanel .contract-filter option {
  background: #0f172a !important;
  color: #f8fafc !important;
}

@media (max-width: 1180px) {
  body.ui-window-design .layout.map-stage {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 44vh minmax(220px, 1fr) minmax(220px, 1fr) !important;
    grid-template-areas:
      "map map"
      "contracts schedules"
      "depot planning" !important;
  }
}

@media (max-width: 760px) {
  body.ui-window-design {
    overflow: auto !important;
  }

  body.ui-window-design .layout.map-stage {
    height: auto !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 360px 320px 320px 320px 360px !important;
    grid-template-areas:
      "map"
      "contracts"
      "schedules"
      "depot"
      "planning" !important;
  }
}

/* Final fixed-dashboard corrections */
.design-window-only {
  display: none !important;
}

body.ui-window-design .design-window-only {
  display: inline-grid !important;
}

body.ui-window-design:not(.view-maponly) .topbar {
  height: auto !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: minmax(190px, max-content) minmax(160px, 1fr) minmax(0, auto) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, #991b1b 0%, #b91c1c 55%, #111827 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 18px 44px rgba(127, 29, 29, .28) !important;
  z-index: 980 !important;
}

body.ui-window-design .brand {
  color: #ffffff !important;
  font-size: 16px !important;
}

body.ui-window-design .brand-mark {
  width: 34px !important;
  height: 28px !important;
}

body.ui-window-design .global-search input,
body.ui-window-design .time-button,
body.ui-window-design .game-clock,
body.ui-window-design .money {
  min-height: 36px !important;
  height: 36px !important;
}

body.ui-window-design .top-actions,
body.ui-window-design .time-controls {
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body.ui-window-design .layout.map-stage {
  grid-template-columns: minmax(360px, 1.3fr) minmax(300px, 1fr) minmax(320px, 1fr) minmax(320px, 1fr) !important;
  grid-template-rows: minmax(360px, 56vh) minmax(260px, 1fr) !important;
  grid-template-areas:
    "map map map contracts"
    "depot sites schedules contracts" !important;
  height: calc(100vh - 64px) !important;
}

body.ui-window-design #contractsPanel {
  grid-area: contracts !important;
}

body.ui-window-design #locoPlanningPanel {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(1180px, calc(100vw - 42px)) !important;
  height: min(780px, calc(100vh - 96px)) !important;
  max-width: none !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  transform: translate(-50%, -50%) !important;
  resize: both !important;
  overflow: hidden !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .45) !important;
  z-index: 2100 !important;
}

body.ui-window-design #locoPlanningPanel.hidden-window {
  display: none !important;
}

body.ui-window-design #locoPlanningPanel .panel-head {
  min-height: 46px !important;
  padding: 10px 12px !important;
}

body.ui-window-design .window-dock .dock-button[data-window="locoPlanningPanel"] {
  display: none !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) .topbar {
  background: linear-gradient(135deg, #111827 0%, #7f1d1d 58%, #0f172a 100%) !important;
}

@media (max-width: 1180px) {
  body.ui-window-design {
    overflow: auto !important;
  }

  body.ui-window-design .layout.map-stage {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 48vh minmax(240px, 1fr) minmax(240px, 1fr) !important;
    grid-template-areas:
      "map map"
      "depot sites"
      "schedules contracts" !important;
    height: auto !important;
    min-height: calc(100vh - 64px) !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  body.ui-window-design .layout.map-stage {
    height: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 360px 320px 320px 320px 320px !important;
    grid-template-areas:
      "map"
      "depot"
      "sites"
      "schedules"
      "contracts" !important;
  }

  body.ui-window-design #locoPlanningPanel {
    width: calc(100vw - 18px) !important;
    height: calc(100vh - 84px) !important;
  }
}

/* Popup stacking and planning popup sizing in dashboard design */
body.ui-window-design #locoPlanningPanel {
  width: 95vw !important;
  height: 95vh !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
  z-index: 3000 !important;
}

body.ui-window-design .modal.open,
body.ui-window-design #accountPanel.modal.open {
  z-index: 6500 !important;
}body.ui-window-design .modal-card {
  overflow: hidden !important;
}body.dark-mode.ui-window-design .modal-card {
  color: #e5edf7 !important;
}

body.ui-window-design #locoPlanningPanel .planning-popup-close {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin-left: 4px !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

#locoPlanningPanel .panel-head {
  gap: 12px;
}

#locoPlanningPanel #planningTitle {
  min-width: 94px;
  padding: 5px 8px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(15, 23, 42, .06);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;
  text-align: center;
}

#locoPlanningPanel .head-actions {
  display: grid;
  grid-template-columns: 210px 48px 58px 132px 132px 34px 136px 34px 58px 42px 34px minmax(150px, 170px) 34px 34px;
  align-items: center;
  justify-content: end;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.planning-tool-select {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.planning-tool-select span {
  white-space: nowrap;
}

.planning-tool-select select {
  min-height: 30px;
  font-weight: 800;
}

body.ui-window-design .planning-tool-select {
  width: 210px;
  min-width: 190px;
}

body.ui-window-design .planning-tool-select select {
  min-height: 26px !important;
  height: 28px !important;
}

body.ui-window-design #locoPlanningPanel .head-actions {
  grid-template-columns: 210px 48px 58px 132px 132px 34px 136px 34px 58px 42px 34px minmax(150px, 170px) 34px 34px !important;
  gap: 6px !important;
}

#locoPlanningPanel #activityStats,
#locoPlanningPanel #personnelStats {
  display: none !important;
}

#locoPlanningPanel .planning-tool-select { grid-column: 1; }
#locoPlanningPanel #plannerDayView { grid-column: 2; }
#locoPlanningPanel #plannerWeekView { grid-column: 3; }
#locoPlanningPanel .planner-range-control[title="Zeitraum Anfang"] { grid-column: 4; }
#locoPlanningPanel .planner-range-control[title="Zeitraum Ende"] { grid-column: 5; }
#locoPlanningPanel #prevPlannerDay { grid-column: 6; }
#locoPlanningPanel #plannerDayLabel { grid-column: 7; text-align: center; white-space: nowrap; }
#locoPlanningPanel #nextPlannerDay { grid-column: 8; }
#locoPlanningPanel #jumpToNow { grid-column: 9; }
#locoPlanningPanel #openPlanningMultipleTractionModal { grid-column: 10; }
#locoPlanningPanel #openActivityModal { grid-column: 11; }
#locoPlanningPanel #personnelRoleFilter { grid-column: 12; }
#locoPlanningPanel #refreshPersonnelOffers { grid-column: 13; }
#locoPlanningPanel #closePlanningPopup { grid-column: 14; }

@media (max-width: 1180px) {
  #locoPlanningPanel .head-actions,
  body.ui-window-design #locoPlanningPanel .head-actions {
    grid-template-columns: 190px 44px 54px 120px 120px 32px 116px 32px 54px 40px 32px minmax(130px, 1fr) 32px 32px !important;
  }
}

body.ui-window-design .search-results,
body.ui-window-design .picker-results {
  z-index: 6600 !important;
}

body.ui-window-design .activity-context-menu {
  z-index: 12000 !important;
}

body.ui-window-design .map-notification {
  z-index: 6700 !important;
}

body.ui-window-design .profile-design-card[data-design="standard"] .design-preview {
  outline: 2px solid rgba(37, 99, 235, .18);
}

body.ui-window-design .profile-design-card[data-design="window"] .design-preview {
  outline: 2px solid rgba(34, 197, 94, .22);
}

@media (max-width: 760px) {
  body.ui-window-design #locoPlanningPanel {
    width: 95vw !important;
    height: 95vh !important;
  }
}

/* Compact modern profile popup */
#profileModal.open {
  padding: 18px !important;
}#profileModal .profile-card {
  width: min(880px, calc(100vw - 36px)) !important;
  height: auto !important;
  max-width: min(880px, calc(100vw - 36px)) !important;
  max-height: min(88vh, 820px) !important;
  overflow: hidden !important;
}

#profileModal .profile-grid {
  max-height: calc(min(88vh, 820px) - 68px) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 14px !important;
  overflow: auto !important;
  background: #f8fafc !important;
}

#profileModal .profile-box {
  gap: 8px !important;
  padding: 14px !important;
  border: 1px solid #dbe3ee !important;
  border-left: 4px solid #2563eb !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}

#profileModal .profile-box strong {
  color: #0f172a !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

#profileModal .profile-box span:not(.password-reveal):not(.design-preview):not(.preview-top):not(.preview-map):not(.preview-cell):not(.preview-side):not(.preview-popup) {
  display: block !important;
  padding: 7px 9px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 13px !important;
}

#profileModal .profile-box.wide {
  grid-column: 1 / -1 !important;
}

#profileModal .profile-box.wide:not(.profile-password):not(.profile-danger):not(.profile-design) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#profileModal .profile-design {
  border-left-color: #22c55e !important;
}

#profileModal .profile-design-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
  gap: 12px !important;
}

#profileModal .profile-design-card {
  width: auto !important;
  min-height: 132px !important;
  align-content: center !important;
  padding: 12px !important;
  background: #f8fafc !important;
}

#profileModal .profile-design-card.active {
  background: #dcfce7 !important;
}

#profileModal .profile-design-card b {
  font-size: 14px !important;
}

#profileModal .profile-password {
  border-left-color: #3b82f6 !important;
}

#profileModal .profile-password-grid {
  grid-template-columns: 1fr 1fr !important;
}

#profileModal .profile-password-grid .primary {
  grid-column: 1 / -1 !important;
}

#profileModal .profile-danger {
  border-color: #fecaca !important;
  border-left-color: #ef4444 !important;
  background: #fff7f7 !important;
}

#profileModal .profile-delete-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body.dark-mode #profileModal .profile-box span:not(.password-reveal):not(.design-preview):not(.preview-top):not(.preview-map):not(.preview-cell):not(.preview-side):not(.preview-popup),
body.dark-mode #profileModal .profile-design-card {
  background: #0f172a !important;
  color: #cbd5e1 !important;
}

body.dark-mode #profileModal .profile-design-card.active {
  background: #14351f !important;
}

@media (max-width: 760px) {#profileModal .profile-card {
  width: calc(100vw - 18px) !important;
  max-width: calc(100vw - 18px) !important;
  max-height: calc(100vh - 18px) !important;
}

  #profileModal .profile-grid,
  #profileModal .profile-box.wide:not(.profile-password):not(.profile-danger):not(.profile-design),
  #profileModal .profile-design-options,
  #profileModal .profile-password-grid,
  #profileModal .profile-delete-row {
    grid-template-columns: 1fr !important;
  }
}

body.ui-window-design .layout.map-stage {
  grid-template-columns: minmax(340px, 1.45fr) repeat(3, minmax(260px, 1fr)) !important;
  grid-template-rows: minmax(340px, 54vh) minmax(260px, 1fr) !important;
  grid-template-areas:
    "map map map contracts"
    "depot sites schedules contracts" !important;
  align-items: stretch !important;
}

body.ui-window-design #sitesPanel {
  grid-area: sites !important;
}

body.ui-window-design .sites-layout,
body.ui-window-design .depot-layout {
  min-height: 0 !important;
  overflow: auto !important;
}

body.ui-window-design #contractsPanel .contract-list {
  padding: 6px 8px !important;
}

body.ui-window-design #contractsPanel .contract-card {
  display: grid !important;
  gap: 9px !important;
  margin: 6px 0 10px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

body.ui-window-design #contractsPanel .contract-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: start !important;
}

body.ui-window-design #contractsPanel .accept-contract {
  width: 100% !important;
  min-height: 30px !important;
}

#contractsPanel,
body.ui-window-design #contractsPanel {
  min-width: 0 !important;
  overflow: hidden !important;
}

#contractsPanel .window-tabs,
body.ui-window-design #contractsPanel .window-tabs {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#contractsPanel .window-tab,
body.ui-window-design #contractsPanel .window-tab {
  min-width: 0 !important;
  padding-inline: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#contractsPanel .contract-filter,
body.ui-window-design #contractsPanel .contract-filter {
  grid-column: span 3 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#contractsPanel .window-tab,
body.ui-window-design #contractsPanel .window-tab {
  grid-column: span 2 !important;
}

#contractsPanel .contract-list,
body.ui-window-design #contractsPanel .contract-list {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

#contractsPanel .contract-card,
body.ui-window-design #contractsPanel .contract-card {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#contractsPanel .contract-title,
body.ui-window-design #contractsPanel .contract-title {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#contractsPanel .contract-title b,
body.ui-window-design #contractsPanel .contract-title b {
  justify-self: start !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#contractsPanel .contract-route,
body.ui-window-design #contractsPanel .contract-route {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  min-width: 0 !important;
}

/* Fahrplan bestellen: clearer form and pre-route overview */
.order-modal-card .order-box {
  grid-template-columns: minmax(430px, 520px) minmax(360px, 1fr) minmax(260px, 340px);
}

.order-modal-card .order-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0 8px 8px 0;
  overflow: auto;
}

.order-modal-card .order-form > label,
.order-modal-card .order-stop-quick,
.order-modal-card .order-stops-box,
.order-modal-card .order-details-box,
.order-modal-card .order-actions {
  grid-column: 1 / -1;
}

.order-modal-card #routePreview {
  display: none !important;
}

.order-modal-card .order-form > label.half {
  grid-column: 1 / -1;
}

.order-modal-card .order-form > label.full {
  grid-column: 1 / -1;
}

.order-modal-card .order-form .order-stop-quick {
  width: 100%;
  max-width: none;
  flex: none;
}

.order-modal-card .order-form > label,
.order-modal-card .order-details-box {
  padding: 10px;
  border: 1px solid #dbe3ed;
  background: #ffffff;
}

.order-modal-card .order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.order-modal-card .order-form label {
  min-width: 0;
}

.order-modal-card #startResults,
.order-modal-card #endResults,
.order-modal-card #orderStopQuickResults,
.order-modal-card #stopResults,
.order-modal-card #locoClassResults {
  width: 100%;
  max-height: 176px;
  z-index: 90;
  margin-top: 0;
}

.order-modal-card .result {
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.order-modal-card .result:hover {
  background: #f8fafc;
}

.order-modal-card .result span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-side-overview {
  grid-column: 2 / -1;
  grid-row: 1 / 2;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #d4dbe6;
  background: #f7f7f7;
  overflow: hidden;
}

.order-side-overview.hidden-control {
  display: none !important;
}

.order-route-view.hidden-control,
.order-timeline-panel.hidden-control {
  display: none !important;
}

#orderModal .planning-side-locos,
#orderModal .planning-side-contracts {
  padding: 10px;
}

@media (max-width: 1180px) {
  .order-side-overview {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .order-modal-card .order-form,
  .order-modal-card .order-detail-grid {
    grid-template-columns: 1fr;
  }

  .order-modal-card .order-form > label.half {
    grid-column: 1 / -1;
  }
}

.shop-intro-alert,
.shop-category-info {
  padding: 12px 14px;
  border: 1px solid #9bd2ef;
  background: #cbe9f7;
  color: #246b8a;
  font-size: 14px;
}

#shopModal .shop-switch {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#shopModal .shop-tab {
  min-width: 118px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #d5d5d5;
  border-right-width: 0;
  background: linear-gradient(#ffffff, #f3f3f3);
  color: #0b63b6;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

#shopModal .shop-tab:last-child {
  border-right-width: 1px;
}

#shopModal .shop-tab.active {
  border-color: #d7262f;
  background: #d9232e;
  color: #ffffff;
  box-shadow: none;
}

#shopModal .cargo-icons {
  min-height: 28px;
}

#shopModal .shop-info-button {
  top: 12px;
  right: 12px;
  width: 28px;
  min-height: 28px;
  background: #ffffff;
  box-shadow: none;
}

/* Dashboard planning popup side rail */
#planningSidePanel {
  display: none;
}

body.ui-window-design #locoPlanningPanel {
  grid-template-columns: minmax(0, 5fr) minmax(180px, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0 !important;
}

body.ui-window-design #locoPlanningPanel .panel-head {
  grid-column: 1 / -1 !important;
}

body.ui-window-design #locoPlanningPanel .planning-pane {
  grid-column: 1 / 2 !important;
  grid-row: 2 / 3 !important;
  min-width: 0 !important;
}

body.ui-window-design #planningSidePanel {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid #c8c8c8;
  background: #f7f7f7;
  overflow: hidden;
}

.planning-side-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 8px;
  border-bottom: 1px solid #d4d4d4;
}

.planning-side-controls select,
.planning-side-controls input,
.planning-side-order-button {
  width: 100%;
  min-height: 30px;
  border: 1px solid #bfc7d2;
  background: #fff;
  color: #0f172a;
  padding: 0 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.planning-side-activity-filter[hidden] {
  display: none !important;
}

.planning-side-order-button {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}

.planning-side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid #d4d4d4;
}

.planning-side-tab {
  min-height: 30px;
  border: 1px solid #bfc7d2;
  background: linear-gradient(#ffffff, #eeeeee);
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

.planning-side-tab.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}

.planning-side-pane {
  display: none;
  min-height: 0;
  overflow: hidden;
}

.planning-side-pane.active {
  display: block;
}


/* assets/css/app/chunk-05.css */

.planning-side-locos,
.planning-side-contracts,
.planning-side-list {
  height: 100%;
  overflow: auto;
  padding: 8px;
}

.planning-side-loco,
.planning-side-contract {
  width: 100%;
  display: grid;
  gap: 3px;
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid #d4dbe6;
  border-left: 3px solid #2563eb;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
}

.planning-side-contract-card {
  margin-bottom: 8px;
  border: 1px solid #d4dbe6;
  border-left: 3px solid #2563eb;
  background: #ffffff;
  overflow: hidden;
}

.planning-side-contract-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.planning-side-contract-row > .planning-side-contract {
  margin-bottom: 0;
  border: 0;
  border-left: 0;
  background: transparent;
}

.planning-side-assistant-button {
  width: 40px;
  min-height: 40px;
  margin: 7px 7px 7px 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid #15803d;
  border-radius: 5px;
  background: #16a34a;
  color: #ffffff;
  cursor: pointer;
  font-size: 18px;
}

.planning-side-assistant-button:hover,
.planning-side-assistant-button:focus-visible {
  background: #15803d;
  border-color: #166534;
}

.planning-side-stop-details {
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.planning-side-stop-details summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  color: #1e3a8a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.planning-side-stop-table-wrap {
  max-height: 190px;
  overflow: auto;
  padding: 0 8px 8px;
}

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

.planning-side-stop-table th,
.planning-side-stop-table td {
  padding: 6px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.planning-side-stop-table th {
  color: #475569;
  font-weight: 900;
  text-transform: uppercase;
}

.planning-side-stop-table td:last-child {
  white-space: nowrap;
  font-weight: 900;
}

.planning-side-loco {
  border-left-color: #0f766e;
}

.planning-side-loco.running {
  border-left-color: #dc2626;
}

.planning-side-schedule {
  border-left-color: #7c3aed;
}

.planning-side-schedule.running {
  border-left-color: #dc2626;
}

.planning-side-track {
  border-left-color: #0f766e;
}

.planning-side-track.running {
  border-left-color: #14b8a6;
}

.planning-side-track-empty {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #b7c7d8;
  background: #f8fafc;
}

.planning-side-activity {
  cursor: grab;
  border-left-width: 4px;
}

.planning-side-activity:active {
  cursor: grabbing;
}

.planning-side-wagon {
  width: 100%;
  display: grid;
  gap: 7px;
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid #d4dbe6;
  border-left: 3px solid #f59e0b;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
}

.planning-side-wagon-head {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.planning-side-wagon-head strong,
.planning-side-wagon-head span,
.planning-side-wagon > small,
.planning-side-wagon-event b,
.planning-side-wagon-event span,
.planning-side-wagon-event small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-side-wagon-head strong {
  font-size: 12px;
}

.planning-side-wagon-head span,
.planning-side-wagon > small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.planning-side-wagon-events {
  display: grid;
  gap: 5px;
}

.planning-side-wagon-event {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #2563eb;
  background: #f8fafc;
}

.planning-side-wagon-event.lp-shunt { border-left-color: #f59e0b; }
.planning-side-wagon-event.lp-cargo { border-left-color: #16a34a; }
.planning-side-wagon-event.lp-inspection { border-left-color: #7c3aed; }
.planning-side-wagon-event.lp-brake { border-left-color: #0ea5e9; }
.planning-side-wagon-event.lp-parking { border-left-color: #64748b; }

.planning-side-wagon-event b {
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
}

.planning-side-wagon-event span,
.planning-side-wagon-event small {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.planning-side-wagon-empty {
  padding: 8px;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.planning-side-loco strong,
.planning-side-loco span,
.planning-side-loco small,
.planning-side-contract strong,
.planning-side-contract span,
.planning-side-contract small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planning-side-loco strong,
.planning-side-contract strong {
  font-size: 12px;
}

.planning-side-loco span,
.planning-side-loco small,
.planning-side-contract span,
.planning-side-contract small {
  color: #64748b;
  font-size: 11px;
}

.personnel-open-section,
.car-open-section,
#personnelSplitHandle {
  display: none !important;
}

#personnelSplitLayout {
  grid-template-rows: minmax(0, 1fr) !important;
}

@media (max-width: 980px) {
  body.ui-window-design #locoPlanningPanel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ui-window-design #planningSidePanel {
    display: none;
  }
}

@media (max-width: 1320px) {
  body.ui-window-design .layout.map-stage {
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
    grid-template-rows: minmax(320px, 44vh) repeat(2, minmax(240px, 1fr)) !important;
    grid-template-areas:
      "map map"
      "depot sites"
      "schedules contracts" !important;
  }
}

@media (max-width: 760px) {
  body.ui-window-design {
    overflow: auto !important;
  }

  body.ui-window-design .layout.map-stage {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 360px repeat(4, minmax(260px, auto)) !important;
    grid-template-areas:
      "map"
      "depot"
      "sites"
      "schedules"
      "contracts" !important;
    height: auto !important;
    overflow: visible !important;
  }
}

#adminEditModal .admin-edit-card {
  width: min(900px, calc(100vw - 48px)) !important;
  height: auto !important;
  max-height: min(820px, calc(100vh - 56px)) !important;
}

#adminFuelModal .admin-fuel-card {
  width: min(920px, calc(100vw - 48px)) !important;
  height: auto !important;
  max-height: min(760px, calc(100vh - 56px)) !important;
}

#adminEditModal .admin-editor,
#adminFuelModal .admin-fuel-layout {
  max-height: min(690px, calc(100vh - 186px));
  overflow: auto;
}

#adminEditModal .admin-edit-section[data-editor="places"].active {
  min-height: 0 !important;
}

#adminEditModal .admin-edit-section[data-editor="places"] .admin-area-map {
  height: clamp(320px, 44vh, 500px) !important;
  min-height: 320px !important;
}

@media (max-width: 760px) {
  #adminEditModal .admin-edit-card,
  #adminFuelModal .admin-fuel-card {
    width: calc(100vw - 18px) !important;
    max-height: calc(100vh - 18px) !important;
  }
}

.admin-wiki-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.admin-wiki-head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #d7e2ef;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.admin-wiki-head strong,
.admin-wiki-code > span,
.admin-wiki-preview-head span {
  display: block;
  color: #0f172a;
  font-weight: 900;
}

.admin-wiki-head span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.admin-wiki-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 470px;
}

.admin-wiki-file-input {
  display: none;
}

.admin-wiki-body {
  display: grid;
  grid-template-columns: minmax(420px, 1.12fr) 10px minmax(360px, .88fr);
  gap: 8px;
  min-height: 0;
}

.admin-wiki-code,
.admin-wiki-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border: 1px solid #d7e2ef;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

.admin-wiki-resizer {
  align-self: stretch;
  width: 10px;
  min-width: 10px;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, transparent 0%, #c5d4e7 18%, #c5d4e7 82%, transparent 100%);
  cursor: col-resize;
  position: relative;
}

.admin-wiki-resizer::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 4px;
  height: 52px;
  background: #64748b;
  transform: translate(-50%, -50%);
  opacity: .55;
}

.admin-wiki-resizer:hover::after,
body.admin-wiki-resizing .admin-wiki-resizer::after {
  background: #2563eb;
  opacity: 1;
}

body.admin-wiki-resizing {
  cursor: col-resize;
  user-select: none;
}

#adminWikiHtmlEditor {
  min-height: 0;
  height: 100%;
  resize: none;
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  tab-size: 2;
}

.admin-wiki-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-wiki-preview-head button {
  min-height: 30px !important;
  padding: 0 10px;
  font-size: 11px !important;
}

#adminWikiPreview {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid #d7e2ef;
  background: #ffffff;
}

.admin-wiki-preview:fullscreen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: 100vw;
  height: 100vh;
  padding: 18px;
  background: #ffffff;
}

.admin-wiki-preview:fullscreen #adminWikiPreview {
  width: 100%;
  height: 100%;
  min-height: 0;
}

#adminModal .admin-card-grid.admin-wiki-grid {
  display: block;
  height: 100%;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  grid-template-columns: none;
}

#adminModal .admin-card-grid.admin-wiki-grid .admin-wiki-actions button,
#adminModal .admin-card-grid.admin-wiki-grid .wiki-file-button {
  min-height: 36px;
  font-size: 12px;
}

.wiki-html-shell {
  height: 100%;
}

.wiki-html-frame {
  min-height: min(78vh, 900px);
}

@media (max-width: 980px) {
  .admin-wiki-editor {
    min-height: 0;
  }

  .admin-wiki-head,
  .admin-wiki-body {
    grid-template-columns: 1fr;
  }

  .admin-wiki-resizer {
    display: none;
  }

  .admin-wiki-head {
    display: grid;
  }

  .admin-wiki-actions {
    justify-content: flex-start;
    min-width: 0;
  }
}

body.dark-mode {
  --dark-bg: #0b1220;
  --dark-panel: #121b2a;
  --dark-panel-2: #172235;
  --dark-panel-3: #1f2c42;
  --dark-border: #33445c;
  --dark-border-soft: #26364c;
  --dark-text: #edf4ff;
  --dark-muted: #a8b7cc;
  --dark-accent: #6aa8ff;
  --dark-accent-2: #8bd3ff;
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
}body.dark-mode .topbar,
body.dark-mode .floating-window,
body.dark-mode .side-panel,
body.dark-mode .panel,
body.dark-mode .modal-card,
body.dark-mode .window-dock,
body.dark-mode .shop-modal-card,
body.dark-mode .activity-modal-card,
body.dark-mode .account-card,
body.dark-mode .profile-card,
body.dark-mode .admin-card,
body.dark-mode .admin-data-box,
body.dark-mode #adminEditModal .admin-edit-card,
body.dark-mode #adminFuelModal .admin-fuel-card,
body.dark-mode #adminUserModal .admin-user-detail-card,
body.dark-mode #personnelOverviewModal .personnel-overview-card {
  color: var(--dark-text) !important;
}

body.dark-mode .admin-tabs,
body.dark-mode .personnel-overview-tabs,
body.dark-mode .fleet-filter-tabs,
body.dark-mode .shop-switch,
body.dark-mode .account-summary,
body.dark-mode .modal-shop-grid,
body.dark-mode .account-list,
body.dark-mode .schedule-list,
body.dark-mode .contract-list,
body.dark-mode .archive-list,
body.dark-mode .radio-log,
body.dark-mode .lp-resource-list,
body.dark-mode .lp-resource-rows,
body.dark-mode .lp-grid-wrap,
body.dark-mode .lp-timeline,
body.dark-mode .lp-grid,
body.dark-mode .lp-left,
body.dark-mode .lp-hours,
body.dark-mode .lp-day-group,
body.dark-mode .lp-day-hours,
body.dark-mode .lp-row,
body.dark-mode .lp-board,
body.dark-mode .lp-head,
body.dark-mode .lp-day-head,
body.dark-mode .inline-loco-planner,
body.dark-mode .loco-planner {
  background: #0f1828 !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}body.dark-mode .shop-card,
body.dark-mode .schedule-card,
body.dark-mode .contract-card,
body.dark-mode .loco,
body.dark-mode .admin-data-card,
body.dark-mode .profile-box,
body.dark-mode .account-entry,
body.dark-mode .account-summary div,
body.dark-mode .activity-form-grid label,
body.dark-mode .activity-times,
body.dark-mode .activity-trip-preview,
body.dark-mode .activity-trip-stop,
body.dark-mode .activity-trip-summary > div,
body.dark-mode .wagon-checkbox,
body.dark-mode .route-preview,
body.dark-mode .schedule-detail-box,
body.dark-mode .schedule-detail-grid span,
body.dark-mode .order-form > label,
body.dark-mode .order-stops-box,
body.dark-mode .order-details-box,
body.dark-mode .fleet-card,
body.dark-mode .fleet-list,
body.dark-mode .fleet-item,
body.dark-mode .fleet-media,
body.dark-mode .fleet-facts span,
body.dark-mode .fleet-offer,
body.dark-mode .training-page,
body.dark-mode .training-form-card,
body.dark-mode .training-list-card,
body.dark-mode .training-person-check,
body.dark-mode .training-offer,
body.dark-mode .personnel-card,
body.dark-mode .personnel-assignment,
body.dark-mode .personnel-plan-row,
body.dark-mode .admin-settings-panel,
body.dark-mode .admin-wiki-code,
body.dark-mode .admin-wiki-preview,
body.dark-mode .wiki-content,
body.dark-mode .wiki-layout,
body.dark-mode .search-results,
body.dark-mode .picker-results,
body.dark-mode .activity-context-menu,
body.dark-mode .loading-card {
  color: var(--dark-text) !important;
}

body.dark-mode .admin-data-card:hover,
body.dark-mode .shop-card:hover,
body.dark-mode .schedule-card:hover,
body.dark-mode .contract-card:hover,
body.dark-mode .loco:hover,
body.dark-mode .lp-res-row:hover,
body.dark-mode .lp-res-row.active,
body.dark-mode .training-person-check:has(input:checked),
body.dark-mode .training-offer:has(input:checked) {
  background: var(--dark-panel-3) !important;
  border-color: var(--dark-accent) !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #0d1625 !important;
  border-color: #3b4f6b !important;
  color: var(--dark-text) !important;
  box-shadow: none !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #8292aa !important;
}

body.dark-mode button,
body.dark-mode .secondary,
body.dark-mode .icon-button,
body.dark-mode .time-button,
body.dark-mode .plus-button,
body.dark-mode .window-tab,
body.dark-mode .dock-button,
body.dark-mode .admin-tab {
  background: #162338 !important;
  border-color: #3a4c65 !important;
  color: var(--dark-text) !important;
}

body.dark-mode button:hover,
body.dark-mode .secondary:hover,
body.dark-mode .icon-button:hover,
body.dark-mode .window-tab:hover,
body.dark-mode .admin-tab:hover {
  background: #20304a !important;
  border-color: var(--dark-accent) !important;
}

body.dark-mode .primary,
body.dark-mode button.primary,
body.dark-mode .window-tab.active,
body.dark-mode .dock-button.active,
body.dark-mode .admin-tab.active,
body.dark-mode .time-button.active,
body.dark-mode .personnel-overview-tabs button.active,
body.dark-mode .fleet-filter-tabs .window-tab.active {
  background: linear-gradient(135deg, #1e66d0, #3aa0ff) !important;
  border-color: #73b7ff !important;
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(58, 160, 255, .22) !important;
}

body.dark-mode .danger-button,
body.dark-mode button.danger-button,
body.dark-mode .admin-delete {
  background: #5f1f2a !important;
  border-color: #b9475c !important;
  color: #ffe8ed !important;
}

body.dark-mode .leaflet-container,
body.dark-mode .admin-live-map,
body.dark-mode .admin-user-map,
body.dark-mode .activity-trip-map {
  background: #0d1625 !important;
}

body.dark-mode .wagon-list-table,
body.dark-mode .wagon-list-table td,
body.dark-mode .wagon-list-table th,
body.dark-mode .account-table td,
body.dark-mode .account-table th,
body.dark-mode .invoice-table td,
body.dark-mode .invoice-table th {
  background: var(--dark-panel-2) !important;
  border-color: var(--dark-border-soft) !important;
  color: var(--dark-text) !important;
}

body.dark-mode .shop-card .vehicle-image,
body.dark-mode .admin-card-image,
body.dark-mode .admin-cargo-preview,
body.dark-mode .fleet-media,
body.dark-mode .cargo-admin-chip {
  background: #0e1929 !important;
  border-color: var(--dark-border-soft) !important;
}

body.dark-mode .password-toggle {
  background: #22314a !important;
  border-color: #4f6d94 !important;
  color: #f8fbff !important;
}

body.dark-mode .password-toggle:hover {
  background: #2b4264 !important;
  border-color: var(--dark-accent) !important;
}

body.dark-mode #adminWikiPreview,
body.dark-mode .wiki-html-frame {
  background: #ffffff !important;
  border-color: var(--dark-border) !important;
}

/* Modern UI pass 2026 */
:root {
  --ui-radius-sm: 8px;
  --ui-radius: 12px;
  --ui-radius-lg: 16px;
  --ui-border: #d9e2ef;
  --ui-border-strong: #b8c8dc;
  --ui-surface: #ffffff;
  --ui-surface-2: #f6f8fb;
  --ui-surface-3: #edf3f8;
  --ui-text: #111827;
  --ui-muted: #64748b;
  --ui-accent: #2563eb;
  --ui-accent-2: #0f766e;
  --ui-shadow: 0 16px 42px rgba(15, 23, 42, .12);
}

input,
select,
textarea {
  min-height: 38px;
  border: 1px solid var(--ui-border);
  background: #ffffff;
  color: var(--ui-text);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16) !important;
}

button,
.secondary,
.primary,
.danger-button,
.time-button,
.icon-button,
.window-tab,
.admin-tab {
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

button:hover,
.secondary:hover,
.primary:hover,
.time-button:hover,
.icon-button:hover,
.window-tab:hover,
.admin-tab:hover {
  transform: translateY(-1px);
}

label:has(> input),
label:has(> select),
label:has(> textarea),
.admin-field {
  gap: 7px;
  line-height: 1.25;
}

.activity-form-grid label,
.order-form > label,
.admin-field,
.training-form-grid label,
.schedule-edit-grid label,
.schedule-extend-body label {
  align-content: start;
}

.activity-form-grid input,
.activity-form-grid select,
.activity-form-grid textarea,
.order-form input,
.order-form select,
.order-form textarea,
.admin-field input,
.admin-field select,
.admin-field textarea,
.training-form-grid input,
.training-form-grid select,
.training-form-grid textarea,
.schedule-edit-grid input,
.schedule-edit-grid select {
  width: 100%;
  margin-top: 5px;
}

input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 17px;
  accent-color: var(--ui-accent-2);
  vertical-align: middle;
  flex: 0 0 auto;
}

.admin-field.checkbox-field,
.admin-checkbox-grid label,
.training-person-check,
.wagon-checkbox,
.activity-form-grid label:has(input[type="checkbox"]) {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.admin-settings-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  max-width: 980px;
}

.admin-settings-panel strong,
.admin-settings-panel span {
  min-width: 0;
}

.admin-settings-panel button {
  justify-self: end;
}

.password-reveal input {
  padding-right: 94px !important;
}

.password-toggle {
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

body.dark-mode {
  --dark-bg: #0f1115;
  --dark-shell: #15181d;
  --dark-panel: #1a1e24;
  --dark-panel-2: #20252c;
  --dark-panel-3: #272e37;
  --dark-line: #343b46;
  --dark-line-soft: #2a3039;
  --dark-text: #f3f6fa;
  --dark-muted: #b5c0cf;
  --dark-subtle: #8995a6;
  --dark-accent: #2dd4bf;
  --dark-accent-strong: #14b8a6;
  --dark-blue: #60a5fa;
  --dark-warn: #fbbf24;
  background:
    radial-gradient(circle at 18% -10%, rgba(45, 212, 191, .13), transparent 34%),
    radial-gradient(circle at 90% 0%, rgba(96, 165, 250, .12), transparent 32%),
    var(--dark-bg) !important;
  color: var(--dark-text) !important;
}

body.dark-mode .topbar {
  background: rgba(21, 24, 29, .92) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  backdrop-filter: blur(18px);
}

body.dark-mode .layout,
body.dark-mode.view-controlsonly .layout,
body.dark-mode.ui-window-design .layout.map-stage {
  background: transparent !important;
}body.dark-mode .floating-window,
body.dark-mode .side-panel,
body.dark-mode .panel,
body.dark-mode .modal-card,
body.dark-mode .window-dock,
body.dark-mode .shop-modal-card,
body.dark-mode .activity-modal-card,
body.dark-mode .account-card,
body.dark-mode .profile-card,
body.dark-mode .admin-card,
body.dark-mode .admin-data-box,
body.dark-mode #adminEditModal .admin-edit-card,
body.dark-mode #adminFuelModal .admin-fuel-card,
body.dark-mode #adminUserModal .admin-user-detail-card,
body.dark-mode #personnelOverviewModal .personnel-overview-card {
  color: var(--dark-text) !important;
}

body.dark-mode .admin-tabs,
body.dark-mode .personnel-overview-tabs,
body.dark-mode .fleet-filter-tabs,
body.dark-mode .shop-switch,
body.dark-mode .account-summary,
body.dark-mode .modal-shop-grid,
body.dark-mode .account-list,
body.dark-mode .schedule-list,
body.dark-mode .contract-list,
body.dark-mode .archive-list,
body.dark-mode .radio-log,
body.dark-mode .lp-resource-list,
body.dark-mode .lp-resource-rows,
body.dark-mode .lp-grid-wrap,
body.dark-mode .lp-timeline,
body.dark-mode .lp-grid,
body.dark-mode .lp-left,
body.dark-mode .lp-hours,
body.dark-mode .lp-day-group,
body.dark-mode .lp-day-hours,
body.dark-mode .lp-row,
body.dark-mode .lp-board,
body.dark-mode .lp-head,
body.dark-mode .lp-day-head,
body.dark-mode .inline-loco-planner,
body.dark-mode .loco-planner {
  background: var(--dark-shell) !important;
  border-color: var(--dark-line-soft) !important;
}body.dark-mode .shop-card,
body.dark-mode .schedule-card,
body.dark-mode .contract-card,
body.dark-mode .loco,
body.dark-mode .admin-data-card,
body.dark-mode .profile-box,
body.dark-mode .account-entry,
body.dark-mode .account-summary div,
body.dark-mode .activity-form-grid label,
body.dark-mode .activity-times,
body.dark-mode .activity-trip-preview,
body.dark-mode .activity-trip-stop,
body.dark-mode .activity-trip-summary > div,
body.dark-mode .wagon-checkbox,
body.dark-mode .route-preview,
body.dark-mode .schedule-detail-box,
body.dark-mode .schedule-detail-grid span,
body.dark-mode .order-form > label,
body.dark-mode .order-stops-box,
body.dark-mode .order-details-box,
body.dark-mode .fleet-card,
body.dark-mode .fleet-list,
body.dark-mode .fleet-item,
body.dark-mode .fleet-media,
body.dark-mode .fleet-facts span,
body.dark-mode .fleet-offer,
body.dark-mode .training-page,
body.dark-mode .training-form-card,
body.dark-mode .training-list-card,
body.dark-mode .training-person-check,
body.dark-mode .training-offer,
body.dark-mode .personnel-card,
body.dark-mode .personnel-assignment,
body.dark-mode .personnel-plan-row,
body.dark-mode .admin-settings-panel,
body.dark-mode .admin-wiki-code,
body.dark-mode .admin-wiki-preview,
body.dark-mode .wiki-content,
body.dark-mode .wiki-layout,
body.dark-mode .search-results,
body.dark-mode .picker-results,
body.dark-mode .activity-context-menu,
body.dark-mode .loading-card {
  color: var(--dark-text) !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #11151a !important;
  border-color: #3c4552 !important;
  color: var(--dark-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.dark-mode input:hover,
body.dark-mode select:hover,
body.dark-mode textarea:hover {
  border-color: #526071 !important;
  background: #141920 !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: var(--dark-accent) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .18), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #7f8b9c !important;
}

body.dark-mode input[type="checkbox"] {
  accent-color: var(--dark-accent-strong);
}

body.dark-mode button,
body.dark-mode .secondary,
body.dark-mode .icon-button,
body.dark-mode .time-button,
body.dark-mode .plus-button,
body.dark-mode .window-tab,
body.dark-mode .dock-button,
body.dark-mode .admin-tab {
  background: #242a32 !important;
  border-color: #3b4450 !important;
  color: var(--dark-text) !important;
}

body.dark-mode button:hover,
body.dark-mode .secondary:hover,
body.dark-mode .icon-button:hover,
body.dark-mode .window-tab:hover,
body.dark-mode .admin-tab:hover {
  background: #2c3440 !important;
  border-color: var(--dark-accent) !important;
}

body.dark-mode .primary,
body.dark-mode button.primary,
body.dark-mode .window-tab.active,
body.dark-mode .dock-button.active,
body.dark-mode .admin-tab.active,
body.dark-mode .time-button.active,
body.dark-mode .personnel-overview-tabs button.active,
body.dark-mode .fleet-filter-tabs .window-tab.active {
  background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
  border-color: #5eead4 !important;
  color: #ecfeff !important;
  box-shadow: 0 14px 34px rgba(20, 184, 166, .24) !important;
}

body.dark-mode .danger-button,
body.dark-mode button.danger-button,
body.dark-mode .admin-delete {
  background: linear-gradient(135deg, #7f1d1d, #b91c1c) !important;
  border-color: #ef4444 !important;
  color: #fff1f2 !important;
}body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode strong,
body.dark-mode .brand,
body.dark-mode .panel-head h2,
body.dark-mode .modal-head h2,
body.dark-mode .planning-title,
body.dark-mode #planningTitle,
body.dark-mode .lp-title,
body.dark-mode .lp-head,
body.dark-mode .lp-res-row strong,
body.dark-mode .schedule-title,
body.dark-mode .contract-title,
body.dark-mode .admin-toolbar h3,
body.dark-mode .admin-wiki-head strong,
body.dark-mode .admin-wiki-code > span,
body.dark-mode .admin-wiki-preview-head span {
  text-shadow: none !important;
}

body.dark-mode .activity-form-grid label,
body.dark-mode .order-form > label,
body.dark-mode .admin-field,
body.dark-mode .training-form-grid label,
body.dark-mode .schedule-edit-grid label,
body.dark-mode .schedule-extend-body label {
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
}

body.dark-mode .activity-form-grid label:has(input[type="checkbox"]),
body.dark-mode .admin-field.checkbox-field,
body.dark-mode .admin-checkbox-grid label,
body.dark-mode .training-person-check,
body.dark-mode .wagon-checkbox {
  background: #20262e !important;
}

body.dark-mode .activity-warning,
body.dark-mode .lp-prep-warning .activity-warning,
body.dark-mode .lp-staff-warning .activity-warning {
  background: var(--dark-warn) !important;
  color: #1f1300 !important;
}

body.dark-mode .admin-settings-panel {
  background:
    linear-gradient(135deg, rgba(45, 212, 191, .12), transparent 46%),
    linear-gradient(180deg, #242a32, #1b2027) !important;
}

body.dark-mode .admin-settings-panel input,
body.dark-mode .admin-settings-panel select {
  max-width: 220px;
}

body.dark-mode .password-toggle {
  background: #27313c !important;
  border-color: #465466 !important;
  color: #f8fafc !important;
}

body.dark-mode .password-toggle:hover {
  background: #123c3a !important;
  border-color: var(--dark-accent) !important;
}

body.dark-mode .leaflet-container,
body.dark-mode .admin-live-map,
body.dark-mode .admin-user-map,
body.dark-mode .activity-trip-map {
  background: #12161b !important;
}

body.dark-mode #adminWikiPreview,
body.dark-mode .wiki-html-frame {
  background: #ffffff !important;
  border-color: #3c4552 !important;
}

@media (max-width: 760px) {
  .admin-settings-panel {
    grid-template-columns: 1fr;
  }

  .admin-settings-panel button {
    justify-self: stretch;
  }
}

/* Darkmode cleanup: order/planning/contract/site popups */
body.dark-mode .order-modal-card,
body.dark-mode .order-modal-card .order-box,
body.dark-mode .order-route-view,
body.dark-mode .order-side-overview,
body.dark-mode .order-side-locos,
body.dark-mode .order-side-contracts,
body.dark-mode .planning-side-panel,
body.dark-mode .planning-side-controls,
body.dark-mode .planning-side-list,
body.dark-mode .planning-side-pane,
body.dark-mode .planning-side-locos,
body.dark-mode .planning-side-contracts,
body.dark-mode #planningSidePanel,
body.dark-mode #planningSideList {
  background: #151a20 !important;
  border-color: #303945 !important;
  color: #f3f6fa !important;
}

body.dark-mode .order-modal-card .order-form,
body.dark-mode .order-modal-card .order-result,
body.dark-mode .order-modal-card .order-route-map,
body.dark-mode .order-modal-card .order-side-overview,
body.dark-mode .order-modal-card .planning-side-pane,
body.dark-mode .order-modal-card .planning-side-locos,
body.dark-mode .order-modal-card .planning-side-contracts {
  background: #171c23 !important;
  border-color: #303945 !important;
}

body.dark-mode .order-modal-card .order-form > label,
body.dark-mode .order-modal-card .order-stop-quick,
body.dark-mode .order-modal-card .order-stops-box,
body.dark-mode .order-modal-card .order-details-box,
body.dark-mode .order-modal-card .route-preview,
body.dark-mode .order-modal-card .order-actions,
body.dark-mode .order-side-overview .planning-side-tabs,
body.dark-mode .planning-side-loco,
body.dark-mode .planning-side-contract,
body.dark-mode .planning-side-contract-card,
body.dark-mode .planning-side-wagon,
body.dark-mode .planning-side-schedule {
  background: linear-gradient(180deg, #242a32, #1d232b) !important;
  border-color: #3a4451 !important;
  color: #f3f6fa !important;
}

body.dark-mode .planning-side-contract-row > .planning-side-contract {
  background: transparent !important;
}

body.dark-mode .planning-side-stop-details {
  border-top-color: #3a4451 !important;
  background: #161b22 !important;
}

body.dark-mode .planning-side-stop-details summary {
  color: #93c5fd !important;
}

body.dark-mode .planning-side-stop-table th,
body.dark-mode .planning-side-stop-table td {
  border-bottom-color: #303945 !important;
}

body.dark-mode .planning-side-stop-table th {
  color: #cbd5e1 !important;
}

body.dark-mode .planning-side-wagon-head strong,
body.dark-mode .planning-side-wagon-event b {
  color: #f8fafc !important;
}

body.dark-mode .planning-side-wagon-head span,
body.dark-mode .planning-side-wagon > small,
body.dark-mode .planning-side-wagon-event span,
body.dark-mode .planning-side-wagon-event small {
  color: #cbd5e1 !important;
}

body.dark-mode .planning-side-wagon-event {
  background: #171c23 !important;
  border-color: #303945 !important;
}

body.dark-mode .planning-side-wagon-event.lp-shunt { border-left-color: #f59e0b !important; }
body.dark-mode .planning-side-wagon-event.lp-cargo { border-left-color: #22c55e !important; }
body.dark-mode .planning-side-wagon-event.lp-inspection { border-left-color: #a78bfa !important; }
body.dark-mode .planning-side-wagon-event.lp-brake { border-left-color: #38bdf8 !important; }
body.dark-mode .planning-side-wagon-event.lp-parking { border-left-color: #94a3b8 !important; }

body.dark-mode .planning-side-wagon-empty {
  background: transparent !important;
  border-color: #3a4451 !important;
  color: #cbd5e1 !important;
}

body.dark-mode .order-modal-card .empty-state,
body.dark-mode .planning-side-panel .empty-state,
body.dark-mode .order-side-overview .empty-state {
  background: transparent !important;
  color: #d7dee8 !important;
  border-color: transparent !important;
}

body.dark-mode .planning-side-tab,
body.dark-mode .order-side-overview .planning-side-tab {
  background: #242a32 !important;
  border-color: #3a4451 !important;
  color: #e8eef7 !important;
}

body.dark-mode .planning-side-tab.active,
body.dark-mode .order-side-overview .planning-side-tab.active {
  background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
  border-color: #5eead4 !important;
  color: #ecfeff !important;
}

body.dark-mode .planning-side-controls select,
body.dark-mode .planning-side-controls input,
body.dark-mode .order-side-overview input,
body.dark-mode .order-side-overview select {
  background: #10151b !important;
  border-color: #3a4451 !important;
  color: #f3f6fa !important;
}

body.dark-mode .contract-detail-card,
body.dark-mode .contract-detail-body,
body.dark-mode .contract-detail-facts {
  background: #151a20 !important;
  color: #f3f6fa !important;
}

body.dark-mode .contract-detail-route,
body.dark-mode .contract-detail-grid div,
body.dark-mode .contract-detail-progress,
body.dark-mode .contract-detail-map-wrap {
  background: linear-gradient(180deg, #242a32, #1d232b) !important;
  border-color: #3a4451 !important;
  color: #f3f6fa !important;
}

body.dark-mode .contract-detail-route small,
body.dark-mode .contract-detail-grid small {
  color: #9fb0c6 !important;
}

body.dark-mode .contract-detail-route strong,
body.dark-mode .contract-detail-grid strong,
body.dark-mode .contract-detail-progress {
  color: #f7fafc !important;
}

body.dark-mode .contract-detail-route span {
  color: #5eead4 !important;
}

body.dark-mode .contract-detail-progress span {
  background: #123c3a !important;
  color: #ccfbf1 !important;
}

body.dark-mode .site-card,
body.dark-mode .site-card.main,
body.dark-mode .site-list .site-card {
  background: linear-gradient(180deg, #242a32, #1d232b) !important;
  border-color: #3a4451 !important;
  color: #f3f6fa !important;
}

body.dark-mode .site-edit-box {
  background: #171c23 !important;
  border-color: #3a4451 !important;
}

body.dark-mode .site-edit-box label {
  color: #cbd5e1 !important;
}

body.dark-mode .site-edit-box input {
  background: #10151b !important;
  border-color: #3a4451 !important;
  color: #f3f6fa !important;
}

body.dark-mode .site-card.main {
  border-left-color: #3b82f6 !important;
  box-shadow: inset 4px 0 0 #3b82f6, 0 12px 30px rgba(0, 0, 0, .22) !important;
}

body.dark-mode .site-card strong,
body.dark-mode .site-upgrade-main strong {
  color: #f7fafc !important;
}

body.dark-mode .site-card span,
body.dark-mode .site-upgrade-main span,
body.dark-mode .site-upgrade-main em {
  color: #b5c0cf !important;
}

body.dark-mode .site-detail-card,
body.dark-mode .site-detail-body,
body.dark-mode .site-upgrade-list,
body.dark-mode .site-upgrade-row,
body.dark-mode .site-cost-row {
  background: #151a20 !important;
  border-color: #303945 !important;
  color: #f3f6fa !important;
}

body.dark-mode .site-upgrade-row {
  background: linear-gradient(180deg, #242a32, #1d232b) !important;
  border-color: #3a4451 !important;
}

body.dark-mode .site-modal-tabs button {
  background: #242a32 !important;
  border-color: #3a4451 !important;
  color: #e8eef7 !important;
}

body.dark-mode .site-modal-tabs button.active {
  background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
  border-color: #5eead4 !important;
  color: #ecfeff !important;
}

body.dark-mode .schedule-detail-box,
body.dark-mode .schedule-detail-grid span,
body.dark-mode .order-schedule-details,
body.dark-mode .order-timeline-scroll,
body.dark-mode .route-preview,
body.dark-mode .activity-trip-preview,
body.dark-mode #activityTripInfo.route-preview,
body.dark-mode #activityModal.activity-view-mode #activityTripInfo.route-preview {
  background: linear-gradient(180deg, #242a32, #1d232b) !important;
  border-color: #3a4451 !important;
  color: #f3f6fa !important;
}

body.dark-mode .schedule-detail-grid b,
body.dark-mode .route-preview strong {
  color: #f7fafc !important;
}

body.dark-mode .schedule-detail-route-title {
  color: #f8fafc !important;
}

body.dark-mode .schedule-route-choice-head {
  color: #f8fafc !important;
}

body.dark-mode .schedule-route-choice-head span,
body.dark-mode .schedule-route-choice-title small {
  color: #9fb0c6 !important;
}

body.dark-mode .schedule-route-choice-card {
  background: #151d29 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

body.dark-mode .schedule-route-choice-card:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .24) !important;
}

body.dark-mode .schedule-route-choice-card.active {
  background: #0c2832 !important;
  border-color: #26c6da !important;
  box-shadow: inset 0 0 0 2px rgba(38, 198, 218, .2) !important;
}

body.dark-mode .schedule-route-choice-values b,
body.dark-mode .schedule-route-choice-card i {
  background: #172033 !important;
  color: #dbeafe !important;
}

body.dark-mode .schedule-route-choice-card.active i {
  background: #26c6da !important;
  color: #082f36 !important;
}

body.dark-mode .route-preview span,
body.dark-mode .order-schedule-details.empty-timeline > li,
body.dark-mode .schedule-detail-grid span {
  color: #b5c0cf !important;
}

body.dark-mode .route-preview-meta span {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

body.dark-mode .route-preview-meta b,
body.dark-mode .order-modal-card .speed-row span {
  color: #9fb0c6 !important;
}

body.dark-mode .route-preview .route-warning,
body.dark-mode .schedule-detail-warning {
  color: #fbbf24 !important;
}

body.dark-mode .route-profile-summary span,
body.dark-mode .station-event-tags em {
  background: #172033 !important;
  border-color: #334155 !important;
  color: #dbeafe !important;
}

body.dark-mode .route-choice-list {
  background: #0f1724 !important;
  border-color: #334155 !important;
}

body.dark-mode .route-choice-head {
  color: #f8fafc !important;
}

body.dark-mode .route-choice-head span,
body.dark-mode .route-choice-title small {
  color: #9fb0c6 !important;
}

body.dark-mode .route-choice-card {
  background: #151d29 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

body.dark-mode .route-choice-card:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24) !important;
}

body.dark-mode .route-choice-card.active {
  background: #0c2832 !important;
  border-color: #26c6da !important;
  box-shadow: inset 4px 0 0 #26c6da !important;
}

body.dark-mode .route-choice-facts b,
body.dark-mode .route-choice-card > i {
  background: #172033 !important;
  color: #dbeafe !important;
}

body.dark-mode .route-choice-card.active > i {
  background: #26c6da !important;
  color: #082f36 !important;
}

body.dark-mode .route-choice-card em {
  color: #fbbf24 !important;
}

body.dark-mode .station-event-tags em {
  background: #2a1b12 !important;
  border-color: #7c2d12 !important;
  color: #fed7aa !important;
}

body.dark-mode .route-section-details {
  background: #121826 !important;
  border-color: #334155 !important;
}

body.dark-mode .route-section-details summary,
body.dark-mode .route-section-details > div > span {
  color: #dbeafe !important;
}

body.dark-mode .route-section-details > div {
  border-color: #334155 !important;
}

body.dark-mode .route-section-details > div > strong {
  color: #93a4bb !important;
}

body.dark-mode .order-stop-quick-list > strong {
  color: #9fb0c6 !important;
}

body.dark-mode .stop-list {
  background: transparent !important;
}

body.dark-mode .stop-chip {
  background: linear-gradient(180deg, #242a32, #1d232b) !important;
  border-color: #3a4451 !important;
  border-left-color: #14b8a6 !important;
  color: #f3f6fa !important;
}

body.dark-mode .stop-chip b {
  background: #123c3a !important;
  color: #ccfbf1 !important;
}

body.dark-mode .stop-chip strong {
  color: #f7fafc !important;
}

body.dark-mode .stop-chip small,
body.dark-mode .stop-empty {
  color: #b5c0cf !important;
}

body.dark-mode .stop-empty {
  background: #1d232b !important;
  border-color: #3a4451 !important;
}

body.dark-mode .stop-chip button {
  background: #421b24 !important;
  border-color: #7f2d3a !important;
  color: #fecdd3 !important;
}

/* Planning popup header redesign */
#locoPlanningPanel .panel-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px !important;
  align-items: center;
  padding: 10px 12px !important;
}

#locoPlanningPanel #planningTitle {
  min-width: 96px !important;
  padding: 9px 12px !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

#locoPlanningPanel .head-actions,
body.ui-window-design #locoPlanningPanel .head-actions {
  display: grid !important;
  grid-template-columns:
    minmax(210px, 260px)
    auto auto
    minmax(155px, 178px)
    minmax(155px, 178px)
    auto minmax(160px, max-content) auto
    auto 42px auto
    minmax(160px, 220px)
    auto auto !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: end !important;
  width: 100% !important;
  min-width: 0 !important;
}

#locoPlanningPanel .planning-tool-select {
  min-width: 0 !important;
  width: auto !important;
  grid-template-columns: auto minmax(130px, 1fr) !important;
  padding: 0 !important;
}

#locoPlanningPanel .planning-tool-select span,
#locoPlanningPanel .planner-range-control span {
  color: #c2ccd9;
  font-size: 11px;
  font-weight: 900;
  text-transform: none;
}

#locoPlanningPanel .planning-tool-select select,
#locoPlanningPanel .planner-range-control input,
#locoPlanningPanel #personnelRoleFilter {
  min-height: 34px !important;
  height: 34px !important;
  padding-inline: 10px !important;
}

#locoPlanningPanel .planner-range-control {
  display: grid !important;
  grid-template-columns: auto minmax(120px, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

#locoPlanningPanel .window-tab,
#locoPlanningPanel .icon-button,
#locoPlanningPanel .plus-button {
  min-height: 34px !important;
  height: 34px !important;
}

#locoPlanningPanel #plannerDayView,
#locoPlanningPanel #plannerWeekView {
  min-width: 54px;
}

#locoPlanningPanel #prevPlannerDay,
#locoPlanningPanel #nextPlannerDay,
#locoPlanningPanel #openActivityModal,
#locoPlanningPanel #refreshPersonnelOffers,
#locoPlanningPanel #closePlanningPopup {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
}

#locoPlanningPanel #plannerDayLabel {
  min-width: 150px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .18);
  color: #dbe5f1;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

#locoPlanningPanel #jumpToNow {
  min-width: 60px;
}

#locoPlanningPanel #activityStats,
#locoPlanningPanel #personnelStats {
  display: none !important;
}

#locoPlanningPanel .planning-tool-select { grid-column: 1 !important; }
#locoPlanningPanel #plannerDayView { grid-column: 2 !important; }
#locoPlanningPanel #plannerWeekView { grid-column: 3 !important; }
#locoPlanningPanel .planner-range-control[title="Zeitraum Anfang"] { grid-column: 4 !important; }
#locoPlanningPanel .planner-range-control[title="Zeitraum Ende"] { grid-column: 5 !important; }
#locoPlanningPanel #prevPlannerDay { grid-column: 6 !important; }
#locoPlanningPanel #plannerDayLabel { grid-column: 7 !important; }
#locoPlanningPanel #nextPlannerDay { grid-column: 8 !important; }
#locoPlanningPanel #jumpToNow { grid-column: 9 !important; }
#locoPlanningPanel #openPlanningMultipleTractionModal { grid-column: 10 !important; }
#locoPlanningPanel #openActivityModal { grid-column: 11 !important; }
#locoPlanningPanel #personnelRoleFilter { grid-column: 12 !important; }
#locoPlanningPanel #refreshPersonnelOffers { grid-column: 13 !important; }
#locoPlanningPanel #closePlanningPopup { grid-column: 14 !important; }

body.dark-mode #locoPlanningPanel .panel-head,
body.dark-mode.ui-window-design #locoPlanningPanel .panel-head {
  background: linear-gradient(180deg, #1d2635, #17202d) !important;
  border-color: #334155 !important;
}

body.dark-mode #locoPlanningPanel #planningTitle,
body.dark-mode #locoPlanningPanel #plannerDayLabel {
  background: #111827 !important;
  border-color: #3b4b62 !important;
  color: #f8fafc !important;
}

body.dark-mode #locoPlanningPanel .planning-tool-select select,
body.dark-mode #locoPlanningPanel .planner-range-control input,
body.dark-mode #locoPlanningPanel #personnelRoleFilter {
  background: #0f141b !important;
  border-color: #3b4b62 !important;
  color: #f8fafc !important;
}

@media (max-width: 1500px) {
  #locoPlanningPanel .panel-head {
    grid-template-columns: 1fr auto !important;
  }

  #locoPlanningPanel .head-actions,
  body.ui-window-design #locoPlanningPanel .head-actions {
    grid-column: 1 / -1;
    grid-template-columns:
      minmax(190px, 1fr)
      repeat(2, auto)
      repeat(2, minmax(145px, 1fr))
      auto minmax(150px, max-content) auto
      auto minmax(40px, max-content) auto minmax(150px, 1fr) auto auto !important;
    justify-content: stretch !important;
  }
}

@media (max-width: 980px) {
  #locoPlanningPanel .head-actions,
  body.ui-window-design #locoPlanningPanel .head-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  #locoPlanningPanel .planning-tool-select,
  #locoPlanningPanel .planner-range-control[title="Zeitraum Anfang"],
  #locoPlanningPanel .planner-range-control[title="Zeitraum Ende"],
  #locoPlanningPanel #plannerDayLabel,
  #locoPlanningPanel #personnelRoleFilter {
    grid-column: span 2 !important;
    min-width: 0 !important;
  }

  #locoPlanningPanel #plannerDayView,
  #locoPlanningPanel #plannerWeekView,
  #locoPlanningPanel #prevPlannerDay,
  #locoPlanningPanel #nextPlannerDay,
  #locoPlanningPanel #jumpToNow,
  #locoPlanningPanel #openPlanningMultipleTractionModal,
  #locoPlanningPanel #openActivityModal,
  #locoPlanningPanel #refreshPersonnelOffers,
  #locoPlanningPanel #closePlanningPopup {
    grid-column: span 1 !important;
    width: auto !important;
  }
}

@media (max-width: 640px) {
  #locoPlanningPanel .panel-head {
    grid-template-columns: 1fr !important;
  }

  #locoPlanningPanel #planningTitle {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  #locoPlanningPanel .head-actions,
  body.ui-window-design #locoPlanningPanel .head-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #locoPlanningPanel .planning-tool-select,
  #locoPlanningPanel .planner-range-control[title="Zeitraum Anfang"],
  #locoPlanningPanel .planner-range-control[title="Zeitraum Ende"],
  #locoPlanningPanel #plannerDayLabel,
  #locoPlanningPanel #personnelRoleFilter {
    grid-column: 1 / -1 !important;
  }

  #locoPlanningPanel #plannerDayLabel {
    min-width: 0 !important;
  }
}

/* Final dashboard scroll override */
body.ui-window-design:not(.view-maponly) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.ui-window-design:not(.view-maponly) .layout.map-stage {
  height: auto !important;
  min-height: calc(100vh - 64px) !important;
  overflow: visible !important;
}

@media (max-width: 1180px) {
  body.ui-window-design:not(.view-maponly) .layout.map-stage {
    grid-template-rows: 24vh 120px 120px !important;
  }
}

@media (max-width: 760px) {
  body.ui-window-design:not(.view-maponly) .layout.map-stage {
    grid-template-rows: 180px repeat(4, 130px) !important;
  }
}

/* Final admin scroll and media override */
#adminModal .admin-card {
  height: min(92vh, 860px) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: hidden !important;
}

#adminModal .admin-grid,
#adminModal .admin-data-box {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

#adminModal .admin-tabs {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  align-content: start !important;
  overscroll-behavior: contain;
}

#adminModal .admin-card-grid,
#adminModal #adminCards {
  display: grid !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  align-content: start !important;
  overscroll-behavior: contain;
}

#adminModal .admin-card-image,
#adminModal .admin-cargo-preview {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#adminModal .admin-card-image img,
#adminModal .admin-cargo-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#adminModal .admin-card-image img {
  max-height: none !important;
  padding: 12px !important;
}

#adminModal .admin-cargo-preview img {
  padding: 6px !important;
}

@media (max-width: 920px) {
  #adminModal .admin-grid {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  #adminModal .admin-tabs {
    max-height: 128px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
  }
}

/* Final planning header wrap override */
#locoPlanningPanel .head-actions,
body.ui-window-design #locoPlanningPanel .head-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#locoPlanningPanel .planning-tool-select {
  flex: 1 1 190px !important;
  min-width: 170px !important;
}

#locoPlanningPanel .planner-range-control {
  flex: 1 1 138px !important;
  min-width: 126px !important;
}

#locoPlanningPanel #plannerDayLabel {
  flex: 1 1 132px !important;
  min-width: 110px !important;
}

#locoPlanningPanel #personnelRoleFilter {
  flex: 1 1 150px !important;
  min-width: 130px !important;
}

#locoPlanningPanel #plannerDayView,
#locoPlanningPanel #plannerWeekView,
#locoPlanningPanel #prevPlannerDay,
#locoPlanningPanel #nextPlannerDay,
#locoPlanningPanel #jumpToNow,
#locoPlanningPanel #openPlanningMultipleTractionModal,
#locoPlanningPanel #openActivityModal,
#locoPlanningPanel #refreshPersonnelOffers,
#locoPlanningPanel #closePlanningPopup {
  flex: 0 0 auto !important;
  width: auto !important;
}

#locoPlanningPanel #prevPlannerDay,
#locoPlanningPanel #nextPlannerDay,
#locoPlanningPanel #openActivityModal,
#locoPlanningPanel #refreshPersonnelOffers,
#locoPlanningPanel #closePlanningPopup {
  flex-basis: 36px !important;
}

@media (max-width: 640px) {
  #locoPlanningPanel .planning-tool-select,
  #locoPlanningPanel .planner-range-control,
  #locoPlanningPanel #plannerDayLabel,
  #locoPlanningPanel #personnelRoleFilter {
    flex-basis: 100% !important;
  }
}

/* Auth screen railway backdrop */
.auth-backdrop {
  display: none;
}

body.auth-locked {
  min-height: 100vh;
  overflow: hidden !important;
  background: #111827 !important;
}

body.auth-locked .topbar,
body.auth-locked .layout,
body.auth-locked .window-dock,
body.auth-locked .modal:not(#loginModal):not(#maintenanceModal),
body.auth-locked .map-notification {
  display: none !important;
}

body.auth-locked .auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  background: #111827;
}

body.auth-locked .auth-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .12), rgba(15, 23, 42, .42)),
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .18), transparent 28%);
  pointer-events: none;
}

body.auth-locked .auth-map-shell {
  position: absolute;
  inset: -28px;
  overflow: hidden;
  filter: saturate(.92) contrast(.96);
}

body.auth-locked .auth-rail-map {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.04);
}

.auth-road {
  fill: none;
  stroke: #a2743f;
  stroke-width: 13;
  stroke-linecap: round;
  stroke-opacity: .5;
}

.auth-road.secondary {
  stroke: #87917c;
  stroke-width: 9;
  stroke-dasharray: 18 14;
}

.auth-water {
  fill: none;
  stroke: #94b9cf;
  stroke-width: 44;
  stroke-linecap: round;
  stroke-opacity: .48;
}

.auth-rail {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-main {
  stroke: #b91c1c;
  stroke-width: 8;
  stroke-dasharray: 44 12;
}

.auth-secondary {
  stroke: #b45309;
  stroke-width: 7;
  stroke-dasharray: 38 12;
}

.auth-branch {
  stroke: #52525b;
  stroke-width: 6;
  stroke-dasharray: 16 13;
}


/* assets/css/app/chunk-06.css */

.auth-freight {
  stroke: #71717a;
  stroke-width: 7;
  stroke-dasharray: 26 14;
}

.auth-stations circle {
  fill: #9f1d18;
  stroke: #f8fafc;
  stroke-width: 2;
}

.auth-stations text {
  fill: #2146ad;
  font: 900 18px/1 Arial, Helvetica, sans-serif;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 4px;
  letter-spacing: 0;
}

.auth-train {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 22px;
  border: 2px solid #ffffff;
  background: #0f766e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .34);
  offset-rotate: auto;
}

.auth-train-a {
  offset-path: path("M-40 260 C130 214 245 272 365 250 C500 226 604 162 724 190 C882 226 960 320 1120 288 C1246 264 1340 202 1480 218");
  animation: authTrainRun 22s linear infinite;
}

.auth-train-b {
  background: #1d4ed8;
  offset-path: path("M70 632 C214 572 300 480 420 446 C590 398 760 476 930 416 C1070 368 1198 306 1390 334");
  animation: authTrainRun 28s linear infinite reverse;
}

.auth-train-c {
  background: #b45309;
  offset-path: path("M244 76 C260 190 304 278 392 374 C476 466 580 560 628 760");
  animation: authTrainRun 18s linear infinite;
}

.auth-train-d {
  background: #475569;
  offset-path: path("M1180 -10 C1134 104 1114 220 1150 338 C1188 462 1282 570 1370 780");
  animation: authTrainRun 24s linear infinite reverse;
}

@keyframes authTrainRun {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

.auth-map-credit {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
  padding: 5px 8px;
  background: rgba(255, 255, 255, .7);
  color: #17202a;
  font-size: 12px;
  font-weight: 700;
}

body.auth-locked #loginModal {
  z-index: 5000 !important;
  display: grid !important;
  background: rgba(15, 23, 42, .32) !important;
  backdrop-filter: blur(1.5px);
}body.auth-locked #loginModal .login-card {
  backdrop-filter: blur(14px);
}

body.auth-locked #loginModal input {
  color: #17202a !important;
}

.login-theme-toggle {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
}body.auth-locked.dark-mode #loginModal .login-card {
  color: #f8fafc !important;
}

body.auth-locked.dark-mode #loginModal input {
  border-color: #334155 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

body.auth-locked.dark-mode #loginModal .auth-tabs button {
  border-color: #334155 !important;
  background: #111827 !important;
  color: #e5edf7 !important;
}

body.auth-locked.dark-mode #loginModal .auth-tabs button.active {
  border-color: #14b8a6 !important;
  background: #0f766e !important;
  color: #ffffff !important;
}

body:not(.auth-locked) .auth-backdrop {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth-train {
    animation-play-state: paused;
  }
}

html body.auth-locked > .topbar,
html body.auth-locked > .layout,
html body.auth-locked > .window-dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body.auth-locked > #authBackdrop {
  display: block !important;
  visibility: visible !important;
}

/* Final profile and password polish */
.password-reveal {
  display: block !important;
  position: relative !important;
  width: 100% !important;
}

.password-reveal input {
  width: 100% !important;
  min-width: 0 !important;
  padding-right: 46px !important;
}

.password-toggle {
  position: absolute !important;
  right: 7px !important;
  top: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 2 !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.password-toggle::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 11px;
  border: 2px solid currentColor;
}

.password-toggle::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: currentColor;
}

.password-toggle.is-visible::after {
  width: 2px;
  height: 22px;
  background: currentColor;
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px #f8fafc;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
  outline: none !important;
}

#loginModal .password-toggle,
#profileModal .password-toggle,
#adminUserModal .password-toggle {
  top: 50% !important;
}

#profileModal.open {
  padding: 16px !important;
}#profileModal .profile-card {
  width: min(940px, calc(100vw - 32px)) !important;
  max-width: min(940px, calc(100vw - 32px)) !important;
  max-height: min(90vh, 860px) !important;
  overflow: hidden !important;
}#profileModal .profile-card .modal-head h2 {
  letter-spacing: 0 !important;
}

#profileModal .profile-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  gap: 12px !important;
  max-height: calc(min(90vh, 860px) - 64px) !important;
  padding: 14px !important;
  overflow: auto !important;
  background: #eef3f8 !important;
}

#profileModal .profile-box {
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid #d8e1ec !important;
  border-left: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}

#profileModal .profile-box:first-child {
  border-top: 4px solid #2563eb !important;
}

#profileModal .profile-box:nth-child(2) {
  border-top: 4px solid #0f766e !important;
}

#profileModal .profile-box strong {
  color: #0f172a !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}

#profileModal .profile-box span:not(.password-reveal):not(.design-preview):not(.preview-top):not(.preview-map):not(.preview-cell):not(.preview-side):not(.preview-popup) {
  display: block !important;
  min-width: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

#profileModal .profile-box.wide {
  grid-column: 1 / -1 !important;
}

#profileModal .profile-box.wide:not(.profile-password):not(.profile-danger):not(.profile-design) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#profileModal .profile-design {
  border-top: 4px solid #22c55e !important;
}

#profileModal .profile-password {
  border-top: 4px solid #2563eb !important;
}

#profileModal .profile-password-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#profileModal .profile-password-grid .primary {
  grid-column: 1 / -1 !important;
  justify-self: end !important;
  min-width: 190px !important;
}

#profileModal .profile-danger {
  border-color: #fecaca !important;
  border-top: 4px solid #ef4444 !important;
  background: #fff7f7 !important;
}

#profileModal .profile-delete-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

body.dark-mode .password-toggle {
  border-color: #3f4b5d !important;
  background: #182232 !important;
  color: #dbeafe !important;
}

body.dark-mode .password-toggle.is-visible::after {
  box-shadow: 0 0 0 2px #182232;
}

body.dark-mode .password-toggle:hover,
body.dark-mode .password-toggle:focus-visible {
  border-color: #38bdf8 !important;
  background: #102637 !important;
  color: #7dd3fc !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .16) !important;
}

body.dark-mode #profileModal .profile-box span:not(.password-reveal):not(.design-preview):not(.preview-top):not(.preview-map):not(.preview-cell):not(.preview-side):not(.preview-popup) {
  border-color: #263244 !important;
  background: #0f172a !important;
}

@media (max-width: 820px) {
  #profileModal.open {
    padding: 9px !important;
  }#profileModal .profile-card {
  width: calc(100vw - 18px) !important;
  max-width: calc(100vw - 18px) !important;
  max-height: calc(100vh - 18px) !important;
}

  #profileModal .profile-grid,
  #profileModal .profile-box.wide:not(.profile-password):not(.profile-danger):not(.profile-design),
  #profileModal .profile-password-grid,
  #profileModal .profile-delete-row {
    grid-template-columns: 1fr !important;
  }

  #profileModal .profile-password-grid .primary,
  #profileModal .profile-delete-row button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Darkmode Leaflet popup contrast fix */
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip {
  background: #182232 !important;
  color: #e5edf7 !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .44) !important;
}

body.dark-mode .leaflet-popup-content {
  color: #e5edf7 !important;
}

body.dark-mode .leaflet-popup-content strong,
body.dark-mode .leaflet-popup-content span,
body.dark-mode .leaflet-popup-content small,
body.dark-mode .leaflet-popup-content em {
  color: #f8fafc !important;
}

body.dark-mode .leaflet-popup-content br {
  line-height: 1.35;
}

body.dark-mode .leaflet-popup-close-button {
  color: #cbd5e1 !important;
}

body.dark-mode .leaflet-popup-close-button:hover,
body.dark-mode .leaflet-popup-close-button:focus-visible {
  color: #ffffff !important;
}

/* Hauled locomotive selection in shunting planner */
.wagon-checkbox.hauled-loco-checkbox {
  border-color: #93c5fd !important;
  background: #eff6ff !important;
}

.wagon-checkbox.hauled-loco-checkbox strong::after {
  content: "Schleppen";
  display: inline-grid;
  place-items: center;
  margin-left: 8px;
  padding: 2px 6px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 900;
}

body.dark-mode .wagon-checkbox.hauled-loco-checkbox {
  border-color: #2563eb !important;
  background: #11243d !important;
}

body.dark-mode .wagon-checkbox.hauled-loco-checkbox strong::after {
  background: #1e3a8a;
  color: #dbeafe;
}

/* Planning grid/card alignment cleanup */
#activityResourceList .lp-resource-rows {
  display: block !important;
}

#activityResourceList .lp-res-row,
#activityGrid .lp-row {
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  box-sizing: border-box !important;
}

#activityResourceList .lp-res-row {
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  overflow: hidden !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}

#activityResourceList .lp-res-row strong {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#activityResourceList .lp-res-row span {
  display: -webkit-box !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#activityGrid .lp-activity {
  min-width: 0 !important;
  padding: 4px 6px !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .2) !important;
}

.lp-activity {
  min-width: 0 !important;
}

#activityGrid .lp-activity strong,
#activityGrid .lp-activity span:not(.activity-warning):not(.activity-color-only) {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #ffffff !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#activityGrid .lp-activity strong {
  font-size: 10px !important;
  font-weight: 900 !important;
}

#activityGrid .lp-activity span:not(.activity-warning):not(.activity-color-only) {
  font-size: 9px !important;
  font-weight: 800 !important;
  opacity: .88 !important;
}

#activityGrid .lp-activity.lp-mt-mirror {
  opacity: .7 !important;
  border-style: dashed !important;
}

#activityGrid .lp-activity.lp-selected,
#personnelAssignmentList .lp-activity.lp-selected,
#carAssignmentList .lp-activity.lp-selected {
  outline: 3px solid rgba(20, 184, 166, .95) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 10px 24px rgba(15, 118, 110, .32) !important;
  filter: saturate(1.18) brightness(1.06);
}

#activityGrid .lp-activity .activity-warning {
  right: 3px !important;
  left: auto !important;
  top: 3px !important;
  width: 16px !important;
  height: 16px !important;
  transform: none !important;
  font-size: 10px !important;
}

body.dark-mode #activityResourceList .lp-res-row strong {
  color: #f8fafc !important;
}

body.dark-mode #activityResourceList .lp-res-row span {
  color: #cbd5e1 !important;
}

.planning-side-activity {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .55) !important;
  border-left-width: 4px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .16) !important;
}

.planning-side-activity.lp-inspection { background: #8b5cf6 !important; }
.planning-side-activity.lp-brake { background: #f59e0b !important; }
.planning-side-activity.lp-shunt { background: #a16207 !important; }
.planning-side-activity.lp-cargo { background: #10b981 !important; }
.planning-side-activity.lp-fuel { background: #06b6d4 !important; }
.planning-side-activity.lp-parking { background: #475569 !important; }
.planning-side-activity.lp-trip { background: #2563eb !important; }
.planning-side-activity.lp-training { background: #64748b !important; }
.planning-side-activity.lp-rest { background: #16a34a !important; }

.planning-side-activity strong,
.planning-side-activity span,
.planning-side-activity small {
  color: #ffffff !important;
}

.planning-side-activity small {
  opacity: .86 !important;
}

.planning-side-activity.planning-side-unplanned {
  border-color: #ef4444 !important;
  outline: 2px solid rgba(239, 68, 68, .85) !important;
  outline-offset: -2px !important;
}

body.dark-mode .planning-side-activity.planning-side-unplanned {
  border-color: #f87171 !important;
  outline-color: rgba(248, 113, 113, .9) !important;
}

/* Personnel offer filters */
#personnelOverviewModal .personnel-offer-section {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

#personnelOverviewModal .personnel-offer-filters {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 6px 0 10px !important;
  padding: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
  position: relative !important;
  z-index: 2 !important;
}

#personnelOverviewModal .personnel-offer-filters select {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 0 32px 0 10px !important;
  box-sizing: border-box !important;
  line-height: 34px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#personnelOverviewModal #personnelOfferList {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  min-height: 0 !important;
}

body.dark-mode #personnelOverviewModal .personnel-offer-filters select {
  border-color: #334155 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

@media (max-width: 680px) {
  #personnelOverviewModal .personnel-offer-filters {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    max-height: none !important;
  }

  #personnelOverviewModal .personnel-offer-filters select {
    width: 100% !important;
  }
}

/* Final compact dashboard panel heights */
body.ui-window-design:not(.view-maponly) .layout.map-stage {
  grid-template-rows: clamp(220px, 28vh, 300px) minmax(260px, 34vh) minmax(260px, 34vh) !important;
  align-items: start !important;
  min-height: 0 !important;
  height: auto !important;
}

body.ui-window-design:not(.view-maponly) .layout.map-stage > .panel,
body.ui-window-design:not(.view-maponly) .layout.map-stage > .side-panel {
  min-height: 0 !important;
  max-height: 34vh !important;
  overflow: hidden !important;
}

body.ui-window-design:not(.view-maponly) .layout.map-stage > #map {
  min-height: 220px !important;
  height: clamp(220px, 28vh, 300px) !important;
  max-height: 300px !important;
}

body.ui-window-design:not(.view-maponly) .panel .list,
body.ui-window-design:not(.view-maponly) .panel .contract-list,
body.ui-window-design:not(.view-maponly) .panel .schedule-list,
body.ui-window-design:not(.view-maponly) .panel .site-list,
body.ui-window-design:not(.view-maponly) .panel .fleet-list,
body.ui-window-design:not(.view-maponly) #locoList,
body.ui-window-design:not(.view-maponly) #siteList,
body.ui-window-design:not(.view-maponly) #scheduleList,
body.ui-window-design:not(.view-maponly) #archiveList,
body.ui-window-design:not(.view-maponly) #contractList {
  min-height: 0 !important;
  overflow-y: auto !important;
}

@media (max-width: 1180px) {
  body.ui-window-design:not(.view-maponly) .layout.map-stage {
    grid-template-rows: 220px repeat(4, minmax(220px, 280px)) !important;
  }

  body.ui-window-design:not(.view-maponly) .layout.map-stage > .panel,
  body.ui-window-design:not(.view-maponly) .layout.map-stage > .side-panel {
    max-height: 280px !important;
  }
}

@media (max-width: 760px) {
  body.ui-window-design:not(.view-maponly) .layout.map-stage {
    grid-template-rows: 190px repeat(4, minmax(200px, 260px)) !important;
  }

  body.ui-window-design:not(.view-maponly) .layout.map-stage > #map {
    min-height: 190px !important;
    height: 190px !important;
  }

  body.ui-window-design:not(.view-maponly) .layout.map-stage > .panel,
  body.ui-window-design:not(.view-maponly) .layout.map-stage > .side-panel {
    max-height: 260px !important;
  }
}

/* Percentage dashboard layout */
body.ui-window-design:not(.view-maponly) {
  --dash-gap: 10px;
  --dash-top: 50%;
  --dash-bottom-a: 50%;
  --dash-bottom-b: 0%;
  --dash-left: 32%;
  --dash-mid: 24%;
  --dash-plan: 22%;
  --dash-orders: 22%;
  background: #eef3f8 !important;
}

body.ui-window-design:not(.view-maponly) .topbar {
  height: 7vh !important;
  min-height: 58px !important;
  max-height: 72px !important;
  grid-template-columns: 11% 43% minmax(0, 45%) !important;
  gap: .55% !important;
  padding: .45% .75% !important;
  background: linear-gradient(90deg, #263343 0%, #334252 46%, #263343 100%) !important;
  border-bottom: 1px solid #18212c !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .18) !important;
}

body.ui-window-design:not(.view-maponly) .brand {
  min-width: 0 !important;
  font-size: clamp(12px, .82vw, 16px) !important;
  white-space: nowrap !important;
}

body.ui-window-design:not(.view-maponly) .global-search {
  max-width: none !important;
}

body.ui-window-design:not(.view-maponly) .top-actions {
  justify-content: flex-end !important;
  gap: .25vw !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.ui-window-design:not(.view-maponly) .time-controls {
  flex: 0 0 176px !important;
  width: 176px !important;
  min-width: 176px !important;
  padding: 4px !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

body.ui-window-design:not(.view-maponly) .time-controls .time-button {
  min-height: 32px !important;
  min-width: 30px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
}

body.ui-window-design:not(.view-maponly) .game-clock,
body.ui-window-design:not(.view-maponly) .money {
  flex: 0 1 auto !important;
  min-width: 86px !important;
  padding: 0 .52vw !important;
  font-size: clamp(11px, .7vw, 13px) !important;
}

body.ui-window-design:not(.view-maponly) .icon-action {
  width: clamp(31px, 1.85vw, 36px) !important;
  min-width: clamp(31px, 1.85vw, 36px) !important;
  min-height: 32px !important;
  padding: 0 !important;
}

body.ui-window-design:not(.view-maponly) .layout.map-stage {
  height: calc(100vh - clamp(58px, 7vh, 72px)) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: var(--dash-left) var(--dash-mid) var(--dash-plan) var(--dash-orders) !important;
  grid-template-rows: var(--dash-top) var(--dash-bottom-a) !important;
  grid-template-areas:
    "map map map contracts"
    "depot sites schedules contracts" !important;
  gap: var(--dash-gap) !important;
  padding: var(--dash-gap) !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(232,238,245,.92)),
    #edf2f7 !important;
}

body.ui-window-design:not(.view-maponly) .layout.map-stage > #map,
body.ui-window-design:not(.view-maponly) .layout.map-stage > .panel,
body.ui-window-design:not(.view-maponly) .layout.map-stage > .side-panel {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  resize: none !important;
}

body.ui-window-design:not(.view-maponly) .layout.map-stage > #map {
  grid-area: map !important;
  z-index: 1 !important;
  border: 1px solid rgba(125, 144, 166, .55) !important;
  overflow: hidden !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .10) !important;
}

body.ui-window-design:not(.view-maponly) #depotPanel { grid-area: depot !important; }
body.ui-window-design:not(.view-maponly) #sitesPanel { grid-area: sites !important; }
body.ui-window-design:not(.view-maponly) #overviewPanel { grid-area: schedules !important; }
body.ui-window-design:not(.view-maponly) #contractsPanel { grid-area: contracts !important; }
body.ui-window-design:not(.view-maponly) #locoPlanningPanel { display: none !important; }

body.ui-window-design:not(.view-maponly) .layout.map-stage > .panel,
body.ui-window-design:not(.view-maponly) .layout.map-stage > .side-panel {
  z-index: 2 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, .55) !important;
  background: rgba(248, 250, 252, .96) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08) !important;
}

body.ui-window-design:not(.view-maponly) .layout.map-stage > .side-panel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

body.ui-window-design:not(.view-maponly) .floating-window.hidden-window {
  display: none !important;
}

body.ui-window-design:not(.view-maponly) .panel-head {
  min-height: 44px !important;
  padding: 8px 10px !important;
  cursor: default !important;
  border-bottom: 1px solid rgba(203, 213, 225, .92) !important;
  background: linear-gradient(180deg, #ffffff, #f3f7fb) !important;
}

body.ui-window-design:not(.view-maponly) .panel-head h2 {
  color: #102033 !important;
  font-size: clamp(13px, .78vw, 15px) !important;
}

body.ui-window-design:not(.view-maponly) .head-actions {
  min-width: 0 !important;
  gap: 6px !important;
}

body.ui-window-design:not(.view-maponly) .window-tabs {
  gap: 7px !important;
  padding: 8px !important;
  border-bottom: 1px solid rgba(203, 213, 225, .86) !important;
  background: #f8fafc !important;
}

body.ui-window-design:not(.view-maponly) .window-tab,
body.ui-window-design:not(.view-maponly) .primary,
body.ui-window-design:not(.view-maponly) .plus-button {
}

body.ui-window-design:not(.view-maponly) .depot-layout,
body.ui-window-design:not(.view-maponly) .sites-layout {
  min-height: 0 !important;
  height: 100% !important;
  padding: 12px !important;
  overflow: hidden !important;
}

body.ui-window-design:not(.view-maponly) #locoList,
body.ui-window-design:not(.view-maponly) #siteList,
body.ui-window-design:not(.view-maponly) #scheduleList,
body.ui-window-design:not(.view-maponly) #archiveList,
body.ui-window-design:not(.view-maponly) #contractList {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

body.ui-window-design:not(.view-maponly) .schedule-list,
body.ui-window-design:not(.view-maponly) .contract-list {
  padding: 12px !important;
}

body.ui-window-design:not(.view-maponly) .depot-row,
body.ui-window-design:not(.view-maponly) .schedule-card,
body.ui-window-design:not(.view-maponly) .contract-card,
body.ui-window-design:not(.view-maponly) .site-card {
  border-color: rgba(203, 213, 225, .95) !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .07) !important;
}

body.ui-window-design:not(.view-maponly) .map-notification {
  right: calc(var(--dash-gap) + var(--dash-orders) + var(--dash-gap)) !important;
  bottom: var(--dash-gap) !important;
  width: min(360px, calc(100vw - var(--dash-orders) - 50px)) !important;
  z-index: 700 !important;
}

body.ui-window-design:not(.view-maponly) .map-toast {
  min-height: 58px !important;
  grid-template-columns: 36px minmax(0, 1fr) 30px !important;
  gap: 9px !important;
  padding: 10px !important;
}

body.ui-window-design:not(.view-maponly) .map-notification-icon {
  width: 34px !important;
  height: 34px !important;
}

body.ui-window-design:not(.view-maponly) .map-notification strong {
  font-size: 14px !important;
}

body.ui-window-design:not(.view-maponly) .map-notification-content span {
  white-space: normal !important;
  line-height: 1.25 !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) {
  background: #0f172a !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) .layout.map-stage {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .98)),
    #0f172a !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) .layout.map-stage > .panel,
body.dark-mode.ui-window-design:not(.view-maponly) .layout.map-stage > .side-panel {
  border-color: rgba(71, 85, 105, .9) !important;
  background: rgba(15, 23, 42, .96) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28) !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) .panel-head,
body.dark-mode.ui-window-design:not(.view-maponly) .window-tabs {
  border-color: rgba(51, 65, 85, .95) !important;
  background: linear-gradient(180deg, #172033, #111827) !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) .panel-head h2 {
  color: #f8fafc !important;
}

/* Polished depot vehicle cards */
body.ui-window-design:not(.view-maponly) #locoList {
  display: grid !important;
  gap: 10px !important;
  padding: 10px 12px 14px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .loco.depot-row {
  position: relative !important;
  grid-template-columns: 42px minmax(0, 1fr) minmax(96px, 112px) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 92px !important;
  margin: 0 !important;
  padding: 12px !important;
  overflow: hidden !important;
  border: 1px solid #cdd8e6 !important;
  border-left: 0 !important;
  background:
    linear-gradient(90deg, rgba(20, 184, 166, .18) 0 5px, transparent 5px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(243,247,252,.96)) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .09) !important;
}

body.ui-window-design:not(.view-maponly) #locoList .loco.depot-row::before {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  background: rgba(20, 184, 166, .42) !important;
}

body.ui-window-design:not(.view-maponly) #locoList .wagon-item.depot-row {
  background:
    linear-gradient(90deg, rgba(180, 83, 9, .2) 0 5px, transparent 5px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,246,241,.96)) !important;
}

body.ui-window-design:not(.view-maponly) #locoList .wagon-item.depot-row::before {
  background: rgba(180, 83, 9, .42) !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  aspect-ratio: 1 !important;
  box-sizing: border-box !important;
  flex: 0 0 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid #15803d !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .24), transparent 46%),
    linear-gradient(180deg, #34d067 0%, #16a34a 58%, #15803d 100%) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(20, 83, 45, .34),
    0 7px 16px rgba(21, 128, 61, .24) !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  background:
    linear-gradient(#ffffff, #ffffff) center / 2px 8px no-repeat,
    linear-gradient(90deg, #ffffff, #ffffff) center / 8px 2px no-repeat !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button::after {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(255, 255, 255, .58) !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button:hover {
  border-color: #166534 !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .3), transparent 48%),
    linear-gradient(180deg, #22c55e 0%, #15803d 62%, #166534 100%) !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(20, 83, 45, .38),
    0 9px 20px rgba(21, 128, 61, .32) !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button:hover::before {
  border-color: #ffffff !important;
  background:
    linear-gradient(#ffffff, #ffffff) center / 2px 8px no-repeat,
    linear-gradient(90deg, #ffffff, #ffffff) center / 8px 2px no-repeat !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button:focus-visible {
  outline: 3px solid rgba(34, 197, 94, .42) !important;
  outline-offset: 2px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-main {
  gap: 9px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-vehicle-name {
  align-items: center !important;
  gap: 8px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-vehicle-name strong {
  color: #102033 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-vehicle-name small {
  max-width: 150px !important;
  padding: 3px 7px !important;
  overflow: hidden !important;
  background: #eef4fb !important;
  color: #52647a !important;
  font-size: 10px !important;
  text-overflow: ellipsis !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-status {
  min-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  padding: 7px 10px !important;
  border: 1px solid #dbe6f3 !important;
  background: linear-gradient(90deg, #eef5ff, #f7fbff) !important;
  color: #40536a !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-metrics {
  min-width: 0 !important;
  gap: 7px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-metrics span {
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 8px !important;
  border: 1px solid #e0e8f2 !important;
  background: #f6f9fd !important;
  color: #334155 !important;
  font-size: 11px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-fuel {
  background: #eefbf5 !important;
  border-color: #cceedd !important;
  color: #166534 !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-fuel-low {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #b91c1c !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #locoList .loco.depot-row {
  border-color: #334155 !important;
  background:
    linear-gradient(90deg, rgba(45, 212, 191, .24) 0 5px, transparent 5px),
    linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(23, 32, 51, .96)) !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #locoList .depot-vehicle-name strong {
  color: #f8fafc !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #locoList .depot-vehicle-name small,
body.dark-mode.ui-window-design:not(.view-maponly) #locoList .depot-status,
body.dark-mode.ui-window-design:not(.view-maponly) #locoList .depot-metrics span {
  border-color: #334155 !important;
  background: #111c2d !important;
  color: #cbd5e1 !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #locoList .depot-locate-button {
  border-color: #4ade80 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .22), transparent 46%),
    linear-gradient(180deg, #22c55e 0%, #15803d 62%, #14532d 100%) !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #locoList .depot-locate-button::before {
  border-color: #ffffff !important;
  background:
    linear-gradient(#ffffff, #ffffff) center / 2px 8px no-repeat,
    linear-gradient(90deg, #ffffff, #ffffff) center / 8px 2px no-repeat !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #locoList .depot-locate-button:hover {
  border-color: #86efac !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .3), transparent 48%),
    linear-gradient(180deg, #4ade80 0%, #16a34a 58%, #14532d 100%) !important;
}

/* Final dashboard corrections */
body.ui-window-design:not(.view-maponly) {
  --dash-left: 32fr;
  --dash-mid: 24fr;
  --dash-plan: 22fr;
  --dash-orders: 22fr;
}

body.ui-window-design:not(.view-maponly) .topbar {
  grid-template-columns: minmax(170px, 11fr) minmax(260px, 43fr) minmax(560px, 45fr) !important;
  overflow: hidden !important;
}

body.ui-window-design:not(.view-maponly) .layout.map-stage {
  width: 100vw !important;
  max-width: 100vw !important;
  grid-template-columns: minmax(0, var(--dash-left)) minmax(0, var(--dash-mid)) minmax(0, var(--dash-plan)) minmax(0, var(--dash-orders)) !important;
  overflow: hidden !important;
}

body.ui-window-design:not(.view-maponly) #contractsPanel {
  min-width: 0 !important;
}

body.ui-window-design:not(.view-maponly) #locoPlanningPanel {
  grid-area: auto !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(1120px, calc(100% - 40px)) !important;
  height: min(650px, calc(100% - 40px)) !important;
  min-width: min(720px, calc(100% - 40px)) !important;
  min-height: 420px !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1800 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28) !important;
}

body.ui-window-design:not(.view-maponly) #locoPlanningPanel.hidden-window {
  display: none !important;
}

body.ui-window-design:not(.view-maponly) #locoPlanningPanel .panel-head {
  cursor: move !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button {
  line-height: 0 !important;
  text-indent: -999px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button::before {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button::after {
  left: 50% !important;
  top: 50% !important;
  width: 24px !important;
  height: 24px !important;
  inset: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* Final right column and notification panel layout */
body.ui-window-design:not(.view-maponly) .layout.map-stage {
  grid-template-areas:
    "map map map contracts"
    "depot sites schedules notifications" !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel {
  grid-area: notifications !important;
}

body.ui-window-design:not(.view-maponly) #contractsPanel,
body.ui-window-design:not(.view-maponly) #notificationsPanel {
  min-width: 0 !important;
  min-height: 0 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification:empty::before {
  content: "Keine Meldungen" !important;
  display: grid !important;
  place-items: center !important;
  min-height: 100% !important;
  color: #64748b !important;
  font-weight: 800 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast {
  width: 100% !important;
  min-height: 58px !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .08) !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast:not(.danger) {
  background: #ffffff !important;
  color: #102033 !important;
  border-color: #d7e2ef !important;
  border-left-color: #0f766e !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast:not(.danger) .map-notification-content span {
  color: #52647a !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast:not(.danger) .map-notification-icon {
  background: #e8faf7 !important;
  border-color: #a7eee3 !important;
  color: #0f766e !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast:not(.danger) .map-notification-close {
  color: #334155 !important;
  background: #f8fafc !important;
  border-color: #d8e4f1 !important;
}

body.ui-window-design:not(.view-maponly) #locoPlanningPanel {
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  width: 95vw !important;
  height: 95vh !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 1240px) {
  body.ui-window-design:not(.view-maponly) .layout.map-stage {
    grid-template-areas:
      "map map"
      "depot notifications" !important;
  }

  body.ui-window-design:not(.view-maponly) #contractsPanel {
    display: none !important;
  }
}

#shopModal .shop-intro-alert {
  grid-area: notice !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 1% !important;
}

#shopModal .shop-switch {
  grid-area: tabs !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2% !important;
  padding: 0 !important;
}

#shopModal .shop-category-info {
  grid-area: info !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 1% !important;
}

.hotel-activity-form label:first-child {
  padding: 8px 10px !important;
}

.hotel-activity-form label:first-child input {
  min-height: 30px !important;
  height: 30px !important;
}

.hotel-activity-form label:first-child .picker-results {
  top: calc(100% + 2px) !important;
}


@media (max-width: 1240px) {
  body.ui-window-design:not(.view-maponly) {
    --dash-top: 50%;
    --dash-bottom-a: 50%;
    --dash-bottom-b: 0%;
    --dash-left: 50%;
    --dash-mid: 50%;
    --dash-plan: 50%;
    --dash-orders: 50%;
  }

  body.ui-window-design:not(.view-maponly) .topbar {
    height: auto !important;
    max-height: none !important;
    grid-template-columns: 24% 34% 42% !important;
  }

  body.ui-window-design:not(.view-maponly) .layout.map-stage {
    height: calc(100vh - 76px) !important;
    grid-template-columns: 50% 50% !important;
    grid-template-rows: 50% 50% !important;
    grid-template-areas:
      "map map"
      "depot schedules" !important;
  }

  body.ui-window-design:not(.view-maponly) #locoPlanningPanel,
  body.ui-window-design:not(.view-maponly) #sitesPanel {
    display: none !important;
  }

  body.ui-window-design:not(.view-maponly) .map-notification {
    right: var(--dash-gap) !important;
    width: min(420px, calc(100vw - 28px)) !important;
  }
}

@media (max-width: 760px) {
  body.ui-window-design:not(.view-maponly) .topbar {
    grid-template-columns: 1fr !important;
    height: auto !important;
    padding: 8px !important;
  }

  body.ui-window-design:not(.view-maponly) .top-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  body.ui-window-design:not(.view-maponly) .layout.map-stage {
    height: auto !important;
    min-height: calc(100vh - 150px) !important;
    overflow: auto !important;
    grid-template-columns: 100% !important;
    grid-template-rows: 32vh repeat(4, minmax(240px, 46vh)) !important;
    grid-template-areas:
      "map"
      "contracts"
      "depot"
      "schedules"
      "sites" !important;
  }
}

/* Requested notification column final override */
body.ui-window-design:not(.view-maponly) .layout.map-stage {
  grid-template-areas:
    "map map map contracts"
    "depot sites schedules notifications" !important;
}

body.ui-window-design:not(.view-maponly) #contractsPanel {
  grid-area: contracts !important;
  display: grid !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel {
  grid-area: notifications !important;
  display: grid !important;
}

body.ui-window-design:not(.view-maponly) #locoPlanningPanel {
  position: fixed !important;
  left: 50vw !important;
  top: 50vh !important;
  width: 95vw !important;
  height: 95vh !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
  transform: translate(-50%, -50%) !important;
}

body.ui-window-design:not(.view-maponly) #locoPlanningPanel.hidden-window {
  display: none !important;
}

@media (max-width: 1240px) {
  body.ui-window-design:not(.view-maponly) .layout.map-stage {
    grid-template-areas:
      "map map"
      "depot notifications" !important;
  }

  body.ui-window-design:not(.view-maponly) #contractsPanel,
  body.ui-window-design:not(.view-maponly) #sitesPanel {
    display: none !important;
  }
}

#shopModal .shop-intro-alert,
#shopModal .shop-category-info {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 1% !important;
  border: 1px solid #b8d6e8 !important;
  background: #dff2fb !important;
  color: #075985 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#shopModal .shop-intro-alert {
  grid-area: notice !important;
}

#shopModal .shop-category-info {
  grid-area: info !important;
}

#shopModal .shop-switch {
  grid-area: tabs !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 32%) !important;
  justify-content: space-between !important;
  gap: 2% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#shopModal .shop-tab {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  border: 1px solid #c6d4e4 !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#shopModal .shop-tab.active {
  border-color: #1d4ed8 !important;
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .18) !important;
}

#shopModal .shop-location-select {
  display: grid !important;
  grid-template-columns: 25% 75% !important;
  gap: 2% !important;
  align-items: center !important;
}

#shopModal .shop-location-select select {
  width: 100% !important;
  min-width: 0 !important;
}

#shopModal .car-card .shop-acquire-controls {
  grid-template-columns: 34% 64% !important;
}

.hotel-activity-card {
  width: 95vw !important;
  height: 95vh !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
  display: grid !important;
  grid-template-rows: 8% 82% 10% !important;
  overflow: hidden !important;
}

.hotel-activity-form {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 32% 32% 32% !important;
  grid-template-rows: 13% 31% 32% 18% !important;
  gap: 2% !important;
  padding: 2% !important;
  overflow: hidden !important;
}

.hotel-activity-form label {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  align-content: start !important;
  gap: 8% !important;
  padding: 3% !important;
}

.hotel-activity-form label:first-child {
  grid-column: 1 / 2 !important;
  grid-row: 1 !important;
  padding: 2.5% !important;
}

.hotel-activity-form label:nth-child(2) {
  grid-column: 2 / 3 !important;
  grid-row: 1 !important;
}

.hotel-activity-form label:nth-child(3) {
  grid-column: 3 / 4 !important;
  grid-row: 1 !important;
}

.hotel-activity-form input {
  width: 100% !important;
  min-height: 0 !important;
  height: 34px !important;
  padding: 0 10px !important;
}

.hotel-activity-form label:first-child input {
  height: 30px !important;
  min-height: 30px !important;
}

.hotel-activity-form label:first-child .picker-results {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  right: 0 !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  z-index: 2000 !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
}

.hotel-activity-form .hotel-offer-list {
  grid-column: 1 / 4 !important;
  grid-row: 2 / 4 !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, 49%) !important;
  align-content: start !important;
  gap: 2% !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

.hotel-activity-form .pkw-activity-preview {
  grid-column: 1 / 4 !important;
  grid-row: 4 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, 24%) !important;
  gap: 1.333% !important;
  overflow: hidden !important;
}

@media (max-width: 1100px) {

  .hotel-activity-form {
    grid-template-columns: 100% !important;
    grid-template-rows: 10% 10% 10% 50% 16% !important;
    overflow-y: auto !important;
  }

  .hotel-activity-form label:first-child,
  .hotel-activity-form label:nth-child(2),
  .hotel-activity-form label:nth-child(3),
  .hotel-activity-form .hotel-offer-list,
  .hotel-activity-form .pkw-activity-preview {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

#shopModal #closeShopModal {
  width: 32px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid #b9c8d8 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, .08) !important;
}

.hotel-activity-card {
  grid-template-rows: 8% 80% 12% !important;
}

.hotel-activity-card .modal-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 14%) !important;
  align-items: center !important;
  gap: 1.5% !important;
  padding: 0 2% !important;
  border-top: 1px solid #d3deeb !important;
  background: #ffffff !important;
}

.hotel-activity-card #hotelActivityHint {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #b91c1c !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.hotel-activity-card #saveHotelActivity {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 18px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, .24) !important;
}

.hotel-activity-card #saveHotelActivity:hover {
  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;
}

.shop-image-popup {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: none;
  place-items: center;
  padding: 2%;
  background: rgba(15, 23, 42, .58);
}

.shop-image-popup.open {
  display: grid;
}.shop-image-dialog {
  width: 74vw;
  height: 78vh;
  display: grid;
  grid-template-rows: 8% 92%;
  overflow: hidden;
}.shop-image-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
}.shop-image-head strong {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}.shop-image-head strong::before {
  content: "Bild";
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  font-weight: 900;
}

.shop-image-close {
  width: 34px;
  height: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #b9c8d8;
  background: #ffffff;
  color: #334155;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.shop-image-close:hover {
  border-color: #2563eb;
  color: #1d4ed8;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .16);
}

.shop-image-stage {
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2.5%;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
    #f8fafc;
  background-size: 32px 32px;
}

.shop-image-stage .shop-image-large {
  width: min(100%, 980px) !important;
  height: min(100%, 620px) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px #dbe5f0 !important;
  cursor: default !important;
}

.shop-image-stage .shop-image-large img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 3% !important;
}

.shop-image-stage .shop-image-full {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px #dbe5f0 !important;
}/* Hard fit for shop image zoom: never crop the source image */
.shop-image-dialog {
  width: 86vw !important;
  height: 88vh !important;
  max-width: 86vw !important;
  max-height: 88vh !important;
  display: grid !important;
  grid-template-rows: 7% 93% !important;
  overflow: hidden !important;
}

.shop-image-stage {
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 3% !important;
  overflow: hidden !important;
}

.shop-image-fit-frame {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.shop-image-fit-frame .shop-image-full {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 92% !important;
  max-height: 84% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

.shop-image-stage > .shop-image-large {
  width: 86% !important;
  height: 78% !important;
  max-width: 86% !important;
  max-height: 78% !important;
  overflow: visible !important;
}

/* Final notification center redesign */
body.ui-window-design:not(.view-maponly) #notificationsPanel {
  display: grid !important;
  grid-template-rows: 44px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid #cbd8e7 !important;
  background: #f6f9fc !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .09) !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .panel-head {
  min-height: 44px !important;
  height: 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  border-bottom: 1px solid #d8e4f1 !important;
  background: linear-gradient(180deg, #ffffff, #edf4fb) !important;
  cursor: move !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .panel-head h2 {
  min-width: 0 !important;
  color: #102033 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .head-actions span {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  background: #e8faf7 !important;
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 10px !important;
  overflow-y: auto !important;
  background:
    linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px),
    linear-gradient(rgba(148, 163, 184, .08) 1px, transparent 1px),
    #f8fafc !important;
  background-size: 22px 22px !important;
  pointer-events: auto !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification:empty::before {
  content: "Keine Benachrichtigungen" !important;
  min-height: 100% !important;
  display: grid !important;
  place-items: center !important;
  border: 1px dashed #cbd8e7 !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast {
  width: 100% !important;
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) 30px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  border: 1px solid #dbe6f2 !important;
  border-left: 4px solid #0f766e !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #102033 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08) !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast.danger {
  border-color: #fecaca !important;
  border-left-color: #dc2626 !important;
  background: linear-gradient(135deg, #fff7f7, #ffffff) !important;
  color: #102033 !important;
  box-shadow: 0 8px 20px rgba(127, 29, 29, .10) !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #9be7dc !important;
  background: #e8faf7 !important;
  color: #0f766e !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast.danger .map-notification-icon {
  border-color: #fecaca !important;
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-content {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-row {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: baseline !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification strong {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #102033 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-time {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-content span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-close {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid #d4dfeb !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-close:hover {
  border-color: #dc2626 !important;
  background: #fff1f2 !important;
  color: #b91c1c !important;
}

/* Final scroll behavior for dashboard windows */
body.ui-window-design:not(.view-maponly) #depotPanel,
body.ui-window-design:not(.view-maponly) #sitesPanel,
body.ui-window-design:not(.view-maponly) #overviewPanel,
body.ui-window-design:not(.view-maponly) #notificationsPanel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.ui-window-design:not(.view-maponly) #depotPanel .panel-head,
body.ui-window-design:not(.view-maponly) #sitesPanel .panel-head,
body.ui-window-design:not(.view-maponly) #overviewPanel .panel-head,
body.ui-window-design:not(.view-maponly) #notificationsPanel .panel-head,
body.ui-window-design:not(.view-maponly) #overviewPanel .window-tabs {
  flex: 0 0 auto !important;
}

body.ui-window-design:not(.view-maponly) #depotPanel .depot-layout,
body.ui-window-design:not(.view-maponly) #sitesPanel .sites-layout,
body.ui-window-design:not(.view-maponly) #overviewPanel .schedule-view.active,
body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.ui-window-design:not(.view-maponly) #depotPanel .depot-layout,
body.ui-window-design:not(.view-maponly) #sitesPanel .sites-layout {
  align-content: start !important;
  height: auto !important;
}

body.ui-window-design:not(.view-maponly) #depotPanel .depot-stock,
body.ui-window-design:not(.view-maponly) #depotPanel #locoList,
body.ui-window-design:not(.view-maponly) #sitesPanel #siteList {
  min-height: 0 !important;
}

body.ui-window-design:not(.view-maponly) #depotPanel .depot-stock,
body.ui-window-design:not(.view-maponly) #depotPanel #locoList,
body.ui-window-design:not(.view-maponly) #sitesPanel #siteList {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.ui-window-design:not(.view-maponly) #overviewPanel .schedule-view {
  min-height: 0 !important;
}

body.ui-window-design:not(.view-maponly) #overviewPanel .schedule-view:not(.active) {
  display: none !important;
}

body.ui-window-design:not(.view-maponly) #overviewPanel #archivePanel.active {
  display: flex !important;
  flex-direction: column !important;
}

body.ui-window-design:not(.view-maponly) #overviewPanel #archivePanel.active #archiveList {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 10px !important;
}

/* Final stacking: purchase confirmation must sit above the shop modal */
.vehicle-purchase-popup {
  z-index: 14000 !important;
}

.station-special-marker {
  font-size: 0 !important;
}

.station-marker-segment svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel {
  border-color: rgba(148, 163, 184, .26) !important;
  background: #0f172a !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32) !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .panel-head {
  border-bottom-color: rgba(148, 163, 184, .22) !important;
  background: linear-gradient(180deg, #182235, #101827) !important;
}


/* assets/css/app/chunk-07.css */

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .panel-head h2 {
  color: #f8fafc !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .head-actions span {
  background: rgba(45, 212, 191, .14) !important;
  color: #99f6e4 !important;
  border: 1px solid rgba(45, 212, 191, .22) !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification {
  background:
    linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px),
    linear-gradient(rgba(148, 163, 184, .08) 1px, transparent 1px),
    #0b1120 !important;
  background-size: 22px 22px !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification:empty::before {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .76) !important;
  color: #94a3b8 !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast {
  border-color: rgba(148, 163, 184, .22) !important;
  border-left-color: #2dd4bf !important;
  background: rgba(15, 23, 42, .94) !important;
  color: #e5edf7 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .30) !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast.danger {
  border-color: rgba(248, 113, 113, .34) !important;
  border-left-color: #ef4444 !important;
  background: linear-gradient(135deg, rgba(127, 29, 29, .48), rgba(15, 23, 42, .96)) !important;
  color: #fee2e2 !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-icon {
  border-color: rgba(45, 212, 191, .28) !important;
  background: rgba(20, 184, 166, .14) !important;
  color: #99f6e4 !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-toast.danger .map-notification-icon {
  border-color: rgba(248, 113, 113, .42) !important;
  background: rgba(127, 29, 29, .46) !important;
  color: #fecaca !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification strong {
  color: #f8fafc !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-time {
  color: #a8b6c8 !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-content span {
  color: #cbd5e1 !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-close {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(30, 41, 59, .84) !important;
  color: #cbd5e1 !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification-close:hover {
  border-color: rgba(248, 113, 113, .56) !important;
  background: rgba(127, 29, 29, .42) !important;
  color: #fecaca !important;
}

body.ui-window-design:not(.view-maponly) .time-controls {
  flex: 0 0 224px !important;
  width: 224px !important;
  min-width: 224px !important;
  gap: 4px !important;
  overflow: visible !important;
}

body.ui-window-design:not(.view-maponly) .time-controls .time-button {
  min-width: 32px !important;
  padding: 0 7px !important;
}

body.ui-window-design:not(.view-maponly) .time-controls .time-button[data-speed="0"] {
  flex: 0 0 64px !important;
  width: 64px !important;
  min-width: 64px !important;
  padding: 0 11px 0 25px !important;
}

/* Final dark mode polish for shop, site builder and schedule time cards */
body.dark-mode .timeline .time-grid {
  background: #0b1423 !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #dbe7f6 !important;
}

body.dark-mode .timeline .time-head,
body.dark-mode .timeline .time-grid span,
body.dark-mode .timeline .time-grid b {
  color: #dbe7f6 !important;
}

body.dark-mode .timeline .actual {
  color: #86efac !important;
}

body.dark-mode .activity-trip-stop,
body.dark-mode #activityModal.activity-view-mode .activity-trip-stop {
  background: linear-gradient(180deg, #0f1a2c, #0b1423) !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #e5edf7 !important;
}

body.dark-mode .activity-trip-times {
  color: #b6c5d8 !important;
}

body.dark-mode .activity-trip-times span {
  color: #cbd5e1 !important;
}

body.dark-mode .activity-trip-times b,
body.dark-mode .activity-trip-stop-main strong {
  color: #f8fafc !important;
}

body.dark-mode .activity-trip-dot {
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  color: #ffffff !important;
}

body.dark-mode #shopModal #closeShopModal {
  background: #162338 !important;
  border-color: #3a4c65 !important;
  color: #e5edf7 !important;
}

body.dark-mode #shopModal .shop-intro-alert,
body.dark-mode #shopModal .shop-category-info {
  background: rgba(14, 165, 233, .12) !important;
  border-color: rgba(56, 189, 248, .28) !important;
  color: #bae6fd !important;
}

body.dark-mode #shopModal .shop-tab {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, .30) !important;
  color: #dbe7f6 !important;
}

body.dark-mode #shopModal .shop-tab.active {
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  border-color: rgba(96, 165, 250, .78) !important;
  color: #ffffff !important;
}body.dark-mode #baseModal .base-modal-card,
body.dark-mode .base-modal-card {
  color: #e5edf7 !important;
}

body.dark-mode #baseModal .base-box,
body.dark-mode #baseModal .base-build-section {
  background: #0b1220 !important;
}

body.dark-mode #baseModal .base-build-section label {
  color: #cbd5e1 !important;
}

body.dark-mode #baseModal .base-build-section input,
body.dark-mode #baseModal .base-build-section select {
  background: #101827 !important;
  border-color: rgba(148, 163, 184, .34) !important;
  color: #f8fafc !important;
}

body.dark-mode #baseModal .base-map-picker {
  background: #0f1a2c !important;
  border-color: rgba(148, 163, 184, .28) !important;
}

body.dark-mode #baseModal .base-map-picker-head strong {
  color: #f8fafc !important;
}

body.dark-mode #baseModal #basePreview.route-preview {
  background: linear-gradient(180deg, #111827, #0d1625) !important;
  border-color: rgba(148, 163, 184, .30) !important;
  color: #e5edf7 !important;
}

body.dark-mode #baseModal #basePreview strong {
  color: #f8fafc !important;
}

body.dark-mode #baseModal #basePreview span,
body.dark-mode #baseModal .site-cost-row span {
  color: #cbd5e1 !important;
}

body.dark-mode #baseModal .site-cost-row {
  background: #0f172a !important;
  border-color: rgba(148, 163, 184, .26) !important;
}

.track-rental-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.track-rental-row .secondary-button {
  min-height: 34px;
  white-space: nowrap;
  padding-inline: 14px;
}.track-rental-card {
  width: min(1160px, 95vw);
  height: min(760px, 92vh);
  overflow: hidden;
}

.track-rental-new-card {
  width: min(1260px, 96vw);
  height: min(820px, 94vh);
}

.track-rental-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.track-rental-add-button {
  width: 38px;
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #1f75ff;
  background: linear-gradient(135deg, #0f8b8d, #2563eb);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(37, 99, 235, .18);
}

.track-rental-body {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  background: #f8fafc;
}

.track-rental-overview-body {
  grid-template-rows: minmax(0, 1fr) auto;
}

.track-rental-new-body {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.track-rental-content {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.15fr);
  gap: 14px;
  overflow: hidden;
}

.track-rental-map-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #dbe5ef;
  background: #fff;
}

.track-rental-map {
  min-height: 360px;
  width: 100%;
  background: #eaf1f8;
}

.track-rental-map-hint {
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.track-rental-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.track-rental-controls label,
.track-rental-required {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #dbe5ef;
  background: #fff;
  color: #334155;
  font-weight: 800;
}

.track-rental-required {
  min-height: 58px;
  align-content: center;
  color: #0f766e;
}

.track-rental-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #dbe5ef;
  overflow: hidden;
  background: #fff;
}

.track-rental-overview-section {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.track-rental-section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff, #f1f5f9);
}

.track-rental-section-head h3 {
  margin: 0;
  font-size: 15px;
  color: #0f172a;
}

.track-rental-section-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.track-rental-overview-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.track-rental-overview-tabs .window-tab {
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: 5px 12px;
  font-size: 11px;
  line-height: 1;
  box-shadow: none;
}

.track-rental-list {
  min-height: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  overflow: auto;
  padding: 12px;
}

.track-rental-offer,
.track-rental-active,
.track-rental-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #cfe0f0;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.track-rental-offer,
.track-rental-active {
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.track-rental-offer:hover,
.track-rental-active:hover,
.track-rental-offer.selected,
.track-rental-active.selected {
  border-color: #0f8b8d;
  box-shadow: 0 12px 26px rgba(15, 139, 141, .14);
}

.track-rental-offer.selected,
.track-rental-active.selected {
  background: #effefe;
}

.track-rental-offer strong,
.track-rental-active strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
}

.track-rental-offer span,
.track-rental-active span,
.track-rental-active small,
.track-rental-empty {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.track-rental-offer.too-short {
  opacity: .62;
}

.track-rental-offer.blocked {
  border-color: #f8c7c7;
  background: #fff5f5;
  opacity: .76;
}

.track-rental-active {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.track-rental-active b {
  color: #0f766e;
}

.track-rental-empty {
  grid-template-columns: 1fr;
  box-shadow: none;
}

.track-rental-empty-action {
  grid-template-columns: minmax(0, 1fr) auto;
}

.track-rental-empty-action .primary {
  width: 36px;
  min-height: 32px;
  padding: 0;
  font-size: 18px;
}body.dark-mode .track-rental-card,
body.dark-mode .track-rental-body,
body.dark-mode .track-rental-section,
body.dark-mode .track-rental-map-panel {
  color: #e5edf7 !important;
}

body.dark-mode .track-rental-controls label,
body.dark-mode .track-rental-required,
body.dark-mode .track-rental-offer,
body.dark-mode .track-rental-active,
body.dark-mode .track-rental-empty {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #e5edf7 !important;
}

body.dark-mode .track-rental-section-head span,
body.dark-mode .track-rental-offer span,
body.dark-mode .track-rental-active span,
body.dark-mode .track-rental-active small,
body.dark-mode .track-rental-empty {
  color: #cbd5e1 !important;
}

body.dark-mode .track-rental-offer.selected,
body.dark-mode .track-rental-active.selected {
  background: rgba(15, 118, 110, .26) !important;
  border-color: rgba(94, 234, 212, .72) !important;
}

body.dark-mode .track-rental-offer.blocked {
  background: rgba(127, 29, 29, .26) !important;
  border-color: rgba(248, 113, 113, .55) !important;
}

body.dark-mode .track-rental-map-hint {
  color: #cbd5e1 !important;
}

body.dark-mode .track-rental-active b,
body.dark-mode .track-rental-required {
  color: #5eead4 !important;
}

body.dark-mode .track-rental-add-button {
  border-color: rgba(96, 165, 250, .72) !important;
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  color: #f8fafc !important;
}

@media (max-width: 860px) {
  .track-rental-row,
  .track-rental-controls,
  .track-rental-content,
  .track-rental-offer,
  .track-rental-active {
    grid-template-columns: 1fr;
  }

  .track-rental-map {
    min-height: 260px;
  }

  .track-rental-body {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .track-rental-new-body {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
}

.admin-inline-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(248, 251, 255, .92);
}

.admin-inline-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(130px, .8fr)) auto;
  gap: 10px;
  align-items: end;
}

.admin-inline-form .admin-field {
  min-width: 0;
}

.admin-inline-form input {
  width: 100%;
}

.admin-country-boundaries .admin-inline-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-country-boundaries .admin-inline-form > div {
  display: grid;
  gap: 3px;
}

.admin-boundary-input {
  width: min(100%, 320px);
  min-width: 220px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, .55);
  background: #fff;
  color: #0f172a;
  font-weight: 800;
}

.admin-boundary-color-cell {
  display: inline-grid;
  grid-template-columns: 38px auto;
  align-items: center;
  gap: 8px;
}

.admin-boundary-color {
  width: 38px;
  height: 34px;
  padding: 2px;
  border: 1px solid rgba(148, 163, 184, .55);
  background: #fff;
  cursor: pointer;
}

.admin-boundary-color-cell b {
  display: block;
  width: 52px;
  height: 8px;
  background: var(--boundary-preview, #2563eb);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .1);
}

.admin-inline-note {
  color: #58708f;
  font-weight: 700;
  font-size: 12px;
}

.admin-track-card,
.admin-rank-card {
  min-height: 112px;
}

.admin-track-overview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.admin-track-overview-head strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
}

.admin-track-overview-head span {
  display: block;
  margin-top: 3px;
  color: #58708f;
  font-weight: 800;
  font-size: 12px;
}

.admin-track-filter {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid #c8d6e6;
  background: #eef5fb;
}

.admin-track-filter button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #334155;
  font-weight: 900;
}

.admin-track-filter button.active {
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #fff;
}

#adminModal #adminCards.admin-track-place-grid {
  grid-template-columns: 1fr !important;
}

.admin-track-place-card {
  position: relative;
  padding-right: 132px !important;
  min-height: 104px;
}

.admin-track-place-card .admin-card-action {
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-width: 104px;
  min-height: 34px;
  border: 1px solid #9fb8d4;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}.admin-track-modal-card {
  width: min(860px, calc(100vw - 36px));
  height: auto;
  max-height: min(720px, 86vh);
  overflow: hidden;
}

.admin-track-modal-body {
  display: grid;
  grid-template-columns: minmax(240px, 34%) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding: 16px;
  background: #f8fafc;
}

.admin-track-picker,
.admin-track-editor {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e3ef;
  background: #fff;
}

.admin-track-selected {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #cbe7e2;
  background: #eefcf9;
  color: #0f172a;
  font-weight: 900;
}

.admin-track-selected span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
}

.admin-track-form {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(110px, .7fr) minmax(120px, .7fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-track-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.admin-track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e3ef;
  background: #f8fbff;
}

.admin-track-row strong {
  color: #0f172a;
}

.admin-track-row span {
  display: block;
  margin-top: 3px;
  color: #58708f;
  font-size: 12px;
  font-weight: 800;
}

.admin-track-footer {
  padding: 0 16px 16px;
  background: #f8fafc;
}

body.dark-mode .admin-inline-editor {
  background: rgba(15, 23, 42, .88);
  border-color: rgba(96, 165, 250, .24);
}

body.dark-mode .admin-inline-note {
  color: #b8c7dc;
}

body.dark-mode .admin-boundary-input {
  border-color: #334155;
  background: #0f172a;
  color: #e5edf7;
}

body.dark-mode .admin-boundary-color {
  border-color: #334155;
  background: #0f172a;
}

body.dark-mode .admin-track-overview-head strong,
body.dark-mode .admin-track-row strong {
  color: #f8fafc;
}

body.dark-mode .admin-track-overview-head span,
body.dark-mode .admin-track-row span {
  color: #cbd5e1;
}

body.dark-mode .admin-track-filter {
  background: #111827;
  border-color: rgba(148, 163, 184, .28);
}

body.dark-mode .admin-track-filter button {
  color: #cbd5e1;
}body.dark-mode .admin-track-modal-card,
body.dark-mode .admin-track-modal-body,
body.dark-mode .admin-track-footer {
  color: #e5edf7;
}

body.dark-mode .admin-track-picker,
body.dark-mode .admin-track-editor,
body.dark-mode .admin-track-row {
  background: #111827;
  border-color: rgba(148, 163, 184, .28);
}

body.dark-mode .admin-track-selected {
  background: rgba(20, 184, 166, .11);
  border-color: rgba(45, 212, 191, .32);
  color: #f8fafc;
}

body.dark-mode .admin-track-selected span {
  color: #5eead4;
}

.admin-cargo-assignment {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe4ef;
  background: #fff;
}

.admin-cargo-assignment strong {
  display: block;
  color: #0f172a;
}

.admin-cargo-assignment span {
  color: #58708f;
  font-weight: 800;
  font-size: 12px;
}

.admin-cargo-wagon-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.admin-cargo-wagon-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #d7e4f2;
  background: #f8fbff;
}

.admin-cargo-wagon-row input {
  margin-top: 4px;
}

.admin-cargo-wagon-row strong,
.admin-cargo-wagon-row small {
  display: block;
}

.admin-cargo-wagon-row small {
  margin-top: 3px;
  color: #64748b;
  font-weight: 800;
}

body.dark-mode .admin-cargo-assignment,
body.dark-mode .admin-cargo-wagon-row {
  background: #111827;
  border-color: rgba(148, 163, 184, .28);
}

body.dark-mode .admin-cargo-assignment strong,
body.dark-mode .admin-cargo-wagon-row strong {
  color: #f8fafc;
}

body.dark-mode .admin-cargo-assignment span,
body.dark-mode .admin-cargo-wagon-row small {
  color: #cbd5e1;
}

/* Keep the header search suggestions above the Leaflet map and dashboard panels. */
body:not(.view-maponly):not(.ui-window-design) .topbar {
  overflow: visible !important;
  z-index: 980 !important;
}

body.ui-window-design:not(.view-maponly) .topbar {
  overflow: visible !important;
  z-index: 5200 !important;
}

body:not(.view-maponly):not(.ui-window-design) .global-search,
body.ui-window-design:not(.view-maponly) .global-search {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

body:not(.view-maponly):not(.ui-window-design) #globalResults.search-results,
body.ui-window-design:not(.view-maponly) #globalResults.search-results {
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
}

body.ui-window-design #locoPlanningPanel,
body.ui-window-design:not(.view-maponly) #locoPlanningPanel:not(.hidden-window) {
  z-index: 7000 !important;
}

body .modal.open,
body.ui-window-design .modal.open,
body.ui-window-design #accountPanel.modal.open {
  z-index: 8000 !important;
}

body:not(.dark-mode) .global-search input,
body:not(.dark-mode).ui-window-design .global-search input,
body:not(.dark-mode).ui-window-design:not(.view-maponly) .global-search input {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, .75) !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(15, 23, 42, .10) !important;
}

body:not(.dark-mode) .global-search input::placeholder,
body:not(.dark-mode).ui-window-design .global-search input::placeholder,
body:not(.dark-mode).ui-window-design:not(.view-maponly) .global-search input::placeholder {
  color: #64748b !important;
}

body.view-planningonly {
  overflow: hidden !important;
}

html.view-planningonly body .topbar,
body.view-planningonly .topbar,
body.view-planningonly .window-dock,
body.view-planningonly #map,
body.view-planningonly .layout.map-stage > :not(#locoPlanningPanel) {
  display: none !important;
}

body.view-planningonly .layout.map-stage,
body.ui-window-design.view-planningonly .layout.map-stage {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.view-planningonly #locoPlanningPanel,
body.ui-window-design.view-planningonly #locoPlanningPanel,
body.ui-window-design.view-planningonly #locoPlanningPanel:not(.hidden-window) {
  display: grid !important;
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  z-index: 2500 !important;
}

body.view-planningonly #locoPlanningPanel.hidden-window {
  display: grid !important;
}

body.view-planningonly #closePlanningPopup {
  display: none !important;
}


/* Final used-shop and admin-credit layout */
#shopModal .shop-switch {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

#shopModal .used-shop-card span {
  line-height: 1.35 !important;
}

#adminUserModal .admin-user-actions-panel.active {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1100px) {
  #shopModal .shop-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #adminUserModal .admin-user-actions-panel.active {
    grid-template-columns: 1fr !important;
  }
}

/* Absolute last override for the external planning window. */
html:has(body.view-planningonly),
body.view-planningonly {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

html.view-planningonly body header.topbar,
html.view-planningonly body .topbar,
body.view-planningonly header.topbar,
body.view-planningonly .topbar,
body.ui-window-design.view-planningonly header.topbar,
body.ui-window-design.view-planningonly .topbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.view-planningonly #locoPlanningPanel,
body.ui-window-design.view-planningonly #locoPlanningPanel,
body.ui-window-design.view-planningonly #locoPlanningPanel.hidden-window {
  display: grid !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  transform: none !important;
}

/* Strongest planning-only cleanup: no app header in external planning window. */
html:has(body.view-planningonly),
body.view-planningonly {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.view-planningonly header.topbar,
body.view-planningonly .topbar,
body.ui-window-design.view-planningonly header.topbar,
body.ui-window-design.view-planningonly .topbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body.view-planningonly #locoPlanningPanel .panel-head {
  position: relative !important;
  z-index: 2 !important;
}

body:not(.dark-mode) #globalResults.search-results {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(148, 163, 184, .72) !important;
}

body:not(.dark-mode) #globalResults.search-results .result strong,
body:not(.dark-mode) #globalResults.search-results .result span {
  color: #0f172a !important;
}

body:not(.dark-mode) #globalResults.search-results .result small,
body:not(.dark-mode) #globalResults.search-results .result em {
  color: #475569 !important;
}

body #companyCreateModal .company-create-card,
body.ui-window-design #companyCreateModal .company-create-card {
  width: min(540px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(560px, 82vh) !important;
  align-self: center !important;
}

body #companyCreateModal .company-create-body,
body.ui-window-design #companyCreateModal .company-create-body {
  overflow: auto !important;
}

@media (max-width: 1120px) {
  .admin-inline-form {
    grid-template-columns: 1fr 1fr;
  }

  .admin-track-form {
    grid-template-columns: 1fr 1fr;
  }

  .admin-track-overview-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .admin-inline-form {
    grid-template-columns: 1fr;
  }

  .admin-track-overview-head,
  .admin-track-modal-body,
  .admin-track-form {
    grid-template-columns: 1fr;
  }

  .admin-track-place-card {
    padding-right: 12px !important;
    padding-bottom: 58px !important;
  }
}

body.dark-mode .schedule-edit-stops {
  background: #172235 !important;
  border-color: #334155 !important;
}

body.dark-mode .schedule-edit-stops-head strong,
body.dark-mode .schedule-edit-stop-result strong {
  color: #f8fafc !important;
}

body.dark-mode .schedule-edit-stops-head span,
body.dark-mode .schedule-edit-stop-hint,
body.dark-mode .schedule-edit-stop-result small {
  color: #cbd5e1 !important;
}

body.dark-mode .schedule-edit-stop-result {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

body.dark-mode .schedule-edit-stop-result:hover {
  background: #1e3a8a !important;
}

body.dark-mode .schedule-edit-stop-result b {
  color: #93c5fd !important;
}

#adminModal .admin-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid #dbe3ee;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

#adminModal .admin-data-table {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

#adminModal .admin-data-table th,
#adminModal .admin-data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e5edf5;
  text-align: left;
  vertical-align: middle;
}

#adminModal .admin-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#adminModal .admin-data-table tbody tr:last-child td {
  border-bottom: 0;
}

#adminModal .admin-data-table tr.admin-data-card,
#adminModal .admin-data-table tr.admin-data-card:hover {
  display: table-row !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
}

#adminModal .admin-data-table tr.admin-data-card:hover td {
  background: #eff6ff;
}

#adminModal .admin-data-table strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
}

#adminModal .admin-data-table small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.25;
}

#adminModal .admin-table-thumb {
  width: 86px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbe3ee;
  background: linear-gradient(180deg, #f8fafc 0%, #edf3f9 100%);
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

#adminModal .admin-table-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

#adminModal .admin-table-actions {
  width: 96px;
  min-width: 96px;
  white-space: nowrap;
}

#adminModal .admin-table-actions .admin-delete,
#adminModal .admin-table-actions .admin-card-action {
  position: static !important;
  display: inline-grid;
  vertical-align: middle;
  margin-left: 6px;
}

#adminModal .admin-table-actions .admin-card-action {
  width: auto;
  min-width: 34px;
  padding: 0 10px;
}

#adminModal .admin-table-empty {
  padding: 28px 16px !important;
  color: #64748b;
  text-align: center !important;
}

#adminModal .admin-card-grid:has(.admin-table-wrap),
#adminModal #adminCards:has(.admin-table-wrap) {
  display: block !important;
  padding: 16px !important;
}

body.dark-mode #adminModal .admin-table-wrap {
  border-color: rgba(71, 85, 105, .8);
  background: rgba(15, 23, 42, .92);
  box-shadow: none;
}

body.dark-mode #adminModal .admin-data-table th {
  background: #111827;
  color: #cbd5e1;
  border-color: rgba(71, 85, 105, .8);
}

body.dark-mode #adminModal .admin-data-table td {
  border-color: rgba(71, 85, 105, .65);
  color: #e2e8f0;
}

body.dark-mode #adminModal .admin-data-table tr.admin-data-card:hover td {
  background: rgba(37, 99, 235, .18);
}

body.dark-mode #adminModal .admin-data-table strong {
  color: #f8fafc;
}

body.dark-mode #adminModal .admin-data-table small,
body.dark-mode #adminModal .admin-table-empty {
  color: #94a3b8;
}

body.dark-mode #adminModal .admin-table-thumb {
  border-color: rgba(71, 85, 105, .8);
  background: #0f172a;
  color: #cbd5e1;
}

#adminUserModal .admin-user-detail-card {
  width: min(1080px, 96vw);
  height: min(92vh, 820px);
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

#adminUserModal .admin-user-detail {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

#adminUserModal .admin-user-summary,
#adminUserModal .admin-user-stats {
  display: block;
}

#adminUserModal .admin-user-map-card,
#adminUserModal .admin-user-assets,
#adminUserModal .admin-user-password {
  grid-column: 1 / -1;
}

#adminUserModal .admin-user-table-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

#adminUserModal .admin-user-table-panel > strong {
  color: #0f172a;
  font-size: 15px;
}

#adminUserModal .admin-user-table-panel > span {
  color: #64748b;
  font-size: 12px;
}

#adminUserModal .admin-user-assets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#adminUserModal .admin-user-assets-grid > div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

#adminUserModal .admin-user-assets-grid b {
  color: #334155;
  font-size: 13px;
}

#adminUserModal .admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #dbe3ee;
  background: #ffffff;
  box-shadow: none;
}

#adminUserModal .admin-data-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

#adminUserModal .admin-data-table th,
#adminUserModal .admin-data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5edf5;
  text-align: left;
  vertical-align: middle;
}

#adminUserModal .admin-data-table th {
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

#adminUserModal .admin-data-table tbody tr:last-child td {
  border-bottom: 0;
}

#adminUserModal .admin-data-table td:first-child {
  width: 46%;
  color: #64748b;
  font-weight: 700;
}

#adminUserModal .admin-data-table strong {
  color: #0f172a;
  font-size: 13px;
}

body.dark-mode #adminUserModal .admin-user-table-panel,
body.dark-mode #adminUserModal .admin-table-wrap {
  background: #172235;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode #adminUserModal .admin-data-table th {
  background: #0f172a;
  color: #cbd5e1;
  border-color: #334155;
}

body.dark-mode #adminUserModal .admin-data-table td {
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode #adminUserModal .admin-data-table td:first-child {
  color: #94a3b8;
}

body.dark-mode #adminUserModal .admin-user-table-panel > strong,
body.dark-mode #adminUserModal .admin-data-table strong {
  color: #f8fafc;
}

body.dark-mode #adminUserModal .admin-user-table-panel > span,
body.dark-mode #adminUserModal .admin-user-assets-grid b {
  color: #cbd5e1;
}

@media (max-width: 820px) {
  #adminUserModal .admin-user-detail {
    grid-template-columns: 1fr;
  }

  #adminUserModal .admin-user-assets-grid {
    grid-template-columns: 1fr;
  }
}

#adminUserModal .admin-user-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
  min-height: 58px;
  padding: 10px 18px;
  border-bottom: 1px solid #dbe3ee;
  background: #f8fafc;
  overflow: visible;
}

#adminUserModal .admin-user-tabs button {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-weight: 800;
  white-space: nowrap;
  flex: 0 0 auto;
}

#adminUserModal .admin-user-tabs button:hover,
#adminUserModal .admin-user-tabs button.active {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
}

#adminUserModal .admin-user-detail {
  display: block;
  padding: 18px;
}

#adminUserModal .admin-user-panel {
  display: none;
}

#adminUserModal .admin-user-panel.active {
  display: grid;
  gap: 14px;
}

#adminUserModal .admin-user-actions-panel.active {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#adminUserModal .admin-user-actions-panel .admin-user-password {
  min-width: 0;
}

body.dark-mode #adminUserModal .admin-user-tabs {
  border-color: #334155;
  background: #0f172a;
}

body.dark-mode #adminUserModal .admin-user-tabs button {
  border-color: #334155;
  background: #172235;
  color: #cbd5e1;
}

body.dark-mode #adminUserModal .admin-user-tabs button:hover,
body.dark-mode #adminUserModal .admin-user-tabs button.active {
  border-color: #60a5fa;
  background: #2563eb;
  color: #ffffff;
}

@media (max-width: 820px) {
  #adminUserModal .admin-user-actions-panel.active {
    grid-template-columns: 1fr;
  }
}

#shopModal .used-shop-card span {
  line-height: 1.35 !important;
}

#adminUserModal .admin-user-actions-panel.active {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  #shopModal .shop-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #adminUserModal .admin-user-actions-panel.active {
    grid-template-columns: 1fr;
  }
}

/* Final login backdrop polish */
body.auth-locked {
  background: #08111f !important;
}

body.auth-locked #loginModal {
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 42px);
  background:
    radial-gradient(circle at 18% 18%, rgba(20, 184, 166, .24), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(59, 130, 246, .22), transparent 30%),
    linear-gradient(135deg, rgba(7, 15, 28, .84), rgba(8, 17, 31, .72) 48%, rgba(18, 30, 45, .9)) !important;
}

body.auth-locked .auth-backdrop {
  background:
    linear-gradient(135deg, #101b2d 0%, #0b1424 52%, #07111f 100%) !important;
}

body.auth-locked .auth-backdrop::before {
  background:
    linear-gradient(90deg, rgba(8, 17, 31, .86) 0%, rgba(8, 17, 31, .48) 46%, rgba(8, 17, 31, .82) 100%),
    linear-gradient(180deg, rgba(8, 17, 31, .2), rgba(8, 17, 31, .84)),
    radial-gradient(circle at 64% 36%, rgba(20, 184, 166, .22), transparent 26%),
    radial-gradient(circle at 34% 66%, rgba(59, 130, 246, .2), transparent 34%) !important;
}

body.auth-locked .auth-map-shell {
  inset: -56px;
  filter: saturate(.78) contrast(1.08) brightness(.72);
  opacity: .74;
}

body.auth-locked .auth-rail-map {
  transform: scale(1.08) rotate(-1deg);
}

body.auth-locked .auth-road {
  stroke: #64748b;
  stroke-opacity: .18;
}

body.auth-locked .auth-water {
  stroke: #0ea5e9;
  stroke-opacity: .2;
}

body.auth-locked .auth-main {
  stroke: #2dd4bf;
  stroke-opacity: .76;
}

body.auth-locked .auth-secondary {
  stroke: #60a5fa;
  stroke-opacity: .58;
}

body.auth-locked .auth-branch,
body.auth-locked .auth-freight {
  stroke: #94a3b8;
  stroke-opacity: .4;
}

body.auth-locked .auth-stations circle {
  fill: #2dd4bf;
  stroke: #dffafe;
  stroke-width: 2.5;
}

body.auth-locked .auth-stations text {
  fill: #dbeafe;
  stroke: rgba(8, 17, 31, .92);
}

body.auth-locked .auth-train {
  border-color: rgba(240, 253, 250, .95);
  background: #0f766e;
  box-shadow: 0 12px 34px rgba(45, 212, 191, .22), 0 4px 18px rgba(0, 0, 0, .34);
  opacity: .9;
}

body.auth-locked .auth-train-b {
  background: #2563eb;
}

body.auth-locked .auth-train-c {
  background: #0891b2;
}

body.auth-locked .auth-train-d {
  background: #475569;
}

body.auth-locked .auth-map-credit {
  color: rgba(226, 232, 240, .58);
  background: rgba(8, 17, 31, .52);
  border: 1px solid rgba(148, 163, 184, .22);
}body.auth-locked .login-card {
  color: #e5edf7;
  backdrop-filter: blur(18px) saturate(1.08);
}body.auth-locked .login-card h2,
body.auth-locked .login-card label {
  color: #f8fafc;
}

body.auth-locked .login-form {
  background: rgba(15, 23, 42, .62);
}

body.auth-locked .auth-tabs {
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, .26);
  background: rgba(8, 17, 31, .72);
}

body.auth-locked .auth-tabs button {
  border: 0;
  background: transparent;
  color: #cbd5e1;
}

body.auth-locked .auth-tabs button.active {
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #ffffff;
}

body.auth-locked #loginHint {
  text-align: left !important;
  justify-content: flex-start;
  color: #f87171 !important;
  font-weight: 800;
}

body.auth-locked #loginHint:not(:empty) {
  padding: 8px 10px;
  border-left: 3px solid #ef4444;
  background: rgba(127, 29, 29, .18);
}body.auth-locked .login-card .login-remember-row {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: -2px 0 2px;
  color: #e5edf7;
  font-weight: 800;
  cursor: pointer;
}body.auth-locked .login-card .login-remember-row input {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0;
  accent-color: #14b8a6;
}body.auth-locked .login-card .login-remember-row span {
  line-height: 1.2;
}

.login-verification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.login-verification-row #resendVerification {
  min-width: 0;
}

.login-version {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(45, 212, 191, .52);
  background: rgba(15, 23, 42, .96);
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

#shopModal .shop-intro-alert,
#shopModal .shop-category-info {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  line-height: 1.4 !important;
}

#shopModal .shop-switch {
  grid-area: tabs !important;
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow: visible !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  background: rgba(15, 23, 42, .08) !important;
}

#shopModal .shop-tab {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.dark-mode #shopModal .shop-switch {
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .30) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

body.dark-mode #shopModal .shop-tab {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, .32) !important;
  color: #dbe7f6 !important;
}

body.dark-mode #shopModal .shop-tab.active {
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  border-color: rgba(125, 211, 252, .72) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .24) !important;
}

@media (max-width: 760px) {
  #shopModal .shop-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #shopModal .shop-tab {
    height: 38px !important;
    min-height: 38px !important;
    font-size: 12px !important;
  }
}

/* Final profile overview polish */
#profileModal.open {
  padding: 18px !important;
}#profileModal .profile-card {
  width: min(980px, calc(100vw - 36px)) !important;
  max-width: min(980px, calc(100vw - 36px)) !important;
  max-height: min(90vh, 880px) !important;
}

#profileModal .profile-grid {
  display: grid !important;
  grid-template-columns: minmax(280px, .92fr) minmax(0, 1.08fr) !important;
  grid-auto-rows: auto !important;
  gap: 14px !important;
  max-height: calc(min(90vh, 880px) - 68px) !important;
  padding: 16px !important;
  overflow: auto !important;
  background: #eef3f8 !important;
}

#profileModal .profile-box {
  min-width: 0 !important;
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
  padding: 16px !important;
  border: 1px solid #d7e2ee !important;
  border-left: 1px solid #d7e2ee !important;
  border-top: 1px solid #d7e2ee !important;
  background: #ffffff !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
}

#profileModal .profile-box strong {
  color: #0f172a !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

#profileModal .profile-box.wide {
  grid-column: 1 / -1 !important;
}

#profileModal .profile-identity {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 148px !important;
  background: linear-gradient(135deg, #ffffff, #eef8ff) !important;
}

#profileModal .profile-avatar {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  box-shadow: 0 16px 28px rgba(37, 99, 235, .20) !important;
}

#profileModal .profile-identity #profileName {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 22px !important;
}

#profileModal .profile-identity #profileRole,
#profileModal .profile-identity #profileBase {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 6px !important;
  padding: 6px 9px !important;
  border: 1px solid #dbe7f1 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

#profileModal .profile-stats {
  min-height: 148px !important;
}

#profileModal .profile-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#profileModal .profile-stat-grid span {
  min-height: 82px !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 12px !important;
  border: 1px solid #dbe7f1 !important;
  background: linear-gradient(180deg, #f8fafc, #eef6fb) !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

#profileModal .profile-sync {
  gap: 10px !important;
}

#profileModal .profile-status-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#profileModal .profile-status-list span,
#profileModal .profile-section-note,
#profileModal .profile-box span.assign-hint {
  display: block !important;
  min-width: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid #e1e9f2 !important;
  background: #f8fafc !important;
  color: #526174 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#profileModal .profile-section-note {
  background: #f1f7fb !important;
}

#profileModal .profile-skill-tree {
  grid-template-columns: minmax(190px, .24fr) minmax(0, .76fr) !important;
  align-items: start !important;
}

#profileModal .profile-skill-tree > strong,
#profileModal .profile-skill-tree > .profile-section-note {
  grid-column: 1 !important;
}

#profileModal .country-skill-tree {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#profileModal .country-skill-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid #dbe7f1 !important;
  background: #f8fafc !important;
}

#profileModal .country-skill-summary span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

#profileModal .country-skill-summary b {
  color: #0f172a !important;
}

#profileModal .country-skill-progress {
  grid-column: 1 / -1 !important;
  height: 8px !important;
  overflow: hidden !important;
  background: #dbe7f1 !important;
}

#profileModal .country-skill-progress i {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #0f766e, #2563eb) !important;
}

#profileModal .country-skill-workspace {
  position: relative !important;
  min-height: 420px !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background:
    radial-gradient(circle at top left, rgba(242, 140, 40, .13), transparent 34%),
    linear-gradient(180deg, #14191e 0%, #0d1116 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 36px rgba(15, 23, 42, .18) !important;
}

#profileModal .country-skill-viewport {
  height: min(460px, 54vh) !important;
  min-height: 360px !important;
  overflow: auto !important;
  scrollbar-color: #48515a #171b1f !important;
  scrollbar-width: thin !important;
}

#profileModal .country-skill-canvas {
  position: relative !important;
  transform-origin: top left !important;
}

#profileModal .country-skill-connections {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}

#profileModal .country-skill-connection {
  fill: none !important;
  stroke: #4b545d !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  opacity: .9 !important;
}

#profileModal .country-skill-connection.active {
  stroke: #f28c28 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px rgba(242, 140, 40, .38)) !important;
}

#profileModal .country-skill-node {
  position: absolute !important;
  min-width: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 2px solid #424b54 !important;
  background: linear-gradient(145deg, #252b31, #1b2025) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35) !important;
  color: #f5f7f8 !important;
  overflow: hidden !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease !important;
}

#profileModal .country-skill-node:hover {
  transform: translateY(-4px) !important;
  border-color: #69747e !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .42) !important;
}

#profileModal .country-skill-node-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#profileModal .country-skill-flag {
  width: 42px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #f8fafc !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
}

#profileModal .country-skill-name {
  min-width: 0 !important;
  display: block !important;
}

#profileModal .country-skill-name strong {
  display: block !important;
  color: #f8fafc !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#profileModal .country-skill-name small {
  display: block !important;
  margin-top: 3px !important;
  color: #aab2b9 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#profileModal .country-skill-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #aab2b9 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#profileModal .country-skill-status {
  padding: 4px 7px !important;
  background: rgba(255, 255, 255, .07) !important;
  white-space: nowrap !important;
}

#profileModal .country-skill-node.unlocked {
  border-color: #3ac779 !important;
  background: linear-gradient(145deg, rgba(58, 199, 121, .16), rgba(27, 32, 37, .96)) !important;
}

#profileModal .country-skill-node.root {
  border-color: #f28c28 !important;
  background: linear-gradient(145deg, rgba(242, 140, 40, .26), rgba(31, 35, 39, .98)) !important;
}

#profileModal .country-skill-node.unlocked .country-skill-status {
  color: #8ff0b6 !important;
  background: rgba(58, 199, 121, .14) !important;
}

#profileModal .country-skill-node.available {
  border-color: #f28c28 !important;
  box-shadow: 0 0 0 3px rgba(242, 140, 40, .10), 0 12px 32px rgba(0, 0, 0, .35) !important;
  animation: profileCountryPulse 2.1s infinite !important;
}

#profileModal .country-skill-node.locked {
  opacity: .56 !important;
  filter: grayscale(.25) !important;
}

#profileModal .country-skill-node.available .country-skill-status {
  color: #ffc383 !important;
  background: rgba(242, 140, 40, .14) !important;
}

@keyframes profileCountryPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(242, 140, 40, .10), 0 12px 32px rgba(0, 0, 0, .35);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(242, 140, 40, .05), 0 12px 32px rgba(0, 0, 0, .35);
  }
}

#profileModal .country-skill-node .unlock-country {
  width: 100% !important;
  min-height: 34px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #f28c28, #d76906) !important;
  border: 0 !important;
}

#profileModal .country-skill-node .unlock-country:disabled {
  color: #aab2b9 !important;
  background: #30373e !important;
  opacity: .75 !important;
}

#profileModal .country-skill-legend {
  position: absolute !important;
  left: 14px !important;
  bottom: 14px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: calc(100% - 28px) !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(20, 24, 28, .9) !important;
  color: #aab2b9 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35) !important;
}

#profileModal .country-skill-legend span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#profileModal .country-skill-legend i {
  width: 10px !important;
  height: 10px !important;
}

#profileModal .country-skill-legend i.locked {
  background: #59636c !important;
}

#profileModal .country-skill-legend i.available {
  background: #f28c28 !important;
}

#profileModal .country-skill-legend i.unlocked {
  background: #3ac779 !important;
}

#profileModal .profile-skill-tree .assign-hint {
  grid-column: 1 / -1 !important;
}

#profileModal .profile-password,
#profileModal .profile-danger {
  grid-template-columns: minmax(180px, .32fr) minmax(0, .68fr) !important;
  align-items: start !important;
}

#profileModal .profile-password > strong,
#profileModal .profile-danger > strong {
  grid-column: 1 !important;
}

#profileModal .profile-password > .profile-section-note,
#profileModal .profile-danger > .profile-section-note {
  grid-column: 1 !important;
}

#profileModal .profile-password-grid,
#profileModal .profile-delete-row {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

#profileModal .profile-password-grid .primary,
#profileModal .profile-delete-row button {
  width: fit-content !important;
  min-width: 190px !important;
  justify-self: end !important;
}

#profileModal .profile-password .assign-hint,
#profileModal .profile-danger .assign-hint {
  grid-column: 1 / -1 !important;
}

#profileModal .profile-danger {
  border-color: #f8caca !important;
  background: #fff8f8 !important;
}

#profileModal .profile-danger .profile-section-note,
#profileModal .profile-danger .assign-hint {
  border-color: #fbd5d5 !important;
  background: #fff1f1 !important;
  color: #7f1d1d !important;
}

body.dark-mode #profileModal .profile-identity {
  background: linear-gradient(135deg, #111827, #102637) !important;
}

body.dark-mode #profileModal .profile-box strong,
body.dark-mode #profileModal .profile-identity #profileName {
  color: #f8fafc !important;
}

body.dark-mode #profileModal .profile-identity #profileRole,
body.dark-mode #profileModal .profile-identity #profileBase,
body.dark-mode #profileModal .profile-stat-grid span,
body.dark-mode #profileModal .profile-status-list span,
body.dark-mode #profileModal .country-skill-summary,
body.dark-mode #profileModal .profile-section-note,
body.dark-mode #profileModal .profile-box span.assign-hint {
  border-color: rgba(148, 163, 184, .26) !important;
  background: #0f172a !important;
  color: #cbd5e1 !important;
}

body.dark-mode #profileModal .country-skill-summary span {
  color: #94a3b8 !important;
}

body.dark-mode #profileModal .country-skill-summary b {
  color: #f8fafc !important;
}

body.dark-mode #profileModal .country-skill-progress {
  background: #1e293b !important;
}

body.dark-mode #profileModal .country-skill-workspace {
  border-color: rgba(148, 163, 184, .28) !important;
  background:
    radial-gradient(circle at top left, rgba(242, 140, 40, .13), transparent 34%),
    linear-gradient(180deg, #14191e 0%, #0d1116 100%) !important;
}

body.dark-mode #profileModal .country-skill-node {
  border-color: #424b54 !important;
  background: linear-gradient(145deg, #252b31, #1b2025) !important;
  color: #f5f7f8 !important;
}

body.dark-mode #profileModal .country-skill-node.unlocked {
  border-color: #3ac779 !important;
  background: linear-gradient(145deg, rgba(58, 199, 121, .16), rgba(27, 32, 37, .96)) !important;
}

body.dark-mode #profileModal .country-skill-node.root {
  border-color: #f28c28 !important;
  background: linear-gradient(145deg, rgba(242, 140, 40, .26), rgba(31, 35, 39, .98)) !important;
}

body.dark-mode #profileModal .country-skill-name strong {
  color: #f8fafc !important;
}

body.dark-mode #profileModal .country-skill-name small,
body.dark-mode #profileModal .country-skill-foot {
  color: #aab2b9 !important;
}

body.dark-mode #profileModal .profile-danger {
  border-color: rgba(248, 113, 113, .42) !important;
  background: #1f1518 !important;
}

body.dark-mode #profileModal .profile-danger .profile-section-note,
body.dark-mode #profileModal .profile-danger .assign-hint {
  border-color: rgba(248, 113, 113, .34) !important;
  background: #2a171b !important;
  color: #fecaca !important;
}#countrySkillModal .country-skill-card {
  width: 95vw !important;
  max-width: 95vw !important;
  height: 95vh !important;
  max-height: 95vh !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#countrySkillModal .country-skill-modal-body {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 14px !important;
  overflow: hidden !important;
}

#countrySkillModal .country-skill-tree {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

#countrySkillModal .country-skill-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid #dbe7f1 !important;
  background: #f8fafc !important;
}

#countrySkillModal .country-skill-summary span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

#countrySkillModal .country-skill-summary b {
  color: #0f172a !important;
}

#countrySkillModal .country-skill-progress {
  grid-column: 1 / -1 !important;
  height: 8px !important;
  overflow: hidden !important;
  background: #dbe7f1 !important;
}

#countrySkillModal .country-skill-progress i {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #0f766e, #2563eb) !important;
}

#countrySkillModal .country-skill-workspace {
  position: relative !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  background:
    radial-gradient(circle at top left, rgba(242, 140, 40, .13), transparent 34%),
    linear-gradient(180deg, #14191e 0%, #0d1116 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 36px rgba(15, 23, 42, .18) !important;
}

#countrySkillModal .country-skill-viewport {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  cursor: grab !important;
  scrollbar-color: #48515a #171b1f !important;
  scrollbar-width: thin !important;
  touch-action: none !important;
}

#countrySkillModal .country-skill-viewport.dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

#countrySkillModal .country-skill-zoom-layer {
  position: relative !important;
  transform-origin: top left !important;
}

#countrySkillModal .country-skill-canvas {
  position: relative !important;
  transform-origin: top left !important;
  will-change: transform !important;
}

#countrySkillModal .country-skill-connections {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  pointer-events: none !important;
}

#countrySkillModal .country-skill-connection {
  fill: none !important;
  stroke: #4b545d !important;
  stroke-width: 4 !important;
  stroke-linecap: round !important;
  opacity: .9 !important;
}

#countrySkillModal .country-skill-connection.active {
  stroke: #f28c28 !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px rgba(242, 140, 40, .38)) !important;
}

#countrySkillModal .country-skill-node {
  position: absolute !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 2px solid #424b54 !important;
  background: linear-gradient(145deg, #252b31, #1b2025) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35) !important;
  color: #f5f7f8 !important;
  overflow: hidden !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease !important;
}

#countrySkillModal .country-skill-node:hover {
  transform: translateY(-4px) !important;
  border-color: #69747e !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .42) !important;
}

#countrySkillModal .country-skill-node-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#countrySkillModal .country-skill-flag {
  width: 48px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #f8fafc !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important;
}

#countrySkillModal .country-skill-name {
  min-width: 0 !important;
  display: block !important;
}

#countrySkillModal .country-skill-name strong {
  display: block !important;
  color: #f8fafc !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

#countrySkillModal .country-skill-name small {
  display: block !important;
  margin-top: 3px !important;
  color: #aab2b9 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#countrySkillModal .country-skill-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  align-self: end !important;
  gap: 10px !important;
  color: #aab2b9 !important;
}

#countrySkillModal .country-skill-count {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
  line-height: 1.1 !important;
}

#countrySkillModal .country-skill-count b {
  color: #f8fafc !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

#countrySkillModal .country-skill-count small {
  color: #aab2b9 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#countrySkillModal .country-skill-status {
  max-width: 96px !important;
  padding: 5px 8px !important;
  background: rgba(255, 255, 255, .07) !important;
  color: #dbe7f1 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: normal !important;
}

#countrySkillModal .country-skill-node.unlocked {
  border-color: #3ac779 !important;
  background: linear-gradient(145deg, rgba(58, 199, 121, .16), rgba(27, 32, 37, .96)) !important;
}

#countrySkillModal .country-skill-node.root {
  border-color: #f28c28 !important;
  background: linear-gradient(145deg, rgba(242, 140, 40, .26), rgba(31, 35, 39, .98)) !important;
}

#countrySkillModal .country-skill-node.unlocked .country-skill-status {
  color: #8ff0b6 !important;
  background: rgba(58, 199, 121, .14) !important;
}

#countrySkillModal .country-skill-node.available {
  border-color: #f28c28 !important;
  box-shadow: 0 0 0 3px rgba(242, 140, 40, .10), 0 12px 32px rgba(0, 0, 0, .35) !important;
  animation: profileCountryPulse 2.1s infinite !important;
}

#countrySkillModal .country-skill-node.locked {
  opacity: .56 !important;
  filter: grayscale(.25) !important;
}

#countrySkillModal .country-skill-node.no-data {
  opacity: .36 !important;
  filter: grayscale(.55) !important;
  border-color: #343b43 !important;
  background: linear-gradient(145deg, #20262c, #15191e) !important;
}

#countrySkillModal .country-skill-node.available .country-skill-status {
  color: #ffc383 !important;
  background: rgba(242, 140, 40, .14) !important;
}

#countrySkillModal .country-skill-node.no-data .country-skill-status {
  color: #cbd5e1 !important;
  background: rgba(148, 163, 184, .12) !important;
}

#countrySkillModal .country-skill-node .unlock-country {
  width: 100% !important;
  min-height: 34px !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #f28c28, #d76906) !important;
  border: 0 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

#countrySkillModal .country-skill-node .unlock-country:disabled {
  color: #aab2b9 !important;
  background: #30373e !important;
  opacity: .75 !important;
}

#countrySkillModal .country-skill-legend {
  position: absolute !important;
  left: 14px !important;
  bottom: 14px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: calc(100% - 28px) !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(20, 24, 28, .9) !important;
  color: #aab2b9 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35) !important;
}

.schedule-edit-card {
  width: min(1500px, calc(100vw - 24px)) !important;
  max-width: min(1500px, calc(100vw - 24px)) !important;
  height: min(780px, calc(100vh - 32px)) !important;
  max-height: min(780px, calc(100vh - 32px)) !important;
  overflow: hidden !important;
}

.schedule-edit-layout {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(480px, 1.15fr) minmax(340px, .8fr);
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.schedule-edit-map-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #d8e2ee;
  background: #eef3f8;
}

.schedule-edit-map-head {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border-bottom: 1px solid #d8e2ee;
  background: #fff;
}

.schedule-edit-map-head strong {
  color: #0f172a;
  font-size: 14px;
}

.schedule-edit-map-head span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

#scheduleEditMap {
  width: 100%;
  min-height: 360px;
  background: #dbe5ec;
}

.schedule-edit-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid #d8e2ee;
  background: #fff;
  color: #475569;
  font-size: 11px;
  font-weight: 850;
}

.schedule-edit-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.schedule-edit-map-legend i {
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .28);
  background: #64748b;
}

.schedule-edit-map-legend i.start { background: #16a34a; }
.schedule-edit-map-legend i.stop { background: #f59e0b; }
.schedule-edit-map-legend i.finish { background: #dc2626; }

.schedule-edit-form {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.schedule-edit-timeline-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid #d8e2ee;
  background: #fff;
}

.schedule-edit-timeline-head {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border-bottom: 1px solid #d8e2ee;
}

.schedule-edit-timeline-head strong {
  color: #0f172a;
  font-size: 14px;
}

.schedule-edit-timeline-head span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.schedule-edit-timeline-panel .timeline {
  height: 100%;
  min-height: 0;
  padding: 18px 16px 24px 22px;
  overflow: auto;
}

.schedule-edit-timeline-panel .schedule-detail-box {
  display: none !important;
}

body.dark-mode .schedule-edit-map-panel {
  border-color: #334155;
  background: #0f172a;
}

body.dark-mode .schedule-edit-map-head,
body.dark-mode .schedule-edit-map-legend,
body.dark-mode .schedule-edit-form,
body.dark-mode .schedule-edit-timeline-panel,
body.dark-mode .schedule-edit-timeline-head {
  border-color: #334155;
  background: #172235;
}

body.dark-mode .schedule-edit-map-head strong {
  color: #f8fafc;
}

body.dark-mode .schedule-edit-map-head span,
body.dark-mode .schedule-edit-map-legend,
body.dark-mode .schedule-edit-timeline-head span {
  color: #cbd5e1;
}

body.dark-mode .schedule-edit-timeline-head strong {
  color: #f8fafc;
}

@media (max-width: 1250px) {
  .schedule-edit-layout {
    grid-template-columns: minmax(320px, .9fr) minmax(480px, 1.1fr);
  }

  .schedule-edit-timeline-panel {
    grid-column: 1 / -1;
    min-height: 300px;
    border-top: 1px solid #d8e2ee;
    border-left: 0;
  }

  .schedule-edit-timeline-panel .timeline {
    max-height: 320px;
  }
}

@media (max-width: 920px) {
  .schedule-edit-card {
    height: min(920px, calc(100vh - 20px)) !important;
    max-height: calc(100vh - 20px) !important;
    overflow: auto !important;
  }

  .schedule-edit-layout {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .schedule-edit-map-panel {
    min-height: 320px;
    border-right: 0;
    border-bottom: 1px solid #d8e2ee;
  }

  #scheduleEditMap {
    height: 250px;
    min-height: 250px;
  }

  .schedule-edit-form {
    overflow: visible;
  }

  .schedule-edit-timeline-panel {
    min-height: 320px;
  }
}


/* assets/css/app/chunk-08.css */

#countrySkillModal .country-skill-tools {
  position: absolute !important;
  right: 14px !important;
  top: 14px !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(20, 24, 28, .9) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35) !important;
}

#countrySkillModal .country-skill-tools button {
  min-width: 38px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #f8fafc !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

#countrySkillModal .country-skill-tools button:hover {
  background: rgba(242, 140, 40, .22) !important;
  border-color: rgba(242, 140, 40, .36) !important;
}

#countrySkillModal .country-skill-legend span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#countrySkillModal .country-skill-legend i {
  width: 10px !important;
  height: 10px !important;
}

#countrySkillModal .country-skill-legend i.locked {
  background: #59636c !important;
}

#countrySkillModal .country-skill-legend i.available {
  background: #f28c28 !important;
}

#countrySkillModal .country-skill-legend i.unlocked {
  background: #3ac779 !important;
}

#countrySkillModal .country-skill-legend i.no-data {
  background: #343b43 !important;
}

#countrySkillModal .country-skill-modal-body > .assign-hint {
  border: 1px solid #dbe7f1 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 850 !important;
}

body.dark-mode #countrySkillModal .country-skill-summary,
body.dark-mode #countrySkillModal .country-skill-modal-body > .assign-hint {
  border-color: rgba(148, 163, 184, .26) !important;
  background: #0f172a !important;
  color: #cbd5e1 !important;
}

body.dark-mode #countrySkillModal .country-skill-summary span {
  color: #94a3b8 !important;
}

body.dark-mode #countrySkillModal .country-skill-summary b {
  color: #f8fafc !important;
}

body.dark-mode #countrySkillModal .country-skill-progress {
  background: #1e293b !important;
}

@media (max-width: 860px) {
  #countrySkillModal.open {
    padding: 10px !important;
  }#countrySkillModal .country-skill-card {
  width: 95vw !important;
  max-width: 95vw !important;
  height: 95vh !important;
  max-height: 95vh !important;
}

  #countrySkillModal .country-skill-summary {
    grid-template-columns: 1fr !important;
  }

  #countrySkillModal .country-skill-viewport {
    min-height: 0 !important;
    height: 100% !important;
  }
}

@media (max-width: 860px) {
  #profileModal.open {
    padding: 10px !important;
  }#profileModal .profile-card {
  width: calc(100vw - 20px) !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 20px) !important;
}

  #profileModal .profile-grid,
  #profileModal .profile-stat-grid,
  #profileModal .profile-status-list,
  #profileModal .profile-skill-tree,
  #profileModal .country-skill-summary,
  #profileModal .profile-password,
  #profileModal .profile-danger {
    grid-template-columns: 1fr !important;
  }

  #profileModal .country-skill-tree,
  #profileModal .profile-password-grid,
  #profileModal .profile-delete-row {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  #profileModal .profile-password-grid .primary,
  #profileModal .profile-delete-row button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Final structured wiki builder */
#wikiModal .wiki-card {
  width: 95vw !important;
  max-width: 95vw !important;
  height: 95vh !important;
  max-height: 95vh !important;
}

#wikiModal .wiki-layout {
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: 0 !important;
}

#wikiModal .wiki-nav {
  display: block !important;
  overflow: auto !important;
}

.wiki-nav-group {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.wiki-nav-group > strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.wiki-nav-sub {
  display: grid;
  gap: 5px;
  padding-left: 8px;
  border-left: 2px solid #d8e5f0;
}

.wiki-nav-sub > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.wiki-builder-page {
  display: grid;
  gap: 14px;
}

.wiki-builder-hero {
  padding: 20px;
  border: 1px solid #d8e5f0;
  background: linear-gradient(135deg, #ffffff, #eef8ff);
}

.wiki-builder-hero span {
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.wiki-builder-hero h3 {
  margin: 8px 0 0;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.1;
}

.wiki-builder-blocks {
  display: grid;
  gap: 12px;
}

.wiki-builder-text,
.wiki-builder-media {
  margin: 0;
  padding: 16px;
  border: 1px solid #d8e5f0;
  background: #ffffff;
}

.wiki-builder-text h4,
.wiki-builder-media h4 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 16px;
}

.wiki-builder-text p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

.wiki-builder-media img,
.wiki-builder-media video {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #0f172a;
}

.wiki-builder-media figcaption {
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
}

.admin-wiki-builder {
  display: grid;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d8e5f0;
  background: #f8fbfe;
}

.admin-wiki-builder-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  min-height: 620px;
}

.admin-wiki-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 18px 16px;
  border-bottom: 1px solid #d8e5f0;
  background: #ffffff;
}

.admin-wiki-head > div:first-child {
  display: grid;
  gap: 4px;
}

.admin-wiki-head strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

.admin-wiki-head span {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

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

.admin-wiki-actions .admin-wiki-more {
  width: 40px;
  min-width: 40px;
  padding-inline: 0;
  font-size: 18px;
}

.admin-wiki-builder-nav,
.admin-wiki-builder-list {
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: auto;
  min-height: 0;
}

.admin-wiki-builder-nav {
  padding: 18px;
  border: 0;
  border-right: 1px solid #d8e5f0;
  background: #ffffff;
}

.admin-wiki-builder-nav-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 0;
}

.admin-wiki-builder-nav-head > div {
  display: grid;
  gap: 2px;
}

.admin-wiki-builder-nav-head strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.admin-wiki-builder-nav-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.admin-wiki-builder-nav-head button {
  width: 34px;
  min-width: 34px;
  padding: 0;
  aspect-ratio: 1;
  font-size: 18px;
  line-height: 1;
}

.admin-wiki-tool-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-wiki-tool-switch button {
  min-height: 38px;
  border: 1px solid #d8e5f0;
  background: #f8fbfe;
  color: #64748b;
  font-weight: 900;
}

.admin-wiki-tool-switch button.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 -3px 0 #2563eb;
}

.admin-wiki-tool-section {
  display: none;
  min-height: 0;
}

.admin-wiki-tool-section.active {
  display: grid;
  gap: 12px;
}

.admin-wiki-tool-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid #d8e5f0;
}

.admin-wiki-tool-tabs button {
  padding: 7px 0 10px;
  border-bottom: 3px solid transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.admin-wiki-tool-tabs button.active {
  border-bottom-color: #2563eb;
  color: #2563eb;
}

.admin-wiki-block-palette {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 2px 2px 4px;
  border: 0;
  background: transparent;
}

.admin-wiki-block-palette button {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 12px 12px 12px 14px;
  border: 1px solid #dbe7f3;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  color: #0f172a;
  text-align: left;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  overflow: hidden;
}

.admin-wiki-block-palette button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #2563eb;
  opacity: .78;
}

.admin-wiki-block-palette button[data-admin-wiki-palette-block="image"]::before,
.admin-wiki-block-palette button[data-admin-wiki-palette-block="download"]::before {
  background: #16a34a;
}

.admin-wiki-block-palette button[data-admin-wiki-palette-block="video"]::before {
  background: #dc2626;
}

.admin-wiki-block-palette button[data-admin-wiki-palette-block="table"]::before {
  background: #0891b2;
}

.admin-wiki-block-palette button[data-admin-wiki-palette-block="accordion"]::before {
  background: #ea580c;
}

.admin-wiki-block-palette button[data-admin-wiki-palette-block="columns"]::before {
  background: #7c3aed;
}

.admin-wiki-block-palette button[data-admin-wiki-palette-block="quote"]::before {
  background: #475569;
}

.admin-wiki-block-palette button:hover {
  border-color: #9db9dc;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(30, 64, 175, .11);
  transform: translateY(-1px);
}

.admin-wiki-block-palette button:active {
  cursor: grabbing;
  transform: scale(.992);
}

.admin-wiki-palette-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #dbe7f3;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 18px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.admin-wiki-palette-icon.media {
  background: #dcfce7;
  color: #15803d;
}

.admin-wiki-palette-icon.green {
  background: #ecfdf5;
  color: #15803d;
}

.admin-wiki-palette-icon.red {
  background: #fff1f2;
  color: #dc2626;
}

.admin-wiki-palette-icon.cyan {
  background: #ecfeff;
  color: #0e7490;
}

.admin-wiki-palette-icon.orange {
  background: #fff7ed;
  color: #c2410c;
}

.admin-wiki-palette-icon.violet {
  background: #f5f3ff;
  color: #6d28d9;
}

.admin-wiki-block-palette strong,
.admin-wiki-block-palette small {
  display: block;
}

.admin-wiki-palette-copy {
  min-width: 0;
}

.admin-wiki-block-palette strong {
  color: #152033;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.2;
}

.admin-wiki-block-palette small {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.28;
}

.admin-wiki-palette-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  align-self: stretch;
  align-content: space-between;
}

.admin-wiki-palette-meta b {
  padding: 3px 7px;
  border: 1px solid #dbe7f3;
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-wiki-palette-meta em {
  color: #94a3b8;
  font-style: normal;
  font-size: 17px;
  letter-spacing: -5px;
  writing-mode: vertical-rl;
}

.admin-wiki-page-tools-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-wiki-page-tools-head button {
  width: 100%;
}

.admin-wiki-page-tools-head .danger {
  border-color: #fecaca;
  background: #fff7f7;
  color: #dc2626;
}

.admin-wiki-page-tools-head button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.admin-wiki-nav-tree,
.admin-wiki-nav-topic,
.admin-wiki-nav-subtopic {
  display: grid;
  gap: 8px;
}

.admin-wiki-nav-section-title {
  margin-top: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-wiki-nav-topic {
  padding: 8px 0 2px;
}

.admin-wiki-nav-row,
.admin-wiki-nav-page-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.admin-wiki-nav-page-row {
  grid-template-columns: minmax(0, 1fr) 30px;
}

.admin-wiki-nav-grip {
  color: #94a3b8;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -5px;
  writing-mode: vertical-rl;
  cursor: grab;
}

.admin-wiki-nav-topic.dragging,
.admin-wiki-nav-subtopic.dragging {
  opacity: .55;
}

.admin-wiki-nav-topic.drop-before,
.admin-wiki-nav-subtopic.drop-before {
  box-shadow: inset 0 3px 0 #2563eb;
}

.admin-wiki-nav-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

.admin-wiki-nav-row > strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-wiki-nav-row input {
  min-width: 0;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: #0f172a;
  padding: 6px 7px;
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.admin-wiki-nav-subtopic .admin-wiki-nav-row input {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: none;
}

.admin-wiki-nav-row input:focus {
  border-color: #93c5fd;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.admin-wiki-nav-subtopic {
  padding-left: 10px;
  border-left: 2px solid #d8e5f0;
}

.admin-wiki-nav-row > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.admin-wiki-nav-add,
.admin-wiki-nav-delete {
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
}

.admin-wiki-nav-add {
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 17px;
  font-weight: 950;
}

.admin-wiki-nav-add:hover {
  border-color: #93c5fd;
  background: #dbeafe;
  color: #1e40af;
}

.admin-wiki-nav-delete {
  border: 1px solid #fecaca;
  background: #fff7f7;
  color: #dc2626;
}

.admin-wiki-nav-delete:hover {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #b91c1c;
}

.admin-wiki-nav-delete .header-icon {
  width: 15px;
  height: 15px;
}

.admin-wiki-nav-page {
  width: 100%;
  justify-content: flex-start;
  min-height: 34px;
  border: 1px solid transparent;
  background: transparent;
  color: #334155;
  text-align: left;
}

.admin-wiki-nav-page.active {
  border-color: #0ea5e9;
  background: #eff6ff;
  color: #075985;
  box-shadow: inset 3px 0 0 #0ea5e9;
}

.admin-wiki-active-page-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #d8e5f0;
  background: #f8fbfe;
}

.admin-wiki-active-page-card h4 {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
}

.admin-wiki-active-page-card p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.admin-wiki-empty-tree,
.admin-wiki-empty-editor {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px dashed #bdd0e5;
  background: #ffffff;
  color: #64748b;
}

.admin-wiki-empty-tree strong,
.admin-wiki-empty-editor strong {
  color: #0f172a;
}

.admin-wiki-builder-list {
  padding: 16px;
  background: #f8fafc;
}

.admin-wiki-builder-topic,
.admin-wiki-builder-subtopic,
.admin-wiki-builder-page,
.admin-wiki-builder-block {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d8e5f0;
  background: #ffffff;
}

.admin-wiki-builder-subtopic {
  margin-left: 0;
  background: #ffffff;
}

.admin-wiki-builder-page {
  margin-left: 0;
  background: #ffffff;
}

.admin-wiki-builder-topic:not(:has(.admin-wiki-builder-page.active)),
.admin-wiki-builder-subtopic:not(:has(.admin-wiki-builder-page.active)),
.admin-wiki-builder-page:not(.active) {
  display: none;
}

.admin-wiki-builder-page.active {
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-wiki-builder-topic {
  gap: 10px;
  border: 0;
  padding: 0;
  background: transparent;
}

.admin-wiki-builder-topic > .admin-wiki-builder-title-row,
.admin-wiki-builder-subtopic > .admin-wiki-builder-title-row {
  display: none !important;
}

.admin-wiki-builder-subtopic,
.admin-wiki-builder-pages {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#adminModal .admin-wiki-builder .admin-delete {
  position: static;
  top: auto;
  right: auto;
}

.admin-wiki-builder-block {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  min-height: 84px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}

.admin-wiki-builder-block:hover {
  border-color: #b2c4dc;
  box-shadow: 0 12px 26px rgba(30, 45, 75, .08);
}

.admin-wiki-builder-block.dragging {
  opacity: .55;
  transform: rotate(.3deg) scale(.997);
}

.admin-wiki-builder-block.drop-before {
  box-shadow: inset 0 3px 0 #2563eb, 0 12px 26px rgba(36, 99, 235, .1);
}

.admin-wiki-builder-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 18px;
  border: 1px solid #d8e5f0;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.admin-wiki-builder-title-row label {
  display: grid;
  flex: 1 1 280px;
  gap: 4px;
  min-width: 0;
}

.admin-wiki-builder-title-row label span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-wiki-builder-title-row input {
  width: 100%;
}

.admin-wiki-builder-block textarea,
.admin-wiki-builder-block input,
.admin-wiki-builder-block .admin-wiki-block-file {
  width: 100%;
}

.admin-wiki-page-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.admin-wiki-page-toolbar > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-wiki-page-toolbar strong {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
}

.admin-wiki-page-toolbar span {
  color: #16a34a;
  font-size: 12px;
  font-weight: 900;
}

.admin-wiki-page-toolbar button {
  min-width: 170px;
  white-space: nowrap;
}

.admin-wiki-builder-blocks {
  display: grid;
  gap: 12px;
}

.admin-wiki-block-grip {
  align-self: center;
  color: #64748b;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -5px;
  writing-mode: vertical-rl;
}

.admin-wiki-block-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-wiki-block-topline {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.admin-wiki-block-kicker {
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.admin-wiki-block-fields {
  display: grid;
  gap: 10px;
}

.admin-wiki-media-fields {
  display: grid;
  gap: 10px;
}

.admin-wiki-block-text .admin-wiki-media-fields {
  display: none;
}

.admin-wiki-block-actions {
  display: flex;
  gap: 6px;
  align-items: start;
}

.admin-wiki-block-actions .icon-only {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}

.admin-wiki-builder-block.collapsed .admin-wiki-block-main textarea,
.admin-wiki-builder-block.collapsed .admin-wiki-block-fields {
  display: none;
}

.admin-wiki-block-note {
  margin: 0;
  padding: 12px;
  border: 1px dashed #c7d6e9;
  color: #64748b;
  background: #f8fbfe;
  font-weight: 800;
}

.admin-wiki-dropzone {
  width: 100%;
  min-height: 56px;
  border: 1px dashed #bdd0e5;
  background: #ffffff;
  color: #64748b;
  font-weight: 800;
}

.admin-wiki-dropzone:hover {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

.admin-wiki-dropzone.drag-over {
  border-color: #2563eb;
  background: #edf6ff;
  color: #1d4ed8;
}

.wiki-builder-divider {
  border: 0;
  border-top: 2px dashed #c7d6e9;
  margin: 8px 0;
}

.wiki-builder-download,
.wiki-builder-quote,
.wiki-builder-accordion,
.wiki-builder-columns {
  padding: 16px;
  border: 1px solid #d8e5f0;
  background: #ffffff;
}

.wiki-builder-download {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.wiki-builder-quote {
  border-left: 4px solid #2563eb;
  color: #253047;
  line-height: 1.55;
}

.wiki-builder-accordion summary {
  cursor: pointer;
  font-weight: 900;
}

.wiki-builder-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wiki-builder-columns > div {
  padding: 12px;
  border: 1px solid #d8e5f0;
  background: #f8fbfe;
}

.wiki-builder-table-wrap {
  overflow: auto;
  border: 1px solid #d8e5f0;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.wiki-builder-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 13px;
}

.wiki-builder-table th,
.wiki-builder-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e5edf5;
  text-align: left;
  vertical-align: top;
}

.wiki-builder-table th {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 950;
}

.wiki-builder-table tr:last-child td {
  border-bottom: 0;
}

.admin-wiki-nav-direct-page {
  padding-left: 24px;
}

.admin-wiki-builder input,
.admin-wiki-builder select,
.admin-wiki-builder textarea {
  min-width: 0;
  border: 1px solid #cbd8e7;
  background: #ffffff;
  color: #0f172a;
  padding: 9px 10px;
  font: inherit;
}

.admin-wiki-builder textarea {
  resize: vertical;
}

body.dark-mode .wiki-nav-group > strong,
body.dark-mode .wiki-builder-hero h3,
body.dark-mode .wiki-builder-text h4,
body.dark-mode .wiki-builder-media h4 {
  color: #f8fafc;
}

body.dark-mode .wiki-nav-sub {
  border-left-color: #334155;
}

body.dark-mode .wiki-builder-hero,
body.dark-mode .wiki-builder-text,
body.dark-mode .wiki-builder-media,
body.dark-mode .admin-wiki-builder-nav,
body.dark-mode .admin-wiki-head,
body.dark-mode .admin-wiki-block-palette,
body.dark-mode .admin-wiki-builder-topic,
body.dark-mode .admin-wiki-builder-block {
  border-color: #334155;
  background: #111827;
}

body.dark-mode .admin-wiki-builder-subtopic,
body.dark-mode .admin-wiki-builder-page {
  border-color: #334155;
  background: #0f172a;
}

body.dark-mode .admin-wiki-builder-page.active {
  border-color: #38bdf8;
  background: transparent;
}

body.dark-mode .admin-wiki-builder,
body.dark-mode .admin-wiki-builder-list {
  border-color: #334155;
  background: #0b1220;
}

body.dark-mode .admin-wiki-builder-nav-head {
  border-bottom-color: #334155;
}

body.dark-mode .admin-wiki-builder-nav-head strong,
body.dark-mode .admin-wiki-nav-topic > strong,
body.dark-mode .admin-wiki-head strong,
body.dark-mode .admin-wiki-page-toolbar strong,
body.dark-mode .admin-wiki-block-palette strong {
  color: #f8fafc;
}

body.dark-mode .admin-wiki-builder-nav-head span,
body.dark-mode .admin-wiki-nav-subtopic > span,
body.dark-mode .admin-wiki-builder-title-row label span,
body.dark-mode .admin-wiki-head span,
body.dark-mode .admin-wiki-block-palette small {
  color: #cbd5e1;
}

body.dark-mode .admin-wiki-block-palette button {
  border-color: #334155;
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  color: #e5edf7;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

body.dark-mode .admin-wiki-tool-switch button,
body.dark-mode .admin-wiki-active-page-card {
  border-color: #334155;
  background: #0f172a;
}

body.dark-mode .admin-wiki-tool-switch button.active {
  border-color: #38bdf8;
  background: #082f49;
  color: #e0f2fe;
  box-shadow: inset 0 -3px 0 #38bdf8;
}

body.dark-mode .admin-wiki-tool-tabs {
  border-bottom-color: #334155;
}

body.dark-mode .admin-wiki-tool-tabs button {
  color: #cbd5e1;
}

body.dark-mode .admin-wiki-tool-tabs button.active {
  border-bottom-color: #38bdf8;
  color: #e0f2fe;
}

body.dark-mode .admin-wiki-active-page-card h4 {
  color: #f8fafc;
}

body.dark-mode .admin-wiki-active-page-card p {
  color: #cbd5e1;
}

body.dark-mode .admin-wiki-block-palette button:hover,
body.dark-mode .admin-wiki-dropzone:hover {
  border-color: #475569;
  background: #111827;
}

body.dark-mode .admin-wiki-block-palette strong {
  color: #f8fafc;
}

body.dark-mode .admin-wiki-palette-meta b {
  border-color: #334155;
  background: #0b1220;
  color: #cbd5e1;
}

body.dark-mode .admin-wiki-palette-icon {
  border-color: #334155;
  box-shadow: none;
}

body.dark-mode .admin-wiki-builder-title-row,
body.dark-mode .admin-wiki-dropzone {
  border-color: #334155;
  background: #111827;
}

body.dark-mode .admin-wiki-nav-subtopic {
  border-left-color: #334155;
}

body.dark-mode .admin-wiki-nav-page {
  color: #cbd5e1;
}

body.dark-mode .admin-wiki-nav-row input {
  color: #f8fafc;
}

body.dark-mode .admin-wiki-nav-subtopic .admin-wiki-nav-row input {
  color: #cbd5e1;
}

body.dark-mode .admin-wiki-nav-row input:focus,
body.dark-mode .admin-wiki-empty-tree,
body.dark-mode .admin-wiki-empty-editor {
  border-color: #334155;
  background: #111827;
}

body.dark-mode .admin-wiki-empty-tree strong,
body.dark-mode .admin-wiki-empty-editor strong {
  color: #f8fafc;
}

body.dark-mode .admin-wiki-nav-delete {
  border-color: #7f1d1d;
  background: #2a1114;
  color: #fca5a5;
}

body.dark-mode .admin-wiki-nav-add {
  border-color: #1e3a8a;
  background: #0b2447;
  color: #bfdbfe;
}

body.dark-mode .admin-wiki-nav-add:hover {
  border-color: #2563eb;
  background: #102f63;
  color: #dbeafe;
}

body.dark-mode .admin-wiki-nav-delete:hover {
  border-color: #ef4444;
  background: #450f14;
  color: #fecaca;
}

body.dark-mode .admin-wiki-nav-page.active {
  border-color: #38bdf8;
  background: #082f49;
  color: #e0f2fe;
  box-shadow: inset 3px 0 0 #38bdf8;
}

body.dark-mode .wiki-builder-text p,
body.dark-mode .wiki-nav-sub > span,
body.dark-mode .wiki-builder-media figcaption {
  color: #cbd5e1;
}

body.dark-mode .admin-wiki-builder input,
body.dark-mode .admin-wiki-builder select,
body.dark-mode .admin-wiki-builder textarea {
  border-color: #334155;
  background: #0b1220;
  color: #e5edf7;
}

body.dark-mode .wiki-builder-table-wrap,
body.dark-mode .wiki-builder-table th,
body.dark-mode .wiki-builder-table td {
  border-color: #334155;
}

body.dark-mode .wiki-builder-table-wrap {
  background: #111827;
}

body.dark-mode .wiki-builder-table th {
  background: #0f172a;
  color: #f8fafc;
}

body.dark-mode .wiki-builder-table td {
  color: #cbd5e1;
}

@media (max-width: 980px) {
  #wikiModal .wiki-layout,
  .admin-wiki-builder-layout {
    grid-template-columns: 1fr !important;
  }

  #wikiModal .wiki-nav {
    max-height: 220px;
  }

  .admin-wiki-builder-block {
    grid-template-columns: 1fr;
  }

  .admin-wiki-block-topline {
    grid-template-columns: 1fr;
  }

  .admin-wiki-block-actions {
    justify-content: flex-end;
  }
}

#shopModal .shop-switch {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

#shopModal .shop-search {
  grid-area: search !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  border: 1px solid #c6d4e4 !important;
  background: #ffffff !important;
}

#shopModal .shop-search span {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#shopModal .shop-search input {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  outline: none !important;
}

body.dark-mode #shopModal .shop-search {
  border-color: #334155 !important;
  background: #0f172a !important;
}

body.dark-mode #shopModal .shop-search span {
  color: #cbd5e1 !important;
}

body.dark-mode #shopModal .shop-search input {
  color: #f8fafc !important;
}

#shopModal .shop-cart {
  grid-area: cart !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid #c6d4e4 !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}

#shopModal .shop-cart-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#shopModal .shop-cart-head > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#shopModal .shop-cart-head strong {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

#shopModal .shop-cart-head span,
#shopModal .shop-cart-site,
#shopModal .shop-cart-empty,
#shopModal .shop-cart-item span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#shopModal .shop-cart-head button {
  width: auto !important;
  min-width: 78px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
}

#shopModal .shop-cart-list {
  min-height: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  overflow: auto !important;
}

#shopModal .shop-cart-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 10px !important;
  border: 1px solid #dbe7f3 !important;
  background: #ffffff !important;
}

#shopModal .shop-cart-item > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

#shopModal .shop-cart-item strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

#shopModal .shop-cart-item .icon-button {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
}

#shopModal .shop-cart-empty {
  padding: 14px !important;
  border: 1px dashed #cbd8e7 !important;
  background: #ffffff !important;
}

#shopModal .shop-cart-site {
  display: grid !important;
  gap: 6px !important;
}

#shopModal .shop-cart-site.shop-cart-site-hidden {
  display: none !important;
}

#shopModal .shop-cart-site select {
  min-height: 36px !important;
}

#shopModal .shop-cart-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid #dbe7f3 !important;
}

#shopModal .shop-cart-total span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#shopModal .shop-cart-total strong {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

#shopModal #checkoutShopCart {
  min-height: 40px !important;
}

body.dark-mode #shopModal .shop-cart {
  border-color: #334155 !important;
  background: #0b1220 !important;
}

body.dark-mode #shopModal .shop-cart-item,
body.dark-mode #shopModal .shop-cart-empty {
  border-color: #334155 !important;
  background: #111827 !important;
}

body.dark-mode #shopModal .shop-cart-head strong,
body.dark-mode #shopModal .shop-cart-item strong,
body.dark-mode #shopModal .shop-cart-total strong {
  color: #f8fafc !important;
}

body.dark-mode #shopModal .shop-cart-head span,
body.dark-mode #shopModal .shop-cart-site,
body.dark-mode #shopModal .shop-cart-empty,
body.dark-mode #shopModal .shop-cart-item span,
body.dark-mode #shopModal .shop-cart-total span {
  color: #cbd5e1 !important;
}

body.dark-mode #shopModal .shop-cart-total {
  border-top-color: #334155 !important;
}

/* Final shop image popup background cleanup */
.shop-image-stage {
  background: #f8fafc !important;
  background-image: none !important;
  background-size: auto !important;
}

body.dark-mode .shop-image-stage {
  background: #0f172a !important;
  background-image: none !important;
}


/* Final notification center background cleanup */
body.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification {
  background: #f8fafc !important;
  background-image: none !important;
  background-size: auto !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #notificationsPanel .map-notification {
  background: #0f172a !important;
  background-image: none !important;
}

/* Final planning-only window override */
body.view-planningonly {
  overflow: hidden !important;
}

body.view-planningonly .topbar,
body.view-planningonly .window-dock,
body.view-planningonly #map,
body.view-planningonly .layout.map-stage > :not(#locoPlanningPanel) {
  display: none !important;
}

body.view-planningonly .layout.map-stage,
body.ui-window-design.view-planningonly .layout.map-stage {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.view-planningonly #locoPlanningPanel,
body.ui-window-design.view-planningonly #locoPlanningPanel,
body.ui-window-design.view-planningonly #locoPlanningPanel.hidden-window,
body.ui-window-design.view-planningonly #locoPlanningPanel:not(.hidden-window) {
  display: grid !important;
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  z-index: 2500 !important;
}

body.view-planningonly #closePlanningPopup {
  display: none !important;
}

/* Shop layout and vehicle cards: single source of truth */
#shopModal .shop-modal-card {
  width: 95vw !important;
  height: 95vh !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#shopModal .modal-shop-grid {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  grid-template-areas:
    "notice notice"
    "tabs search"
    "info cart"
    "content cart" !important;
  gap: 12px !important;
  padding: 12px !important;
  overflow: hidden !important;
}

#shopModal .shop-intro-alert {
  grid-area: notice !important;
}

#shopModal .shop-switch {
  grid-area: tabs !important;
}

#shopModal .shop-search {
  grid-area: search !important;
}

#shopModal .shop-category-info {
  grid-area: info !important;
}

#shopModal .shop-cart {
  grid-area: cart !important;
}

#shopModal .shop-section {
  grid-area: content !important;
  min-height: 0 !important;
  height: 100% !important;
  display: none !important;
  overflow: hidden !important;
}

#shopModal .shop-section.active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

#shopModal .shop-section .sub-head {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 4px 8px !important;
  color: #1f2937 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-transform: none !important;
}

#shopModal .shop-row {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  align-items: start !important;
  gap: 14px !important;
  padding: 8px 4px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#shopModal .shop-card {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px !important;
  overflow: visible !important;
  border: 1px solid #d4dfed !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08) !important;
}

#shopModal .shop-card:hover {
  border-color: #93b4de !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, .12) !important;
}

#shopModal .shop-card .vehicle-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;
  margin: 0 0 10px !important;
  border: 1px solid #dde7f3 !important;
  background: #eef3f8 !important;
  overflow: hidden !important;
}

#shopModal .shop-card .vehicle-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
}

#shopModal .shop-card strong {
  display: block !important;
  min-width: 0 !important;
  margin: 0 34px 6px 0 !important;
  padding: 0 !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#shopModal .shop-card > span {
  display: block !important;
  min-width: 0 !important;
  margin: 0 0 4px !important;
  color: #475569 !important;
  font-size: 12px !important;
 font-weight: 800 !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#shopModal .shop-card .cargo-icons {
  min-height: 26px !important;
  margin: 6px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  overflow: hidden !important;
}

#shopModal .shop-card .shop-info-button {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2 !important;
}

#shopModal .shop-acquire-controls,
#shopModal .used-shop-controls,
#shopModal .used-shop-controls.used-shop-controls-double {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  grid-auto-rows: 38px !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 12px 0 0 !important;
  align-items: stretch !important;
}

#shopModal .shop-acquire-controls .shop-quantity,
#shopModal .used-shop-controls .shop-quantity,
#shopModal .shop-acquire-controls .shop-duration-months,
#shopModal .used-shop-controls .shop-duration-months {
  grid-column: 1 !important;
}

#shopModal .shop-acquire-controls .shop-mode-select,
#shopModal .used-shop-controls .shop-mode-select,
#shopModal .shop-acquire-controls .shop-add-cart,
#shopModal .used-shop-controls .shop-add-cart {
  grid-column: 2 !important;
}

#shopModal .shop-acquire-controls:not(:has(.shop-duration-months)) .shop-add-cart,
#shopModal .used-shop-controls:not(:has(.shop-duration-months)) .shop-add-cart {
  grid-column: 1 / -1 !important;
}

#shopModal .shop-card .shop-quantity,
#shopModal .shop-card .shop-mode-select,
#shopModal .shop-card .shop-duration-months,
#shopModal .shop-card .shop-add-cart {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#shopModal .shop-card .shop-mode-select,
#shopModal .shop-card .shop-duration-months {
  padding: 0 9px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#shopModal .shop-card .shop-add-cart {
  padding: 0 10px !important;
  white-space: nowrap !important;
}

body.dark-mode #shopModal .modal-shop-grid {
  background: #0f172a !important;
}

body.dark-mode #shopModal .shop-card .vehicle-image {
  border-color: #334155 !important;
  background: #0b1220 !important;
}

body.dark-mode #shopModal .shop-card strong {
  color: #f8fafc !important;
}

body.dark-mode #shopModal .shop-card > span,
body.dark-mode #shopModal .shop-section .sub-head {
  color: #cbd5e1 !important;
}

@media (max-width: 900px) {
  #shopModal .modal-shop-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "notice"
      "tabs"
      "search"
      "info"
      "content"
      "cart" !important;
  }

  #shopModal .shop-cart {
    min-height: 220px !important;
  }
}

@media (max-width: 760px) {
  #shopModal .shop-row {
    grid-template-columns: 1fr !important;
  }
}

/* Dashboard map fullscreen */
body.ui-window-design.map-fullscreen:not(.view-maponly) .layout.map-stage {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "map" !important;
  gap: 0 !important;
  padding: 10px !important;
  height: calc(100vh - clamp(58px, 7vh, 72px)) !important;
}

body.ui-window-design.map-fullscreen:not(.view-maponly) .layout.map-stage > #map {
  grid-area: map !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: 1 !important;
}

body.ui-window-design.map-fullscreen:not(.view-maponly) .layout.map-stage > .panel,
body.ui-window-design.map-fullscreen:not(.view-maponly) .layout.map-stage > .side-panel,
body.ui-window-design.map-fullscreen:not(.view-maponly) #locoPlanningPanel,
body.ui-window-design.map-fullscreen:not(.view-maponly) .window-dock {
  display: none !important;
}

body.ui-window-design.map-fullscreen:not(.view-maponly) .map-layer-control {
  grid-area: map !important;
  justify-self: end !important;
  align-self: start !important;
  z-index: 1500 !important;
}

body.ui-window-design.map-fullscreen:not(.view-maponly) .map-fullscreen-toggle.active {
  border-color: #0f8b8d !important;
  background: linear-gradient(135deg, #0f8b8d, #2563eb) !important;
  color: #fff !important;
}
body.auth-locked .auth-backdrop {
  background:
    linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .12)),
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, .5), transparent 32%),
    linear-gradient(135deg, #e7dfd2 0%, #cfc3ad 48%, #a79275 100%) !important;
}

body.auth-locked .login-card {
  width: min(980px, 96vw) !important;
  max-width: 980px !important;
  overflow: hidden !important;
}

body.auth-locked .login-card::before {
  content: "Rail Dispatcher";
  display: block;
  padding: 26px 34px;
  background:
    linear-gradient(120deg, rgba(118, 15, 20, .92), rgba(201, 37, 45, .88)),
    linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, .14) 42% 46%, transparent 46% 100%);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.15;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .28);
}

body.dark-mode.auth-locked .login-card,
body.dark-mode.auth-locked .login-card .login-form {
  background: #22272d !important;
  color: #e7e9ec !important;
}

#orderModal .order-modal-card {
  width: 95vw !important;
  height: 95vh !important;
  max-width: none !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#orderModal .order-box {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(660px, 1.2fr) 285px minmax(380px, .85fr) !important;
  grid-template-rows: minmax(320px, 1fr) minmax(260px, 32%) !important;
  grid-template-areas:
    "form side map"
    "form timeline timeline" !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

#orderModal .order-form {
  grid-area: form !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 10px !important;
  overflow: auto !important;
  border-right: 1px solid #bbb !important;
  background: #fff !important;
}

#orderModal .order-form > label,
#orderModal .order-stop-quick,
#orderModal .order-stops-box,
#orderModal .order-details-box,
#orderModal .route-preview,
#orderModal .route-choice-list {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: visible !important;
  border: 1px solid #bbb !important;
  background: #fff !important;
  box-shadow: none !important;
}

#orderModal .order-form > label.half,
#orderModal .order-hazard-box,
#orderModal .order-speed-field {
  grid-column: span 1 !important;
}

#orderModal .order-form > label.full,
#orderModal .order-stop-quick,
#orderModal .order-stops-box,
#orderModal .order-details-box:not(.order-hazard-box),
#orderModal .route-preview,
#orderModal .route-choice-list,
#orderModal .order-actions {
  grid-column: 1 / -1 !important;
}

#orderModal .order-details-box,
#orderModal .order-stops-box,
#orderModal .route-preview,
#orderModal .route-choice-list {
  padding: 0 !important;
  overflow: hidden !important;
}

#orderModal .order-details-box .sub-head,
#orderModal .order-stops-head,
#orderModal .route-preview > strong,
#orderModal .route-choice-head {
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  padding: 7px 8px !important;
  border-bottom: 1px solid #bbb !important;
  background: #ececec !important;
  color: #333 !important;
  font-weight: 700 !important;
}

#orderModal .order-details-box > label,
#orderModal .order-detail-grid,
#orderModal .order-stops-box .stop-picker-card,
#orderModal .route-preview > span,
#orderModal .route-preview .route-preview-meta,
#orderModal .route-preview .route-profile-summary,
#orderModal .route-choice-list > :not(.route-choice-head) {
  margin: 0 !important;
  padding: 8px !important;
}

#orderModal .order-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  gap: 8px !important;
}

#orderModal .order-form label,
#orderModal .order-details-box .sub-head,
#orderModal .order-stops-head strong {
  color: #333 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#orderModal .order-form input,
#orderModal .order-form select,
#orderModal .order-form textarea {
  min-height: 31px !important;
  height: 31px !important;
  margin-top: 4px !important;
  border: 1px solid #aaa !important;
  background: #fff !important;
  color: #333 !important;
}

#orderModal .order-stop-quick {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 8px !important;
}

#orderModal .order-stop-quick-list {
  grid-column: 1 / -1 !important;
  padding: 0 !important;
  border-top: 1px solid #bbb !important;
}

#orderModal .order-stop-quick-list > strong {
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  padding: 7px 8px !important;
  border-bottom: 1px solid #bbb !important;
  background: #ececec !important;
  color: #333 !important;
}

#orderModal .speed-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

#orderModal .speed-row input {
  margin-top: 0 !important;
}

#orderModal .route-preview {
  color: #333 !important;
  background: #f5f5f5 !important;
}

#orderModal .route-preview-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

#orderModal .route-preview-meta span,
#orderModal .route-choice-card {
  border: 1px solid #ccc !important;
  background: #fff !important;
  box-shadow: none !important;
}

#orderModal .order-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#orderModal .order-actions button {
  min-height: 32px !important;
}

#orderModal .order-side-overview {
  grid-area: side !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-right: 1px solid #bbb !important;
  background: #f5f5f5 !important;
}

#orderModal .order-side-overview::before {
  content: none !important;
  display: none !important;
}

#orderModal .order-side-overview .planning-side-tabs {
  display: flex !important;
  gap: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #bbb !important;
  background: transparent !important;
}

#orderModal .order-side-overview .planning-side-tab {
  flex: 1 1 0 !important;
  height: 34px !important;
  border: 0 !important;
  border-right: 1px solid #bbb !important;
  background: #e8e8e8 !important;
  color: #333 !important;
}

#orderModal .order-side-overview .planning-side-tab.active {
  border-top: 3px solid #c61f27 !important;
  background: #fff !important;
  font-weight: 700 !important;
}

#orderModal .order-side-overview .planning-side-pane.active {
  min-height: 0 !important;
  padding: 6px !important;
  overflow: auto !important;
}

#orderModal .order-route-view,
#orderModal .order-route-view.hidden-control {
  grid-area: map !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-bottom: 1px solid #bbb !important;
  background: #fff !important;
}

#orderModal #orderMap {
  height: 100% !important;
  min-height: 230px !important;
  border: 0 !important;
}

#orderModal .order-timeline-panel,
#orderModal .order-timeline-panel.hidden-control {
  grid-area: timeline !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 330px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-top: 1px solid #bbb !important;
  background: #fff !important;
}

#orderModal .order-schedule-details,
#orderModal .order-timeline-scroll {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 9px !important;
  border: 0 !important;
  background: #fff !important;
  overflow: auto !important;
}

#orderModal .order-schedule-details {
  border-right: 1px solid #bbb !important;
  list-style: none !important;
}

#orderModal .order-timeline-scroll::before {
  content: "Wegstrahl" !important;
  display: block !important;
  margin: 0 0 7px !important;
  color: #333 !important;
  font-weight: 700 !important;
}

#orderModal .schedule-detail-box {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#orderModal .schedule-detail-box > strong:first-child,
#orderModal .schedule-detail-route-title {
  display: block !important;
  margin: 0 0 7px !important;
  color: #333 !important;
  font-size: 15px !important;
}

#orderModal .schedule-detail-route-title {
  padding-bottom: 7px !important;
  border-bottom: 1px solid #ccc !important;
}

#orderModal .schedule-detail-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

#orderModal .schedule-detail-grid > span {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 7px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid #ccc !important;
  background: transparent !important;
  color: #333 !important;
  box-shadow: none !important;
}

#orderModal .schedule-detail-grid > span b {
  color: #777 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#orderModal .schedule-route-choice {
  margin: 0 0 9px !important;
  border: 1px solid #bbb !important;
  background: #fff !important;
}

#orderModal .schedule-route-choice-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 7px !important;
  border-bottom: 1px solid #bbb !important;
  background: #ececec !important;
  color: #333 !important;
}

#orderModal .schedule-route-choice-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  padding: 7px !important;
}

#orderModal .schedule-route-choice-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 8px !important;
  border: 1px solid #bbb !important;
  background: #fff !important;
  color: #333 !important;
  text-align: left !important;
  box-shadow: none !important;
}

#orderModal .schedule-route-choice-card:hover,
#orderModal .schedule-route-choice-card.active {
  border-color: #c61f27 !important;
  background: #fff4f4 !important;
}

#orderModal .schedule-route-choice-card.active {
  box-shadow: inset 4px 0 #c61f27 !important;
}

#orderModal .schedule-route-choice-card i {
  align-self: center !important;
  padding: 4px 7px !important;
  background: #e8e8e8 !important;
  color: #333 !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

#orderModal .schedule-route-choice-card.active i {
  background: #c61f27 !important;
  color: #fff !important;
}

#orderModal .station-marker.preview {
  outline: 2px dashed rgba(255, 255, 255, .9) !important;
  outline-offset: 2px !important;
  opacity: .78 !important;
}

body.dark-mode #orderModal .order-box,
body.dark-mode #orderModal .order-form,
body.dark-mode #orderModal .order-form > label,
body.dark-mode #orderModal .order-stop-quick,
body.dark-mode #orderModal .order-stops-box,
body.dark-mode #orderModal .order-details-box,
body.dark-mode #orderModal .route-preview,
body.dark-mode #orderModal .route-choice-list,
body.dark-mode #orderModal .order-side-overview,
body.dark-mode #orderModal .order-route-view,
body.dark-mode #orderModal .order-timeline-panel,
body.dark-mode #orderModal .order-schedule-details,
body.dark-mode #orderModal .order-timeline-scroll,
body.dark-mode #orderModal .schedule-route-choice,
body.dark-mode #orderModal .schedule-route-choice-card,
body.dark-mode #orderModal .route-preview-meta span {
  background: #252a30 !important;
  border-color: #50555b !important;
  color: #e7e9ec !important;
}

body.dark-mode #orderModal .order-details-box .sub-head,
body.dark-mode #orderModal .order-stops-head,
body.dark-mode #orderModal .order-stop-quick-list > strong,
body.dark-mode #orderModal .route-preview > strong,
body.dark-mode #orderModal .route-choice-head,
body.dark-mode #orderModal .schedule-route-choice-head,
body.dark-mode #orderModal .order-side-overview .planning-side-tab,
body.dark-mode #orderModal .schedule-route-choice-card i {
  background: #2b3036 !important;
  border-color: #50555b !important;
  color: #e7e9ec !important;
}

body.dark-mode #orderModal .order-form label,
body.dark-mode #orderModal .schedule-detail-box > strong:first-child,
body.dark-mode #orderModal .schedule-detail-route-title,
body.dark-mode #orderModal .schedule-detail-grid > span,
body.dark-mode #orderModal .order-timeline-scroll::before {
  color: #e7e9ec !important;
}

body.dark-mode #orderModal .schedule-detail-grid > span,
body.dark-mode #orderModal .schedule-detail-route-title,
body.dark-mode #orderModal .schedule-route-choice-head,
body.dark-mode #orderModal .order-side-overview .planning-side-tabs,
body.dark-mode #orderModal .order-side-overview .planning-side-tab {
  border-color: #50555b !important;
}

body.dark-mode #orderModal .schedule-detail-grid > span b {
  color: #aeb4bb !important;
}

body.dark-mode #orderModal .schedule-route-choice-card:hover,
body.dark-mode #orderModal .schedule-route-choice-card.active {
  background: #3a2426 !important;
  border-color: #c61f27 !important;
}

@media (max-width: 1180px) {
  #orderModal .order-box {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .75fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(250px, 32%) !important;
    grid-template-areas:
      "form map"
      "form timeline" !important;
  }

  #orderModal .order-side-overview {
    display: none !important;
  }

  #orderModal .order-route-view {
    display: block !important;
  }
}

@media (max-width: 820px) {
  #orderModal .order-box {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) 260px 260px !important;
    grid-template-areas:
      "form"
      "map"
      "timeline" !important;
  }

  #orderModal .order-form,
  #orderModal .order-detail-grid,
  #orderModal .order-timeline-panel {
    grid-template-columns: 1fr !important;
  }

  #orderModal .order-form > label.half,
  #orderModal .order-hazard-box,
  #orderModal .order-speed-field {
    grid-column: 1 / -1 !important;
  }
}

/* Rail Dispatcher unified theme: one final app-wide light/dark layer. */
:root {
  --rd-red: #c61f27;
  --rd-red-dark: #a5161d;
  --rd-green: #38a852;
  --rd-green-dark: #24873c;
  --rd-blue: #2d83c5;
  --rd-bg: #e7e7e7;
  --rd-panel: #ffffff;
  --rd-panel-soft: #f5f5f5;
  --rd-panel-strong: #ececec;
  --rd-border: #aaaaaa;
  --rd-border-soft: #cfd4d8;
  --rd-text: #333333;
  --rd-muted: #6f7781;
  --rd-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  --ui-radius-sm: 0;
  --ui-radius: 0;
  --ui-radius-lg: 0;
  --app-radius: 0;
  --app-radius-lg: 0;
}

body.dark-mode {
  --rd-red: #8e151b;
  --rd-red-dark: #6f0f14;
  --rd-green: #2f8f46;
  --rd-green-dark: #247538;
  --rd-blue: #2a6fa6;
  --rd-bg: #15181c;
  --rd-panel: #252a30;
  --rd-panel-soft: #20252a;
  --rd-panel-strong: #2b3036;
  --rd-border: #50555b;
  --rd-border-soft: #3f444a;
  --rd-text: #e7e9ec;
  --rd-muted: #aeb4bb;
  --rd-shadow: 0 1px 4px rgba(0, 0, 0, .38);
}

html,
body,
body.ui-window-design {
  background: var(--rd-bg) !important;
  color: var(--rd-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

body :is(
  .topbar,
  .brand-mark,
  .layout,
  .panel,
  .side-panel,
  .floating-window,
  .window-dock,
  .panel-head,
  .modal,
  .modal-card,
  .modal-head,
  .login-card,
  .profile-card,
  .fleet-card,
  .shop-modal-card,
  .order-modal-card,
  .base-modal-card,
  .site-detail-card,
  .track-rental-card,
  .track-rental-new-card,
  .admin-card,
  .admin-data-card,
  .admin-vehicle-card,
  .admin-user-detail-card,
  .admin-user-table-panel,
  .admin-track-card,
  .admin-rank-card,
  .admin-wiki-active-page-card,
  .shop-card,
  .vehicle-card,
  .wagon-card,
  .car-card,
  .contract-card,
  .schedule-card,
  .site-card,
  .personnel-card,
  .personnel-offer-card,
  .activity-card,
  .account-card,
  .account-row,
  .notice,
  .info-box,
  .alert,
  .empty-state,
  .radio-log,
  .sub-head,
  .section-title,
  .window-tabs,
  .window-tab,
  .tab-button,
  .shop-tab,
  .shop-switch,
  .shop-search,
  .shop-intro-alert,
  .shop-category-info,
  .shop-cart,
  .shop-cart-item,
  .shop-cart-empty,
  .shop-cart-site,
  .route-choice-card,
  .schedule-route-choice-card,
  .stop-picker-card,
  .stop-chip,
  .badge,
  .pill,
  .chip,
  .map-layer-panel,
  .map-layer-toggle,
  .search-results,
  .picker-results,
  .result,
  .leaflet-container,
  .leaflet-control,
  .leaflet-control a,
  table,
  thead,
  tbody,
  tr,
  th,
  td,
  input,
  select,
  textarea,
  button,
  .primary,
  .secondary,
  .secondary-button,
  .danger-button,
  .icon-button,
  .plus-button,
  .time-button,
  .vehicle-purchase-close,
  .shop-info-close,
  .shop-image-close
) {
  border-radius: 0 !important;
}

body :is(.panel, .side-panel, .floating-window, .window-dock) {
  background: var(--rd-panel) !important;
  border: 1px solid var(--rd-border) !important;
  box-shadow: var(--rd-shadow) !important;
  color: var(--rd-text) !important;
}

body :is(.modal-card, .game-dialog, .page-confirmation-dialog, .vehicle-purchase-dialog, .shop-info-dialog, .shop-image-dialog, .loading-card) {
  background: var(--rd-panel) !important;
  border: 1px solid var(--rd-border) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .46) !important;
  color: var(--rd-text) !important;
}

body :is(.panel-head, .window-tabs, .section-title, .sub-head, .thead, .resource, .planning-toolbar, .lp-toolbar, .lp-head, .planning-side-controls, .table-head, thead) {
  background: linear-gradient(#fafafa, #e8e8e8) !important;
  border-color: #bbbbbb !important;
  color: #333333 !important;
}

body.dark-mode :is(.panel-head, .window-tabs, .section-title, .sub-head, .thead, .resource, .planning-toolbar, .lp-toolbar, .lp-head, .planning-side-controls, .table-head, thead) {
  background: linear-gradient(#2d3238, #24292e) !important;
  border-color: #4b5055 !important;
  color: var(--rd-text) !important;
}

body :is(.topbar, header.topbar) {
  background: linear-gradient(#d52a31, #b91820) !important;
  border-bottom: 1px solid #8e1117 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .34) !important;
}

body.dark-mode :is(.topbar, header.topbar) {
  background: linear-gradient(#9b1a20, #721116) !important;
  border-bottom-color: #5e0d11 !important;
}

body :is(.shop-card, .vehicle-card, .wagon-card, .car-card, .contract-card, .schedule-card, .site-card, .personnel-card, .personnel-offer-card, .activity-card, .admin-data-card, .admin-vehicle-card, .account-row, .company-card, .company-member, .multiplayer-panel, .multiplayer-owner-panel, .track-rental-list-item, .track-rental-section, .track-rental-map-panel, .planning-side-contract, .planning-side-activity, .planning-side-track, .planning-side-loco) {
  background: var(--rd-panel) !important;
  border: 1px solid var(--rd-border) !important;
  box-shadow: none !important;
  color: var(--rd-text) !important;
}

body.dark-mode :is(.shop-card, .vehicle-card, .wagon-card, .car-card, .contract-card, .schedule-card, .site-card, .personnel-card, .personnel-offer-card, .activity-card, .admin-data-card, .admin-vehicle-card, .account-row, .company-card, .company-member, .multiplayer-panel, .multiplayer-owner-panel, .track-rental-list-item, .track-rental-section, .track-rental-map-panel, .planning-side-contract, .planning-side-activity, .planning-side-track, .planning-side-loco) {
  background: var(--rd-panel) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body :is(input, select, textarea, .search-results, .picker-results) {
  background: #ffffff !important;
  border: 1px solid #aaaaaa !important;
  color: #333333 !important;
  box-shadow: none !important;
}

body.dark-mode :is(input, select, textarea, .search-results, .picker-results) {
  background: #15191d !important;
  border-color: #565b61 !important;
  color: var(--rd-text) !important;
}

body :is(button, .secondary, .secondary-button, .icon-button, .plus-button, .time-button, .window-tab, .tab-button, .shop-tab) {
  border: 1px solid #aaaaaa !important;
  background: linear-gradient(#ffffff, #e5e5e5) !important;
  color: #333333 !important;
  box-shadow: none !important;
}

body.dark-mode :is(button, .secondary, .secondary-button, .icon-button, .plus-button, .time-button, .window-tab, .tab-button, .shop-tab) {
  border-color: #50555b !important;
  background: #2b3036 !important;
  color: var(--rd-text) !important;
}

body :is(.primary, button.primary, .btn-green, .site-buy-button, .shop-add-cart, .cart-buy-button, #checkoutShopCart, .time-button.active, .window-tab.active, .tab-button.active, .shop-tab.active, .auth-tabs button.active) {
  border-color: var(--rd-green-dark) !important;
  background: linear-gradient(#53c56b, #319d48) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.dark-mode :is(.primary, button.primary, .btn-green, .site-buy-button, .shop-add-cart, .cart-buy-button, #checkoutShopCart, .time-button.active, .window-tab.active, .tab-button.active, .shop-tab.active, .auth-tabs button.active) {
  border-color: #1e6a2f !important;
  background: linear-gradient(#3aa955, #247c37) !important;
  color: #ffffff !important;
}

body :is(.danger, button.danger, .danger-button) {
  border-color: #a7181e !important;
  background: linear-gradient(#df3a41, #be1f27) !important;
  color: #ffffff !important;
}

body.dark-mode :is(.danger, button.danger, .danger-button) {
  border-color: #6f0f14 !important;
  background: linear-gradient(#b92b32, #8d161d) !important;
  color: #ffffff !important;
}

body.dark-mode :is(h1, h2, h3, h4, strong, b, label, th, .panel-head h2, .sub-head, .section-title) {
  color: var(--rd-text) !important;
}

body.dark-mode :is(small, .muted, .panel-head span, .head-actions span, .company-card span, .company-member span, .site-card span, .contract-card small, .schedule-card small, .vehicle-card span, .empty-state, .radio-log) {
  color: var(--rd-muted) !important;
}

body.dark-mode :is(td, .result, .map-layer-row, .track-rental-map-hint, .shop-cart-total, .account-table td) {
  border-color: var(--rd-border-soft) !important;
  color: var(--rd-text) !important;
}

body.dark-mode .result:hover,
body.dark-mode :is(.company-card.active, .company-member.owner, .route-choice-card.active, .schedule-route-choice-card.active) {
  background: #1f3034 !important;
  border-color: #2f8f46 !important;
}

body :is(.modal-head, .game-dialog-head, .page-confirmation-head) {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(#d52a31, #b91820) !important;
  border-bottom: 1px solid #8e1117 !important;
  color: #ffffff !important;
}

body.dark-mode :is(.modal-head, .game-dialog-head, .page-confirmation-head) {
  background: linear-gradient(#9b1a20, #721116) !important;
  border-bottom-color: #5e0d11 !important;
}

body .modal-head > div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

body .modal-head > div > h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 1.1 !important;
}

body .modal-head :is(span, small, p),
#shopModal .modal-head span,
#shopModal .shop-modal-card > .modal-head span:empty {
  display: none !important;
}

body :is(.modal-head, .game-dialog-head, .page-confirmation-head) > button,
body :is(.vehicle-purchase-close, .shop-info-close, .shop-image-close) {
  position: relative !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

body :is(.modal-head, .game-dialog-head, .page-confirmation-head) > button {
  align-self: stretch !important;
}

body :is(.vehicle-purchase-close, .shop-info-close, .shop-image-close) {
  position: absolute !important;
}

body :is(.modal-head, .game-dialog-head, .page-confirmation-head) > button::before,
body :is(.vehicle-purchase-close, .shop-info-close, .shop-image-close)::before {
  content: "\00d7" !important;
  display: block !important;
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body :is(.vehicle-purchase-close, .shop-info-close, .shop-image-close)::before {
  color: var(--rd-text) !important;
}

body.dark-mode :is(.vehicle-purchase-close, .shop-info-close, .shop-image-close)::before {
  color: #ffffff !important;
}

body :is(.modal-head, .game-dialog-head, .page-confirmation-head) > button::after,
body :is(.vehicle-purchase-close, .shop-info-close, .shop-image-close)::after {
  content: none !important;
  display: none !important;
}

body :is(.modal-head, .game-dialog-head, .page-confirmation-head) > button:hover {
  background: rgba(0, 0, 0, .18) !important;
}

body :is(.vehicle-purchase-close, .shop-info-close, .shop-image-close):hover {
  background: var(--rd-panel-strong) !important;
}

.top-actions,
.time-controls {
  display: flex !important;
  align-items: center !important;
}

.time-controls .time-button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.time-controls .time-button[data-speed="0"] {
  position: relative !important;
  width: 52px !important;
  min-width: 52px !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .36) !important;
}

.time-controls .time-button[data-speed="0"]::before,
.time-controls .time-button[data-speed="0"]::after {
  content: "" !important;
  flex: 0 0 4px !important;
  display: block !important;
  width: 4px !important;
  min-width: 4px !important;
  max-width: 4px !important;
  height: 15px !important;
  min-height: 15px !important;
  border: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
  opacity: .96 !important;
}

.time-controls .time-button[data-speed="0"]::before {
  margin-right: 5px !important;
}

.time-controls .time-button[data-speed="0"].active {
  border-color: rgba(45, 212, 191, .68) !important;
  background: linear-gradient(135deg, #0f766e, #155e75) !important;
  color: #ffffff !important;
}

#countrySkillButton,
#multiplayerButton,
.icon-action {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
}

#countrySkillButton i,
.icon-action i {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

#multiplayerButton {
  position: relative !important;
}

#multiplayerButton::after {
  content: "" !important;
  position: absolute !important;
  right: 4px !important;
  top: 4px !important;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background: #ef4444 !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18) !important;
}

#multiplayerButton.company-mode::after {
  background: #22c55e !important;
}

#multiplayerButton.solo-mode::after {
  background: #f59e0b !important;
}

#multiplayerButton:disabled::after {
  background: #94a3b8 !important;
}

.timeline li::before,
.way-stop i,
#orderModal .order-timeline-scroll .timeline li::before,
.country-skill-progress,
.country-skill-progress i,
.fleet-condition,
.fleet-condition span,
.contract-progress,
.contract-progress span {
  border-radius: 9999px !important;
}

#loadingScreen .loading-progress,
.loading-screen .loading-progress,
.loading-progress {
  height: 9px !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  background: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
  clip-path: inset(0 round 9999px) !important;
  -webkit-mask-image: -webkit-radial-gradient(#ffffff, #000000) !important;
}

body.dark-mode :is(#loadingScreen .loading-progress, .loading-screen .loading-progress, .loading-progress) {
  background: #111827 !important;
  border-color: #334155 !important;
}

#loadingScreen .loading-progress > i,
.loading-screen .loading-progress > i,
.loading-progress > i {
  display: block !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  background: linear-gradient(90deg, #0f8b8d 0%, #2563eb 100%) !important;
  transition: width .22s ease !important;
  clip-path: inset(0 round 9999px) !important;
}

#loadingScreen .loading-spinner,
.loading-screen .loading-spinner,
.loading-spinner {
  width: 34px !important;
  height: 34px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  clip-path: circle(50%) !important;
  overflow: hidden !important;
}

body.dark-mode :is(.leaflet-control, .leaflet-control a, .map-layer-panel) {
  background: #252a30 !important;
  border-color: #50555b !important;
  color: #e7e9ec !important;
}

body.dark-mode :is(.map-notification, .map-toast, .company-chat-panel, .company-chat-head, .company-chat-form, .company-chat-message) {
  background: #252a30 !important;
  border-color: #50555b !important;
  color: #e7e9ec !important;
}

body.dark-mode .company-chat-message.own {
  background: #163a34 !important;
  border-color: #247c37 !important;
}

/* Targeted dark-mode repairs for ID-scoped modal rules. */
body :is(
  #shopModal .shop-card,
  #shopModal .shop-cart,
  #shopModal .shop-cart-item,
  #shopModal .shop-cart-empty,
  #shopModal .shop-cart-site,
  #locoActivityModal .activity-detail-list li,
  #hotelActivityModal .hotel-offer,
  #hotelActivityModal .pkw-activity-preview,
  #multiplayerModal .multiplayer-panel,
  #multiplayerModal .multiplayer-owner-panel,
  #multiplayerModal .multiplayer-hero > div,
  #multiplayerModal .create-company-entry,
  #companyCreateModal .company-create-body > label,
  #adminModal .admin-tabs,
  #adminModal .admin-data-box,
  #adminModal .admin-data-card,
  #adminModal .admin-vehicle-card,
  #adminModal .admin-table-wrap,
  #adminModal .admin-data-table,
  #adminModal .admin-inline-editor,
  #adminModal .admin-settings-panel,
  #adminModal .admin-places-overview,
  #adminEditModal .admin-field,
  #adminFuelModal .admin-fuel-card,
  #adminTrackModal .admin-track-modal-card,
  #adminUserModal .admin-user-detail-card
) {
  border-radius: 0 !important;
}

body.dark-mode #shopModal :is(.modal-shop-grid, .shop-section, .shop-row, .shop-switch, .shop-intro-alert, .shop-category-info, .shop-search, .shop-cart, .shop-cart-head, .shop-cart-total) {
  background: var(--rd-panel-soft) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #shopModal :is(.shop-card, .shop-cart-item, .shop-cart-empty, .shop-cart-site) {
  background: var(--rd-panel) !important;
  border-color: var(--rd-border) !important;
  box-shadow: none !important;
  color: var(--rd-text) !important;
}

body.dark-mode #shopModal .shop-card:hover {
  border-color: #6b7280 !important;
  box-shadow: none !important;
}

body.dark-mode #shopModal .shop-card .vehicle-image {
  background: #171c22 !important;
  border-color: var(--rd-border-soft) !important;
}

body.dark-mode #shopModal :is(.shop-card strong, .shop-cart-head strong, .shop-cart-item strong, .shop-cart-total strong, .shop-section .sub-head) {
  color: var(--rd-text) !important;
}

body.dark-mode #shopModal :is(.shop-card > span, .shop-cart-head span, .shop-cart-item span, .shop-cart-site, .shop-cart-empty, .shop-cart-total span, .shop-category-info, .shop-intro-alert, .shop-search span) {
  color: var(--rd-muted) !important;
}

body.dark-mode #shopModal :is(.shop-quantity, .shop-mode-select, .shop-duration-months, .shop-search input, .shop-cart-site select) {
  background: #15191d !important;
  border-color: #565b61 !important;
  color: var(--rd-text) !important;
}

body.dark-mode #locoActivityModal :is(.loco-activity-card, .activity-detail-list) {
  background: var(--rd-panel) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #locoActivityModal .activity-detail-list li {
  background: var(--rd-panel-soft) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #locoActivityModal .activity-detail-list :is(span, small) {
  color: var(--rd-muted) !important;
}

body.dark-mode #hotelActivityModal :is(.hotel-activity-card, .hotel-activity-form, .hotel-offer-list, .pkw-activity-preview, .modal-actions) {
  background: var(--rd-panel) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #hotelActivityModal .pkw-activity-form label,
body.dark-mode #hotelActivityModal .hotel-offer {
  background: var(--rd-panel-soft) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #hotelActivityModal .hotel-offer.active {
  background: #17342d !important;
  border-color: #2f8f46 !important;
}

body.dark-mode #hotelActivityModal :is(.hotel-offer span, .hotel-offer-facts span, .pkw-activity-preview span, .modal-actions span) {
  color: var(--rd-muted) !important;
}

body.dark-mode #hotelActivityModal :is(.hotel-offer strong, .hotel-offer b, .pkw-activity-preview b) {
  color: var(--rd-text) !important;
}

body.dark-mode #multiplayerModal :is(.multiplayer-card, .multiplayer-layout, .multiplayer-main-grid, .multiplayer-panel, .multiplayer-owner-panel, .multiplayer-footer, .multiplayer-actions label, .company-list, .company-member-list, .company-card, .company-member, .create-company-entry, .multiplayer-code-box, .multiplayer-hero, .multiplayer-hero > div),
body.dark-mode #companyCreateModal :is(.company-create-card, .company-create-body, .company-create-body > label, .company-create-actions) {
  background: var(--rd-panel) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
  box-shadow: none !important;
}

body.dark-mode #multiplayerModal :is(.multiplayer-hero span, .multiplayer-hero small, .company-card span, .company-member span, .create-company-entry span, .multiplayer-footer .assign-hint),
body.dark-mode #companyCreateModal :is(span, small, .assign-hint) {
  color: var(--rd-muted) !important;
}

body.dark-mode #multiplayerModal :is(.multiplayer-hero strong, .company-card strong, .company-member strong, .create-company-entry strong),
body.dark-mode #companyCreateModal :is(strong, label) {
  color: var(--rd-text) !important;
}

body.dark-mode #adminModal :is(.admin-card, .admin-grid, .admin-tabs, .admin-box, .admin-data-box, .admin-toolbar, #adminCards, .admin-card-grid, .admin-place-io, .admin-inline-editor, .admin-inline-form, .admin-inline-live-map, .admin-settings-panel, .admin-places-overview, .admin-places-overview-head, .admin-table-wrap, .admin-data-table, .admin-card-image, .admin-cargo-preview),
body.dark-mode :is(#adminEditModal, #adminFuelModal, #adminTrackModal, #adminLiveMapModal, #adminUserModal) :is(.modal-card, .admin-field, .admin-fuel-card, .admin-track-modal-card, .admin-user-detail-card, .admin-user-table-panel, .admin-inline-live-map, .admin-table-wrap) {
  background: var(--rd-panel) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
  box-shadow: none !important;
}

body.dark-mode #adminModal :is(.admin-tab, .admin-field, .admin-data-card, .admin-vehicle-card, .admin-data-table tr.admin-data-card, .admin-table-empty),
body.dark-mode :is(#adminEditModal, #adminFuelModal, #adminTrackModal, #adminLiveMapModal, #adminUserModal) :is(.admin-field, .admin-fuel-row, .admin-track-place-card, .admin-user-table-panel) {
  background: var(--rd-panel-soft) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #adminModal .admin-tab.active {
  background: linear-gradient(#3aa955, #247c37) !important;
  border-color: #1e6a2f !important;
  color: #ffffff !important;
}

body.dark-mode #adminModal .admin-data-table th {
  background: #1b2026 !important;
  border-color: var(--rd-border-soft) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #adminModal .admin-data-table td {
  background: var(--rd-panel-soft) !important;
  border-color: var(--rd-border-soft) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #adminModal :is(.admin-toolbar h3, .admin-data-card strong, .admin-data-table strong, .admin-places-overview-head strong),
body.dark-mode :is(#adminEditModal, #adminFuelModal, #adminTrackModal, #adminLiveMapModal, #adminUserModal) :is(strong, label, h3, h4) {
  color: var(--rd-text) !important;
}

body.dark-mode #adminModal :is(.admin-data-box .assign-hint, .admin-data-card span, .admin-card-content span, .admin-data-table small, .admin-table-empty, .admin-places-overview-head span),
body.dark-mode :is(#adminEditModal, #adminFuelModal, #adminTrackModal, #adminLiveMapModal, #adminUserModal) :is(span, small, .assign-hint) {
  color: var(--rd-muted) !important;
}

body.dark-mode #adminModal .admin-places-overview-map {
  background: #111827 !important;
}

body.dark-mode .admin-place-map-popup {
  color: var(--rd-text) !important;
}

body.dark-mode .admin-place-map-popup span {
  color: var(--rd-muted) !important;
}

body.dark-mode .activity-context-menu {
  background: var(--rd-panel) !important;
  border-color: var(--rd-border) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45) !important;
  color: var(--rd-text) !important;
}

body.dark-mode .activity-context-menu button {
  background: var(--rd-panel-soft) !important;
  border: 1px solid var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.dark-mode .activity-context-menu button:hover {
  background: #203039 !important;
  border-color: #2f8f46 !important;
  color: #ffffff !important;
}

body.dark-mode :is(#activityModal, #pkwActivityModal, #hotelActivityModal) :is(.modal-card, .modal-activity-form, .activity-form-grid, .pkw-activity-form, .hotel-activity-form, .activity-modal-footer, .modal-actions) {
  background: var(--rd-panel) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
  box-shadow: none !important;
}

body.dark-mode :is(#activityModal, #pkwActivityModal, #hotelActivityModal) :is(
  .activity-form-grid label,
  .activity-times,
  .activity-game-time,
  #activityWagonSelect,
  .wagon-checkbox-list,
  .wagon-checkbox,
  .track-rental-row,
  .activity-trip-preview,
  .route-preview,
  .pkw-activity-form label,
  .pkw-personnel-field,
  .pkw-personnel-check-list,
  .pkw-personnel-option,
  .pkw-personnel-empty,
  .pkw-activity-preview,
  .hotel-offer-list,
  .hotel-offer,
  .hotel-activity-form label
) {
  background: var(--rd-panel-soft) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
  box-shadow: none !important;
}

body.dark-mode :is(#activityModal, #pkwActivityModal, #hotelActivityModal) :is(select, input, textarea) {
  background: #15191d !important;
  border-color: #565b61 !important;
  color: var(--rd-text) !important;
}

body.dark-mode :is(#activityModal, #pkwActivityModal, #hotelActivityModal) :is(.field-preview, .assign-hint, small, span) {
  color: var(--rd-muted) !important;
}

body.dark-mode :is(#activityModal, #pkwActivityModal, #hotelActivityModal) :is(strong, b, label) {
  color: var(--rd-text) !important;
}

body.dark-mode #activityModal #activityWagonSelect:empty,
body.dark-mode #activityModal .wagon-checkbox-list:empty {
  background: var(--rd-panel-soft) !important;
}

body.dark-mode #activityModal .activity-modal-footer {
  border-top: 1px solid var(--rd-border) !important;
}

body.dark-mode #hotelActivityModal .hotel-offer.active,
body.dark-mode #pkwActivityModal .pkw-personnel-option:has(input:checked) {
  background: #17342d !important;
  border-color: #2f8f46 !important;
}

body.dark-mode #hotelActivityModal .hotel-offer-icon {
  background: #17342d !important;
  border-color: #2f8f46 !important;
  color: #d1fae5 !important;
}

body.dark-mode #hotelActivityModal .hotel-offer.active .hotel-offer-icon {
  background: #247c37 !important;
  border-color: #2f8f46 !important;
  color: #ffffff !important;
}

body.dark-mode #multiplayerModal :is(#openCompanyCreateModal, #joinCompanyButton),
body.dark-mode #companyCreateModal :is(#createCompanyButton, .primary) {
  border-color: #1e6a2f !important;
  background: linear-gradient(#3aa955, #247c37) !important;
  color: #ffffff !important;
}

body.dark-mode .admin-place-map-actions button {
  background: var(--rd-panel-soft) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.dark-mode .admin-place-map-actions button.primary {
  background: linear-gradient(#3aa955, #247c37) !important;
  border-color: #1e6a2f !important;
  color: #ffffff !important;
}

body.dark-mode .admin-place-map-actions .danger-button {
  background: linear-gradient(#b92b32, #8d161d) !important;
  border-color: #6f0f14 !important;
  color: #ffffff !important;
}

input:not([type="range"]),
select,
textarea {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

button,
input,
select,
textarea {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

body .admin-place-map-popup-shell .leaflet-popup-content {
  width: 326px !important;
  max-width: min(326px, calc(100vw - 88px)) !important;
}

body .admin-place-map-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body .admin-place-map-actions button {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Personnel overview dark mode cleanup. */
body.dark-mode #personnelOverviewModal .personnel-overview-card {
  background: var(--rd-panel) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #personnelOverviewModal .personnel-overview-tabs {
  background: var(--rd-panel-soft) !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-text) !important;
}

body.dark-mode #personnelOverviewModal .personnel-overview-tabs button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--rd-muted) !important;
}

body.dark-mode #personnelOverviewModal .personnel-overview-tabs button:hover {
  background: #203039 !important;
  border-color: #3b444d !important;
  color: var(--rd-text) !important;
}

body.dark-mode #personnelOverviewModal .personnel-overview-tabs button.active {
  background: linear-gradient(#3aa955, #247c37) !important;
  border-color: #1e6a2f !important;
  color: #ffffff !important;
}

body.dark-mode #personnelOverviewModal :is(
  .personnel-overview-grid section,
  .training-form-card,
  .training-list-card,
  .training-people-field,
  .training-settings-card,
  .training-action-row,
  .personnel-list,
  .training-checkbox-list,
  .training-offer-list
) {
  background: var(--rd-panel-soft) !important;
  border-color: var(--rd-border) !important;
  box-shadow: none !important;
  color: var(--rd-text) !important;
}

body.dark-mode #personnelOverviewModal :is(
  .personnel-card,
  .personnel-offer-card,
  .training-person-check,
  .training-offer,
  .training-person-info,
  .person-training-info-card,
  .training-info-row
) {
  background: #15191d !important;
  border-color: var(--rd-border-soft) !important;
  box-shadow: none !important;
  color: var(--rd-text) !important;
}

body.dark-mode #personnelOverviewModal :is(
  .personnel-card:hover,
  .personnel-offer-card:hover,
  .training-person-check:hover,
  .training-offer:hover
) {
  background: #1b2229 !important;
  border-color: #2f8f46 !important;
}

body.dark-mode #personnelOverviewModal :is(
  .personnel-card span,
  .personnel-offer-card span,
  .training-person-check span,
  .training-person-check small,
  .training-offer span,
  .training-offer small,
  .training-info-row span,
  .training-info-row small,
  .field-preview,
  .assign-hint,
  small
) {
  color: var(--rd-muted) !important;
}

body.dark-mode #personnelOverviewModal :is(
  .personnel-card strong,
  .personnel-offer-card strong,
  .training-person-check strong,
  .training-offer strong,
  .training-people-field strong,
  .training-settings-card strong,
  .training-info-row strong,
  h3,
  h4,
  label
) {
  color: var(--rd-text) !important;
}

body.dark-mode #personnelOverviewModal :is(input, select, textarea) {
  background: #15191d !important;
  border-color: #565b61 !important;
  color: var(--rd-text) !important;
}

body.dark-mode #personnelOverviewModal .training-form-grid input[readonly] {
  background: #1b2229 !important;
  border-color: var(--rd-border) !important;
  color: var(--rd-muted) !important;
}

body.dark-mode #personnelOverviewModal .personnel-qual-chips em {
  background: #1e3a2f !important;
  border: 1px solid #2f8f46 !important;
  color: #d1fae5 !important;
}

body.dark-mode #personnelOverviewModal :is(
  .training-person-check:has(input:checked),
  .training-offer:has(input:checked)
) {
  background: #17342d !important;
  border-color: #2f8f46 !important;
}

/* Personnel overview header actions. */
body #personnelOverviewModal .modal-head > div:first-child {
  flex: 1 1 auto !important;
}

body #personnelOverviewModal .modal-head > .head-actions {
  flex: 0 0 auto !important;
  height: 100% !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body #personnelOverviewModal #generatePersonnelOffers {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #1e6a2f !important;
  background: linear-gradient(#3aa955, #247c37) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body #personnelOverviewModal #closePersonnelOverview {
  position: relative !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

body #personnelOverviewModal #closePersonnelOverview::before {
  content: "\00d7" !important;
  display: block !important;
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body #personnelOverviewModal #closePersonnelOverview::after {
  content: none !important;
  display: none !important;
}

body #personnelOverviewModal #closePersonnelOverview:hover {
  background: rgba(0, 0, 0, .18) !important;
}

/* Profile overview in dispatcher layout. */
body #profileModal.open {
  padding: 18px !important;
  align-items: center !important;
  justify-content: center !important;
}

body #profileModal .profile-card {
  width: min(1180px, calc(100vw - 36px)) !important;
  max-width: min(1180px, calc(100vw - 36px)) !important;
  height: min(820px, calc(100vh - 36px)) !important;
  max-height: min(820px, calc(100vh - 36px)) !important;
  display: grid !important;
  grid-template-rows: 40px minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid #777777 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .42) !important;
}

body #profileModal .profile-grid {
  display: grid !important;
  grid-template-columns: 320px repeat(12, minmax(0, 1fr)) !important;
  grid-template-areas:
    "identity stats stats stats stats stats stats stats stats stats stats stats stats"
    "identity sync sync sync sync sync sync sync sync sync sync sync sync"
    "identity password password password password password password password password password password password password"
    "identity danger danger danger danger danger danger danger danger danger danger danger danger" !important;
  grid-auto-rows: min-content !important;
  gap: 7px !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 7px !important;
  overflow: auto !important;
  align-content: start !important;
  background: #dddddd !important;
}

body #profileModal .profile-box {
  min-width: 0 !important;
  display: grid !important;
  gap: 0 !important;
  align-content: start !important;
  padding: 0 !important;
  border: 1px solid #aaaaaa !important;
  border-left: 1px solid #aaaaaa !important;
  border-top: 1px solid #aaaaaa !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12) !important;
  color: #333333 !important;
}

body #profileModal .profile-box > strong {
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border-bottom: 1px solid #bbbbbb !important;
  background: linear-gradient(#fafafa, #e8e8e8) !important;
  color: #333333 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

body #profileModal .profile-identity {
  grid-area: identity !important;
  grid-column: 1 / 2 !important;
  grid-row: 1 / 5 !important;
  display: block !important;
  min-height: 100% !important;
  text-align: center !important;
  background: #ffffff !important;
}

body #profileModal .profile-identity .profile-avatar {
  width: 96px !important;
  height: 96px !important;
  margin: 24px auto 12px !important;
  display: grid !important;
  place-items: center !important;
  border: 4px solid #ffffff !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .32) !important;
  color: #b91820 !important;
  font-size: 31px !important;
  font-weight: 950 !important;
}

body #profileModal .profile-identity::before {
  content: "" !important;
  display: block !important;
  height: 116px !important;
  margin-bottom: -92px !important;
  background: linear-gradient(#d52a31, #b91820) !important;
}

body #profileModal .profile-identity > div:last-child {
  display: grid !important;
  gap: 0 !important;
  padding: 10px !important;
}

body #profileModal .profile-identity #profileName {
  display: block !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #333333 !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
}

body #profileModal .profile-identity #profileRole,
body #profileModal .profile-identity #profileBase,
body #profileModal .profile-status-list span,
body #profileModal .profile-section-note,
body #profileModal .profile-box span.assign-hint {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 0 !important;
  border-bottom: 1px solid #dddddd !important;
  background: #ffffff !important;
  color: #777777 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

body #profileModal .profile-identity #profileRole,
body #profileModal .profile-identity #profileBase {
  text-align: center !important;
}

body #profileModal .profile-stats {
  grid-area: stats !important;
  grid-column: 2 / 14 !important;
  grid-row: 1 !important;
}

body #profileModal .profile-sync {
  grid-area: sync !important;
  grid-column: 2 / 14 !important;
  grid-row: 2 !important;
}

body #profileModal .profile-password {
  grid-area: password !important;
  grid-column: 2 / 14 !important;
  grid-row: 3 !important;
  grid-template-columns: 1fr !important;
}

body #profileModal .profile-danger {
  grid-area: danger !important;
  grid-column: 2 / 14 !important;
  grid-row: 4 !important;
  grid-template-columns: 1fr !important;
  border-color: #bd7f82 !important;
  background: #fff7f7 !important;
}

body #profileModal .profile-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 10px !important;
}

body #profileModal .profile-stat-grid span {
  min-height: 82px !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 12px !important;
  border: 1px solid #cccccc !important;
  border-radius: 0 !important;
  background: #fafafa !important;
  color: #333333 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

body #profileModal .profile-status-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 10px !important;
}

body #profileModal .profile-status-list span {
  border: 1px solid #dddddd !important;
  background: #fbfbfb !important;
}

body #profileModal .profile-password > .profile-section-note,
body #profileModal .profile-danger > .profile-section-note {
  margin: 10px 10px 0 !important;
  border: 1px solid #dddddd !important;
  background: #fbfbfb !important;
}

body #profileModal .profile-password-grid,
body #profileModal .profile-delete-row {
  grid-column: auto !important;
  grid-row: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  align-items: center !important;
}

body #profileModal .profile-delete-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body #profileModal .profile-password-grid .primary,
body #profileModal .profile-delete-row button {
  width: auto !important;
  min-width: 180px !important;
  justify-self: end !important;
}

body #profileModal :is(input, select, textarea) {
  border-radius: 0 !important;
}

body.dark-mode #profileModal .profile-card,
body.dark-mode #profileModal .profile-box {
  border-color: #50555b !important;
  background: #22272d !important;
  color: #e7e9ec !important;
}

body.dark-mode #profileModal .profile-grid {
  background: #15181c !important;
}

body.dark-mode #profileModal .profile-box > strong {
  border-bottom-color: #4b5055 !important;
  background: linear-gradient(#2d3238, #24292e) !important;
  color: #e7e9ec !important;
}

body.dark-mode #profileModal .profile-identity {
  background: #22272d !important;
}

body.dark-mode #profileModal .profile-identity::before {
  background: linear-gradient(#9b1a20, #721116) !important;
}

body.dark-mode #profileModal .profile-identity #profileName {
  color: #e7e9ec !important;
}

body.dark-mode #profileModal .profile-identity #profileRole,
body.dark-mode #profileModal .profile-identity #profileBase,
body.dark-mode #profileModal .profile-status-list span,
body.dark-mode #profileModal .profile-section-note,
body.dark-mode #profileModal .profile-box span.assign-hint {
  border-color: #40454b !important;
  background: #252a30 !important;
  color: #aeb4bb !important;
}

body.dark-mode #profileModal .profile-stat-grid span {
  border-color: #50555b !important;
  background: #262b31 !important;
  color: #e7e9ec !important;
}

body.dark-mode #profileModal .profile-danger {
  border-color: #7f2a2f !important;
  background: #251d20 !important;
}

/* Account deletion: readable, self-contained danger treatment in both themes. */
body #profileModal .profile-danger {
  padding: 16px !important;
  border: 1px solid #ef4444 !important;
  border-radius: 10px !important;
  background: #fef2f2 !important;
}

body #profileModal .profile-danger > strong {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
  color: #991b1b !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

body #profileModal .profile-danger > strong::before {
  content: "⚠";
  flex: 0 0 auto;
  color: #dc2626;
  font-size: 18px;
  line-height: 1;
}

body #profileModal#profileModal .profile-danger > .profile-section-note {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #7f1d1d !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

body #profileModal .profile-danger .profile-delete-row {
  padding: 0 !important;
  gap: 12px !important;
}

body #profileModal .profile-danger .profile-delete-row > .password-reveal {
  min-width: 0;
}

body #profileModal .profile-danger .profile-delete-row input {
  width: 100%;
  min-width: 0;
}

body #profileModal .profile-danger .danger-button {
  min-height: 42px;
  border-color: #b91c1c !important;
  background: #dc2626 !important;
  color: #ffffff !important;
}

body #profileModal .profile-danger .danger-button:hover {
  background: #b91c1c !important;
}

body.dark-mode #profileModal .profile-danger {
  border-color: #b91c1c !important;
  background: #3b1618 !important;
}

body.dark-mode #profileModal .profile-danger > strong {
  color: #fecaca !important;
}

body.dark-mode #profileModal .profile-danger > strong::before {
  color: #f87171;
}

body.dark-mode #profileModal#profileModal .profile-danger > .profile-section-note {
  color: #fca5a5 !important;
}

@media (max-width: 900px) {
  body #profileModal .profile-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "identity"
      "stats"
      "sync"
      "password"
      "danger" !important;
  }

  body #profileModal :is(.profile-identity, .profile-stats, .profile-sync, .profile-password, .profile-danger) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body #profileModal .profile-stat-grid,
  body #profileModal .profile-status-list,
  body #profileModal .profile-password-grid,
  body #profileModal .profile-delete-row {
    grid-template-columns: 1fr !important;
  }

  body #profileModal .profile-password-grid .primary,
  body #profileModal .profile-delete-row button {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
}

/* Local rendering for the requested pause icon classes. */
body .time-controls .time-button[data-speed="0"] {
  width: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: #ffffff !important;
}

body .time-controls .time-button[data-speed="0"]::before,
body .time-controls .time-button[data-speed="0"]::after {
  content: none !important;
  display: none !important;
}

body .time-controls .fa-whiteboard.fa-semibold.fa-pause {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  background:
    linear-gradient(
      to right,
      currentColor 0 4px,
      transparent 4px 10px,
      currentColor 10px 14px
    ) !important;
  color: #ffffff !important;
}


/* assets/css/app/chunk-09-reference-design.css */
/*
 * Rail Dispatcher – einheitliches Referenzdesign
 * Abgeleitet aus previewll.html. Diese Datei verändert ausschließlich
 * die visuelle Darstellung und keine Positionierungs- oder Funktionslogik.
 */

:root {
  --reference-red: #c61f27;
  --reference-red-dark: #a5161d;
  --reference-orange: #f0a029;
  --reference-green: #38a852;
  --reference-green-dark: #27873d;
  --reference-blue: #2d83c5;
  --reference-page: #e7e7e7;
  --reference-panel: #ffffff;
  --reference-head: #f5f5f5;
  --reference-control: #eeeeee;
  --reference-border: #cfd4d8;
  --reference-border-strong: #aeb4b9;
  --reference-text: #333333;
  --reference-muted: #777777;
  --reference-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  color-scheme: light;
}

/* Planungsassistent 30.2: kompakter, linearer Arbeitsablauf */
.planning-assistant-card { width: min(1180px, 95vw); max-height: 94vh; }
.planning-assistant-body { gap: 12px; }
.planning-assistant-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; }
.planning-assistant-columns { grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1fr); }
.planning-assistant-personnel, .planning-assistant-review, .planning-assistant-metrics { display: grid; gap: 7px; }
.planning-assistant-preview { display: grid; gap: 6px; }
.planning-assistant-preview > div { display: grid; grid-template-columns: 72px minmax(170px, .8fr) minmax(220px, 1.5fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-left: 4px solid #16a34a; background: #f5f8fc; }
.planning-assistant-preview > div.transfer { border-left-color: #2563eb; }
.planning-assistant-preview > div.reposition { border-left-color: #d97706; }
.planning-assistant-preview > div.trip-unresolved,
.planning-assistant-preview > div.has-validation-error { border-left-color: #dc2626; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .24); }
.planning-assistant-trip-controls { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(260px, 1.5fr) auto minmax(125px, .55fr) minmax(210px, 1fr); gap: 8px; align-items: end; padding: 9px; border: 1px solid #d8dee8; border-radius: 7px; background: #fff; }
.planning-assistant-trip-controls label { display: grid; gap: 4px; min-width: 0; font-weight: 700; }
.planning-assistant-trip-controls :is(select, input) { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid #bac4d2; border-radius: 5px; background: #fff; color: #263142; }
.planning-assistant-trip-controls select { min-width: 0; }
.planning-assistant-trip-controls input { min-width: 110px; }
.planning-assistant-trip-or { align-self: end; padding-bottom: 9px; color: #667085; font-weight: 700; }
.planning-assistant-trip-controls > small { align-self: center; color: #166534; line-height: 1.35; }
.planning-assistant-trip-controls > small.warning { color: #b42318; font-weight: 700; }
.planning-assistant-circulation { display: grid; gap: 7px; padding: 10px; border: 1px solid #f59e0b; background: #fffbeb; color: #78350f; border-radius: 7px; }
.planning-assistant-circulation label { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.planning-assistant-schedules { display: grid; gap: 6px; max-height: 210px; overflow: auto; padding: 8px; border: 1px solid #d8dee8; border-radius: 7px; }
.planning-assistant-schedules label { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; padding: 7px; border-radius: 5px; background: #f5f8fc; cursor: pointer; }
.planning-assistant-schedules label:has(input:checked) { background: #e8f5ec; box-shadow: inset 3px 0 #16a34a; }
.planning-assistant-schedules label.unavailable { opacity: .55; cursor: not-allowed; box-shadow: none; }
.planning-assistant-schedules span, .planning-assistant-personnel label span { display: grid; gap: 2px; min-width: 0; }
.planning-assistant-schedules small, .planning-assistant-personnel small { color: #667085; }
.planning-assistant-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.planning-assistant-preview-head h3 { margin: 0; }
.planning-assistant-preview-filter { display: flex; flex-wrap: wrap; gap: 5px; }
.planning-assistant-preview-filter button { padding: 6px 9px; border: 1px solid #c9d1dd; border-radius: 5px; background: #fff; color: #344054; }
.planning-assistant-preview-filter button.active { border-color: #15803d; background: #16a34a; color: #fff; }
.planning-assistant-personnel > div, .planning-assistant-review { padding: 10px; border: 1px solid #d8dee8; border-radius: 7px; background: #f7f9fc; }
.planning-assistant-personnel label { display: flex; flex-direction: row; align-items: center; gap: 7px; margin-top: 6px; }
.planning-assistant-metrics { margin-top: 8px; padding: 8px 10px; color: #24324a; background: #edf3ff; border-radius: 6px; }
.planning-assistant-review #planningAssistantReview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.planning-assistant-steps > div.disabled { opacity: .55; }
.planning-assistant-steps > div.has-error { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
body.dark-mode .planning-assistant-personnel > div, body.dark-mode .planning-assistant-review { background: #151b24; border-color: #3a4555; }
body.dark-mode .planning-assistant-metrics { color: #dbe8ff; background: #1b2b45; }
body.dark-mode .planning-assistant-preview > div { background: #151b24; }
body.dark-mode .planning-assistant-trip-controls { border-color: #3a4555; background: #111720; }
body.dark-mode .planning-assistant-trip-controls :is(select, input) { border-color: #4a5668; background: #1b2430; color: #eef3f8; }
body.dark-mode .planning-assistant-trip-or { color: #aeb9c8; }
body.dark-mode .planning-assistant-trip-controls > small { color: #86efac; }
body.dark-mode .planning-assistant-trip-controls > small.warning { color: #fca5a5; }
body.dark-mode .planning-assistant-circulation { background: #33250c; color: #fde68a; border-color: #b45309; }
body.dark-mode .planning-assistant-schedules { border-color: #3a4555; }
body.dark-mode .planning-assistant-schedules label { background: #151b24; }
body.dark-mode .planning-assistant-schedules label:has(input:checked) { background: #173322; }
body.dark-mode .planning-assistant-schedules small, body.dark-mode .planning-assistant-personnel small { color: #aeb9c8; }
body.dark-mode .planning-assistant-preview-filter button { background: #151b24; color: #dbe4ef; border-color: #3a4555; }
body.dark-mode .planning-assistant-preview-filter button.active { background: #15803d; border-color: #22c55e; color: #fff; }
@media (max-width: 900px) {
  .planning-assistant-columns { grid-template-columns: 1fr; }
  .planning-assistant-review #planningAssistantReview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planning-assistant-trip-controls { grid-template-columns: minmax(220px, 1fr) auto minmax(125px, .5fr); }
  .planning-assistant-trip-controls > small { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .planning-assistant-card { width: 100vw; max-height: 100dvh; }
  .planning-assistant-toolbar, .planning-assistant-review #planningAssistantReview { grid-template-columns: 1fr; }
  .planning-assistant-actions .primary, #planningAssistantOrderSchedule { width: 100%; }
  .planning-assistant-preview > div { grid-template-columns: 64px 1fr; }
  .planning-assistant-trip-controls { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .planning-assistant-trip-or { display: none; }
}

html body.ui-window-design {
  background: var(--reference-page) !important;
  color: var(--reference-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
}

html body.ui-window-design.ui-window-design {
  background: #e7e7e7 !important;
}

body.ui-window-design :is(button, input, select, textarea) {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Kopfzeile und globale Navigation */
body.ui-window-design:not(.view-maponly) .topbar {
  border: 0 !important;
  border-bottom: 3px solid var(--reference-red) !important;
  background: #303337 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .26) !important;
}

body.ui-window-design .topbar .brand {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

body.ui-window-design .topbar .brand-mark {
  border: 1px solid #f3a2a6 !important;
  border-radius: 2px !important;
  background: var(--reference-red) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .topbar :is(.game-clock, .money) {
  border: 1px solid #555b61 !important;
  border-radius: 2px !important;
  background: #3d4146 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .topbar .global-search input {
  border-color: #74797e !important;
  background: #ffffff !important;
  color: #333333 !important;
}

body.ui-window-design .topbar :is(.time-button, .icon-action) {
  border: 1px solid #5d6268 !important;
  border-radius: 2px !important;
  background: #3d4146 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .topbar :is(.time-button, .icon-action):hover {
  border-color: #858b91 !important;
  background: #555a60 !important;
}

body.ui-window-design .topbar .time-button.active {
  border-color: #d9545a !important;
  background: #555a60 !important;
  box-shadow: inset 0 -3px var(--reference-red) !important;
}

/* Fenster, Panels und Abschnittsköpfe */
body.ui-window-design :is(
  .panel,
  .floating-window,
  .side-panel,
  .window-dock,
  .modal-card,
  .game-dialog-card,
  .page-confirmation-card,
  .inline-loco-planner,
  .loco-planner
) {
  border: 1px solid var(--reference-border-strong) !important;
  border-radius: 3px !important;
  background: var(--reference-panel) !important;
  color: var(--reference-text) !important;
  box-shadow: var(--reference-shadow) !important;
}

body.ui-window-design.ui-window-design :is(.panel, .floating-window, .side-panel) {
  border-color: var(--reference-border-strong) !important;
  background: #ffffff !important;
}

body.ui-window-design .panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body.ui-window-design .panel-head h2 {
  min-width: 0;
  flex: 0 1 auto;
}

body.ui-window-design .panel-head .head-actions {
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

body.ui-window-design .panel-head .head-actions > span {
  min-width: 0;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-align: right;
}

body.ui-window-design :is(
  .panel-head,
  .modal-head,
  .game-dialog-head,
  .page-confirmation-head,
  .window-tabs,
  .section-title,
  .sub-head,
  .table-head,
  .thead,
  thead
) {
  border-color: var(--reference-border) !important;
  background: var(--reference-head) !important;
  color: var(--reference-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .panel-head h2,
  .modal-head h2,
  .game-dialog-head strong,
  .page-confirmation-head strong,
  .section-title,
  .sub-head,
  th
) {
  color: var(--reference-text) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.ui-window-design :is(.head-actions span, .empty-state, .muted, small) {
  color: var(--reference-muted) !important;
}

/* Tabs */
body.ui-window-design :is(.window-tab, .tab-button, .shop-tab, .planning-side-tab, .auth-tabs button) {
  border-color: var(--reference-border-strong) !important;
  border-radius: 0 !important;
  background: #e8e8e8 !important;
  color: var(--reference-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(.window-tab, .tab-button, .shop-tab, .planning-side-tab, .auth-tabs button):hover {
  background: #dedede !important;
}

body.ui-window-design :is(
  .window-tab.active,
  .tab-button.active,
  .shop-tab.active,
  .planning-side-tab.active,
  .auth-tabs button.active
) {
  border-top-color: var(--reference-red) !important;
  background: #ffffff !important;
  color: var(--reference-text) !important;
  box-shadow: inset 0 3px var(--reference-red) !important;
}

/* Formulare */
body.ui-window-design :is(input, select, textarea) {
  min-height: 34px;
  border: 1px solid #b8bdc2 !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: var(--reference-text) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06) !important;
}

body.ui-window-design :is(input, select, textarea):focus {
  border-color: var(--reference-blue) !important;
  outline: 2px solid rgba(45, 131, 197, .18) !important;
  outline-offset: 0 !important;
}

body.ui-window-design :is(label, .admin-field, .field, .checkbox-field) {
  color: var(--reference-text) !important;
}

/* Buttons und Aktionen */
body.ui-window-design :is(
  button,
  .secondary,
  .secondary-button,
  .icon-button,
  .plus-button,
  .small-action
) {
  border: 1px solid var(--reference-border-strong);
  border-radius: 2px;
  background: linear-gradient(#ffffff, #e7e7e7);
  color: var(--reference-text);
  box-shadow: none;
}

body.ui-window-design :is(
  button,
  .secondary,
  .secondary-button,
  .icon-button,
  .plus-button,
  .small-action
):hover {
  border-color: #8e9499;
  background: #dedede;
}

body.ui-window-design :is(
  .primary,
  button.primary,
  .btn-green,
  .site-buy-button,
  .shop-add-cart,
  .cart-buy-button,
  #checkoutShopCart
) {
  border-color: var(--reference-green-dark) !important;
  background: var(--reference-green) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .danger,
  button.danger,
  .danger-button,
  .btn-red
) {
  border-color: var(--reference-red-dark) !important;
  background: var(--reference-red) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design :is(.primary, button.primary, .btn-green):hover {
  background: var(--reference-green-dark) !important;
}

body.ui-window-design :is(.danger, button.danger, .danger-button, .btn-red):hover {
  background: var(--reference-red-dark) !important;
}

body.ui-window-design button:disabled {
  border-color: #c7cbd0 !important;
  background: #e5e5e5 !important;
  color: #92979c !important;
  opacity: .8;
}

/* Karten, Listen und Tabellen */
body.ui-window-design :is(
  .shop-card,
  .vehicle-card,
  .wagon-card,
  .contract-card,
  .schedule-card,
  .site-card,
  .personnel-card,
  .activity-card,
  .company-card,
  .company-member,
  .admin-data-card,
  .admin-vehicle-card,
  .account-row,
  .fleet-item,
  .hotel-offer,
  .route-choice-card,
  .schedule-route-choice-card
) {
  border-color: var(--reference-border) !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: var(--reference-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .shop-card,
  .vehicle-card,
  .wagon-card,
  .contract-card,
  .schedule-card,
  .site-card,
  .personnel-card,
  .activity-card,
  .company-card,
  .company-member,
  .admin-data-card,
  .fleet-item
):hover {
  border-color: #aeb4b9 !important;
  background: #f7f7f7 !important;
}

body.ui-window-design :is(table, .account-table, .wagon-list-table, .admin-data-table) {
  border-color: var(--reference-border) !important;
  background: #ffffff !important;
  color: var(--reference-text) !important;
}

body.ui-window-design :is(td, th) {
  border-color: #d6dade !important;
}

body.ui-window-design tbody tr:hover {
  background: #f1f1f1 !important;
}

body.ui-window-design :is(.label, .status-chip, .role-chip, .personnel-role-chip) {
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* Modale Oberflächen */
body.ui-window-design :is(.modal, .game-dialog-backdrop, .page-confirmation-backdrop) {
  backdrop-filter: blur(2px);
}

body.ui-window-design :is(.modal-card, .game-dialog-card, .page-confirmation-card) {
  border-color: #9ea4aa !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .32) !important;
}

body.ui-window-design :is(.modal-actions, .modal-footer, .game-dialog-actions, .page-confirmation-actions) {
  border-color: var(--reference-border) !important;
  background: var(--reference-head) !important;
}

/* Profil und Gefahrenbereich */
body.ui-window-design #profileModal :is(.profile-card, .profile-box) {
  border-color: var(--reference-border) !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: var(--reference-text) !important;
}

body.ui-window-design #profileModal .profile-danger {
  border: 1px solid #ef4444 !important;
  background: #fef2f2 !important;
}

body.ui-window-design #profileModal .profile-danger > strong {
  color: #991b1b !important;
}

body.ui-window-design #profileModal#profileModal .profile-danger > .profile-section-note {
  border: 0 !important;
  background: transparent !important;
  color: #7f1d1d !important;
}

/* Login */
body.ui-window-design.auth-locked .login-card {
  border: 1px solid #9ea4aa !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: var(--reference-text) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .3) !important;
}

/* Darkmode entsprechend der Referenz */
body.ui-window-design.dark-mode {
  --reference-page: #15181c;
  --reference-panel: #1e2227;
  --reference-head: #2a2f35;
  --reference-control: #2b3036;
  --reference-border: #4a4f55;
  --reference-border-strong: #565b61;
  --reference-text: #e7e9ec;
  --reference-muted: #aeb4bb;
  --reference-shadow: 0 2px 10px rgba(0, 0, 0, .46);
  color-scheme: dark;
}

html body.ui-window-design.dark-mode.dark-mode {
  background: #15181c !important;
}

body.ui-window-design.dark-mode.dark-mode:not(.view-maponly) .topbar {
  border-bottom-color: var(--reference-red) !important;
  background: #303337 !important;
}

body.ui-window-design.dark-mode.dark-mode :is(.panel, .floating-window, .side-panel) {
  border-color: #50555b !important;
  background: #1e2227 !important;
}

body.ui-window-design.dark-mode.dark-mode .panel-head {
  border-color: #50555b !important;
  background: #2a2f35 !important;
}

body.ui-window-design.dark-mode :is(
  .panel,
  .floating-window,
  .side-panel,
  .window-dock,
  .modal-card,
  .game-dialog-card,
  .page-confirmation-card,
  .inline-loco-planner,
  .loco-planner
) {
  border-color: #50555b !important;
  background: #1e2227 !important;
  color: var(--reference-text) !important;
}

body.ui-window-design.dark-mode :is(
  .panel-head,
  .modal-head,
  .game-dialog-head,
  .page-confirmation-head,
  .window-tabs,
  .section-title,
  .sub-head,
  .table-head,
  .thead,
  thead
) {
  border-color: #50555b !important;
  background: #2a2f35 !important;
  color: var(--reference-text) !important;
}

body.ui-window-design.dark-mode :is(input, select, textarea) {
  border-color: #565b61 !important;
  background: #15191d !important;
  color: var(--reference-text) !important;
}

body.ui-window-design.dark-mode :is(.window-tab, .tab-button, .shop-tab, .planning-side-tab, .auth-tabs button) {
  border-color: #565b61 !important;
  background: #2b3036 !important;
  color: var(--reference-text) !important;
}

body.ui-window-design.dark-mode :is(
  .window-tab.active,
  .tab-button.active,
  .shop-tab.active,
  .planning-side-tab.active,
  .auth-tabs button.active
) {
  background: #252a30 !important;
}

body.ui-window-design.dark-mode :is(
  button,
  .secondary,
  .secondary-button,
  .icon-button,
  .plus-button,
  .small-action
) {
  border-color: #565b61;
  background: #2b3036;
  color: var(--reference-text);
}

body.ui-window-design.dark-mode :is(
  .shop-card,
  .vehicle-card,
  .wagon-card,
  .contract-card,
  .schedule-card,
  .site-card,
  .personnel-card,
  .activity-card,
  .company-card,
  .company-member,
  .admin-data-card,
  .admin-vehicle-card,
  .account-row,
  .fleet-item,
  .hotel-offer,
  .route-choice-card,
  .schedule-route-choice-card,
  table,
  .account-table,
  .wagon-list-table,
  .admin-data-table
) {
  border-color: #50555b !important;
  background: #252a30 !important;
  color: var(--reference-text) !important;
}

body.ui-window-design.dark-mode tbody tr:hover {
  background: #30353b !important;
}

body.ui-window-design.dark-mode #profileModal :is(.profile-card, .profile-box) {
  border-color: #50555b !important;
  background: #22272d !important;
  color: var(--reference-text) !important;
}

body.ui-window-design.dark-mode #profileModal .profile-danger {
  border-color: #b91c1c !important;
  background: #3b1618 !important;
}

body.ui-window-design.dark-mode #profileModal .profile-danger > strong {
  color: #fecaca !important;
}

body.ui-window-design.dark-mode #profileModal#profileModal .profile-danger > .profile-section-note {
  color: #fca5a5 !important;
}

body.ui-window-design.dark-mode.auth-locked .login-card {
  border-color: #50555b !important;
  background: #1e2227 !important;
  color: var(--reference-text) !important;
}

@media (max-width: 900px) {
  body.ui-window-design :is(input, select, textarea, button) {
    min-height: 38px;
  }
}

/* Gewünschte Hauptaktionen */
body.ui-window-design :is(#openShopModal, #openSiteModalButton, #openOrderModal) {
  border-color: var(--reference-green-dark) !important;
  background: var(--reference-green) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design :is(#openShopModal, #openSiteModalButton, #openOrderModal):hover {
  border-color: #1f7132 !important;
  background: var(--reference-green-dark) !important;
}

/* Kompakte, vollständig lesbare Routenauswahl */
body.ui-window-design #orderModal .schedule-route-choice-grid {
  gap: 8px !important;
  padding: 8px !important;
}

body.ui-window-design #orderModal .schedule-route-choice-card {
  display: grid !important;
  grid-template-columns: minmax(130px, 1fr) auto !important;
  align-items: start !important;
  gap: 8px 12px !important;
  min-width: 0 !important;
  padding: 11px 12px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

body.ui-window-design #orderModal .schedule-route-choice-title {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body.ui-window-design #orderModal .schedule-route-choice-title small {
  overflow: hidden !important;
  color: var(--reference-muted) !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.ui-window-design #orderModal .schedule-route-choice-values {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 5px !important;
}

body.ui-window-design #orderModal .schedule-route-choice-values b {
  padding: 4px 7px !important;
  background: #eef2f8 !important;
  color: #173679 !important;
  white-space: nowrap !important;
}

body.ui-window-design #orderModal .schedule-route-choice-card > .route-profile-summary {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.ui-window-design #orderModal .schedule-route-choice-card > .route-profile-summary > span {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid #c7d8ef !important;
  background: #f4f8fd !important;
  color: #173679 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

body.ui-window-design #orderModal .schedule-route-choice-card > i {
  grid-column: 2 !important;
  justify-self: end !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

body.ui-window-design.dark-mode #orderModal .schedule-route-choice-values b,
body.ui-window-design.dark-mode #orderModal .schedule-route-choice-card > .route-profile-summary > span {
  border-color: #46546a !important;
  background: #2b3545 !important;
  color: #dbe7ff !important;
}

body.ui-window-design.dark-mode #orderModal .schedule-route-choice-title small {
  color: #b6bdc5 !important;
}

@media (max-width: 520px) {
  body.ui-window-design #orderModal .schedule-route-choice-card {
    grid-template-columns: 1fr auto !important;
    gap: 7px !important;
  }

  body.ui-window-design #orderModal .schedule-route-choice-title small {
    white-space: normal !important;
  }
}

/* Google authentication */
.auth-provider-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  color: #7a8492;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.auth-provider-divider::before,
.auth-provider-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dbe1e8;
}

.google-auth-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #cbd3de;
  border-radius: 8px;
  background: #fff;
  color: #202124;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.google-auth-button:hover:not(:disabled) {
  border-color: #9aa8ba;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .1);
  transform: translateY(-1px);
}

.google-auth-button:focus-visible {
  outline: 3px solid rgba(66, 133, 244, .28);
  outline-offset: 2px;
}

.google-auth-button:disabled {
  opacity: .58;
  cursor: not-allowed;
}

.google-auth-button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

#loginModal .google-auth-button {
  width: 100%;
}

#profileModal .profile-google {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  border-color: #dbe3ee;
}

#profileModal .profile-google-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

#profileModal .profile-google-copy > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

#profileModal .profile-google-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0);
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  box-shadow: inset 0 0 0 4px #fff, 0 2px 8px rgba(15, 23, 42, .14);
}

#profileModal .profile-google-action {
  min-width: 220px;
  padding: 0 16px;
}

#profileModal .profile-google > .assign-hint {
  grid-column: 1 / -1;
  min-height: 0;
}

body.dark-mode .auth-provider-divider {
  color: #9da8b6;
}

body.dark-mode .auth-provider-divider::before,
body.dark-mode .auth-provider-divider::after {
  background: #3d4858;
}

body.dark-mode .google-auth-button {
  border-color: #4a5667;
  background: #232b36;
  color: #eef2f7;
}

body.dark-mode #profileModal .profile-google {
  border-color: #3b4656;
}

body.dark-mode #profileModal .profile-google-icon {
  box-shadow: inset 0 0 0 4px #232b36, 0 2px 8px rgba(0, 0, 0, .28);
}

@media (max-width: 700px) {
  #profileModal .profile-google {
    grid-template-columns: 1fr;
  }

  #profileModal .profile-google-action {
    width: 100%;
    min-width: 0;
  }
}

/* Activity editor: structured workflow and train-run workspace */
#activityModal .activity-modal-card {
  width: min(1120px, calc(100vw - 28px)) !important;
  height: min(850px, calc(100dvh - 28px)) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 14px !important;
}

#activityModal .modal-head {
  min-height: 66px;
  padding: 12px 16px !important;
  border-bottom: 1px solid #dce3ec;
  background: linear-gradient(135deg, #ffffff, #f5f8fc) !important;
}

#activityModal .modal-head > div {
  display: grid;
  gap: 2px;
}

#activityModal .modal-head h2 {
  margin: 0;
  font-size: 19px;
}

#activityModal .modal-head span {
  color: #667085;
  font-size: 11px;
  font-weight: 600;
}

#activityModal .modal-activity-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  background: #eef2f7 !important;
}

#activityModal .activity-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-content: start !important;
  max-width: none !important;
  padding: 14px !important;
  overflow: auto !important;
}

#activityModal .activity-form-section {
  min-width: 0;
  padding: 12px;
  border: 1px solid #dce3ec;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(20, 33, 55, .05);
}

#activityModal .activity-form-core,
#activityModal .activity-times {
  grid-column: 1 / -1;
}

#activityModal .activity-form-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

#activityModal .activity-form-section-head > span {
  display: inline-grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  background: #e8eef7;
  color: #24558f;
  font-size: 11px;
  font-weight: 900;
}

#activityModal .activity-form-section-head > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

#activityModal .activity-form-section-head strong {
  color: #172033;
  font-size: 12px;
}

#activityModal .activity-form-section-head small {
  color: #667085;
  font-size: 10px;
}

#activityModal .activity-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#activityModal .activity-core-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#activityModal .activity-form-fields > label,
#activityModal .activity-times > label {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 9px !important;
  border: 1px solid #e1e6ee !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  color: #344054;
  font-size: 10px;
  font-weight: 800;
}

#activityModal .activity-form-fields :is(input, select),
#activityModal .activity-times input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border-color: #cfd7e3 !important;
  background: #ffffff !important;
  font-size: 11px;
}

#activityModal .field-preview {
  color: #667085;
  font-size: 9px;
  font-weight: 600;
}

#activityModal .activity-form-consist {
  display: grid;
  align-content: start;
}

#activityModal .wagon-select-actions {
  margin: 0 0 8px;
}

#activityModal .wagon-checkbox-list {
  max-height: 150px;
  overflow: auto;
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  background: #f8fafc;
}

#activityModal .activity-times {
  display: grid;
  grid-template-columns: minmax(140px, .65fr) repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#activityModal .activity-times .activity-form-section-head {
  grid-column: 1 / -1;
}

#activityModal .activity-game-time {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e3555, #284f79);
  color: #ffffff;
}

#activityModal .activity-game-time span {
  color: #d8e8fb;
  font-size: 11px;
}

#activityModal .activity-schedule-compatibility {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 7px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
}

#activityModal .activity-schedule-compatibility::before {
  flex: 0 0 auto;
  content: "●";
}

#activityModal .activity-schedule-compatibility.is-empty {
  background: #eef2f7;
  color: #667085;
}

#activityModal .activity-schedule-compatibility.is-success {
  background: #e8f7ed;
  color: #166534;
}

#activityModal .activity-schedule-compatibility.is-error {
  background: #fff0ed;
  color: #b42318;
}

#activityModal .activity-trip-preview {
  display: none;
  min-width: 0;
  min-height: 0;
  margin: 14px 14px 14px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d3dce8;
  border-radius: 11px;
  background: #ffffff;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(260px, 1fr) auto !important;
}

#activityModal .activity-trip-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid #e1e6ee;
  background: #f8fafc;
}

#activityModal .activity-trip-preview-head > div {
  display: grid;
  gap: 1px;
}

#activityModal .activity-trip-preview-head strong {
  color: #172033;
  font-size: 12px;
}

#activityModal .activity-trip-preview-head span {
  color: #667085;
  font-size: 9px;
}

#activityModal .activity-trip-preview-badge {
  padding: 4px 7px;
  border-radius: 999px;
  background: #e8eef7;
  color: #24558f !important;
  font-weight: 800;
}

#activityModal .activity-trip-map {
  width: 100%;
  min-height: 260px;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#activityModal .activity-trip-preview .route-preview {
  display: grid;
  gap: 9px;
  max-height: 270px;
  padding: 12px !important;
  overflow: auto;
  border: 0 !important;
  border-top: 1px solid #e1e6ee !important;
  border-radius: 0 !important;
  background: #ffffff !important;
}

#activityModal .activity-trip-route-check,
#activityModal .activity-trip-empty {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 7px;
}

#activityModal .activity-trip-route-check strong,
#activityModal .activity-trip-empty strong {
  font-size: 11px;
}

#activityModal .activity-trip-route-check span,
#activityModal .activity-trip-empty span {
  font-size: 10px;
  line-height: 1.4;
}

#activityModal .activity-trip-route-check.is-success {
  border: 1px solid #b7e2c2;
  background: #e8f7ed;
  color: #166534;
}

#activityModal .activity-trip-route-check.is-error {
  border: 1px solid #f1c2bc;
  background: #fff0ed;
  color: #b42318;
}

#activityModal .activity-trip-route-check.is-empty,
#activityModal .activity-trip-empty {
  border: 1px solid #d8dee8;
  background: #f5f7fa;
  color: #475467;
}

#activityModal .activity-trip-summary {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(76px, .7fr)) !important;
  gap: 7px !important;
}

#activityModal .activity-trip-summary > div {
  min-width: 0;
  padding: 8px !important;
  border: 1px solid #e1e6ee !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
}

#activityModal .activity-modal-footer {
  grid-column: 1 / -1;
  min-height: 62px;
  padding: 10px 14px !important;
  border-top: 1px solid #dce3ec;
  background: #ffffff !important;
}

#activityModal.activity-trip-mode .activity-modal-card {
  width: min(1260px, calc(100vw - 24px)) !important;
  height: min(880px, calc(100dvh - 24px)) !important;
}

#activityModal.activity-trip-mode .modal-activity-form {
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
}

#activityModal.activity-trip-mode .activity-form-grid {
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: minmax(0, 1fr) !important;
  padding-right: 12px !important;
}

#activityModal.activity-trip-mode .activity-form-section {
  grid-column: 1;
}

#activityModal.activity-trip-mode .activity-form-fields,
#activityModal.activity-trip-mode .activity-core-fields {
  grid-template-columns: minmax(0, 1fr);
}

#activityModal.activity-trip-mode .activity-trip-preview {
  display: grid !important;
  grid-column: 2;
  grid-row: 1;
}

#activityModal.activity-trip-mode .activity-times {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#activityModal.activity-trip-mode .activity-game-time {
  grid-column: 1 / -1;
}

body.dark-mode #activityModal .modal-head,
body.dark-mode #activityModal .activity-modal-footer,
body.dark-mode #activityModal .activity-form-section,
body.dark-mode #activityModal .activity-trip-preview,
body.dark-mode #activityModal .activity-trip-preview .route-preview {
  border-color: #3a4555 !important;
  background: #151b24 !important;
}

body.dark-mode #activityModal .modal-activity-form {
  background: #10161f !important;
}

body.dark-mode #activityModal .modal-head span,
body.dark-mode #activityModal .activity-form-section-head small,
body.dark-mode #activityModal .field-preview,
body.dark-mode #activityModal .activity-trip-preview-head span {
  color: #aeb9c8;
}

body.dark-mode #activityModal .activity-form-section-head strong,
body.dark-mode #activityModal .activity-trip-preview-head strong {
  color: #f8fafc;
}

body.dark-mode #activityModal .activity-form-fields > label,
body.dark-mode #activityModal .activity-times > label,
body.dark-mode #activityModal .wagon-checkbox-list,
body.dark-mode #activityModal .activity-trip-summary > div,
body.dark-mode #activityModal .activity-trip-preview-head {
  border-color: #3a4555 !important;
  background: #1b2430 !important;
  color: #dbe4ef !important;
}

body.dark-mode #activityModal .activity-form-fields :is(input, select),
body.dark-mode #activityModal .activity-times input {
  border-color: #465365 !important;
  background: #111821 !important;
  color: #f8fafc !important;
}

/* Manual timetable fallback in the planning assistant */
.planning-assistant-manual-schedules {
  display: grid;
  gap: 6px;
  margin-top: 3px;
  padding-top: 8px;
  border-top: 1px dashed #c9d1dd;
}

.planning-assistant-manual-schedules > div {
  display: grid;
  gap: 2px;
}

.planning-assistant-manual-schedules > div small {
  color: #667085;
}

.planning-assistant-schedules label.manual-schedule-choice {
  border: 1px dashed #b8c4d3;
  background: #fbfcfe;
}

.planning-assistant-schedules label.manual-schedule-choice:has(input:checked) {
  border-style: solid;
  border-color: #16a34a;
}

body.dark-mode .planning-assistant-manual-schedules {
  border-color: #465365;
}

body.dark-mode .planning-assistant-manual-schedules > div small {
  color: #aeb9c8;
}

body.dark-mode .planning-assistant-schedules label.manual-schedule-choice {
  border-color: #465365;
  background: #151b24;
}

.planning-assistant-schedules .planning-assistant-trip-choice {
  gap: 9px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #b9c6d8;
  border-radius: 9px;
  background: #f7f9fc;
}

.planning-assistant-schedules .planning-assistant-trip-choice > label {
  display: grid;
  gap: 5px;
  padding: 0;
  background: transparent;
  cursor: default;
  font-weight: 700;
}

.planning-assistant-trip-choice :is(select, input) {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #aebbcf;
  border-radius: 7px;
  background: #fff;
  color: #182230;
  font: inherit;
}

.planning-assistant-manual-check {
  padding: 8px 10px;
  border-left: 3px solid #64748b;
  border-radius: 5px;
  background: #eef2f7;
  color: #475569;
  font-size: .82rem;
  line-height: 1.35;
}

.planning-assistant-manual-check.valid {
  border-left-color: #16a34a;
  background: #ecf8f0;
  color: #166534;
}

.planning-assistant-manual-check.warning {
  border-left-color: #f59e0b;
  background: #fff8e8;
  color: #854d0e;
}

body.dark-mode .planning-assistant-schedules .planning-assistant-trip-choice {
  border-color: #465365;
  background: #151b24;
}

body.dark-mode .planning-assistant-trip-choice :is(select, input) {
  border-color: #526074;
  background: #0f151e;
  color: #f8fafc;
}

body.dark-mode .planning-assistant-manual-check {
  background: #202a38;
  color: #cbd5e1;
}

body.dark-mode .planning-assistant-manual-check.valid {
  background: #173322;
  color: #86efac;
}

body.dark-mode .planning-assistant-manual-check.warning {
  background: #3b2d12;
  color: #fde68a;
}

@media (max-width: 920px) {
  #activityModal .activity-modal-card,
  #activityModal.activity-trip-mode .activity-modal-card {
    width: calc(100vw - 14px) !important;
    height: calc(100dvh - 14px) !important;
  }

  #activityModal.activity-trip-mode .modal-activity-form {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  #activityModal.activity-trip-mode .activity-form-grid,
  #activityModal.activity-trip-mode .activity-trip-preview {
    grid-column: 1;
    grid-row: auto;
  }

  #activityModal.activity-trip-mode .activity-form-grid {
    overflow: visible !important;
  }

  #activityModal.activity-trip-mode .activity-trip-preview {
    min-height: 520px;
    margin: 0 14px 14px;
  }

  #activityModal .activity-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #activityModal .activity-form-section {
    grid-column: 1;
  }

  #activityModal .activity-core-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hauptkarte: eindeutig unterscheidbare Fahrzeuge und Betriebsstellen */
body.ui-window-design .loco-marker,
body.ui-window-design .wagon-marker {
  display: grid !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% 50% 50% 0 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .42) !important;
  transform: rotate(-45deg) !important;
  transform-origin: 50% 50% !important;
}

body.ui-window-design .loco-marker {
  background: #1f67a9 !important;
  border-radius: 50% !important;
  transform: none !important;
}

body.ui-window-design .loco-marker.running {
  background: #268940 !important;
}

body.ui-window-design .loco-marker.multiple-traction-marker {
  width: 38px !important;
}

body.ui-window-design .loco-marker .rail-vehicle-marker-icon {
  transform: none !important;
}

body.ui-window-design .wagon-marker {
  width: 30px !important;
  height: 30px !important;
  background: #8a5a16 !important;
}

body.ui-window-design .wagon-marker .rail-vehicle-marker-icon,
body.ui-window-design .wagon-marker .rail-vehicle-marker-icon svg {
  width: 17px !important;
  height: 17px !important;
}

body.ui-window-design .rail-vehicle-marker-icon {
  display: grid !important;
  grid-area: 1 / 1 !important;
  width: 21px !important;
  height: 21px !important;
  place-items: center !important;
  transform: rotate(45deg) !important;
}

body.ui-window-design .rail-vehicle-marker-icon svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}

body.ui-window-design .rail-vehicle-marker-label {
  display: none !important;
}

body.ui-window-design .station-special-marker:is(.base, .site) {
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  grid-auto-columns: 30px !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: rotate(-45deg) !important;
  transform-origin: 50% 50% !important;
}

body.ui-window-design .station-special-marker:is(.base, .site) .station-marker-segment {
  position: relative !important;
  min-width: 30px !important;
  height: 30px !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% 50% 50% 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .42) !important;
}

body.ui-window-design .station-special-marker.base .station-marker-segment.base {
  background: #176b35 !important;
}

body.ui-window-design .station-special-marker.site .station-marker-segment.site {
  background: #176b72 !important;
}

body.ui-window-design .station-special-marker:is(.base, .site) .station-marker-segment svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 1.8 !important;
  transform: rotate(45deg) !important;
}

body.ui-window-design .station-special-marker:is(.base, .site) .station-marker-segment > b {
  position: absolute !important;
  right: -5px !important;
  bottom: -5px !important;
  display: grid !important;
  width: 14px !important;
  height: 14px !important;
  place-items: center !important;
  border: 1px solid #ffffff !important;
  border-radius: 50% !important;
  background: #20252a !important;
  color: #ffffff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  transform: rotate(45deg) !important;
}

/* Fahrplanfenster: Formular kompakter, Karte und Zeitstrahl breiter */
body.ui-window-design #orderModal .order-box {
  grid-template-columns: minmax(480px, .72fr) minmax(220px, 260px) minmax(440px, 1.28fr) !important;
}

body.ui-window-design #orderModal .order-timeline-panel,
body.ui-window-design #orderModal .order-timeline-panel.hidden-control {
  grid-template-columns: 285px minmax(0, 1fr) !important;
}

@media (max-width: 1180px) {
  body.ui-window-design #orderModal .order-box {
    grid-template-columns: minmax(410px, .72fr) minmax(0, 1.28fr) !important;
    grid-template-rows: minmax(320px, 1fr) minmax(250px, 32%) !important;
    grid-template-areas:
      "form map"
      "timeline timeline" !important;
  }
}

@media (max-width: 820px) {
  body.ui-window-design #orderModal .order-box {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) 260px 260px !important;
    grid-template-areas:
      "form"
      "map"
      "timeline" !important;
  }
}

/* Rote Kopfzeilen für alle Popups */
body.ui-window-design .modal-card > .modal-head {
  border-color: var(--reference-red-dark) !important;
  border-bottom-color: var(--reference-red-dark) !important;
  background: linear-gradient(#d43a42, var(--reference-red)) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .modal-card > .modal-head :is(h2, h3, strong, span) {
  color: #ffffff !important;
  text-shadow: none !important;
}

body.ui-window-design .modal-card > .modal-head .icon-button {
  border-color: rgba(255, 255, 255, .55) !important;
  background: rgba(0, 0, 0, .12) !important;
  color: #ffffff !important;
}

body.ui-window-design .modal-card > .modal-head .icon-button:hover {
  border-color: #ffffff !important;
  background: rgba(0, 0, 0, .25) !important;
}

body.ui-window-design .modal .modal-card > .modal-head > button.icon-button {
  border-color: rgba(255, 255, 255, .55) !important;
  background: rgba(0, 0, 0, .12) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .modal .modal-card > .modal-head > button.icon-button:hover {
  border-color: #ffffff !important;
  background: rgba(0, 0, 0, .25) !important;
}

/* Fahrzeugshop: Schließen-Schaltfläche entspricht den übrigen Aktionsdialogen. */
body.ui-window-design #shopModal #closeShopModal {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .12) !important;
  color: #ffffff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body.ui-window-design #shopModal #closeShopModal:hover {
  border-color: #ffffff !important;
  background: rgba(0, 0, 0, .25) !important;
}

/* Admin-Navigation und sichtbare Bearbeitungsaktionen. */
body.ui-window-design #adminModal .admin-tab.active,
body.ui-window-design #adminModal .admin-tab.active:hover,
body.dark-mode.ui-window-design #adminModal .admin-tab.active,
body.dark-mode.ui-window-design #adminModal .admin-tab.active:hover {
  border-color: var(--reference-green-dark) !important;
  background: var(--reference-green) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design #adminModal .admin-edit-action {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  margin-left: 0;
  border-color: var(--reference-green-dark) !important;
  background: var(--reference-green) !important;
  color: #ffffff !important;
  place-items: center;
}

body.ui-window-design #adminModal .admin-edit-action:hover {
  background: var(--reference-green-dark) !important;
}

/* Planung: grüner Einstieg und roter, themegerechter Popup-Kopf. */
body.ui-window-design #headerPlanningButton,
body.ui-window-design #headerPlanningButton.active,
body.ui-window-design #headerPlanningButton:hover {
  border-color: var(--reference-green-dark) !important;
  background: var(--reference-green) !important;
  color: #ffffff !important;
}

body.ui-window-design #locoPlanningPanel .panel-head {
  border-bottom-color: var(--reference-red-dark) !important;
  background: linear-gradient(#d43a42, var(--reference-red)) !important;
  color: #ffffff !important;
}

body.ui-window-design #locoPlanningPanel .panel-head :is(h2, span, label) {
  color: #ffffff !important;
}

body.ui-window-design #locoPlanningPanel #closePlanningPopup {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background: var(--reference-red-dark) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design #locoPlanningPanel #closePlanningPopup:hover {
  border-color: #ffffff !important;
  background: #8f1119 !important;
}

body.dark-mode.ui-window-design #locoPlanningPanel .panel-head {
  border-bottom-color: #6f1016 !important;
  background: linear-gradient(#991b23, #701118) !important;
  color: #ffffff !important;
}

body.dark-mode.ui-window-design #locoPlanningPanel #closePlanningPopup {
  border-color: rgba(255, 255, 255, .7) !important;
  background: #5f0d13 !important;
  color: #ffffff !important;
}

/* Adminfenster nutzt 95 Prozent der verfügbaren Bildschirmfläche. */
body.ui-window-design #adminModal .admin-card {
  width: 95vw !important;
  height: 95vh !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
}

/* Einheitliche, kompakte Passwort-Sichtbarkeitsschalter. */
body.ui-window-design .password-reveal input {
  padding-right: 50px !important;
}

body.ui-window-design .password-toggle {
  right: 6px !important;
  width: 36px !important;
  height: 34px !important;
  min-width: 36px !important;
  min-height: 34px !important;
  border: 1px solid #c5ced8 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #475569 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}

body.ui-window-design .password-toggle::before {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 75% 0;
  background: transparent;
  transform: rotate(45deg);
}

body.ui-window-design .password-toggle::after {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: none;
  box-shadow: none;
}

body.ui-window-design .password-toggle.is-visible::after {
  width: 2px;
  height: 23px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px #ffffff;
}

body.ui-window-design .password-toggle:hover,
body.ui-window-design .password-toggle:focus-visible {
  border-color: var(--reference-green-dark) !important;
  background: #eef8f0 !important;
  color: var(--reference-green-dark) !important;
  box-shadow: 0 0 0 3px rgba(56, 168, 82, .16) !important;
  outline: none !important;
}

body.dark-mode.ui-window-design .password-toggle {
  border-color: #536071 !important;
  background: #20262e !important;
  color: #e7e9ec !important;
  box-shadow: none !important;
}

body.dark-mode.ui-window-design .password-toggle.is-visible::after {
  box-shadow: 0 0 0 2px #20262e;
}

body.dark-mode.ui-window-design .password-toggle:hover,
body.dark-mode.ui-window-design .password-toggle:focus-visible {
  border-color: #54bd6d !important;
  background: #26352b !important;
  color: #b9f1c5 !important;
  box-shadow: 0 0 0 3px rgba(84, 189, 109, .18) !important;
}

/* Intelligenter Planungsassistent */
.contract-planning-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.planning-assistant-card {
  width: min(1180px, 95vw);
  height: min(850px, 94vh);
  max-width: 95vw;
  max-height: 94vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.planning-assistant-body {
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.planning-assistant-toolbar,
.planning-assistant-actions {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.planning-assistant-toolbar label,
.planning-assistant-columns label {
  display: grid;
  gap: 5px;
  color: #334155;
  font-weight: 700;
  font-size: 12px;
}

.planning-assistant-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(2, auto);
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #b9d9c0;
  border-left: 5px solid var(--reference-green);
  background: #f1f8f3;
}

.planning-assistant-summary strong {
  font-size: 17px;
}

.planning-assistant-columns {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px;
}

.planning-assistant-columns > section {
  min-width: 0;
  padding: 14px;
  border: 1px solid #d6dde5;
  border-radius: 8px;
  background: #ffffff;
}

.planning-assistant-columns h3 {
  margin: 0 0 12px;
  color: #991b1b;
  font-size: 15px;
}

.planning-assistant-wagons {
  display: grid;
  gap: 6px;
  max-height: 230px;
  margin-top: 12px;
  overflow: auto;
}

.planning-assistant-wagons label {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 7px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
}

.planning-assistant-steps {
  display: grid;
  gap: 7px;
}

.planning-assistant-steps > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dbe3ea;
  border-radius: 6px;
}

.planning-assistant-steps b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--reference-green);
  color: #ffffff;
}

.planning-assistant-step-toggle {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border-color: var(--reference-green-dark);
  background: var(--reference-green);
  color: #ffffff;
}

.planning-assistant-step-toggle.disabled {
  border-color: #94a3b8;
  background: #e2e8f0;
  color: #64748b;
}

.planning-assistant-conflicts,
.planning-assistant-times {
  display: grid;
  gap: 7px;
}

.planning-assistant-conflict,
.planning-assistant-ready {
  padding: 9px;
  border: 1px solid #f0a0a4;
  border-radius: 6px;
  background: #fff1f2;
  color: #991b1b;
  font-size: 12px;
}

.planning-assistant-ready {
  border-color: #9ed5aa;
  background: #eff9f1;
  color: #166534;
}

.planning-assistant-times {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.planning-assistant-times button {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #d6dde5;
  background: #ffffff;
  color: #1f2937;
  text-align: left;
}

.planning-assistant-times button:hover {
  border-color: var(--reference-green);
  background: #f1f8f3;
}

.planning-assistant-times span {
  color: #64748b;
  font-size: 10px;
}

body.dark-mode .planning-assistant-toolbar label,
body.dark-mode .planning-assistant-columns label {
  color: #e7e9ec;
}

body.dark-mode .planning-assistant-summary,
body.dark-mode .planning-assistant-columns > section,
body.dark-mode .planning-assistant-times button {
  border-color: #4d555f;
  background: #20262e;
  color: #e7e9ec;
}

body.dark-mode .planning-assistant-steps > div,
body.dark-mode .planning-assistant-wagons label {
  border-color: #454d57;
  background: #272d35;
}

body.dark-mode .planning-assistant-conflict {
  border-color: #8f353b;
  background: #3b1618;
  color: #fca5a5;
}

body.dark-mode .planning-assistant-ready {
  border-color: #347244;
  background: #17321d;
  color: #9fe2af;
}

@media (max-width: 900px) {
  .planning-assistant-card {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-width: none;
    max-height: none;
  }

  .planning-assistant-columns {
    grid-template-columns: 1fr;
  }

  .planning-assistant-summary {
    grid-template-columns: 1fr;
  }

  .planning-assistant-toolbar,
  .planning-assistant-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Finale Layoutregeln für den vereinfachten Planungsassistenten */
.planning-assistant-card { width: min(1180px, 95vw); max-height: 94vh; }
.planning-assistant-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: end; }
.planning-assistant-columns { grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(0, 1fr); }
.planning-assistant-personnel, .planning-assistant-review, .planning-assistant-metrics { display: grid; gap: 7px; }
.planning-assistant-personnel > div, .planning-assistant-review { padding: 10px; border: 1px solid #d8dee8; border-radius: 7px; background: #f7f9fc; }
.planning-assistant-personnel label { display: flex; flex-direction: row; align-items: center; gap: 7px; margin-top: 6px; }
.planning-assistant-metrics { margin-top: 8px; padding: 8px 10px; color: #24324a; background: #edf3ff; border-radius: 6px; }
.planning-assistant-review #planningAssistantReview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.planning-assistant-steps > div.disabled { opacity: .55; }
.planning-assistant-steps > div.has-error { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
body.dark-mode .planning-assistant-personnel > div, body.dark-mode .planning-assistant-review { background: #151b24; border-color: #3a4555; }
body.dark-mode .planning-assistant-metrics { color: #dbe8ff; background: #1b2b45; }
@media (max-width: 900px) {
  .planning-assistant-columns { grid-template-columns: 1fr; }
  .planning-assistant-review #planningAssistantReview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .planning-assistant-card { width: 100vw; max-height: 100dvh; }
  .planning-assistant-toolbar, .planning-assistant-review #planningAssistantReview { grid-template-columns: 1fr; }
  .planning-assistant-actions .primary, #planningAssistantOrderSchedule { width: 100%; }
}

/* Modernes Auth-Portal */
html body.auth-locked {
  background: #101114 !important;
}

html body.auth-locked #loginModal {
  place-items: center !important;
  padding: clamp(18px, 4vw, 56px) !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 122, 0, .22), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(255, 153, 0, .13), transparent 30%),
    linear-gradient(125deg, rgba(9, 10, 12, .88), rgba(31, 32, 36, .8)) !important;
  backdrop-filter: blur(3px) saturate(.85) !important;
}

html body.auth-locked .auth-backdrop {
  background: linear-gradient(135deg, #191a1e, #090a0c 65%, #24252a) !important;
}

html body.auth-locked .auth-backdrop::before {
  background:
    linear-gradient(100deg, rgba(10, 10, 12, .9), rgba(10, 10, 12, .42) 52%, rgba(10, 10, 12, .86)),
    radial-gradient(circle at 27% 35%, rgba(255, 122, 0, .22), transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .64)) !important;
}

html body.auth-locked .auth-map-shell {
  filter: grayscale(.62) saturate(.65) contrast(1.12) brightness(.46) !important;
  opacity: .68 !important;
}

html body.auth-locked :is(.auth-main, .auth-secondary) {
  stroke: #ff7a00 !important;
}

html body.auth-locked .auth-stations circle {
  fill: #ff7a00 !important;
  stroke: #fff7ed !important;
}

html body.auth-locked:not(.dark-mode) #loginModal {
  background:
    radial-gradient(circle at 13% 18%, rgba(255, 122, 0, .3), transparent 34%),
    radial-gradient(circle at 88% 80%, rgba(96, 104, 116, .16), transparent 30%),
    linear-gradient(125deg, rgba(250, 247, 242, .8), rgba(226, 229, 234, .72)) !important;
  backdrop-filter: blur(3px) saturate(.9) !important;
}

html body.auth-locked:not(.dark-mode) .auth-backdrop {
  background: linear-gradient(135deg, #f5efe7, #dfe3e8 62%, #ede5da) !important;
}

html body.auth-locked:not(.dark-mode) .auth-backdrop::before {
  background:
    linear-gradient(100deg, rgba(255, 252, 247, .78), rgba(255, 255, 255, .28) 52%, rgba(236, 239, 243, .68)),
    radial-gradient(circle at 27% 35%, rgba(255, 122, 0, .2), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(96, 87, 76, .12)) !important;
}

html body.auth-locked:not(.dark-mode) .auth-map-shell {
  filter: grayscale(.5) saturate(.7) contrast(.94) brightness(1.08) !important;
  opacity: .58 !important;
}

html body.auth-locked:not(.dark-mode) .auth-map-credit {
  border-color: rgba(70, 72, 78, .16) !important;
  background: rgba(255, 255, 255, .7) !important;
  color: rgba(40, 42, 47, .68) !important;
}

html body.auth-locked.dark-mode #loginModal {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 122, 0, .22), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(255, 153, 0, .13), transparent 30%),
    linear-gradient(125deg, rgba(9, 10, 12, .9), rgba(31, 32, 36, .84)) !important;
}

html body.auth-locked.dark-mode .auth-backdrop {
  background: linear-gradient(135deg, #191a1e, #090a0c 65%, #24252a) !important;
}

html body.auth-locked.dark-mode .auth-backdrop::before {
  background:
    linear-gradient(100deg, rgba(10, 10, 12, .9), rgba(10, 10, 12, .42) 52%, rgba(10, 10, 12, .86)),
    radial-gradient(circle at 27% 35%, rgba(255, 122, 0, .22), transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .64)) !important;
}

html body.auth-locked.dark-mode .auth-map-shell {
  filter: grayscale(.62) saturate(.65) contrast(1.12) brightness(.46) !important;
  opacity: .68 !important;
}

html body.ui-window-design.auth-locked #loginModal .login-card,
html body.auth-locked #loginModal .login-card {
  width: min(1040px, 96vw) !important;
  height: min(740px, calc(100dvh - 40px)) !important;
  max-width: 1040px !important;
  max-height: calc(100dvh - 40px) !important;
  display: grid !important;
  grid-template-columns: minmax(330px, .88fr) minmax(420px, 1.12fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  color: #202126 !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 122, 0, .08) !important;
  backdrop-filter: none !important;
}

html body.auth-locked #loginModal .login-card::before {
  display: none !important;
  content: none !important;
}

.login-brand-panel {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(34px, 4vw, 58px);
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 122, 0, .24), transparent 38%),
    linear-gradient(145deg, #303136 0%, #1e1f23 52%, #111215 100%);
  color: #ffffff;
}

.login-brand-panel::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -150px;
  bottom: -130px;
  border: 38px solid rgba(255, 122, 0, .12);
  border-radius: 50%;
}

.login-brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 48%, rgba(255, 255, 255, .035) 48% 49%, transparent 49% 100%);
}

.login-logo-frame {
  width: clamp(104px, 12vw, 146px);
  aspect-ratio: 1;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 31px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .36), 0 0 42px rgba(255, 122, 0, .13);
}

.login-logo-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 24px;
}

.login-brand-kicker,
.login-auth-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #ff8a1c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

html body.auth-locked .login-brand-panel h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(31px, 4vw, 46px) !important;
  font-weight: 900 !important;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.login-brand-copy {
  position: relative;
  z-index: 1;
  max-width: 360px;
  margin: 18px 0 30px;
  color: #c8c9ce;
  font-size: 15px;
  line-height: 1.65;
}

.login-brand-features {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
}

.login-brand-features span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ececef;
  font-size: 13px;
  font-weight: 700;
}

.login-brand-features i {
  width: 22px;
  color: #ff8a1c;
  text-align: center;
  font-size: 16px;
}

.login-auth-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: #ffffff;
}

html body.auth-locked #loginModal .login-auth-panel > .modal-head {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: clamp(35px, 4vw, 54px) clamp(34px, 4vw, 58px) 14px !important;
  border: 0 !important;
  background: #ffffff !important;
}

html body.auth-locked #loginModal .modal-head > .login-auth-heading {
  min-width: 0;
  display: block !important;
}

html body.auth-locked #loginModal .login-auth-kicker {
  display: block;
}

html body.auth-locked #loginModal #loginTitle {
  margin: 0 !important;
  color: #202126 !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.1;
  letter-spacing: -.035em;
}

#loginSubtitle {
  display: block !important;
  max-width: 390px;
  margin: 9px 0 0;
  color: #74767f;
  font-size: 14px;
  line-height: 1.5;
}

html body.auth-locked #loginModal .login-theme-toggle {
  flex: 0 0 auto;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid #e3e4e8 !important;
  border-radius: 12px !important;
  background: #f6f6f8 !important;
  color: #3a3b40 !important;
  box-shadow: none !important;
}

html body.auth-locked #loginModal .modal-head > button.login-theme-toggle::before,
html body.auth-locked #loginModal .modal-head > button.login-theme-toggle::after {
  content: none !important;
  display: none !important;
}

html body.auth-locked #loginModal .login-theme-toggle .header-icon,
html body.auth-locked #loginModal .login-theme-toggle .header-icon svg {
  display: grid !important;
  width: 20px !important;
  height: 20px !important;
  color: currentColor !important;
}

html body.auth-locked #loginModal .login-form {
  min-height: 0;
  display: block !important;
  padding: 18px clamp(34px, 4vw, 58px) 42px !important;
  overflow: auto !important;
  background: #ffffff !important;
  color: #202126 !important;
}

html body.auth-locked #loginModal .auth-tabs {
  width: 100%;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  margin: 0 0 24px !important;
  padding: 4px !important;
  border: 1px solid #e5e6e9 !important;
  border-radius: 13px !important;
  background: #f3f3f5 !important;
}

html body.ui-window-design.auth-locked #loginModal .auth-tabs button,
html body.auth-locked #loginModal .auth-tabs button {
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #777982 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

html body.ui-window-design.auth-locked #loginModal .auth-tabs button.active,
html body.auth-locked #loginModal .auth-tabs button.active {
  background: #ffffff !important;
  color: #202126 !important;
  box-shadow: 0 4px 14px rgba(22, 23, 27, .08), inset 0 -2px #ff7a00 !important;
}

html body.auth-locked #loginModal .auth-pane {
  gap: 15px !important;
}

html body.auth-locked #loginModal .auth-pane > label {
  gap: 7px !important;
  color: #393a40 !important;
}

.login-field-label {
  display: block;
  color: #393a40;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .01em;
}

html body.ui-window-design.auth-locked #loginModal :is(input[type="text"], input[type="email"], input[type="password"]),
html body.auth-locked #loginModal :is(input[type="text"], input[type="email"], input[type="password"]) {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid #d9dae0 !important;
  border-radius: 12px !important;
  outline: none !important;
  background: #fafafd !important;
  color: #202126 !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 1px rgba(15, 16, 18, .02) !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

html body.auth-locked #loginModal :is(input[type="text"], input[type="email"], input[type="password"]):focus {
  border-color: #ff7a00 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(255, 122, 0, .13) !important;
}

html body.auth-locked #loginModal input::placeholder {
  color: #a8a9af !important;
}

html body.auth-locked #loginModal .password-reveal input {
  padding-right: 52px !important;
}

html body.ui-window-design.auth-locked #loginModal .password-toggle,
html body.auth-locked #loginModal .password-toggle {
  right: 6px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #73757e !important;
}

html body.auth-locked #loginModal .login-remember-row {
  margin: 1px 0 0 !important;
  color: #666871 !important;
  font-size: 12px;
  font-weight: 750 !important;
}

html body.auth-locked #loginModal .login-remember-row input {
  accent-color: #ff7a00 !important;
}

html body.ui-window-design.auth-locked #loginModal .login-primary-action,
html body.auth-locked #loginModal .login-primary-action {
  width: 100% !important;
  min-height: 49px !important;
  margin-top: 2px !important;
  border: 1px solid #e86600 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff8a00, #ff6a00) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 24px rgba(255, 106, 0, .22) !important;
}

html body.auth-locked #loginModal .login-primary-action:hover,
html body.auth-locked #loginModal .login-primary-action:focus-visible {
  background: linear-gradient(135deg, #ff981f, #f35f00) !important;
  box-shadow: 0 13px 28px rgba(255, 106, 0, .3) !important;
}

html body.ui-window-design.auth-locked #loginModal .login-link-action,
html body.auth-locked #loginModal .login-link-action {
  min-height: 30px !important;
  padding: 3px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d75f00 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: left !important;
  box-shadow: none !important;
}

html body.auth-locked #loginModal .login-verification-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  margin-top: -4px;
}

html body.auth-locked #loginModal .login-version {
  min-height: 28px !important;
  padding: 5px 8px !important;
  border: 1px solid #e4e5e8 !important;
  border-radius: 8px !important;
  background: #f5f5f7 !important;
  color: #85868d !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

html body.auth-locked #loginModal #loginHint:not(:empty) {
  margin-top: 14px;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff2ee !important;
  color: #bd351b !important;
  font-size: 12px;
}

html body.auth-locked.dark-mode #loginModal .login-card,
html body.ui-window-design.auth-locked.dark-mode #loginModal .login-card {
  border-color: rgba(255, 255, 255, .12) !important;
  background: #1b1c20 !important;
}

html body.auth-locked.dark-mode #loginModal :is(.login-auth-panel, .login-auth-panel > .modal-head, .login-form) {
  background: #1b1c20 !important;
}

html body.auth-locked.dark-mode #loginModal :is(#loginTitle, .login-field-label, .auth-pane > label) {
  color: #f4f4f5 !important;
}

html body.auth-locked.dark-mode #loginModal #loginSubtitle {
  color: #a7a8ae !important;
}

html body.auth-locked.dark-mode #loginModal .auth-tabs {
  border-color: #38393f !important;
  background: #111216 !important;
}

html body.auth-locked.dark-mode #loginModal .auth-tabs button.active {
  background: #292a2f !important;
  color: #ffffff !important;
}

html body.auth-locked.dark-mode #loginModal :is(input[type="text"], input[type="email"], input[type="password"]) {
  border-color: #3d3e44 !important;
  background: #121317 !important;
  color: #ffffff !important;
}

html body.auth-locked.dark-mode #loginModal .login-theme-toggle {
  border-color: #3b3c42 !important;
  background: #292a2f !important;
  color: #f5f5f5 !important;
}

html body.auth-locked.dark-mode #loginModal .login-version {
  border-color: #393a40 !important;
  background: #24252a !important;
  color: #a9aab0 !important;
}

@media (max-width: 820px) {
  html body.ui-window-design.auth-locked #loginModal .login-card,
  html body.auth-locked #loginModal .login-card {
    width: min(560px, calc(100vw - 24px)) !important;
    height: min(820px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    border-radius: 22px !important;
  }

  .login-brand-panel {
    min-height: 154px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    column-gap: 20px;
    padding: 24px 28px;
  }

  .login-logo-frame {
    width: 88px;
    grid-row: 1 / 4;
    margin: 0;
    border-radius: 22px;
  }

  .login-logo-frame img {
    border-radius: 17px;
  }

  .login-brand-kicker {
    margin-bottom: 5px;
  }

  html body.auth-locked .login-brand-panel h1 {
    font-size: 28px !important;
  }

  .login-brand-copy {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
  }

  .login-brand-features {
    display: none;
  }

  html body.auth-locked #loginModal .login-auth-panel > .modal-head {
    padding: 27px 28px 10px !important;
  }

  html body.auth-locked #loginModal .login-form {
    padding: 14px 28px 30px !important;
  }
}

@media (max-width: 480px) {
  html body.auth-locked #loginModal {
    padding: 0 !important;
  }

  html body.ui-window-design.auth-locked #loginModal .login-card,
  html body.auth-locked #loginModal .login-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .login-brand-panel {
    min-height: 128px;
    grid-template-columns: 70px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px 20px;
  }

  .login-logo-frame {
    width: 70px;
    padding: 5px;
    border-radius: 18px;
  }

  .login-logo-frame img {
    border-radius: 13px;
  }

  .login-brand-copy {
    display: none;
  }

  html body.auth-locked #loginModal .login-auth-panel > .modal-head {
    padding: 22px 20px 8px !important;
  }

  html body.auth-locked #loginModal .login-form {
    padding: 12px 20px 24px !important;
  }

  html body.auth-locked #loginModal #loginTitle {
    font-size: 28px !important;
  }
}

/* Direkter Zugriff auf ein einzelnes Fenster über #/fenster/... */
html body.window-address-mode:not(.auth-locked) {
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background: var(--reference-shell, #eef1f4) !important;
}

html body.window-address-mode:not(.auth-locked) > .topbar,
html body.window-address-mode:not(.auth-locked) > .company-chat-fab,
html body.window-address-mode:not(.auth-locked) > .company-chat-panel,
html body.window-address-mode:not(.auth-locked) .window-dock,
html body.window-address-mode:not(.auth-locked) .layout.map-stage > #map,
html body.window-address-mode:not(.auth-locked) .layout.map-stage > .map-layer-control,
html body.window-address-mode:not(.auth-locked) .layout.map-stage > .floating-window:not(.window-address-target),
html body.window-address-mode:not(.auth-locked) > .modal:not(.window-address-target):not(.open),
html body.window-address-mode:not(.auth-locked) > .vehicle-purchase-popup:not(.window-address-target):not(.open) {
  display: none !important;
}

html body.window-address-mode:not(.auth-locked) .layout.map-stage > .activity-context-menu.open {
  display: grid !important;
  z-index: 12000 !important;
}

html body.window-address-mode.ui-window-design:not(.auth-locked) .layout.map-stage > .floating-window:not(.window-address-target):not(#windowAddressSpecificity) {
  display: none !important;
}

html body.window-address-mode:not(.auth-locked) .layout.map-stage {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body.window-address-mode.ui-window-design:not(.auth-locked) .layout.map-stage > .floating-window.window-address-target,
html body.window-address-mode.ui-window-design:not(.auth-locked) #locoPlanningPanel.window-address-target {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: grid !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  z-index: 6000 !important;
  box-shadow: none !important;
}

html body.window-address-mode:not(.auth-locked) > .modal.window-address-target {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 0 !important;
  background: var(--reference-shell, #eef1f4) !important;
  z-index: 6000 !important;
}

html body.window-address-mode:not(.auth-locked) > .modal.window-address-target > .modal-card {
  width: 100vw !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.window-address-mode:not(.auth-locked) > .vehicle-purchase-popup.window-address-target {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  width: 100vw !important;
  height: 100dvh !important;
  place-items: center !important;
  z-index: 6000 !important;
}

body.ui-window-design #locoPlanningPanel #openPlanningAssistant.planning-assistant-launch {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 36px !important;
  min-width: 38px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 1px solid #d45d00 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #ff8a00, #f16900) !important;
  color: #ffffff !important;
  box-shadow: 0 5px 13px rgba(224, 94, 0, .24) !important;
}

body.ui-window-design #locoPlanningPanel #openPlanningAssistant.planning-assistant-launch:hover {
  background: linear-gradient(135deg, #ff9a24, #dd5700) !important;
}

#openPlanningAssistant .fa-microchip-ai {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

#openPlanningAssistant .planning-assistant-launch-icon,
#openPlanningAssistant .planning-assistant-launch-icon svg {
  display: grid !important;
  width: 20px !important;
  height: 20px !important;
}

/* Informative timetable cards */
.schedule-card.schedule-card-detailed {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-left-width: 4px;
  cursor: default;
}

.schedule-card-head,
.schedule-card-route,
.schedule-card-status {
  display: flex;
  align-items: center;
}

.schedule-card-head {
  justify-content: space-between;
  gap: 10px;
}

.schedule-card-route {
  min-width: 0;
  gap: 8px;
}

.schedule-card-route > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.schedule-card-route strong {
  overflow: hidden;
  color: #172033;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-card-route small {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}

.schedule-state-pill,
.schedule-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1.2;
}

.schedule-state-pill {
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.schedule-state-pill.is-open {
  background: #fff3d6;
  color: #92400e;
}

.schedule-state-pill.is-assigned,
.schedule-state-pill.is-running {
  background: #dcfce7;
  color: #166534;
}

.schedule-state-pill.is-running::before {
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #16a34a;
  content: "";
}

.schedule-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  background: #f8fafc;
}

.schedule-fact {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 8px 9px;
  border-right: 1px solid #e1e6ee;
  border-bottom: 1px solid #e1e6ee;
}

.schedule-fact:nth-child(3n) {
  border-right: 0;
}

.schedule-fact:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.schedule-fact small {
  color: #667085;
  font-size: 10px;
  font-weight: 700;
}

.schedule-fact b {
  overflow: hidden;
  color: #172033;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-card-status {
  flex-wrap: wrap;
  gap: 6px;
}

.schedule-status-chip {
  padding: 5px 8px;
  font-size: 10px;
}

.schedule-status-chip.is-success {
  background: #e8f7ed;
  color: #166534;
}

.schedule-status-chip.is-warning {
  background: #fff3d6;
  color: #92400e;
}

.schedule-card.schedule-card-detailed .schedule-card-foot {
  margin-top: 0;
  padding-top: 9px;
  border-top: 1px solid #e1e6ee;
}

body.dark-mode .schedule-card-route strong,
body.dark-mode .schedule-fact b {
  color: #f8fafc;
}

body.dark-mode .schedule-card-route small,
body.dark-mode .schedule-fact small {
  color: #aeb9c8;
}

body.dark-mode .schedule-card-facts {
  border-color: #3a4555;
  background: #151b24;
}

body.dark-mode .schedule-fact {
  border-color: #3a4555;
}

body.dark-mode .schedule-card.schedule-card-detailed .schedule-card-foot {
  border-color: #3a4555;
}

body.dark-mode .schedule-state-pill.is-open,
body.dark-mode .schedule-status-chip.is-warning {
  background: #493311;
  color: #fde68a;
}

body.dark-mode .schedule-state-pill.is-assigned,
body.dark-mode .schedule-state-pill.is-running,
body.dark-mode .schedule-status-chip.is-success {
  background: #173322;
  color: #bbf7d0;
}

/* Explain why the assistant did or did not find timetables */
.planning-assistant-schedule-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid #d8dee8;
}

.planning-assistant-schedule-head > span {
  display: grid;
  gap: 2px;
}

.planning-assistant-schedule-head small {
  color: #667085;
}

.planning-assistant-schedule-head > b {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e8eef7;
  color: #344054;
  font-size: 10px;
}

.planning-assistant-schedules label b em {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  vertical-align: middle;
}

.planning-assistant-schedule-empty {
  display: grid;
  gap: 5px;
  padding: 9px;
  border: 1px solid #f4c46a;
  border-radius: 6px;
  background: #fff9e8;
  color: #78350f;
}

.planning-assistant-schedule-empty > span {
  font-size: 11px;
}

.planning-assistant-schedule-empty ul {
  display: grid;
  gap: 3px;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}

.planning-assistant-schedule-empty li {
  display: flex;
  gap: 7px;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid rgba(146, 64, 14, .18);
  font-size: 10px;
}

.planning-assistant-schedule-empty li span {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dark-mode .planning-assistant-schedule-head {
  border-color: #3a4555;
}

body.dark-mode .planning-assistant-schedule-head small {
  color: #aeb9c8;
}

body.dark-mode .planning-assistant-schedule-head > b {
  background: #273244;
  color: #dbe4ef;
}

body.dark-mode .planning-assistant-schedules label b em {
  background: #173322;
  color: #bbf7d0;
}

body.dark-mode .planning-assistant-schedule-empty {
  border-color: #8a5a12;
  background: #33250c;
  color: #fde68a;
}

@media (max-width: 520px) {
  .schedule-card-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-fact:nth-child(3n) {
    border-right: 1px solid #e1e6ee;
  }

  .schedule-fact:nth-child(2n) {
    border-right: 0;
  }

  .schedule-fact:nth-last-child(-n + 3) {
    border-bottom: 1px solid #e1e6ee;
  }

  .schedule-fact:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .planning-assistant-schedule-head,
  .schedule-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-state-pill {
    align-self: flex-start;
  }
}


/* assets/css/app/chunk-10-reference-parity.css */
/*
 * Rail Dispatcher – vollständige Angleichung an previewlls.html
 *
 * Diese letzte Designschicht verändert ausschließlich die visuelle Sprache.
 * Raster, Größenaufteilung, Positionierung und Funktionslogik bleiben erhalten.
 */

:root {
  --preview-red: #c61f27;
  --preview-red-dark: #a5161d;
  --preview-orange: #f0a029;
  --preview-green: #38a852;
  --preview-green-dark: #27873d;
  --preview-blue: #2d83c5;
  --preview-page: #e7e7e7;
  --preview-panel: #ffffff;
  --preview-head: #f5f5f5;
  --preview-head-bottom: #e8e8e8;
  --preview-control: #eeeeee;
  --preview-border: #cfd4d8;
  --preview-border-strong: #aeb4b9;
  --preview-text: #333333;
  --preview-muted: #777777;
  --preview-shadow: 0 1px 3px rgba(0, 0, 0, .14);
}

html body.ui-window-design {
  --red: var(--preview-red);
  --red-dark: var(--preview-red-dark);
  --green: var(--preview-green);
  --blue: var(--preview-blue);
  --line: var(--preview-border);
  --panel: var(--preview-panel);
  --text: var(--preview-text);
  --muted: var(--preview-muted);
  --shadow: var(--preview-shadow);
  background: var(--preview-page) !important;
  color: var(--preview-text) !important;
  font: 13px/1.35 Arial, Helvetica, sans-serif !important;
}

body.ui-window-design,
body.ui-window-design :is(button, input, select, textarea) {
  font-family: Arial, Helvetica, sans-serif !important;
}

body.ui-window-design * {
  scrollbar-color: #aeb4b9 #eeeeee;
}

body.ui-window-design *::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

body.ui-window-design *::-webkit-scrollbar-track {
  background: #eeeeee;
}

body.ui-window-design *::-webkit-scrollbar-thumb {
  border: 2px solid #eeeeee;
  border-radius: 0;
  background: #aeb4b9;
}

/* Kopfzeile: roter Leitstellenbalken wie in der Vorlage. */
html body.ui-window-design:not(.view-maponly) .topbar {
  border: 0 !important;
  border-bottom: 1px solid #8e1117 !important;
  background: linear-gradient(180deg, #d52a31 0%, #b91820 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .34) !important;
}

body.ui-window-design .topbar .brand {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body.ui-window-design .topbar .brand-mark {
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 2px !important;
  background: rgba(143, 17, 23, .46) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .topbar .global-search input {
  border: 1px solid #9d1218 !important;
  border-radius: 1px !important;
  background: #ffffff !important;
  color: #333333 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08) !important;
}

body.ui-window-design .topbar .global-search input::placeholder {
  color: #8a8a8a !important;
}

body.ui-window-design .topbar .time-controls {
  border: 1px solid rgba(128, 12, 18, .62) !important;
  border-radius: 2px !important;
  background: rgba(132, 13, 19, .34) !important;
  box-shadow: none !important;
}

body.ui-window-design .topbar :is(.time-button, .icon-action, .game-clock, .money) {
  border: 1px solid rgba(141, 18, 24, .8) !important;
  border-radius: 2px !important;
  background: rgba(159, 19, 25, .62) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .topbar :is(.time-button, .icon-action):hover,
body.ui-window-design .topbar :is(.time-button, .icon-action).active {
  border-color: #7f0f14 !important;
  background: #9f1319 !important;
  color: #ffffff !important;
  box-shadow: inset 0 -3px rgba(255, 255, 255, .3) !important;
}

body.ui-window-design .topbar .game-clock,
body.ui-window-design .topbar .money {
  font-weight: 700 !important;
}

/* Hintergrund und Fensternavigation. */
body.ui-window-design .layout.map-stage {
  background: var(--preview-page) !important;
}

body.ui-window-design .window-dock {
  border-color: #222222 !important;
  border-radius: 0 !important;
  background: #3a3a3a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .window-dock .dock-button {
  border-color: #555555 !important;
  border-radius: 0 !important;
  background: #3a3a3a !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .window-dock .dock-button:hover,
body.ui-window-design .window-dock .dock-button.active {
  background: #555555 !important;
  box-shadow: inset 0 -3px var(--preview-red) !important;
}

/* Panels, Fenster und Abschnittsflächen. */
html body.ui-window-design :is(
  .panel,
  .floating-window,
  .side-panel,
  .planning-side-panel,
  .company-chat-panel,
  .inline-loco-planner,
  .loco-planner
) {
  border: 1px solid #aaaaaa !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: var(--preview-shadow) !important;
}

body.ui-window-design :is(
  .panel-head,
  .sub-head,
  .section-head,
  .section-title,
  .table-head,
  .archive-head,
  .personnel-pane-head,
  .personnel-section-head,
  .track-rental-section-head,
  .admin-places-overview-head,
  .admin-track-overview-head,
  .fleet-item-head
) {
  border-color: #bbbbbb !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #fafafa 0%, #e8e8e8 100%) !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .panel-head h2,
  .panel-head h3,
  .sub-head,
  .section-head,
  .section-title,
  .table-head,
  th
) {
  color: var(--preview-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body.ui-window-design :is(
  .panel-body,
  .depot-layout,
  .sites-layout,
  .schedule-view,
  .contracts-layout,
  .notification-list,
  .planning-pane,
  .planning-side-pane
) {
  background-color: #ffffff !important;
  color: var(--preview-text) !important;
}

body.ui-window-design :is(.head-actions span, .muted, .empty-state, small) {
  color: var(--preview-muted) !important;
}

/* Klassische Register. */
body.ui-window-design :is(
  .window-tabs,
  .admin-tabs,
  .shop-tabs,
  .personnel-overview-tabs,
  .track-rental-overview-tabs,
  .site-modal-tabs,
  .planning-side-tabs,
  .auth-tabs
) {
  border-color: #bbbbbb !important;
  border-radius: 0 !important;
  background: #e8e8e8 !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .window-tab,
  .admin-tab,
  .shop-tab,
  .tab-button,
  .planning-side-tab,
  .personnel-overview-tabs button,
  .track-rental-overview-tabs button,
  .site-modal-tabs button,
  .auth-tabs button
) {
  border-color: #bbbbbb !important;
  border-radius: 0 !important;
  background: #e8e8e8 !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .window-tab,
  .admin-tab,
  .shop-tab,
  .tab-button,
  .planning-side-tab,
  .personnel-overview-tabs button,
  .track-rental-overview-tabs button,
  .site-modal-tabs button,
  .auth-tabs button
):hover {
  background: #dedede !important;
}

body.ui-window-design :is(
  .window-tab.active,
  .admin-tab.active,
  .shop-tab.active,
  .tab-button.active,
  .planning-side-tab.active,
  .personnel-overview-tabs button.active,
  .track-rental-overview-tabs button.active,
  .site-modal-tabs button.active,
  .auth-tabs button.active
) {
  border-color: #bbbbbb !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: inset 0 3px var(--preview-red) !important;
}

/* Formulare und Auswahlfelder. */
body.ui-window-design :is(input, select, textarea) {
  border: 1px solid #aaaaaa !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06) !important;
}

body.ui-window-design :is(input, select, textarea)::placeholder {
  color: #969696 !important;
}

body.ui-window-design :is(input, select, textarea):focus {
  border-color: var(--preview-blue) !important;
  outline: 2px solid rgba(45, 131, 197, .18) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

body.ui-window-design :is(input[type="checkbox"], input[type="radio"]) {
  min-height: 0 !important;
  accent-color: var(--preview-red) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(label, .field, .admin-field, .checkbox-field) {
  color: var(--preview-text) !important;
}

body.ui-window-design :is(.search-results, .picker-results, .stop-suggestion-list) {
  border: 1px solid #aaaaaa !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22) !important;
}

body.ui-window-design :is(.result, .picker-result) {
  border-color: #dddddd !important;
  background: #ffffff !important;
}

body.ui-window-design :is(.result, .picker-result):hover {
  background: #eeeeee !important;
}

/* Einheitliche klassische Buttons. */
body.ui-window-design :is(
  button,
  .secondary,
  .secondary-button,
  .icon-button,
  .small-action,
  .plus-button
) {
  border: 1px solid #aaaaaa;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffffff 0%, #e5e5e5 100%);
  color: var(--preview-text);
  box-shadow: none;
}

body.ui-window-design :is(
  button,
  .secondary,
  .secondary-button,
  .icon-button,
  .small-action,
  .plus-button
):hover {
  border-color: #8e9499;
  background: #eeeeee;
  color: var(--preview-text);
}

body.ui-window-design :is(
  .primary,
  button.primary,
  .btn-green,
  .site-buy-button,
  .shop-add-cart,
  .cart-buy-button,
  #checkoutShopCart,
  #openShopModal,
  #openSiteModalButton,
  #openOrderModal,
  #headerPlanningButton
) {
  border-color: #24873c !important;
  background: linear-gradient(180deg, #53c56b 0%, #319d48 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .primary,
  button.primary,
  .btn-green,
  .site-buy-button,
  .shop-add-cart,
  .cart-buy-button,
  #checkoutShopCart,
  #openShopModal,
  #openSiteModalButton,
  #openOrderModal,
  #headerPlanningButton
):hover {
  border-color: #1f7132 !important;
  background: linear-gradient(180deg, #49b85f 0%, #27873d 100%) !important;
  color: #ffffff !important;
}

body.ui-window-design :is(
  .danger,
  button.danger,
  .danger-button,
  .btn-red,
  .admin-delete,
  .personnel-fire
) {
  border-color: #a7181e !important;
  background: linear-gradient(180deg, #df3a41 0%, #be1f27 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design :is(.danger, button.danger, .danger-button, .btn-red):hover {
  background: linear-gradient(180deg, #cf3037 0%, #a5161d 100%) !important;
}

body.ui-window-design :is(.btn-orange, .warning-button) {
  border-color: #c88213 !important;
  background: linear-gradient(180deg, #f8b84f 0%, #e49a22 100%) !important;
  color: #4b3005 !important;
}

body.ui-window-design button:disabled {
  border-color: #c7cbd0 !important;
  background: #e5e5e5 !important;
  color: #92979c !important;
  box-shadow: none !important;
  opacity: .8 !important;
}

/* Karten, Listeneinträge und Tabellen. */
body.ui-window-design :is(
  .loco,
  .wagon-item,
  .site-card,
  .schedule-card,
  .contract-card,
  .notification-item,
  .shop-card,
  .vehicle-card,
  .wagon-card,
  .car-card,
  .fleet-item,
  .personnel-card,
  .personnel-offer-card,
  .person-training-info-card,
  .activity-card,
  .company-card,
  .company-member,
  .admin-box,
  .admin-data-card,
  .admin-vehicle-card,
  .admin-rank-card,
  .admin-user-card,
  .admin-track-card,
  .admin-fuel-card,
  .track-rental-offer,
  .track-rental-list-item,
  .hotel-offer,
  .route-choice-card,
  .schedule-route-choice-card,
  .side-item
) {
  border-color: #bbbbbb !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .loco,
  .wagon-item,
  .site-card,
  .schedule-card,
  .contract-card,
  .notification-item,
  .shop-card,
  .fleet-item,
  .personnel-card,
  .activity-card,
  .side-item
):hover {
  border-color: #9ea4aa !important;
  background: #f7f7f7 !important;
}

body.ui-window-design :is(
  .contract-card-head,
  .schedule-card-head,
  .shop-cart-head,
  .admin-card-content,
  .admin-user-summary,
  .planning-side-wagon-head,
  .activity-trip-preview-head
) {
  border-color: #dddddd !important;
  background: #f7f7f7 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design :is(
  .contract-facts,
  .schedule-card-facts,
  .contract-detail-facts,
  .schedule-detail-grid,
  .profile-stat-grid,
  .admin-user-stats
) {
  border-color: #cccccc !important;
  border-radius: 2px !important;
  background: #f8f8f8 !important;
}

body.ui-window-design :is(
  .contract-fact,
  .schedule-fact,
  .contract-detail-facts > div,
  .schedule-detail-grid > div,
  .profile-stat-grid > div,
  .admin-user-stats > div
) {
  border-color: #dddddd !important;
  background: transparent !important;
}

body.ui-window-design :is(table, .account-table, .wagon-list-table, .admin-data-table) {
  border-color: #cccccc !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(thead, th) {
  border-color: #cccccc !important;
  background: #eeeeee !important;
  color: var(--preview-text) !important;
}

body.ui-window-design :is(td, th) {
  border-color: #dddddd !important;
}

body.ui-window-design tbody tr:nth-child(even) {
  background: #fbfbfb !important;
}

body.ui-window-design tbody tr:hover {
  background: #eeeeee !important;
}

body.ui-window-design :is(
  .label,
  .status-chip,
  .role-chip,
  .personnel-role-chip,
  .schedule-state-pill,
  .schedule-status-chip,
  .contract-stop-count
) {
  border-radius: 2px !important;
  box-shadow: none !important;
}

body.ui-window-design :is(.label-green, .is-success, .status-ok) {
  background: var(--preview-green) !important;
  color: #ffffff !important;
}

body.ui-window-design :is(.label-red, .is-error, .status-error) {
  background: var(--preview-red) !important;
  color: #ffffff !important;
}

body.ui-window-design :is(.label-orange, .is-warning, .status-warning) {
  background: var(--preview-orange) !important;
  color: #4b3005 !important;
}

body.ui-window-design :is(.progress, .contract-progress, .loco-fuel-track, .skillbar) {
  border: 1px solid #cccccc !important;
  border-radius: 0 !important;
  background: #eeeeee !important;
  box-shadow: none !important;
}

/* Kartenbedienung und Popups. */
body.ui-window-design :is(
  .leaflet-control-zoom a,
  .map-layer-toggle,
  .map-layer-panel,
  .leaflet-popup-content-wrapper,
  .leaflet-popup-tip,
  .contract-map-popup,
  .admin-place-map-popup-shell
) {
  border-color: #999999 !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .24) !important;
}

body.ui-window-design .map-layer-panel-head,
body.ui-window-design .map-layer-divider {
  border-color: #bbbbbb !important;
  background: #eeeeee !important;
  color: var(--preview-text) !important;
}

body.ui-window-design .map-layer-row {
  border-color: #dddddd !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
}

body.ui-window-design .map-layer-row:hover {
  background: #f3f3f3 !important;
}

/* Modale Fenster und Popups. */
body.ui-window-design :is(.modal, .game-dialog-backdrop, .page-confirmation-backdrop) {
  background: rgba(0, 0, 0, .54) !important;
  backdrop-filter: none !important;
}

html body.ui-window-design :is(
  .modal-card,
  .game-dialog-card,
  .page-confirmation-card,
  .vehicle-purchase-popup,
  .shop-image-dialog
) {
  border: 1px solid #777777 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .48) !important;
}

html body.ui-window-design :is(
  .modal-card > .modal-head,
  .game-dialog-head,
  .page-confirmation-head,
  .company-chat-head,
  .shop-info-head,
  .shop-image-head
) {
  border-color: #8e1117 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #d52a31 0%, #b91820 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body.ui-window-design :is(
  .modal-card > .modal-head,
  .game-dialog-head,
  .page-confirmation-head,
  .company-chat-head,
  .shop-info-head,
  .shop-image-head
) :is(h2, h3, strong, span) {
  color: #ffffff !important;
  text-shadow: none !important;
}

html body.ui-window-design :is(
  .modal-card > .modal-head,
  .game-dialog-head,
  .page-confirmation-head,
  .company-chat-head,
  .shop-info-head,
  .shop-image-head
) :is(.icon-button, button) {
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 2px !important;
  background: rgba(127, 15, 20, .3) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body.ui-window-design :is(
  .modal-card > .modal-head,
  .game-dialog-head,
  .page-confirmation-head,
  .company-chat-head,
  .shop-info-head,
  .shop-image-head
) :is(.icon-button, button):hover {
  background: #7f0f14 !important;
}

body.ui-window-design :is(
  .modal-body,
  .modal-content,
  .modal-activity-form,
  .order-box,
  .admin-editor,
  .admin-settings-panel,
  .track-rental-body,
  .track-rental-new-body,
  .country-skill-modal-body,
  .wiki-content,
  .profile-grid
) {
  background: #ffffff !important;
  color: var(--preview-text) !important;
}

body.ui-window-design :is(
  .modal-actions,
  .modal-footer,
  .activity-modal-footer,
  .game-dialog-actions,
  .page-confirmation-actions,
  .admin-track-footer,
  .admin-fuel-footer
) {
  border-color: #bbbbbb !important;
  background: #eeeeee !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .section,
  .activity-form-section,
  .profile-box,
  .profile-card,
  .account-card,
  .admin-edit-section,
  .training-form-card,
  .training-list-card,
  .training-settings-card,
  .schedule-detail-box,
  .schedule-edit-form,
  .schedule-edit-map-panel,
  .schedule-edit-timeline-panel
) {
  border-color: #bbbbbb !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

/* Planungstafel: klassische weiße Werkzeugleiste und klare Zeitraster. */
body.ui-window-design :is(.planning-toolbar, .lp-toolbar, .planning-side-controls) {
  border-color: #aaaaaa !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(.lp-timeline, .planning-pane, .planning-side-list) {
  border-color: #aaaaaa !important;
  background-color: #ffffff !important;
  color: var(--preview-text) !important;
}

body.ui-window-design :is(.lp-resource-list, .lp-resource, .planning-side-loco) {
  border-color: #cccccc !important;
  background: #f6f6f6 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design :is(.lp-hour, .lp-grid-line, .planning-grid-line, .planning-row) {
  border-color: #d0d0d0 !important;
}

body.ui-window-design .lp-activity {
  border-color: #19649d !important;
  border-radius: 2px !important;
  background: #3989c7 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.ui-window-design .lp-activity.selected {
  outline: 2px solid var(--preview-red) !important;
  outline-offset: 1px !important;
}

body.ui-window-design :is(
  .planning-side-activity,
  .planning-side-contract-card,
  .planning-side-schedule,
  .planning-side-track,
  .planning-side-wagon,
  .planning-side-unplanned
) {
  border-color: #bbbbbb !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

/* Planungsassistent im selben Formular- und Tabellenstil. */
body.ui-window-design .planning-assistant-body {
  background: #eeeeee !important;
  color: var(--preview-text) !important;
}

body.ui-window-design :is(
  .planning-assistant-toolbar,
  .planning-assistant-summary,
  .planning-assistant-columns > section,
  .planning-assistant-review
) {
  border: 1px solid #bbbbbb !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(
  .planning-assistant-personnel > div,
  .planning-assistant-schedules,
  .planning-assistant-metrics,
  .planning-assistant-trip-controls,
  .planning-assistant-preview > div,
  .planning-assistant-times button,
  .planning-assistant-steps > div,
  .planning-assistant-wagons label
) {
  border-color: #bbbbbb !important;
  border-radius: 2px !important;
  background: #f7f7f7 !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

body.ui-window-design .planning-assistant-preview > div {
  border-left-color: var(--preview-green) !important;
}

body.ui-window-design .planning-assistant-preview > div.transfer {
  border-left-color: var(--preview-blue) !important;
}

body.ui-window-design .planning-assistant-preview > div.reposition {
  border-left-color: var(--preview-orange) !important;
}

body.ui-window-design .planning-assistant-preview > div.has-validation-error {
  border-left-color: var(--preview-red) !important;
  background: #fdebec !important;
}

body.ui-window-design .planning-assistant-schedules label:has(input:checked) {
  background: #e9f7ed !important;
  box-shadow: inset 4px 0 var(--preview-green) !important;
}

body.ui-window-design :is(.planning-assistant-conflict, .activity-warning, .schedule-detail-warning) {
  border-color: #c94a4f !important;
  border-radius: 2px !important;
  background: #fdebec !important;
  color: #7a0f14 !important;
}

body.ui-window-design :is(.planning-assistant-ready, .okbox, .route-preview-status) {
  border-color: #58a96b !important;
  border-radius: 2px !important;
  background: #e9f7ed !important;
  color: #245f32 !important;
}

body.ui-window-design :is(.planning-assistant-circulation, .warnbox) {
  border-color: #d99a35 !important;
  border-radius: 2px !important;
  background: #fff5de !important;
  color: #68440b !important;
}

/* Fahrplan-, Aktivitäts- und Verwaltungsbereiche. */
body.ui-window-design :is(
  .schedule-edit-layout,
  .schedule-form-scroll,
  .schedule-side,
  .schedule-timeline-pane,
  .schedule-facts,
  .wayline,
  .activity-trip-preview,
  .activity-trip-summary,
  .admin-card-grid,
  .admin-grid,
  .admin-list,
  .admin-toolbar,
  .wiki-layout,
  .wiki-nav,
  .wiki-editor,
  .shop-section,
  .shop-cart
) {
  border-color: #bbbbbb !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
}

body.ui-window-design :is(
  .route-choice,
  .route-choice-card,
  .schedule-route-choice-card,
  .side-item,
  .stop-chip,
  .selected-stops,
  .activity-trip-summary > div
) {
  border-color: #bbbbbb !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

body.ui-window-design :is(.route-choice, .route-choice-card, .schedule-route-choice-card).active,
body.ui-window-design :is(.route-choice, .route-choice-card, .schedule-route-choice-card):hover {
  border-color: var(--preview-red) !important;
  background: #fff4f4 !important;
}

body.ui-window-design .way-stop i,
body.ui-window-design .way-stop i::after,
body.ui-window-design .route-profile-dot {
  border-color: var(--preview-blue) !important;
  background-color: var(--preview-blue) !important;
}

body.ui-window-design .way-stop i {
  background: #ffffff !important;
}

body.ui-window-design :is(
  .admin-toolbar,
  .admin-actions,
  .admin-table-actions,
  .contract-card-actions,
  .shop-acquire-controls
) {
  border-color: #cccccc !important;
  background: #f5f5f5 !important;
}

body.ui-window-design .schedule-actions {
  flex-wrap: nowrap !important;
  gap: 3px !important;
  border: 0 !important;
  background: transparent !important;
}

body.ui-window-design .schedule-actions .schedule-icon-action {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button,
body.ui-window-design.dark-mode:not(.view-maponly) #locoList .depot-locate-button {
  border-color: #16833b !important;
  background: #20a64b !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .24) !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button:hover,
body.ui-window-design.dark-mode:not(.view-maponly) #locoList .depot-locate-button:hover {
  border-color: #116b31 !important;
  background: #17883d !important;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28) !important;
}

body.ui-window-design #multiplayerModal .create-company-entry .entry-icon {
  border-color: rgb(30, 106, 47) !important;
  background: rgb(30, 106, 47) !important;
  background-image: none !important;
}

body.ui-window-design .global-search-location-marker {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
  animation: global-search-marker-pulse 1.15s ease-in-out infinite;
}

body.ui-window-design .global-search-location-label {
  border: 1px solid #8f161c !important;
  border-radius: 2px !important;
  background: #d52a31 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .32) !important;
}

body.ui-window-design .global-search-location-label::before {
  border-top-color: #d52a31 !important;
}

@keyframes global-search-marker-pulse {
  0%,
  100% {
    stroke-width: 3;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
  }
  50% {
    stroke-width: 5;
    filter: drop-shadow(0 0 7px rgba(213, 42, 49, .9));
  }
}

/* Profil und Chat. */
body.ui-window-design #profileModal :is(.profile-card, .profile-box, .profile-stat-grid > div) {
  border-color: #bbbbbb !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

body.ui-window-design #profileModal .profile-identity {
  background: linear-gradient(180deg, #d52a31 0%, #b91820 100%) !important;
  color: #ffffff !important;
}

body.ui-window-design #profileModal .profile-avatar {
  border-color: #ffffff !important;
  background: #ffffff !important;
  color: var(--preview-red) !important;
}

body.ui-window-design #profileModal .profile-danger {
  border-color: #c94a4f !important;
  background: #fdebec !important;
  color: #7a0f14 !important;
}

body.ui-window-design :is(.company-chat-messages, .company-chat-form) {
  border-color: #cccccc !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
}

body.ui-window-design .company-chat-fab {
  border-color: #a7181e !important;
  background: linear-gradient(180deg, #df3a41 0%, #be1f27 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28) !important;
}

/* Login: gleiche Zweiteilung, aber exakt die visuelle Sprache der Vorlage. */
html body.auth-locked {
  background: #c6b79d !important;
}

html body.auth-locked #loginModal {
  padding: 20px !important;
  background:
    linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .25)),
    radial-gradient(circle at 25% 15%, #f5ead2 0%, #ded2b9 35%, #c6b79d 100%) !important;
  backdrop-filter: none !important;
}

html body.auth-locked .auth-backdrop {
  background: #c6b79d !important;
}

html body.auth-locked .auth-backdrop::before {
  background: rgba(255, 255, 255, .06) !important;
}

html body.auth-locked .auth-map-shell {
  filter: sepia(.18) saturate(.72) brightness(.94) !important;
  opacity: .28 !important;
}

html body.ui-window-design.auth-locked #loginModal .login-card,
html body.auth-locked #loginModal .login-card {
  width: min(980px, 96vw) !important;
  height: min(700px, calc(100dvh - 40px)) !important;
  max-width: 980px !important;
  max-height: calc(100dvh - 40px) !important;
  padding: 0 !important;
  border: 1px solid #999999 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .38) !important;
}

html body.auth-locked .login-brand-panel {
  background:
    linear-gradient(135deg, rgba(160, 18, 25, .96), rgba(198, 31, 39, .88)),
    linear-gradient(45deg, #555555, #222222) !important;
  color: #ffffff !important;
}

html body.auth-locked .login-brand-panel::before,
html body.auth-locked .login-brand-panel::after {
  opacity: .24 !important;
}

html body.auth-locked .login-logo-frame {
  border: 1px solid rgba(255, 255, 255, .46) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28) !important;
}

html body.auth-locked .login-logo-frame img {
  border-radius: 3px !important;
}

html body.auth-locked :is(.login-brand-kicker, .login-auth-kicker) {
  color: #ffffff !important;
  letter-spacing: .08em !important;
}

html body.auth-locked .login-brand-panel h1 {
  color: #ffffff !important;
  font-size: 34px !important;
  letter-spacing: 0 !important;
}

html body.auth-locked .login-brand-copy {
  color: #ffffff !important;
  font-size: 15px !important;
}

html body.auth-locked .login-brand-features span {
  color: #ffffff !important;
}

html body.auth-locked .login-brand-features i {
  color: #ffffff !important;
}

html body.auth-locked #loginModal :is(.login-auth-panel, .login-auth-panel > .modal-head, .login-form) {
  background: #ffffff !important;
  color: var(--preview-text) !important;
}

html body.auth-locked #loginModal .login-auth-panel > .modal-head {
  border: 0 !important;
  background: #ffffff !important;
}

html body.auth-locked #loginModal :is(#loginTitle, .login-field-label, .auth-pane > label) {
  color: var(--preview-text) !important;
}

html body.auth-locked #loginModal #loginSubtitle {
  color: var(--preview-muted) !important;
}

html body.auth-locked #loginModal .auth-tabs {
  border: 1px solid #bbbbbb !important;
  border-radius: 0 !important;
  background: #e8e8e8 !important;
}

html body.ui-window-design.auth-locked #loginModal .auth-tabs button,
html body.auth-locked #loginModal .auth-tabs button {
  border: 0 !important;
  border-radius: 0 !important;
  background: #e8e8e8 !important;
  color: var(--preview-text) !important;
  box-shadow: none !important;
}

html body.ui-window-design.auth-locked #loginModal .auth-tabs button.active,
html body.auth-locked #loginModal .auth-tabs button.active {
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: inset 0 3px var(--preview-red) !important;
}

html body.ui-window-design.auth-locked #loginModal :is(
  input[type="text"],
  input[type="email"],
  input[type="password"]
),
html body.auth-locked #loginModal :is(
  input[type="text"],
  input[type="email"],
  input[type="password"]
) {
  min-height: 38px !important;
  border: 1px solid #aaaaaa !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: var(--preview-text) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06) !important;
}

html body.auth-locked #loginModal :is(
  input[type="text"],
  input[type="email"],
  input[type="password"]
):focus {
  border-color: var(--preview-blue) !important;
  box-shadow: 0 0 0 2px rgba(45, 131, 197, .18) !important;
}

html body.auth-locked #loginModal .login-theme-toggle {
  border: 1px solid #aaaaaa !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #ffffff, #e5e5e5) !important;
  color: var(--preview-text) !important;
}

html body.auth-locked #loginModal .login-primary-action {
  border: 1px solid #a7181e !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #df3a41 0%, #be1f27 100%) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body.auth-locked #loginModal .login-primary-action:hover {
  background: linear-gradient(180deg, #cf3037 0%, #a5161d 100%) !important;
}

html body.auth-locked #loginModal .login-link-action {
  color: var(--preview-red) !important;
}

html body.auth-locked #loginModal .login-version {
  border: 1px solid #cccccc !important;
  border-radius: 2px !important;
  background: #f5f5f5 !important;
  color: var(--preview-muted) !important;
}

html body.auth-locked #loginModal #loginHint:not(:empty) {
  border: 1px solid #c94a4f !important;
  border-radius: 2px !important;
  background: #fdebec !important;
  color: #7a0f14 !important;
}

/* Darkmode der Vorlage: neutraler Anthrazitstil mit denselben Statusfarben. */
html body.ui-window-design.dark-mode {
  --preview-page: #15181c;
  --preview-panel: #1e2227;
  --preview-head: #2a2f35;
  --preview-head-bottom: #24292e;
  --preview-control: #2b3036;
  --preview-border: #4a4f55;
  --preview-border-strong: #565b61;
  --preview-text: #e7e9ec;
  --preview-muted: #aeb4bb;
  --preview-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  background: #15181c !important;
  color: var(--preview-text) !important;
  color-scheme: dark;
}

html body.ui-window-design.dark-mode:not(.view-maponly) .topbar {
  border-bottom-color: #5e0d11 !important;
  background: linear-gradient(180deg, #9b1a20 0%, #721116 100%) !important;
}

body.ui-window-design.dark-mode .layout.map-stage {
  background: #15181c !important;
}

html body.ui-window-design.dark-mode :is(
  .panel,
  .floating-window,
  .side-panel,
  .planning-side-panel,
  .company-chat-panel,
  .inline-loco-planner,
  .loco-planner,
  .modal-card,
  .game-dialog-card,
  .page-confirmation-card,
  .vehicle-purchase-popup,
  .shop-image-dialog
) {
  border-color: #50555b !important;
  background: #1e2227 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(
  .panel-head,
  .sub-head,
  .section-head,
  .section-title,
  .table-head,
  .archive-head,
  .personnel-pane-head,
  .personnel-section-head,
  .track-rental-section-head,
  thead,
  th
) {
  border-color: #50555b !important;
  background: linear-gradient(180deg, #2d3238 0%, #24292e 100%) !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(
  .panel-body,
  .depot-layout,
  .sites-layout,
  .schedule-view,
  .contracts-layout,
  .notification-list,
  .planning-pane,
  .planning-side-pane,
  .modal-body,
  .modal-content,
  .modal-activity-form,
  .order-box,
  .admin-editor,
  .admin-settings-panel,
  .track-rental-body,
  .track-rental-new-body,
  .country-skill-modal-body,
  .wiki-content,
  .profile-grid
) {
  background-color: #1e2227 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(input, select, textarea) {
  border-color: #565b61 !important;
  background: #15191d !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(
  button,
  .secondary,
  .secondary-button,
  .icon-button,
  .small-action,
  .plus-button
) {
  border-color: #565b61;
  background: #2b3036;
  color: var(--preview-text);
}

body.ui-window-design.dark-mode :is(
  .window-tabs,
  .admin-tabs,
  .shop-tabs,
  .personnel-overview-tabs,
  .track-rental-overview-tabs,
  .site-modal-tabs,
  .planning-side-tabs,
  .auth-tabs,
  .window-tab,
  .admin-tab,
  .shop-tab,
  .tab-button,
  .planning-side-tab,
  .personnel-overview-tabs button,
  .track-rental-overview-tabs button,
  .site-modal-tabs button,
  .auth-tabs button
) {
  border-color: #50555b !important;
  background: #2b3036 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(
  .window-tab.active,
  .admin-tab.active,
  .shop-tab.active,
  .tab-button.active,
  .planning-side-tab.active,
  .personnel-overview-tabs button.active,
  .track-rental-overview-tabs button.active,
  .site-modal-tabs button.active,
  .auth-tabs button.active
) {
  background: #353a40 !important;
}

body.ui-window-design.dark-mode :is(
  .loco,
  .wagon-item,
  .site-card,
  .schedule-card,
  .contract-card,
  .notification-item,
  .shop-card,
  .vehicle-card,
  .wagon-card,
  .car-card,
  .fleet-item,
  .personnel-card,
  .personnel-offer-card,
  .activity-card,
  .company-card,
  .company-member,
  .admin-box,
  .admin-data-card,
  .admin-vehicle-card,
  .admin-rank-card,
  .admin-user-card,
  .admin-track-card,
  .track-rental-offer,
  .track-rental-list-item,
  .hotel-offer,
  .route-choice-card,
  .schedule-route-choice-card,
  .side-item,
  .section,
  .activity-form-section,
  .profile-box,
  .profile-card,
  .account-card,
  .admin-edit-section,
  .training-form-card,
  .training-list-card,
  .training-settings-card,
  .schedule-detail-box
) {
  border-color: #50555b !important;
  background: #252a30 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(
  .contract-card-head,
  .schedule-card-head,
  .shop-cart-head,
  .admin-card-content,
  .admin-user-summary,
  .planning-side-wagon-head,
  .activity-trip-preview-head
) {
  border-color: #50555b !important;
  background: #2a2f35 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(
  .contract-facts,
  .schedule-card-facts,
  .contract-detail-facts,
  .schedule-detail-grid,
  .profile-stat-grid,
  .admin-user-stats,
  .planning-assistant-personnel > div,
  .planning-assistant-schedules,
  .planning-assistant-metrics,
  .planning-assistant-trip-controls,
  .planning-assistant-preview > div,
  .planning-assistant-times button,
  .planning-assistant-steps > div,
  .planning-assistant-wagons label
) {
  border-color: #50555b !important;
  background: #252a30 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(table, tbody tr, td) {
  border-color: #3f444a !important;
  background: #1e2227 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode tbody tr:nth-child(even) {
  background: #20252a !important;
}

body.ui-window-design.dark-mode tbody tr:hover {
  background: #30353b !important;
}

body.ui-window-design.dark-mode :is(
  .planning-toolbar,
  .lp-toolbar,
  .planning-side-controls,
  .lp-timeline,
  .lp-resource-list,
  .lp-resource,
  .planning-pane,
  .planning-side-list,
  .planning-side-loco,
  .planning-side-activity,
  .planning-side-contract,
  .planning-side-contract-card,
  .planning-side-schedule,
  .planning-side-track,
  .planning-side-wagon,
  .planning-side-unplanned,
  .schedule-edit-layout,
  .schedule-form-scroll,
  .schedule-side,
  .schedule-timeline-pane,
  .schedule-facts,
  .wayline,
  .activity-trip-preview,
  .activity-trip-summary,
  .admin-card-grid,
  .admin-grid,
  .admin-list,
  .admin-toolbar,
  .wiki-layout,
  .wiki-nav,
  .wiki-editor,
  .shop-section,
  .shop-cart
) {
  border-color: #50555b !important;
  background: #22272d !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode #locoPlanningPanel {
  border-color: #50555b !important;
  background: #1e2227 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode .planning-assistant-body {
  background: #15181c !important;
}

body.ui-window-design.dark-mode :is(
  .planning-assistant-toolbar,
  .planning-assistant-summary,
  .planning-assistant-columns > section,
  .planning-assistant-review
) {
  border-color: #50555b !important;
  background: #1e2227 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(
  .modal-actions,
  .modal-footer,
  .activity-modal-footer,
  .game-dialog-actions,
  .page-confirmation-actions,
  .admin-track-footer,
  .admin-fuel-footer
) {
  border-color: #50555b !important;
  background: #2a2f35 !important;
}

body.ui-window-design.dark-mode :is(.search-results, .picker-results, .stop-suggestion-list) {
  border-color: #565b61 !important;
  background: #252a30 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(.result, .picker-result) {
  border-color: #40454b !important;
  background: #252a30 !important;
}

body.ui-window-design.dark-mode :is(.result, .picker-result):hover {
  background: #353a40 !important;
}

body.ui-window-design.dark-mode :is(
  .leaflet-control-zoom a,
  .map-layer-toggle,
  .map-layer-panel,
  .leaflet-popup-content-wrapper,
  .leaflet-popup-tip,
  .contract-map-popup,
  .admin-place-map-popup-shell
) {
  border-color: #50555b !important;
  background: #252a30 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode .map-layer-row {
  border-color: #40454b !important;
  background: #252a30 !important;
  color: var(--preview-text) !important;
}

body.ui-window-design.dark-mode :is(.planning-assistant-conflict, .activity-warning, .schedule-detail-warning) {
  border-color: #9e3237 !important;
  background: #3a1f22 !important;
  color: #ffc4c7 !important;
}

body.ui-window-design.dark-mode :is(.planning-assistant-ready, .okbox, .route-preview-status) {
  border-color: #3c7a4a !important;
  background: #1d3826 !important;
  color: #bce8c7 !important;
}

body.ui-window-design.dark-mode :is(.planning-assistant-circulation, .warnbox) {
  border-color: #8c682f !important;
  background: #3a2d17 !important;
  color: #f5d99c !important;
}

html body.auth-locked.dark-mode {
  background: #101214 !important;
}

html body.auth-locked.dark-mode #loginModal {
  background: radial-gradient(circle at 25% 15%, #242424 0%, #17191c 55%, #101214 100%) !important;
}

html body.auth-locked.dark-mode .auth-backdrop {
  background: #101214 !important;
}

html body.auth-locked.dark-mode #loginModal .login-card {
  border-color: #50555b !important;
  background: #22272d !important;
}

html body.auth-locked.dark-mode #loginModal :is(.login-auth-panel, .login-auth-panel > .modal-head, .login-form) {
  background: #22272d !important;
  color: var(--preview-text) !important;
}

html body.auth-locked.dark-mode #loginModal :is(#loginTitle, .login-field-label, .auth-pane > label) {
  color: var(--preview-text) !important;
}

html body.auth-locked.dark-mode #loginModal .auth-tabs {
  border-color: #50555b !important;
  background: #2c3137 !important;
}

html body.auth-locked.dark-mode #loginModal .auth-tabs button {
  background: #2c3137 !important;
  color: var(--preview-text) !important;
}

html body.auth-locked.dark-mode #loginModal .auth-tabs button.active {
  background: #353a40 !important;
}

html body.auth-locked.dark-mode #loginModal :is(input[type="text"], input[type="email"], input[type="password"]) {
  border-color: #565b61 !important;
  background: #15191d !important;
  color: var(--preview-text) !important;
}

html body.auth-locked.dark-mode #loginModal .login-theme-toggle {
  border-color: #565b61 !important;
  background: #2b3036 !important;
  color: var(--preview-text) !important;
}

html body.auth-locked.dark-mode #loginModal .login-version {
  border-color: #50555b !important;
  background: #2a2f35 !important;
  color: var(--preview-muted) !important;
}

/* Lokmarker: Loknummer im Stand, Zugnummer waehrend einer Zugfahrt. */
body.ui-window-design .loco-marker {
  position: relative !important;
  overflow: visible !important;
}

body.ui-window-design .loco-marker .rail-vehicle-marker-label {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  display: block !important;
  width: max-content !important;
  min-width: 36px !important;
  max-width: 108px !important;
  height: auto !important;
  padding: 3px 7px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 6px !important;
  background: #1f67a9 !important;
  box-shadow: 0 2px 5px rgba(8, 18, 29, 0.34) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

body.ui-window-design .loco-marker.running .rail-vehicle-marker-label {
  background: #268940 !important;
}

body.ui-window-design.dark-mode .loco-marker .rail-vehicle-marker-label {
  border-color: #dce3e8 !important;
  color: #fff !important;
}

/* Planung: Die Aktivitaetsart bleibt auf Tafel und Seitenleiste farblich erkennbar. */
body.ui-window-design :is(.lp-activity, .planning-side-activity).lp-inspection {
  background: #8b5cf6 !important;
  border-color: #6d3fd1 !important;
}

body.ui-window-design :is(.lp-activity, .planning-side-activity).lp-brake {
  background: #f59e0b !important;
  border-color: #c77b04 !important;
}

body.ui-window-design :is(.lp-activity, .planning-side-activity).lp-shunt {
  background: #a16207 !important;
  border-color: #754604 !important;
}

body.ui-window-design :is(.lp-activity, .planning-side-activity).lp-cargo {
  background: #10b981 !important;
  border-color: #087d58 !important;
}

body.ui-window-design :is(.lp-activity, .planning-side-activity).lp-fuel {
  background: #06a9c5 !important;
  border-color: #05768a !important;
}

body.ui-window-design :is(.lp-activity, .planning-side-activity).lp-parking {
  background: #475569 !important;
  border-color: #303a49 !important;
}

body.ui-window-design :is(.lp-activity, .planning-side-activity).lp-trip {
  background: #2563eb !important;
  border-color: #1745af !important;
}

body.ui-window-design :is(.lp-activity, .planning-side-activity).lp-training {
  background: #64748b !important;
  border-color: #465364 !important;
}

body.ui-window-design :is(.lp-activity, .planning-side-activity).lp-rest {
  background: #16a34a !important;
  border-color: #0d7133 !important;
}

body.ui-window-design.dark-mode :is(.lp-activity, .planning-side-activity).lp-inspection {
  background: #8b5cf6 !important;
}

body.ui-window-design.dark-mode :is(.lp-activity, .planning-side-activity).lp-brake {
  background: #d99108 !important;
}

body.ui-window-design.dark-mode :is(.lp-activity, .planning-side-activity).lp-shunt {
  background: #a66b08 !important;
}

body.ui-window-design.dark-mode :is(.lp-activity, .planning-side-activity).lp-cargo {
  background: #159b6f !important;
}

body.ui-window-design.dark-mode :is(.lp-activity, .planning-side-activity).lp-fuel {
  background: #078fa8 !important;
}

body.ui-window-design.dark-mode :is(.lp-activity, .planning-side-activity).lp-parking {
  background: #526176 !important;
}

body.ui-window-design.dark-mode :is(.lp-activity, .planning-side-activity).lp-trip {
  background: #3478dc !important;
}

body.ui-window-design.dark-mode :is(.lp-activity, .planning-side-activity).lp-training {
  background: #697a90 !important;
}

body.ui-window-design.dark-mode :is(.lp-activity, .planning-side-activity).lp-rest {
  background: #218f48 !important;
}

/* Depot: kompakte, flache Fahrzeugzeilen passend zum Leitstellen-Design. */
body.ui-window-design:not(.view-maponly) .depot-filter-bar {
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) minmax(92px, 112px) auto !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 7px !important;
  border-bottom: 1px solid #cccccc !important;
  background: #f5f5f5 !important;
}

body.ui-window-design:not(.view-maponly) .depot-filter-bar :is(input, select) {
  width: 100% !important;
  min-width: 0 !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 4px 7px !important;
  border: 1px solid #bbbbbb !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: #333333 !important;
  font-size: 11px !important;
  box-shadow: none !important;
}

body.ui-window-design:not(.view-maponly) .depot-filter-bar :is(input, select):focus {
  border-color: #8f161c !important;
  outline: 1px solid #8f161c !important;
  outline-offset: 0 !important;
}

body.ui-window-design:not(.view-maponly) .depot-filter-results {
  min-width: 48px !important;
  color: #666666 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body.ui-window-design:not(.view-maponly) .depot-filter-empty {
  padding: 22px 12px !important;
  border: 1px dashed #bbbbbb !important;
  border-radius: 2px !important;
  background: #f8f8f8 !important;
  color: #666666 !important;
  font-size: 11px !important;
  text-align: center !important;
}

body.ui-window-design:not(.view-maponly) #locoList {
  gap: 5px !important;
  padding: 6px 7px 10px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .loco.depot-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(80px, 94px) !important;
  gap: 8px !important;
  min-height: 68px !important;
  padding: 8px !important;
  border: 1px solid #bbbbbb !important;
  border-left: 4px solid #38a852 !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ui-window-design:not(.view-maponly) #locoList .loco.depot-row:hover {
  border-color: #9ea4aa !important;
  border-left-color: #2f9147 !important;
  background: #f7f7f7 !important;
}

body.ui-window-design:not(.view-maponly) #locoList .loco.depot-row::before {
  display: none !important;
}

body.ui-window-design:not(.view-maponly) #locoList .wagon-item.depot-row {
  border-left-color: #b45309 !important;
  background: #ffffff !important;
  background-image: none !important;
}

body.ui-window-design:not(.view-maponly) #locoList .wagon-item.depot-row:hover {
  border-left-color: #92400e !important;
}

body.ui-window-design:not(.view-maponly) #locoList .car-item.depot-row {
  border-left-color: #2d83c5 !important;
  background: #ffffff !important;
  background-image: none !important;
}

body.ui-window-design:not(.view-maponly) #locoList .car-item.depot-row:hover {
  border-left-color: #20679d !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button,
body.ui-window-design.dark-mode:not(.view-maponly) #locoList .depot-locate-button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  flex-basis: 32px !important;
  border-color: #16833b !important;
  background: #20a64b !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button::before {
  width: 16px !important;
  height: 16px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button::after {
  inset: 6px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-main {
  gap: 4px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-vehicle-name {
  gap: 6px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-vehicle-name strong {
  color: #333333 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-vehicle-name small {
  padding: 2px 5px !important;
  border: 1px solid #d2d2d2 !important;
  border-radius: 2px !important;
  background: #eeeeee !important;
  color: #666666 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-status {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #666666 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-metrics {
  gap: 4px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-metrics span {
  min-height: 24px !important;
  padding: 4px 6px !important;
  border: 1px solid #dddddd !important;
  border-radius: 2px !important;
  background: #f8f8f8 !important;
  color: #333333 !important;
  font-size: 10px !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-fuel {
  border-color: #cfe4d5 !important;
  background: #f1f8f3 !important;
  color: #27723b !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .loco.depot-row,
body.ui-window-design.dark-mode:not(.view-maponly) #locoList .wagon-item.depot-row {
  border-color: #50555b !important;
  border-left-color: #2f8f46 !important;
  background: #252a30 !important;
  background-image: none !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .wagon-item.depot-row {
  border-left-color: #a96b27 !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .car-item.depot-row {
  border-left-color: #2a6fa6 !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .loco.depot-row:hover {
  border-color: #676d73 !important;
  border-left-color: #38a852 !important;
  background: #2b3036 !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .wagon-item.depot-row:hover {
  border-left-color: #c17a2d !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .car-item.depot-row:hover {
  border-left-color: #3b8ac5 !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .depot-vehicle-name strong {
  color: #e7e9ec !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .depot-vehicle-name small {
  border-color: #50555b !important;
  background: #2b3036 !important;
  color: #c4c9cf !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .depot-status {
  border: 0 !important;
  background: transparent !important;
  color: #aeb4bb !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .depot-metrics span {
  border-color: #50555b !important;
  background: #2b3036 !important;
  color: #e7e9ec !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) #locoList .depot-fuel {
  border-color: #3c6748 !important;
  background: #263c2c !important;
  color: #bce8c7 !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) .depot-filter-bar {
  border-color: #50555b !important;
  background: #2b3036 !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) .depot-filter-bar :is(input, select) {
  border-color: #565b61 !important;
  background: #15191d !important;
  color: #e7e9ec !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) .depot-filter-results {
  color: #aeb4bb !important;
}

body.ui-window-design.dark-mode:not(.view-maponly) .depot-filter-empty {
  border-color: #50555b !important;
  background: #252a30 !important;
  color: #aeb4bb !important;
}

/* Round PKW map markers with a readable license-plate label. */
.car-marker,
.car-marker.running {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background: #2479b8 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .32) !important;
  transform: none !important;
  overflow: visible !important;
}

.car-marker.running {
  background: #239548 !important;
}

.car-marker span {
  transform: none !important;
}

.car-marker .car-marker-icon {
  display: block !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .2px !important;
}

.car-marker .car-marker-label {
  position: absolute !important;
  top: 35px !important;
  left: 50% !important;
  min-width: max-content !important;
  padding: 2px 5px !important;
  border: 1px solid #1b4f77 !important;
  border-radius: 4px !important;
  background: #153955 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .28) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: .25px !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
}

#shopModal .shop-license-plates {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 7px !important;
  margin-top: 7px !important;
  padding-top: 7px !important;
  border-top: 1px solid #dbe7f3 !important;
}

#shopModal .shop-license-plate-field {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#shopModal .shop-license-plate-field > span {
  color: #334155 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

#shopModal .shop-license-plate-input {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border: 1px solid #91a4b8 !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: #172033 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
}

#shopModal .shop-license-plate-input:focus {
  border-color: #239548 !important;
  outline: 2px solid rgba(35, 149, 72, .2) !important;
  outline-offset: 0 !important;
}

#shopModal .shop-license-plate-input.invalid:not(:placeholder-shown) {
  border-color: #c92f3d !important;
  background: #fff6f7 !important;
}

#shopModal .shop-license-plate-error {
  min-height: 12px !important;
  color: #b62332 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

#shopModal .shop-license-plate-hint {
  grid-column: 1 / -1 !important;
  color: #64748b !important;
  font-size: 9px !important;
  line-height: 1.3 !important;
}

body.dark-mode #shopModal .shop-license-plates {
  border-top-color: #334155 !important;
}

body.dark-mode #shopModal .shop-license-plate-field > span {
  color: #d8dee8 !important;
}

body.dark-mode #shopModal .shop-license-plate-input {
  border-color: #505c6d !important;
  background: #0f1724 !important;
  color: #f3f6fa !important;
}

body.dark-mode #shopModal .shop-license-plate-input.invalid:not(:placeholder-shown) {
  border-color: #ef6572 !important;
  background: #321b21 !important;
}

body.dark-mode #shopModal .shop-license-plate-error {
  color: #ff9aa3 !important;
}

body.dark-mode #shopModal .shop-license-plate-hint {
  color: #9aa7b7 !important;
}

/* One compact marker for several standing vehicles at the same operating point. */
.vehicle-group-marker {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-content: center !important;
  gap: 0 !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background: #167f3b !important;
  color: #ffffff !important;
  box-shadow: 0 2px 9px rgba(0, 0, 0, .36) !important;
  text-align: center !important;
}

.vehicle-group-marker strong {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.vehicle-group-marker span {
  margin-top: 2px !important;
  color: rgba(255, 255, 255, .9) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .5px !important;
}

.vehicle-group-popup {
  min-width: 280px;
  color: #26313c;
}

.vehicle-group-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 9px;
  border-bottom: 1px solid #d9e0e6;
}

.vehicle-group-popup-head strong {
  color: #17212b;
  font-size: 13px;
  font-weight: 900;
}

.vehicle-group-popup-head span {
  color: #267840;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.vehicle-group-popup ul {
  max-height: 280px;
  margin: 0;
  padding: 7px 0 0;
  list-style: none;
  overflow: auto;
}

.vehicle-group-popup-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 2px;
  border-bottom: 1px solid #edf0f3;
}

.vehicle-group-popup-row:last-child {
  border-bottom: 0;
}

.vehicle-group-popup-badge {
  padding: 3px 4px;
  border-radius: 3px;
  background: #2877af;
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.vehicle-group-popup-badge.kind-wagon {
  background: #a76622;
}

.vehicle-group-popup-badge.kind-car {
  background: #167f72;
}

.vehicle-group-popup-details {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vehicle-group-popup-details strong {
  overflow: hidden;
  color: #1f2933;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-group-popup-details small {
  color: #69737d;
  font-size: 9px;
  line-height: 1.25;
}

@media (max-width: 900px) {
  body.ui-window-design :is(input, select, textarea, button) {
    min-height: 38px;
  }
}

@media (max-width: 480px) {
  html body.auth-locked #loginModal {
    padding: 0 !important;
  }

  html body.auth-locked #loginModal .login-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}
.planning-assistant-staff-strategy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .48fr);
  gap: 8px;
  padding: 10px;
  margin-bottom: 9px;
  border: 1px solid #cad4df;
  border-radius: 8px;
  background: #f3f7f4;
}

.planning-assistant-staff-strategy > small {
  grid-column: 1 / -1;
  color: #526252;
  line-height: 1.35;
}

.planning-assistant-personnel input:disabled + span {
  opacity: .5;
}

.admin-wagon-number-ranges {
  display: grid;
  gap: 7px;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #cad4df;
  border-radius: 8px;
  background: #f7f9f7;
}

.admin-wagon-number-ranges small {
  color: #667085;
}

body.dark-mode .planning-assistant-staff-strategy,
body.dark-mode .admin-wagon-number-ranges {
  border-color: #35483c;
  background: #16221b;
}

body.dark-mode .planning-assistant-staff-strategy > small,
body.dark-mode .admin-wagon-number-ranges small {
  color: #a8b7ad;
}

@media (max-width: 720px) {
  .planning-assistant-staff-strategy {
    grid-template-columns: 1fr;
  }

  .planning-assistant-staff-strategy > small {
    grid-column: auto;
  }
}
.tutorial-launch {
  position: relative;
  color: #fff !important;
  background: #176d3b !important;
  border-color: #23894f !important;
}

.tutorial-launch::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(74, 222, 128, .55);
  border-radius: inherit;
  animation: tutorial-launch-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tutorial-launch-pulse {
  0%, 100% { opacity: .25; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.08); }
}

.tutorial-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: none;
  overflow: hidden;
  padding: 0 !important;
  background: transparent !important;
  pointer-events: auto;
}

.tutorial-modal.open {
  display: block !important;
}

.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 9, 14, .22);
  backdrop-filter: blur(1.5px);
}

.tutorial-spotlight {
  position: fixed;
  z-index: 1;
  border: 2px solid #48d17e;
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(5, 9, 14, .74),
    0 0 0 5px rgba(72, 209, 126, .14),
    0 0 30px rgba(72, 209, 126, .52);
  transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease, opacity .2s ease;
  pointer-events: none;
}

.tutorial-spotlight::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 17px;
}

.tutorial-spotlight-hidden {
  opacity: 0;
}

.tutorial-target-active {
  position: relative;
  z-index: 12001 !important;
}

.tutorial-card {
  position: fixed;
  z-index: 3;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  width: min(470px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  color: #17211b;
  border: 1px solid #aab8ae;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(239, 246, 241, .98)),
    #f7faf8;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .44), 0 0 0 1px rgba(255, 255, 255, .55) inset;
  transition: left .28s ease, top .28s ease;
  pointer-events: auto;
}

.tutorial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c8102e, #f04438 35%, #48d17e 35%, #187541);
}

.tutorial-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px 11px;
}

.tutorial-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.tutorial-brand > span:last-child {
  display: grid;
  min-width: 0;
}

.tutorial-brand-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, #178048, #0e5932);
  box-shadow: 0 8px 18px rgba(23, 128, 72, .26);
  font-size: 20px;
}

.tutorial-brand small {
  color: #6a756e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.tutorial-brand strong {
  overflow: hidden;
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.16;
  text-overflow: ellipsis;
}

.tutorial-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #4f5c54;
  border: 1px solid #cfd8d2;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  font-size: 21px;
  line-height: 1;
}

.tutorial-close:hover {
  color: #fff;
  border-color: #b20d27;
  background: #c8102e;
}

.tutorial-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 9px;
}

.tutorial-progress-track {
  height: 5px;
  flex: 1;
  overflow: hidden;
  border-radius: 999px;
  background: #dce5df;
}

.tutorial-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c8102e, #ef4444 45%, #18a65d);
  transition: width .28s ease;
}

.tutorial-progress-row > strong {
  color: #526158;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tutorial-mission {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 18px 10px;
  padding: 8px 10px;
  color: #245034;
  border: 1px solid #b9ddc5;
  border-radius: 8px;
  background: #e9f7ee;
  font-size: 11px;
}

.tutorial-mission span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tutorial-mission-score {
  color: #5f6f64;
  white-space: nowrap;
}

.tutorial-body {
  min-height: 0;
  overflow: auto;
  padding: 0 18px 10px;
  scrollbar-width: thin;
}

.tutorial-lead {
  margin: 0 0 11px;
  color: #3f4b43;
  font-size: 13px;
  line-height: 1.5;
}

.tutorial-bullets {
  display: grid;
  gap: 6px;
  margin-top: 11px;
}

.tutorial-bullets span {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #435148;
  font-size: 11px;
  line-height: 1.35;
}

.tutorial-bullets i {
  margin-top: 1px;
  color: #168149;
}

.tutorial-chapter-nav {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 6px 18px 10px;
}

.tutorial-chapter-nav button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #b8c4bc;
  transition: width .2s ease, background .2s ease;
}

.tutorial-chapter-nav button.active {
  width: 22px;
  background: #168149;
}

.tutorial-card-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid #d7e0da;
  background: rgba(243, 248, 245, .88);
}

.tutorial-card-actions button {
  min-height: 34px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.tutorial-secondary {
  color: #304038;
  border: 1px solid #b9c6be;
  background: #fff;
}

.tutorial-link {
  justify-self: start;
  color: #66736b;
  border: 0;
  background: transparent;
}

.tutorial-primary {
  min-width: 112px;
  color: #fff;
  border: 1px solid #116b3c;
  background: linear-gradient(180deg, #21a861, #167a46);
  box-shadow: 0 6px 15px rgba(22, 122, 70, .22);
}

.tutorial-primary:hover {
  background: linear-gradient(180deg, #2abd6f, #198b4f);
}

.tutorial-safety-badge {
  position: fixed;
  left: 50%;
  bottom: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  color: #d8f5e3;
  border: 1px solid rgba(72, 209, 126, .45);
  border-radius: 999px;
  background: rgba(8, 25, 16, .88);
  box-shadow: 0 7px 25px rgba(0, 0, 0, .28);
  font-size: 10px;
  font-weight: 700;
  transform: translateX(-50%);
}

.tutorial-hero-visual,
.tutorial-control-demo,
.tutorial-map-demo,
.tutorial-contract-demo,
.tutorial-schedule-demo,
.tutorial-consist-demo,
.tutorial-site-demo,
.tutorial-timeline-demo,
.tutorial-ai-demo,
.tutorial-operation-flow,
.tutorial-duty-demo,
.tutorial-type-grid,
.tutorial-progress-demo,
.tutorial-multiplayer-demo,
.tutorial-help-demo,
.tutorial-finish-demo {
  position: relative;
  overflow: hidden;
  border: 1px solid #cbd7cf;
  border-radius: 11px;
  background: linear-gradient(145deg, #f8fbf9, #eaf1ed);
}

.tutorial-hero-visual {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  min-height: 98px;
  padding: 14px;
  background:
    radial-gradient(circle at 15% 50%, rgba(33, 168, 97, .15), transparent 30%),
    linear-gradient(145deg, #f8fbf9, #eaf1ed);
}

.tutorial-hero-route {
  position: absolute;
  left: 23px;
  right: 23px;
  bottom: 17px;
  height: 3px;
  background: #c8102e;
}

.tutorial-hero-route span {
  position: absolute;
  top: -4px;
  width: 11px;
  height: 11px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #c8102e;
  box-shadow: 0 0 0 1px #c8102e;
}

.tutorial-hero-route span:nth-child(1) { left: 0; }
.tutorial-hero-route span:nth-child(2) { left: 32%; }
.tutorial-hero-route span:nth-child(3) { left: 66%; }
.tutorial-hero-route span:nth-child(4) { right: 0; }

.tutorial-demo-train {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 66px;
  height: 56px;
  color: #fff;
  border-radius: 12px 12px 7px 7px;
  background: linear-gradient(145deg, #d8233e, #9f0c23);
  box-shadow: 0 9px 18px rgba(200, 16, 46, .22);
  font-size: 28px;
}

.tutorial-hero-copy {
  z-index: 1;
  display: grid;
  gap: 4px;
}

.tutorial-hero-copy b { font-size: 14px; }
.tutorial-hero-copy span { color: #5a685f; font-size: 11px; line-height: 1.35; }

.tutorial-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 8px;
}

.tutorial-choice-grid button {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 76px;
  padding: 9px 6px;
  color: #46534b;
  border: 1px solid #ccd7d0;
  border-radius: 9px;
  background: #fff;
}

.tutorial-choice-grid button i { color: #168149; font-size: 18px; }
.tutorial-choice-grid button b { font-size: 11px; }
.tutorial-choice-grid button small { color: #6d7a72; font-size: 8px; line-height: 1.25; }
.tutorial-choice-grid button.selected { color: #fff; border-color: #167a46; background: #167a46; }
.tutorial-choice-grid button.selected :is(i, small) { color: #fff; }

.tutorial-control-demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
}

.tutorial-demo-clock { display: grid; }
.tutorial-demo-clock span { color: #68756d; font-size: 10px; }
.tutorial-demo-clock strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.tutorial-demo-speeds { display: flex; gap: 4px; }
.tutorial-demo-speeds b { padding: 8px 9px; color: #6d7971; border: 1px solid #ccd7d0; border-radius: 6px; background: #fff; font-size: 10px; }
.tutorial-demo-speeds b.active { color: #fff; border-color: #c8102e; background: #c8102e; }

.tutorial-map-demo {
  height: 142px;
  background-color: #e6ece8;
  background-image:
    linear-gradient(35deg, transparent 47%, rgba(143, 156, 147, .22) 48%, rgba(143, 156, 147, .22) 51%, transparent 52%),
    linear-gradient(-28deg, transparent 47%, rgba(143, 156, 147, .18) 48%, rgba(143, 156, 147, .18) 51%, transparent 52%);
  background-size: 74px 61px, 91px 72px;
}

.tutorial-map-line {
  position: absolute;
  height: 4px;
  border-radius: 999px;
  background: #ef7a2d;
  transform-origin: left center;
}

.tutorial-map-line.line-a { top: 56px; left: 36px; width: 275px; transform: rotate(7deg); }
.tutorial-map-line.line-b { top: 91px; left: 172px; width: 180px; transform: rotate(-29deg); }
.tutorial-map-pin { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; color: #fff; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 10px rgba(0,0,0,.25); font-style: normal; }
.tutorial-map-pin b { font-size: 8px; }
.tutorial-map-pin.depot { top: 38px; left: 73px; background: #168149; }
.tutorial-map-pin.vehicle { top: 71px; left: 215px; background: #1976d2; }
.tutorial-map-pin.order { top: 27px; right: 57px; background: #ef7a2d; }
.tutorial-map-legend { position: absolute; left: 9px; bottom: 8px; display: flex; gap: 9px; padding: 5px 7px; border-radius: 5px; background: rgba(255,255,255,.88); font-size: 8px; }
.tutorial-map-legend span { display: flex; align-items: center; gap: 4px; }
.tutorial-map-legend i { width: 6px; height: 6px; border-radius: 50%; }
.tutorial-map-legend .green { background:#168149; }.tutorial-map-legend .orange { background:#ef7a2d; }.tutorial-map-legend .blue { background:#1976d2; }

.tutorial-contract-demo { display: grid; gap: 9px; padding: 13px; }
.tutorial-contract-demo header { display: flex; justify-content: space-between; color: #59665e; font-size: 9px; }
.tutorial-contract-demo header span { color: #c8102e; font-weight: 900; letter-spacing: .08em; }
.tutorial-contract-demo > strong { font-size: 14px; }
.tutorial-contract-demo > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.tutorial-contract-demo > div span { display: grid; gap: 2px; padding: 6px; border: 1px solid #d6dfd9; border-radius: 6px; background: #fff; color: #6c786f; font-size: 8px; }
.tutorial-contract-demo > div b { color: #26342b; font-size: 10px; }
.tutorial-contract-demo button { padding: 8px; color:#fff; border:0; border-radius:6px; background:#168149; font-weight:800; font-size:10px; }
.tutorial-contract-demo.accepted button { background:#315c41; }

.tutorial-schedule-demo { padding: 13px; }
.tutorial-schedule-head { display:flex; align-items:center; gap:9px; }
.tutorial-schedule-head b { padding:4px 7px; color:#fff; background:#c8102e; font-size:10px; }
.tutorial-schedule-head span { color:#66736b; font-size:10px; }
.tutorial-route-beam { position:relative; display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; }
.tutorial-route-beam::before { content:""; position:absolute; top:6px; left:12%; right:12%; height:3px; background:linear-gradient(90deg,#168149 33%,#a9b6ae 33%); }
.tutorial-route-beam span { z-index:1; display:grid; justify-items:center; gap:3px; text-align:center; }
.tutorial-route-beam i { width:14px; height:14px; border:3px solid #fff; border-radius:50%; background:#9dab9f; box-shadow:0 0 0 1px #9dab9f; }
.tutorial-route-beam .done i { background:#168149; box-shadow:0 0 0 1px #168149; }
.tutorial-route-beam b { font-size:9px; }.tutorial-route-beam small { color:#77837b; font-size:8px; }

.tutorial-consist-demo { display:grid; gap:10px; padding:12px; }
.tutorial-loco-chip { display:flex; align-items:center; gap:8px; padding:8px; color:#fff; border-radius:7px; background:linear-gradient(90deg,#c8102e,#922039); }
.tutorial-loco-chip i { font-size:19px; }.tutorial-loco-chip b { flex:1; font-size:11px; }.tutorial-loco-chip span { font-size:9px; }
.tutorial-wagon-chain { display:flex; gap:4px; overflow:hidden; }
.tutorial-wagon-chain span { position:relative; display:grid; place-items:center; width:47px; height:30px; flex:0 0 47px; border-radius:4px; background:#42514a; color:#fff; }
.tutorial-wagon-chain span::after { content:""; position:absolute; right:-5px; width:6px; height:3px; background:#42514a; }
.tutorial-wagon-chain i { position:absolute; inset:5px 4px 9px; border:1px solid #8ba095; }
.tutorial-wagon-chain b { z-index:1; font-size:8px; }
.tutorial-consist-actions { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; }
.tutorial-consist-actions button { padding:6px; color:#31513e; border:1px solid #b9c9bf; border-radius:5px; background:#fff; font-size:9px; }
.tutorial-consist-actions strong { text-align:center; font-size:9px; }

.tutorial-site-demo { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; padding:11px; }
.tutorial-site-demo > * { display:flex; align-items:center; gap:7px; padding:8px; border:1px solid #d1dbd5; border-radius:7px; background:#fff; font-size:9px; }
.tutorial-site-core { grid-column:1/-1; color:#fff; border-color:#167a46 !important; background:#167a46 !important; }
.tutorial-site-demo i { font-size:15px; }

.tutorial-timeline-demo { padding:11px; }
.tutorial-time-axis { display:grid; grid-template-columns:repeat(4,1fr); margin-left:64px; color:#758178; font-size:8px; }
.tutorial-demo-row { display:grid; grid-template-columns:59px repeat(6,1fr); align-items:center; min-height:35px; border-top:1px solid #d7dfda; }
.tutorial-demo-row > b { font-size:9px; }
.tutorial-demo-row .block { align-self:stretch; display:grid; place-items:center; margin:4px 1px; color:#fff; border-radius:4px; font-size:7px; }
.tutorial-demo-row .shunt { grid-column:2/3;background:#ef7a2d; }.tutorial-demo-row .train { grid-column:3/6;background:#1976d2; }.tutorial-demo-row .load { grid-column:6/8;background:#7b4ab1; }
.tutorial-demo-row .car { grid-column:2/3;background:#00a1a7; }.tutorial-demo-row .duty { grid-column:3/6;background:#168149; }.tutorial-demo-row .hotel { grid-column:6/8;background:#4e6070; }

.tutorial-ai-demo { display:grid; justify-items:center; gap:11px; padding:13px; }
.tutorial-ai-core { position:relative; display:grid; place-items:center; width:49px; height:49px; color:#fff; border-radius:14px; background:#167a46; font-size:23px; box-shadow:0 0 0 7px rgba(22,122,70,.1); }
.tutorial-ai-core span { position:absolute; inset:-11px; border:1px dashed #66bd89; border-radius:18px; animation:tutorial-ai-spin 8s linear infinite; }
@keyframes tutorial-ai-spin { to { transform:rotate(360deg); } }
.tutorial-ai-steps { display:flex; align-items:center; gap:6px; }
.tutorial-ai-steps b { padding:6px; border:1px solid #cdd8d1; border-radius:5px; background:#fff; font-size:8px; }.tutorial-ai-steps i{color:#168149;font-style:normal}
.tutorial-staff-choice { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:6px; }
.tutorial-staff-choice button { padding:7px; color:#516057; border:1px solid #c7d2cb; border-radius:6px; background:#fff; font-size:9px; }
.tutorial-staff-choice button.selected { color:#fff; border-color:#167a46; background:#167a46; }

.tutorial-operation-flow { display:flex; align-items:center; gap:4px; padding:12px 8px; }
.tutorial-operation-flow span { display:grid; flex:1; justify-items:center; gap:5px; opacity:0; animation:tutorial-flow-in .35s ease forwards; animation-delay:calc(var(--delay) * 90ms); }
.tutorial-operation-flow i { display:grid; place-items:center; width:30px; height:30px; color:#fff; border-radius:8px; background:#167a46; }
.tutorial-operation-flow b { font-size:7px; text-align:center; }.tutorial-operation-flow em { color:#8c9a91;font-style:normal }
@keyframes tutorial-flow-in { from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none} }

.tutorial-duty-demo { display:grid; gap:10px; padding:12px; }
.tutorial-duty-person { display:grid; grid-template-columns:36px 1fr; align-items:center; }
.tutorial-duty-person i { grid-row:1/3; display:grid; place-items:center; width:30px;height:30px;color:#fff;border-radius:50%;background:#167a46; }
.tutorial-duty-person b { font-size:11px; }.tutorial-duty-person span { color:#708078;font-size:8px; }
.tutorial-duty-bar { position:relative; height:22px; overflow:hidden; border-radius:6px; background:#dbe3de; }
.tutorial-duty-bar span { position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#168149,#e2a229); }
.tutorial-duty-bar i { position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:9px;font-style:normal;font-weight:800;text-shadow:0 1px 2px #000; }
.tutorial-duty-rules { display:grid;grid-template-columns:repeat(3,1fr);gap:5px; }
.tutorial-duty-rules span { padding:6px;border:1px solid #d1dbd5;border-radius:5px;background:#fff;text-align:center;font-size:8px; }

.tutorial-type-grid,.tutorial-help-demo { display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px; }
.tutorial-type-grid span,.tutorial-help-demo span { display:grid;grid-template-columns:28px 1fr;align-items:center;padding:8px;border:1px solid #d2dcd6;border-radius:7px;background:#fff; }
.tutorial-type-grid i,.tutorial-help-demo i { grid-row:1/3;color:#168149;font-size:16px; }
.tutorial-type-grid b,.tutorial-help-demo b { font-size:9px; }.tutorial-type-grid small,.tutorial-help-demo small { color:#748078;font-size:7px; }

.tutorial-progress-demo { display:grid;grid-template-columns:88px 1fr;gap:7px;padding:10px; }
.tutorial-rank-orbit { grid-row:1/3;display:grid;place-items:center;align-content:center;border-radius:50%;color:#fff;background:radial-gradient(circle,#c8102e 0 45%,#95152a 46%);box-shadow:0 0 0 6px rgba(200,16,46,.1); }
.tutorial-rank-orbit strong{font-size:12px}.tutorial-rank-orbit span{font-size:8px}
.tutorial-progress-demo > div:not(.tutorial-rank-orbit){display:grid;grid-template-columns:29px 1fr;align-items:center;padding:8px;border:1px solid #d2dcd6;border-radius:7px;background:#fff}
.tutorial-progress-demo i{grid-row:1/3;color:#168149;font-size:16px}.tutorial-progress-demo b{font-size:9px}.tutorial-progress-demo small{color:#728078;font-size:7px}

.tutorial-multiplayer-demo { display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;padding:12px; }
.tutorial-company-logo{display:grid;place-items:center;width:40px;height:40px;color:#fff;border-radius:10px;background:#c8102e;font-weight:900}
.tutorial-multiplayer-demo > div:nth-child(2){display:grid}.tutorial-multiplayer-demo b{font-size:10px}.tutorial-multiplayer-demo span{color:#6d7a72;font-size:8px}
.tutorial-avatar-stack{display:flex}.tutorial-avatar-stack i{display:grid;place-items:center;width:24px;height:24px;margin-left:-6px;color:#fff;border:2px solid #eef4f0;border-radius:50%;background:#167a46;font-size:7px;font-style:normal}
.tutorial-chat-line{grid-column:1/-1;padding:7px;border-radius:6px;background:#fff;font-size:8px}

.tutorial-finish-demo { display:grid;justify-items:center;gap:8px;padding:16px;text-align:center;background:radial-gradient(circle at 50% 0,rgba(33,168,97,.17),transparent 46%),linear-gradient(145deg,#f8fbf9,#eaf1ed); }
.tutorial-finish-ring{display:grid;place-items:center;width:58px;height:58px;color:#fff;border-radius:50%;background:#168149;box-shadow:0 0 0 8px rgba(22,129,73,.12)}
.tutorial-finish-ring i{font-size:25px}.tutorial-finish-demo>strong{font-size:15px}.tutorial-finish-demo>span{max-width:330px;color:#5d6a62;font-size:10px;line-height:1.4}
.tutorial-finish-demo>div:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}.tutorial-finish-demo>div:last-child b{padding:5px 7px;border:1px solid #bed7c7;border-radius:99px;background:#e8f6ed;color:#24623d;font-size:8px}

body.dark-mode .tutorial-card {
  color: #eef5f0;
  border-color: #405148;
  background: linear-gradient(145deg, rgba(30, 38, 34, .99), rgba(19, 27, 23, .99));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .72), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

body.dark-mode .tutorial-brand small,
body.dark-mode .tutorial-progress-row > strong,
body.dark-mode .tutorial-lead,
body.dark-mode .tutorial-bullets span { color: #b8c7bd; }
body.dark-mode .tutorial-close { color:#d6e2da;border-color:#4a5a51;background:#26312b; }
body.dark-mode .tutorial-progress-track { background:#35423b; }
body.dark-mode .tutorial-mission { color:#bce7cb;border-color:#365d44;background:#173422; }
body.dark-mode .tutorial-mission-score { color:#9fb2a5; }
body.dark-mode .tutorial-card-actions { border-color:#38463e;background:rgba(20,28,24,.9); }
body.dark-mode .tutorial-secondary { color:#e6eee9;border-color:#526159;background:#26312b; }
body.dark-mode .tutorial-link { color:#aabbb0; }
body.dark-mode :is(.tutorial-hero-visual,.tutorial-control-demo,.tutorial-map-demo,.tutorial-contract-demo,.tutorial-schedule-demo,.tutorial-consist-demo,.tutorial-site-demo,.tutorial-timeline-demo,.tutorial-ai-demo,.tutorial-operation-flow,.tutorial-duty-demo,.tutorial-type-grid,.tutorial-progress-demo,.tutorial-multiplayer-demo,.tutorial-help-demo,.tutorial-finish-demo) { border-color:#3d4b43;background-color:#202b25;background-image:linear-gradient(145deg,#253029,#1a231e); }
body.dark-mode :is(.tutorial-choice-grid button,.tutorial-demo-speeds b,.tutorial-contract-demo>div span,.tutorial-consist-actions button,.tutorial-site-demo>span,.tutorial-ai-steps b,.tutorial-staff-choice button,.tutorial-duty-rules span,.tutorial-type-grid span,.tutorial-help-demo span,.tutorial-progress-demo>div:not(.tutorial-rank-orbit),.tutorial-chat-line) { color:#dce7e0;border-color:#405048;background:#28332d; }
body.dark-mode :is(.tutorial-hero-copy span,.tutorial-contract-demo header,.tutorial-schedule-head span,.tutorial-route-beam small,.tutorial-duty-person span,.tutorial-type-grid small,.tutorial-help-demo small,.tutorial-progress-demo small,.tutorial-multiplayer-demo span) { color:#9fb0a5; }
body.dark-mode .tutorial-contract-demo>div b { color:#eef5f0; }
body.dark-mode .tutorial-demo-row { border-color:#3b4941; }

@media (max-width: 720px) {
  .tutorial-card {
    left: 10px !important;
    right: 10px;
    bottom: 42px;
    top: auto !important;
    width: auto !important;
    max-height: min(76vh, 680px);
  }

  .tutorial-safety-badge {
    bottom: 6px;
    width: max-content;
    max-width: calc(100vw - 16px);
    justify-content: center;
  }

  .tutorial-choice-grid { grid-template-columns: 1fr; }
  .tutorial-choice-grid button { grid-template-columns: 25px 1fr; justify-items:start; min-height:0; text-align:left; }
  .tutorial-choice-grid button i { grid-row:1/3; }
  .tutorial-operation-flow { overflow-x:auto; }
  .tutorial-operation-flow span { min-width:52px; }
}