/* ==========================================================================
   RMT — VIS Corporate Identity
   ==========================================================================
   Uebernommen aus VisTopLogBlazor (Commit 4f70173), Handoff "TopLog Redesign
   nach VIS Corporate Identity". Die Marken-Tokens sind bewusst identisch —
   beide Apps sind VIS-Produkte, nur die Wortmarke unterscheidet sich.

   Diese Datei wird als LETZTES Stylesheet geladen (nach bootstrap.min.css,
   app.css und dem Syncfusion material.css), damit die Overrides greifen.
   Sie aendert ausschliesslich das Aussehen — Struktur, Navigation,
   Beschriftungen und Datenfelder der Anwendung bleiben unveraendert.

   Aufbau
     1. Design Tokens
     2. Basis / Typografie
     3. Grundform Hexagon
     4. Buttons
     5. Karten & Collapse-Panels
     6. Formulare
     7. Bootstrap-Overrides
     8. Syncfusion-Overrides (Grid, Pager, Tab, Checkbox, Dialog, ...)
     9. Mobile
    10. RMT-spezifisch (Suchkarte, Meldungen, Leerzustand)
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
    /* --- Marke (CI Handbuch) --- */
    --vis-primary: #0B5C82;
    --vis-primary-hover: #094A69;
    --vis-secondary: #0D85BF;
    --vis-accent: #F9CC37;
    --vis-accent-hover: #E8BC22;
    --vis-grey: #EDEDED;
    --vis-white: #FFFFFF;
    --vis-shadow: rgba(11, 92, 130, 0.16);

    --vis-gradient: linear-gradient(170deg, #0B5C82 0%, #0A6E9C 55%, #0D85BF 100%);
    --vis-gradient-mobile: linear-gradient(150deg, #0B5C82 0%, #0D85BF 100%);

    /* --- Neutrale Ableitungen (kuehl getoent) --- */
    --vis-ink: #12242E;
    --vis-ink-2: #2E3F49;
    --vis-muted: #4A5C66;
    --vis-muted-2: #566670;
    --vis-label: #62747E;
    --vis-subtle: #7A8A93;
    --vis-faint: #8FA0AA;
    --vis-disabled-text: #9AA8B0;
    --vis-border-strong: #C3CCD1;
    --vis-border-frame: #CFD7DB;
    --vis-border: #DEDEDE;
    --vis-surface-alt: #F5F6F7;
    --vis-surface-head: #F7F8F9;
    --vis-row-hover: #F4FAFD;

    --vis-info-bg: #EDF6FA;
    --vis-info-border: #BEDDEC;
    --vis-accent-soft: #FDF3D4;

    /* --- Typografie --- */
    --vis-font: 'Barlow', Helvetica, Arial, sans-serif;
    --vis-font-mono: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;

    /* --- Layout --- */
    --vis-sidebar-width: 236px;
    --vis-topbar-height: 60px;

    /* --- Bewegung --- */
    --vis-transition: 120ms ease-out;
}

/* ==========================================================================
   2. Basis / Typografie
   ========================================================================== */

html, body {
    font-family: var(--vis-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--vis-ink);
    background: var(--vis-surface-alt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* CI: Grundform Hexagon — keine Rundungen.
   Ausnahme: Radio-Buttons bleiben rund, sonst sind sie nicht mehr von einer
   Checkbox zu unterscheiden. */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

input[type="radio"],
input[type="radio"]::before,
input[type="radio"]::after,
.e-radio + label::before,
.e-radio + label::after {
    border-radius: 50% !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vis-font);
    color: var(--vis-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 19px; font-weight: 600; letter-spacing: 0; }
h5 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
h6 { font-size: 14px; font-weight: 600; }

a,
.btn-link {
    color: var(--vis-primary);
    text-decoration: none;
    transition: color var(--vis-transition);
}

a:hover,
.btn-link:hover {
    color: var(--vis-primary-hover);
    text-decoration: underline;
}

/* Fokus — im Prototyp nicht dargestellt, fuer die Umsetzung vorgeschrieben. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.e-btn:focus-visible,
.e-input-group.e-input-focus {
    outline: 2px solid var(--vis-secondary) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Alle Nummern, Datum, Zeiten, Mengen in Mono — damit Tabellenspalten
   buendig untereinander stehen. */
.vis-mono {
    font-family: var(--vis-font-mono);
    font-variant-numeric: tabular-nums;
}

.vis-eyebrow {
    font-family: var(--vis-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ==========================================================================
   3. Grundform Hexagon
   ========================================================================== */

.vis-hex {
    display: inline-block;
    flex: 0 0 auto;
    background: currentColor;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.vis-hex--logo   { width: 24px; height: 27px; }
.vis-hex--marker { width: 9px;  height: 10px; }
.vis-hex--status { width: 10px; height: 11px; }

/* ==========================================================================
   4. Buttons
   --------------------------------------------------------------------------
   Vier Rollen:
     .vis-btn--cta       gelb  — nur Call-to-Action (START, SPEICHERN, LOGIN)
     .vis-btn--primary   blau  — bestaetigende Aktionen (FREIGEBEN)
     .vis-btn--ghost     weiss — neutrale Aktionen (PDF, STD. NEU BERECHNEN)
     [disabled]          weiss, Border, grauer Text, kein Hover
   ========================================================================== */

.vis-btn,
.e-btn,
.btn {
    font-family: var(--vis-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid transparent;
    background: var(--vis-white);
    color: var(--vis-ink);
    cursor: pointer;
    box-shadow: none;
    transition: background-color var(--vis-transition), border-color var(--vis-transition), color var(--vis-transition);
    text-transform: uppercase;
}

/* --- CTA (gelb). Textfarbe immer BLAU, nie weiss — Kontrastvorgabe. --- */
.vis-btn--cta,
.e-btn.vis-btn--cta,
.btn.vis-btn--cta {
    background: var(--vis-accent);
    border-color: var(--vis-accent);
    color: var(--vis-primary);
}

.vis-btn--cta:hover:not([disabled]):not(.e-disabled),
.e-btn.vis-btn--cta:hover:not([disabled]):not(.e-disabled) {
    background: var(--vis-accent-hover);
    border-color: var(--vis-accent-hover);
    color: var(--vis-primary);
}

/* --- Primaer (blau) --- */
.vis-btn--primary,
.e-btn.vis-btn--primary,
.btn.vis-btn--primary,
.btn-primary {
    background: var(--vis-primary);
    border-color: var(--vis-primary);
    color: var(--vis-white);
}

.vis-btn--primary:hover:not([disabled]):not(.e-disabled),
.e-btn.vis-btn--primary:hover:not([disabled]):not(.e-disabled),
.btn-primary:hover:not([disabled]) {
    background: var(--vis-primary-hover);
    border-color: var(--vis-primary-hover);
    color: var(--vis-white);
}

/* --- Ghost (weiss mit Border) --- */
.vis-btn--ghost,
.e-btn.vis-btn--ghost,
.btn.vis-btn--ghost {
    background: var(--vis-white);
    border-color: var(--vis-border-strong);
    color: var(--vis-ink);
}

.vis-btn--ghost:hover:not([disabled]):not(.e-disabled),
.e-btn.vis-btn--ghost:hover:not([disabled]):not(.e-disabled) {
    background: var(--vis-white);
    border-color: var(--vis-ink);
    color: var(--vis-ink);
}

/* --- Deaktiviert --- */
.vis-btn[disabled],
.e-btn[disabled],
.e-btn.e-disabled,
.btn[disabled],
.btn.disabled {
    background: var(--vis-white) !important;
    border-color: var(--vis-border) !important;
    color: var(--vis-disabled-text) !important;
    cursor: default !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Icon-only Button (Loeschen in Tabellenzeilen) */
.vis-btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border-color: transparent;
    color: var(--vis-faint);
    font-size: 14px;
}

.vis-btn--icon:hover:not([disabled]) {
    color: var(--vis-primary);
    background: var(--vis-grey);
}

/* ==========================================================================
   5. Karten & Collapse-Panels
   ========================================================================== */

.vis-card {
    background: var(--vis-white);
    border: 1px solid var(--vis-border);
}

/* Standardabstand fuer Karten, die ohne Stapel-Container untereinander
   stehen (Aufgabenlisten). */
.vis-card + .vis-card {
    margin-top: 18px;
}

/* In einem gap-Stapel traegt der Container den Abstand allein — sonst
   addiert sich beides (18px gap + 18px margin = 36px zwischen zwei
   Karten). Die Klassen stammen aus scoped CSS der Seiten; scoped CSS
   ergaenzt nur ein Attribut, die Klassennamen bleiben global sichtbar. */
.report-body > .vis-card + .vis-card,
.jobdetails-body > .vis-card + .vis-card,
.vis-infogrid > .vis-card + .vis-card,
.vis-splitgrid > .vis-card + .vis-card {
    margin-top: 0;
}

.vis-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--vis-grey);
}

.vis-card__head--collapsed {
    border-bottom: none;
}

.vis-card__head-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.vis-card__head-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

.vis-card__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--vis-ink);
    margin: 0;
}

.vis-card__hint {
    font-size: 13px;
    color: var(--vis-subtle);
}

/* Zaehler-Badge, z.B. "6'105" oder "10 laufend" */
.vis-badge {
    font-family: var(--vis-font-mono);
    font-size: 12px;
    padding: 3px 8px;
    background: var(--vis-grey);
    color: var(--vis-muted);
    white-space: nowrap;
}

.vis-badge--accent {
    background: var(--vis-accent-soft);
    color: var(--vis-primary);
}

/* Collapse-Caret */
.vis-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--vis-faint);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--vis-transition);
}

