/* =====================================================================
   LakeLand-Event Zeiterfassung - gemeinsames Stylesheet
   Design-Tokens, Layout-Feinschliff und UI-Komponenten (Combobox etc.)
   ===================================================================== */

:root{
    /* Marke */
    --lle-orange-50:  #fff7ed;
    --lle-orange-100: #ffedd5;
    --lle-orange-200: #fed7aa;
    --lle-orange-500: #ea580c;
    --lle-orange-600: #c2410c;
    --lle-orange-700: #9a3412;

    /* Flaechen */
    --lle-surface:      #ffffff;
    --lle-surface-soft: #fffbf7;
    --lle-border:       #eadfd5;
    --lle-border-soft:  #f3ece5;
    --lle-ink:          #1f2933;
    --lle-ink-soft:     #6b7280;

    --lle-radius:    14px;
    --lle-radius-sm: 10px;
    --lle-shadow:    0 1px 2px rgba(31,41,51,.04), 0 8px 24px -12px rgba(31,41,51,.18);

    /* Bootstrap-Overrides */
    --bs-primary: var(--lle-orange-500);
    --bs-primary-rgb: 234,88,12;
    --bs-link-color: var(--lle-orange-500);
    --bs-link-hover-color: var(--lle-orange-600);
    --bs-body-bg: var(--lle-orange-50);
    --bs-body-color: var(--lle-ink);
    --bs-border-radius: var(--lle-radius-sm);
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body{
    background:
        radial-gradient(1200px 420px at 50% -180px, #ffe7d3 0%, rgba(255,231,211,0) 70%),
        var(--bs-body-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Mobile App Shell (Frontend) */
.app-shell{
    max-width: 520px;
    margin: 0 auto;
    min-height: 100vh;
    background: transparent;
}

/* ------------------------------ Buttons ------------------------------ */
.btn{ --bs-btn-font-weight: 500; }

.btn-primary{
    --bs-btn-bg: var(--lle-orange-500);
    --bs-btn-border-color: var(--lle-orange-500);
    --bs-btn-hover-bg: var(--lle-orange-600);
    --bs-btn-hover-border-color: var(--lle-orange-600);
    --bs-btn-active-bg: var(--lle-orange-700);
    --bs-btn-active-border-color: var(--lle-orange-700);
    --bs-btn-disabled-bg: var(--lle-orange-500);
    --bs-btn-disabled-border-color: var(--lle-orange-500);
}

.btn-outline-primary{
    --bs-btn-color: var(--lle-orange-500);
    --bs-btn-border-color: var(--lle-orange-200);
    --bs-btn-hover-bg: var(--lle-orange-500);
    --bs-btn-hover-border-color: var(--lle-orange-500);
    --bs-btn-hover-color: #fff;
}

.btn-outline-secondary{
    --bs-btn-color: #57606a;
    --bs-btn-border-color: var(--lle-border);
    --bs-btn-hover-bg: #f6f2ee;
    --bs-btn-hover-border-color: #ddd0c4;
    --bs-btn-hover-color: #1f2933;
}

/* ------------------------------- Cards ------------------------------- */
.card{
    --bs-card-border-radius: var(--lle-radius);
    --bs-card-inner-border-radius: calc(var(--lle-radius) - 1px);
    --bs-card-bg: var(--lle-surface);
}
.card.shadow-sm{
    box-shadow: var(--lle-shadow) !important;
    border: 1px solid var(--lle-border-soft) !important;
}

/* ------------------------------ Formulare ---------------------------- */
.form-label{ font-size: .82rem; letter-spacing:.01em; margin-bottom:.35rem; }

.form-control, .form-select{
    border-color: var(--lle-border);
    border-radius: var(--lle-radius-sm);
}
.form-control:focus, .form-select:focus{
    border-color: var(--lle-orange-200);
    box-shadow: 0 0 0 .2rem rgba(234,88,12,.14);
}
.form-check-input:checked{
    background-color: var(--lle-orange-500);
    border-color: var(--lle-orange-500);
}
.form-check-input:focus{
    border-color: var(--lle-orange-200);
    box-shadow: 0 0 0 .2rem rgba(234,88,12,.14);
}

/* --------------------------- Seiten-Kopfzeile ------------------------ */
.page-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:1rem; margin-bottom:1rem;
}
.page-head__title{
    display:flex; align-items:center; gap:.6rem;
    font-size:1.05rem; font-weight:700; margin:0;
}
.page-head__icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:10px;
    background: var(--lle-orange-100); color: var(--lle-orange-600);
    font-size:1rem;
}
.page-head__sub{ color: var(--lle-ink-soft); font-size:.82rem; margin-top:.15rem; }

/* ------------------------------ Toolbar ------------------------------ */
.toolbar{
    background: var(--lle-surface);
    border: 1px solid var(--lle-border-soft);
    border-radius: var(--lle-radius);
    box-shadow: var(--lle-shadow);
    padding: 1rem;
    margin-bottom: 1.25rem;
}
.toolbar__legend{
    display:flex; align-items:center; gap:.4rem;
    font-size:.72rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.06em; color: var(--lle-ink-soft);
    margin-bottom:.75rem;
}

/* ------------------------------- Reiter ------------------------------ */
.nav-pills{
    --bs-nav-pills-link-active-bg: var(--lle-orange-500);
    --bs-nav-link-color: var(--lle-ink-soft);
    --bs-nav-link-hover-color: var(--lle-orange-600);
    --bs-nav-pills-border-radius: var(--lle-radius-sm);
    background: var(--lle-surface-soft);
    border: 1px solid var(--lle-border-soft);
    border-radius: var(--lle-radius-sm);
    padding: .2rem;
    gap: .2rem;
}
.nav-pills .nav-link{ font-size: .9rem; font-weight: 500; }

/* ------------------------------ Tabellen ----------------------------- */
.table{
    --bs-table-hover-bg: #fff6ef;
    margin-bottom: 0;
}
.table > thead th{
    font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
    font-weight:600; color: var(--lle-ink-soft);
    background: var(--lle-surface-soft);
    border-bottom:1px solid var(--lle-border);
    white-space: nowrap;
}
.table > tbody td{ border-color: var(--lle-border-soft); }
.table-sticky thead th{ position: sticky; top: 0; z-index: 2; }

.badge{ font-weight:600; border-radius: 999px; padding:.35em .7em; }

/* Numerische Werte tabellarisch ausrichten */
.num{ font-variant-numeric: tabular-nums; }

/* =====================================================================
   Auswertungen: Kennzahlen, Hero-Zahl, Fortschritt, Diagramme
   ===================================================================== */

/* Kennzahlen-Kachel */
.stat{ padding: .15rem 0; }
.stat__label{
    font-size:.75rem; color: var(--lle-ink-soft);
    letter-spacing:.01em; margin-bottom:.15rem;
}
.stat__value{
    font-size:1.45rem; font-weight:600; line-height:1.15;
    /* bewusst proportionale Ziffern - tabellarische wirken bei grossen
       Zahlen auseinandergezogen */
    font-variant-numeric: proportional-nums;
}
.stat__delta{ font-size:.78rem; font-weight:600; color: var(--lle-ink-soft); margin-top:.1rem; }
.stat__delta--up{ color:#15803d; }
.stat__delta--down{ color:#b91c1c; }
.stat__note{ font-size:.72rem; font-weight:400; color: var(--lle-ink-soft); }

/* Auf schmalen Telefonen muessen drei Kacheln nebeneinander passen */
@media (max-width: 420px){
    .stat__value{ font-size:1.15rem; }
    .stat__label{ font-size:.68rem; }
    .stat__delta, .stat__note{ font-size:.68rem; }
}

/* Die eine grosse Zahl, mit der die Seite anfaengt */
.hero__label{
    font-size:.75rem; text-transform:uppercase; letter-spacing:.08em;
    font-weight:600; color: var(--lle-ink-soft);
}
.hero__value{
    font-size:3rem; line-height:1.05; font-weight:700; letter-spacing:-.02em;
    font-variant-numeric: proportional-nums;
    color: var(--lle-orange-600);
}
@media (max-width: 400px){
    .hero__value{ font-size:2.5rem; }
}

/* Fortschritt Ist/Soll - Spur ist eine hellere Stufe derselben Farbe */
.meter{
    height:8px; border-radius:999px;
    background: var(--lle-orange-100);
    overflow:hidden;
}
.meter__fill{
    display:block; height:100%; border-radius:999px;
    background: var(--lle-orange-500);
    transition: width .25s ease;
}
.meter.is-full .meter__fill{ background: var(--lle-orange-700); }

/* Diagramm-Fläche: Höhe schliesst die x-Achsenbeschriftung mit ein */
.chart-box{ position:relative; height:260px; }
@media (min-width: 576px){
    .chart-box{ height:300px; }
}

/* Tabellen-Zwilling zu jedem Diagramm */
.table-view > summary{
    cursor:pointer; list-style:none;
    font-size:.8rem; font-weight:600; color: var(--lle-orange-600);
    padding:.4rem 0;
}
.table-view > summary::-webkit-details-marker{ display:none; }
.table-view > summary .bi{
    display:inline-block; margin-right:.3rem; font-size:.85rem;
    transition: transform .15s ease;
}
.table-view[open] > summary .bi{ transform: rotate(90deg); }
.table-view .table > thead th{ background: transparent; }

/* ------------------------------ Leerstand ---------------------------- */
.empty-state{
    text-align:center; padding: 2.25rem 1rem;
    color: var(--lle-ink-soft);
}
.empty-state i{ font-size:1.9rem; color: var(--lle-orange-200); display:block; margin-bottom:.5rem; }
.empty-state__title{ font-weight:600; color: var(--lle-ink); margin-bottom:.2rem; }

/* --------------------------- Admin-Navigation ------------------------ */
.admin-nav{ position: sticky; top: 1rem; }
.admin-nav__group{
    font-size:.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; color: var(--lle-ink-soft);
    margin: 1.1rem .25rem .4rem;
}
.admin-nav__group:first-of-type{ margin-top:.25rem; }

.admin-nav__link{
    display:flex; align-items:center; gap:.6rem;
    padding:.5rem .65rem; border-radius: var(--lle-radius-sm);
    color: #44505c; text-decoration:none; font-size:.9rem;
    border-left: 3px solid transparent;
    transition: background-color .12s ease, color .12s ease;
}
.admin-nav__link i{ font-size:1rem; color:#9aa4ae; width:1.1rem; text-align:center; }
.admin-nav__link:hover{ background: var(--lle-orange-50); color: var(--lle-orange-700); }
.admin-nav__link:hover i{ color: var(--lle-orange-500); }
.admin-nav__link.is-active{
    background: var(--lle-orange-100);
    color: var(--lle-orange-700);
    font-weight:600;
    border-left-color: var(--lle-orange-500);
}
.admin-nav__link.is-active i{ color: var(--lle-orange-600); }

/* =====================================================================
   Combobox (Autocomplete-Suche als Ersatz fuer <select>)
   ===================================================================== */
.cbx{ position: relative; }

.cbx__control{ position: relative; display:flex; align-items:center; }

.cbx__input{
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    text-overflow: ellipsis;
}
.cbx__input::placeholder{ color:#a9b0b8; }

.cbx__icon{
    position:absolute; left:.75rem; top:50%; transform: translateY(-50%);
    color:#a9b0b8; pointer-events:none; font-size:.95rem; line-height:1;
}
.cbx.is-open .cbx__icon, .cbx.has-value .cbx__icon{ color: var(--lle-orange-500); }

.cbx__clear{
    position:absolute; right:.4rem; top:50%; transform: translateY(-50%);
    display:none; align-items:center; justify-content:center;
    width:1.6rem; height:1.6rem; padding:0;
    border:0; border-radius:50%; background:transparent;
    color:#98a1ab; font-size:.75rem; line-height:1; cursor:pointer;
}
.cbx__clear:hover{ background:#f1ece7; color:#495057; }
.cbx.has-value .cbx__clear{ display:flex; }

.cbx__list{
    position:absolute; z-index:1055; left:0; right:0; top:calc(100% + .3rem);
    margin:0; padding:.3rem;
    list-style:none; max-height: 20rem; overflow-y:auto;
    background: var(--lle-surface);
    border:1px solid var(--lle-border);
    border-radius: var(--lle-radius-sm);
    box-shadow: 0 12px 32px -8px rgba(31,41,51,.25);
}
.cbx__list[hidden]{ display:none; }

.cbx__option{
    display:flex; align-items:center; gap:.55rem;
    padding:.45rem .55rem; border-radius:8px;
    cursor:pointer; font-size:.92rem; line-height:1.25;
}
.cbx__option + .cbx__option{ margin-top:1px; }
.cbx__option:hover{ background: var(--lle-orange-50); }
.cbx__option.is-active{ background: var(--lle-orange-100); color: var(--lle-orange-700); }
.cbx__option[aria-selected="true"]{ font-weight:600; }
.cbx__option[aria-selected="true"] .cbx__check{ margin-left:auto; color: var(--lle-orange-500); }
.cbx__check{ display:none; }
.cbx__option[aria-selected="true"] .cbx__check{ display:inline-block; }
.cbx__option mark{
    padding:0; background:transparent;
    color: var(--lle-orange-600); font-weight:700;
}
.cbx__label{ min-width:0; }
.cbx__meta{
    display:block; font-size:.75rem; color: var(--lle-ink-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cbx__avatar{
    flex: 0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    width:1.85rem; height:1.85rem; border-radius:50%;
    background: var(--lle-orange-100); color: var(--lle-orange-700);
    font-size:.7rem; font-weight:700; letter-spacing:.02em;
}
.cbx__empty{ padding:.7rem .6rem; color: var(--lle-ink-soft); font-size:.87rem; }
.cbx__hint{
    display:flex; justify-content:space-between; gap:.5rem;
    padding:.4rem .55rem .15rem; margin-top:.2rem;
    border-top:1px solid var(--lle-border-soft);
    font-size:.7rem; color:#9aa4ae;
}
.cbx__hint kbd{
    background:#f4efea; color:#6b7280; border-radius:4px;
    padding:0 .25rem; font-size:.68rem;
}
.cbx.is-invalid .cbx__input{
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.12);
}
.cbx__error{ display:none; margin-top:.3rem; font-size:.8rem; color: var(--bs-danger); }
.cbx.is-invalid .cbx__error{ display:block; }

/* Kein iOS-Zoom beim Fokus */
@media (max-width: 576px){
    .cbx__input{ font-size:16px; }
}

/* ------------------------- Live-Filter fuer Tabellen ------------------ */
.filterbox{ position:relative; }
.filterbox .bi-search{
    position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
    color:#a9b0b8; pointer-events:none; font-size:.9rem;
}
.filterbox input{ padding-left:2.2rem; }
.filter-count{ font-size:.78rem; color: var(--lle-ink-soft); white-space:nowrap; }

/* --------------------------------- Print ----------------------------- */
@media print{
    .toolbar, .admin-nav, .navbar, footer, .btn{ display:none !important; }
    .card{ box-shadow:none !important; border:0 !important; }
}