/* =========================
    Base / Reset / Tokens
    ========================= */
    *, *::before, *::after { box-sizing: border-box; }

    :root{
    --brand:#00796b;
    --brand-700:#00695c;
    --ok:#296117;
    --ok-hover:#29af17;
    --danger:#c62828;
    --danger-700:#b71c1c;
    --bg:#f7ebd8;
    --text:#333;
    --muted:#666;
    --radius:10px;
    --shadow:0 2px 8px rgba(0,0,0,.08);
    --gap:20px;
    }

    body{
    margin:0;
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    }

    /* =========================
    Headings
    ========================= */
    h2{
    font-size:1.2rem;
    margin:0 0 10px;
    color:var(--brand);
    font-weight:700;
    }
    h3{
    font-size:1.5rem;
    margin:6px 0 0;
    font-weight:600;
    color:#000;
    }
    h4{
    font-size:1.2rem;
    margin:0;
    }

    /* =========================
    Layout / Panels
    ========================= */
    .page-content{ padding:24px; }

    .dashboard-grid{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:var(--gap);
    max-width:1200px;
    margin:0 auto;
    }

    .panel{
    background:var(--bg);
    border:1px solid var(--brand);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:16px;
    }

    /* Desktop Panels (>=768px) */
    @media (min-width:768px){
    .panel--half{ grid-column:span 6; }
    .panel--full{ grid-column:span 12; }
    }
    /* Mobile Panels (<768px) */
    @media (max-width:767.98px){
    .panel{ grid-column:1 / -1; }
    }

    /* =========================
    Form
    ========================= */
    .form{ display:grid; gap:10px; }

    .form-row{
    display:grid;
    grid-template-columns:minmax(120px,40%) minmax(0,1fr);
    align-items:center;
    gap:10px;
    }

    .form-row label{
    font-weight:600;
    color:#444;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    }

    .form-row input[type="text"],
    .form-row input[type="number"],
    .form-row select{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--brand);
    border-radius:6px;
    background:#e7f3ef;
    color:#000;
    font-size:.98rem;
    }

    .form-row input:focus,
    .form-row select:focus{
    outline:2px solid var(--ok);
    outline-offset:2px;
    }

    /* =========================
    Buttons
    ========================= */
    .btn{
    display:inline-block;
    width:100%;
    padding:12px 14px;
    border:none;
    border-radius:8px;
    background:var(--ok);
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:transform .02s ease, background .2s ease;
    }
    .btn:hover{ background:var(--ok-hover); }
    .btn:active{ transform:translateY(1px); }
    .btn--danger{ background:var(--danger); }
    .btn--danger:hover{ background:var(--danger-700); }

    .import-wrapper{ display:grid; gap:10px; }
    .import-label{
    display:inline-block;
    width:100%;
    text-align:center;
    cursor:pointer;
    user-select:none;
    padding:12px 14px;
    border-radius:8px;
    background:var(--ok);
    color:#fff;
    font-weight:600;
    }
    .import-label:hover{ background:var(--ok-hover); }
    #import-file{ display:none; }

    .stack{ display:grid; gap:10px; }
    .status{ color:var(--muted); min-height:1lh; }

    /* =========================
    Toolbar
    ========================= */
    .toolbar{
    display:grid;
    gap:8px;
    grid-template-columns:1fr;
    align-items:center;
    margin:6px 0 8px;
    }
    .toolbar .select{ width:100%; max-width:360px; }

    /* =========================
    Totals (neu strukturiert)
    ========================= */
    .totals{
    border:1px solid #e0d6c5;
    border-radius:10px;
    background:#f2cc83;
    box-shadow:var(--shadow);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    }

    /* Zeile innerhalb der Totals */
    .total-row{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:flex-start;
    gap:6px 10px;
    font-size:1.05rem;
    }

    .total-row .label{ font-weight:600; color:#333; }
    .total-row .operator{ font-weight:700; color:var(--brand); }
    .total-row .value{ font-weight:700; color:#000; }

    .table-wrap{ margin-top:10px; }

    /* =========================
    Table (shared base)
    ========================= */
    .table-wrap{ overflow-x:auto; }
    table{ width:100%; border-collapse:collapse; table-layout:fixed; }
    th,td{ padding:8px 10px; border-bottom:1px solid #e0d6c5; }
    th{ color:var(--brand-700); font-weight:700; text-align:left; }
    td.num, th.num{ text-align:right; width:200px; }

    .row-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    }
    .row-actions .mini{
    padding:6px 10px;
    border-radius:6px;
    border:1px solid var(--brand);
    background:#fff;
    cursor:pointer;
    }
    .row-actions .mini:hover{ background:#e2f1ed; }

    /* =========================
    Desktop (>=601px)
    ========================= */
    @media (min-width:601px){
    /* Totals horizontal */
    .totals{
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:flex-start;
        gap:14px 16px;
    }

    .total-row{
        flex-direction:row;
        align-items:baseline;
        gap:6px;
    }

    .table-wrap{ overflow-x:auto; }
    table{ min-width:640px; }
    #table th:first-child, #table td:first-child { width:20%; }
    #table th:nth-child(2), #table td:nth-child(2) { width:20%; }
    #table th:nth-child(3), #table td:nth-child(3) { width:10%; }
    #table th:nth-child(4), #table td:nth-child(4) { width:10%; }
    #table th:nth-child(5), #table td:nth-child(5) { width:10%; }
    #table th:nth-child(6), #table td:nth-child(6) { width:25%; }
    }

    /* =========================
    Mobile (<=600px)
    ========================= */
    @media (max-width:600px){
    .page-content{ padding:16px; }

    /* Totals als gestapelte Card */
    .totals{
        padding:12px;
        gap:8px;
    }
    .total-row{
        flex-direction:column;
        align-items:flex-start;
        gap:2px;
        font-size:1rem;
    }

    thead{ display:none; }
    .table-wrap{ overflow-x:visible; }
    table{ min-width:0; border-collapse:separate; border-spacing:0; }

    #table tbody tr{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        padding:12px;
        margin-bottom:12px;
        border:1px solid #e0d6c5;
        border-radius:10px;
        background:#fff;
    }

    #table td{
        display:grid;
        grid-template-columns:110px 1fr;
        align-items:center;
        gap:6px;
        padding:0;
        border:0;
        text-align:left;
        white-space:normal;
    }

    #table td::before{
        font-weight:600;
        color:#444;
    }
    #table td:nth-child(1)::before{ content:"Raum:"; }
    #table td:nth-child(2)::before{ content:"Name:"; }
    #table td:nth-child(3)::before{ content:"Leistung (W):"; }
    #table td:nth-child(4)::before{ content:"h/Tag:"; }
    #table td:nth-child(5)::before{ content:"kWh/Tag:"; }
    #table td:nth-child(6)::before{ content:"Aktionen:"; }

    #table td:nth-child(6){ align-items:center; }
    #table td:nth-child(6) .row-actions{
        display:flex;
        flex-direction:row;
        gap:8px;
        flex-wrap:nowrap;
        justify-content:flex-start;
    }

    .form-row{ grid-template-columns:1fr; }
    .form-row label{ margin-bottom:4px; }
    }

    /* =========================
    Very small devices (<=360px)
    ========================= */
    @media (max-width:360px){
    .totals{ padding:10px; }
    .total-row{ font-size:.98rem; }
    }