.vis-caret:hover {
    color: var(--vis-primary);
}

.vis-card__body {
    padding: 0;
}

/* Info-Karte (Kunden / Baustelle / Chauffeur auf Job Details) */
.vis-infocard {
    background: var(--vis-white);
    border: 1px solid var(--vis-border);
    padding: 16px 18px;
}

.vis-infocard__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vis-label);
}

.vis-infocard__value {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--vis-ink);
}

.vis-infocard__meta {
    font-size: 13px;
    color: var(--vis-subtle);
}

/* Kennzahlenblock */
.vis-metric__label {
    font-size: 12px;
    color: var(--vis-subtle);
}

.vis-metric__value {
    font-family: var(--vis-font-mono);
    font-size: 17px;
    font-weight: 500;
    color: var(--vis-ink);
}

/* Online/Offline-Pill */
.vis-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.vis-pill--online {
    background: var(--vis-info-bg);
    border: 1px solid var(--vis-info-border);
    color: var(--vis-primary);
}

.vis-pill--offline {
    background: var(--vis-grey);
    border: 1px solid var(--vis-border);
    color: var(--vis-label);
}

/* Das Hexagon uebernimmt die Textfarbe der Pille (background: currentColor). */
.vis-pill .vis-hex {
    color: inherit;
}

/* Variante auf dem blauen Verlauf der mobilen App-Bar: keine Flaeche,
   gelbes Hexagon, Text auf 80% Weiss. */
.vis-pill--ondark {
    background: transparent;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.8);
}

.vis-pill--ondark.vis-pill--online .vis-hex {
    color: var(--vis-accent);
}

.vis-pill--ondark.vis-pill--offline .vis-hex {
    color: rgba(255, 255, 255, 0.55);
}

/* Schlichte Variante: nur Hexagon und Text, z.B. in der Statuszeile der
   Anmeldemaske. Das Hexagon bleibt in der Statusfarbe, der Text wird ruhiger. */
.vis-pill--plain {
    background: transparent;
    border: none;
    padding: 0;
    font-weight: 400;
    color: var(--vis-muted);
}

.vis-pill--plain.vis-pill--online .vis-hex {
    color: var(--vis-primary);
}

.vis-pill--plain.vis-pill--offline .vis-hex {
    color: var(--vis-label);
}

/* ==========================================================================
   6. Formulare
   ========================================================================== */

label,
.vis-field__label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vis-label);
    margin-bottom: 6px;
}

.form-control,
.vis-input {
    font-family: var(--vis-font-mono);
    font-size: 15px;
    color: var(--vis-ink);
    height: 44px;
    padding: 0 14px;
    background: var(--vis-white);
    border: 1px solid var(--vis-border-strong);
    box-shadow: none;
    transition: border-color var(--vis-transition);
}

.form-control:hover,
.vis-input:hover {
    border-color: var(--vis-muted);
}

.form-control:focus,
.vis-input:focus {
    border-color: var(--vis-secondary);
    box-shadow: none;
}

.validation-message,
.invalid-feedback {
    font-family: var(--vis-font);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #B3261E;
    margin-top: 4px;
}

.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: var(--vis-secondary);
}

.invalid {
    outline: none;
    border-color: #B3261E;
}

/* ==========================================================================
   7. Bootstrap-Overrides
   ========================================================================== */

.card {
    background: var(--vis-white);
    border: 1px solid var(--vis-border);
    box-shadow: none;
}

.card-header {
    background: var(--vis-white);
    border-bottom: 1px solid var(--vis-grey);
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--vis-ink);
}

.bg-light {
    background-color: var(--vis-white) !important;
}

.alert {
    border: 1px solid var(--vis-border);
    font-size: 14px;
}

.alert-danger {
    background: #FCEEEC;
    border-color: #E8C4BF;
    color: #8C1D18;
}

.table {
    color: var(--vis-ink-2);
    font-size: 14px;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--vis-grey);
    padding: 8px 10px;
}

.table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vis-label);
    background: var(--vis-surface-head);
    border-bottom: 1px solid var(--vis-border);
}

/* Schlichte Label/Wert-Tabellen in den Detailkarten */
.vis-kv {
    width: 100%;
    font-size: 14px;
    color: var(--vis-ink-2);
}

/* Innerhalb einer Karte sitzt die Tabelle mit dem Karten-Innenabstand. */
.vis-card__body > .vis-kv {
    padding: 6px 8px 10px;
}

.vis-kv td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--vis-grey);
    vertical-align: top;
}

.vis-kv tr:last-child td {
    border-bottom: none;
}

.vis-kv td:first-child,
.vis-kv td b {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vis-label);
    white-space: nowrap;
}

#blazor-error-ui {
    background: var(--vis-accent-soft);
    border-top: 1px solid var(--vis-accent);
    color: var(--vis-ink);
    box-shadow: 0 -1px 3px var(--vis-shadow);
    font-size: 14px;
}

.loading-progress circle:last-child {
    stroke: var(--vis-primary);
}

.loading-progress-text {
    font-family: var(--vis-font-mono);
    color: var(--vis-muted);
}

/* ==========================================================================
   8. Syncfusion-Overrides
   ========================================================================== */

/* --- 8.1 Grid: Rahmen und Flaeche --- */
.e-grid {
    font-family: var(--vis-font);
    border: 1px solid var(--vis-border);
    border-left: none;
    border-right: none;
    color: var(--vis-ink-2);
}

.e-grid .e-gridheader {
    background: var(--vis-surface-head);
    border-top: none;
    border-bottom: 1px solid var(--vis-border);
}

.e-grid .e-headercell,
.e-grid .e-detailheadercell,
.e-grid .e-gridheader .e-columnheader .e-headercell {
    background: var(--vis-surface-head);
    height: 38px;
    padding: 0 18px;
    border-color: var(--vis-border);
    vertical-align: middle;
}

.e-grid .e-headercelldiv,
.e-grid .e-headertext {
    font-family: var(--vis-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vis-label);
    padding: 0;
}

/* --- 8.2 Grid: Datenzeilen --- */
.e-grid .e-row,
.e-grid .e-altrow {
    background: var(--vis-white);
}

