/* ============================================================
   Abfallmessung – Custom Styles
   ============================================================ */

/* Alpine.js: Elemente mit x-cloak vor dem Initialisieren verstecken */
[x-cloak] { display: none !important; }

/* --- Markenfarben ------------------------------------------ */
:root {
    --green-primary:   #DE4F39;
    --green-hover:     #C43A25;
    --uep-bg:          #4CAF50;
    --uep-light:       #E8F5E9;
    --tr-bg:           #F9A825;
    --tr-light:        #FFFDE7;
    --sr-bg:           #FF8F00;
    --sr-light:        #FFF8E1;
    --la-bg:           #7B1FA2;
    --la-light:        #F3E5F5;
    --pa-bg:           #00796B;
    --pa-light:        #E0F2F1;
}

/* --- Navbar ------------------------------------------------ */
.bg-app-green  { background-color: var(--green-primary) !important; }
.text-app-green { color: var(--green-primary) !important; }

.btn-app-green {
    background-color: var(--green-primary);
    border-color: var(--green-primary);
    color: #fff;
}
.btn-app-green:hover {
    background-color: var(--green-hover);
    border-color: var(--green-hover);
    color: #fff;
}

/* --- Sidebar ---------------------------------------------- */
.sidebar {
    transition: width .2s, min-width .2s;
    overflow: hidden;
}

/* Schmaler Toggle-Streifen zwischen Sidebar und Hauptbereich */
.sidebar-toggle {
    flex-shrink: 0;
    width: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    color: #6c757d;
    transition: background .15s, color .15s;
}
.sidebar-toggle:hover {
    background: #e9ecef;
    color: var(--green-primary);
}

.sidebar-link {
    color: #333;
    border-left: 3px solid transparent;
    transition: background .15s;
}
.sidebar-link:hover {
    background-color: #f5f5f5;
    color: var(--green-primary);
}
.sidebar-link.active {
    background-color: #FBE9E7;
    border-left-color: var(--green-primary);
    color: var(--green-primary);
    font-weight: 600;
}

/* --- Messungstabelle: Farb-Gruppen ------------------------- */
.bg-uep      { background-color: var(--uep-bg)    !important; color: #fff; }
.bg-uep-light{ background-color: var(--uep-light) !important; }
.bg-tr       { background-color: var(--tr-bg)     !important; color: #fff; }
.bg-tr-light { background-color: var(--tr-light)  !important; }
.bg-sr       { background-color: var(--sr-bg)     !important; color: #fff; }
.bg-sr-light { background-color: var(--sr-light)  !important; }
.bg-la       { background-color: var(--la-bg)     !important; color: #fff; }
.bg-la-light { background-color: var(--la-light)  !important; }
.bg-pa       { background-color: var(--pa-bg)     !important; color: #fff; }
.bg-pa-light { background-color: var(--pa-light)  !important; }

.text-uep { color: #2E7D32; font-weight: 600; }
.text-tr  { color: #F57F17; font-weight: 600; }

/* Progress-bar Farben für Berichte */
.bg-uep-bar { background-color: var(--uep-bg)  !important; }
.bg-tr-bar  { background-color: var(--tr-bg)   !important; }
.bg-sr-bar  { background-color: var(--sr-bg)   !important; }
.bg-la-bar  { background-color: var(--la-bg)   !important; }
.bg-pa-bar  { background-color: var(--pa-bg)   !important; }

/* --- Messung-Tabelle Input-Felder -------------------------- */
.messung-tabelle input.form-control {
    min-width: 60px;
    padding: 2px 4px;
    font-size: .82rem;
}
.messung-tabelle input.form-control:focus {
    border-color: var(--green-primary);
    box-shadow: 0 0 0 .15rem rgba(222,79,57,.25);
}

/* --- KPI-Karten ------------------------------------------- */
.kpi-card    { border-radius: 10px; }
.kpi-wert    { font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.kpi-label   { font-size: .85rem; color: #555; margin-top: 4px; }
.kpi-sub     { font-size: .75rem; color: #999; margin-top: 2px; }

/* --- Subtile Grün-Zeile in Tabellen ----------------------- */
.table-success-subtle { background-color: #F1F8E9 !important; }

/* --- Allgemein -------------------------------------------- */
body { font-size: .9rem; }
.form-label { margin-bottom: .2rem; }
.card-header { font-size: .9rem; }

/* Scrollbarer Main */
main { height: calc(100vh - 56px); }