/* ===== Seisa Times – Planner-inspiriertes UI ===== */

:root {
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;

    /* Gesamthöhe des Statistik-Kastens (inkl. Padding); Tabellenbereich füllt den Rest und scrollt */
    --stats-panel-height: 205px;

    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 12px;

    --font-family-base: "Open Sans", sans-serif;
    --font-size-title: 16px;
    --font-size-section: 13px;
    --font-size-body: 13px;
    --font-size-label: 12px;
    --font-size-caption: 11px;

    --color-page: #f5f5f5;
    --color-toolbar: #fafafa;
    --color-surface: #ffffff;
    --color-surface-muted: #fcfcfc;
    --color-border: #e0e0e0;
    --color-border-soft: #eeeeee;
    --color-text: #333333;
    --color-text-soft: #666666;
    --color-text-muted: #8a8a8a;

    --color-primary: #ffa500;
    --color-primary-hover: #e69500;
    --color-danger: #d32f2f;
    --color-danger-hover: #b71c1c;
    --color-success: #4caf50;
    --color-success-hover: #3f9443;
    --color-warning: #e65100;
    --color-info: #1976d2;

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-card-hover:
        0 3px 10px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);

    --transition: 0.15s ease;
    --form-input-height: 36px;
    --form-input-padding: 8px 10px;
    /* Höhe der Filter-Kopfzeile für position:sticky der Sort-Zeile (unterhalb der Filterzeile) */
    --data-table-filter-row-sticky-offset: 22px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 15px;
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    line-height: 1.45;
}

/* Icons in interaktiven Kontrollen folgen der Textfarbe des Elternelements. */
.btn .material-icons,
.tab-btn.active .material-icons,
.th-filter-btn .material-icons,
.th-filter-clear .material-icons,
.status-icon-trigger .material-icons,
.status-icon-option .material-icons {
    color: currentColor;
}

/* --- Header / Toolbar --- */
.app-header {
    flex-shrink: 0;
    background: var(--color-toolbar);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-subtle);
    position: sticky;
    top: 0;
    z-index: 20;
}

.toolbar-shell {
    width: min(1440px, calc(100% - 32px));
    margin: 0 auto;
    padding: var(--spacing-sm) 0;
}

.toolbar-main {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--spacing-sm);
}

.toolbar-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-card);
}

.toolbar-group-brand {
    min-width: 230px;
    justify-content: center;
}

.toolbar-group-tabs {
    flex: 1;
    min-width: 280px;
    justify-content: center;
}

.toolbar-group-heading,
.panel-eyebrow,
.form-section-title,
.stat-label {
    font-size: var(--font-size-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #000;
    line-height: 1.2;
}

.toolbar-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app-header h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
}

.toolbar-subtitle {
    font-size: var(--font-size-label);
    color: var(--color-text-muted);
}

.tab-bar {
    border-bottom: none;
    padding: var(--spacing-sm);
    background: var(--color-surface);
}

.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

.tab-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    min-height: 32px;
    padding: 6px 12px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-label);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--radius-small);
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        color var(--transition),
        transform var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.tab-btn {
    width: 120px;
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 0;
    padding-right: 0;
    border: none;
    background: var(--color-surface);
    color: var(--color-text-soft);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.tab-btn .material-icons {
    font-size: 18px;
}

.tab-btn:hover {
    background: #f5f5f5;
    box-shadow: var(--shadow-card-hover);
}

.tab-btn.active {
    background: var(--color-primary);
    color: #000;
}

.tab-btn-narrow {
    width: 80px;
}

.tab-btn-right {
    margin-left: auto;
}

/** Logout: deutlich als Abmelden erkennbar (roter Hintergrund) */
.tab-btn-logout {
    background: #c62828;
    color: #fff;
    box-shadow:
        0 2px 8px rgba(198, 40, 40, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.12);
}

.tab-btn-logout .material-icons {
    color: #fff;
}

.tab-btn-logout:hover {
    background: #b71c1c;
    color: #fff;
    box-shadow: var(--shadow-card-hover);
}

.tab-btn-logout.tab-btn.active {
    background: #b71c1c;
    color: #fff;
}

/* --- Main Layout --- */
.tab-content {
    width: min(1440px, calc(100% - 32px));
    margin: 0 auto;
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
    padding-top: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tab-panel {
    display: none;
}

/*
 * Kein Dokument-Scroll: lange Inhalte (Formular, Platzhalter) scrollen im jeweiligen Tab-Panel.
 * Zeiten-Tab: overflow hidden — nur .table-scroll-wrap scrollt die Tabelle (sticky thead).
 */
.tab-panel.active:not(.tab-panel--table) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tab-panel.tab-panel--table.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.panel-card {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/*
 * Zeiten-Tab: wie Seisa-Gear (sg-card--list) — Karte füllt die Höhe, nur der Tabellen-Scroll-Bereich scrollt.
 */
.panel-card-table {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    /* Abstand Pagination ↔ Tabellen-Scrollbereich (sonst --spacing-md von .panel-card). */
    gap: 5px;
}

.table-panel-fixed {
    flex-shrink: 0;
}

.panel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 0 2px;
}

.panel-title {
    margin: 2px 0 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
}

/* --- Cards / Form --- */
.form-card,
.stats-bar,
.stats-panel,
.table-wrapper,
.placeholder-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
}

.form-card {
    padding: var(--spacing-xl);
    max-width: 550px;
}

.form-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    max-width: 600px;
}

.form-work-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-row {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-end;
}

.form-row-checks {
    align-items: center;
    gap: var(--spacing-xl);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

label .required {
    color: var(--color-danger, #c62828);
}

.form-group-grow {
    flex: 1 1 0;
    min-width: 0;
}

.form-group-auto {
    flex: 0 0 auto;
}

.form-group-auto input {
    width: auto;
}

.form-group-spesen-amount,
.form-group-spesen-vat {
    flex: 0 0 auto;
    width: 90px;
}

.form-group-time {
    flex: 0 0 auto;
    position: relative;
}

.form-group-time input {
    width: 90px;
}

/* Ensure Pause field matches fixed width as well. */
#f-break {
    width: 90px;
}

.form-group-km {
    flex: 0 0 auto;
    width: 90px;
}

#f-km {
    margin-bottom: 7px;
}

.form-trip-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-group label {
    font-size: var(--font-size-label);
    font-weight: 600;
    color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea,
.multi-select-display,
.multi-select-custom input,
.status-select {
    width: 100%;
    min-height: var(--form-input-height);
    padding: var(--form-input-padding);
    font: inherit;
    color: var(--color-text);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: var(--radius-small);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.02);
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.multi-select-display:focus-within,
.multi-select.open .multi-select-display,
.multi-select-custom input:focus,
.status-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.16);
}

.form-group textarea {
    min-height: 84px;
    resize: vertical;
}

/* Kommentar soll standardmaessig nur ca. 2 Zeilen hoeher sein. */
.form-group textarea.comment-textarea {
    min-height: 48px;
    height: 48px;
    resize: vertical;
}

.form-section {
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 36px;
}

.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
}

.checkbox-row input:disabled + label,
.checkbox-row label.disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.checkbox-row input:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

#f-show-trip {
    background-color: rgba(255, 255, 255, 1);
}

.checkbox-row label {
    margin: 0;
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-text-soft);
}

.checkbox-row label.label-black {
    color: rgba(0, 0, 0, 1);
}

.form-spesen-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-spesen-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.spesen-block {
    padding: var(--spacing-md);
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
}

.spesen-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.spesen-block-title {
    font-weight: 600;
    font-size: var(--font-size-body);
}

/* Minus „Block entfernen“: flach (20px hoch), kein hoher .btn-Block. */
.spesen-block-header .btn.btn-icon.btn-icon-small {
    box-sizing: border-box;
    width: 24px;
    height: 20px;
    min-width: 24px;
    min-height: 20px;
    max-width: 24px;
    max-height: 20px;
    padding: 0;
    flex-shrink: 0;
    gap: 0;
}

.spesen-block-header .btn.btn-icon.btn-icon-small .material-icons {
    font-size: 16px;
    line-height: 1;
}

.spesen-block-actions {
    margin-top: var(--spacing-sm);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-icon-small {
    padding: 4px 8px;
    min-height: auto;
}

.btn-icon .material-icons {
    font-size: 18px;
}

.form-placeholder-text {
    margin: 0;
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
}

/* --- Custom Time Input --- */
.time-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 90px;
}

.time-input-wrap input {
    width: 100%;
    padding-right: 32px;
}

.time-icon-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: inherit;
    line-height: 1;
}

.time-icon-btn:hover {
    color: var(--color-text);
}

/* Nur in Tabellenzellen: Uhr-Icon abgeschwächt (Picker-Trigger), nicht im Formular. */
.data-table td .time-icon-btn {
    color: var(--color-text-muted);
}

.data-table td .time-icon-btn:hover {
    color: var(--color-text);
}

