/* Ergänzungen zu Tabler (vendor/tabler.min.css) */

.tab { display: none; }
.tab.active { display: block; }

.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--tblr-border-radius);
  background: #ffcc00; color: #1d1d1b; margin-right: .5rem;
}
.brand-mark .icon { width: 1.25rem; height: 1.25rem; margin: 0; }

/* Reiter: auf dem Handy seitlich scrollbar statt Umbruch */
.navbar-tabs .navbar-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.navbar-tabs .navbar-nav::-webkit-scrollbar { display: none; }
.navbar-tabs .nav-link { white-space: nowrap; }

/* Linien-Kennzeichen nach Verkehrsmittel */
.line {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 1.5rem; padding: 0 .45rem;
  border-radius: 4px; font-weight: 700; font-size: .8125rem; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mode-sbahn { background: #008d4f; color: #fff; }
.mode-bus { background: #ffcc00; color: #1d1d1b; }
.mode-ubahn { background: #0065ae; color: #fff; }
.mode-tram { background: #d7191c; color: #fff; }
.mode-regio { background: #5d636c; color: #fff; }
.mode-fern { background: #fff; color: #ec0016; box-shadow: inset 0 0 0 2px #ec0016; }
.mode-sev { background: #e5007d; color: #fff; }
.mode-other { background: var(--tblr-secondary); color: #fff; }

/* Sortieren per Drag & Drop */
.drag-handle { cursor: grab; color: var(--tblr-secondary); touch-action: none; padding: .25rem; margin: -.25rem .25rem -.25rem -.5rem; }
.drag-handle:active { cursor: grabbing; }
.sort-ghost { opacity: .35; }
/* leere Gruppe bleibt Ablagefläche fürs Hineinziehen */
.watch-list:empty::after { content: "Leer – Überwachungen am Griff hierher ziehen"; display: block; padding: .9rem 1rem; color: var(--tblr-secondary); font-size: .875rem; }
#overview-groups .row-cards:empty::after { content: "Leer"; display: block; padding: .5rem .75rem; color: var(--tblr-secondary); font-size: .875rem; }
.sort-chosen { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); }

.time-planned { font-variant-numeric: tabular-nums; }
.time-changed { text-decoration: line-through; color: var(--tblr-secondary); }
tr.departed td { opacity: .5; }

/* Haltestellensuche */
.picker { position: relative; }
.picker .dropdown-menu { width: 100%; max-height: 18rem; overflow-y: auto; top: 100%; left: 0; margin-top: .25rem; }

/* Linienauswahl */
.line-chip {
  display: inline-flex; align-items: flex-start; gap: .5rem; text-align: left;
  padding: .5rem .65rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface); color: inherit; cursor: pointer; max-width: 100%;
}
.line-chip:hover { border-color: var(--tblr-primary); }
.line-chip.active { border-color: var(--tblr-primary); box-shadow: inset 0 0 0 1px var(--tblr-primary); background: var(--tblr-primary-lt); }
.line-chip .sub { display: block; font-size: .75rem; color: var(--tblr-secondary); }

.log-body { white-space: pre-wrap; }
.min-w-0 { min-width: 0; }

/* LED-Laufschrift */
.led-frame {
  background: #141210; border: 1px solid #2b2621; border-radius: 10px; padding: 8px 10px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .85), 0 1px 2px rgba(0, 0, 0, .15);
}
.led-screen { line-height: 0; overflow: hidden; }
.led-screen canvas { display: block; border-radius: 3px; }

/* Handy: Abfahrtstabellen ohne seitliches Scrollen */
.card-table td.dir { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  /* Selektor muss spezifischer sein als Tablers ".table>:not(caption)>*>*" und ".card-table tr td:first-child" */
  .card .table.card-table > tbody > tr > td { padding: .5rem .3rem; }
  .card .table.card-table > tbody > tr > td:first-child { padding-left: .75rem; }
  .card .table.card-table > tbody > tr > td:last-child { padding-right: .75rem; }
  .line { min-width: 2.3rem; padding: 0 .35rem; }
  .card-table .badge { padding-left: .35rem; padding-right: .35rem; }
}

/* Briefing-Vorschau: wie die Nachricht aussieht */
.briefing-preview { border-left: 3px solid var(--tblr-primary); background: var(--tblr-bg-surface-secondary); padding: .75rem 1rem; border-radius: var(--tblr-border-radius); }

/* Abfahrtstafeln: jede Tafel sitzt mit kleinem Spalt direkt unter der darüber, auch wenn die
   Nachbarspalte höher ist (Spalten statt Zeilen – keine Löcher). Ab 992 px zwei Spalten, darunter eine. */
.board-grid { --board-gap: .5rem; column-count: 1; column-gap: var(--board-gap); }
@media (min-width: 992px) { .board-grid { column-count: 2; } }
.board-cell { break-inside: avoid; padding-bottom: var(--board-gap); }  /* Padding statt Margin: bricht nicht an den Spaltenanfang um */