: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;
  border-radius: 5px;
}

.global-search { position: relative; justify-self: stretch; width: 100%; max-width: 520px; }
.global-search input {
  min-height: 40px;
  border-radius: 10px;
  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;
  border-radius: 2px;
  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;
  border-radius: 9px;
  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;
  border-radius: 999px;
  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);
  border-radius: 12px;
}
.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;
  border-radius: 9px;
}
.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);
  border-radius: 12px;
}
.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);
  border-radius: 12px;
}

.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);
  border-radius: 999px;
  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;
  border-radius: 999px;
  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;
  border-radius: 10px;
  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;
  border-radius: 10px 10px 10px 2px;
  background: white;
}

.company-chat-message.own {
  justify-self: end;
  border-color: #bfdbfe;
  border-radius: 10px 10px 2px 10px;
  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;
  border-radius: 9px;
  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 {
  border-radius: 8px;
}

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

.company-chat-attach {
  display: grid;
  place-items: center;
  width: 38px;
  min-height: 36px;
  border: 1px solid #b8c7d8;
  border-radius: 9px;
  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;
  border-radius: 8px;
  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;
  border-radius: 14px;
  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;
  border-radius: 11px;
  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);
  border-radius: 10px;
  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;
}

.panel, .side-panel {
  background: var(--panel);
  border: 1px solid #bcbcbc;
  border-radius: 4px;
  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; }
.panel-head span, .modal-head span { color: var(--muted); font-size: 12px; }

.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;
  border-radius: 0;
  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%);
  border-radius: 999px;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 10px;
  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;
  border-radius: 10px;
  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;
  border-radius: 8px;
  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;
  border-radius: 50%;
  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;
  border-radius: 10px;
  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;
  border-radius: 8px;
  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);
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 999px;
  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);
  border-radius: 8px;
  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);
  border-radius: 999px;
  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);
  border-radius: 999px;
  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;
  border-radius: 4px;
  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;
  border-radius: 0;
  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;
  border-radius: 4px;
  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; }

button {
  min-height: 30px;
  border: 1px solid #aaa;
  border-radius: 3px;
  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: 1fr 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;
  border-radius: 8px;
  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 {
  border-radius: 8px;
  background: #f8fafc;
}
.order-stop-quick label {
  color: #0f172a;
  font-size: 12px;
}
.order-stop-quick input {
  min-height: 36px;
  border-color: #cbd5e1;
  border-radius: 7px;
  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;
  border-radius: 8px;
  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: 4px;
  background: #dff1fb;
  border: 1px solid #9dccdf;
  color: #105475;
  border-radius: 3px;
}
.order-stops-box {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 1px solid #c8d1dc;
  border-radius: 10px;
  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;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: none;
}
.stop-manual-field #stopManualInput {
  min-height: 42px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
}
.stop-manual-button {
  min-height: 40px;
  border-color: #166534;
  border-radius: 8px;
  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;
  border-radius: 9px;
  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;
  border-radius: 8px;
  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;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
}
.stop-suggestion b {
  padding: 4px 7px;
  border-radius: 999px;
  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);
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 10px rgba(15,23,42,.06);
}
.stop-chip b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  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;
  border-radius: 7px;
  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);
  border-radius: 3px;
  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);
  border-radius: 2px;
  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;
  border-radius: 7px;
  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;
  border-radius: 50%;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 7px;
  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;
  border-radius: 4px 12px 5px 5px;
  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 {
  border-radius: 5px;
  background: #7d5a22;
}
.art-sgns::before {
  background:
    linear-gradient(90deg, #2f73b8 0 32%, #f1c84b 32% 64%, #c9433c 64%);
}
.art-zacns::before {
  height: 26px;
  border-radius: 14px;
  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-radius: 10px;
  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;
  align-self: center;
  border-radius: 9px;
  border: 1px solid #b8c5d6;
  background: #eef5ff;
  color: var(--blue);
  font-weight: 900;
  cursor: pointer;
}
.depot-locate-button:hover {
  border-color: var(--blue);
  background: #dbeafe;
}
.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;
  border-radius: 8px;
  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 {
  border-radius: 999px;
  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; border-radius: 3px; }

.station-marker {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  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;
  border-radius: 8px;
  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;
  border-radius: 50%;
  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;
  border-radius: 7px;
  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: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: #f2c94c;
  color: #222;
  border: 2px solid #333;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  font-weight: 900;
}

.car-marker {
  width: 34px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #0f766e;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

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

.remote-loco-marker {
  width: 52px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  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: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: #d9b54a;
  color: #222;
  border: 2px solid #6c5a24;
  box-shadow: 0 2px 8px rgba(0,0,0,.24);
  font-size: 12px;
  font-weight: 900;
}

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

.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;
  background: var(--panel);
  border: 1px solid #a9a9a9;
  border-radius: 4px;
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
  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;
  border-radius: 8px;
  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;
  border-radius: 999px;
  background: #eef4ff;
  color: #174ea6 !important;
  font-weight: 800;
}
.fleet-item.due .fleet-status {
  background: #fee2e2;
  color: #b42318 !important;
}
.fleet-condition {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}
.fleet-condition span {
  display: block;
  height: 100%;
  border-radius: inherit;
  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;
  border-radius: 6px;
  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;
  border-radius: 6px;
}
.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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  background: #0f172a;
  color: white;
  letter-spacing: .08em;
  font-size: 18px;
}

.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;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f1f8fb);
}

.create-company-entry .entry-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  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);
  border-radius: 7px;
  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;
  border-radius: 8px;
  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;
  border-radius: 7px;
  background: #f8fafc;
}

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

.company-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  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;
  border-radius: 999px;
  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;
  border-radius: 8px;
  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;
  border-radius: 999px;
  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);
  border-radius: 14px;
}

.company-create-card .modal-head {
  min-height: 72px;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.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;
  border-radius: 10px;
  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;
  border-radius: 4px;
}

.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;
  box-shadow: 0 18px 55px rgba(0,0,0,.42);
}
.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;
  border-radius: 3px;
  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;
  border-radius: 999px;
  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;
  border-radius: 999px;
  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;
  border-radius: 12px;
  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;
  border-radius: 999px;
  background: #f8fbff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
}

.admin-cargo-wagon-tags > span small {
  padding: 2px 6px;
  border-radius: 999px;
  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;
  border-radius: 12px;
  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;
  border-radius: 0;
  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;
  border-radius: 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-radius: 50%;
  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-radius: 50%;
  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;
  border-radius: 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%);
  border-radius: 999px;
  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;
  border-radius: 4px;
  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;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
}

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

.wagon-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  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;
  border-radius: 8px;
  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;
  border: 1px solid #d8e2ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.loading-card span {
  color: #64748b;
}

.loading-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
}

.base-map-picker {
  display: grid;
  gap: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 4px 4px 0 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;
  border-radius: 4px;
  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 {
  min-height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #c8c8c8;
  background: linear-gradient(#f8f8f8, #dddddd);
}
.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%; }
}

/* Modern interface refresh */
:root {
  --red: #c62828;
  --red-dark: #9f1f1f;
  --green: #1f9d55;
  --blue: #2563eb;
  --line: #d8dee8;
  --panel: #ffffff;
  --text: #172033;
  --muted: #667085;
  --shadow: 0 14px 38px rgba(15, 23, 42, .18);
}

body {
  font: 14px/1.45 "Segoe UI", Arial, Helvetica, sans-serif;
  background: #eef2f7;
}

.topbar {
  height: 58px;
  grid-template-columns: 270px minmax(260px, 1fr) auto;
  background: linear-gradient(90deg, #b91c1c, #dc2626);
  box-shadow: 0 10px 28px rgba(127, 29, 29, .22);
}

.brand-mark {
  border-radius: 6px;
  background: rgba(255,255,255,.14);
}

input, select, textarea {
  border-color: #cbd5e1;
  border-radius: 6px;
  min-height: 36px;
}

button {
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #172033;
}

.time-button,
.dock-button,
.window-tab,
.plus-button,
.icon-button,
.primary {
  border-radius: 6px;
}

.time-controls {
  background: rgba(127, 29, 29, .42);
}

.time-button {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.24);
}

.time-button.active,
.dock-button.active {
  background: #16a34a;
  border-color: #15803d;
}

.money,
.game-clock {
  background: rgba(127, 29, 29, .38);
}

.floating-window,
.modal-card,
.window-dock {
  border: 1px solid rgba(148, 163, 184, .65);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
}

.panel-head,
.modal-head {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.panel-head h2,
.modal-head h2 {
  font-size: 16px;
  color: #0f172a;
}

.schedule-card,
.contract-card,
.shop-card,
.loco,
.admin-data-card,
.profile-box,
.account-entry {
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--blue);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.wagon-card,
.account-entry.expense {
  border-left-color: #dc2626;
}

.account-entry.income {
  border-left-color: #16a34a;
}

.account-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.account-summary div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
}

.account-summary span,
.account-entry span {
  color: var(--muted);
  font-size: 12px;
}

.account-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.account-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px;
}

.account-entry > div {
  display: grid;
  gap: 3px;
}

.account-entry > div:last-child {
  text-align: right;
}

.account-entry.income > div:last-child strong {
  color: #15803d;
}

.account-entry.expense > div:last-child strong {
  color: #b91c1c;
}

.modal {
  background: rgba(15, 23, 42, .48);
}

.search-results,
.picker-results {
  border-radius: 7px;
  border-color: #cbd5e1;
}

.account-card {
  width: min(760px, 94vw);
  height: min(680px, 92vh);
  grid-template-rows: auto auto 1fr;
}

.account-card .account-list {
  overflow: auto;
}

.money {
  cursor: pointer;
}

.activity-trip-preview {
  display: none;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, .8fr);
  gap: 10px;
  min-height: 220px;
  margin-top: 10px;
}

.activity-trip-map {
  min-height: 220px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  overflow: hidden;
}

body.dark-mode {
  --panel: #182232;
  --text: #e5edf7;
  --muted: #9aa8bb;
  --line: #334155;
  background: #0f172a;
  color: var(--text);
}