.time-icon-btn .material-icons {
    font-size: 18px;
    color: inherit;
}

.time-picker-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 200;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card-hover);
    padding: var(--spacing-sm) var(--spacing-md);
}

.time-picker-selects {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.time-picker-selects select {
    font: inherit;
    font-size: var(--font-size-body);
    padding: 4px 8px;
    min-width: 56px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
}

.time-picker-selects span {
    font-weight: 700;
    font-size: 1.1em;
}

.time-picker-ok {
    min-height: 28px;
    padding: 2px 10px;
    font-size: var(--font-size-label);
}

/* --- Job Autocomplete --- */
.job-autocomplete {
    position: relative;
}

.job-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-card);
    max-height: 200px;
    overflow-y: auto;
}

.job-suggestions li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--font-size-body);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-suggestions li:hover,
.job-suggestions li.active {
    background: var(--color-primary);
    color: #000;
}

.data-table td.td-col-job {
    overflow: visible;
    position: relative;
    max-width: 280px;
    /* wie andere td: middle (top wirkte mit Autocomplete nach „hochgeschoben“) */
    vertical-align: middle;
}

/* Notiz: einzeilig mit Ellipsis im sichtbaren Bereich; Volltext im title-Tooltip */
.data-table td.td-col-comment {
    vertical-align: middle;
}

.data-table td.td-col-comment .data-table-comment-cell {
    display: block;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
}

.job-autocomplete.job-autocomplete-table {
    min-width: 8rem;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Dropdown: über Zellenbreite, aber begrenzt (ca. halb so breit wie zuvor) */
.job-autocomplete-table .job-suggestions {
    left: 0;
    right: auto;
    min-width: max(100%, min(95vw, 21rem));
    width: max-content;
    max-width: min(95vw, 480px);
}

.job-autocomplete-table .job-suggestions li {
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
}

.data-table-job-cell {
    display: inline-block;
    min-width: 4rem;
    outline: none;
}

/* Duplikat-Verdachtsmarkierung vor dem Jobnamen */
.duplicate-suspect-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0 2px 0 0;
    cursor: pointer;
    color: #c62828;
    vertical-align: middle;
    flex-shrink: 0;
}

.duplicate-suspect-icon .material-icons {
    font-size: 18px;
}

.duplicate-suspect-icon:hover,
.duplicate-suspect-icon:focus-visible {
    color: #b71c1c;
}

/* --- Multi Select --- */
.multi-select {
    position: relative;
}

/* Vollflächiger unsichtbarer Layer: erster Touch außerhalb schließt ohne Tap-Through (Touch/Maus). */
.multi-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
    touch-action: none;
}

/* Eingabefeld und Liste müssen über dem Vollbild-Backdrop liegen, sonst ist nichts im Widget bedienbar. */
.multi-select.open .multi-select-display {
    position: relative;
    z-index: 1050;
}

.multi-select-display {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    cursor: pointer;
}

.multi-select-display-with-input {
    cursor: default;
}

.multi-select-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    padding: 4px 0;
    font-size: inherit;
    font-family: inherit;
    background: transparent;
}

.multi-select-placeholder {
    color: var(--color-text-muted);
}

.multi-select-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 2px 8px;
    background: #fff3e0;
    color: #9a5a00;
    border: 1px solid #ffd18a;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.multi-select-tag .remove {
    cursor: pointer;
    color: #b26a00;
    line-height: 1;
}

.multi-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card-hover);
    z-index: 15;
}

.multi-select.open .multi-select-dropdown {
    display: block;
    z-index: 1051;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color var(--transition);
}

.multi-select-option:hover,
.multi-select-option.active {
    background: var(--color-primary);
    color: #000;
}

.multi-select-option.active input[type="checkbox"] {
    accent-color: #000;
}

.multi-select-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary);
}

/* Fahrer / Rechnungen Name: Optionen als Buttons — spezifischer als background:transparent, damit .active orange wie Team */
button.multi-select-option.multi-select-option--driver {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    box-sizing: border-box;
    outline: none;
}

button.multi-select-option.multi-select-option--driver:hover,
button.multi-select-option.multi-select-option--driver.active {
    background: var(--color-primary);
    color: #000;
}

button.multi-select-option.multi-select-option--driver.multi-select-option--picked:not(:hover):not(.active) {
    font-weight: 600;
    background: #fff8f0;
}

button.multi-select-option.multi-select-option--driver:focus-visible:not(.active) {
    box-shadow: inset 0 0 0 2px var(--color-primary);
    background: #fffaf0;
}

.multi-select-custom {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-top: 1px solid var(--color-border-soft);
    background: var(--color-surface-muted);
}

.multi-select-custom button {
    min-width: 40px;
    border: none;
    border-radius: var(--radius-small);
    background: var(--color-primary);
    color: #000;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-subtle);
    transition:
        background-color var(--transition),
        box-shadow var(--transition);
}

.multi-select-custom button:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-card);
}

/* --- Buttons --- */
.btn {
    border: none;
    box-shadow: var(--shadow-card);
}

.btn:hover {
    box-shadow: var(--shadow-card-hover);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    cursor: default;
    opacity: 0.7;
    box-shadow: none;
}

.btn-primary,
.btn-success {
    background: var(--color-primary);
    color: #000;
}

.btn-primary:hover,
.btn-success:hover {
    background: var(--color-primary-hover);
}

.btn-outline {
    background: #fff;
    color: #424242;
    border: 1px solid #ddd;
}

.btn-outline:hover {
    background: #f5f5f5;
    border-color: #d0d0d0;
}

/* Tab „Zeiten“: Closed-Einträge einblenden (aktiv = orange) */
/* Toolbar: markierte Einträge löschen */
.btn-delete-selected {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #c62828;
    color: #fff;
    border: 1px solid #b71c1c;
}

.btn-delete-selected:hover:not(:disabled) {
    background: #b71c1c;
    color: #fff;
}

.btn-delete-selected:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-delete-selected .material-icons {
    font-size: 18px;
}

.btn-closed-toggle {
    gap: 6px;
}

/* Gleiche Höhe (30px) wie die übrigen Toolbar-Buttons in der Tabellenleiste */
.table-toolbar .btn-closed-toggle {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 1;
}

.btn-closed-toggle .material-icons {
    font-size: 18px;
}

.btn.btn-closed-toggle.btn-closed-toggle--active {
    background: var(--color-primary);
    border-color: var(--color-primary-hover);
    color: #000;
}

.btn.btn-closed-toggle.btn-closed-toggle--active:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn.btn-only-checked-toggle.btn-only-checked-toggle--active {
    background: var(--color-primary);
    border-color: var(--color-primary-hover);
    color: #000;
}

.btn.btn-only-checked-toggle.btn-only-checked-toggle--active:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}

.btn-danger:hover {
    background: var(--color-danger-hover);
}

.btn-sm {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
}

/* --- Stats --- */
.stats-bar {
    margin-top: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

.stat-item {
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label {
    color: var(--color-text-soft);
}

.stat-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-text);
}

.stats-panel {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: var(--spacing-sm) var(--spacing-lg);
    height: var(--stats-panel-height);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Block mit „Markiert …“ + Tabelle: nimmt die Höhe des Panels ein */
.stats-panel-detail {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/*
 * Aufträge-Tab: Statistik inkl. KPI + Chart + Legende immer sichtbar; Höhe begrenzt, mit Scroll.
 */
.stats-panel.stats-panel--job-orders {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    height: auto;
    min-height: 400px;
    max-height: min(72vh, 920px);
    overflow-y: auto;
    overflow-x: hidden;
}

.job-order-stats-chart-legend-block {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Fünf Spalten; pro Spalte gemeinsame Wert-Spalte → Zahlen untereinander rechtsbündig */
.job-order-stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--spacing-xs) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}

/* Zwei Zeilen Kennzahl|Wert: ein 2×2-Grid, rechte Spalte nur für Zahlen */
.job-order-kpi-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.65em;
    row-gap: var(--spacing-xs);
    align-items: baseline;
    min-width: 0;
}

.job-order-kpi-column--single {
    grid-template-rows: auto;
}

/* Min./Max.-Stunden: zwei Kennzahlblöcke; Desktop wie eine Spalte, Mobile per display:contents im 3×3-Raster */
.job-order-kpi-column--hours-split {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.job-order-kpi-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.65em;
    align-items: baseline;
    min-width: 0;
}

/* Kennzahlen-Überschriften wie .stats-table thead th; in der Textspalte rechtsbündig (an die Werte heran) */
.job-order-stats-kpi-grid .stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    line-height: 1.3;
    min-width: 0;
    display: block;
    width: 100%;
    text-align: right;
}

/* Werte: rechtsbündig in der gemeinsamen Wert-Spalte der jeweiligen KPI-Spalte */
.job-order-stats-kpi-grid .stat-value {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    justify-self: end;
    white-space: nowrap;
}

.job-order-stats-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 220px;
    height: min(38vh, 280px);
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
}