.e-grid .e-rowcell {
    font-family: var(--vis-font);
    font-size: 14px;
    color: var(--vis-ink-2);
    height: 46px;
    padding: 0 18px;
    border-bottom: 1px solid var(--vis-grey);
    border-color: var(--vis-grey);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.e-grid .e-row:hover .e-rowcell,
.e-grid .e-gridcontent tr.e-row:hover > td {
    background: var(--vis-row-hover) !important;
}

.e-grid .e-gridcontent tr.e-row.e-rowselect > td,
.e-grid td.e-selectionbackground,
.e-grid .e-gridcontent tr.e-row .e-rowcell.e-selectionbackground,
.e-grid .e-gridcontent tr.e-row.e-active > td {
    background: var(--vis-row-hover) !important;
    color: var(--vis-ink) !important;
}

.e-grid .e-emptyrow td,
.e-grid .e-emptyrow span {
    font-size: 14px;
    color: var(--vis-subtle);
    padding: 18px;
    text-align: left;
}

/* Zahlen-, Datums- und Mengenspalten in Mono */
.e-grid .e-rowcell.e-mono,
.e-grid .e-rowcell.vis-mono {
    font-family: var(--vis-font-mono);
    font-variant-numeric: tabular-nums;
}

/* --- 8.3 Grid: Buttons in der Aktionsspalte (START, Icons) --- */
.e-grid .e-unboundcelldiv > .e-btn,
.e-grid .e-unboundcell .e-btn {
    background: var(--vis-accent);
    border: 1px solid var(--vis-accent);
    color: var(--vis-primary);
    font-family: var(--vis-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 7px 16px;
    margin: 0;
    box-shadow: none;
    min-width: 0;
}

.e-grid .e-unboundcelldiv > .e-btn:hover:not(.e-disabled):not([disabled]) {
    background: var(--vis-accent-hover);
    border-color: var(--vis-accent-hover);
    color: var(--vis-primary);
}

.e-grid .e-unboundcelldiv > .e-btn.e-disabled,
.e-grid .e-unboundcelldiv > .e-btn[disabled] {
    background: var(--vis-white) !important;
    border-color: var(--vis-border) !important;
    color: var(--vis-disabled-text) !important;
}

/* Icon-only Kommandobuttons (Anzeigen/Loeschen) bleiben neutral, nicht gelb */
.e-grid .e-unboundcelldiv > .e-btn.e-icon-btn {
    background: transparent;
    border-color: transparent;
    color: var(--vis-primary);
    padding: 5px 8px;
}

.e-grid .e-unboundcelldiv > .e-btn.e-icon-btn:hover:not(.e-disabled) {
    background: var(--vis-grey);
    border-color: transparent;
    color: var(--vis-primary-hover);
}

/* --------------------------------------------------------------------------
   Zeilendichte gegen das Material-Theme durchsetzen.
   Das Theme pinnt Hoehe und Innenabstand ueber Selektoren wie
   ".e-grid.e-bigger .e-gridheader tr th:first-child" (erste/letzte Spalte,
   Touch-Modus .e-bigger). Dagegen kommt man nur mit !important sauber an —
   Specificity-Wettruesten waere hier deutlich bruechiger.
   -------------------------------------------------------------------------- */

/* Tabellen-Innenabstand horizontal: 18px in JEDER Spalte. */
.e-grid .e-headercell,
.e-grid .e-rowcell {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Zeilenhoehe kommt aus height, nicht aus vertikalem Padding. */
.e-grid .e-rowcell,
.e-grid .e-unboundcell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.e-grid .e-rowcell {
    height: 46px !important;
    font-size: 14px;
    line-height: 1.35;
    vertical-align: middle;
}

.e-grid .e-headercell {
    height: 38px !important;
}

/* Der innere Kopfzeilen-Container bringt nochmal 0.6em mit und wuerde den
   Kopftext gegen die Zellen darunter verschieben. Rechts bleibt Platz fuer
   das Sortier-Icon. */
.e-grid .e-headercelldiv,
.e-grid .e-gridheader .e-sortfilter .e-headercelldiv,
.e-grid .e-gridheader .e-headercell .e-headercelldiv {
    padding: 0 1.4em 0 0;
    margin: 0;
    height: auto;
    line-height: 1.3;
    font-size: 12px;
}

/* Textfarbe der Datenzellen — das Theme setzt hier rgba(0,0,0,.87). */
.e-grid .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
    color: var(--vis-ink-2);
}

/* Beim Hover faerbt das Theme den Text auf reines Schwarz. */
.e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd),
.e-grid .e-row:hover .e-rowcell {
    color: var(--vis-ink);
}

/* --- 8.4 Grid: Sortier-, Filter- und Resize-Elemente --- */
.e-grid .e-sortfilterdiv,
.e-grid .e-icons {
    color: var(--vis-faint);
}

.e-grid .e-gridheader .e-sortnumber {
    background: var(--vis-primary);
    color: var(--vis-white);
}

.e-grid .e-rhandler,
.e-grid .e-rcursor {
    border-right-color: var(--vis-border);
}

/* --- 8.5 Pager (SfPager und Grid-Pager) --- */
.e-pager,
.e-grid .e-gridpager {
    font-family: var(--vis-font);
    background: var(--vis-white);
    border: 1px solid var(--vis-border);
    border-top: none;
    padding: 12px 18px;
    color: var(--vis-muted);
}

.e-pager .e-pagercontainer {
    border: none;
    margin: 0;
}

.e-pager .e-numericitem,
.e-pager .e-numericitem.e-spacing,
.e-pager .e-pagercontainer .e-numericitem {
    font-family: var(--vis-font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--vis-muted);
    background: transparent;
    border: none;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    margin: 0 2px;
    text-align: center;
    transition: background-color var(--vis-transition);
}

.e-pager .e-numericitem:hover:not(.e-currentitem),
.e-pager .e-pagercontainer .e-numericitem:hover:not(.e-currentitem) {
    background: var(--vis-grey);
    color: var(--vis-ink);
}

.e-pager .e-numericitem.e-currentitem,
.e-pager .e-currentitem,
.e-pager .e-pagercontainer .e-numericitem.e-currentitem {
    background: var(--vis-accent) !important;
    color: var(--vis-primary) !important;
    font-weight: 500;
    box-shadow: none;
}

.e-pager .e-icons,
.e-pager .e-prevpage,
.e-pager .e-nextpage,
.e-pager .e-firstpage,
.e-pager .e-lastpage,
.e-pager .e-prevpagedisabled,
.e-pager .e-nextpagedisabled,
.e-pager .e-firstpagedisabled,
.e-pager .e-lastpagedisabled {
    color: var(--vis-muted);
    background: transparent;
    border: none;
}

.e-pager .e-prevpagedisabled,
.e-pager .e-nextpagedisabled,
.e-pager .e-firstpagedisabled,
.e-pager .e-lastpagedisabled {
    color: var(--vis-disabled-text);
    opacity: 1;
}

.e-pager .e-pagerconstant,
.e-pager .e-parentmsgbar,
.e-pager .e-pagecountmsg {
    font-family: var(--vis-font);
    font-size: 13px;
    color: var(--vis-subtle);
    padding-top: 0;
}

.e-pager .e-pagesizes .e-input-group,
.e-pager .e-pagerdropdown {
    margin: 0 8px;
}

/* --- 8.6 Tabs --- */
.e-tab .e-tab-header {
    background: transparent;
    border-bottom: 1px solid var(--vis-border);
    min-height: 0;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding: 0 0 12px 0;
    height: auto;
}

/* !important, weil das Theme in der e-bigger-Variante margin:0 auf die
   Toolbar-Items setzt und gewinnt — die Reiterbeschriftungen klebten mobil
   ohne Abstand aneinander ("Offene RapporteGeschlossene Rapporte"). */
.e-tab .e-tab-header .e-toolbar-item {
    margin-right: 24px !important;
    min-height: 0;
    height: auto;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-family: var(--vis-font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vis-subtle);
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    font-weight: 600;
    color: var(--vis-primary);
}

/* Gelbe Unterlinie statt der Material-Indikatorlinie */
.e-tab .e-tab-header .e-indicator {
    background: var(--vis-accent);
    height: 2px;
}

.e-tab .e-tab-header .e-toolbar-item.e-active {
    border-bottom: none;
}

.e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
    background: transparent;
}

/* --- 8.7 Checkbox --- */
.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
    width: 18px;
    height: 18px;
    line-height: 16px;
    background: var(--vis-white);
    border: 1px solid var(--vis-border-strong);
}

.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background: var(--vis-primary);
    border-color: var(--vis-primary);
    color: var(--vis-white);
    font-size: 12px;
    font-weight: 700;
}

.e-checkbox-wrapper:hover .e-frame:not(.e-check) {
    border-color: var(--vis-primary);
}

.e-checkbox-wrapper .e-label,
.e-css.e-checkbox-wrapper .e-label {
    font-family: var(--vis-font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vis-ink);
    margin-left: 8px;
}

.e-checkbox-wrapper .e-ripple-container {
    display: none;
}

/* --- 8.8 Textbox / Input-Gruppen --- */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input,
.e-float-input.e-control-wrapper {
    font-family: var(--vis-font-mono);
    border: 1px solid var(--vis-border-strong);
    background: var(--vis-white);
}

.e-input-group::before,
.e-input-group::after,
.e-input-group.e-control-wrapper::before,
.e-input-group.e-control-wrapper::after,
.e-float-input::before,
.e-float-input::after {
    background: transparent !important;
    display: none;
}

.e-input-group input.e-input,
.e-float-input input,
.e-input-group.e-control-wrapper input.e-input {
    font-family: var(--vis-font-mono);
    font-size: 15px;
    color: var(--vis-ink);
    padding: 0 12px;
    height: 40px;
}