body.dark-mode .topbar {
  background: linear-gradient(90deg, #111827, #1f2937);
}

body.dark-mode .floating-window,
body.dark-mode .modal-card,
body.dark-mode .window-dock,
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 .multiplayer-hero > div,
body.dark-mode .multiplayer-panel,
body.dark-mode .multiplayer-owner-panel,
body.dark-mode .multiplayer-footer,
body.dark-mode .company-card,
body.dark-mode .company-member,
body.dark-mode .account-entry,
body.dark-mode .account-summary div {
  background: #182232;
  border-color: #334155;
  color: var(--text);
}

body.dark-mode .panel-head,
body.dark-mode .modal-head,
body.dark-mode .account-summary,
body.dark-mode .window-tabs,
body.dark-mode .lp-toolbar,
body.dark-mode .loco-planner,
body.dark-mode .modal-shop-grid {
  background: #111827;
  border-color: #334155;
  color: var(--text);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode button,
body.dark-mode .route-preview,
body.dark-mode .search-results,
body.dark-mode .picker-results {
  background: #0f172a;
  border-color: #334155;
  color: var(--text);
}

body.dark-mode .lp-board,
body.dark-mode .lp-grid,
body.dark-mode .lp-left,
body.dark-mode .radio-log,
body.dark-mode .multiplayer-layout {
  background: #0f172a;
  color: var(--text);
}

body.dark-mode .multiplayer-hero strong,
body.dark-mode .company-card strong,
body.dark-mode .company-member strong,
body.dark-mode .multiplayer-owner-panel strong,
body.dark-mode .secondary-button {
  color: var(--text);
}

body.dark-mode .company-card.active,
body.dark-mode .company-member.owner {
  background: #12323a;
  border-color: #2dd4bf;
}

body.dark-mode .company-code {
  background: #0f2a44;
  color: #93c5fd;
}

body.dark-mode .company-base-requirement {
  border-color: rgba(45, 212, 191, .26);
  background: rgba(20, 184, 166, .13);
  color: #99f6e4;
}

body.dark-mode .company-base-requirement.missing {
  border-color: rgba(248, 113, 113, .34);
  background: rgba(127, 29, 29, .32);
  color: #fecaca;
}

body.dark-mode .company-foundation-row {
  border-color: #334155;
  background: #182232;
}

body.dark-mode .company-foundation-row > div > span {
  color: var(--text);
}

body.dark-mode .create-company-entry,
body.dark-mode .company-create-card,
body.dark-mode .company-create-body,
body.dark-mode .company-create-body > label {
  background: #182232;
  border-color: #334155;
  color: var(--text);
}

body.dark-mode .company-create-card .modal-head {
  background: #111827;
  border-color: #334155;
}

body.dark-mode .create-company-entry strong,
body.dark-mode .company-create-body > label {
  color: var(--text);
}

body.dark-mode .create-company-entry span {
  color: #cbd5e1;
}

body.dark-mode .company-chat-panel,
body.dark-mode .company-chat-messages {
  background: #0f172a;
  border-color: #334155;
  color: var(--text);
}

body.dark-mode .company-chat-head,
body.dark-mode .company-chat-form,
body.dark-mode .company-chat-message {
  background: #182232;
  border-color: #334155;
  color: var(--text);
}

body.dark-mode .company-chat-attach,
body.dark-mode .company-chat-image-button {
  background: #0f172a;
  border-color: #334155;
  color: #5eead4;
}

body.dark-mode .company-chat-image-button img {
  background: #111827;
}

body.dark-mode .company-chat-image-name {
  background: #12323a;
  color: #99f6e4;
}

body.dark-mode .company-chat-message.own {
  background: #102a44;
  border-color: #2563eb;
}

body.dark-mode .company-chat-head strong,
body.dark-mode .company-chat-message strong {
  color: var(--text);
}

/* 2026 visual polish */
:root {
  --surface: rgba(255,255,255,.94);
  --surface-strong: #ffffff;
  --surface-soft: #f8fafc;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
}

body {
  background:
    linear-gradient(135deg, rgba(37,99,235,.08), transparent 32%),
    linear-gradient(315deg, rgba(22,163,74,.08), transparent 30%),
    #eef3f8;
}

.topbar {
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.brand {
  font-size: 15px;
}

.global-search input {
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.floating-window {
  border-radius: 10px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.panel-head {
  min-height: 46px;
  padding: 10px 14px;
  background: linear-gradient(#ffffff, #f8fafc);
}

.panel-head h2 {
  font-size: 15px;
  font-weight: 750;
}

.schedule-list,
.contract-list,
.loco-list,
.radio-log {
  padding: 10px;
}

.schedule-card,
.contract-card,
.shop-card,
.loco,
.account-entry {
  border-radius: 8px;
  padding: 11px;
}

.schedule-card:hover,
.contract-card:hover,
.shop-card:hover,
.loco:hover,
.admin-data-card:hover {
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 10px 22px rgba(15,23,42,.1);
}

.window-tabs {
  padding: 8px;
  gap: 6px;
  background: #f8fafc;
}

.window-tab {
  min-height: 30px;
  padding: 0 10px;
}

.window-tab.active,
.lp-tab.active {
  background: var(--accent-soft);
  color: #1d4ed8;
  border-color: rgba(37,99,235,.28);
}

.plus-button,
.icon-button {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
}

.primary {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

.primary.danger,
.danger {
  background: #dc2626;
  border-color: #b91c1c;
  color: #fff;
}

.modal-card {
  border-radius: 10px;
}

.modal-head {
  min-height: 56px;
  padding: 12px 16px;
}

.shop-row {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.vehicle-image,
.detail-map,
.admin-area-map,
.activity-trip-map {
  border-radius: 8px;
}

.window-dock {
  border-radius: 10px;
  padding: 7px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
}

body.view-maponly .map-view-header {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 850;
  width: min(980px, calc(100vw - 28px));
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  color: #fff;
  background: rgba(15, 23, 42, .76);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(15,23,42,.28);
  backdrop-filter: blur(14px);
}

.map-view-brand,
.map-view-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.map-view-status span {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  white-space: nowrap;
}

body.view-maponly .map-notification {
  bottom: 26px;
}

body.dark-mode {
  --surface: rgba(24,34,50,.95);
  --surface-strong: #182232;
  --surface-soft: #111827;
  --accent-soft: rgba(37,99,235,.22);
}

body.dark-mode .floating-window,
body.dark-mode .window-dock {
  background: var(--surface);
}

body.dark-mode .panel-head,
body.dark-mode .window-tabs {
  background: #111827;
}

body.dark-mode .global-search input {
  background: rgba(15,23,42,.92);
  border-color: #334155;
}

/* Focused popup and header refresh */
:root {
  --chrome: rgba(255,255,255,.88);
  --chrome-border: rgba(148,163,184,.32);
  --ink-strong: #0f172a;
  --ok-soft: #dcfce7;
  --danger-soft: #fee2e2;
}

.topbar {
  height: 64px;
  grid-template-columns: minmax(210px, 260px) minmax(220px, 360px) minmax(0, 1fr);
  gap: 14px;
  padding: 8px 14px;
  background: rgba(185, 28, 28, .92);
  border-bottom: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 18px 44px rgba(127,29,29,.24);
}

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

.brand {
  min-width: 0;
  font-size: 16px;
  letter-spacing: 0;
}

.brand-mark {
  width: 36px;
  height: 28px;
  border-radius: 7px;
  border-width: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.global-search {
  justify-self: stretch;
  width: 100%;
}

.global-search input {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  color: #111827;
}

.top-actions {
  height: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.time-controls {
  height: 42px;
  padding: 5px;
  gap: 3px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(127,29,29,.32);
}

.time-button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12px;
  background: rgba(255,255,255,.13);
  transition: background .16s ease, transform .16s ease, border-color .16s ease;
}

.time-button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.22);
}

.time-button.active {
  background: #fff;
  border-color: rgba(255,255,255,.8);
  color: #b91c1c;
}

.game-clock,
.money {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.game-clock {
  min-width: 118px;
  padding: 0 12px;
}

.money {
  padding: 0 14px;
  color: #fff;
}

.modal.open {
  padding: 18px;
}

.shop-modal-card,
.activity-modal-card,
.account-card {
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.92);
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: 0 30px 90px rgba(15,23,42,.32);
}

.shop-modal-card,
.activity-modal-card {
  width: min(1500px, 95vw);
  height: min(900px, 95vh);
}

.account-card {
  width: min(820px, 94vw);
  height: min(720px, 92vh);
}

.shop-modal-card .modal-head,
.activity-modal-card .modal-head,
.account-card .modal-head {
  min-height: 72px;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.shop-modal-card .modal-head h2,
.activity-modal-card .modal-head h2,
.account-card .modal-head h2 {
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink-strong);
}

.shop-modal-card .modal-head span,
.activity-modal-card .modal-head span,
.account-card .modal-head span {
  display: block;
  margin-top: 4px;
  color: #64748b;
}

.shop-modal-card .icon-button,
.activity-modal-card .icon-button,
.account-card .icon-button {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155;
}

.modal-shop-grid {
  gap: 22px;
  padding: 20px;
  background: #f8fafc;
}

.shop-section {
  gap: 12px;
}

.shop-section .sub-head {
  margin: 0;
  color: #334155;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 800;
}

.shop-row {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.shop-card {
  grid-template-rows: 132px auto auto auto;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  border-left: 0;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}

.shop-card strong {
  color: #0f172a;
  font-size: 16px;
}

.shop-card span {
  color: #64748b;
  font-size: 13px;
}

.shop-card .vehicle-image {
  height: 132px;
  border: 0;
  border-radius: 11px;
  background-color: #eef2f7;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.35);
}

.shop-card .buy-loco,
.shop-card .buy-wagon,
.shop-card .rent-loco,
.shop-card .rent-wagon {
  min-height: 38px;
  border-radius: 10px;
}

.shop-acquire-controls {
  grid-template-columns: 78px 1fr 1fr;
  padding-top: 4px;
}

.shop-acquire-controls input {
  min-height: 38px;
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
}

.cargo-icons span {
  border-radius: 8px;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.account-summary {
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
}

.account-summary div {
  gap: 6px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

.account-summary div:nth-child(2) {
  background: linear-gradient(180deg, #fff, var(--ok-soft));
}

.account-summary div:nth-child(3) {
  background: linear-gradient(180deg, #fff, var(--danger-soft));
}

.account-summary strong {
  color: #0f172a;
  font-size: 20px;
}

.account-list {
  gap: 10px;
  padding: 16px;
  background: #f8fafc;
}

.account-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-left-width: 5px;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

.account-entry strong {
  font-size: 15px;
}

.modal-activity-form {
  grid-template-rows: 1fr auto;
  background: #f8fafc;
}

.activity-form-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  padding: 20px;
}

.activity-form-grid label,
.activity-times {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,.05);
}

.activity-form-grid label {
  color: #334155;
  font-size: 12px;
  text-transform: uppercase;
}

.activity-form-grid input,
.activity-form-grid select {
  margin-top: 4px;
  min-height: 40px;
  border-radius: 10px;
  font-size: 14px;
  text-transform: none;
}

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

.activity-times label {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.wagon-checkbox-list {
  margin-top: 4px;
  border-radius: 10px;
  border-color: #e2e8f0;
  background: #f8fafc;
}

.wagon-checkbox {
  border-color: #e2e8f0;
  border-radius: 9px;
  background: #fff;
}

.activity-trip-preview {
  margin: 0 20px 18px;
  padding: 14px;
  grid-template-columns: minmax(280px, 1fr) minmax(240px, 360px);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.07);
}

.activity-trip-map {
  min-height: 260px;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.35);
}

.activity-trip-preview .route-preview {
  border-radius: 12px;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.activity-modal-footer {
  min-height: 70px;
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

.activity-modal-footer .primary {
  min-height: 42px;
  min-width: 190px;
  border-radius: 11px;
}

body.dark-mode {
  --chrome: rgba(15,23,42,.86);
  --chrome-border: rgba(51,65,85,.74);
  --ink-strong: #f8fafc;
  --ok-soft: rgba(22,163,74,.2);
  --danger-soft: rgba(220,38,38,.2);
}

body.dark-mode .topbar {
  background: rgba(15,23,42,.92);
  border-bottom-color: rgba(148,163,184,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.3);
}

body.dark-mode .time-button.active {
  background: #e5edf7;
  color: #0f172a;
}

body.dark-mode .shop-modal-card,
body.dark-mode .activity-modal-card,
body.dark-mode .account-card,
body.dark-mode .modal-shop-grid,
body.dark-mode .modal-activity-form,
body.dark-mode .account-list {
  background: #0f172a;
}

body.dark-mode .shop-modal-card .modal-head,
body.dark-mode .activity-modal-card .modal-head,
body.dark-mode .account-card .modal-head,
body.dark-mode .activity-modal-footer,
body.dark-mode .shop-card,
body.dark-mode .account-summary div,
body.dark-mode .account-entry,
body.dark-mode .activity-form-grid label,
body.dark-mode .activity-times,
body.dark-mode .activity-trip-preview,
body.dark-mode .wagon-checkbox {
  background: #182232;
  border-color: #334155;
}

body.dark-mode .wagon-checkbox.auto-wagon-checkbox {
  background: linear-gradient(180deg, rgba(20, 184, 166, .18), rgba(15, 23, 42, .94));
  border-color: rgba(45, 212, 191, .42);
}

body.dark-mode .shop-card strong,
body.dark-mode .account-summary strong,
body.dark-mode .account-entry strong,
body.dark-mode .shop-modal-card .modal-head h2,
body.dark-mode .activity-modal-card .modal-head h2,
body.dark-mode .account-card .modal-head h2 {
  color: #f8fafc;
}

body.dark-mode .shop-card .vehicle-image,
body.dark-mode .wagon-checkbox-list {
  background: #111827;
  border-color: #334155;
}

body.dark-mode .activity-trip-preview .route-preview {
  background: rgba(37,99,235,.16);
  border-color: rgba(96,165,250,.38);
}

@media (max-width: 1220px) {
  .topbar {
    grid-template-columns: 1fr;
    height: auto;
    align-items: stretch;
  }

  .top-actions,
  .time-controls {
    flex-wrap: wrap;
    height: auto;
  }

  .game-clock,
  .money {
    min-height: 36px;
  }
}

@media (max-width: 760px) {
  .modal.open {
    padding: 8px;
  }

  .account-summary,
  .activity-form-grid,
  .activity-times,
  .activity-trip-preview {
    grid-template-columns: 1fr;
  }

  .shop-modal-card,
  .activity-modal-card,
  .account-card {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .shop-row {
    grid-template-columns: 1fr;
  }
}

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

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

.search-results {
  z-index: 1400;
  max-height: min(420px, calc(100vh - 88px));
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(15,23,42,.28);
}

.profile-card {
  width: min(760px, 94vw);
  border-radius: 14px;
  background: #f8fafc;
}

.profile-card .modal-head {
  min-height: 72px;
  padding: 16px 20px;
  background: #fff;
}

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

.profile-box {
  gap: 10px;
  padding: 18px;
  border-radius: 13px;
  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;
  border-radius: 9px;
  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;
  border-radius: 9px;
  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;
  border-radius: 11px 0 0 11px;
  white-space: nowrap;
}

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

.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-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 999px;
  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);
  border-radius: 8px;
  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;
  border-radius: 7px;
  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 #contractsPanel .contract-route i {
  color: #60a5fa;
}

#contractsPanel .accept-contract {
  width: 100%;
  min-height: 32px;
  border-radius: 7px;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
}

.contract-detail-map-wrap {
  min-height: 340px;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  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;
  border-radius: 999px;
}

#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;
  border-radius: 8px;
  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;
  border-radius: 999px;
  background: #ffffff;
  font-weight: 800;
}

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

.lp-activity {
  min-width: 0;
  padding: 0;
  border-radius: 8px;
  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%;
  border-radius: inherit;
}

.activity-warning {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 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;
  border-radius: 11px;
  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;
  border-radius: 8px;
  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 .search-results,
body.dark-mode .profile-card,
body.dark-mode .profile-card .modal-head,
body.dark-mode .profile-grid,
body.dark-mode .profile-box,
body.dark-mode .account-table td,
body.dark-mode .activity-context-menu {
  background: #182232;
  border-color: #334155;
  color: #e5edf7;
}

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;
}

.modal-head .icon-button,
.map-notification button {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  font-size: 0;
}

.modal-head .icon-button::before,
.map-notification button::before {
  content: "×";
  display: grid;
  place-items: center;
  color: currentColor;
  color: #334155;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.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;
  border-radius: 8px;
  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;
  border-radius: 10px;
  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-radius: 8px;
  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);
  background: #f8fafc;
}

.account-card .modal-head {
  min-height: 64px;
}

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

.account-summary div {
  min-height: 74px;
  padding: 12px 14px;
  border-radius: 10px;
  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;
  border-radius: 12px;
  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-radius: 0;
  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%;
}

.order-timeline-panel {
  min-height: 0;
  overflow: auto;
  padding: 0 6px 6px 0;
}

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

@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-radius: 12px;
  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;
  border-radius: 12px;
  background: #fff;
}

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

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

.schedule-detail-grid span {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f8fafc;
  color: #334155;
}

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

.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;
  border-radius: 12px;
  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 {
  background: #111827;
  border-color: #334155;
  color: #e5edf7;
}

body.dark-mode .panel-head,
body.dark-mode .modal-head,
body.dark-mode .window-tabs,
body.dark-mode .lp-toolbar,
body.dark-mode .lp-scale-bar {
  background: #0f172a;
  border-color: #334155;
}

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 .modal-head,
#adminEditModal .modal-head,
#adminUserModal .modal-head {
  min-height: 66px;
  padding: 14px 18px;
  background: #ffffff;
  border-bottom: 1px solid #dbe3ee;
}

#adminModal .modal-head h2,
#adminEditModal .modal-head h2,
#adminUserModal .modal-head h2 {
  font-size: 18px;
  color: #0f172a;
}

#adminModal .modal-head span,
#adminEditModal .modal-head span,
#adminUserModal .modal-head span {
  color: #64748b;
}

#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;
  border-radius: 8px;
  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;
  border-radius: 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 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;
  border-radius: 8px;
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

#adminModal .admin-toolbar input {
  width: 100%;
  min-height: 38px;
  border-radius: 8px;
  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-data-card {
  min-height: 106px;
  padding: 14px 86px 14px 14px;
  border: 1px solid #dbe3ee;
  border-left: 4px solid #2563eb;
  border-radius: 10px;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 10px;
  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-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 10px;
  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;
  border-radius: 8px;
  background: #f8fafc;
}

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

#adminEditModal .admin-area-map {
  width: 100%;
  height: clamp(360px, 52vh, 560px);
  min-height: 360px;
  display: block;
  position: relative;
  border-radius: 10px;
  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 .modal-head,
body.dark-mode #adminEditModal .modal-head,
body.dark-mode #adminFuelModal .modal-head,
body.dark-mode #adminUserModal .modal-head,
body.dark-mode #adminModal .admin-toolbar {
  background: #111827;
  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);
  border-radius: 12px;
  background: rgba(15,23,42,.28);
}

body:not(.view-maponly) .time-button {
  min-height: 34px;
  border-radius: 9px;
  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;
  border-radius: 999px;
  background: rgba(148, 163, 184, .26);
  border: 1px solid rgba(148, 163, 184, .34);
}

.loco-fuel-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  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;
  border-radius: 8px;
  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;
  border-radius: 999px;
  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;
  border-radius: 10px;
  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;
  border-radius: 8px;
  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;
  border-radius: 10px;
  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;
  border-radius: 10px;
  box-shadow: none;
}