.job-order-stats-chart-wrap canvas {
    display: block;
    max-height: 100%;
}

.job-order-stats-chart-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-lg);
    align-items: center;
    flex-shrink: 0;
}

/* Legende: Farbbalken (wie Linienfarbe) + Beschriftung + Checkbox */
.job-order-stats-chart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
    user-select: none;
}

.job-order-stats-chart-swatch {
    width: 1.25rem;
    height: 5px;
    border-radius: 2px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.job-order-stats-chart-toggle-text {
    font-size: var(--font-size-caption);
    color: var(--color-text-soft);
    white-space: nowrap;
}

.job-order-stats-chart-toggle input {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.job-order-stats-chart-toggle--revenue_per_hour .job-order-stats-chart-swatch {
    background-color: #1565c0;
}

.job-order-stats-chart-toggle--revenue_per_hour input {
    accent-color: #1565c0;
}

.job-order-stats-chart-toggle--revenue .job-order-stats-chart-swatch {
    background-color: #2e7d32;
}

.job-order-stats-chart-toggle--revenue input {
    accent-color: #2e7d32;
}

.job-order-stats-chart-toggle--expenses .job-order-stats-chart-swatch {
    background-color: #ef6c00;
}

.job-order-stats-chart-toggle--expenses input {
    accent-color: #ef6c00;
}

.job-order-stats-chart-toggle--hours .job-order-stats-chart-swatch {
    background-color: #6a1b9a;
}

.job-order-stats-chart-toggle--hours input {
    accent-color: #6a1b9a;
}

.job-order-stats-chart-toggle--margin .job-order-stats-chart-swatch {
    background-color: #00838f;
}

.job-order-stats-chart-toggle--margin input {
    accent-color: #00838f;
}

.job-order-stats-chart-toggle--wage_total .job-order-stats-chart-swatch {
    background-color: #c62828;
}

.job-order-stats-chart-toggle--wage_total input {
    accent-color: #c62828;
}

.stats-count-line {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.stats-count-label {
    color: var(--color-text-soft);
    margin-right: 0.35em;
}

.stats-count-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stats-idle-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5em 0.75em;
    font-size: 0.95rem;
    color: var(--color-text);
}

.stats-filter-hint {
    font-style: italic;
    color: var(--color-text-soft);
}

.stats-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    line-height: 14px;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.stats-table th,
.stats-table td {
    padding: var(--spacing-xs) 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.stats-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--color-text-soft);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--color-surface);
    box-shadow: 0 1px 0 var(--color-border, #e0e0e0);
}

.stats-table tbody th {
    font-weight: 600;
    color: var(--color-text);
}

.stats-table-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: middle;
}

/* Rechnungsstatistik Ø-Tag: klickbarer Hinweis — wie reine Zahlen: nur Inhaltsbreite, rechtsbündig */
.stats-table-avg-day-rate-link {
    display: inline-block;
    max-width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    font-variant-numeric: tabular-nums;
    color: #c62828;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-align: right;
    vertical-align: baseline;
    line-height: inherit;
}

.stats-table-avg-day-rate-link:hover {
    color: #b71c1c;
}

.stats-table-avg-day-rate-link:focus-visible {
    outline: 2px solid rgba(198, 40, 40, 0.45);
    outline-offset: 2px;
    border-radius: 2px;
}

.invoice-stats-avg-day-rate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 12000;
    align-items: center;
    justify-content: center;
}

.invoice-stats-avg-day-rate-overlay.is-open {
    display: flex;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.invoice-stats-avg-day-rate-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: min(95vw, 420px);
    max-width: 95vw;
    max-height: 85vh;
    overflow: auto;
    box-sizing: border-box;
}

.invoice-stats-avg-day-rate-title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.invoice-stats-avg-day-rate-hint {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    color: var(--color-text-soft, #666);
    line-height: 1.4;
}

.invoice-stats-avg-day-rate-empty {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--color-text-soft, #666);
    font-style: italic;
}

.invoice-stats-avg-day-rate-list {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    list-style: disc;
}

.invoice-stats-avg-day-rate-list li {
    margin-bottom: 0.35rem;
    word-break: break-word;
}

.invoice-stats-avg-day-rate-actions {
    display: flex;
    justify-content: flex-end;
}

/* Rechnungsstatistik: Person + query_stats (Stundensatz-Chart) */
.stats-table-person.stats-table-person--with-chart {
    max-width: 15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    vertical-align: middle;
}

.stats-table-person--with-chart .stats-table-person-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.stats-table-person-chart-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
    color: var(--color-text-soft, #666);
    line-height: 0;
}

.stats-table-person-chart-btn:hover {
    color: var(--color-primary);
    background: rgba(0, 0, 0, 0.04);
}

.stats-table-person-chart-btn .material-icons {
    font-size: 18px;
}

.stats-table-person-chart-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.invoice-hourly-rate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 12000;
    align-items: center;
    justify-content: center;
}

.invoice-hourly-rate-overlay.is-open {
    display: flex;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.invoice-hourly-rate-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: min(95vw, 520px);
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
}

.invoice-hourly-rate-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 260px;
    height: min(45vh, 320px);
    margin-bottom: 1rem;
}

.invoice-hourly-rate-chart-wrap canvas {
    display: block;
    max-height: 100%;
}

/* Zeiten: Arbeitsstunden-Verlauf nach Job (Chart-Modal) */

.times-hours-chart-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 12000;
    align-items: center;
    justify-content: center;
}

.times-hours-chart-overlay.is-open {
    display: flex;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.times-hours-chart-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: min(95vw, 75vw);
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
}

.times-hours-chart-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.times-hours-chart-hint {
    font-size: 0.85em;
    color: var(--color-text-soft, #666);
    margin: 0 0 0.75rem;
}

.times-hours-chart-empty {
    font-size: 0.9em;
    color: var(--color-text-soft, #888);
    margin: 1rem 0;
}

.times-hours-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 260px;
    height: min(80vh, 65vh);
    margin-bottom: 1rem;
}

.times-hours-chart-wrap canvas {
    display: block;
    max-height: 100%;
}

.times-hours-chart-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Zeiten: Personen-Anteil Pie-Chart (Modal) */

.times-person-pie-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 12000;
    align-items: center;
    justify-content: center;
}

.times-person-pie-overlay.is-open {
    display: flex;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.times-person-pie-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: min(95vw, 75vw);
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
}

.times-person-pie-wrap {
    position: relative;
    width: 100%;
    min-height: 280px;
    height: min(80vh, 65vh);
    margin-bottom: 1rem;
}

.times-person-pie-wrap canvas {
    display: block;
    max-height: 100%;
}

/* Rechnungen: Durchschnittslohn Multi-Linien-Chart (Modal) */

.invoice-avg-wage-chart-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 12000;
    align-items: center;
    justify-content: center;
}

.invoice-avg-wage-chart-overlay.is-open {
    display: flex;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.invoice-avg-wage-chart-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: min(95vw, 75vw);
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
}

.invoice-avg-wage-chart-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 0.75rem;
}

.invoice-avg-wage-chart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
}

.invoice-avg-wage-chart-toggle input[type="checkbox"] {
    margin: 0;
    accent-color: var(--color-primary);
}

.invoice-avg-wage-chart-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

.invoice-avg-wage-chart-toggle-label {
    color: var(--color-text-soft, #555);
    white-space: nowrap;
}

.invoice-avg-wage-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 260px;
    height: min(80vh, 65vh);
    margin-bottom: 1rem;
}

.invoice-avg-wage-chart-wrap canvas {
    display: block;
    max-height: 100%;
}

/* Rechnungen: Rechnungsbetrag Multi-Linien-Chart (Modal) */

.invoice-amount-chart-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 12000;
    align-items: center;
    justify-content: center;
}

.invoice-amount-chart-overlay.is-open {
    display: flex;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.invoice-amount-chart-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: min(95vw, 75vw);
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
}

.invoice-amount-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 260px;
    height: min(80vh, 65vh);
    margin-bottom: 1rem;
}

.invoice-amount-chart-wrap canvas {
    display: block;
    max-height: 100%;
}

/* Rechnungen: Ø-Lohn & Rechnungsbetrag pro Person Combo-Chart (Modal) */

.invoice-person-combo-chart-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 12000;
    align-items: center;
    justify-content: center;
}

.invoice-person-combo-chart-overlay.is-open {
    display: flex;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.invoice-person-combo-chart-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: min(95vw, 75vw);
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
}

.invoice-person-combo-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 260px;
    height: min(80vh, 65vh);
    margin-bottom: 1rem;
}

.invoice-person-combo-chart-wrap canvas {
    display: block;
    max-height: 100%;
}

/*
 * Anteil in kleiner oranger Schrift direkt hinter dem Wert (kein flex auf <td>,
 * sonst bricht das Tabellenraster und Zellen wirken wie mehrzeilig/dupliziert).
 */
.stats-table-num--with-share .stats-value-pct {
    display: inline;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
    margin-left: 0.35em;
    white-space: nowrap;
    vertical-align: baseline;
}