.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--vis-secondary);
}

.e-float-input label.e-float-text,
.e-float-input.e-control-wrapper label.e-float-text,
.e-input-group label.e-float-text {
    font-family: var(--vis-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vis-label);
}

.e-float-input.e-input-focus label.e-float-text,
.e-float-input.e-control-wrapper.e-input-focus label.e-float-text {
    color: var(--vis-primary);
}

/* --- 8.9 Dialog --- */
.e-dialog {
    border: 1px solid var(--vis-border);
    box-shadow: 0 8px 28px var(--vis-shadow);
}

.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header-content {
    background: var(--vis-white);
    border-bottom: 1px solid var(--vis-border);
    padding: 14px 18px;
}

.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header * {
    font-family: var(--vis-font);
    font-size: 19px;
    font-weight: 600;
    color: var(--vis-ink);
}

.e-dialog .e-dlg-content {
    font-family: var(--vis-font);
    font-size: 14px;
    color: var(--vis-ink-2);
    padding: 18px;
}

.e-dialog .e-footer-content {
    background: var(--vis-surface-alt);
    border-top: 1px solid var(--vis-border);
    padding: 12px 18px;
}

/* Die bestaetigende Aktion traegt e-primary bzw. e-success — die Position
   im Footer ist je Dialog unterschiedlich und sagt nichts ueber die Rolle. */
.e-dialog .e-footer-content .e-btn.e-primary,
.e-dialog .e-footer-content .e-btn.e-success {
    background: var(--vis-primary);
    border-color: var(--vis-primary);
    color: var(--vis-white);
}

.e-dialog .e-footer-content .e-btn.e-primary:hover:not(.e-disabled),
.e-dialog .e-footer-content .e-btn.e-success:hover:not(.e-disabled) {
    background: var(--vis-primary-hover);
    border-color: var(--vis-primary-hover);
}

/* Buttons ohne ausdrueckliche Rolle werden neutral weiss. Die drei :not()
   wiegen sechs Klassen — darum muessen die CI-Rollenklassen hier ebenfalls
   ausgenommen werden, sonst verliert .e-btn.vis-btn--primary (zwei Klassen)
   und die bestaetigende Aktion waere weiss statt blau. */
.e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-success):not(.e-flat):not(.vis-btn--primary):not(.vis-btn--ghost) {
    background: var(--vis-white);
    border-color: var(--vis-border-strong);
    color: var(--vis-ink);
}

/* --- Foto-Dialog: die beiden Aktionen teilen die Fusszeile je zur Haelfte ---
   Das Theme setzt die Footer-Buttons rechtsbuendig mit margin-left. Fuer den
   Kamera-Dialog auf dem Telefon sollen sie eine volle Zeile bilden, darum
   Flexbox statt der Theme-Ausrichtung und margin explizit zuruecksetzen. */
.vis-photo-dialog .e-footer-content {
    display: flex;
    gap: 12px;
}

.vis-photo-dialog .e-footer-content .e-btn,
.vis-photo-dialog .e-footer-content .e-btn + .e-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    margin: 0;
}

/* Schliessen-Kreuz: das Theme liefert eine graue Flaeche. */
.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn {
    background: transparent;
    box-shadow: none;
}

.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn .e-icon-dlg-close {
    color: var(--vis-faint);
}

.e-dialog .e-dlg-header-content .e-dlg-closeicon-btn:hover .e-icon-dlg-close {
    color: var(--vis-primary);
}

/* --- 8.9b Bestaetigungs-Dialog (Abmelden u.ae.) --- */
.e-dialog.vis-confirm {
    width: min(92vw, 400px) !important;
    max-width: 400px;
}

.e-dialog.vis-confirm .vis-confirm__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--vis-ink-2);
}

/* Bestaetigen links/oben, Abbrechen danach — beide gleich breit. */
.e-dialog.vis-confirm .e-footer-content {
    display: flex;
    gap: 10px;
}

.e-dialog.vis-confirm .e-footer-content .e-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    margin: 0;
}

@media (max-width: 767px) {
    /* Auf dem Telefon untereinander: die bestaetigende Aktion oben,
       beide ueber die volle Breite und mit 52px Tap-Ziel. */
    .e-dialog.vis-confirm .e-footer-content {
        flex-direction: column;
    }

    .e-dialog.vis-confirm .e-footer-content .e-btn {
        /* flex zuruecksetzen: in der Spaltenrichtung liegt die flex-Basis auf
           der Hoehe, `flex: 1 1 0` aus der Zeilenvariante liess die Buttons
           auf ihre min-height (44px) zusammenfallen und ignorierte height. */
        flex: 0 0 auto;
        width: 100%;
        height: 52px;
    }
}

/* --- 8.9c Meldungs-Dialog (MessageBox: Ja/Nein, OK) ---
   Die Breite kommt als fester Pixelwert aus der Komponente (600px). Auf dem
   Telefon lief der Dialog damit von Rand zu Rand — hier auf die Bildschirm-
   breite minus einem Rand begrenzt. */
.e-dialog.vis-msgbox {
    width: min(calc(100vw - 32px), 600px) !important;
    max-width: 600px;
}

/* Beide Aktionen teilen die Fusszeile je zur Haelfte, statt schmal rechts
   zu kleben. Das Theme setzt margin-left auf den Folge-Button — darum
   margin explizit zuruecksetzen. */
.e-dialog.vis-msgbox .e-footer-content {
    display: flex;
    gap: 10px;
}

.e-dialog.vis-msgbox .e-footer-content .e-btn,
.e-dialog.vis-msgbox .e-footer-content .e-btn + .e-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    margin: 0;
}

@media (max-width: 767px) {
    .e-dialog.vis-msgbox {
        width: calc(100vw - 24px) !important;
    }

    .e-dialog.vis-msgbox .e-footer-content .e-btn,
    .e-dialog.vis-msgbox .e-footer-content .e-btn + .e-btn {
        height: 52px;
    }
}

/* --- 8.9d Formular-Dialog (Artikel hinzufuegen / bearbeiten) ---
   Die Felder tragen Materials Float-Label: 16px Vorlauf und 4px Nachlauf je
   Feld. Ueber fuenf Felder ergab das mehr als eine Bildschirmhoehe, sodass
   man im Dialog scrollen musste, um "Einheit" ueberhaupt zu erreichen. */
.e-dialog.vis-formdialog {
    width: min(calc(100vw - 32px), 560px) !important;
    max-width: 560px;
    max-height: 90vh;
}

.e-dialog.vis-formdialog .e-dlg-content {
    padding: 12px 18px;
}

/* Beschriftung als eigenes Element direkt ueber ihrem Feld. Als Float-Label
   sass sie 16px hoch und dicht unter dem Unterstrich des vorherigen Feldes —
   sie wirkte dadurch wie die Beschriftung des Feldes darueber. Gleiche
   Schrift wie die uebrigen Feldbeschriftungen der CI. */
.e-dialog.vis-formdialog .vis-formdialog__label {
    display: block;
    margin: 0 0 2px;
    font-family: var(--vis-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vis-label);
}

/* Ohne Float-Label braucht kein Feld mehr den Vorlauf des Themes. */
.e-dialog.vis-formdialog .e-float-input,
.e-dialog.vis-formdialog .e-float-input.e-control-wrapper,
.e-dialog.vis-formdialog .e-input-group,
.e-dialog.vis-formdialog .e-input-group.e-control-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Kontrollkaestchen und sein Text auf einer Grundlinie. */
.e-dialog.vis-formdialog .e-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.e-dialog.vis-formdialog .e-checkbox-wrapper .e-label {
    font-family: var(--vis-font);
    font-size: 14px;
    line-height: 1.3;
    color: var(--vis-ink);
    padding-left: 0;
}

.e-dialog.vis-formdialog input.e-input {
    height: 32px !important;
    padding-top: 0;
    padding-bottom: 0;
}

/* Die Zeilenabstaende stehen inline im Markup — darum !important. */
.e-dialog.vis-formdialog .form-row {
    margin-bottom: 6px !important;
}

/* Beide Aktionen teilen die Fusszeile, bestaetigen rechts. */
.e-dialog.vis-formdialog .e-footer-content {
    display: flex;
    gap: 10px;
}

.e-dialog.vis-formdialog .e-footer-content .e-btn,
.e-dialog.vis-formdialog .e-footer-content .e-btn + .e-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    margin: 0;
}