.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(560px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-width: min(560px, calc(100vw - 32px)) !important;
  max-height: 84vh !important;
}

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

.pkw-activity-form label {
  position: relative;
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.pkw-activity-form input {
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
}

.pkw-activity-preview {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  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;
  border-radius: 8px;
  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;
  border-radius: 12px !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-card .modal-head {
  min-height: 62px !important;
  padding: 14px 16px !important;
  background:
    linear-gradient(90deg, rgba(15, 118, 110, .12), rgba(37, 99, 235, .10)),
    #ffffff !important;
  border-bottom: 1px solid #d8e3f0 !important;
}

.hotel-activity-card .modal-head h2 {
  color: #102033 !important;
  font-size: 18px !important;
}

.hotel-activity-card .modal-head span {
  color: #64748b !important;
  font-size: 12px !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;
  border-radius: 10px !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;
  border-radius: 8px !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;
  border-radius: 12px !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;
  border-radius: 11px !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;
  border-radius: 999px !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;
  border-radius: 12px !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;
}

body.dark-mode .hotel-activity-card .modal-head,
body.dark-mode .hotel-activity-form label,
body.dark-mode .hotel-offer,
body.dark-mode .hotel-activity-card .modal-actions {
  background: #111c2d !important;
  border-color: #334155 !important;
}

body.dark-mode .hotel-offer-main strong,
body.dark-mode .hotel-offer-facts b,
body.dark-mode .hotel-activity-card .modal-head h2 {
  color: #f8fafc !important;
}

body.dark-mode .hotel-offer-main span,
body.dark-mode .hotel-offer-facts span,
body.dark-mode .hotel-activity-card .modal-head span {
  color: #cbd5e1 !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 {
    grid-template-columns: 1fr;
  }
}

.compact-select {
  min-height: 32px;
  max-width: 170px;
  border-radius: 8px;
  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);
  border-radius: 12px;
  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-radius: 10px;
  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;
  border-radius: 12px;
  background: #eef4fb;
}

