/* ==========================================================
   LAYOUT CONSTANTS
   ========================================================== */

:root{
    --header-h: 64px;
    --footer-h: 44px;
    --brand: rgb(0,77,64);
    --content-bg: #f8f9fa;
    --scroll-pct: 0;
}

/* ==========================================================
   GLOBAL
   ========================================================== */

body{
    font-family: Arial, sans-serif;
    background-color: var(--content-bg);
    margin:0;
    padding:0;
}

*{ box-sizing:border-box; }
a{ text-decoration:none; }

.nav{ display:none !important; } /* altes Menü deaktiviert */


/* ==========================================================
   CONTENT SCROLLER
   ========================================================== */

.content{
    width:90%;
    margin:0 auto;

    padding-top: var(--header-h);
    padding-bottom: var(--footer-h);

    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
}
.content-main{
    width:95%;
    margin:5rem auto 5rem;

}
/* Scrollbar ausblenden – Scrollen bleibt möglich */
.content{
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE / Edge Legacy */
}

.content::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;                /* Chrome, Safari */
}


/* kleinere Geräte */
@media (max-width:700px){
    .content{ width:96%; }
}


/* ==========================================================
   HEADER
   ========================================================== */

#mHeader{
    position:fixed;
    top:0;
    left:0;
    right:0;

    height: var(--header-h);

    background: var(--brand);
    color:#fff;

    display:flex;
    justify-content:space-between;
    align-items:center;

    z-index:2000;

    transition: box-shadow .18s ease;
}

body.scrolled #mHeader{
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}

#mHeader::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    height:3px;
    width:100%;
    background:rgba(255,255,255,.9);
    transform-origin:left;
    transform:scaleX(var(--scroll-pct));
}

/* header left */
#mHeader .left{
    display:flex;
    align-items:center;
    gap:14px;
    margin-left:3rem;
}

#mHeader .burger{
    background:none;
    border:0;
    color:#fff;
    font-size:26px;
    cursor:pointer;
}

#mHeader .title{
    font-weight:700;
    white-space:nowrap;
}

#mHeader .title-mobile{
    display: none;
}


/* header right */
#mHeader .right{
    display:flex;
    align-items:center;
    gap:18px;
    margin-right: 3rem;
}

#mHeader .user{
    font-size:.85rem;
    white-space:nowrap;
}

#mHeader .logout-btn{
    color:#fff;
    display:flex;
    gap:6px;
    align-items:center;
    font-size:.85rem;
}

/* kleinere Geräte */
@media (max-width:700px){
    #mHeader .left{margin-left:0;}
    #mHeader .user{display: none;}
    #mHeader .logout-btn span{ display: none;}
    #mHeader .title{display: none;}
    #mHeader .title-mobile{display: block;}

}
@media (max-width:1024px){
    #mHeader .left{margin-left:1rem;}
}



/* ==========================================================
   DRAWER MENU
   ========================================================== */

#mOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transition:.2s;
    z-index:2100;
}

#mDrawer{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    height:100vh;
    background: var(--brand);
    color:#fff;
    transform:translateX(-105%);
    transition:.25s;
    z-index:2200;
    padding-top: var(--header-h);
}

body.drawer-open #mOverlay{
    opacity:1;
    pointer-events:auto;
}
body.drawer-open #mDrawer{
    transform:translateX(0);
}

#mDrawer ul{
    list-style:none;
    margin:0;
    padding:12px;
}

#mDrawer a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border-radius:8px;
    color:#fff;
    font-weight:600;
}

#mDrawer a:hover{
    background:rgba(255,255,255,.15);
}

#mDrawer a.active{
    background:rgba(255,255,255,.25);
}


/* ==========================================================
   FOOTER
   ========================================================== */

#mFooter{
    position:fixed;
    bottom:0;
    left:0;
    right:0;

    height: var(--footer-h);

    background: var(--brand);
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:13px;
    white-space:nowrap;
    z-index: 9999;
}


/* ==========================================================
   STICKY DATUM (CLEANING)
   ========================================================== */

.day-header{
    position: sticky;
    top: 0;                      /* <<< WICHTIG FIX */
    z-index: 50;

    margin:16px 0 10px 0;
    padding:10px 14px;
    border-radius:12px;

    background: rgba(248,249,250,.95);
    backdrop-filter: blur(6px);

    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 6px 14px rgba(0,0,0,.06);

    font-weight:800;
    font-size:18px;
}

.day-header::after{
    content:"";
    display:block;
    height:1px;
    background:rgba(0,0,0,.1);
    margin-top:8px;
}


/* ==========================================================
   DASHBOARD CARDS
   ========================================================== */

.dashboard {
    width: 70%;
    margin: 0 auto;
}
.dashboard-inline { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
    margin-top: 20px; 
}

/* Desktop: 3 pro Reihe */
.dashboard-inline .card {
    flex: 0 0 calc(33.333% - 14px);
}

/* Tablet: 2 pro Reihe */
@media (max-width: 900px) {
    .dashboard-inline .card {
        flex: 0 0 calc(50% - 10px);
    }
}

/* Handy: 1 pro Reihe */
@media (max-width: 500px) {
    .dashboard-inline .card {
        flex: 0 0 100%;
    }
}

/* Optional: Umsatz-Kachel hervorheben */



.card{
    background:#fff;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
    padding:20px;
    text-align:center;
    width:calc(50% - 10px);
}

.card:hover{
    transform:translateY(-4px);
}

@media (max-width:600px){
    .card{ width:100%; }
}


/* ==========================================================
   FORMS / TABLE BASICS
   ========================================================== */

input{
    width:90%;
    padding:10px;
    margin:8px 0;
}

button{
    padding:10px 20px;
    background: var(--brand);
    color:#fff;
    border-radius:4px;
    border:1px solid var(--brand);
    cursor:pointer;
}

button:hover{
    background:#fff;
    color: var(--brand);
}