/* ========================================================================== BKF-Plantafel :: Stylesheet Keine Inline-Styles im HTML (AGENTS.md). Statusfarben exakt nach Vorgabe: offen=rot, disponiert=grün, subunternehmer=hellgrün, abgerechnet=gelb. ========================================================================== */ :root { --bg: #f4f6f9; --surface: #ffffff; --border: #d9dee7; --text: #1f2733; --muted: #66707e; --primary: #1f5fa8; --primary-d: #17497f; /* Statusfarben (verbindlich) */ --status-offen: #e23b3b; /* rot */ --status-disponiert: #2f9e44; /* grün */ --status-subunternehmer: #8ce99a; /* hellgrün */ --status-abgeschlossen: #1098ad; /* teal – erledigt, bereit zum Abrechnen */ --status-abgerechnet: #f2c200; /* gelb */ --status-sonstiges: #7048e8; /* lila */ --status-storniert: #ced4da; /* grau – rechtzeitig abgesagt */ --status-offen-ink: #ffffff; --status-disponiert-ink: #ffffff; --status-subunternehmer-ink: #17491f; --status-abgeschlossen-ink: #ffffff; --status-abgerechnet-ink: #4a3a00; --status-sonstiges-ink: #ffffff; --status-storniert-ink: #495057; --radius: 8px; --shadow: 0 1px 3px rgba(20, 30, 50, .12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; font-size: 15px; color: var(--text); background: var(--bg); } /* Kein horizontales Scrollen der Gesamtseite: einzelne breite Blöcke (Tabellen, Zeitstrahl) scrollen in ihrem eigenen Container (.table-wrap etc.). WICHTIG: `clip` statt `hidden` – `overflow:hidden` würde aus einen Scroll-Container machen und `position: sticky` der Topbar (mobil) aushebeln. `clip` kappt nur den Überlauf, ohne Scroll-Container/Sticky-Bruch. */ html { overflow-x: clip; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Topbar / Navigation ---------- */ .topbar { display: flex; align-items: center; gap: 24px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 20px; height: 56px; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; } .brand { font-weight: 700; font-size: 18px; color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { background: var(--primary); color: #fff; padding: 2px 7px; border-radius: 6px; margin-right: 4px; font-size: 14px; } /* min-width:0 + overflow-x:auto: reicht die (lange) Disponenten-Navigation nicht in eine Zeile (z. B. iPad quer, schmale Laptops oberhalb der Burger-Schwelle), scrollt sie INNERHALB der Leiste statt die ganze Seite horizontal aufzudehnen. */ .mainnav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; } .mainnav a { padding: 8px 12px; border-radius: 6px; color: var(--muted); font-weight: 500; white-space: nowrap; flex: none; } .mainnav a:hover { background: var(--bg); text-decoration: none; } .mainnav a.active { color: var(--primary); background: #eaf2fb; } .userbox { display: flex; align-items: center; gap: 12px; } /* Lange Namen (z. B. Support-Modus „Supervisor · ") kürzen und per title-Tooltip vollständig anzeigen – lässt mehr Platz für die Navigation. Die volle Info steht ohnehin in der Support-/Impersonation-Leiste darunter. */ .username { color: var(--muted); font-size: 14px; max-width: 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Mobiler Navigations-Umschalter (Hamburger). CSS-only per Checkbox-Hack: Auf schmalen Screens klappt die Navigation als Panel unter die Topbar. */ .nav-burger { display: none; } .nav-burger__lines, .nav-burger__lines::before, .nav-burger__lines::after { content: ""; display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; } .nav-burger__lines { position: relative; } .nav-burger__lines::before { position: absolute; top: -7px; left: 0; } .nav-burger__lines::after { position: absolute; top: 7px; left: 0; } /* Globale Suche im Header */ .topsearch { display: flex; align-items: center; flex: none; } .topsearch .search-input { min-width: 0; width: 210px; padding: 6px 10px; } @media (max-width: 1100px) { .topsearch .search-input { width: 140px; } } .logout-form { margin: 0; } .btn-link { background: none; border: none; color: var(--primary); cursor: pointer; font: inherit; padding: 0; } .btn-link:hover { text-decoration: underline; } /* Topbar auf schmalen Screens + Tablets (iPad quer bis 11"/1194px): Navigation einklappen, damit die lange Disponenten-Navigation nichts über den Rand schiebt. Schwelle 1200px deckt iPad-Landscape inkl. Air/Pro 11" ab und bleibt unter üblichen Laptop-Breiten (1366+); breitere Screens zeigen die Nav inline (und scrollen sie notfalls intern, siehe .mainnav). */ @media (max-width: 1200px) { .topbar { flex-wrap: wrap; gap: 0 14px; height: auto; min-height: 56px; padding: 8px 16px; } .brand { margin-right: auto; } .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; flex: none; } /* Nav, Suche und Nutzerbox als volle Zeilen unter die Topbar legen und standardmäßig verbergen – erst beim Antippen des Burgers ausklappen. */ .mainnav, .topsearch, .userbox { flex-basis: 100%; display: none; } .nav-toggle:checked ~ .mainnav, .nav-toggle:checked ~ .topsearch, .nav-toggle:checked ~ .userbox { display: flex; } .mainnav { flex-direction: column; gap: 2px; padding: 6px 0 2px; /* Langes Menü (Disponent) bei gepinnter Sticky-Leiste scrollbar halten, damit Nutzerbox/Abmelden darunter erreichbar bleiben. */ max-height: 50vh; overflow-y: auto; } .mainnav a { padding: 11px 12px; } .topsearch { padding: 4px 0 6px; } .topsearch .search-input { width: 100%; } .userbox { justify-content: space-between; padding: 8px 0 4px; border-top: 1px solid var(--border); } /* Burger → X, wenn geöffnet. */ .nav-toggle:checked ~ .nav-burger .nav-burger__lines { background: transparent; } .nav-toggle:checked ~ .nav-burger .nav-burger__lines::before { top: 0; transform: rotate(45deg); } .nav-toggle:checked ~ .nav-burger .nav-burger__lines::after { top: 0; transform: rotate(-45deg); } } /* ---------- Content ---------- */ .content { padding: 20px; max-width: 1600px; margin: 0 auto; } /* Breite Ansichten (z. B. Plantafel) nutzen die volle Fensterbreite. */ .content--wide { max-width: none; } .content--guest { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } /* Flash-Meldungen (Fehler/Erfolg) sauber oberhalb der Login-Karte, gleiche Breite. */ .content--guest .flash-stack { width: 360px; max-width: 92vw; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; /* schmale Screens: Aktionen sauber unter den Titel umbrechen */ } .page-head h1 { font-size: 22px; margin: 0; } .page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Formulare in der Aktionsleiste als geschlossene Einheit (Feld + Button bleiben zusammen, brechen nicht einzeln um). */ .page-actions .inline-form { display: inline-flex; align-items: center; gap: 6px; } /* Duplizieren: beschriftetes Zieldatum-Feld (nicht mehr wie ein leeres Suchfeld). */ .dup-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .dup-form input[type="date"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; } .search-form { display: inline-flex; gap: 6px; align-items: center; } .search-input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; min-width: 240px; } /* ---------- Flash ---------- */ .flash-stack { margin-bottom: 16px; display: grid; gap: 8px; } .flash { padding: 10px 14px; border-radius: var(--radius); border: 1px solid transparent; font-size: 14px; } .flash--success { background: #e7f6ec; border-color: #b7e2c4; color: #1c6b34; } .flash--error { background: #fdeaea; border-color: #f4bcbc; color: #a12222; } .flash--info { background: #eaf2fb; border-color: #bcd6f4; color: #1a4d86; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-weight: 500; line-height: 1.2; } .btn:hover { background: var(--bg); text-decoration: none; } .btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn--primary:hover { background: var(--primary-d); } .btn--danger { background: #e23b3b; border-color: #e23b3b; color: #fff; } .btn--danger:hover { background: #c22b2b; } .btn--sm { padding: 4px 9px; font-size: 13px; } .btn--block { display: block; width: 100%; text-align: center; } /* ---------- Forms ---------- */ /* Explizite, schrumpfbare Spalte: eine implizite `auto`-Spalte nutzt die MAX-content-Breite ihres breitesten Kindes und läuft aus dem Container heraus. `minmax(0, 1fr)` bindet die Spalte an die verfügbare Breite. */ .form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .field { display: grid; gap: 5px; } .field > span { font-size: 13px; color: var(--muted); font-weight: 500; } .field--full { grid-column: 1 / -1; } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=datetime-local], select, textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: #fff; width: 100%; /* iOS: native date/datetime/number-Felder haben eine intrinsische Mindestbreite und schrumpfen sonst NICHT unter width:100%. Das würde die Grid-Spalte und damit das ganze Formular breiter als der Viewport machen (horizontales Scrollen). min-width:0 hebt diese Sperre auf. */ min-width: 0; } textarea { min-height: 70px; resize: vertical; } .field-inline { display: flex; align-items: center; gap: 8px; } .field-inline input { width: auto; } .filter-card { margin-bottom: 16px; } .filter-actions { align-items: flex-end; } /* Modernes kombiniertes Monat/Jahr-Feld (ersetzt input[type=month]) */ .month-picker { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 6px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; } .month-picker:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31, 95, 168, .15); } .month-picker select { border: none; background: transparent; padding: 8px 10px; font: inherit; color: var(--text); cursor: pointer; width: auto; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2366707e' stroke-width='1.6'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; padding-right: 26px; } .month-picker select:focus { outline: none; } .month-picker__month { flex: 1; min-width: 0; } .month-picker__year { width: 92px; border-left: 1px solid var(--border); } /* Summen-Kacheln (Spesen) */ .sum-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } @media (max-width: 720px) { .sum-row { grid-template-columns: repeat(2, 1fr); } } .sum-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .sum-k { color: var(--muted); font-size: 13px; } .sum-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .sum-tile--total { background: #eaf2fb; border-color: #bcd6f4; } .sum-tile--total .sum-v { color: var(--primary-d); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } .card + .card { margin-top: 16px; } .card h2 { margin: 0 0 12px; font-size: 17px; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data th, table.data td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); } table.data th { background: #f0f3f8; font-weight: 600; color: var(--muted); white-space: nowrap; } table.data tr:last-child td { border-bottom: none; } table.data tr:hover td { background: #fafbfd; } .num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Statusbadges ---------- */ .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge--offen { background: var(--status-offen); color: var(--status-offen-ink); } .badge--disponiert { background: var(--status-disponiert); color: var(--status-disponiert-ink); } .badge--subunternehmer { background: var(--status-subunternehmer); color: var(--status-subunternehmer-ink); } .badge--abgeschlossen { background: var(--status-abgeschlossen); color: var(--status-abgeschlossen-ink); } .badge--abgerechnet { background: var(--status-abgerechnet); color: var(--status-abgerechnet-ink); } .badge--sonstiges { background: var(--status-sonstiges); color: var(--status-sonstiges-ink); } .badge--storniert { background: var(--status-storniert); color: var(--status-storniert-ink); } .badge--erfasst { background: #d0ebff; color: #1156a0; } .badge--geprueft { background: #d3f9d8; color: #24632f; } .badge--eingereicht { background: #fff3bf; color: #806100; } .badge--erstattet { background: #d3f9d8; color: #24632f; } .badge--neutral { background: #e9ecf2; color: #55606f; } /* ---------- Login ---------- */ .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(20, 30, 50, .12); padding: 32px; width: 360px; max-width: 92vw; } .login-card h1 { margin: 0 0 4px; font-size: 24px; overflow-wrap: break-word; hyphens: auto; } .login-sub { margin: 0 0 22px; color: var(--muted); } .login-hint { margin-top: 18px; font-size: 13px; color: var(--muted); } .login-hint code { background: var(--bg); padding: 1px 5px; border-radius: 4px; } /* ---------- Utilities ---------- */ .muted { color: var(--muted); } .small { font-size: 13px; } .mt0 { margin-top: 0; } .mt16 { margin-top: 16px; } .stack > * + * { margin-top: 12px; } /* flex-wrap: sonst stehen mehrere Buttons (z. B. Begleitschein-Aktionen) in einer nicht umbrechenden Reihe und ragen mobil über den Bildschirmrand hinaus. Da das Begleitschein-Formular ein `display:grid` mit `auto`-Spalte ist, würde diese nicht-umbrechende Reihe zudem die ganze Grid-Spalte breit ziehen. */ .row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .empty { padding: 40px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); } .inline-form { display: inline; margin: 0; } /* Inline-Status (Genehmigung/Unterlagen) direkt in den Eckdaten ändern. */ .status-form { display: inline-flex; align-items: center; vertical-align: middle; } .status-select { width: auto; max-width: 100%; padding: 5px 8px; font-size: 14px; } /* ---------- Filterbar / Chips ---------- */ .filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 500; } .chip:hover { text-decoration: none; background: var(--bg); } .chip--active { background: var(--primary); border-color: var(--primary); color: #fff; } /* ---------- Detail / Definitionsliste ---------- */ .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .detail-grid > .card + .card { margin-top: 0; } /* Karte NACH dem Detail-Grid (z. B. „Begleitscheine") bekommt denselben Abstand nach oben wie zwei aufeinanderfolgende Karten – sonst klebt sie am Grid, weil `.card + .card` hier nicht greift. */ .detail-grid + .card { margin-top: 16px; } @media (max-width: 900px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .detail-grid > .card + .card { margin-top: 16px; } } dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 0; } dl.kv dt { color: var(--muted); font-size: 13px; font-weight: 600; } dl.kv dd { margin: 0; } .filelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .filelist li { display: flex; align-items: center; gap: 8px; } .filelist li .inline-form { margin-left: auto; } /* Rechnungsgruppe: kompakte Auftragsliste + dezenter, aufklappbarer Picker */ .group-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; } .group-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); } .group-list li:last-child { border-bottom: none; } .group-list__main { flex: 1; min-width: 0; } .group-add > summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 14px; width: max-content; } .group-add[open] > summary { margin-bottom: 6px; } /* Such-Kombifeld (durchsuchbares "Select") */ .combo { position: relative; } .combo .combo-input { width: 100%; } .combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; } .combo-head { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 6px 8px 2px; position: sticky; top: -4px; background: var(--surface); } .combo-opt { padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; } .combo-opt:hover { background: #eaf2fb; } /* Gruppen-Überschriftszeile in Tabellen (z. B. Eigene Fahrer / Subunternehmer) */ .list-group-row td { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--bg); } /* ========================================================================== Mobil / Handy (Fahrer nutzen viel iPhone): mehrspaltige Layouts auf eine Spalte umbrechen und lange Werte umbrechen, damit nichts breiter als der Bildschirm wird (kein horizontales Verzerren/Zoomen). ========================================================================== */ /* Lange, umbruchlose Werte (E-Mail, Route, Kennzeichen, Dateiname) umbrechen. */ dl.kv dd, .portal-info, .portal-title, .group-list__main, .filelist a { overflow-wrap: anywhere; } @media (max-width: 720px) { .form-grid { grid-template-columns: minmax(0, 1fr); } dl.kv { grid-template-columns: 120px 1fr; gap: 6px 10px; } .portal-card-head { flex-wrap: wrap; } /* Filter-/Suchfelder dürfen die feste Mindestbreite auf schmalen Screens aufgeben, damit sie nicht über den Rand ragen. */ .search-input { min-width: 0; } } @media (max-width: 560px) { .content { padding: 12px; } /* Eckdaten & Karten-Details: Label über Wert statt daneben. */ dl.kv { grid-template-columns: 1fr; gap: 2px 0; } dl.kv dt { margin-top: 8px; } dl.kv dt:first-child { margin-top: 0; } .sum-row { grid-template-columns: 1fr; } .page-actions { flex-wrap: wrap; } } /* ========================================================================== Plantafel / Zeitstrahl ========================================================================== */ .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; } .btn-group .btn:last-child { border-radius: 0 6px 6px 0; } .board-select { width: auto; } .board-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; color: var(--muted); } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.15); } .board-range { margin-left: auto; font-weight: 600; color: var(--text); } /* Statusfarben (Swatches, Pool-Karten, Timeline-Items) */ .st-offen { background: var(--status-offen); color: var(--status-offen-ink); } .st-disponiert { background: var(--status-disponiert); color: var(--status-disponiert-ink); } .st-subunternehmer { background: var(--status-subunternehmer); color: var(--status-subunternehmer-ink); } .st-abgeschlossen { background: var(--status-abgeschlossen); color: var(--status-abgeschlossen-ink); } .st-abgerechnet { background: var(--status-abgerechnet); color: var(--status-abgerechnet-ink); } .st-sonstiges { background: var(--status-sonstiges); color: var(--status-sonstiges-ink); } .st-storniert { background: var(--status-storniert); color: var(--status-storniert-ink); } .conflict-banner { background: #fdeaea; border: 1px solid #f4bcbc; color: #a12222; padding: 8px 14px; border-radius: var(--radius); margin-bottom: 12px; font-size: 14px; } /* Pool-Lane (rote "Dispo-Pool"-Leiste nachgebildet) */ .pool-lane { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--status-offen); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; padding: 10px 14px; } .pool-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .pool-items { display: flex; gap: 8px; flex-wrap: wrap; min-height: 40px; align-items: flex-start; } .pool-empty { padding: 10px; } .pool-card { position: relative; border-radius: 6px; padding: 6px 10px; cursor: pointer; user-select: none; display: flex; flex-direction: column; gap: 2px; max-width: 260px; border: 1px solid rgba(0,0,0,.12); box-shadow: var(--shadow); font-size: 13px; } .pool-card:active { cursor: grabbing; } .pool-cat { font-weight: 700; font-size: 12px; } .pool-kunde { font-weight: 600; line-height: 1.2; } .pool-route { font-size: 12px; line-height: 1.2; } .pool-label { font-weight: 500; line-height: 1.2; } .pool-time { font-size: 12px; } .pool-card.st-offen .pool-time, .pool-card.st-offen .muted { color: rgba(255,255,255,.85); } .pool-picker { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); padding: 6px; min-width: 100%; } .pool-picker-select { width: 100%; font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); } .timeline-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; } /* vis-timeline Item-Farben nach Status */ .vis-item.st-offen { background-color: var(--status-offen); border-color: #b52d2d; color: var(--status-offen-ink); } .vis-item.st-disponiert { background-color: var(--status-disponiert); border-color: #1f7a32; color: var(--status-disponiert-ink); } .vis-item.st-subunternehmer { background-color: var(--status-subunternehmer); border-color: #5bbf6c; color: var(--status-subunternehmer-ink); } .vis-item.st-abgeschlossen { background-color: var(--status-abgeschlossen); border-color: #0b7285; color: var(--status-abgeschlossen-ink); } .vis-item.st-abgerechnet { background-color: var(--status-abgerechnet); border-color: #c9a100; color: var(--status-abgerechnet-ink); } .vis-item.st-sonstiges { background-color: var(--status-sonstiges); border-color: #5a37c4; color: var(--status-sonstiges-ink); } .vis-item.st-storniert { background-color: var(--status-storniert); border-color: #adb5bd; color: var(--status-storniert-ink); text-decoration: line-through; } .vis-item.vis-selected { box-shadow: 0 0 0 2px var(--primary); } .vis-item.conflict { outline: 2px dashed #a12222; outline-offset: 1px; } /* Begleitbericht liegt vor: Zettel-Icon + dezenter Rahmen am Item */ .vis-item.has-report { box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); } /* Urlaub: violettes Hintergrund-Band in der Fahrerzeile (wie Uebersicht), liegt hinter den Balken und ist nicht ziehbar. */ .vis-item.vis-background.urlaub-bg { background-color: rgba(103, 65, 217, .14); } .swatch--urlaub { background: rgba(103, 65, 217, .35); } .vis-item.vis-background.urlaub-bg .vis-item-content { color: #6741d9; font-weight: 700; font-size: 11px; padding: 2px 6px; } .vis-item.vis-background.krank-bg { background-color: rgba(224, 49, 49, .14); } .vis-item.vis-background.krank-bg .vis-item-content { color: #e03131; font-weight: 700; font-size: 11px; padding: 2px 6px; } /* Offene Bedarfe in der obersten "Offen"-Spur (nur Tag/3-Tage): gestrichelt = noch nicht zugeteilt, per Drag auf eine Fahrerzeile zuteilbar. Eigene Klassen (tl-pool-*), damit KEINE Styles der HTML-Dispo-Pool-Box (.pool-lane) erben. */ .vis-item.tl-pool-item { border-style: dashed; border-width: 2px; cursor: grab; } .vis-labelset .vis-label.tl-pool-lane { font-weight: 700; } .report-flag { font-size: 12px; } .vis-item .vis-item-content { padding: 3px 6px; font-size: 12px; } .vis-labelset .vis-label { font-size: 13px; } .vis-time-axis .vis-text { color: var(--muted); } /* ========================================================================== Fahrer-Portal / Begleitschein / Impersonation ========================================================================== */ /* Impersonation-Banner */ .impersonation-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; /* Text + Button auf schmalen Screens sauber umbrechen */ background: #fff3bf; border-bottom: 1px solid #ffe08a; color: #806100; padding: 8px 20px; font-size: 14px; } .impersonation-bar .btn { background: #fff; } /* Portal: Auftragskarten */ .portal-list { display: grid; gap: 14px; } .portal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .portal-cat { font-weight: 700; font-size: 13px; color: var(--primary); } .portal-title { font-size: 16px; margin: 2px 0 0; } .portal-card .kv { margin-bottom: 12px; } /* Portal: Wochenansicht mit Zeitbalken je Tag */ .tb-hours { display: flex; justify-content: space-between; padding: 0 4px; margin-bottom: 6px; } .tb-days { display: flex; flex-direction: column; gap: 12px; } .tb-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; } .tb-day--today { border-left: 4px solid var(--primary); } .tb-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .tb-wd { font-weight: 700; } .tb-date { color: var(--muted); } .tb-empty { padding: 4px 0; } .tb-row { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .tb-row:hover { background: var(--bg); text-decoration: none; } .tb-row + .tb-row { margin-top: 8px; } .tb-track { position: relative; height: 10px; background: var(--bg); border-radius: 5px; margin-bottom: 8px; overflow: hidden; } .tb-seg { position: absolute; top: 0; bottom: 0; border-radius: 5px; } .tb-seg--fromprev { border-top-left-radius: 0; border-bottom-left-radius: 0; } .tb-seg--tonext { border-top-right-radius: 0; border-bottom-right-radius: 0; } .tb-info { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tb-cat { font-weight: 700; font-size: 12px; color: var(--primary); } .tb-label { font-weight: 500; } .tb-timerange { margin-left: auto; white-space: nowrap; } /* Begleitschein-Formular */ .begleitschein-form .card + .card { margin-top: 16px; } .subfieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 4px 0 0; } .subfieldset legend { padding: 0 6px; font-weight: 600; color: var(--muted); font-size: 14px; } .field-label { font-size: 13px; color: var(--muted); font-weight: 600; display: block; margin-bottom: 6px; } .sep { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .mt8 { margin-top: 8px; } /* Begleitart-Auswahl (Mehrfachauswahl per Checkbox) */ .radio-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .radio-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; line-height: 1; user-select: none; transition: border-color .12s, background .12s; } .radio-chip:hover { border-color: var(--primary); } .radio-chip input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; cursor: pointer; } /* angekreuzte Chips deutlich hervorheben */ .radio-chip:has(input:checked) { border-color: var(--primary); background: rgba(31, 95, 168, .08); color: var(--primary); } /* Kilometer-Spalten */ .km-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; } @media (max-width: 720px) { .km-grid { grid-template-columns: minmax(0, 1fr); } } .km-col { display: grid; gap: 10px; align-content: start; } .km-col h3 { margin: 0; font-size: 14px; color: var(--muted); } /* Unterschriften */ .sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 720px) { .sig-grid { grid-template-columns: minmax(0, 1fr); } } .sig-block { display: grid; gap: 8px; align-content: start; } .signature-pad { display: grid; gap: 6px; justify-items: start; } .sig-canvas { width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 1; border: 1px dashed var(--border); border-radius: 6px; background: #fff; touch-action: none; cursor: crosshair; } .sig-existing { max-width: 100%; height: auto; max-height: 90px; border: 1px solid var(--border); border-radius: 6px; background: #fff; padding: 4px; } /* ========================================================================== Sonder-Icons / Badges (unabhaengig vom Farbstatus) + Fortschritt ========================================================================== */ .flag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .flag--warn { background: #fff3bf; border-color: #ffe08a; color: #806100; } .flag--danger { background: #ffe3e3; border-color: #ffc9c9; color: #c92a2a; } .text-danger { color: #c92a2a; } .flag-warn { font-size: 12px; } /* nur das Icon (Plantafel/Übersicht) */ .pool-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pool-progress { display: inline-block; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.14); font-size: 11px; font-weight: 700; } .pool-card.st-offen .pool-progress { background: rgba(255,255,255,.28); } /* Preis-/Genehmigungs-Abschnitte im Auftragsformular */ .form-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 6px; margin: 4px 0 0; } .form-section legend { padding: 0 6px; font-weight: 600; color: var(--muted); font-size: 14px; } /* Portal-Hinweis (Begleitschein vorab / Brueckenauflage) */ .portal-hint { background: #eef4ff; border: 1px solid #cfe0ff; color: #274b8a; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 14px; } /* ========================================================================== Grafische Gesamtuebersicht (Wochenkalender + Fahrer-Auslastung) ========================================================================== */ .ov-todo { border-left: 5px solid var(--status-offen); } .ov-todo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .ov-todo-item { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-left: 5px solid var(--status-offen); border-radius: 8px; padding: 8px 10px; background: var(--surface); } .ov-todo-item.st-subunternehmer { border-left-color: var(--status-subunternehmer); } .ov-todo-item.st-disponiert { border-left-color: var(--status-disponiert); } .ov-todo-item:hover { box-shadow: var(--shadow); } .ov-todo-head { display: flex; gap: 8px; align-items: baseline; } .ov-todo-head .ov-day { font-weight: 700; font-size: 12px; color: var(--muted); } .ov-todo-head .ov-label { font-weight: 600; line-height: 1.2; } .ov-todo-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .ov-todo-meta .pool-progress { background: rgba(0,0,0,.1); color: inherit; } .ov-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; overflow-x: auto; } .ov-col { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .ov-col--today { outline: 2px solid var(--primary); } .ov-col-head { display: flex; align-items: baseline; gap: 6px; justify-content: center; padding: 6px; background: #f0f3f8; border-bottom: 1px solid var(--border); } .ov-col-head .ov-wd { font-weight: 700; } .ov-col-head .ov-date { color: var(--muted); font-size: 12px; } .ov-col-body { padding: 6px; display: grid; gap: 6px; min-height: 60px; } .ov-empty { text-align: center; padding: 10px 0; } .ov-card { display: block; text-decoration: none; color: #1f2733; border-radius: 6px; padding: 6px 8px; font-size: 12px; border: 1px solid rgba(0,0,0,.12); border-left: 5px solid var(--border); background: var(--surface); } .ov-card:hover { box-shadow: var(--shadow); } .ov-card.st-offen { border-left-color: var(--status-offen); } .ov-card.st-disponiert { border-left-color: var(--status-disponiert); } .ov-card.st-subunternehmer { border-left-color: var(--status-subunternehmer); } .ov-card.st-abgeschlossen { border-left-color: var(--status-abgeschlossen); } .ov-card.st-abgerechnet { border-left-color: var(--status-abgerechnet); } .ov-card.st-sonstiges { border-left-color: var(--status-sonstiges); } .ov-card.st-storniert { border-left-color: var(--status-storniert); opacity: .7; } .ov-card-top { display: flex; align-items: center; gap: 6px; } .ov-card-top .ov-time { font-weight: 700; } .ov-card-top .ov-prog { margin-left: auto; font-weight: 700; font-size: 11px; background: rgba(0,0,0,.1); border-radius: 999px; padding: 0 6px; } .ov-card-kunde { color: var(--muted); margin: 2px 0; } .ov-card-route { margin-top: 2px; } .ov-card-comp { line-height: 1.35; } /* Fahrer-Auslastung Matrix */ .ov-cap td, .ov-cap th { text-align: center; vertical-align: top; } .ov-cap td:first-child, .ov-cap th:first-child { text-align: left; } .ov-cap-cell { min-width: 150px; text-align: left; } .ov-frei { background: #ebfbee; } .ov-frei-tag { color: #2f9e44; font-weight: 600; font-size: 12px; } .ov-urlaub { background: #f3f0ff; } .ov-urlaub-tag { color: #6741d9; font-weight: 600; font-size: 12px; } .ov-krank { background: #fff0f0; } .ov-krank-tag { color: #e03131; font-weight: 600; font-size: 12px; } .ov-chip { display: block; margin: 0 0 3px; padding: 3px 6px; border-radius: 4px; font-size: 11px; color: #fff; text-decoration: none; line-height: 1.3; } .ov-chip:hover { filter: brightness(1.1); text-decoration: underline; } .ov-chip-kat { font-weight: 700; } .ov-chip-route { display: block; opacity: .9; } .ov-chip.st-offen { background: var(--status-offen); } .ov-chip.st-disponiert { background: var(--status-disponiert); } .ov-chip.st-subunternehmer { background: var(--status-subunternehmer); color: var(--status-subunternehmer-ink); } .ov-chip.st-abgeschlossen { background: var(--status-abgeschlossen); color: var(--status-abgeschlossen-ink); } .ov-chip.st-abgerechnet { background: var(--status-abgerechnet); color: var(--status-abgerechnet-ink); } .ov-chip.st-sonstiges { background: var(--status-sonstiges); } .ov-chip.st-storniert { background: var(--status-storniert); color: var(--status-storniert-ink); } .ov-chip-head { display: flex; align-items: baseline; gap: 6px; } .ov-chip-time { font-weight: 600; opacity: .95; white-space: nowrap; } /* Auslastungs-Chip: Zeit soll auch bei dunklem Chip lesbar bleiben. */ .ov-chip.st-subunternehmer .ov-chip-time, .ov-chip.st-abgerechnet .ov-chip-time { opacity: 1; } /* Über-Mitternacht: Zeitspanne mit Wochentag (23:00 → Do 03:00). */ .ov-time--span { font-weight: 700; white-space: nowrap; } /* Fortsetzungs-Karte (Folgetag eines Über-Nacht-Einsatzes) – schmal, blass, gestrichelt: klar EIN Auftrag, kein Scheinduplikat. */ .ov-card--cont { display: block; padding: 4px 8px; border-left-width: 4px; border-left-style: solid; border-top: 1px dashed var(--border); border-right: 1px dashed var(--border); border-bottom: 1px dashed var(--border); background: repeating-linear-gradient( -45deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 6px, transparent 6px, transparent 12px); opacity: .9; } .ov-card--cont:hover { opacity: 1; } .ov-cont-mark { display: block; font-weight: 600; font-size: 12px; } .ov-cont-info { display: block; } /* Drag&Drop-Zuteilung: Auftragskarte/Chip auf eine Fahrerzeile ziehen. */ .js-ov-order[draggable="true"] { cursor: grab; } .js-ov-order[draggable="true"]:active { cursor: grabbing; } .js-ov-order.is-dragging { opacity: .45; } .js-ov-driver.is-drop-target > td { background: var(--accent-soft, rgba(45,110,220,.12)); box-shadow: inset 0 0 0 2px var(--accent, #2d6edc); } .js-ov-driver.is-busy { opacity: .5; pointer-events: none; } /* Dispo-Pool: horizontale Tages-Spalten (So–Sa), deckungsgleich mit dem Zeitstrahl darunter. */ .pool-days { display: flex; gap: 8px; align-items: flex-start; width: 100%; overflow-x: auto; } .pool-day-col { flex: 1 1 0; min-width: 132px; display: flex; flex-direction: column; gap: 6px; } .pool-day-head { font-size: 12px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 3px; text-align: center; } .pool-day-empty { text-align: center; padding: 6px 0; } /* Auftragsinfos für den Fahrer (Fahrerportal). */ .portal-info { margin: 8px 0; padding: 10px 12px; border-radius: var(--radius); background: #e7f5ff; border: 1px solid #a5d8ff; color: #0b3d66; line-height: 1.4; } .portal-info-lbl { display: block; font-weight: 700; font-size: 12px; margin-bottom: 2px; } .portal-files { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; } .portal-files a { font-weight: 600; } /* ========================================================================== * Mandanten-Branding: Logo in der Topbar + gebrandete Login-Seite * (Login und Tenant-Backend laden nur app.css, daher hier – nicht in admin.css) * ======================================================================== */ .brand { display: inline-flex; align-items: center; gap: 8px; } .topbar-logo { height: 34px; max-width: 150px; object-fit: contain; display: block; } /* Gebrandete Login-Seite: Hintergrundbild deckend hinter der Login-Karte. z-index 0 (NICHT -1): html/body hat einen deckenden Hintergrund, der auf die Viewport-Canvas gemalt wird - ein fixes Element mit z-index:-1 laege dahinter und waere unsichtbar. Karte/Flash liegen mit z-index:1 darueber. */ .login-bg-img { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .content--guest .login-card, .content--guest .flash-stack { position: relative; z-index: 1; } .login-card--branded { background: rgba(255, 255, 255, .96); } .login-logo { display: block; max-width: 200px; max-height: 90px; object-fit: contain; margin: 0 auto 18px; } /* ========================================================================== * Drag & Drop Upload (Anhaenge/Belege) - progressive enhancement * ======================================================================== */ .dropzone { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 92px; padding: 14px; cursor: pointer; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--bg); color: var(--muted); transition: border-color .15s ease, background .15s ease, color .15s ease; } .dropzone:hover { border-color: var(--primary); color: var(--text); } .dropzone--drag { border-color: var(--primary); background: #eaf1fb; color: var(--primary-d); } .dropzone--busy { opacity: .65; pointer-events: none; } .dropzone__hint { font-size: 13px; line-height: 1.4; } /* Datei-Input unsichtbar, aber fokussierbar (Klick oeffnet ueber das Label). */ .dropzone input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .upload-status { margin-left: 10px; } /* ========================================================================== * Plantafel: Auftrag-Markierung beim Klick (gelb) + Info-Panel * ======================================================================== */ /* Alle Items des angeklickten Auftrags gelb umranden (Status-Fuellfarbe bleibt, daher Ring per box-shadow statt Hintergrund). Eigene Klasse statt vis-selected, damit die Markierung das Drag-Verhalten nicht beeinflusst (sonst wuerden beim Ziehen alle selektierten Slots gemeinsam verschoben). */ .vis-item.order-active { box-shadow: 0 0 0 3px #f2c200, 0 2px 8px rgba(20, 30, 50, .25); border-color: #d9ae00 !important; z-index: 5; } .pool-card--active { outline: 3px solid #f2c200; outline-offset: 1px; } .board-info { position: fixed; right: 18px; bottom: 18px; width: 300px; max-width: calc(100vw - 36px); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid #f2c200; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 30, 50, .22); z-index: 60; overflow: hidden; } .board-info__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 15px; } .board-info__close { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; } .board-info__close:hover { color: var(--text); } .board-info__body { margin: 0; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 14px; } .board-info__body dt { color: var(--muted); font-weight: 500; } .board-info__body dd { margin: 0; } .board-info__crew { margin: 0; padding-left: 16px; } .board-info__crew li { margin: 1px 0; } .board-info__actions { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg); } /* --- Sammel-Verknüpfung (Rechnungsgruppe aus Liste/Übersicht) ------------- */ .bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; margin: 0 0 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .bulk-bar [data-bulk-count] { color: var(--text); } th.col-check, td.col-check { width: 34px; text-align: center; } tr.is-bulk-locked { opacity: .45; } /* Auswahl-Modus der Wochenübersicht: Checkboxen/Leiste erst nach „Verknüpfen". */ .ov-linkform .bulk-bar--ov { display: none; } .ov-linkform.is-linkmode .bulk-bar--ov { display: flex; } .ov-card-wrap { position: relative; } .ov-pick { display: none; position: absolute; top: 4px; right: 4px; z-index: 5; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; box-shadow: 0 1px 3px rgba(20, 30, 50, .18); } .ov-pick input { margin: 0; cursor: pointer; } .ov-linkform.is-linkmode .ov-pick { display: flex; } .ov-card-wrap.is-bulk-locked { opacity: .45; }