.shop-tab {
  min-width: 110px;
  min-height: 36px;
  border-radius: 9px;
  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;
  border-radius: 14px;
}

.shop-modal-card .shop-card .vehicle-image {
  height: 220px;
  border-radius: 13px;
}

.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-radius: 999px;
  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;
  border: 1px solid #d8e1ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15,23,42,.32);
  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;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.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;
  border: 1px solid #bde7df;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f0fdfa);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .32);
}

.vehicle-purchase-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #0f766e;
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
}

.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;
  border-radius: 10px;
  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;
  border: 1px solid #bfd0e4;
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font: inherit;
  font-weight: 800;
  outline: none;
}

.game-dialog-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.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;
  border-radius: 10px;
  font-weight: 900;
}

.game-dialog-cancel {
  border: 1px solid #cbd8e7;
  background: #ffffff;
  color: #334155;
}

.game-dialog-ok {
  min-width: 118px;
}

body.dark-mode .vehicle-purchase-dialog {
  border-color: #334155;
  background: linear-gradient(135deg, #111827, #0f172a);
}

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 {
  border-color: #334155;
  background: #020617;
  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;
  border-radius: 10px;
  font-weight: 900;
}

body.dark-mode .shop-switch,
body.dark-mode .shop-info-dialog,
body.dark-mode .shop-info-dialog dl div {
  background: #111827;
  border-color: #334155;
}

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 {
  min-height: 64px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #dbe3ee;
}

#personnelOverviewModal .modal-head h2 {
  margin: 0;
  font-size: 18px;
}

#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;
  border-radius: 10px;
  background: #eef2f7;
}

#personnelOverviewModal .personnel-overview-tabs button {
  width: auto;
  min-width: 104px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  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;
  border-radius: 10px;
  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 {
  border-radius: 9px;
  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 .modal-head,
body.dark-mode #personnelOverviewModal .personnel-overview-grid section,
body.dark-mode #personnelOverviewModal .training-form-card,
body.dark-mode #personnelOverviewModal .training-list-card,
body.dark-mode #personnelOverviewModal .personnel-card,
body.dark-mode #personnelOverviewModal .training-people-field,
body.dark-mode #personnelOverviewModal .training-settings-card {
  background: #172235;
  border-color: #334155;
}

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 {
  background: #172235;
  border-color: #334155;
  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 .activity-game-time span {
  color: #f8fafc;
}

body.dark-mode .training-person-info {
  background: #1e3a8a;
  border-color: #60a5fa;
  color: #dbeafe;
}

/* Responsive header and multiview 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 and multiview headers */
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 {
  background: #0f172a;
  border-color: #334155;
  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;
  background: #eef3f8;
}

.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;
  border-radius: 9px !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;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.fleet-media {
  min-height: 132px;
  border-radius: 10px;
  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 {
  border-radius: 9px;
  padding: 10px;
}

.fleet-offer {
  border-radius: 9px;
}

.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-radius: 8px;
  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;
  background: #eef3f8;
}

.multiple-traction-existing {
  padding: 14px 18px 0;
  min-height: 0;
}

.multiple-traction-existing-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e0eb;
  border-radius: 12px;
  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;
  border-radius: 10px;
  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-radius: 8px;
  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;
  border-radius: 12px;
  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;
  border-radius: 10px;
  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 {
  border-color: #334155 !important;
  background: #0b1220 !important;
  color: #e5edf7 !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52) !important;
}

body.dark-mode #multipleTractionModal .modal-head {
  border-bottom-color: #334155 !important;
  background: linear-gradient(180deg, #172033, #101827) !important;
}

body.dark-mode #multipleTractionModal .modal-head h2,
body.dark-mode #multipleTractionModal .multiple-traction-group-head strong,
body.dark-mode #multipleTractionModal .multiple-traction-existing-item strong,
body.dark-mode #multipleTractionModal .multiple-traction-option strong {
  color: #f8fafc !important;
}

body.dark-mode #multipleTractionModal .modal-head span,
body.dark-mode #multipleTractionModal .multiple-traction-group-head span,
body.dark-mode #multipleTractionModal .multiple-traction-existing-item small,
body.dark-mode #multipleTractionModal .multiple-traction-option small,
body.dark-mode #multipleTractionModal .multiple-traction-actions span {
  color: #cbd5e1 !important;
}

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;
  border-radius: 12px;
  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-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 {
  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 {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.admin-mail-grid input,
.admin-mail-grid select {
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  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;
  border-radius: 9px;
  background: #fff;
  padding: 0 10px;
  font-weight: 800;
}

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

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 multiview 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 multiview polish */
.schedule-actions .schedule-icon-action {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
}

.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;
  border-radius: 9px;
  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;
  border-radius: 14px;
  background: #fff;
}

.wiki-html-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  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;
  border-radius: 12px;
  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;
  border-radius: 14px;
  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;
  border-radius: 999px;
  background: #dbe3ee;
}

.wiki-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  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;
  border-radius: 14px;
  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;
  border-radius: 16px;
  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;
  border-radius: 999px;
  background: #dbe3ee;
}

.wiki-guide-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  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;
  border-radius: 12px;
  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-radius: 999px;
  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;
  border-radius: 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;
  border-radius: 16px;
  background: white;
  animation: wikiSlide .28s ease;
}

.wiki-guide-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  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;
  border-radius: 12px;
  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;
  border-radius: 14px;
  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;
  border-radius: 14px;
  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;
  border-radius: 12px;
  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;
  border-radius: 10px;
  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 identical in normal and Multiview control mode. */
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;
}

/* Multiview controls window keeps the same header 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;
  border-radius: 16px !important;
}

#activityModal.activity-view-mode .modal-head {
  min-height: 72px !important;
  padding: 16px 20px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border-bottom: 1px solid #dbe3ee !important;
}

#activityModal.activity-view-mode .modal-head h2 {
  font-size: 22px !important;
  line-height: 1.15 !important;
}

#activityModal.activity-view-mode .modal-head span {
  color: #64748b !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;
  border-radius: 14px !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;
  border-radius: 14px !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;
  border-radius: 10px !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;
  border-radius: 12px !important;
  background: #f8fafc !important;
}

.activity-trip-dot {
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !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;
  border-radius: 14px !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-head {
  background: linear-gradient(180deg, #111c2f, #0b1220) !important;
  border-color: #26364f !important;
}

body.dark-mode #activityModal.activity-view-mode .modal-head span,
body.dark-mode #activityModal.activity-view-mode #activityHint,
body.dark-mode .activity-trip-history-head span,
body.dark-mode .activity-trip-summary span,
body.dark-mode .activity-trip-times {
  color: #9fb0c7 !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;
  border-radius: 10px;
  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;
  border-radius: 6px;
  background: #eeeeee;
  box-shadow: inset 0 0 0 1px #d8d8d8;
}

.design-preview span {
  position: absolute;
  display: block;
  border: 2px solid #b7b7b7;
  border-radius: 2px;
  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;
  border-radius: 14px !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;
  border-radius: 3px !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;
  border-radius: 0 !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;
  border-radius: 3px !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,
body.ui-window-design .icon-button {
  min-height: 24px !important;
  height: auto !important;
  border-radius: 3px !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-radius: 3px !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;
  border-radius: 10px !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 #multiviewButton {
  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;
  border-radius: 8px !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;
  border-radius: 12px !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 {
  border: 1px solid #b8b8b8 !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 54px rgba(15, 23, 42, .28) !important;
  overflow: hidden !important;
}

body.ui-window-design .modal-card .modal-head {
  min-height: 40px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid #c8c8c8 !important;
  background: linear-gradient(#f7f7f7, #e5e5e5) !important;
}

body.ui-window-design .modal-card .modal-head h2 {
  color: #222 !important;
  font-size: 14px !important;
}

body.ui-window-design .modal-card .modal-head span {
  color: #4b5563 !important;
  font-size: 12px !important;
}

body.dark-mode.ui-window-design .modal-card {
  background: #111827 !important;
  border-color: #334155 !important;
  color: #e5edf7 !important;
}

body.dark-mode.ui-window-design .modal-card .modal-head {
  background: #172235 !important;
  border-color: #334155 !important;
}

body.dark-mode.ui-window-design .modal-card .modal-head h2 {
  color: #f8fafc !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;
  border-radius: 10px !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);
  border-radius: 8px;
  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;
  border-radius: 7px;
  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;
  border-radius: 3px !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;
  border-radius: 18px !important;
  background: #f8fafc !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .28) !important;
}

#profileModal .profile-card .modal-head {
  min-height: 68px !important;
  padding: 16px 20px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border-bottom: 1px solid #dbe3ee !important;
}

#profileModal .profile-card .modal-head h2 {
  font-size: 22px !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;
  border-radius: 14px !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;
  border-radius: 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;
  border-radius: 14px !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-card,
body.dark-mode #profileModal .profile-grid {
  background: #0f172a !important;
}

body.dark-mode #profileModal .profile-card .modal-head,
body.dark-mode #profileModal .profile-box {
  background: #182232 !important;
  border-color: #334155 !important;
}

body.dark-mode #profileModal .profile-box strong,
body.dark-mode #profileModal .profile-card .modal-head h2 {
  color: #f8fafc !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 .route-preview,
.order-modal-card .order-actions {
  grid-column: 1 / -1;
}

.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;
  border-radius: 8px;
  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;
  border-radius: 8px;
}

.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;
  border-radius: 8px;
  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;
  }
}

/* Vehicle shop in classic browsergame shop style */
#shopModal .shop-modal-card {
  width: min(1180px, calc(100vw - 28px)) !important;
  height: min(760px, calc(100vh - 36px)) !important;
  max-width: min(1180px, calc(100vw - 28px)) !important;
  max-height: min(760px, calc(100vh - 36px)) !important;
  border-radius: 4px !important;
  background: #f7f7f7 !important;
}

#shopModal .shop-modal-card .modal-head {
  align-items: flex-start;
  min-height: auto;
  padding: 16px 18px 10px;
  border-bottom: 0;
  background: transparent;
}

