/* ================================================================
   Tour Lotse – app.css
   ================================================================ */

:root {
    --rm-green:  #2d6a4f;   /* Hauptnavigation – primäre Card-Header              */
    --rm-blue:   #1a5c38;   /* Sekundäre Card-Header (dunkler als Hauptgrün)       */
    --rm-orange: #3d8a5e;   /* Tertiäre Card-Header (heller, z.B. Abwesenheiten)  */
    --rm-bg:     #f8f9fa;
    /* Auftraege-Akkordion (werden in Theme-Dateien überschrieben) */
    --rm-row-open-bg: rgba(45, 106, 79, .15);  /* Aufgeklappte Zeile – etwas dunkler  */
    --rm-detail-bg:   rgba(45, 106, 79, .06);  /* Detailbereich – heller als Zeile    */
}

.bg-rm-green  { background-color: var(--rm-green)  !important; }
.bg-rm-blue   { background-color: var(--rm-blue)   !important; }
.bg-rm-orange { background-color: var(--rm-orange) !important; }
.text-rm-green { color: var(--rm-green) !important; }
.text-rm-blue  { color: var(--rm-blue)  !important; }
.text-rm-orange { color: var(--rm-orange) !important; }

.btn-rm-green { background-color: var(--rm-green); border-color: var(--rm-green); color: #fff; }
.btn-rm-green:hover { background-color: #1e4f3a; border-color: #1e4f3a; color: #fff; }
.btn-outline-rm-green { border-color: var(--rm-green); color: var(--rm-green); }
.btn-outline-rm-green:hover { background-color: var(--rm-green); color: #fff; }

.btn-xs { padding: .1rem .35rem; font-size: .75rem; line-height: 1.4; border-radius: .2rem; }

body {
    background-color: var(--rm-bg);
    font-family: 'Segoe UI', Calibri, Arial, sans-serif;
    font-size: .92rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main.app-main { flex: 1; min-width: 0; overflow-x: hidden; }

.navbar { box-shadow: 0 2px 6px rgba(0,0,0,.25); }

.card { border: none; border-radius: .5rem; }
.card-header { border-bottom: none; border-radius: .5rem .5rem 0 0 !important; font-weight: 600; }

.flash-area { position: sticky; top: 0; z-index: 1050; }

.color-swatch { display: inline-block; width: 1.4rem; height: 1.4rem; border: 1px solid #aaa; border-radius: .2rem; vertical-align: middle; cursor: pointer; }

/* ── Nachweis-Dokument ─────────────────────────────────────── */
.nachweis-page { background: #fff; width: 100%; max-width: 960px; margin: 0 auto; padding: 1.5rem 2rem; box-shadow: 0 2px 12px rgba(0,0,0,.12); border-radius: .5rem; }

.nachweis-kopf { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; gap: 1rem; }
.nachweis-kopf-links  { flex: 0 0 auto; }
.nachweis-kopf-mitte  { flex: 1 1 auto; text-align: center; }
.nachweis-kopf-rechts { flex: 0 0 auto; text-align: right; }
.nachweis-titel { font-size: 1.4rem; font-weight: bold; text-decoration: underline; letter-spacing: .03em; }
.nachweis-logo  { max-height: 80px; max-width: 260px; object-fit: contain; }

.nachweis-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; padding-bottom: .4rem; border-bottom: 2px solid #333; }
.nachweis-meta-label { font-size: .85rem; color: #555; margin-right: .6rem; }
.nachweis-meta-wert  { font-size: 1.3rem; font-weight: bold; }

.nachweis-tabelle { width: 100%; border-collapse: collapse; font-size: .85rem; margin-bottom: .5rem; border: 2.5px solid #333; }
.nachweis-tabelle th, .nachweis-tabelle td { border: 1px solid #ccc; padding: .22rem .45rem; vertical-align: middle; white-space: nowrap; }
.nachweis-tabelle thead th { background: #fff; font-weight: 700; border-bottom: 2px solid #333; }

.nachweis-tabelle .col-cb    { width: 3.5rem; text-align: center; border: none !important; background: transparent; }
.nachweis-tabelle .col-datum { width: 6.5rem; }
.nachweis-tabelle .col-wt    { width: 6.5rem; }
.nachweis-tabelle .col-ft    { width: 2rem; text-align: center; }
.nachweis-tabelle .col-at    { width: 2rem; text-align: center; }

.fahrt-display { font-family: 'Courier New', monospace; font-size: .82rem; }
.fahrt-display.ja   { font-weight: 600; }
.fahrt-display.nein { color: #555; }

.nachweis-summe td { border-top: 2.5px solid #333 !important; padding: .3rem .45rem; font-weight: bold; }
.nachweis-legende { font-size: .72rem; font-weight: normal !important; }
.legende-label { font-weight: 700; margin-right: .4rem; }
.legende-item  { display: inline-block; padding: .05rem .4rem; border: 1px solid rgba(0,0,0,.15); border-radius: .2rem; margin-right: .3rem; font-size: .7rem; }

.nachweis-footer { margin-top: 2rem; }
.nachweis-footer-zeile { margin-bottom: 1.5rem; }
.nachweis-sig-container { display: flex; gap: 4rem; margin-top: 1rem; }
.nachweis-sig-block { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.nachweis-kuerzel { max-height: 60px; margin-bottom: .3rem; }
.nachweis-sig-linie { width: 100%; border-bottom: 1px solid #333; margin-bottom: .2rem; }
.nachweis-sig-text  { font-size: .75rem; color: #555; }

.cb-work, .cb-home { width: 1.1rem; height: 1.1rem; cursor: pointer; accent-color: var(--rm-green); }
.cb-saving { opacity: .4; }
.cb-saved-indicator { display: inline-block; font-size: .65rem; color: var(--rm-green); opacity: 0; transition: opacity .3s; }
.cb-saved-indicator.show { opacity: 1; }

.alle-karte { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.alle-karte:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); transform: translateY(-2px); }

.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .4rem; }
.palette-item { border: 2px solid transparent; border-radius: .35rem; padding: .35rem .5rem; cursor: pointer; font-size: .8rem; display: flex; align-items: center; gap: .4rem; transition: border-color .1s; }
.palette-item:hover { border-color: #999; }
.palette-item.selected { border-color: #333; font-weight: 700; }
.palette-dot { width: 1rem; height: 1rem; border-radius: .2rem; border: 1px solid rgba(0,0,0,.2); flex-shrink: 0; }

@media print {
    .no-print, nav.navbar, .flash-area { display: none !important; }
    body { background: #fff; }
    .nachweis-page { box-shadow: none; padding: 0; max-width: 100%; }
    .nachweis-tabelle th, .nachweis-tabelle td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .nachweis-zeile { break-inside: avoid; }
}

/* ================================================================
   App-Shell: Topnav + Sidebar
   ================================================================ */

:root {
    --topnav-height:    56px;
    --subnav-height:    38px;
    --sidebar-width:    220px;
    --sidebar-strip:    10px;
    --sidebar-bg:       #112b1d;
    --sidebar-ease:     .22s cubic-bezier(.4,0,.2,1);
}

/* Kein horizontales Scrollen */
html, body { overflow-x: clip; }

/* ── Topnav ─────────────────────────────────────────────────── */
.topnav {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--topnav-height);
    width: 100%;        /* explizit volle Breite */
}

.topnav-link {
    padding: .38rem .75rem !important;
    border-radius: .35rem;
    font-size: .875rem;
    opacity: .78;
    transition: opacity .15s, background .15s;
    white-space: nowrap;
}
.topnav-link:hover  { opacity: 1; background: rgba(255,255,255,.12); }
.topnav-link.active { opacity: 1; background: rgba(255,255,255,.2); font-weight: 600; }

/* ── Sidebar ────────────────────────────────────────────────── */
.app-sidebar {
    position: fixed;
    top: var(--topnav-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--topnav-height));
    background: var(--sidebar-bg);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    padding-top: .5rem;
    padding-bottom: 1rem;
    transition: width var(--sidebar-ease), transform var(--sidebar-ease), box-shadow var(--sidebar-ease);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
}
.app-sidebar::-webkit-scrollbar       { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* Eingeklappt: sichtbarer Spalt */
.app-sidebar.sidebar-peek {
    width: var(--sidebar-strip);
    cursor: e-resize;
    box-shadow: 2px 0 8px rgba(0,0,0,.25);
}

/* Section label */
.sidebar-lbl {
    padding: .85rem 1rem .25rem;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.32);
    user-select: none;
    white-space: nowrap;
}
.sidebar-lbl:first-child { padding-top: .5rem; }

/* Nav item */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: .875rem;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s, border-color .12s;
    position: relative;
    white-space: nowrap;
}
.sidebar-item i               { font-size: .95rem; flex-shrink: 0; }
.sidebar-item:hover           { background: rgba(255,255,255,.08); color: rgba(255,255,255,.95); }
.sidebar-item.active          { background: rgba(255,255,255,.13); color: #fff; font-weight: 600; border-left-color: rgba(255,255,255,.65); }
.sidebar-item-ext             { font-style: italic; }
.sidebar-ext-icon             { font-size: .6rem !important; margin-left: auto; opacity: .45; }
.sidebar-item-danger          { color: rgba(255,120,120,.8); }
.sidebar-item-danger:hover    { color: rgba(255,120,120,1); background: rgba(255,60,60,.1); }

/* Footer (mobile) */
.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: .5rem;
}

/* ── Subnav (horizontales Bereichsmenü, Desktop) ────────────── */
.subnav {
    display: none; /* Mobile: versteckt */
}
@media (min-width: 992px) {
    .subnav {
        display: flex;
        align-items: center;
        position: sticky;
        top: var(--topnav-height);
        z-index: 1029;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,.09);
        height: var(--subnav-height);
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .subnav::-webkit-scrollbar { display: none; }
}
.subnav-inner {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 1rem;
    height: 100%;
    white-space: nowrap;
}
.subnav-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .85rem;
    height: var(--subnav-height);
    font-size: .82rem;
    color: #555;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s, background .12s;
}
.subnav-link i { font-size: .8rem; }
.subnav-link:hover  { color: var(--rm-green); background: rgba(0,0,0,.03); }
.subnav-link.active { color: var(--rm-green); font-weight: 600; border-bottom-color: var(--rm-green); }
.subnav-sep {
    width: 1px; height: 16px;
    background: rgba(0,0,0,.1);
    margin: 0 .2rem;
    flex-shrink: 0;
}
.subnav-lbl {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #adb5bd;
    padding: 0 .6rem;
}
/* Sidebar auf Desktop ausblenden */
@media (min-width: 992px) {
    .app-sidebar { display: none !important; }
}

/* ── Auftraege-Akkordion ─────────────────────────────────────── */
.auftrag-chevron {
    font-size: .9rem;
    color: var(--rm-green);
    transition: transform .2s ease;
    display: inline-block;
}
/* Bootstrap 5 setzt Farben auf td, nicht auf tr → td direkt targeten */
.auftrag-row.auftrag-row-open > td {
    background-color: var(--rm-row-open-bg) !important;
    transition: background-color .15s;
}
.auftrag-row.auftrag-row-open .auftrag-chevron {
    transform: rotate(90deg);
}
.auftrag-detail-body {
    background-color: var(--rm-detail-bg) !important;
}
/* Aufgeklappte Zeile: Hover überschreibt nicht die offene Hintergrundfarbe */
#auftraege-table.table-hover .auftrag-row.auftrag-row-open:hover > td {
    background-color: var(--rm-row-open-bg) !important;
}

/* ── Klienten-Akkordion ─────────────────────────────────────── */
.klient-chevron {
    font-size: .9rem;
    color: var(--rm-green);
    transition: transform .2s ease;
    display: inline-block;
}
.klient-row.klient-row-open > td {
    background-color: var(--rm-row-open-bg) !important;
    transition: background-color .15s;
}
.klient-row.klient-row-open .klient-chevron {
    transform: rotate(90deg);
}
.klient-detail-body {
    background-color: var(--rm-detail-bg) !important;
}
/* Aufgeklappte Zeile: Hover überschreibt nicht die offene Hintergrundfarbe */
#klienten-table.table-hover .klient-row.klient-row-open:hover > td {
    background-color: var(--rm-row-open-bg) !important;
}

/* ── Main content offset (desktop) ─────────────────────────── */
@media (min-width: 992px) {
    .app-main, .site-footer, .app-demo-banner {
        margin-left: 0;
        min-width: 0;
        max-width: 100%;
    }
}

/* ── Mobile sidebar ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        z-index: 1045;
        box-shadow: none;
        width: 260px;
    }
    .app-sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,.4);
    }
}

/* ── Benachrichtigungsglocke: Popup auf Mobile zentrieren ─────
   Auf schmalen Screens ragt das rechtsbündige Dropdown (min-width
   290px) über den linken Viewport-Rand hinaus. Daher auf Mobile
   fixed positionieren und über die volle Breite zentrieren. ── */
@media (max-width: 575.98px) {
    #bellDropdown + .dropdown-menu {
        position: fixed !important;
        top: var(--topnav-height, 56px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 24px);
        max-width: 340px !important;
        min-width: 0 !important;
        margin-top: .5rem;
    }
}

/* Backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
    transition: opacity .2s;
    opacity: 0;
}
.sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* ── Flash sticky (unterhalb Sidebar) ───────────────────────── */
.flash-area { top: 0; }

/* ── Demo-Banner ─────────────────────────────────────────────── */
.app-demo-banner { position: sticky; top: var(--topnav-height); z-index: 1029; }

/* ── Site footer ──────────────────────────────────────────────── */
.site-footer {
    text-align: center;
    padding: .5rem 1rem;
    font-size: .75rem;
    color: #888;
    border-top: 1px solid #e0e0e0;
}
.site-footer a { color: #888; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ── Splash Overlay ─────────────────────────────────────────── */
#splash-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    opacity: 0;
    transition: opacity .5s ease;
    align-items: center;
    justify-content: center;
}
#splash-overlay.visible {
    display: flex;
    opacity: 1;
}
#splash-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    max-width: 400px;
    width: 90%;
}
#splash-card img:first-child { margin-bottom: 1rem; }
#splash-card .dev { font-size: .75rem; color: #888; margin: .75rem 0 .2rem; }
#splash-card .dev a { color: var(--rm-green); text-decoration: none; }
#splash-card .ver { font-size: .8rem; color: #aaa; margin: 0 0 .5rem; }
#splash-card .hint { font-size: .7rem; color: #bbb; margin: 0; }

/* ── Tabellen-Paging ─────────────────────────────────────────
   Muss bereits beim HTML-Parsen greifen: Zeilen außerhalb des
   Paging-Fensters werden serverseitig mit .pag-hidden gerendert
   (schnellerer Initial-Load großer Tabellen). */
.pag-hidden { display: none !important; }
.pag-footer .page-link { cursor: pointer; }

/* Große Sichtfenster: Collapse-Animation aus (Relayout pro Frame vermeiden) */
table.pag-no-anim .collapsing { transition: none !important; }