/* MIS – eigene kleine Ergaenzungen zu Pico.css.
   Mobile-first: Basis ist fuer schmale Viewports. */

/* ============================================================
   Design-Tokens
   ============================================================ */
:root {
    --spacing: 0.9rem;

    /* Einheitliche Radii — runder, aber nicht verspielt. */
    --ui-radius-sm: 4px;
    --ui-radius:    6px;
    --ui-radius-lg: 8px;

    /* Status-Farbpaare (background / border / text). Bewusst dezent,
       damit die Oberflaeche ruhig bleibt. */
    --ui-success-bg: #e6f4ea;
    --ui-success-bd: #1e7e34;
    --ui-success-fg: #0f5132;

    --ui-warn-bg:    #fff5e1;
    --ui-warn-bd:    #e08000;
    --ui-warn-fg:    #7a4b00;

    --ui-error-bg:   #fdecea;
    --ui-error-bd:   #c0392b;
    --ui-error-fg:   #7a0000;

    --ui-info-bg:    #eaf2fc;
    --ui-info-bd:    #2c5fa3;
    --ui-info-fg:    #1b3e6b;

    --ui-muted:      #6b7280;
    --ui-soft-bg:    #f4f6fa;
    --ui-soft-bd:    #d6dbe4;

    /* Pico-Hooks etwas weicher einstellen */
    --pico-border-radius: var(--ui-radius);
    --pico-form-element-spacing-vertical: 0.55rem;
}

/* --- Basis --- */
nav strong { font-size: 1.1rem; }
article {
    border-radius: var(--ui-radius-lg);
}
article header { padding-bottom: 0.5rem; }
section > h1 { margin-bottom: 0.6rem; }

/* Inputs/Selects/Textareas einheitlich runden. */
input, select, textarea, button, [role="button"] {
    border-radius: var(--ui-radius);
}

/* Wiederkehrendes Seiten-Layout: Titel + Aktion(en) nebeneinander. */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.page-head h1 { margin: 0; }
.page-head__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.page-head__meta { color: var(--ui-muted); }

/* Zurueck-Leiste unter dem Nav (z. B. History): konsistente Zeile mit Links/Buttons. */
.toolbar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.75rem;
}

/* Filter-Container — einheitliches Look auf allen Admin-Seiten. */
.filter-bar header { padding-bottom: 0.3rem; }
.filter-bar .filter-shortcuts {
    display: block;
    margin-top: 0.25rem;
    color: var(--ui-muted);
}
.filter-bar .filter-shortcuts a { color: inherit; }

/* Kompakte Tabellen-Aktionen (Bearbeiten/Toggle/...). */
.btn-table {
    padding: 0.18rem 0.65rem !important;
    font-size: 0.88rem;
    min-height: 0;
    line-height: 1.4;
    border-radius: var(--ui-radius-sm);
}
.btn-table + .btn-table,
.btn-table + form,
form + .btn-table { margin-left: 0.35rem; }

/* Tabellen-Politur: ruhige Kopfzeile, Hover, weniger harte Linien. */
table {
    border-collapse: separate;
    border-spacing: 0;
}
thead th {
    background: var(--ui-soft-bg);
    color: var(--ui-muted);
    font-weight: 600;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--ui-soft-bd);
}
tbody tr:hover td {
    background: rgba(0, 0, 0, 0.025);
}
tbody td {
    border-bottom: 1px solid var(--ui-soft-bd);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }

/* Hervorgehobene "neu zu pruefende" Zeile. */
tr.row-new td   { background: #fff8e6; }
tr.row-new:hover td { background: #fff0cf; }
/* Inaktive/abgeloeste Zeilen leicht ausgrauen. */
tr.row-inactive td { opacity: 0.6; }

/* ============================================================
   Status-Badges — eine zentrale Optik fuer alle "Pillen".
   ============================================================ */
.badge {
    display: inline-block;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--ui-soft-bg);
    color: var(--ui-muted);
    border: 1px solid var(--ui-soft-bd);
}
.badge--new      { background: var(--ui-error-bg); color: var(--ui-error-bd); border-color: var(--ui-error-bd); }
.badge--ok       { background: var(--ui-success-bg); color: var(--ui-success-bd); border-color: var(--ui-success-bd); }
.badge--reject   { background: #f5d6d0; color: #7a0000; border-color: var(--ui-error-bd); }
.badge--active   { background: var(--ui-success-bg); color: var(--ui-success-fg); border-color: #b6dcc1; }
.badge--inactive { background: var(--ui-soft-bg); color: var(--ui-muted); border-color: var(--ui-soft-bd); }
.badge--info     { background: var(--ui-info-bg);  color: var(--ui-info-fg);    border-color: #b7cdec; }
.badge--warn     { background: var(--ui-warn-bg);  color: var(--ui-warn-fg);    border-color: #edc18a; }

/* ============================================================
   Flash-Messages — durch partials/flashes.php gerendert.
   ============================================================ */
.flash {
    margin: 0.85rem 0;
    padding: 0.85rem 1.1rem;
    border-radius: var(--ui-radius-lg);
    border-left: 5px solid var(--ui-soft-bd);
    background: var(--ui-soft-bg);
    color: var(--ui-muted);
    font-weight: 500;
    line-height: 1.45;
}
.flash__icon { margin-right: 0.55rem; font-size: 1.05em; }
.flash--success { background: var(--ui-success-bg); border-color: var(--ui-success-bd); color: var(--ui-success-fg); }
.flash--error   { background: var(--ui-error-bg);   border-color: var(--ui-error-bd);   color: var(--ui-error-fg); }
.flash--info    { background: var(--ui-info-bg);    border-color: var(--ui-info-bd);    color: var(--ui-info-fg); }
.flash--warn    { background: var(--ui-warn-bg);    border-color: var(--ui-warn-bd);    color: var(--ui-warn-fg); }

/* Dezenter Hinweis-Kasten (Info-Article ohne Flash-Charakter). */
.note {
    border-left: 5px solid var(--ui-info-bd);
    background: var(--ui-info-bg);
    color: var(--ui-info-fg);
}
.note--warn {
    border-left-color: var(--ui-warn-bd);
    background: var(--ui-warn-bg);
    color: var(--ui-warn-fg);
}
.note--ok {
    border-left-color: var(--ui-success-bd);
    background: var(--ui-success-bg);
    color: var(--ui-success-fg);
}

/* Admin-Hamburger-Menü: gilt auf allen Viewports.
   ☰ steht oben links. Das aufgeklappte Menü wird als Overlay über die
   Seite gezeichnet (position:absolute), damit kein Content nach unten rutscht.
   Optisch durch helle Hintergrundfarbe + Schatten abgehoben. */
.admin-nav__cb { display: none; }

nav.admin-nav {
    flex-wrap: wrap;
    position: relative;     /* Anker fuer das absolute Overlay */
    z-index: 1000;          /* Eigener Stacking-Kontext: Leaflet-Karte
                               (tile-pane z-index 200, popup-pane 700)
                               darf das aufgeklappte Menue nicht ueberdecken. */
}
.admin-nav > ul {
    flex-wrap: nowrap;
}
.admin-nav__brand {
    flex: 1 1 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}
.admin-nav__toggle-li {
    display: list-item;
    order: -1;
    margin-right: 0.5rem;
}
.admin-nav__meta {
    margin-left: auto;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
}
@media (max-width: 767px) {
    .admin-nav__meta {
        flex: 1 1 100%;
        margin-left: 0;
        order: 10;
        white-space: normal;
    }
}
.admin-nav__toggle {
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    padding: 0.25rem 0.6rem;
    user-select: none;
    display: inline-block;
}

/* Overlay-Panel: nimmt Links + User-Block auf, schwebt über der Seite. */
.admin-nav__panel {
    position: absolute;
    left: 0.5rem;
    top: 100%;
    margin-top: 0.3rem;
    z-index: 1001;          /* Ueber Leaflet-Layern (max 700) bleiben */
    min-width: 18rem;
    max-width: 90vw;
    background: #f4f6fa;
    border: 1px solid var(--pico-muted-border-color, #d0d4dc);
    border-radius: 0.4rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    padding: 0.35rem 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.admin-nav__cb:checked ~ .admin-nav__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.admin-nav__links,
.admin-nav__user {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
.admin-nav__user {
    border-top: 1px solid var(--pico-muted-border-color, #d0d4dc);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
}
.admin-nav__links > li,
.admin-nav__user > li {
    list-style: none;
    width: 100%;
    margin: 0;
}
.admin-nav__links > li > a,
.admin-nav__user > li > a {
    display: block;
    padding: 0.55rem 0.9rem;
    color: var(--pico-color, #1f2937);
    text-decoration: none;
    border-radius: 0.25rem;
}
.admin-nav__user > li > small {
    display: block;
    padding: 0 0.9rem;
    color: #6b7280;
}
.admin-nav__links > li > a:hover,
.admin-nav__user > li > a:hover {
    background: #e3e8f1;
}
.admin-nav__links > li > a[aria-current="page"] {
    background: #d7dfee;
    font-weight: 600;
}

/* Tabellen in <figure> sollen horizontal scrollbar sein, wenn zu breit. */
figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 var(--spacing) 0;
}

/* --- Mobile (<768px) --- */
@media (max-width: 767px) {
    /* Weniger Seitenrand, groessere Nutzflaeche */
    main.container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    /* Hamburger-Verhalten gilt jetzt global (siehe oben). Hier nur Fallback
       fuer alle anderen navs (Mitarbeiter-Bereich, etc.):
       horizontal scrollen statt umbrechen. */
    nav:not(.admin-nav) > ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    nav:not(.admin-nav) > ul::-webkit-scrollbar { display: none; }
    nav:not(.admin-nav) > ul > li {
        white-space: nowrap;
        flex-shrink: 0;
    }
    nav:not(.admin-nav) > ul > li > a {
        padding: 0.4rem 0.6rem;
    }

    /* Header mit inline-Flex auf Mobile stapeln (construction_sites, holidays, reports, ...) */
    header[style*="display:flex"],
    header[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem;
    }
    footer[style*="display:flex"],
    footer[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    /* Touch-Targets: alle Buttons/Links-als-Button mindestens 40px hoch */
    button, [role="button"], input[type="submit"] {
        min-height: 40px;
    }
    /* Ausnahme: kompakte Aktions-Buttons in Listen-Tabellen (padding:0.1rem im style) */
    table button[style*="padding:0.1rem"],
    table [role="button"][style*="padding:0.1rem"] {
        min-height: 32px;
        padding: 0.35rem 0.6rem !important;
        font-size: 0.85rem;
    }

    /* Aktionen-Spalte in Tabellen: Buttons untereinander statt nebeneinander */
    table td > a[role="button"] + form,
    table td > form + a[role="button"] {
        display: block;
        margin-top: 0.3rem;
    }

    /* Grid-Abstaende kompakter */
    .grid { gap: 0.5rem; }

    /* Zeit-Erfassungs-Tabelle: enge Inputs, kleine Schrift */
    #entriesTable {
        font-size: 0.85rem;
    }
    #entriesTable th,
    #entriesTable td {
        padding: 0.3rem 0.25rem;
    }
    #entriesTable input,
    #entriesTable select {
        font-size: 0.85rem;
        padding: 0.3rem;
        margin-bottom: 0;
        min-height: 34px;
    }
    /* Erste Spalte (Tag) sticky fuer Orientierung beim Scrollen */
    #entriesTable th:first-child,
    #entriesTable td:first-child {
        position: sticky;
        left: 0;
        background: var(--pico-background-color, #fff);
        z-index: 1;
    }

    /* Generelle Tabellen: kleinere Spalten-Padding */
    table th, table td {
        padding: 0.45rem 0.4rem;
    }
}

/* --- Tablet/Desktop (>=768px) --- */
@media (min-width: 768px) {
    nav > ul {
        flex-wrap: wrap;
    }
}

/* Zeit-Erfassungs-Tabelle: feste Spaltenanteile + Inputs füllen die Zelle.
   Ohne table-layout:fixed sortieren die Browser die Breite nach Inhalt,
   d. h. Tag/Art/Von/Bis bleiben schmal weil ihr Inhalt kurz ist. */
#entriesTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.88rem;
}
#entriesTable th,
#entriesTable td {
    padding: 0.15rem 0.1rem !important;
}
#entriesTable th { font-size: 0.82rem; }
#entriesTable input:not([type="checkbox"]),
#entriesTable select {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    font-size: 0.88rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
/* Von/Bis sollen die ganze Spaltenbreite voll ausnutzen, ohne dass das
   Browser-`size`-Attribut sie künstlich klein hält. */
#entriesTable .time-input { text-align: center; }
/* Alle Admin-Ansichten teilen sich dieselbe Container-Breite.
   Etwas breiter als Pico-Default, damit auch dichte Tabellen wie die
   Zeit-Erfassung Platz haben. Tabellen, die breiter sind, scrollen
   horizontal im umgebenden <figure>. */
main.container {
    max-width: 1200px;
}
/* Placeholder-Vorgaben (Orientierungshilfe) heller, damit sie sich klar
   vom echten Wert abheben. Firefox setzt opacity standardmässig auf <1. */
#entriesTable input::placeholder,
#entriesTable textarea::placeholder {
    color: #d4d4d4;
    opacity: 1;
}
/* Spalten: Tag · Art · Von · Bis · Pause · Baustelle · Toast. · Notiz · Netto · Aktion
   Von/Bis bekommen jetzt 12% (vorher 8%), damit "07:30" mit Padding sicher reinpasst. */
#entriesTable th:nth-child(1),  #entriesTable td:nth-child(1)  { width:  8%; }
#entriesTable th:nth-child(2),  #entriesTable td:nth-child(2)  { width: 10%; }
#entriesTable th:nth-child(3),  #entriesTable td:nth-child(3)  { width: 12%; }
#entriesTable th:nth-child(4),  #entriesTable td:nth-child(4)  { width: 12%; }
#entriesTable th:nth-child(5),  #entriesTable td:nth-child(5)  { width:  6%; }
#entriesTable th:nth-child(6),  #entriesTable td:nth-child(6)  { width: 16%; }
#entriesTable th:nth-child(7),  #entriesTable td:nth-child(7)  { width:  5%; }
#entriesTable th:nth-child(8),  #entriesTable td:nth-child(8)  { width: 16%; }
#entriesTable th:nth-child(9),  #entriesTable td:nth-child(9)  { width:  7%; }
#entriesTable th:nth-child(10), #entriesTable td:nth-child(10) { width:  8%; }

/* Büromitarbeiter: Toaster-Spalte ist raus. Spalten neu verteilen:
   Tag · Art · Von · Bis · Pause · Beschreibung · Notiz · Netto · Aktion (9 cols, 100%).
   Auch hier Von/Bis breiter. */
#entriesTable[data-office="1"] th:nth-child(3),
#entriesTable[data-office="1"] td:nth-child(3) { width: 12%; }
#entriesTable[data-office="1"] th:nth-child(4),
#entriesTable[data-office="1"] td:nth-child(4) { width: 12%; }
#entriesTable[data-office="1"] th:nth-child(6),
#entriesTable[data-office="1"] td:nth-child(6) { width: 20%; }
#entriesTable[data-office="1"] th:nth-child(7),
#entriesTable[data-office="1"] td:nth-child(7) { width: 16%; }
#entriesTable[data-office="1"] th:nth-child(8),
#entriesTable[data-office="1"] td:nth-child(8) { width: 8%; }
#entriesTable[data-office="1"] th:nth-child(9),
#entriesTable[data-office="1"] td:nth-child(9) { width: 8%; }

/* ============================================================
   Modale Dialoge — geteilte Optik fuer Upload-Vorschau + kleine Modals.
   ============================================================ */
.upload-modal__backdrop,
.small-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 25, 35, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}
.upload-modal__backdrop[hidden],
.small-modal__backdrop[hidden] { display: none; }

.upload-modal,
.small-modal {
    background: var(--pico-background-color, #fff);
    border-radius: var(--ui-radius-lg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    width: min(900px, 96vw);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.upload-modal { height: min(900px, 92vh); }
.small-modal  { width: min(520px, 96vw); max-height: 92vh; overflow: auto; }

.upload-modal__head,
.small-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--ui-soft-bd);
    background: var(--ui-soft-bg);
}
.upload-modal__body {
    flex: 1 1 auto;
    background: #2b2b2b;
}
.upload-modal__body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #2b2b2b;
}
@media (max-width: 767px) {
    .upload-modal__backdrop { padding: 0; }
    .upload-modal {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

/* Innenraum kleiner Modals: konsistente Polsterung. */
.small-modal__body {
    padding: 0.85rem 1rem 1rem;
    margin: 0;
}

/* --- Upload-Vorschau: Bild-Viewer mit Pan/Zoom --- */
.upload-modal__body { position: relative; }
.upload-modal__imgwrap {
    position: absolute;
    inset: 0;
    overflow: auto;
    background: #2b2b2b;
    cursor: grab;
    touch-action: none;
    overscroll-behavior: contain;
}
.upload-modal__imgwrap[hidden] { display: none; }
.upload-modal__imgwrap img {
    display: block;
    max-width: none;
    max-height: none;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: 0 0;
}

/* --- Stepper-Inputs: groessere +/- Buttons um Zahlen-Inputs --- */
.stepper {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 12rem;
}
.stepper > input[type="number"] {
    flex: 1 1 auto;
    text-align: center;
    font-size: 1.05rem;
    border-radius: 0;
    margin: 0;
    min-width: 0;
    /* Browser-Spinner verbergen, wir liefern eigene +/- Buttons */
    -moz-appearance: textfield;
}
.stepper > input[type="number"]::-webkit-outer-spin-button,
.stepper > input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.stepper__btn {
    flex: 0 0 auto;
    min-width: 2.6rem;
    min-height: 2.6rem;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0.6rem !important;
    background: #eef1f6;
    color: #222;
    border: 1px solid var(--pico-muted-border-color, #d0d4dc);
    cursor: pointer;
    user-select: none;
}
.stepper__btn:hover { background: #dde3ee; }
.stepper__btn:active { background: #c8d2e2; }
.stepper__btn[data-step="-1"] { border-top-left-radius: 0.35rem; border-bottom-left-radius: 0.35rem; border-right: 0; }
.stepper__btn[data-step="+1"] { border-top-right-radius: 0.35rem; border-bottom-right-radius: 0.35rem; border-left: 0; }
@media (max-width: 767px) {
    .stepper > input[type="number"] { font-size: 1.1rem; }
    .stepper__btn { min-width: 3rem; min-height: 3rem; font-size: 1.4rem; }
}

/* ============================================================
   Utility-Klassen (klein gehalten, ersetzen typische inline styles)
   ============================================================ */
.nowrap     { white-space: nowrap; }
.title-sub  { font-weight: normal; }
.muted-ok   { color: var(--ui-success-bd); }
.text-error { color: var(--ui-error-bd); }
.link-muted { margin-left: 0.4rem; }

.mt-sm      { margin-top: 0.4rem; }
.mt-md      { margin-top: 1rem; }
.m-tight    { margin: 0.3rem 0 0 0; }
.self-center { align-self: center; }

.t-sm       { font-size: 0.9rem; }
.col-tick   { width: 2rem; }

.row-highlight td { background: #f3f7ff; font-weight: 600; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.split-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.summary-link { cursor: pointer; }
.inline-details { display: inline-block; }

.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Modal-Action-Leiste: gleichmaessiger Abstand zwischen Buttons. */
.modal-actions { display: inline-flex; gap: 0.4rem; align-items: center; }
.modal-actions__group { display: inline-flex; gap: 0.25rem; }
.btn-close    { font-weight: 700; }

/* Notiz-/Info-Article — bekommen via .note die richtige Farbe */
article.note   { border-left: 5px solid var(--ui-info-bd); }
article.note p { margin: 0.3rem 0 0; }

/* ============================================================
   Maschinen-Inventar
   ============================================================ */

/* Listen-Thumbnail */
.inv-photo {
    display: inline-block;
    width: 60px; height: 60px;
    object-fit: cover;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-soft-bg);
    border: 1px solid var(--ui-soft-bd);
}
.inv-photo--thumb { width: 60px; height: 60px; }
.inv-photo--placeholder {
    line-height: 60px; text-align: center; color: var(--ui-muted);
}

/* Detail: Hauptfoto */
.inv-photo-main { margin-bottom: 0.8rem; }
.inv-photo-main__img {
    max-width: 100%; max-height: 320px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-soft-bd);
}

/* Detail: Beleg-Liste */
.inv-doc-list {
    list-style: none; padding: 0; margin: 0.4rem 0;
}
.inv-doc-list li {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0; border-bottom: 1px dashed var(--ui-soft-bd);
}
.inv-doc-list li:last-child { border-bottom: 0; }

/* Mobile-Erfassung: Foto-Button */
.inv-photo-card { text-align: center; }
.inv-photo-btn {
    display: block; cursor: pointer;
    background: var(--ui-info-bg); color: var(--ui-info-fg);
    border: 2px dashed var(--ui-info-bd);
    border-radius: var(--ui-radius-lg);
    padding: 2rem 1rem; margin: 0;
    font-weight: 600;
}
.inv-photo-btn__icon { display: block; font-size: 3rem; line-height: 1; margin-bottom: 0.4rem; }
.inv-photo-btn__label { font-size: 1.1rem; }

.inv-preview { margin-top: 0.6rem; }
.inv-preview img {
    max-width: 100%; max-height: 240px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-soft-bd);
}

/* Mobile-Erfassung: Beleg-Slots */
.inv-belege-card .inv-doc-slot { /* Container fuer einen Beleg */
    position: relative;
    border: 1px solid var(--ui-soft-bd);
    border-radius: var(--ui-radius);
    padding: 0.6rem;
    margin: 0.5rem 0;
    background: var(--ui-soft-bg);
}
.inv-doc-slot__preview {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.inv-doc-slot__preview--filled { color: var(--ui-success-fg); }
.inv-doc-slot__icon { font-size: 1.4rem; }
.inv-doc-slot__filename { font-size: 0.9rem; word-break: break-all; }
.inv-doc-slot__controls {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
}

/* Sticky Submit-Bar */
.inv-submit-bar {
    position: sticky; bottom: 0; left: 0; right: 0;
    background: var(--pico-background-color, #fff);
    padding: 0.6rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--ui-soft-bd);
    z-index: 5;
}
.inv-submit-bar button { width: 100%; font-size: 1.1rem; }

/* History-Seite Stundenzettel-Liste: kompakter, damit Aktionen in eine Zeile passen */
.tslist-compact { font-size: 0.85rem; }
.tslist-compact th,
.tslist-compact td { padding: 0.3rem 0.4rem; }
.tslist-compact__kw { white-space: nowrap; width: 4.5rem; }
.tslist-compact__up { width: 2.5rem; text-align: center; }
.tslist-compact .row-actions .btn-table {
    padding: 0.1rem 0.45rem !important;
    font-size: 0.8rem;
}
.tslist-compact .row-actions a.btn-table,
.tslist-compact .row-actions button.btn-table {
    margin-left: 0.15rem;
}
.tslist-compact .row-actions {
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: nowrap;
}
.tslist-compact .row-actions .link-muted,
.tslist-compact .row-actions .btn-table {
    margin: 0;
    line-height: 1;
}

/* Vorschau-Popup: Toolbar oben rechts auf einer Linie zentriert */
.upload-modal__head {
    flex-wrap: nowrap;
}
.upload-modal__head .modal-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.3rem;
    white-space: nowrap;
}
.upload-modal__head .modal-actions__group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.2rem;
}
.upload-modal__head .modal-actions .btn-table,
.upload-modal__head .modal-actions .btn-close {
    margin: 0;
    line-height: 1;
}

/* Kompakte Status-Icons fuer die tsList */
.status-icon {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
    border-radius: var(--ui-radius-sm);
    user-select: none;
}
.status-icon--generated { color: var(--ui-muted); }
.status-icon--uploaded  { color: var(--ui-error-bd); background: var(--ui-error-bg); }
.status-icon--reviewed  { color: var(--ui-success-fg); background: var(--ui-success-bg); }
.status-icon--rejected  { color: var(--ui-error-fg); background: #f5d6d0; }
.status-icon--time      { color: var(--ui-info-fg); background: var(--ui-info-bg); margin-left: 0.2rem; }

/* Stundenzettel-Zeile gruen, wenn Zeiten erfasst sind */
tr.row-time-done td {
    background: var(--ui-success-bg);
}
tr.row-time-done:hover td {
    background: #d3ecda;
}

/* Sortierbare Tabellenkoepfe (Admin-Uploads etc.) */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable:hover {
    background: #f0f0f0;
}
th.sortable .sort-arr {
    display: inline-block;
    min-width: 0.8em;
    font-size: 0.75em;
    color: #888;
}
th.sortable .sort-arr--placeholder {
    color: #bbb;
    opacity: 0.7;
}
th.sortable:hover .sort-arr--placeholder { color: #555; opacity: 1; }
th.sortable.sort-active .sort-arr {
    color: #333;
}