.stats-value-median {
    display: inline;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
    margin-left: 0.4em;
    white-space: nowrap;
    vertical-align: baseline;
}

.stats-table-person {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-table-total th,
.stats-table-total td {
    border-bottom: none;
    padding-top: var(--spacing-sm);
    font-weight: 700;
    border-top: 2px solid var(--color-border, #e0e0e0);
}

.stats-table-empty {
    color: var(--color-text-soft);
    font-style: italic;
    text-align: center;
}

/* --- Table Toolbar --- */
.table-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: var(--spacing-md);
}

.table-toolbar-left,
.table-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.table-toolbar-right {
    margin-left: auto;
}

.btn-abrechnung-xlsx,
.btn-pdf-export,
.btn-pdf-export-no-trip,
.btn-csv-excel-export,
.btn-times-to-invoices,
.btn-invoice-mail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-abrechnung-xlsx .material-icons,
.btn-pdf-export .material-icons,
.btn-pdf-export-no-trip .material-icons,
.btn-csv-excel-export .material-icons,
.btn-times-to-invoices .material-icons,
.btn-invoice-mail .material-icons {
    font-size: 18px;
}

.no-trip-icon {
    position: relative;
    display: inline-block;
}
.no-trip-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* Tab Zeiten: auf Desktop voller Label-Text, auf Mobile nur „Excel“ */
.btn-abrechnung-xlsx--times-tab .btn-abrechnung-xlsx__label-mobile {
    display: none;
}

/* Rechnungen: verstecktes File-Input neben „xlsx einlesen“ */
.invoice-xlsx-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Tabellen-Toolbar: Icon-only-Buttons (Refresh, Alle Filter löschen, Nur markiert, Neue Zeile), schwarz */
.btn-refresh-toolbar,
.btn-clear-all-filters-toolbar,
.btn-only-checked-toggle,
.btn-add-row-toolbar {
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.btn-refresh-toolbar .material-icons,
.btn-clear-all-filters-toolbar .material-icons,
.btn-only-checked-toggle .material-icons,
.btn-add-row-toolbar .material-icons {
    font-size: 20px;
    color: #000;
}

/* --- Zeiten: Pagination unter der Toolbar --- */
.table-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    min-height: 40px;
    height: auto;
    box-sizing: border-box;
    padding: 0 var(--spacing-md);
    margin-top: 2px;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
}

.table-pagination__info {
    font-size: var(--font-size-caption);
    color: var(--color-text-soft);
    min-width: 0;
}

.table-pagination__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.table-pagination__page {
    font-size: var(--font-size-caption);
    font-weight: 600;
    color: var(--color-text);
    padding: 0 6px;
    white-space: nowrap;
}

.table-pagination__btn-icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.table-pagination__btn-icon .material-icons {
    font-size: 22px;
    color: #000;
}

/* --- Table --- */
.table-wrapper {
    overflow: auto;
}

/*
 * Ein Scroll-Container für vertikal und horizontal — verschachteltes overflow-x:auto bricht
 * position:sticky auf thead th (Zwischen-Element wird fälschlich zum Scrollport).
 * Statistik/Toolbar liegen außerhalb und scrollen nicht mit.
 */
.table-wrapper.table-scroll-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding-bottom: var(--spacing-xl);
    -webkit-overflow-scrolling: touch;
}

/*
 * Zeiten- und Rechnungstabellen: bei wenigen Zeilen bleibt der Scrollport sonst sehr niedrig
 * (z. B. ~100px), dann schneiden overflow:auto und Sticky-Header die Filter-/Dropdown-Listen ab.
 */
.table-wrapper.table-scroll-wrap.table-scroll-wrap--entries,
.table-wrapper.table-scroll-wrap.table-scroll-wrap--invoice,
.table-wrapper.table-scroll-wrap.table-scroll-wrap--job-order {
    min-height: clamp(240px, 42vh, 520px);
}

/*
 * Tab Aufträge: kein Pagination-Block unter der Tabelle — zusätzlicher Raum am Ende.
 * Mobile: Safe Area; Desktop: extra Platz (u. a. horizontaler Scrollbalken über dem Inhalt).
 */
.table-wrapper.table-scroll-wrap.table-scroll-wrap--job-order {
    padding-bottom: calc(
        var(--spacing-2xl) + var(--spacing-xl) + env(safe-area-inset-bottom, 0px)
    );
}

@media (min-width: 769px) {
    .table-wrapper.table-scroll-wrap.table-scroll-wrap--job-order {
        padding-bottom: calc(5rem + var(--spacing-xl));
        scrollbar-gutter: stable;
    }
}

/*
 * Echter Block unter der Tabelle — erhöht die Scrollhöhe zuverlässig (Padding allein
 * reicht in manchen Layouts mit breiter Tabelle / Scrollbars nicht).
 */
.job-order-table-scroll-tail {
    width: 100%;
    flex-shrink: 0;
    height: 1.5rem;
    min-height: 1.5rem;
    pointer-events: none;
}

@media (min-width: 769px) {
    .job-order-table-scroll-tail {
        height: 5rem;
        min-height: 5rem;
    }
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.25;
    background: #fff;
}

.data-table th,
.data-table td {
    padding: 5px 10px;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #ededed;
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-primary);
    color: #000;
    font-size: var(--font-size-label);
    font-weight: 700;
    /* Gitterlinien im orangen Header ausblenden */
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

/*
 * Aktiver Filter: roter Rand per inset box-shadow (kein zusätzlicher Border → Headerzeilen springen nicht).
 * Kombination mit Sort-Strichen: mehrere inset-Schatten in einer Deklaration.
 */
.data-table-filter-row th.th--filtered {
    box-shadow:
        inset 2px 0 0 0 var(--color-danger),
        inset -2px 0 0 0 var(--color-danger),
        inset 0 2px 0 0 var(--color-danger);
}

.data-table thead tr:not(.data-table-filter-row) th.th--filtered:not(.th--asc):not(.th--desc) {
    box-shadow:
        inset 2px 0 0 0 var(--color-danger),
        inset -2px 0 0 0 var(--color-danger),
        inset 0 -2px 0 0 var(--color-danger);
}

.data-table thead tr:not(.data-table-filter-row) th.th--filtered.th--asc {
    box-shadow:
        inset 2px 0 0 0 var(--color-danger),
        inset -2px 0 0 0 var(--color-danger),
        inset 0 -2px 0 0 var(--color-danger),
        inset 0 3px 0 0 #b36a00,
        inset 0 5px 0 0 var(--color-primary);
}

.data-table thead tr:not(.data-table-filter-row) th.th--filtered.th--desc {
    box-shadow:
        inset 2px 0 0 0 var(--color-danger),
        inset -2px 0 0 0 var(--color-danger),
        inset 0 -2px 0 0 var(--color-danger),
        inset 0 -3px 0 0 #b36a00,
        inset 0 -5px 0 0 var(--color-primary);
}

/* Zweite Kopfzeile (Titel/Sort) unter der Filterzeile – sonst überdecken sie die Dropdowns */
.data-table thead tr:not(.data-table-filter-row) th {
    z-index: 4;
    top: var(--data-table-filter-row-sticky-offset);
}

.data-table thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-medium);
}

.data-table thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-medium);
}

.data-table tbody td:not(:last-child) {
    border-right: 1px solid #f3f3f3;
}

.data-table thead tr:first-child th {
    cursor: default;
    user-select: none;
}

/*
 * Spezifität > .data-table thead th, sonst greift dort z-index: 5 und die Filterzeile
 * stapelt nicht über der Sortzeile / Nachbar-Spalten.
 */
.data-table thead tr.data-table-filter-row th {
    padding-top: 2px;
    padding-bottom: 2px;
    min-height: 28px;
    height: auto;
    vertical-align: middle;
    z-index: 25;
    overflow: visible;
}

/*
 * Geöffnetes Filter-Dropdown über Nachbar-Headerzellen; bleibt per thFilterElevatedKeys
 * auch während der Alpine-Close-Transition erhöht (verhindert Z-Index-Flackern).
 */
.data-table thead tr.data-table-filter-row th.th--filter-open {
    z-index: 100;
}

.data-table thead tr.data-table-filter-row th.th-filterable-header {
    cursor: pointer;
}

.data-table-th-heading.th-heading--icons {
    text-align: center;
}

.th-icon-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex-wrap: nowrap;
    vertical-align: middle;
}

.th-header-icon {
    font-size: 15px !important;
    line-height: 1;
    opacity: 0.92;
}

.th-sortable .th-sort-hit {
    cursor: pointer;
}

.th-sort-hit {
    display: inline-block;
}

.data-table th.th--asc {
    box-shadow: inset 0 3px 0 0 #b36a00, inset 0 5px 0 0 var(--color-primary);
}

.data-table th.th--desc {
    box-shadow: inset 0 -3px 0 0 #b36a00, inset 0 -5px 0 0 var(--color-primary);
}

