/* =========================================================
   Enev-kit Admin — Glass / Soft UI
   (no Bootstrap required)
========================================================= */

/* -------------------------
   Theme tokens
------------------------- */
:root{
    --brand: #169837;
    --brand-dark: #0f6f28;
    --brand-soft: #e9f7ee;

    --text: #0b1b10;
    --muted: rgba(11, 27, 16, .66);

    --card: rgba(255,255,255,.72);
    --card-strong: rgba(255,255,255,.86);

    --border: rgba(22,152,55,.18);
    --border-strong: rgba(22,152,55,.26);

    --shadow: 0 18px 50px rgba(0,0,0,.10);
    --shadow-soft: 0 10px 28px rgba(0,0,0,.08);

    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;

    --container: 1120px;
}

/* -------------------------
   Reset / base
------------------------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

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

    /* Soft gradient with subtle depth */
    background:
        radial-gradient(900px 540px at 18% -10%, rgba(22,152,55,.22), transparent 60%),
        radial-gradient(700px 520px at 92% 0%, rgba(15,111,40,.14), transparent 58%),
        radial-gradient(900px 620px at 40% 115%, rgba(22,152,55,.10), transparent 60%),
        linear-gradient(180deg, var(--brand-soft) 0%, #ffffff 42%, #ffffff 100%);

    overflow-x: hidden;
}

/* Tiny "noise" feel (cheap but effective) */
body::before{
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .28;
    mix-blend-mode: overlay;
}

a{ color: inherit; }

/* -------------------------
   Layout shell
------------------------- */
.app-shell{
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* -------------------------
   Header (glass)
------------------------- */
.app-header{
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(22,152,55,.14);
    background: rgba(255,255,255,.52);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
}

.header-actions{ display:flex; align-items:center; gap:.6rem; }

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
}

.brand img{
    height:48px;
    width:auto;
    display:block;
}
@media (max-width: 520px){
    .brand img{ height: 46px; width: auto; }
}

