
:root{--red:#e30613;--black:#111;--dark:#1c1c1f;--bg:#f2f3f5;--line:#e2e4e7;--green:#15803d;--amber:#9a6700}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#111}
button,input,select,textarea{font:inherit}.shell{max-width:600px;margin:auto;min-height:100vh;background:#fff}
.top{position:sticky;top:0;z-index:20;background:linear-gradient(145deg,#090909,#242427);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;gap:11px;align-items:center;min-width:0;overflow:hidden}.brand img{width:48px;height:48px;border-radius:13px;flex-shrink:0}.brand b{color:var(--red)}.brand>div{min-width:0}.brand .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#headerLogout{flex-shrink:0;width:40px;height:40px;padding:0;font-size:18px;line-height:1;border-radius:12px;display:flex;align-items:center;justify-content:center}
.muted{color:#74777d;font-size:12px}.top .muted{color:#bbb}.page{padding:15px 15px 88px}
.hero{background:#111;color:#fff;border-radius:18px;padding:18px}.hero h2{margin:0 0 5px}.hero p{margin:0;color:#bbb}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}.tile,.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px}
.tile{min-height:112px;text-align:left}.tile .ico{font-size:28px}.tile strong{display:block;margin-top:9px}.tile small{color:#74777d}
.card{margin:10px 0}.card h3{margin:0 0 7px}.row{display:flex;justify-content:space-between;align-items:center;gap:9px}
.pill{font-size:11px;font-weight:bold;padding:5px 8px;border-radius:999px}.red{background:#ffe4e6;color:#a4000b}.green{background:#e7f7ed;color:#146c37}.amber{background:#fff1c7;color:#805b00}.grey{background:#eee;color:#555}
.btn{border:0;border-radius:11px;padding:11px 13px;font-weight:bold;cursor:pointer}.primary{background:var(--red);color:#fff}.dark{background:#111;color:#fff}.light{background:#eef0f2}.full{width:100%}.btns{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.field{margin:9px 0}.field label{display:block;font-size:12px;margin-bottom:5px;color:#666}.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid #d9dce0;border-radius:10px;background:#fff}
.login{min-height:100vh;background:linear-gradient(155deg,#060606,#26262a);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:24px}.login img{width:120px;border-radius:25px;margin:0 auto 15px}.login h1{text-align:center;margin:0}.login h1 b{color:var(--red)}.login p{text-align:center;color:#bbb}.login .field label{color:#bbb}.login input,.login select{background:#171719;border-color:#444;color:#fff}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(600px,100%);display:grid;grid-template-columns:repeat(4,1fr);background:#111;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.nav button{border:0;background:none;color:#aaa;padding:9px 2px;font-size:11px}.nav button.active{color:#fff}.nav span{display:block;font-size:19px}
.section{display:flex;justify-content:space-between;align-items:center}.section h2{font-size:18px}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{background:#f3f4f6;border-radius:14px;padding:14px}.stat b{display:block;font-size:24px}
.banner{padding:11px 12px;border-radius:12px;margin:8px 0}.banner.red{border-left:4px solid #e30613}.banner.amber{border-left:4px solid #d49b00}
.sep{height:1px;background:#eee;margin:10px 0}


/* =========================
   V7 RESPONSIVE PLATFORM
   Windows Desktop / Android / iPhone
   ========================= */

:root{
  --desktop-max: 1440px;
  --sidebar-w: 250px;
}

body{
  min-height:100vh;
}

.shell{
  width:100%;
  max-width:600px;
  margin:0 auto;
  min-height:100vh;
  background:#fff;
}

.desktop-only{display:none!important}
.mobile-only{display:block}
.desktop-grid{display:block}
.desktop-sidebar{display:none}
.desktop-content{min-width:0}

/* iPhone / Android safe areas */
.top{
  padding-top:calc(14px + env(safe-area-inset-top));
}
.nav{
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
}

/* Better touch targets */
.btn,.tile,.nav button{
  min-height:44px;
}

/* Tablet */
@media (min-width: 760px){
  .shell{
    max-width:960px;
    box-shadow:0 0 30px #00000010;
  }
  .grid{
    grid-template-columns:repeat(3,1fr);
  }
  .stats{
    grid-template-columns:repeat(4,1fr);
  }
  .page{
    padding:20px 20px 95px;
  }
}

/* Desktop / Windows */
@media (min-width: 1050px){
  body{
    background:#e9ebee;
  }
  .shell{
    max-width:var(--desktop-max);
    min-height:100vh;
    margin:0 auto;
    display:grid;
    grid-template-columns:var(--sidebar-w) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    box-shadow:0 0 40px #00000012;
  }

  .top{
    grid-column:1 / 3;
    position:sticky;
    top:0;
    min-height:74px;
    display:flex;
    align-items:center;
    padding:12px 22px;
  }

  .page{
    grid-column:2;
    grid-row:2;
    padding:24px 28px 40px;
    overflow:auto;
    min-height:calc(100vh - 74px);
  }

  .nav{
    position:sticky;
    left:auto;
    bottom:auto;
    transform:none;
    width:auto;
    grid-column:1;
    grid-row:2;
    height:calc(100vh - 74px);
    top:74px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    background:#151517;
    padding:18px 10px;
    border-top:0;
  }

  .nav button{
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    border-radius:10px;
    margin:3px 0;
    padding:12px 13px;
    font-size:14px;
  }

  .nav button:hover{
    background:#252529;
  }

  .nav button.active{
    background:#2c2c31;
  }

  .nav span{
    display:inline-block;
    min-width:24px;
    font-size:20px;
    margin:0;
  }

  .desktop-only{display:block!important}
  .mobile-only{display:none!important}

  .grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }

  .tile{
    min-height:130px;
  }

  .stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
  }

  .stat{
    padding:18px;
  }

  .stat b{
    font-size:30px;
  }

  .hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:100px;
  }

  .desktop-table-wrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
  }

  .desktop-table{
    width:100%;
    border-collapse:collapse;
    min-width:900px;
  }

  .desktop-table th,
  .desktop-table td{
    padding:12px 10px;
    border-bottom:1px solid #eee;
    text-align:left;
    vertical-align:middle;
  }

  .desktop-table th{
    background:#f7f7f8;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.02em;
    position:sticky;
    top:0;
    z-index:2;
  }

  .desktop-table tr:hover td{
    background:#fafafa;
  }

  .desktop-actions{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }

  .desktop-section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
  }

  .card{
    box-shadow:0 2px 8px #00000006;
  }
}

/* Large desktop */
@media (min-width: 1400px){
  .page{
    padding:28px 36px 50px;
  }
  .grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

/* v8.18 Urlaub + Prüfungen */
.leave-week,.leave-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.leave-week{text-align:center;margin-top:12px;font-size:13px}.leave-day{min-height:52px;border:1px solid #d8d8dc;border-radius:10px;background:#fff;cursor:pointer}.leave-day.blank{border:0;background:transparent}.leave-day.busy{background:#ffd7d7;border-color:#e96c6c}.leave-day.pending{background:#fff0bd;border-color:#dbab20}.leave-day.own-open{background:#ffe19a;border-color:#d18e00}.leave-day.own-ok{background:#d9f5df;border-color:#57ad6b}.leave-legend{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0;font-size:13px}.ld{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px}.ld.busy{background:#e96c6c}.ld.pending{background:#dbab20}.ld.own-open{background:#f0b233}.ld.own-ok{background:#57ad6b}.inspection-grid{display:grid;grid-template-columns:minmax(230px,1fr) minmax(200px,1fr);gap:14px;align-items:center;margin:14px 0}@media(max-width:720px){.inspection-grid{grid-template-columns:1fr}.leave-day{min-height:42px}}


/* v8.21 Urlaubskonto Hessen */
.leave-day.holiday{background:#dcecff;border-color:#6da8df}
.leave-day small{display:block;font-size:9px;line-height:1.05;margin-top:3px;font-weight:500}
.ld.holiday{background:#6da8df}
.leave-account-grid{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:10px;margin-top:12px}
.leave-account{border:1px solid #ddd;border-radius:12px;padding:12px;text-align:center;background:#fafafa}
.leave-account span{display:block;font-size:12px;color:#666;margin-bottom:4px}
.leave-account b{font-size:24px}
.leave-account.strong{border-width:2px;background:#f4fbf5}
.driver-leave-line{margin-top:5px;font-size:13px}
@media(max-width:720px){.leave-account-grid{grid-template-columns:repeat(2,1fr)}}


/* v8.22 TST Rückmeldungen */
.feedback-upload{margin-top:12px;text-align:center;cursor:pointer}
.banner.green{background:#e8f6eb;border-left:4px solid #4aa563}

/* v8.23 Mehrseitige Tagesabschluss-Dokumente */
.daydoc-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #ddd;border-radius:12px;padding:12px;margin:8px 0}.daydoc-upload{margin-top:12px;text-align:center;cursor:pointer}

/* v8.24 Fahrer-Wochenübersicht */
.weekstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:10px 0 16px}.weekday{border:0;border-radius:12px;padding:10px 5px;display:flex;flex-direction:column;gap:4px;cursor:pointer}.weekday span{font-size:12px}.wgreen{background:#dff3e4}.wred{background:#ffe1e1}.wblue{background:#dfeeff}.wgrey{background:#ededed}@media(max-width:700px){.weekstrip{grid-template-columns:repeat(3,1fr)}}

/* v8.25 Ersatzfahrzeug */
.driver-vehicle-card{border-left:4px solid #5c8fd6}

/* v8.28 Fahreransicht Fix */
.driver-vehicle-card{margin-bottom:12px}

/* v8.29 Wochen/Tagesstatus Fix */

/* v8.30 Fahrer Woche Tagesversand */

/* v8.31 Tagesstatus Grün */