#shopModal .shop-modal-card .modal-head h2 {
  color: #333;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
}

#shopModal .shop-modal-card .modal-head span {
  display: none;
}

#shopModal .modal-shop-grid {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 0 18px 18px;
  overflow: hidden;
}

.shop-intro-alert,
.shop-category-info {
  padding: 12px 14px;
  border: 1px solid #9bd2ef;
  border-radius: 3px;
  background: #cbe9f7;
  color: #246b8a;
  font-size: 14px;
}

#shopModal .shop-switch {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#shopModal .shop-tab {
  min-width: 118px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #d5d5d5;
  border-right-width: 0;
  border-radius: 3px 3px 0 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 .shop-section {
  overflow: auto;
  min-height: 0;
}

#shopModal .shop-section .sub-head {
  margin: 8px 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

#shopModal .shop-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 420px));
  align-items: start;
  justify-content: start;
  gap: 28px;
  padding: 0 10px 18px;
}

#shopModal .shop-card {
  min-height: 250px !important;
  display: grid;
  grid-template-rows: 132px auto auto 1fr auto;
  gap: 7px;
  padding: 20px !important;
  border: 1px solid #d6d6d6 !important;
  border-radius: 4px !important;
  background: linear-gradient(#efefef, #fbfbfb 44%, #ffffff) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

#shopModal .shop-card .vehicle-image {
  display: flex;
  position: relative;
  width: 100%;
  height: 132px !important;
  min-height: 132px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  background: linear-gradient(#ffffff, #e9e9e9);
  overflow: hidden;
}

#shopModal .shop-card .vehicle-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 6px;
}

#shopModal .shop-card .vehicle-image::before {
  content: "";
  position: absolute;
  transform: scale(.74);
  transform-origin: center bottom;
}

#shopModal .shop-card .vehicle-image::after {
  content: "";
  position: absolute;
  opacity: .35;
}

#shopModal .shop-card .vehicle-image.has-image::before,
#shopModal .shop-card .vehicle-image.has-image::after {
  content: none;
}

#shopModal .shop-card strong {
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

#shopModal .shop-card > span,
#shopModal .shop-location-select {
  color: #333;
  font-size: 14px;
}

#shopModal .cargo-icons {
  min-height: 28px;
}

#shopModal .shop-acquire-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

#shopModal .shop-quantity {
  width: 58px;
  height: 34px;
  border: 1px solid #c7c7c7;
  border-radius: 3px;
  background: #fff;
}

#shopModal .buy-loco,
#shopModal .buy-wagon,
#shopModal .rent-loco,
#shopModal .rent-wagon,
#shopModal .buy-car {
  min-height: 34px;
  border: 1px solid #4f934f;
  border-radius: 3px;
  background: #66ad6a;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
}

#shopModal .shop-info-button {
  top: 12px;
  right: 12px;
  width: 28px;
  min-height: 28px;
  border-radius: 3px;
  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;
  border-radius: 5px;
  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;
  border-radius: 3px;
  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;
}

.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;
  border-radius: 5px;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
}

.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;
  border-radius: 8px;
  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;
  border-radius: 5px;
  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;
  border-radius: 5px;
  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;
  border-radius: 5px;
  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;
  border-radius: 10px;
  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;
  border-radius: 10px;
  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;
  border-radius: 999px;
  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;
  border-radius: 999px;
  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;
  border-radius: 8px;
  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;
  border-radius: 7px;
  font-size: 11px !important;
}

#adminWikiPreview {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  background: #ffffff;
}

.admin-wiki-preview:fullscreen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: 100vw;
  height: 100vh;
  padding: 18px;
  border-radius: 0;
  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;
  border-radius: 8px;
  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 {
  background: var(--dark-panel) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38) !important;
}

body.dark-mode .panel-head,
body.dark-mode .modal-head,
body.dark-mode .window-tabs,
body.dark-mode .lp-toolbar,
body.dark-mode .lp-scale-bar,
body.dark-mode .admin-toolbar,
body.dark-mode .activity-modal-footer,
body.dark-mode .schedule-edit-actions,
body.dark-mode .admin-wiki-head {
  background: var(--dark-panel-2) !important;
  border-color: var(--dark-border-soft) !important;
  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 {
  background: var(--dark-panel-2) !important;
  border-color: var(--dark-border) !important;
  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 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 {
  color: #f8fbff !important;
}

body.dark-mode span,
body.dark-mode small,
body.dark-mode p,
body.dark-mode label,
body.dark-mode .panel-head span,
body.dark-mode .modal-head span,
body.dark-mode .window-tabs span,
body.dark-mode .lp-title span,
body.dark-mode .lp-toolbar label,
body.dark-mode .schedule-meta,
body.dark-mode .contract-card p,
body.dark-mode .loco small,
body.dark-mode .loco span,
body.dark-mode .admin-data-card span,
body.dark-mode .admin-card-content span,
body.dark-mode .assign-hint,
body.dark-mode .admin-wiki-head span {
  color: var(--dark-muted) !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);
}

.modal-card,
.floating-window,
.panel,
.side-panel,
.admin-data-box,
.profile-box,
.shop-card,
.schedule-card,
.contract-card,
.loco,
.fleet-item,
.training-form-card,
.training-list-card {
  border-radius: var(--ui-radius) !important;
}

.modal-head,
.panel-head,
.admin-toolbar,
.window-tabs {
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}

input,
select,
textarea {
  min-height: 38px;
  border-radius: var(--ui-radius-sm) !important;
  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 {
  border-radius: var(--ui-radius-sm) !important;
  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;
  border-radius: var(--ui-radius) !important;
}

.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;
  border-radius: var(--ui-radius-lg) !important;
}

.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 {
  background: #191d23 !important;
  border: 1px solid var(--dark-line) !important;
  color: var(--dark-text) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .44) !important;
}

body.dark-mode .panel-head,
body.dark-mode .modal-head,
body.dark-mode .window-tabs,
body.dark-mode .lp-toolbar,
body.dark-mode .lp-scale-bar,
body.dark-mode .admin-toolbar,
body.dark-mode .activity-modal-footer,
body.dark-mode .schedule-edit-actions,
body.dark-mode .admin-wiki-head {
  background: linear-gradient(180deg, #242a32, #1c2128) !important;
  border-color: var(--dark-line-soft) !important;
  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 {
  background: linear-gradient(180deg, #22272f, #1b2027) !important;
  border-color: var(--dark-line) !important;
  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 {
  color: #f7fafc !important;
  text-shadow: none !important;
}

body.dark-mode span,
body.dark-mode small,
body.dark-mode p,
body.dark-mode label,
body.dark-mode .panel-head span,
body.dark-mode .modal-head span,
body.dark-mode .window-tabs span,
body.dark-mode .lp-title span,
body.dark-mode .lp-toolbar label,
body.dark-mode .schedule-meta,
body.dark-mode .contract-card p,
body.dark-mode .loco small,
body.dark-mode .loco span,
body.dark-mode .admin-data-card span,
body.dark-mode .admin-card-content span,
body.dark-mode .assign-hint,
body.dark-mode .admin-wiki-head span {
  color: var(--dark-muted) !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-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-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 .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 .route-preview span,
body.dark-mode .schedule-detail-grid span {
  color: #b5c0cf !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;
  border-radius: 9px !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;
  border-radius: 8px !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;
  border-radius: 8px !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);
  border-radius: 8px;
  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;
  }
}

/* Final visual system refresh */
:root {
  --app-bg: #eef3f7;
  --app-bg-2: #f8fafc;
  --app-surface: rgba(255, 255, 255, .94);
  --app-surface-solid: #ffffff;
  --app-surface-soft: #f5f8fb;
  --app-line: #d8e2ec;
  --app-line-strong: #bac9d8;
  --app-text: #17202a;
  --app-muted: #5f7083;
  --app-faint: #8292a5;
  --app-blue: #2563eb;
  --app-blue-2: #1d4ed8;
  --app-teal: #0f766e;
  --app-teal-2: #14b8a6;
  --app-amber: #d97706;
  --app-red: #dc2626;
  --app-radius: 10px;
  --app-radius-lg: 14px;
  --app-shadow-sm: 0 2px 8px rgba(15, 23, 42, .07);
  --app-shadow: 0 14px 38px rgba(15, 23, 42, .11);
  --app-shadow-lg: 0 28px 80px rgba(15, 23, 42, .18);
}

body:not(.dark-mode) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(238, 243, 247, .9)),
    var(--app-bg) !important;
  color: var(--app-text) !important;
  text-rendering: geometricPrecision;
}

body:not(.dark-mode):not(.view-maponly) .topbar {
  background: rgba(20, 31, 45, .92) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18) !important;
  backdrop-filter: blur(16px);
}

body:not(.dark-mode) .brand,
body:not(.dark-mode) .topbar strong,
body:not(.dark-mode) .game-clock,
body:not(.dark-mode) .money {
  color: #f8fafc !important;
}

body:not(.dark-mode) .layout,
body:not(.dark-mode).ui-window-design .layout.map-stage {
  background: transparent !important;
}

body:not(.dark-mode) .floating-window,
body:not(.dark-mode) .panel,
body:not(.dark-mode) .side-panel,
body:not(.dark-mode) .modal-card,
body:not(.dark-mode) .window-dock,
body:not(.dark-mode) .admin-card,
body:not(.dark-mode) .shop-modal-card,
body:not(.dark-mode) .activity-modal-card,
body:not(.dark-mode) .account-card,
body:not(.dark-mode) .profile-card,
body:not(.dark-mode) #personnelOverviewModal .personnel-overview-card {
  background: var(--app-surface) !important;
  border: 1px solid rgba(186, 201, 216, .86) !important;
  border-radius: var(--app-radius-lg) !important;
  box-shadow: var(--app-shadow) !important;
  color: var(--app-text) !important;
  backdrop-filter: blur(10px);
}

body:not(.dark-mode) .panel-head,
body:not(.dark-mode) .modal-head,
body:not(.dark-mode) .window-tabs,
body:not(.dark-mode) .admin-toolbar,
body:not(.dark-mode) .activity-modal-footer,
body:not(.dark-mode) .lp-toolbar,
body:not(.dark-mode) .lp-scale-bar,
body:not(.dark-mode) .schedule-edit-actions {
  background: linear-gradient(180deg, #ffffff, #f3f7fb) !important;
  border-color: var(--app-line) !important;
  color: var(--app-text) !important;
}

body:not(.dark-mode) .panel-head h2,
body:not(.dark-mode) .modal-head h2,
body:not(.dark-mode) #planningTitle,
body:not(.dark-mode) .lp-title,
body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) strong {
  color: var(--app-text) !important;
  letter-spacing: 0;
}