.th-filter-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Datum, Job, Team, Fahrer: Filter-Icons links (Status bleibt zentriert in der schmalen Spalte) */
.data-table thead tr.data-table-filter-row th.th-filter-icons--start .th-filter-wrap {
    justify-content: flex-start;
}

.th-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.th-filter-btn {
    border: 0;
    background: transparent;
    padding: 0;
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    opacity: 0.6;
    flex-shrink: 0;
}

.th-filter-btn:hover {
    opacity: 1;
}

.th-filter-btn .material-icons {
    font-size: 1rem;
    line-height: 1;
}

/* Wie Seisa Gear: feste Fläche für Clear-Icon, sichtbar nur bei aktivem Filter (kein Layout-Sprung) */
.th-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: #000;
    vertical-align: middle;
    visibility: hidden;
    pointer-events: none;
}

.th-filter-clear .material-icons {
    font-size: 1rem;
    line-height: 1;
}

.th-filter-clear--active {
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.6;
}

.th-filter-clear--active:hover {
    opacity: 1;
}

.th-filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    max-width: 320px;
    max-height: 280px;
    overflow: auto;
    padding: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-card);
    /* Über Nachbar-Zellen der gleichen Zeile */
    z-index: 1;
}

[x-cloak] {
    display: none !important;
}

.th-date-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

.th-date-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.th-date-filter-row label {
    width: 28px;
    font-size: 0.75rem;
    font-weight: 600;
}

.th-date-filter-row input {
    min-width: 0;
    flex: 1;
    height: 30px;
}

.th-date-filter-apply {
    width: 100%;
}

.th-multi-filter,
.th-single-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

.th-filter-search {
    width: 100%;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    font-size: 0.8rem;
}

.th-filter-select-all {
    border-bottom: 1px solid var(--color-border-soft);
    padding-bottom: 4px;
    margin-bottom: 2px;
    font-weight: 600;
}

.th-filter-options {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.th-filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.th-filter-option.th-filter-option--nav {
    background: #fff7e8;
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-small);
}

.th-filter-option-btn.th-filter-option--nav {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.th-filter-option-btn {
    border: 1px solid var(--color-border-soft);
    background: var(--color-surface);
    border-radius: var(--radius-small);
    text-align: left;
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.th-filter-option-btn.is-active {
    border-color: var(--color-primary);
    background: #fff7e8;
}

.th-filter-option-btn.th-filter-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.th-filter-status-btn .material-icons {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.th-filter-status-icon--alle {
    color: #000;
}

/* Drive (Trip 1) und Work: Start-/Ende-Zeiten zentriert */
.data-table th.th-col-time-center,
.data-table td.td-col-time-center {
    text-align: center;
}

/* Uhrzeit-Picker/Dropdown darf nicht abgeschnitten werden */
.data-table td.td-col-time-center {
    overflow: visible;
}

.data-table td .table-time-cell.time-input-wrap {
    margin-left: auto;
    margin-right: auto;
}

.data-table td .table-time-input {
    font: inherit;
    font-size: inherit;
    padding: 1px 30px 1px 4px;
    min-height: 22px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    text-align: center;
    color: inherit;
}

.data-table td .table-time-input:focus {
    outline: none;
    border-color: var(--color-border);
    background: #fff;
}

.data-table tbody tr:hover td {
    background: #fffaf0;
}

.data-table tbody tr.tr-is-correction td {
    color: #b71c1c;
}

.data-table td {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
}

/* Kompaktere Höhe als Standard-Formularfelder (36px) */
.data-table .status-select {
    min-height: 26px;
    padding: 2px 22px 2px 6px;
    line-height: 1.2;
}

.data-table td span[contenteditable="true"] {
    display: inline-block;
    min-width: 100%;
    padding: 1px 3px;
    border-radius: 3px;
    line-height: 1.25;
}

.data-table td span[contenteditable="true"]:focus {
    outline: none;
    background: #fff7e8;
    box-shadow: inset 0 0 0 1px #ffc76a;
}

/* Tabellen-Spalte Team: gleiche Min-/Max-Breite wie übrige Textzellen (220px), zwei Zeilen bei Overflow */
.data-table th.th-col-team,
.data-table td.td-col-team {
    min-width: 220px;
    max-width: 220px;
    width: 220px;
    box-sizing: border-box;
    white-space: normal;
    vertical-align: top;
}

/* Fahrer: Einzelauswahl, etwas schmaler als Team */
.data-table th.th-col-driver,
.data-table td.td-col-driver {
    min-width: 180px;
    max-width: 200px;
    width: 200px;
    box-sizing: border-box;
    white-space: normal;
    vertical-align: top;
}

.data-table td.td-col-driver {
    overflow: visible;
    text-overflow: clip;
    position: relative;
}

/* Rechnungen Spalte „Name“: Einzelauswahl — Dropdown darf Zelle nicht verlassen (overflow) */
.data-table th.th-col-invoice-worker,
.data-table td.td-col-invoice-worker {
    min-width: 180px;
    max-width: 200px;
    width: 200px;
    box-sizing: border-box;
    white-space: normal;
    vertical-align: top;
}

.data-table td.td-col-invoice-worker {
    overflow: visible;
    text-overflow: clip;
    position: relative;
}

/* Rechnungen: Spalte „Betrag“ hervorheben (nur tbody — sticky thead bleibt var(--color-primary)) */
.data-table td.td-col-invoice-amount {
    background-color: #fff3e0;
}

.data-table tbody tr:hover td.td-col-invoice-amount {
    background-color: #ffe8cc;
}

/* Rechnungen: Währungsspalten (Betrag, Lohn, Fahrtlohn, Tagessatz) */
.data-table th.th-col-invoice-currency,
.data-table td.td-col-invoice-currency {
    text-align: right;
}

/* Rechnungen: Arbeitszeit, Fahrtzeit */
.data-table th.th-col-invoice-hours,
.data-table td.td-col-invoice-hours {
    text-align: right;
}

.data-table td.td-col-invoice-hours .data-table-invoice-hours-cell {
    display: block;
    width: 100%;
    text-align: right;
}

.data-table td.td-col-invoice-currency .data-table-amount-cell {
    display: block;
    width: 100%;
    text-align: right;
}

/* Rechnungen Tagessatz: mindestens ein Kalendertag unter 6 h Netto auf diesem Job (Zeiten) */
.data-table td.td-col-invoice-currency .data-table-amount-cell--day-rate-short {
    color: #c62828;
}

.data-table td.td-col-team {
    overflow: visible;
    text-overflow: clip;
    position: relative;
}

.tab-panel--user-table .data-table td.td-col-team {
    vertical-align: middle;
}

/* Ganze Zeile anheben, wenn Team/Fahrer-Dropdown offen (Klicks treffen nicht die nächste Zeile) */
.data-table tbody tr:has(.multi-select.open) {
    position: relative;
    z-index: 70;
}

/* Team / Fahrer / Rechnungen Name: breite Liste wie Job-Vorschläge */
.team-autocomplete-table .multi-select-dropdown,
.driver-autocomplete-table .multi-select-dropdown,
.invoice-worker-autocomplete-table .multi-select-dropdown {
    left: 0;
    right: auto;
    min-width: max(100%, min(95vw, 21rem));
    width: max-content;
    max-width: min(95vw, 480px);
}

/*
 * Offenes Dropdown über folgende Tabellenzeilen legen — sonst landen Klicks auf der
 * nächsten Zeile, Alpine @click.outside schließt und „Freier Eintrag“ ist nicht bedienbar.
 */
.team-autocomplete-table .multi-select.open,
.driver-autocomplete-table .multi-select.open,
.invoice-worker-autocomplete-table .multi-select.open {
    z-index: 80;
}

.team-autocomplete-table .multi-select.open .multi-select-dropdown,
.driver-autocomplete-table .multi-select.open .multi-select-dropdown,
.invoice-worker-autocomplete-table .multi-select.open .multi-select-dropdown {
    z-index: 1051;
}

/*
 * Tabellen Team/Fahrer/Rechnungen Name: kein globales min-width:120px — Suchfeld darf schmal werden,
 * damit Icon + Input in einer Zeile mit den Namen bleiben (siehe .multi-select-tags-bunch).
 */
.team-autocomplete-table .multi-select-input,
.driver-autocomplete-table .multi-select-input,
.invoice-worker-autocomplete-table .multi-select-input {
    min-width: 0;
}

/* Team / Fahrer / Rechnungen Name: kompaktes Suchfeld (Icon rechts) — etwas breiterer Klickbereich */
.team-autocomplete-table .multi-select-input-with-icon,
.driver-autocomplete-table .multi-select-input-with-icon,
.invoice-worker-autocomplete-table .multi-select-input-with-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: auto;
    min-width: 28px;
    max-width: 50px;
}

/*
 * Kein Aufweiten bei Fokus — sonst springt die Tabellenzeile / Nachbarzellen.
 * Eingabe bleibt schmal; längerer Suchtext läuft im Feld mit overflow.
 */
.team-autocomplete-table .multi-select-input-with-icon .multi-select-input:focus,
.driver-autocomplete-table .multi-select-input-with-icon .multi-select-input:focus,
.invoice-worker-autocomplete-table .multi-select-input-with-icon .multi-select-input:focus {
    min-width: 0;
}

.team-autocomplete-table .multi-select-input-with-icon .multi-select-input,
.driver-autocomplete-table .multi-select-input-with-icon .multi-select-input,
.invoice-worker-autocomplete-table .multi-select-input-with-icon .multi-select-input {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

/* Icon rechts (add_circle_outline), volle Icon-Größe; schmaler Wrapper (30px) nahe an den Namen */
.team-autocomplete-table .multi-select-input-lead-icon,
.driver-autocomplete-table .multi-select-input-lead-icon,
.invoice-worker-autocomplete-table .multi-select-input-lead-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #b5b5b5;
    pointer-events: none;
    line-height: 1;
}

.team-autocomplete-table .multi-select-input.multi-select-input--lead-icon,
.driver-autocomplete-table .multi-select-input.multi-select-input--lead-icon,
.invoice-worker-autocomplete-table .multi-select-input.multi-select-input--lead-icon {
    padding-right: 26px;
    padding-left: 0;
}

/* Tabellen-Team / -Fahrer / Rechnungen Name: keine Formular-Rahmen ( .multi-select-display teilt Regeln mit form-group input ) */
.team-autocomplete-table .multi-select-display,
.team-autocomplete-table .multi-select.open .multi-select-display,
.team-autocomplete-table .multi-select-display:focus-within,
.driver-autocomplete-table .multi-select-display,
.driver-autocomplete-table .multi-select.open .multi-select-display,
.driver-autocomplete-table .multi-select-display:focus-within,
.invoice-worker-autocomplete-table .multi-select-display,
.invoice-worker-autocomplete-table .multi-select.open .multi-select-display,
.invoice-worker-autocomplete-table .multi-select-display:focus-within {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    min-height: 0;
    width: auto;
    transition: none;
    /* Zwei Blöcke nebeneinander: Namen (umbrechend) + Suchfeld mit Icon — nicht untereinander umbrechen */
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px 6px;
    line-height: 1.2;
}

/* Namen nur innerhalb dieses Bereichs umbrechen; Suchfeld bleibt rechts daneben */
.team-autocomplete-table .multi-select-tags-bunch,
.driver-autocomplete-table .multi-select-tags-bunch {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 140px;
    box-sizing: border-box;
    align-items: center;
    gap: 2px 6px;
}

.invoice-worker-autocomplete-table .multi-select-tags-bunch {
    display: flex;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
    box-sizing: border-box;
    align-items: center;
    gap: 2px 4px;
}

/* Team- / Fahrer- / Rechnungen-Name-Zelle: Namen als schlichte Links, kein Tag-Pill-Rahmen; × entfernt */
.team-autocomplete-table .team-table-tag,
.driver-autocomplete-table .team-table-tag,
.invoice-worker-autocomplete-table .team-table-tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
    margin: 0 0.5rem 0 0;
    padding: 0;
    background: none;
    border: none;
    min-height: 0;
    font-size: inherit;
    font-weight: 400;
}

/* Wie frühere .multi-select-tag: warmes Braun, ohne Unterstreichung */
.team-autocomplete-table .team-table-tag-link,
.driver-autocomplete-table .team-table-tag-link,
.invoice-worker-autocomplete-table .team-table-tag-link {
    color: #9a5a00;
    text-decoration: none;
    cursor: default;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
}

.team-autocomplete-table .team-table-tag-link:hover,
.team-autocomplete-table .team-table-tag-link:focus-visible,
.driver-autocomplete-table .team-table-tag-link:hover,
.driver-autocomplete-table .team-table-tag-link:focus-visible,
.invoice-worker-autocomplete-table .team-table-tag-link:hover,
.invoice-worker-autocomplete-table .team-table-tag-link:focus-visible {
    color: #7a4800;
    outline: none;
}

.team-autocomplete-table .team-table-tag-remove,
.driver-autocomplete-table .team-table-tag-remove,
.invoice-worker-autocomplete-table .team-table-tag-remove {
    flex-shrink: 0;
    margin: 0;
    padding: 0 0 0 1px;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.95em;
    line-height: 1;
    cursor: pointer;
}

.team-autocomplete-table .team-table-tag-remove:hover,
.team-autocomplete-table .team-table-tag-remove:focus-visible,
.driver-autocomplete-table .team-table-tag-remove:hover,
.driver-autocomplete-table .team-table-tag-remove:focus-visible,
.invoice-worker-autocomplete-table .team-table-tag-remove:hover,
.invoice-worker-autocomplete-table .team-table-tag-remove:focus-visible {
    color: var(--color-danger);
    outline: none;
}

.data-table td.td-col-team span.data-table-team-cell {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.35;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.data-table td.td-col-team span.data-table-team-cell:focus {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.status-select {
    min-width: 110px;
    padding-right: 28px;
    background-color: #fff;
}

/* Tabellen-Spalte Status: schmal, nur Icon-Steuerung */
.data-table th.th-col-status,
.data-table td.td-col-status {
    width: 1%;
    max-width: 3.25rem;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    vertical-align: middle;
}

.data-table td.td-col-status {
    overflow: visible;
    position: relative;
}

.status-icon-trigger.status-icon-correction {
    color: #c62828;
}

.status-icon-trigger.status-icon-correction:hover,
.status-icon-trigger.status-icon-correction:focus-visible {
    color: #b71c1c;
}

.data-table th.th-col-status {
    white-space: nowrap;
}

/* Checkbox-Spalte (Zeilenauswahl) */
.data-table th.th-col-select,
.data-table td.td-col-select {
    width: 2.25rem;
    max-width: 2.75rem;
    padding: 4px 3px;
    text-align: center;
    vertical-align: middle;
}

.data-table td.td-col-select {
    overflow: visible;
}

.table-select-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
    vertical-align: middle;
}

/* Rechnungen: Mail nur so breit wie Überschrift „Mail“ bzw. Icon-Button */
.data-table th.th-col-mail,
.data-table td.td-col-mail {
    text-align: center;
    vertical-align: middle;
    width: 0.01%;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
    white-space: nowrap;
}

@supports (width: max-content) {
    .data-table th.th-col-mail,
    .data-table td.td-col-mail {
        width: max-content;
        max-width: min(4.5rem, 100%);
    }
}

.invoice-mail-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-small);
    background: #fff;
    cursor: pointer;
    line-height: 0;
}

