:root {
  /* App-Shell-Farbton 1:1 von demo.carla.cargopulse.de/main.php uebernommen
     (Header/Navbar/Sidebar dort gemessen: rgb(34,45,50)). */
  --chi-shell: #222d32;
  --chi-red: #ce0538;
  --chi-red-dark: #a3042c;
  --chi-green: #1f9254;
}

body {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.main-header .logo,
.main-header .navbar {
  background-color: var(--chi-shell) !important;
}
.main-header .logo:hover {
  background-color: var(--chi-shell) !important;
}
.skin-black .main-header .logo,
.skin-black .main-header .logo b {
  color: #fff;
}
.skin-black .main-sidebar {
  background-color: var(--chi-shell) !important;
}
.skin-black .sidebar-menu > li.header {
  color: #ce0538;
}
.skin-black .sidebar-menu > li.active > a,
.skin-black .sidebar-menu > li:hover > a {
  border-left-color: var(--chi-red) !important;
}
/* skin-black bringt fuer seinen hellen Original-Header graue Trennlinien
   (#eee um Logo/Sidebar-Toggle/Benutzermenue) und dunkle Schrift mit - auf
   unserem dunklen Cargopulse-Header wirken die Linien wie weisse Striche
   und "Test Dispatcher" ist kaum lesbar. Linien weg, Schrift weiss. */
.skin-black .main-header > .logo,
.skin-black .main-header > .navbar > .sidebar-toggle,
.skin-black .main-header > .navbar .nav > li > a,
.skin-black .main-header > .navbar .navbar-custom-menu .navbar-nav > li > a {
  border-left: none !important;
  border-right: none !important;
  color: #fff !important;
}
.skin-black .main-header > .navbar > .sidebar-toggle:hover,
.skin-black .main-header > .navbar .nav > li > a:hover {
  background-color: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
.btn-primary, .label-primary {
  background-color: var(--chi-red) !important;
  border-color: var(--chi-red-dark) !important;
}

/* --- Dispatch board (main.php) --- */
.pmc-row {
  cursor: move;
}
.pmc-row td {
  vertical-align: middle !important;
}
.pmc-row.pmc-highlight {
  background-color: #ffe9ee !important;
}
.pmc-row.pmc-prio {
  background-color: #fff8e1 !important;
}
.pmc-prio-toggle {
  cursor: pointer;
  font-size: 15px;
}
.pmc-prio-toggle.text-warning {
  color: #f0ad4e;
}
.th-sortable {
  cursor: pointer;
  user-select: none;
}
.th-sortable:hover {
  color: var(--chi-red);
}
.pmc-verlauf-icon {
  font-size: 12px;
  margin-left: 4px;
}
.box-header .box-tools {
  position: static;
  float: right;
  margin-top: -4px;
}
#pmc-search {
  width: 280px;
  max-width: 100%;
  display: inline-block;
}
.status-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
}
.status-unterwegs { background-color: #f0ad4e; }
.status-abgestellt { background-color: var(--chi-red); }

.truck-drop-zone {
  min-height: 6px;
}
.truck-drop-zone.ui-droppable-active {
  background-color: #fff6f7;
  outline: 2px dashed var(--chi-red);
}
.truck-drop-zone.ui-droppable-hover {
  background-color: #ffe0e6;
}
.truck-row.truck-busy {
  opacity: 0.7;
}
.assigned-pmc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.assigned-pmc-list li {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  margin: 3px 0;
  cursor: grab;
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.assigned-pmc-list li .seq {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: var(--chi-black);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  margin-right: 6px;
}
.assigned-pmc-list .remove-assignment {
  color: var(--chi-red-dark);
  cursor: pointer;
}
#map-modal-body {
  height: 400px;
  width: 100%;
}

.stop-status-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
}
.stop-status-list li {
  margin-bottom: 2px;
}

/* Beladen-/Entladen-Zeitstempel der aktuellen Tour im LKW-Panel (siehe
   includes/lkw_row.php) - kompakte Matrix: Zeilen Beladen/Entladen,
   Spalten Ankunft/Fertig/Abfahrt. Noch nicht gesetzte Werte als "-". */
.ladephase-mini {
  margin-top: 6px;
  font-size: 11px;
  border-collapse: collapse;
}
.ladephase-mini th,
.ladephase-mini td {
  padding: 1px 8px 1px 0;
  text-align: left;
  font-weight: normal;
  color: #777;
  white-space: nowrap;
}
.ladephase-mini thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #aaa;
}
.ladephase-mini tbody th {
  font-weight: 600;
  color: #555;
  padding-right: 10px;
}
.ladephase-mini td.gesetzt {
  color: #00a65a;
  font-weight: 600;
}

/* "Offene PMCs": kompakte 7-Spalten-Struktur (siehe includes/pmc_row.php) -
   Hauptwert oben, Nebenwert (.pmc-neben) gedaempft darunter, nichts darf
   die Zeile in die Breite treiben. */
#pmc-table > tbody > tr > td,
#pmc-table > thead > tr > th {
  padding: 5px 6px;
  vertical-align: top;
}
#pmc-table {
  font-size: 12.5px;
}
.pmc-neben {
  font-size: 11px;
  color: #999;
  margin-top: 1px;
  white-space: nowrap;
}

/* Letzte Fahrer-Ablehnung direkt unter der PMC-Nummer - Grund fett,
   LKW+Zeit gedaempft dahinter. Immer EINE Zeile, Ueberlauf wird
   abgeschnitten (voller Text im title-Tooltip); die komplette History
   bleibt im Verlauf (Doppelklick). */
.pmc-ablehnung {
  display: block;
  margin-top: 3px;
  padding: 2px 7px;
  background: #fdecef;
  border: 1px solid #f3c2ce;
  border-radius: 4px;
  font-size: 11px;
  color: var(--chi-red-dark, #a3042c);
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmc-ablehnung span {
  color: #b06a7c;
}

/* Filterleiste "Beendete Touren" (beendete_touren.php): Suche + Selects +
   Zeitraum nebeneinander im Box-Header. */
.bt-filterleiste {
  display: flex;
  gap: 6px;
  align-items: center;
}
.bt-filterleiste #bt-search { width: 240px; }
.bt-filterleiste select,
.bt-filterleiste input[type="date"] { width: auto; }

/* Umbuchen-Modal (#rebook-modal in main.php): schmaler als Bootstraps
   600px-Default, aber breit genug, dass die Tour-Nummer im Titel nicht
   umbricht. Nur ab Tablet-Breite fixieren - darunter laesst Bootstrap den
   Dialog ohnehin auf volle Breite laufen. */
@media (min-width: 768px) {
  .rebook-dialog {
    width: 440px;
  }
}

/* Kurzes Aufblitzen, wenn main.js beim Live-Refresh eine Aenderung am
   Tour-/Stopp-Status erkennt (z.B. Fahrer hat gerade angenommen). */
@keyframes chi-status-flash {
  0% { background-color: #fff8c4; }
  100% { background-color: transparent; }
}
.status-changed {
  animation: chi-status-flash 2.5s ease-out;
}