body:not(.dark-mode) .panel-head span,
body:not(.dark-mode) .modal-head span,
body:not(.dark-mode) small,
body:not(.dark-mode) .schedule-meta,
body:not(.dark-mode) .contract-card p,
body:not(.dark-mode) .loco span,
body:not(.dark-mode) .loco small,
body:not(.dark-mode) .admin-data-card span,
body:not(.dark-mode) .admin-card-content span,
body:not(.dark-mode) .assign-hint {
  color: var(--app-muted) !important;
}

body:not(.dark-mode) input,
body:not(.dark-mode) select,
body:not(.dark-mode) textarea {
  background: #ffffff !important;
  border: 1px solid var(--app-line-strong) !important;
  border-radius: 9px !important;
  color: var(--app-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body:not(.dark-mode) input:hover,
body:not(.dark-mode) select:hover,
body:not(.dark-mode) textarea:hover {
  border-color: #94a9bd !important;
}

body:not(.dark-mode) input:focus,
body:not(.dark-mode) select:focus,
body:not(.dark-mode) textarea:focus {
  border-color: var(--app-teal) !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .18), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

body:not(.dark-mode) button,
body:not(.dark-mode) .secondary,
body:not(.dark-mode) .icon-button,
body:not(.dark-mode) .time-button,
body:not(.dark-mode) .plus-button,
body:not(.dark-mode) .window-tab,
body:not(.dark-mode) .dock-button,
body:not(.dark-mode) .admin-tab,
body:not(.dark-mode) .planning-side-tab {
  background: #ffffff !important;
  border: 1px solid var(--app-line-strong) !important;
  border-radius: 9px !important;
  color: var(--app-text) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
}

body:not(.dark-mode) button:hover,
body:not(.dark-mode) .secondary:hover,
body:not(.dark-mode) .icon-button:hover,
body:not(.dark-mode) .window-tab:hover,
body:not(.dark-mode) .dock-button:hover,
body:not(.dark-mode) .admin-tab:hover,
body:not(.dark-mode) .planning-side-tab:hover {
  background: #f8fbfd !important;
  border-color: var(--app-teal) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .09) !important;
}

body:not(.dark-mode) .primary,
body:not(.dark-mode) button.primary,
body:not(.dark-mode) .plus-button,
body:not(.dark-mode) .time-button.active,
body:not(.dark-mode) .window-tab.active,
body:not(.dark-mode) .dock-button.active,
body:not(.dark-mode) .admin-tab.active,
body:not(.dark-mode) .planning-side-tab.active,
body:not(.dark-mode) .personnel-overview-tabs button.active,
body:not(.dark-mode) .fleet-filter-tabs .window-tab.active {
  background: linear-gradient(135deg, var(--app-teal), var(--app-blue)) !important;
  border-color: rgba(15, 118, 110, .5) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .18) !important;
}

body:not(.dark-mode) .danger-button,
body:not(.dark-mode) button.danger-button,
body:not(.dark-mode) .admin-delete {
  background: linear-gradient(135deg, #b91c1c, var(--app-red)) !important;
  border-color: rgba(220, 38, 38, .62) !important;
  color: #ffffff !important;
}

body:not(.dark-mode) .shop-card,
body:not(.dark-mode) .schedule-card,
body:not(.dark-mode) .contract-card,
body:not(.dark-mode) .loco,
body:not(.dark-mode) .admin-data-card,
body:not(.dark-mode) .profile-box,
body:not(.dark-mode) .account-entry,
body:not(.dark-mode) .account-summary div,
body:not(.dark-mode) .fleet-item,
body:not(.dark-mode) .fleet-offer,
body:not(.dark-mode) .fleet-media,
body:not(.dark-mode) .training-form-card,
body:not(.dark-mode) .training-list-card,
body:not(.dark-mode) .training-person-check,
body:not(.dark-mode) .training-offer,
body:not(.dark-mode) .personnel-card,
body:not(.dark-mode) .personnel-assignment,
body:not(.dark-mode) .personnel-plan-row,
body:not(.dark-mode) .activity-form-grid label,
body:not(.dark-mode) .activity-times,
body:not(.dark-mode) .activity-trip-preview,
body:not(.dark-mode) .route-preview,
body:not(.dark-mode) .schedule-detail-box,
body:not(.dark-mode) .schedule-detail-grid span,
body:not(.dark-mode) .order-form > label,
body:not(.dark-mode) .order-stops-box,
body:not(.dark-mode) .order-details-box,
body:not(.dark-mode) .planning-side-loco,
body:not(.dark-mode) .planning-side-contract,
body:not(.dark-mode) .planning-side-wagon,
body:not(.dark-mode) .planning-side-schedule,
body:not(.dark-mode) .site-card,
body:not(.dark-mode) .site-upgrade-row,
body:not(.dark-mode) .admin-settings-panel,
body:not(.dark-mode) .search-results,
body:not(.dark-mode) .picker-results,
body:not(.dark-mode) .activity-context-menu,
body:not(.dark-mode) .loading-card {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: var(--app-shadow-sm) !important;
}

body:not(.dark-mode) .shop-card:hover,
body:not(.dark-mode) .schedule-card:hover,
body:not(.dark-mode) .contract-card:hover,
body:not(.dark-mode) .loco:hover,
body:not(.dark-mode) .admin-data-card:hover,
body:not(.dark-mode) .fleet-item:hover,
body:not(.dark-mode) .lp-res-row:hover,
body:not(.dark-mode) .planning-side-loco:hover,
body:not(.dark-mode) .planning-side-contract:hover,
body:not(.dark-mode) .planning-side-wagon:hover,
body:not(.dark-mode) .planning-side-schedule:hover {
  border-color: rgba(15, 118, 110, .42) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .11) !important;
}

body:not(.dark-mode) .schedule-card,
body:not(.dark-mode) .contract-card,
body:not(.dark-mode) .loco,
body:not(.dark-mode) .admin-data-card,
body:not(.dark-mode) .personnel-card,
body:not(.dark-mode) .fleet-item {
  border-left: 4px solid rgba(15, 118, 110, .55) !important;
}

body:not(.dark-mode) .contract-card.archived,
body:not(.dark-mode) .schedule-card.archived {
  border-left-color: var(--app-faint) !important;
  opacity: .9;
}

body:not(.dark-mode) .lp-board,
body:not(.dark-mode) .lp-left,
body:not(.dark-mode) .lp-grid,
body:not(.dark-mode) .lp-grid-wrap,
body:not(.dark-mode) .lp-resource-list,
body:not(.dark-mode) .lp-resource-rows,
body:not(.dark-mode) .lp-hours,
body:not(.dark-mode) .lp-day-group,
body:not(.dark-mode) .lp-day-hours,
body:not(.dark-mode) .lp-row,
body:not(.dark-mode) .lp-head,
body:not(.dark-mode) .lp-day-head,
body:not(.dark-mode) .inline-loco-planner,
body:not(.dark-mode) .loco-planner,
body:not(.dark-mode) .modal-shop-grid,
body:not(.dark-mode) .schedule-list,
body:not(.dark-mode) .contract-list,
body:not(.dark-mode) .archive-list,
body:not(.dark-mode) .radio-log,
body:not(.dark-mode) .admin-tabs,
body:not(.dark-mode) .admin-card-grid,
body:not(.dark-mode) #adminCards {
  background: #f8fafc !important;
  border-color: var(--app-line) !important;
}

body:not(.dark-mode) .lp-res-row {
  background: #ffffff !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

body:not(.dark-mode) .lp-res-row.active,
body:not(.dark-mode) .lp-res-row:hover {
  background: #eefbf9 !important;
  border-color: rgba(15, 118, 110, .42) !important;
}

body:not(.dark-mode) .lp-hour,
body:not(.dark-mode) .lp-row,
body:not(.dark-mode) .lp-day-hours {
  border-color: #e3ebf2 !important;
}

body:not(.dark-mode) .lp-activity {
  box-shadow: 0 5px 14px rgba(15, 23, 42, .18) !important;
  border-color: rgba(255, 255, 255, .72) !important;
}

body:not(.dark-mode) #map,
body:not(.dark-mode) .admin-live-map,
body:not(.dark-mode) .admin-user-map,
body:not(.dark-mode) .activity-trip-map,
body:not(.dark-mode) .order-route-map {
  border-radius: var(--app-radius) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1) !important;
}

body:not(.dark-mode) .global-search input {
  background: rgba(255, 255, 255, .13) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body:not(.dark-mode) .global-search input::placeholder {
  color: rgba(255, 255, 255, .68) !important;
}

body:not(.dark-mode) .window-dock {
  background: rgba(20, 31, 45, .88) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

body:not(.dark-mode) .window-dock .dock-button {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #f8fafc !important;
}

body:not(.dark-mode) .window-dock .dock-button.active {
  background: linear-gradient(135deg, var(--app-teal), var(--app-blue)) !important;
  border-color: rgba(255, 255, 255, .35) !important;
}

body:not(.dark-mode) .modal {
  background: rgba(15, 23, 42, .46) !important;
  backdrop-filter: blur(5px);
}

body:not(.dark-mode) .modal-card {
  box-shadow: var(--app-shadow-lg) !important;
}

body:not(.dark-mode) .loco-marker {
  background: #1d4ed8;
  border-color: #ffffff;
}

body:not(.dark-mode) .loco-marker.running,
body:not(.dark-mode) .car-marker.running,
body:not(.dark-mode) .train-marker {
  background: var(--app-teal);
}

body:not(.dark-mode) .wagon-marker {
  background: var(--app-amber);
}

body:not(.dark-mode) .car-marker {
  background: #0f766e;
}

body:not(.dark-mode) #locoPlanningPanel .panel-head {
  background: linear-gradient(180deg, #1f2937, #182232) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #f8fafc !important;
}

body:not(.dark-mode) #locoPlanningPanel #planningTitle,
body:not(.dark-mode) #locoPlanningPanel #plannerDayLabel {
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #f8fafc !important;
}

body:not(.dark-mode) #locoPlanningPanel .planning-tool-select span,
body:not(.dark-mode) #locoPlanningPanel .planner-range-control span {
  color: rgba(226, 232, 240, .88) !important;
}