.invoice-mail-icon-btn .material-icons {
    font-size: 20px;
}

.invoice-mail-icon-btn:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.25);
}

.invoice-mail-icon-btn--pending .material-icons {
    color: #c62828;
}

.invoice-mail-icon-btn--sent .material-icons {
    color: #2e7d32;
}

/* Rechnungen: Mail-Filter-Dropdown (Header) */
.invoice-mail-filter-icon--pending {
    color: #c62828;
}

.invoice-mail-filter-icon--sent {
    color: #2e7d32;
}

/*
 * Teilmenge markiert: heller Kasten, nur der Strich schwarz
 * (accent-color würde den gesamten Button einfärben).
 */
.table-select-checkbox:indeterminate {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 2px;
    background-image: linear-gradient(#000, #000);
    background-size: 9px 2px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Offenes Status-Menü über Nachbarzellen und Folgezeilen legen */
.data-table tbody tr:has(.status-icon-picker.is-open) {
    position: relative;
    z-index: 40;
}

.data-table td.td-col-status:has(.status-icon-picker.is-open) {
    z-index: 41;
}

.status-icon-picker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

.status-icon-picker.is-open {
    z-index: 50;
}

.status-icon-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: var(--radius-small);
    background: #fff;
    cursor: pointer;
    line-height: 0;
}

.status-icon-trigger .material-icons {
    font-size: 18px;
}

.status-icon-trigger:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.25);
}

.status-icon-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-card);
    z-index: 60;
}

.status-icon-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    line-height: 0;
}

.status-icon-option .material-icons {
    font-size: 18px;
}

.status-icon-option:hover {
    background: #f5f5f5;
}

.status-tone-neu {
    color: #2e7d32;
}

.status-tone-abwarten {
    color: #ef6c00;
}

.status-tone-closed {
    color: #c62828;
}

.status-tone-keine-info {
    color: #1565c0;
}

/* Aufträge: Bewertungs-Status (Sentiment-Icons) */
.status-tone-job-sehr-gut {
    color: #2e7d32;
}

.status-tone-job-gut {
    color: #f9a825;
}

.status-tone-job-machbar {
    color: #ef6c00;
}

.status-tone-job-geht-nicht {
    color: #c62828;
}

.th-filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin: 8px 0 4px;
    color: var(--color-text-soft, #666);
}