@media (max-width: 767px) {
    .e-dialog.vis-formdialog {
        width: calc(100vw - 24px) !important;
    }

    .e-dialog.vis-formdialog .e-dlg-content {
        padding: 10px 12px;
    }

    .e-dialog.vis-formdialog .e-footer-content .e-btn,
    .e-dialog.vis-formdialog .e-footer-content .e-btn + .e-btn {
        height: 52px;
    }
}

/* --- 8.10 Toast --- */
.e-toast {
    font-family: var(--vis-font);
    border: 1px solid var(--vis-border);
    box-shadow: 0 6px 20px var(--vis-shadow);
    background: var(--vis-white);
}

.e-toast .e-toast-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--vis-ink);
}

.e-toast .e-toast-content {
    font-size: 14px;
    color: var(--vis-ink-2);
}

/* --- 8.11 Spinner / Progressbar --- */
.e-spinner-pane .e-spinner-inner .e-path-circle {
    stroke: var(--vis-primary);
}

.e-spinner-pane .e-spinner-inner .e-path-arc {
    stroke: var(--vis-secondary);
}

/* --- 8.12 Standard-Buttons ausserhalb der o.g. Rollen --- */
/* e-success wird in der Anwendung als generische Aktion verwendet — im CI ist
   das die blaue, bestaetigende Aktion (nicht gruen). */
.e-btn.e-success,
.e-css.e-btn.e-success {
    background: var(--vis-primary);
    border-color: var(--vis-primary);
    color: var(--vis-white);
    box-shadow: none;
}

.e-btn.e-success:hover:not(.e-disabled):not([disabled]),
.e-css.e-btn.e-success:hover:not(.e-disabled):not([disabled]) {
    background: var(--vis-primary-hover);
    border-color: var(--vis-primary-hover);
    color: var(--vis-white);
}

.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background: var(--vis-primary);
    border-color: var(--vis-primary);
    color: var(--vis-white);
}

.e-btn.e-primary:hover:not(.e-disabled):not([disabled]) {
    background: var(--vis-primary-hover);
    border-color: var(--vis-primary-hover);
}

/* e-info wird als Nebenaktion verwendet (z.B. "Scannen") — neutral weiss. */
.e-btn.e-info,
.e-css.e-btn.e-info {
    background: var(--vis-white);
    border-color: var(--vis-border-strong);
    color: var(--vis-ink);
    box-shadow: none;
}

.e-btn.e-info:hover:not(.e-disabled):not([disabled]) {
    border-color: var(--vis-ink);
    background: var(--vis-white);
    color: var(--vis-ink);
}

/* e-danger steht fuer Abbrechen/Verwerfen. Das CI kennt kein Rot; als
   Abbruch-Aktion genuegt neutral weiss, die Farbe traegt keine Information. */
.e-btn.e-danger,
.e-css.e-btn.e-danger {
    background: var(--vis-white);
    border-color: var(--vis-border-strong);
    color: var(--vis-muted);
    box-shadow: none;
}

.e-btn.e-danger:hover:not(.e-disabled):not([disabled]) {
    border-color: var(--vis-ink);
    color: var(--vis-ink);
    background: var(--vis-white);
}

/* Status-Badges in den Rechnungslisten. */
.e-badge {
    font-family: var(--vis-font-mono);
    font-size: 12px;
    font-weight: 400;
    padding: 3px 8px;
}

.e-badge.e-badge-warning {
    background: var(--vis-accent-soft);
    color: var(--vis-primary);
}

.e-badge.e-badge-danger {
    background: #FCEEEC;
    color: #8C1D18;
}

.e-badge.e-badge-success,
.e-badge.e-badge-info {
    background: var(--vis-info-bg);
    color: var(--vis-primary);
}

.e-btn.e-flat,
.e-btn.e-link {
    background: transparent;
    border-color: transparent;
    color: var(--vis-primary);
}

.e-btn.e-flat:hover:not(.e-disabled) {
    background: var(--vis-grey);
    color: var(--vis-primary-hover);
}

/* Kein Material-Ripple */
.e-btn .e-ripple-element,
.e-ripple-element {
    background: transparent;
}

/* ==========================================================================
   9. Seitenkopf / Aktionsleisten im Content
   ========================================================================== */

/* Sticky Aktionsleiste oben auf Job Details & Reports */
.vis-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    background: var(--vis-white);
    border-bottom: 1px solid var(--vis-border);
}

.vis-actionbar__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.vis-actionbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* Breadcrumb "Auftraege / Job Details 214960" */
.vis-crumb {
    font-size: 14px;
    color: var(--vis-faint);
}

.vis-crumb__sep {
    color: var(--vis-border-strong);
    margin: 0 6px;
}

.vis-crumb__current {
    font-size: 19px;
    font-weight: 600;
    color: var(--vis-ink);
}

.vis-crumb__ref {
    font-family: var(--vis-font-mono);
    font-size: 14px;
    color: var(--vis-primary);
    margin-left: 8px;
}

/* Drei Info-Karten nebeneinander */
.vis-infogrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Zwei Karten nebeneinander (Zeit/Ort + Material) */
.vis-splitgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 1200px) {
    .vis-infogrid,
    .vis-splitgrid {
        grid-template-columns: 1fr;
    }
}

/* Tabellen scrollen unter 1200px horizontal statt die Seite zu sprengen. */
.vis-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   10. Mobile
   --------------------------------------------------------------------------
   Tap-Ziele mindestens 44px, CTAs 52-56px.
   Die Grids laufen mobil im vertikalen Rendering-Modus von Syncfusion
   (RowDirection.Vertical) — hier wird dieser Modus zu Karten gestylt,
   statt die Tabelle horizontal scrollen zu lassen.
   ========================================================================== */