body:not(.dark-mode) #locoPlanningPanel .planning-tool-select select,
body:not(.dark-mode) #locoPlanningPanel .planner-range-control input,
body:not(.dark-mode) #locoPlanningPanel #personnelRoleFilter {
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(255, 255, 255, .42) !important;
}

body.dark-mode {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .76), rgba(8, 13, 19, .96)),
    #090d13 !important;
}

body.dark-mode .floating-window,
body.dark-mode .panel,
body.dark-mode .side-panel,
body.dark-mode .modal-card,
body.dark-mode .window-dock {
  border-radius: var(--app-radius-lg) !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 .fleet-item,
body.dark-mode .personnel-card {
  border-left: 4px solid rgba(45, 212, 191, .48) !important;
}

@media (max-width: 760px) {
  body:not(.dark-mode) .floating-window,
  body:not(.dark-mode) .panel,
  body:not(.dark-mode) .side-panel,
  body:not(.dark-mode) .modal-card {
    border-radius: 12px !important;
  }

  body:not(.dark-mode) button,
  body:not(.dark-mode) input,
  body:not(.dark-mode) select {
    min-height: 38px;
  }
}

/* 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;
}

.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;
  border-radius: 7px;
  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;
  border-radius: 7px;
  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 {
  border: 1px solid rgba(255, 255, 255, .68) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .42) !important;
  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;
  border-radius: 10px !important;
}

body.auth-locked.dark-mode #loginModal .login-card {
  border-color: rgba(71, 85, 105, .9) !important;
  background: rgba(15, 23, 42, .94) !important;
  color: #f8fafc !important;
}

body.auth-locked.dark-mode #loginModal .modal-head,
body.auth-locked.dark-mode #loginModal .login-form {
  border-color: rgba(51, 65, 85, .9) !important;
  background: transparent !important;
}

body.auth-locked.dark-mode #loginModal input {
  border-color: #334155 !important;
  background: #0f172a !important;
  color: #f8fafc !important;
}

body.auth-locked.dark-mode #loginModal .modal-head span,
body.auth-locked.dark-mode #loginModal label,
body.auth-locked.dark-mode #loginHint {
  color: #cbd5e1 !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;
  border-radius: 8px !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;
  border-radius: 50%;
}

.password-toggle::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.password-toggle.is-visible::after {
  width: 2px;
  height: 22px;
  border-radius: 999px;
  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;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-radius: 16px !important;
  background: #eef3f8 !important;
  overflow: hidden !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .25) !important;
}

#profileModal .profile-card .modal-head {
  min-height: 64px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #d8e1ec !important;
  background: linear-gradient(180deg, #ffffff, #f3f7fb) !important;
}

#profileModal .profile-card .modal-head h2 {
  color: #0f172a !important;
  font-size: 21px !important;
  letter-spacing: 0 !important;
}

#profileModal .profile-card .modal-head span {
  color: #64748b !important;
  font-size: 13px !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;
  border-radius: 12px !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;
  border-radius: 8px !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-card,
body.dark-mode #profileModal .profile-grid {
  background: #0f172a !important;
}

body.dark-mode #profileModal .profile-card .modal-head,
body.dark-mode #profileModal .profile-box {
  border-color: #334155 !important;
  background: #182232 !important;
}

body.dark-mode #profileModal .profile-card .modal-head {
  background: linear-gradient(180deg, #1e293b, #182232) !important;
}

body.dark-mode #profileModal .profile-card .modal-head h2,
body.dark-mode #profileModal .profile-box strong {
  color: #f8fafc !important;
}

body.dark-mode #profileModal .profile-card .modal-head span,
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) {
  color: #cbd5e1 !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;
  border-radius: 999px;
  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-radius: 0 !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;
  border-radius: 7px !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 {
  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;
  border-radius: 8px !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;
  border-radius: 8px !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;
  border-radius: 8px !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) .panel-head span,
body.ui-window-design:not(.view-maponly) .modal-head span {
  color: #607086 !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 {
  border-radius: 7px !important;
}

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-radius: 8px !important;
  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;
  border-radius: 10px !important;
}

body.ui-window-design:not(.view-maponly) .map-notification-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !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;
  border-radius: 12px !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;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 11px !important;
  border: 1px solid #a9bdd5 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(20, 184, 166, .2) 0 4px, transparent 5px),
    linear-gradient(180deg, #ffffff, #e8f2ff) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 7px 16px rgba(15, 23, 42, .10) !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;
  border: 2px solid #1f6fb8 !important;
  border-radius: 50% !important;
  background:
    linear-gradient(#1f6fb8, #1f6fb8) center / 2px 8px no-repeat,
    linear-gradient(90deg, #1f6fb8, #1f6fb8) 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(31, 111, 184, .34) !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button:hover {
  border-color: #0f766e !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(20, 184, 166, .28) 0 5px, transparent 6px),
    linear-gradient(180deg, #f8ffff, #dff7f4) !important;
  transform: translateY(-1px) scale(1.03) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 9px 20px rgba(15, 118, 110, .18) !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button:hover::before {
  border-color: #0f766e !important;
  background:
    linear-gradient(#0f766e, #0f766e) center / 2px 8px no-repeat,
    linear-gradient(90deg, #0f766e, #0f766e) center / 8px 2px no-repeat !important;
}

body.ui-window-design:not(.view-maponly) #locoList .depot-locate-button:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .35) !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;
  border-radius: 999px !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;
  border-radius: 9px !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;
  border-radius: 999px !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: #475569 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(45, 212, 191, .2) 0 4px, transparent 5px),
    linear-gradient(180deg, #1e293b, #111827) !important;
}

body.dark-mode.ui-window-design:not(.view-maponly) #locoList .depot-locate-button::before {
  border-color: #67e8f9 !important;
  background:
    linear-gradient(#67e8f9, #67e8f9) center / 2px 8px no-repeat,
    linear-gradient(90deg, #67e8f9, #67e8f9) center / 8px 2px no-repeat !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;
  border-radius: 10px !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;
  border-radius: 9px !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;
  }
}

/* Shop 95 percent viewport redesign */
#shopModal .shop-modal-card,
.shop-modal-card {
  width: 95vw !important;
  height: 95vh !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
  display: grid !important;
  grid-template-rows: 8% 92% !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

#shopModal .shop-modal-card .modal-head {
  min-height: 0 !important;
  height: 100% !important;
  padding: 1% 1.25% !important;
}

#shopModal .modal-shop-grid {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 18% 82% !important;
  grid-template-rows: 7% 7% 86% !important;
  grid-template-areas:
    "notice notice"
    "tabs info"
    "content content" !important;
  gap: 1% !important;
  padding: 1% !important;
  overflow: hidden !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;
}

#shopModal .shop-section {
  grid-area: content !important;
  min-height: 0 !important;
  height: 100% !important;
  display: none !important;
  grid-template-rows: 5% 95% !important;
  overflow: hidden !important;
}

#shopModal .shop-section.active {
  display: grid !important;
}

#shopModal .shop-section .sub-head {
  min-height: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 .5% !important;
}

#shopModal .shop-row {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 32%) !important;
  grid-auto-rows: minmax(56%, auto) !important;
  justify-content: space-between !important;
  gap: 2% !important;
  overflow-y: auto !important;
  padding: .5% !important;
}

#shopModal .shop-card {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 42% 9% 11% 9% 9% 14% !important;
  gap: 1.5% !important;
  padding: 4% !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

#shopModal .shop-card .vehicle-image {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

#shopModal .shop-acquire-controls {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 20% 40% 40% !important;
  gap: 2% !important;
}

#shopModal .shop-card button,
#shopModal .shop-card select,
#shopModal .shop-card input {
  min-height: 0 !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: 900px) {
  #shopModal .modal-shop-grid {
    grid-template-columns: 100% !important;
    grid-template-rows: 7% 7% 7% 79% !important;
    grid-template-areas:
      "notice"
      "tabs"
      "info"
      "content" !important;
  }

  #shopModal .shop-row {
    grid-template-columns: repeat(2, 49%) !important;
    gap: 2% !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;
  }
}

/* Final shop and hotel search cleanup */
#shopModal .shop-modal-card {
  width: 95vw !important;
  height: 95vh !important;
  max-width: 95vw !important;
  max-height: 95vh !important;
  display: grid !important;
  grid-template-rows: 8% 92% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f5f8fb !important;
}

#shopModal .shop-modal-card .modal-head {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 1.2% !important;
  background: #ffffff !important;
  border-bottom: 1px solid #d7e1ed !important;
}

#shopModal .shop-modal-card .modal-head h2 {
  font-size: 17px !important;
}

#shopModal .shop-modal-card .modal-head span {
  display: none !important;
}

#shopModal .modal-shop-grid {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 16% 84% !important;
  grid-template-rows: 8% 8% 84% !important;
  grid-template-areas:
    "notice notice"
    "tabs info"
    "content content" !important;
  gap: 1% !important;
  padding: 1% !important;
  overflow: hidden !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;
  border-radius: 8px !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-radius: 8px !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-section {
  grid-area: content !important;
  min-height: 0 !important;
  height: 100% !important;
  display: none !important;
  grid-template-rows: 6% 94% !important;
  overflow: hidden !important;
}

#shopModal .shop-section.active {
  display: grid !important;
}

#shopModal .shop-section .sub-head {
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 .5% !important;
  color: #1f2937 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#shopModal .shop-row {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 32%) !important;
  grid-auto-rows: 31% !important;
  justify-content: space-between !important;
  gap: 2% !important;
  padding: .3% .3% 1% !important;
  overflow-y: auto !important;
  align-content: start !important;
}

#shopModal .shop-card {
  position: relative !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 38% 60% !important;
  grid-template-rows: 18% 16% 16% 16% 24% !important;
  column-gap: 2% !important;
  row-gap: 2% !important;
  padding: 2% !important;
  overflow: hidden !important;
  border: 1px solid #d3deeb !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
}

#shopModal .shop-card .vehicle-image {
  grid-column: 1 !important;
  grid-row: 1 / 6 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 8px !important;
  background: #eef3f8 !important;
}

#shopModal .shop-card .vehicle-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 4% !important;
}

#shopModal .shop-card strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  align-self: end !important;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#shopModal .shop-card > span,
#shopModal .shop-location-select,
#shopModal .cargo-icons {
  grid-column: 2 !important;
  min-width: 0 !important;
  align-self: center !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  overflow: hidden !important;
}

#shopModal .shop-card > span:nth-of-type(1) {
  grid-row: 2 !important;
}