.th-filter-label:first-child {
    margin-top: 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.status-badge.neu {
    background: #e3f2fd;
    color: #1565c0;
}

.status-badge.abwarten {
    background: #fff3e0;
    color: #a85c00;
}

.status-badge.closed {
    background: #eeeeee;
    color: #555;
}

/* --- Placeholder --- */
.placeholder-panel {
    padding: 56px 24px;
    text-align: center;
    color: var(--color-text-soft);
}

.placeholder-panel h2 {
    margin: 8px 0 6px;
    font-size: 1.35rem;
    color: var(--color-text);
}

.placeholder-panel p {
    margin: 0;
}

/** Admin-Tab: Eyebrow und Aktionen; Buttons einheitlich so breit wie die breiteste Zeile */
.placeholder-panel--admin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.admin-tab-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: 100%;
    gap: 1rem;
}

.admin-tab-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.admin-tab-actions .btn .material-icons {
    font-size: 20px;
    flex-shrink: 0;
}

/* --- Bulk-Bearbeitung: Bestätigungsdialog --- */
.bulk-edit-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
    /* Mobile: Touch nicht an darunterliegende UI durchreichen (Tap-Through nach Schließen) */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.bulk-edit-modal {
    width: 100%;
    max-width: 400px;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card-hover);
    border: 1px solid var(--color-border-soft);
}

.bulk-edit-modal-text {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-text);
}

.bulk-edit-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Modal-Dialoge: vertikal scrollen trotz touch-action:none auf Vollbild-Overlay */
.invoice-mail-overlay .invoice-mail-dialog,
.invoice-stats-avg-day-rate-overlay .invoice-stats-avg-day-rate-dialog,
.invoice-hourly-rate-overlay .invoice-hourly-rate-dialog,
.times-hours-chart-overlay .times-hours-chart-dialog,
.times-person-pie-overlay .times-person-pie-dialog,
.invoice-avg-wage-chart-overlay .invoice-avg-wage-chart-dialog,
.invoice-amount-chart-overlay .invoice-amount-chart-dialog,
.invoice-person-combo-chart-overlay .invoice-person-combo-chart-dialog,
.modal.admin-modal .admin-modal-content,
.bulk-edit-modal-backdrop .bulk-edit-modal {
    touch-action: pan-y pinch-zoom;
}

/* --- Toast --- */
.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 220px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: var(--radius-medium);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-card-hover);
    transform: translateY(16px);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.toast__text {
    flex: 1;
    min-width: 0;
}

.toast--persistent {
    pointer-events: auto;
    padding-right: 10px;
}

.toast__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: -4px -6px -4px 0;
    border: none;
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 0;
}

.toast__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.toast__close .material-icons {
    font-size: 20px;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.success {
    background: var(--color-success);
}

.toast.error {
    background: var(--color-danger);
}

.toast.warning {
    background: var(--color-warning);
}

/* --- Helpers --- */
input::placeholder,
textarea::placeholder {
    color: #9a9a9a;
}

/* --- Responsive --- */
@media (max-width: 960px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .table-toolbar-right {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .toolbar-shell,
    .tab-content {
        width: min(100% - 20px, 100%);
    }

    .toolbar-main {
        flex-direction: column;
    }

    .toolbar-group-brand,
    .toolbar-group-tabs {
        min-width: 0;
    }

    .toolbar-actions,
    .btn-group {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-btn,
    .btn {
        width: 100%;
    }

    .form-card,
    .stats-bar,
    .placeholder-panel {
        padding: var(--spacing-lg);
    }

    .stats-panel {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 5px;
    }

    /* Weniger Abstand zwischen Toolbar-Block und Tabellen-Scrollbereich (nur schmale Viewports). */
    .panel-card-table {
        gap: 5px;
    }

    /*
     * Tabellen-Toolbar: Zeile 1 = Nur markiert / Zeile / Löschen,
     * Zeile 2 = Neu laden / Filter löschen / Closed (o. Abgerechnet);
     * Export-/Mail-Zeile darunter (3 Spalten).
     */
    .table-toolbar {
        padding: 5px;
    }

    .table-toolbar.toolbar-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-sm);
        align-items: stretch;
    }

    .table-toolbar-left {
        display: contents;
    }

    .table-toolbar .toolbar-actions {
        display: contents;
    }

    .table-toolbar-right {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-sm);
        margin-left: 0;
        grid-column: 1 / -1;
    }

    .table-toolbar .toolbar-actions .btn-only-checked-toggle {
        order: 1;
    }

    .table-toolbar .toolbar-actions .btn-add-row-toolbar {
        order: 2;
    }

    .table-toolbar .toolbar-actions .btn-delete-selected {
        order: 3;
    }

    .table-toolbar .toolbar-actions .btn-refresh-toolbar {
        order: 4;
    }

    .table-toolbar .toolbar-actions .btn-clear-all-filters-toolbar {
        order: 5;
    }

    .table-toolbar .toolbar-actions .btn-closed-toggle {
        order: 6;
    }

    .table-toolbar-right .invoice-xlsx-file-input {
        display: none;
    }

    .btn-abrechnung-xlsx--times-tab .btn-abrechnung-xlsx__label-desktop {
        display: none;
    }

    .btn-abrechnung-xlsx--times-tab .btn-abrechnung-xlsx__label-mobile {
        display: inline;
    }

    .table-pagination {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 4px 6px;
        min-height: 0;
    }

    .table-pagination__range {
        display: none !important;
    }

    /*
     * Wrapper verschwindet im Flex — keine Leerzeile, wenn nur der Bereichstext (range) fehlt.
     * „Keine Einträge“ bleibt als eigenes flex-item (volle Zeile).
     */
    .table-pagination__info {
        display: contents;
    }

    .table-pagination__info > span:not(.table-pagination__range) {
        flex: 1 1 100%;
        text-align: center;
    }

    .table-pagination__controls {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
        max-width: 100%;
    }

    /* Sonst greift das globale .btn { width:100% } — nur ein Pagination-Button sichtbar. */
    .table-pagination .btn {
        width: auto;
        min-width: 0;
    }

    .table-pagination .table-pagination__btn-icon {
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        height: 28px;
        flex-shrink: 0;
    }

    .table-pagination .table-pagination__btn-icon .material-icons {
        font-size: 18px;
    }

    .table-pagination__page {
        padding: 0 4px;
        font-size: 11px;
    }

    .data-table {
        font-size: 11px;
    }

    .data-table th,
    .data-table td {
        padding: 4px 8px;
    }

    .toast {
        right: 10px;
        bottom: 10px;
    }

    /*
     * Statistik: Mobile-Akkordeon (Zeiten, Rechnungen, Aufträge).
     */
    .stats-panel:not(.stats-panel--job-orders) {
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }

    .stats-panel.stats-panel--job-orders {
        min-height: 0;
        max-height: none;
        overflow: visible;
        height: auto;
    }

    /*
     * Aufträge KPI (Mobile): 3 Spalten, Überschrift / Wert untereinander, links; wenig Abstand.
     */
    .stats-panel.stats-panel--job-orders .job-order-stats-kpi-block .stats-count-line {
        margin: 0 0 3px;
    }

    .job-order-stats-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(3, auto);
        row-gap: 3px;
        column-gap: 4px;
        margin-bottom: 4px;
    }

    .job-order-stats-kpi-grid .job-order-kpi-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
    }

    /* Sechs Rasterfelder: drei oben, Min. | Max. | Ø Stunden unten */
    .job-order-stats-kpi-grid .job-order-kpi-column--hours-split {
        display: contents;
    }

    .job-order-stats-kpi-grid .job-order-kpi-pair {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 0;
    }

    .job-order-stats-kpi-grid .stat-label {
        text-align: left;
        margin-top: 0.2rem;
        margin-bottom: 0;
        line-height: 1.2;
    }

    .job-order-stats-kpi-grid .job-order-kpi-column .stat-label:first-child {
        margin-top: 0;
    }

    .job-order-stats-kpi-grid .stat-value {
        text-align: left;
        justify-self: start;
        margin-bottom: 0.2rem;
        line-height: 1.2;
    }

    .job-order-stats-kpi-grid .job-order-kpi-column .stat-value:last-child {
        margin-bottom: 0;
    }

    .stats-panel-accordion-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 0 4px;
        padding: 8px 10px;
        box-sizing: border-box;
        font: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: left;
        color: var(--color-text);
        background: var(--color-surface-muted);
        border: 1px solid var(--color-border-soft);
        border-radius: var(--radius-small);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .stats-panel-accordion-toggle__icon {
        font-size: 22px !important;
        color: var(--color-text-soft);
        flex-shrink: 0;
    }

    .stats-panel:not(.stats-panel--accordion-open) .stats-panel-accordion-body {
        display: none !important;
    }

    .stats-panel--accordion-open:not(.stats-panel--job-orders)
        .stats-panel-accordion-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: min(52vh, 360px);
        overflow: hidden;
    }

    .stats-panel--accordion-open.stats-panel--job-orders .stats-panel-accordion-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        max-height: min(72vh, 560px);
        overflow-x: hidden;
        overflow-y: auto;
        gap: var(--spacing-sm);
        -webkit-overflow-scrolling: touch;
    }

    .stats-panel--accordion-open .stats-panel-accordion-toggle {
        margin-bottom: 6px;
    }
}