.brand-tag{
    font-weight:700;
    letter-spacing:.2px;
    padding:8px 12px;
    border-radius:999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.brand-text{ display: grid; line-height: 1.05; }
.brand-title{
    font-weight: 900;
    letter-spacing: .2px;
}
.brand-sub{
    font-weight: 700;
    color: var(--muted);
    margin-top: .1rem;
}

body.is-auth .app-header{
    background: rgba(255,255,255,.52);
    border-bottom-color: rgba(22,152,55,.14);
}

/* -------------------------
   Auth page
------------------------- */
.auth-page{
    flex: 1;
    display: grid;
    place-items: center;
    padding: 3rem 1rem 2.2rem;
}

body.is-auth .auth-page{
    padding-top: 2.5rem;
}

.auth-card{
    width: min(480px, 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;

    background: var(--card);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    position: relative;
}

.auth-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius: inherit;
    pointer-events:none;
    background:
        radial-gradient(520px 240px at 20% 0%, rgba(22,152,55,.22), transparent 55%),
        radial-gradient(520px 280px at 90% 20%, rgba(15,111,40,.14), transparent 60%);
    opacity: .8;
}

.auth-body{
    position: relative;
    padding: 1.35rem 1.35rem 1.2rem;
    background: rgba(255,255,255,.50);
}

.auth-headline{ margin-bottom: .9rem; }

.auth-title{
    margin: 0;
    font-size: 1.7rem;
    letter-spacing: -.3px;
}

.auth-subtitle{
    margin: .25rem 0 0;
    color: var(--muted);
    line-height: 1.4;
}

/* -------------------------
   Alert
------------------------- */
.alert-auth{
    border-radius: var(--radius-md);
    border: 1px solid rgba(220,53,69,.25);
    background: rgba(220,53,69,.07);
    color: #842029;
    padding: .75rem .85rem;
    margin: .9rem 0 .95rem;
}

/* -------------------------
   Minimal form system (Bootstrap-ish)
------------------------- */
.auth-form{ margin-top: .15rem; }

/* Field spacing (username/password etc.) */
.auth-form .form-floating,
.auth-form .mb-3,
.auth-form .form-group{
    margin-bottom: 1.15rem !important;
}
.auth-form .form-floating:last-child,
.auth-form .mb-3:last-child,
.auth-form .form-group:last-child{
    margin-bottom: 0 !important;
}

.form-control{
    width: 100%;
    padding: 1.05rem 1.05rem;
    font-size: 1rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(22,152,55,.22);
    background: rgba(255,255,255,.78);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.form-control:focus{
    border-color: rgba(22,152,55,.55);
    background: rgba(255,255,255,.92);
    box-shadow: 0 0 0 .26rem rgba(22,152,55,.14);
}

.form-floating{
    position: relative;
}

.form-floating > label{
    position: absolute;
    /*left: 1.05rem;*/
    /*top: 1.0rem;*/
    color: rgba(11,27,16,.62);
    pointer-events: none;
    transform-origin: left top;
    transition: transform .14s ease, opacity .14s ease, top .14s ease;
}

/* Floating label behavior:
   placeholder=" " is important so :placeholder-shown works */
.form-floating > .form-control::placeholder{ color: transparent; }
.form-floating > .form-control:placeholder-shown + label{
    transform: translateY(0) scale(1);
    opacity: 1;
}
.form-floating > .form-control:not(:placeholder-shown) + label,
.form-floating > .form-control:focus + label{
    top: .55rem;
    transform: translateY(-.65rem) scale(.86);
    opacity: .85;
}

/* Password toggle */
.pw-wrap{ position: relative; }
.pw-toggle{
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(22,152,55,.22);
    background: rgba(255,255,255,.62);
    border-radius: 999px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.pw-toggle:hover{
    background: rgba(255,255,255,.86);
    border-color: rgba(22,152,55,.36);
    transform: translateY(-50%) scale(1.02);
}
.pw-toggle.is-active{
    background: rgba(22,152,55,.12);
    border-color: rgba(22,152,55,.45);
}
.pw-toggle-icon{ font-size: 1.05rem; line-height: 1; }

/* -------------------------
   Buttons (soft, premium)
------------------------- */
.btn{
    border: 0;
    cursor: pointer;
    font: inherit;
}

.btn-auth{
    border-radius: 999px;
    padding: .85rem 1.2rem;
    font-weight: 900;
    letter-spacing: .2px;
    color: #fff;
    background: linear-gradient(180deg, rgba(22,152,55,1) 0%, rgba(15,111,40,1) 100%);
    box-shadow: 0 16px 28px rgba(15,111,40,.22);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    min-width: 150px;
}

.btn-auth:hover{
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(15,111,40,.26);
}
.btn-auth:active{
    transform: translateY(0);
    box-shadow: 0 12px 22px rgba(15,111,40,.22);
}

.auth-actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.auth-hint{
    color: var(--muted);
    font-weight: 650;
    font-size: .95rem;
}

.auth-footnote{
    margin: 1.05rem 0 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.45;
}

/* -------------------------
   Reduced motion
------------------------- */
@media (prefers-reduced-motion: reduce){
    *{ transition: none !important; }
    body::before{ display:none; }
}

.glass-nav{
    background: rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.brand-logo{ height: 44px; width: auto; display:block; }

.navbar .nav-link{
    color: rgba(255,255,255,.85);
    border-radius: 999px;
    padding: .5rem .85rem;
}
.navbar .nav-link:hover{ background: rgba(255,255,255,.10); color:#fff; }
.navbar .nav-link.active{ background: rgba(255,255,255,.14); color:#fff; }

.nav-logout{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
}

.glass-modal{
    background: rgba(20, 24, 28, .72);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 18px;
}

.glass-nav {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* sorgt für sichtbaren Toggler */
.glass-nav.navbar-dark .navbar-toggler { border-color: rgba(255,255,255,.25); }
.glass-nav.navbar-dark .navbar-toggler-icon { filter: invert(1); }


/* =========================================================
   Header: two-row navigation (Bootstrap friendly)
========================================================= */
.app-header.glass-header{
    position: sticky;
    top: 0;
    z-index: 1030; /* above content */
    background: rgba(8, 12, 16, .55);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.header-sep{
    height: 1px;
    background: rgba(255,255,255,.10);
}

.brand-logo{
    height: 38px;
    width: auto;
    display: block;
}

.brand-title{
    font-weight: 800;
    letter-spacing: .2px;
    color: rgba(255,255,255,.92);
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
}

.nav-scroller{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

.nav-row .nav-pills .nav-link{
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: .45rem .9rem;
    white-space: nowrap;
}
.nav-row .nav-pills .nav-link:hover{
    color: #fff;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
}
.nav-row .nav-pills .nav-link.active{
    color: #0b1b10;
    background: rgba(255,255,255,.88);
    border-color: rgba(255,255,255,.0);
}

.glass-modal{
    background: rgba(16, 20, 24, .78);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.brand-demo{
    font-weight: 700;
    letter-spacing: .2px;
    font-size: 1.05rem;
    line-height: 1;
    color: rgba(0,0,0,.92);
}

.nav-cta{
    border-radius: 999px;
    padding: .45rem .95rem;
    font-weight: 700;
    letter-spacing: .2px;
    transition: all .18s ease;

    /* INAKTIV: dunkler & leicht grün (Text weiß) */
    background: rgba(22, 152, 55, 0.28);
    border: 1px solid rgba(22, 152, 55, 0.55);
    color: #fff;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.nav-cta:hover{
    background: rgba(22, 152, 55, 0.38);
    border-color: rgba(22, 152, 55, 0.75);
    color: #fff;

    /* statt Bewegung: subtiler Glow */
    box-shadow: 0 8px 20px rgba(15, 111, 40, .28);
}

.nav-cta.is-active{
    background: linear-gradient(180deg, #169837, #0f6f28);
    border: 1px solid rgba(255,255,255,.16);
    color: #fff;
    box-shadow: 0 10px 26px rgba(15, 111, 40, .40);
}

.nav-modal-btn{
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: #fff;

    /* auffällig: kräftiger Gradient + Glow */
    background: linear-gradient(135deg, #1dd65a, #169837 45%, #0f6f28);
    border: 1px solid rgba(255,255,255,.18);
    /*box-shadow:*/
    /*    0 10px 26px rgba(15, 111, 40, .42),*/
    /*    0 0 0 3px rgba(22, 152, 55, .18);*/
}

.nav-modal-btn:hover{
    color: #fff;
    background: linear-gradient(135deg, #27e568, #169837 40%, #0c5e21);
    /*box-shadow:*/
    /*    0 14px 34px rgba(15, 111, 40, .52),*/
    /*    0 0 0 3px rgba(22, 152, 55, .26);*/
}

.nav-modal-btn:active{
    filter: brightness(.96);
}

.nav-logout-btn{
    border-radius: 999px;
    padding: .5rem 1rem;
    font-weight: 800;
    letter-spacing: .2px;
    color: rgba(255,255,255,.92);

    /* red tint glass */
    background: rgba(220, 53, 69, .45);
    border: 1px solid rgba(220, 53, 69, .32);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nav-logout-btn:hover{
    color: #fff;
    background: rgba(220, 53, 69, .65);
    border-color: rgba(220, 53, 69, .48);
    box-shadow: 0 10px 22px rgba(220, 53, 69, .22);
}

.nav-logout-btn:active{
    filter: brightness(.98);
}

/* === Header: always like login === */
.app-header,
.app-header.glass-header,
.glass-nav{
    background: rgba(255,255,255,.52) !important;
    border-bottom: 1px solid rgba(22,152,55,.14) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

:root{
    --page-max: 1180px;
    --page-pad: 18px;
}

.main-wrap{
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 22px var(--page-pad) 40px;
}

/* falls dein content direkt im body / app-shell liegt */
.app-shell > main,
.app-shell > .content,
.app-shell > .container-fluid{
    max-width: var(--page-max);
    margin: 0 auto;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
}

.header-wrap{
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 10px var(--page-pad);
}

.header-wrap{
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 10px var(--page-pad);
}

.modal-backdrop.show{
    opacity: .35;                 /* weniger düster */
}

.modal-content{
    background: var(--card, #fff);
    color: var(--text, #111);
    border: 1px solid var(--border, rgba(0,0,0,.1));
    border-radius: 16px;
    box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.12));
}

/* Header / Footer wie Card */
.modal-header,
.modal-footer{
    border-color: var(--border, rgba(0,0,0,.08));
    background: var(--card, #fff);
}

.modal-title{
    color: var(--text, #111);
    font-weight: 700;
}

/* Close button sichtbar auf hellem Hintergrund */
.modal-header .btn-close{
    filter: none;                 /* wichtig, falls Bootstrap dark-mode filter setzt */
    opacity: .7;
}
.modal-header .btn-close:hover{ opacity: 1; }

/* Modal body spacing + text */
.modal-body{
    color: var(--text, #111);
}

/* Form controls im Modal: hell, sauber, brand-border */
.modal .form-control,
.modal .form-select{
    background: #fff;
    color: var(--text, #111);
    border: 1px solid var(--border, rgba(0,0,0,.12));
    border-radius: 12px;
}
.modal .form-control:focus,
.modal .form-select:focus{
    border-color: var(--brand, #169837);
    box-shadow: 0 0 0 .2rem rgba(22, 152, 55, .18);
}

/* Optional: Buttons im Modal an Brand anpassen */
.modal .btn-primary{
    background: var(--brand, #169837);
    border-color: var(--brand, #169837);
}
.modal .btn-primary:hover{
    background: var(--brand-dark, #0f6f28);
    border-color: var(--brand-dark, #0f6f28);
}

/* Mehr Abstand zwischen Floating-Label und Eingabewert */
.form-floating > .form-control,
.form-floating > .form-select {
    padding-top: 2.1rem;     /* Wert weiter nach unten */
    padding-bottom: .75rem;
    line-height: 1.25;
}

/* Label etwas „höher“ und kleiner */
.form-floating > label {
    padding: .55rem .9rem;
    font-size: .78rem;
    opacity: .75;
}

/* Wenn gefloatet (Feld gefüllt/fokussiert): Label noch etwas höher setzen */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(.85) translateY(-.55rem) translateX(.15rem);
}

/* Date inputs im floating: mehr Abstand zwischen Label und Datum */
.form-floating > input[type="date"].form-control {
    padding-top: 2.1rem;
    padding-bottom: .75rem;
    line-height: 1.25;
}

/* Label etwas dezenter */
.form-floating > label {
    opacity: .75;
    font-weight: 600;
    font-size: .78rem;
}

/* Footer schöner ausrichten */
.modal-footer{
    justify-content: flex-end;
    gap: .5rem;
}

/* Brand Button */
.btn-brand{
    background: var(--brand, #169837);
    border: 1px solid var(--brand, #169837);
    color: #fff;
    border-radius: 14px;
    padding: .65rem 1.1rem;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 10px 20px rgba(0,0,0,.10);
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn-brand:hover{
    background: var(--brand-dark, #0f6f28);
    border-color: var(--brand-dark, #0f6f28);
    color: #fff;
    box-shadow: 0 14px 26px rgba(0,0,0,.14);
    transform: translateY(-1px);
}
.btn-brand:active{
    transform: translateY(0);
    box-shadow: 0 8px 16px rgba(0,0,0,.10);
}
.btn-brand:focus{
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(22, 152, 55, .20);
}

/* Disabled */
.btn-brand:disabled,
.btn-brand.disabled{
    opacity: .65;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Optional: Ghost Button (Abbrechen) */
.btn-ghost{
    background: transparent;
    border: 1px solid var(--border, rgba(22,152,55,.25));
    color: var(--text, #0b1b10);
    border-radius: 14px;
    padding: .65rem 1.1rem;
    font-weight: 700;
}
.btn-ghost:hover{
    background: var(--brand-soft, #e9f7ee);
}

.modal-footer{
    padding: 1rem 1.25rem 1.25rem;
    justify-content: flex-end;
    gap: .75rem;
}

.modal-body{ padding: 1.25rem; }
.modal-footer{ padding: 1rem 1.25rem 1.25rem; }

/* Flash-Bereich im Modal */
.modal .modal-flash{
    border-radius: 14px;
    font-weight: 600;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border: none;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* Success an dein Brand-Grün anpassen */
.modal .alert-success{
    background: var(--brand-soft, #e9f7ee);
    color: var(--brand-dark, #0f6f28);
}

/* Danger etwas moderner */
.modal .alert-danger{
    background: #fdeaea;
    color: #b02a37;
}

/* Warning */
.modal .alert-warning{
    background: #fff6da;
    color: #9a6b00;
}

/* Close Button im Modal hübscher */
.modal .alert .btn-close{
    opacity: .6;
}
.modal .alert .btn-close:hover{
    opacity: 1;
}

.modal .modal-flash{
    border-radius: 14px;
    font-weight: 600;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border: none;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* invalid feedback unter floating input schön */
.form-floating .invalid-feedback{
    margin-top: .35rem;
}

/* invalid outline im Stil */
.form-control.is-invalid{
    border-color: #dc3545;
}
.form-control.is-invalid:focus{
    box-shadow: 0 0 0 .25rem rgba(220,53,69,.15);
}

.stats-table{
    background: var(--card, #fff);
    border: 1px solid var(--border, rgba(0,0,0,.08));
    border-radius: 16px;
    overflow: hidden;              /* rundungen wirken auf table */
    box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.07));
}

.stats-table thead th{
    font-size: .8rem;
    color: var(--muted);
    background: var(--brand-soft, #e9f7ee);
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}

.stats-table td, .stats-table th{
    padding: .65rem .85rem;
}

.stats-table caption{
    caption-side: bottom;
    padding: .6rem .85rem;
}

.card {
    border-radius: 16px;
}

.table td {
    padding: 0.6rem 0.75rem;
}

.table-success {
    background: rgba(22, 152, 55, 0.08);
}

.table-danger {
    background: rgba(220, 53, 69, 0.08);
}

#daterange {
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(22,152,55,0.2);
}

#daterange:focus {
    border-color: #169837;
    box-shadow: 0 0 0 0.15rem rgba(22,152,55,0.15);
}