@media (max-width: 767px) {

    /* --- Grid-Zeilen als Karten --- */
    .e-grid.e-row-responsive,
    .e-grid.e-vertical-renderer {
        border: none;
        background: transparent;
    }

    .e-grid.e-row-responsive .e-gridheader,
    .e-grid.e-vertical-renderer .e-gridheader {
        display: none;
    }

    .e-grid.e-row-responsive .e-gridcontent,
    .e-grid.e-vertical-renderer .e-gridcontent {
        background: transparent;
        padding: 8px;
    }

    /* Kein border-spacing: die Zeilen sind display:block, damit greift es
       nicht - es addierte sich nur zum margin der Zeile. */
    .e-grid.e-row-responsive .e-gridcontent table,
    .e-grid.e-vertical-renderer .e-gridcontent table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    .e-grid.e-row-responsive .e-gridcontent tr.e-row,
    .e-grid.e-vertical-renderer .e-gridcontent tr.e-row {
        display: block;
        background: var(--vis-white);
        border: 1px solid var(--vis-border);
        margin-bottom: 6px;
        padding: 3px 0;
    }

    .e-grid.e-row-responsive .e-gridcontent tr.e-row:last-child,
    .e-grid.e-vertical-renderer .e-gridcontent tr.e-row:last-child {
        margin-bottom: 0;
    }

    .e-grid.e-row-responsive .e-gridcontent tr.e-row:hover,
    .e-grid.e-vertical-renderer .e-gridcontent tr.e-row:hover {
        background: var(--vis-white);
    }

    /* Ausgeblendete Spalten muessen ausgeblendet bleiben. Syncfusion versteckt
       sie mit `.e-grid .e-hide{display:none}` — nur zwei Klassen. Jede
       display-Regel hier ist spezifischer und wuerde die per
       Visible="false" bzw. Visible="@(!IsMobileDevice)" ausgeblendeten
       Spalten wieder einblenden (genau das passierte in der Aufgabenliste:
       Id, Lieferschein, Auftrag, Baustelle Nr., Ladedatum und Bemerkung
       tauchten mobil wieder auf). Darum :not(.e-hide) unten und hier
       explizit erneut ausblenden. */
    .e-grid.e-row-responsive .e-gridcontent td.e-hide,
    .e-grid.e-vertical-renderer .e-gridcontent td.e-hide {
        display: none !important;
    }

    .e-grid.e-row-responsive .e-gridcontent td.e-rowcell:not(.e-hide),
    .e-grid.e-vertical-renderer .e-gridcontent td.e-rowcell:not(.e-hide) {
        /* !important, weil das Theme mit
           `.e-bigger .e-grid.e-row-responsive .e-table td:not(.e-hide)`
           (5 Klassen) display:block setzt und sonst gewinnt - dann liefe die
           Beschriftung inline in den Wert hinein statt in eine eigene Spalte. */
        display: flex !important;
        align-items: baseline;
        gap: 10px;
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        padding: 2px 12px !important;
        border: none;
        background: transparent;
        font-size: 15px;
        line-height: 1.35;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Die Spaltenbeschriftung, die Syncfusion im vertikalen Modus als
       ::before in die Zelle setzt.

       WICHTIG — position: static. Das Material-Theme setzt
       `position: absolute; left: 13px; top: 6px` auf dieses ::before und
       haelt den Platz dafuer mit `padding-left: 55%` auf der Zelle frei.
       Beides zusammen ist der Theme-Entwurf. Wir ersetzen das Padding
       oben durch einen eigenen Wert — ohne `position: static` bliebe die
       Beschriftung absolut positioniert, waere aus dem Flex-Fluss heraus
       und lag dann sichtbar UEBER dem Zellwert (Aufgabenliste, Fotos).
       Erst static macht sie zu einem echten Flex-Element neben dem Wert. */
    .e-grid.e-row-responsive .e-gridcontent td.e-rowcell::before,
    .e-grid.e-vertical-renderer .e-gridcontent td.e-rowcell::before {
        position: static !important;
        top: auto !important;
        left: auto !important;
        flex: 0 0 38%;
        width: 38% !important;
        padding-right: 0 !important;
        font-family: var(--vis-font);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--vis-label);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Leere Zellen mobil nicht als leere Zeile anzeigen */
    .e-grid.e-row-responsive .e-gridcontent td.e-rowcell:empty,
    .e-grid.e-vertical-renderer .e-gridcontent td.e-rowcell:empty {
        display: none;
    }

    /* CTA in der Karte ueber die volle Breite */
    .e-grid.e-row-responsive .e-gridcontent td.e-unboundcell:not(.e-hide),
    .e-grid.e-vertical-renderer .e-gridcontent td.e-unboundcell:not(.e-hide) {
        display: block !important;
        padding: 6px 14px 8px !important;
    }

    .e-grid.e-row-responsive .e-gridcontent td.e-unboundcell::before,
    .e-grid.e-vertical-renderer .e-gridcontent td.e-unboundcell::before {
        display: none;
    }

    .e-grid.e-row-responsive .e-unboundcelldiv,
    .e-grid.e-vertical-renderer .e-unboundcelldiv {
        display: block;
        width: 100%;
    }

    /* Nur beschriftete Kommandos (START, ANZEIGEN) werden zur breiten Aktion.
       Reine Icon-Buttons wie Loeschen bleiben klein — als 44px-Balken ueber die
       ganze Kartenbreite haben sie viel zu viel Platz belegt. */
    .e-grid.e-row-responsive .e-unboundcelldiv > .e-btn:not(.e-icon-btn),
    .e-grid.e-vertical-renderer .e-unboundcelldiv > .e-btn:not(.e-icon-btn) {
        display: block;
        width: 100%;
        height: 44px;
        font-size: 15px;
    }

    .e-grid.e-row-responsive .e-unboundcelldiv > .e-btn.e-icon-btn,
    .e-grid.e-vertical-renderer .e-unboundcelldiv > .e-btn.e-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
    }

    /* Zelle mit reinem Icon-Kommando: rechts ausrichten, kaum Polster. */
    .e-grid.e-row-responsive .e-gridcontent td.e-unboundcell:has(> .e-unboundcelldiv > .e-btn.e-icon-btn),
    .e-grid.e-vertical-renderer .e-gridcontent td.e-unboundcell:has(> .e-unboundcelldiv > .e-btn.e-icon-btn) {
        padding: 0 8px 4px !important;
        text-align: right;
    }

    .e-grid.e-row-responsive .e-unboundcelldiv:has(> .e-btn.e-icon-btn),
    .e-grid.e-vertical-renderer .e-unboundcelldiv:has(> .e-btn.e-icon-btn) {
        text-align: right;
    }

}

/* ==========================================================================
   9b. Aufgabenliste als Karten (Design Screen 5)

   BEWUSST OHNE media query: die Klasse .vis-joblist setzt JobGrid nur, wenn
   IsMobileDevice gilt — und das umfasst den Syncfusion-Breakpoint "Medium"
   (Tablet, 768-1023px). In einer max-width:767px-Regel waere das Markup auf
   dem Tablet ohne Kartenstil geblieben.

   Das Grid laeuft hier im horizontalen Modus mit einer einzigen
   Template-Spalte, darum keine ::before-Beschriftungen. Zeilen und
   Zellen werden zu Bloecken, damit keine Tabellengeometrie stoert.
   ========================================================================== */