#shopModal .shop-card > span:nth-of-type(2),
#shopModal .shop-location-select,
#shopModal .cargo-icons {
  grid-row: 3 !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 .shop-acquire-controls {
  grid-column: 2 !important;
  grid-row: 5 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 18% 40% 40% !important;
  gap: 2% !important;
  align-items: stretch !important;
}

#shopModal .car-card .shop-acquire-controls {
  grid-template-columns: 24% 74% !important;
}

#shopModal .shop-card button,
#shopModal .shop-card select,
#shopModal .shop-card input {
  min-height: 0 !important;
  height: 100% !important;
  max-width: 100% !important;
  border-radius: 7px !important;
  font-size: 11px !important;
}

#shopModal .shop-card .shop-info-button {
  position: absolute !important;
  top: 3% !important;
  right: 2% !important;
  width: 28px !important;
  height: 22px !important;
  min-height: 22px !important;
  z-index: 3 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !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-card .modal-head,
.hotel-activity-card .modal-actions {
  min-height: 0 !important;
  height: 100% !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;
  border-radius: 8px !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;
  border-radius: 7px !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;
  border-radius: 8px !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) {
  #shopModal .shop-row {
    grid-template-columns: repeat(2, 49%) !important;
  }

  .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;
  }
}

/* Final modal header and hotel action polish */
#shopModal .shop-modal-card {
  grid-template-rows: 5.5% 94.5% !important;
}

#shopModal .shop-modal-card .modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 .9% !important;
  border-bottom: 1px solid #cfd9e6 !important;
  background: linear-gradient(180deg, #ffffff, #f3f7fb) !important;
}

#shopModal .shop-modal-card .modal-head > div {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#shopModal .shop-modal-card .modal-head h2 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#shopModal .shop-modal-card .modal-head h2::before {
  content: "Shop";
  display: inline-grid;
  place-items: center;
  height: 24px;
  min-width: 46px;
  margin-right: 10px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

#shopModal #closeShopModal {
  width: 32px !important;
  height: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 9px !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;
}

#shopModal .modal-shop-grid {
  grid-template-rows: 7.5% 7.5% 85% !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;
  border-radius: 10px !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 zoom */
#shopModal .shop-card .vehicle-image {
  cursor: zoom-in !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;
  border: 1px solid #cbd8e7;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .38);
}

.shop-image-head {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  padding: 0 1.2%;
  border-bottom: 1px solid #d7e1ed;
  background: linear-gradient(180deg, #ffffff, #f4f8fc);
}

.shop-image-head strong {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 16px;
  font-weight: 900;
}

.shop-image-head strong::before {
  content: "Bild";
  display: inline-grid;
  place-items: center;
  height: 24px;
  min-width: 46px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.shop-image-close {
  width: 34px;
  height: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #b9c8d8;
  border-radius: 9px;
  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;
  border-radius: 10px !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;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1px #dbe5f0 !important;
}

body.dark-mode .shop-image-dialog,
body.dark-mode .shop-image-head,
body.dark-mode .shop-image-stage .shop-image-large {
  background: #111827 !important;
  border-color: #334155 !important;
}

body.dark-mode .shop-image-head strong {
  color: #f8fafc !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;
  border-radius: 9px !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;
  border-radius: 999px !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;
  border-radius: 9px !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-radius: 10px !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-radius: 10px !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;
  border-radius: 9px !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;
}

/* Final polish: top controls, marker icons and notification dark mode */
.time-controls .time-button {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 34px !important;
  min-height: 34px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#multiplayerButton {
  position: relative !important;
}

#multiplayerButton::after {
  content: "" !important;
  position: absolute !important;
  right: 4px !important;
  top: 4px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #ef4444 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, .14) !important;
}

#multiplayerButton.company-mode::after {
  background: #22c55e !important;
}

#multiplayerButton:disabled::after {
  background: #94a3b8 !important;
}

.time-controls .time-button[data-speed="0"] {
  position: relative !important;
  min-width: 64px !important;
  padding: 0 12px 0 25px !important;
  border-color: rgba(148, 163, 184, .34) !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.time-controls .time-button[data-speed="0"]::before {
  content: "" !important;
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: translateY(-50%) !important;
  opacity: .72 !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;
  box-shadow: 0 7px 16px rgba(15, 118, 110, .22), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.time-controls .time-button[data-speed="0"].active::before {
  opacity: 1 !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, .18) !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;
}

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 .shop-modal-card,
body.dark-mode .shop-modal-card {
  background: #0b1220 !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #e5edf7 !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .52) !important;
}

body.dark-mode #shopModal .shop-modal-card .modal-head {
  background: linear-gradient(180deg, #111c2f, #0b1220) !important;
  border-bottom-color: rgba(148, 163, 184, .24) !important;
}

body.dark-mode #shopModal .shop-modal-card .modal-head h2 {
  color: #f8fafc !important;
}

body.dark-mode #shopModal #closeShopModal {
  background: #162338 !important;
  border-color: #3a4c65 !important;
  color: #e5edf7 !important;
}

body.dark-mode #shopModal .modal-shop-grid {
  background: #0b1220 !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 #shopModal .shop-section .sub-head {
  color: #f8fafc !important;
}

body.dark-mode #shopModal .shop-row {
  background: transparent !important;
}

body.dark-mode #shopModal .shop-card {
  background: linear-gradient(180deg, #111827, #0d1625) !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #e5edf7 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34) !important;
}

body.dark-mode #shopModal .shop-card:hover {
  border-color: rgba(45, 212, 191, .55) !important;
  background: linear-gradient(180deg, #142033, #101b2d) !important;
}

body.dark-mode #shopModal .shop-card .vehicle-image {
  background: #0b1220 !important;
  border-color: rgba(148, 163, 184, .30) !important;
}

body.dark-mode #shopModal .shop-card strong {
  color: #f8fafc !important;
}

body.dark-mode #shopModal .shop-card > span,
body.dark-mode #shopModal .shop-location-select,
body.dark-mode #shopModal .cargo-icons {
  color: #cbd5e1 !important;
}

body.dark-mode #shopModal .shop-acquire-controls button,
body.dark-mode #shopModal .shop-acquire-controls input,
body.dark-mode #shopModal .shop-card select {
  background: #182235 !important;
  border-color: rgba(148, 163, 184, .34) !important;
  color: #f8fafc !important;
}

body.dark-mode #shopModal .shop-acquire-controls button {
  background: #1f2937 !important;
}

body.dark-mode #shopModal .shop-card .shop-info-button {
  background: #111827 !important;
  border-color: rgba(148, 163, 184, .38) !important;
  color: #dbeafe !important;
}

body.dark-mode #baseModal .base-modal-card,
body.dark-mode .base-modal-card {
  background: #0b1220 !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #e5edf7 !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .52) !important;
}

body.dark-mode #baseModal .modal-head {
  background: linear-gradient(180deg, #111c2f, #0b1220) !important;
  border-bottom-color: rgba(148, 163, 184, .24) !important;
}

body.dark-mode #baseModal .modal-head h2 {
  color: #f8fafc !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(1120px, 95vw);
  height: min(820px, 95vh);
  border-radius: 14px;
  overflow: hidden;
}

.track-rental-card .modal-head {
  min-height: 72px;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.track-rental-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(180px, 34%) auto;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  background: #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;
  border-radius: 10px;
  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;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.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-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;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.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-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;
}

body.dark-mode .track-rental-card,
body.dark-mode .track-rental-body,
body.dark-mode .track-rental-section {
  background: #0b1220 !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #e5edf7 !important;
}

body.dark-mode .track-rental-card .modal-head,
body.dark-mode .track-rental-section-head {
  background: linear-gradient(180deg, #111c2f, #0b1220) !important;
  border-color: rgba(148, 163, 184, .24) !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 h3,
body.dark-mode .track-rental-offer strong,
body.dark-mode .track-rental-active strong,
body.dark-mode .track-rental-card .modal-head h2 {
  color: #f8fafc !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-active b,
body.dark-mode .track-rental-required {
  color: #5eead4 !important;
}

@media (max-width: 860px) {
  .track-rental-row,
  .track-rental-controls,
  .track-rental-offer,
  .track-rental-active {
    grid-template-columns: 1fr;
  }

  .track-rental-body {
    grid-template-rows: auto minmax(0, 1fr) minmax(160px, 32%) auto;
  }
}

.admin-inline-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 12px;
  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-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;
  border-radius: 10px;
  background: #eef5fb;
}

.admin-track-filter button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  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;
  border-radius: 9px;
  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;
  border-radius: 12px;
  background: #fff;
}

.admin-track-selected {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  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;
  border-radius: 10px;
  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-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 {
  background: #0b1220;
  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;
  border-radius: 10px;
  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;
  border-radius: 9px;
  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: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;
  border-radius: 10px;
  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;
  border-radius: 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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  border-radius: 8px;
  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;
  }
}

/* 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 {
  border: 1px solid rgba(148, 163, 184, .34);
  background: rgba(15, 23, 42, .9) !important;
  color: #e5edf7;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .04) inset !important;
  backdrop-filter: blur(18px) saturate(1.08);
}

body.auth-locked .login-card .modal-head {
  border-bottom-color: rgba(148, 163, 184, .28);
  background: linear-gradient(180deg, rgba(30, 41, 59, .82), rgba(15, 23, 42, .72));
}

body.auth-locked .login-card h2,
body.auth-locked .login-card label {
  color: #f8fafc;
}

body.auth-locked .login-card .modal-head span,
body.auth-locked .login-card .assign-hint {
  color: #cbd5e1;
}

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);
  border-radius: 10px;
  background: rgba(8, 17, 31, .72);
}

body.auth-locked .auth-tabs button {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #cbd5e1;
}

body.auth-locked .auth-tabs button.active {
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #ffffff;
}

/* Final shop category tab polish */
#shopModal .modal-shop-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  grid-template-areas:
    "notice"
    "tabs"
    "info"
    "content" !important;
  align-content: stretch !important;
  gap: 12px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#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;
  border-radius: 8px !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(4, 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;
  border-radius: 10px !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;
  border-radius: 8px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#shopModal .shop-section {
  grid-area: content !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#shopModal .shop-section.active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
}

#shopModal .shop-section .sub-head {
  margin: 0 !important;
  padding: 2px 2px 0 !important;
}

#shopModal .shop-row {
  min-height: 0 !important;
  overflow: auto !important;
  padding-right: 6px !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;
  }
}