/*
 * Desktop: Statistik-Layout wie zuvor — Toggle unsichtbar, Inhalt immer sichtbar.
 */
@media (min-width: 769px) {
    .stats-panel .stats-panel-accordion-toggle {
        display: none !important;
    }

    .stats-panel:not(.stats-panel--job-orders) .stats-panel-accordion-body {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        max-height: none;
    }

    .stats-panel.stats-panel--job-orders .stats-panel-accordion-body {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
        max-height: none;
        gap: var(--spacing-sm);
    }
}

/* ===== Login & Admin-Modal (Auth) ===== */
[x-cloak] {
    display: none !important;
}

.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-page);
    padding: var(--spacing-lg);
}

.login-box {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: var(--spacing-2xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.login-title {
    font-size: 1.25rem;
    margin: 0 0 var(--spacing-xl);
    text-align: center;
}

.login-error {
    color: var(--color-danger);
    font-size: var(--font-size-caption);
    margin-bottom: var(--spacing-md);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.login-form label {
    font-size: var(--font-size-label);
    color: var(--color-text-soft);
}

.login-form input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font-family: inherit;
}

.login-submit {
    margin-top: var(--spacing-md);
}

/**
 * Flex-Spalte unter body: `main.tab-content` braucht einen begrenzten Bereich, damit
 * `.table-scroll-wrap` (Zeiten/Rechnungen) vertikal scrollen kann — sonst wächst die Seite
 * ohne Scrollport und body (overflow:hidden) schneidet ab.
 */
.app-root {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.modal.admin-modal {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    padding: var(--spacing-md);
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.admin-modal-content {
    width: 100%;
    max-width: min(1200px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--color-surface);
    border-radius: var(--radius-medium);
    border: 1px solid var(--color-border);
}

.admin-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.admin-modal .modal-header h3 {
    margin: 0;
    font-size: var(--font-size-title);
}

.admin-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    color: var(--color-text-soft);
}

.admin-modal .modal-body {
    padding: var(--spacing-lg);
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-caption);
}

.admin-users-table th,
.admin-users-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: middle;
}

.admin-users-table .admin-input-name,
.admin-users-table .admin-input-email,
.admin-users-table .admin-input-password,
.admin-users-table .admin-input-rate,
.admin-users-table .admin-select-role {
    width: 100%;
    min-width: 0;
    padding: 4px 6px;
    font-size: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    box-sizing: border-box;
}

.admin-col-order {
    white-space: nowrap;
    width: 72px;
}

.admin-row-up,
.admin-row-down,
.admin-row-remove {
    padding: 2px 6px;
    margin-right: 2px;
    cursor: pointer;
}

.admin-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    align-items: center;
}

/* --- Rechnungen: E-Mail-Modal (an Seisa Planner grid-email angelehnt) --- */
.invoice-mail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 12000;
    align-items: center;
    justify-content: center;
}

.invoice-mail-overlay.is-open {
    display: flex;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.invoice-mail-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* vorher min 360px → ca. +50 % nutzbare Breite */
    width: min(95vw, 540px);
    max-width: 95vw;
    max-height: 90vh;
    overflow: auto;
    box-sizing: border-box;
}

.invoice-mail-dialog.invoice-mail-dialog--drop-target {
    outline: 2px dashed #2563eb;
    outline-offset: 2px;
}

.btn-invoice-xlsx-import--drop {
    outline: 2px dashed #2563eb;
    outline-offset: 2px;
}

.invoice-mail-title {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}

.invoice-mail-dialog label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
}

.invoice-mail-recipients-wrap {
    margin-bottom: 1rem;
}

.invoice-mail-recipients-head {
    margin-bottom: 6px;
}

.invoice-mail-recipients-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: var(--radius-small);
    padding: 6px;
    background: #fafafa;
}

.invoice-mail-recipient-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    font-size: 0.875rem;
}

.invoice-mail-bcc-row {
    margin-bottom: 8px;
    padding: 6px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: var(--radius-small);
}

.invoice-mail-recipient-label {
    flex: 0 0 120px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-mail-recipient-email {
    flex: 1;
    padding: 4px 8px;
    font-size: 0.875rem;
    border: 1px solid #ccc;
    border-radius: var(--radius-small);
    box-sizing: border-box;
}

.invoice-mail-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.9375rem;
    border: 1px solid #ccc;
    border-radius: var(--radius-small);
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.invoice-mail-body {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.9375rem;
    border: 1px solid #ccc;
    border-radius: var(--radius-small);
    margin-bottom: 0.5rem;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    min-height: 140px;
}

.invoice-mail-variables {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    color: var(--color-text-soft, #666);
    line-height: 1.45;
    word-break: break-word;
}

.invoice-mail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 1.25rem;
}

.invoice-mail-btn-send {
    background: #ffa500;
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-small);
    font-family: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

.invoice-mail-btn-send:hover:not(:disabled) {
    background: #e69500;
}

.invoice-mail-btn-send:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.invoice-mail-btn-cancel {
    background: #f0f0f0;
    color: #333;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-small);
    font-family: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

/* Rechnungen: Modal XLSX-Import (Duplikate Job+Name) */
.abrechnung-import-job-line {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
}

.abrechnung-import-dup-list {
    margin: 0.35rem 0 1rem 1.25rem;
    padding: 0;
}

.abrechnung-import-fieldset {
    border: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.abrechnung-import-fieldset legend {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
    padding: 0;
}

.abrechnung-import-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0.35rem 0;
    font-size: 0.875rem;
    line-height: 1.35;
    cursor: pointer;
}

.abrechnung-import-label input {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Admin: Auftrags-Status Grenzwerte */
.jo-thresholds-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
    margin: 0.75rem 0 1rem;
    max-width: 22rem;
}

.jo-thresholds-grid label {
    font-size: 0.875rem;
}

/* --- Mobil-Einstieg (m/index.html): Tab-Navigation volle Viewport-Breite --- */
html[data-seisa-entry="mobile"] .app-header .toolbar-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

html[data-seisa-entry="mobile"] .app-header .toolbar-main {
    width: 100%;
}

html[data-seisa-entry="mobile"] .app-header nav.toolbar-group.toolbar-group-tabs.tab-bar {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

/* Zwei gleich breite Buttons pro Zeile; Icons + Text zentriert */
html[data-seisa-entry="mobile"] .app-header nav.toolbar-group-tabs .toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
    align-items: stretch;
    width: 100%;
    flex-direction: unset;
}

html[data-seisa-entry="mobile"] .app-header .tab-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    white-space: normal;
}

html[data-seisa-entry="mobile"] .app-header .tab-btn-narrow {
    width: 100%;
}

html[data-seisa-entry="mobile"] .app-header .tab-btn-right {
    margin-left: 0;
}

/* Volle Viewportbreite für den Tab-Inhalt (sonst ~10–16px Rand durch schmalere .tab-content). */
html[data-seisa-entry="mobile"] .tab-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Formular: vertikales Wischen bevorzugen — weniger Fehl-Taps auf Felder bei offener Tastatur */
html[data-seisa-entry="mobile"] .tab-panel.active .form-card {
    touch-action: pan-y;
}

/* Mobil: Wrapper um type=date — display:contents erhält Flex-Layout der Form-Zeile */
html[data-seisa-entry="mobile"] .form-date-touch-guard {
    display: contents;
}

/*
 * Mobil-Einstieg: natives Datumsfeld (type=date) zuverlässig per Touch bedienbar.
 * — Job + Datum nebeneinander macht das Datum oft zu schmal; untereinander + volle Breite.
 * — min. 16px Schriftgröße: sonst zoomt iOS und der Picker wirkt „kaputt“.
 */
html[data-seisa-entry="mobile"] .form-card .form-row:has(.job-autocomplete):has(
        input[type="date"]
    ) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
}

html[data-seisa-entry="mobile"]
    .form-card
    .form-row:has(input[type="date"])
    .form-group-auto {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

html[data-seisa-entry="mobile"] .form-card input[type="date"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    font-size: 16px;
    line-height: 1.3;
    touch-action: manipulation;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .times-hours-chart-dialog,
    .times-person-pie-dialog,
    .invoice-avg-wage-chart-dialog,
    .invoice-amount-chart-dialog,
    .invoice-person-combo-chart-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        padding: 1rem;
    }

    .times-hours-chart-wrap,
    .times-person-pie-wrap,
    .invoice-person-combo-chart-wrap {
        height: calc(100vh - 10rem);
        min-height: 200px;
    }

    .invoice-avg-wage-chart-wrap,
    .invoice-amount-chart-wrap {
        height: calc(100vh - 14rem);
        min-height: 200px;
    }
}