/* --- Reiter der Aufgabenliste (Offen / Aktiv / Geschlossene) --- */
.joblist-tabs {
    display: flex;
    background: var(--vis-white);
    border-bottom: 1px solid var(--vis-border);
    /* Bei vier Reitern (BackOffice) darf waagrecht gescrollt werden,
       statt die Beschriftungen umzubrechen. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.joblist-tabs::-webkit-scrollbar {
    display: none;
}

.joblist-tab {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    flex: 1 0 auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--vis-font);
    font-size: 15px;
    color: var(--vis-subtle);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--vis-transition);
}

.joblist-tab.is-active {
    border-bottom-color: var(--vis-accent);
    color: var(--vis-primary);
    font-weight: 600;
}

.joblist-tab__count {
    font-family: var(--vis-font-mono);
    font-size: 12px;
    color: var(--vis-faint);
}

.joblist-tab.is-active .joblist-tab__count {
    color: var(--vis-primary);
}

.joblist-panel.is-hidden {
    display: none;
}

.joblist-filter {
    display: flex;
    align-items: center;
    padding: 8px 12px 0;
    background: transparent;
}

    /* ---------------------------------------------------------------------- */
    .vis-joblist .e-grid,
    .vis-joblist .e-grid .e-gridcontent {
        border: none;
        background: transparent;
    }

    .vis-joblist .e-grid .e-gridheader {
        display: none;
    }

    .vis-joblist .e-grid .e-gridcontent {
        padding: 8px;
    }

    /* Der Scroll-Container darf die Karten nicht seitlich abschneiden. */
    .vis-joblist .e-grid .e-gridcontent,
    .vis-joblist .e-grid .e-gridcontent .e-content {
        width: 100% !important;
        overflow-x: hidden;
    }

    /* Die komplette Tabellengeometrie abschalten, nicht nur die Breite setzen.
       Syncfusion gibt bei AllowResizing ein <colgroup> mit festen <col>-Breiten
       und eine inline-Breite auf .e-table aus. Bleibt die Tabelle
       display:table, gewinnen diese Spaltenbreiten — die Zeile war dann nur
       so breit wie die erste Spalte und rechts blieb die Flaeche leer.
       Darum: Tabelle und tbody als Block, colgroup ausblenden. */
    .vis-joblist .e-grid .e-gridcontent table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
        border-collapse: collapse;
        border-spacing: 0;
    }

    .vis-joblist .e-grid .e-gridcontent colgroup {
        display: none !important;
    }

    .vis-joblist .e-grid .e-gridcontent tbody,
    .vis-joblist .e-grid .e-gridcontent tr.e-row {
        display: block;
        width: 100% !important;
        max-width: 100%;
    }

    .vis-joblist .e-grid .e-gridcontent tr.e-row {
        margin-bottom: 8px;
        border: 1px solid var(--vis-border);
        background: var(--vis-white);
    }

    .vis-joblist .e-grid .e-gridcontent tr.e-row:last-child {
        margin-bottom: 0;
    }

    .vis-joblist .e-grid .e-gridcontent tr.e-row:hover,
    .vis-joblist .e-grid .e-gridcontent tr.e-row.e-selectionbackground {
        background: var(--vis-white);
    }

    /* Ausgeblendete Spalten bleiben ausgeblendet. Ohne :not(.e-hide) hat die
       display-Regel unten die per Visible="false" versteckte Id-Spalte wieder
       eingeblendet — das war die Zahl oben links auf jeder Karte. */
    .vis-joblist .e-grid .e-gridcontent td.e-hide {
        display: none !important;
    }

    .vis-joblist .e-grid .e-gridcontent td.e-rowcell:not(.e-hide) {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        padding: 0 !important;
        border: none;
        background: transparent;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* --- Karteninhalt --- */
    .joblist-card {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 8px 12px 6px;
    }

    .joblist-card__top {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        font-family: var(--vis-font-mono);
        font-size: 12px;
    }

    .joblist-card__ref {
        color: var(--vis-subtle);
    }

    .joblist-card__sep {
        margin: 0 4px;
        color: var(--vis-border-strong);
    }

    .joblist-card__date {
        flex: 0 0 auto;
        color: var(--vis-muted);
    }

    .joblist-card__sync {
        margin-right: 4px;
    }

    .joblist-card__title {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.25;
        color: var(--vis-ink);
    }

    .joblist-card__meta {
        font-size: 12px;
        color: var(--vis-subtle);
    }

    .joblist-card__route {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 14px;
        color: var(--vis-ink-2);
    }

    .joblist-card__arrow {
        color: var(--vis-secondary);
        font-weight: 600;
    }

    .joblist-card__dispo {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        font-size: 13px;
        color: var(--vis-muted);
    }

    /* Bemerkungen sind teils sehr lang. Umbrechen (das Theme setzt auf der
       Zelle nowrap) und auf zwei Zeilen begrenzen, damit eine Karte nicht
       ausufert — der ganze Text steht in den Job Details. */
    .joblist-card__note {
        font-size: 13px;
        line-height: 1.35;
        color: var(--vis-subtle);
        white-space: normal;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* Reihenfolge festschreiben: Karteninhalt oben, Aktionen darunter. Ohne das
       haengt die Position der Kommando-Zelle davon ab, in welcher Reihenfolge
       Syncfusion die Zellen ausgibt — auf /RmtAuftrag standen die beiden
       Icon-Knoepfe dadurch ueber dem Text. */
    .vis-joblist .e-grid .e-gridcontent tr.e-row {
        display: flex;
        flex-direction: column;
    }

    .vis-joblist .e-grid .e-gridcontent td.e-rowcell:not(.e-hide):not(.e-unboundcell) {
        order: 0;
    }

    .vis-joblist .e-grid .e-gridcontent td.e-unboundcell:not(.e-hide) {
        order: 1;
    }

    /* --- Variante mit zwei Icon-Aktionen statt eines CTA (Positionen) ---
       Bearbeiten und Loeschen stehen nebeneinander am rechten Rand, nicht als
       zwei Knoepfe ueber die volle Breite.

       Beide Klassen am selben Element (vier statt drei Klassen im Selektor):
       die CTA-Regel weiter unten waere sonst gleich spezifisch und wuerde als
       spaetere Regel gewinnen — genau das ist beim ersten Versuch passiert. */
    .vis-joblist.vis-joblist--icons .e-grid .e-unboundcelldiv {
        /* !important, nicht noch mehr Klassen: das Theme pinnt das hier mit
           `.e-grid .e-gridcontent td.e-rowcell.e-unboundcell .e-unboundcelldiv`
           auf inline-block — vier Klassen PLUS ein Element, damit schlaegt es
           jede reine Klassenkette. */
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
    }

    /* 44x44 bleibt das Mindest-Tap-Ziel: in der Zeilenanordnung fiel der Knopf
       sonst auf 35px zusammen. Darum Hoehe und Breite hier ausdruecklich. */
    .vis-joblist.vis-joblist--icons .e-grid .e-unboundcelldiv > .e-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        min-width: 44px;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0;
        margin: 0;
    }

    /* In dieser Variante steht der Text links und die beiden Aktionen rechts
       daneben — nicht darunter. Untereinander war eine Zeile 117px hoch fuer
       zwei Zeilen Text plus eine 44px-Knopfreihe. */
    .vis-joblist.vis-joblist--icons .e-grid .e-gridcontent tr.e-row {
        flex-direction: row;
        align-items: center;
    }

    .vis-joblist.vis-joblist--icons .e-grid .e-gridcontent td.e-rowcell:not(.e-hide):not(.e-unboundcell) {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
    }

    .vis-joblist.vis-joblist--icons .e-grid .e-gridcontent td.e-unboundcell:not(.e-hide) {
        flex: 0 0 auto;
        width: auto !important;
        padding: 0 8px !important;
    }

    /* CTA (START) sitzt in der Kommando-Zelle unter der Karte */
    .vis-joblist .e-grid .e-gridcontent td.e-unboundcell:not(.e-hide) {
        display: block !important;
        width: 100% !important;
        padding: 0 12px 8px !important;
        border: none;
    }

    .vis-joblist .e-grid .e-unboundcelldiv {
        display: block;
        width: 100%;
    }

    .vis-joblist .e-grid .e-unboundcelldiv > .e-btn {
        display: block;
        width: 100%;
        /* 44 statt der 52px aus dem Design — ausdruecklich flacher gewuenscht,
           bleibt aber auf dem Mindest-Tap-Ziel. */
        height: 44px;
        font-size: 15px;
    }

/* ==========================================================================
   9c. Mobile (Fortsetzung)
   ========================================================================== */

@media (max-width: 767px) {

    /* --- Pager mobil ---
       !important, weil das Theme mit `.e-bigger .e-pager` padding: 19px 0
       setzt und gegen die eine Klasse gewinnt.

       Bewusst KEIN display:flex auf .e-pager: der .e-pagercontainer legt seine
       Pfeile im Blockfluss aus. Als Flex-Element wurde er von der
       Seitenmeldung zusammengedrueckt und die Pfeile brachen um — "|<" und
       ">|" landeten auf einer zweiten Zeile. Die Meldung bleibt darum in ihrer
       eigenen Zeile, wie vom Theme vorgesehen. */
    .e-pager {
        padding: 4px 8px !important;
    }

    .e-pager .e-numericitem {
        min-width: 32px;
        height: 32px;
        line-height: 32px;
    }

    /* Seitenzahl und Anzahl in dieselbe Zeile wie die Pfeile statt in eine
       eigene Zeile darunter — das war eine ganze Zeile Leerraum je Grid. */
    /* Die beiden Spannen ("1 of 1 pages" und "(1 items)") standen ohne
       Abstand aneinander — als Flex-Zeile mit gap lesbar. */
    .e-pager .e-parentmsgbar {
        margin: 2px 0 0;
    }

    /* Die beiden Spannen standen ohne Abstand aneinander ("1of1pages").
       Bewusst nur ein margin und kein display/flex auf Syncfusion-Innereien —
       genau das hat vorher die Pfeile umbrechen lassen. */
    .e-pager .e-pagecountmsg {
        margin-left: 6px;
    }

    .e-pager .e-pagesizes,
    .e-pager .e-pagerconstant {
        margin: 0;
    }

    /* --- Buttons und Eingaben mobil groesser --- */
    .e-btn,
    .btn,
    .vis-btn {
        min-height: 44px;
    }

    .form-control,
    .vis-input {
        height: 54px;
        font-size: 17px;
    }

    .e-input-group input.e-input,
    .e-float-input input {
        height: 48px;
        font-size: 16px;
    }

    /* --- Karten mobil ohne Seitenrand --- */
    .vis-card {
        border-left: none;
        border-right: none;
    }

    /* Untereinander gestapelte Karten mobil enger: 6px statt 18px. */
    .vis-card + .vis-card {
        margin-top: 6px;
    }

    .vis-infogrid,
    .vis-splitgrid {
        gap: 6px;
    }

    .vis-card__head {
        padding: 9px 12px;
    }

    .vis-card__body {
        padding: 0;
    }

    /* Info-Karten (Kunde / Baustelle / Chauffeur) mobil kompakter. */
    .vis-infocard {
        padding: 11px 14px;
    }

    .vis-actionbar {
        padding: 8px 0;
        gap: 8px;
    }

    .vis-actionbar__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .vis-actionbar__actions .e-btn,
    .vis-actionbar__actions .btn {
        flex: 1 1 auto;
    }

    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 19px; }
}

/* Tablet: Tabellen scrollen horizontal, Layout bleibt zweispaltig */
@media (min-width: 768px) and (max-width: 1199px) {
    .e-grid .e-rowcell,
    .e-grid .e-headercell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ==========================================================================
   10. RMT-spezifisch
   ==========================================================================
   Muster, die es in TopLog nicht gibt, weil dort die zugehoerigen Seiten
   fehlen: die Suchkarte (Jobs, RMT Auftrag), die Meldungsflaeche ohne
   Bootstrap-Alert und der Leerzustand vor der ersten Suche.
   Bewusst hier und nicht in je einer <Seite>.razor.css: zwei Seiten teilen
   sich dieselben Muster, und scoped CSS wird vor material.css geladen.
   ========================================================================== */

.vis-searchcard {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    padding: 16px 18px;
}

.vis-searchcard__field {
    display: flex;
    flex-direction: column;
    flex: 1 1 220px;
    min-width: 0;
}

.vis-searchcard__field > label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vis-label);
    margin-bottom: 2px;
}

.vis-searchcard__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.vis-searchcard__actions .e-btn {
    height: 32px;
}

/* Dichte der Suchkarte. Material gibt dem Feld-Wrapper 4px margin-bottom und
   dem Feld selbst 40px Hoehe; zusammen mit dem Kartenabstand ergab das drei
   deutlich getrennte Bloecke statt eines Suchformulars. Fuer JEDEN Zustand
   gepinnt, sonst springt die Schreibmarke im Fokus (Regel 2). */
.vis-searchcard__field .e-input-group,
.vis-searchcard__field .e-control-wrapper,
.vis-searchcard__field .e-float-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.vis-searchcard__field .e-input-group input.e-input,
.vis-searchcard__field .e-input-group input.e-input:focus,
.vis-searchcard__field .e-input-group.e-input-focus input.e-input,
.vis-searchcard__field .e-input-group.e-control-wrapper input.e-input {
    height: 36px !important;
    padding: 0 12px !important;
}

/* --- Meldungsflaechen ---------------------------------------------------- */
.vis-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--vis-ink);
    background: var(--vis-info-bg);
    border: 1px solid var(--vis-info-border);
}

.vis-notice--warn {
    background: var(--vis-accent-soft);
    border-color: var(--vis-accent);
}

.vis-notice--error {
    background: #FDECEC;
    border-color: #E7B4B4;
}

/* --- Leerzustand --------------------------------------------------------- */
.vis-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
    background: var(--vis-white);
    border: 1px dashed var(--vis-border-strong);
}

.vis-empty__mark {
    width: 34px;
    height: 38px;
    background: var(--vis-border-strong);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.vis-empty__text {
    font-size: 15px;
    color: var(--vis-muted);
    max-width: 34ch;
}

@media (max-width: 767px) {
    .vis-searchcard {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 14px;
    }

    /* Auf dem Telefon bleibt das Feld bei seinen bisherigen 40px — die
       Ersparnis kommt aus den Abstaenden, nicht aus dem Tap-Ziel. */
    .vis-searchcard__field .e-input-group input.e-input,
    .vis-searchcard__field .e-input-group input.e-input:focus,
    .vis-searchcard__field .e-input-group.e-input-focus input.e-input,
    .vis-searchcard__field .e-input-group.e-control-wrapper input.e-input {
        height: 40px !important;
    }

    /* In der Spaltenrichtung ist die flex-Basis die HOEHE: mit `flex: 1 1 220px`
       aus der Zeilenvariante wurde jedes Feld 220px hoch und die Karte zog sich
       ueber den halben Bildschirm. */
    .vis-searchcard__field {
        flex: 0 0 auto;
    }

    .vis-searchcard__actions .e-btn {
        flex: 1 1 auto;
        height: 44px;
    }

    .vis-empty {
        padding: 40px 16px;
    }
}

/* --- Formularfeld mit echtem Label (Regel 2) ----------------------------- */
/* Ueberall dort verwendet, wo vorher ein Syncfusion-Float-Label stand. Das
   Label ist ein eigenes Element ueber dem Feld, damit es nicht an der
   Feldbreite haengt und nicht als zugehoerig zur Zeile darueber gelesen wird. */
.vis-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vis-field > label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vis-label);
    margin-bottom: 2px;
}

.vis-field .e-input-group,
.vis-field .e-float-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.vis-fieldrow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.vis-fieldrow > .vis-field {
    flex: 1 1 220px;
}

/* Ein Feld, das die ganze Zeile fuer sich braucht. Die Artikelauswahl steht
   sonst neben der Menge auf halber Dialogbreite, und die Artikelnamen
   ("111.001.010 Eisen- und Stahldrehspaene") brechen dort mitten im Wort ab -
   in der Liste des Auswahlfeldes ebenso, denn deren Breite folgt dem Feld. */
.vis-fieldrow > .vis-field--full {
    flex: 1 1 100%;
}

.vis-fielderror {
    font-size: 12px;
    color: #B3261E;
}

/* --- Dialoginhalt -------------------------------------------------------- */
.vis-dialogbody {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 8px;
}


@media (max-width: 767px) {
    .vis-fieldrow > .vis-field {
        flex: 1 1 100%;
    }
}

/* --- Badge fuer noch nicht uebertragene Eintraege ------------------------ */
.vis-badge--pending {
    background: var(--vis-accent-soft);
    color: var(--vis-primary);
    border: 1px solid var(--vis-accent);
    margin-left: 8px;
}

/* --- Formulardialog: Fusszeile teilt sich wie beim Foto-Dialog ----------- */
.vis-formdialog .e-dlg-content {
    padding-top: 8px;
}

/* --- Bildbetrachter und Kamera (RMT Auftrag) ---------------------------- */
/* Beide sind Leinwaende: die Groesse traegt Bedeutung. Sie steht hier in
   Viewport-Einheiten statt als feste Prozentangabe am Dialog (Regel 3) und
   global statt scoped, weil das Dialog-Wurzelelement Syncfusion gehoert. */
.e-dialog.rmt-viewer-dialog,
.e-dialog.rmt-camera-dialog,
.e-dialog.report-camera-dialog {
    /* Spalte, damit die Fusszeile IMMER im Dialog bleibt: das Kamerabild ist
       hochkant und war mit height:auto so hoch, dass es Abbrechen/OK aus dem
       Dialog geschoben hat — auf dem iPhone unerreichbar. */
    display: flex;
    flex-direction: column;
    width: 95vw;
    max-width: 95vw;
    /* !important, weil Syncfusion bei fester Groesse Inline-Styles auf das
       Dialog-Element schreibt. */
    height: 80vh !important;
    max-height: 80vh;
}

/* iOS Safari rechnet vh gegen den GROSSEN Viewport, also so, als waere die
   Browserleiste eingeklappt. Damit reichte der Dialog unter die untere Leiste,
   und genau dort sass die Fusszeile mit Abbrechen/OK — unerreichbar.
   dvh ist der tatsaechlich sichtbare Bereich (iOS ab 15.4, Chrome ab 108);
   die 80vh oben sind der knappere Rueckfall fuer aeltere Geraete. */
@supports (height: 100dvh) {
    .e-dialog.rmt-viewer-dialog,
    .e-dialog.rmt-camera-dialog,
    .e-dialog.report-camera-dialog {
        height: 90dvh !important;
        max-height: 90dvh;
    }
}

.e-dialog.rmt-viewer-dialog .e-dlg-header-content,
.e-dialog.rmt-camera-dialog .e-dlg-header-content,
.e-dialog.report-camera-dialog .e-dlg-header-content,
.e-dialog.rmt-viewer-dialog .e-footer-content,
.e-dialog.rmt-camera-dialog .e-footer-content,
.e-dialog.report-camera-dialog .e-footer-content {
    flex: 0 0 auto;
}

/* Der Inhalt nimmt den Rest und gibt ihn nicht nach aussen weiter.
   height:auto !important, weil Syncfusion bei fester Dialoghoehe eine
   Inline-Hoehe auf die Inhaltsflaeche schreibt. */
.e-dialog.rmt-viewer-dialog .e-dlg-content,
.e-dialog.rmt-camera-dialog .e-dlg-content,
.e-dialog.report-camera-dialog .e-dlg-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    padding: 0;
    overflow: hidden;
}

/* --- Leerer Grid-Inhalt -------------------------------------------------- */
.vis-gridempty {
    padding: 18px;
    font-size: 14px;
    color: var(--vis-faint);
}

/* Feldzeile, in der eine Checkbox neben einem Feld steht: die Checkbox soll
   auf der Grundlinie des Feldes sitzen, nicht am oberen Rand. */
.vis-fieldrow--middle {
    align-items: center;
}

/* Senkrechter Feldstapel — fuer Bloecke, die per display umgeschaltet werden. */
.vis-fieldstack > * + * {
    margin-top: 12px;
}

/* --- Auftrags-Details als Reiter (JobDetailsCard UseTabs) ---------------- */
/* Nutzt dieselben Reiter wie die Auftragsliste. Die Tabelle sitzt direkt im
   Panel, ohne zweite Kopfzeile darueber. */
.jobinfo-card {
    overflow: hidden;
}

.jobinfo-panel.is-hidden {
    display: none;
}

.jobinfo-panel > .vis-kv {
    margin: 0;
}

/* Aktion in einer Kartenkopfzeile: 32px, damit der Kopf so hoch bleibt wie
   jeder andere (sonst zieht ein 44px-Knopf ihn von 43 auf 62px). */
.vis-card__head-right .e-btn {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
}