:root{
  --babo-blue:#15395f;
  --babo-blue-dark:#0f2f52;
  --babo-gold:#c88413;
  --babo-ink:#1d1d1f;
  --babo-text:#2b2b2f;
  --babo-muted:#6e6e73;
  --babo-bg:#f5f5f7;
  --babo-panel:#ffffff;
  --babo-line:#e5e5ea;
  --babo-line-strong:#d6d6dc;
  --babo-green:#157347;
  --babo-red:#b42318;
  --babo-orange:#9a650f;
  --babo-radius:18px;
  --babo-radius-lg:24px;
  --babo-shadow:0 10px 30px rgba(0,0,0,.055);
  --babo-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Arial,sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  background:var(--babo-bg);
}

body{
  background:var(--babo-bg)!important;
  color:var(--babo-ink)!important;
  font-family:var(--babo-font)!important;
  letter-spacing:0!important;
}

a{
  color:inherit;
}

h1,h2,h3,h4,p{
  letter-spacing:0!important;
}

h1{
  color:var(--babo-ink)!important;
  font-size:clamp(30px,3.2vw,44px)!important;
  line-height:1.08!important;
  font-weight:760!important;
  margin-top:0;
}

h2{
  color:var(--babo-ink)!important;
  font-size:clamp(22px,2vw,30px)!important;
  line-height:1.15!important;
  font-weight:720!important;
}

h3{
  color:var(--babo-ink)!important;
  font-size:19px!important;
  line-height:1.22!important;
  font-weight:700!important;
}

p,
small,
label,
.muted,
.sub,
.small,
.panel-note,
.dashboard-subtitle,
.sync-note{
  color:var(--babo-muted)!important;
}

/* Shell / admin navigation */
.sidebar{
  width:236px!important;
  padding:22px 16px!important;
  background:rgba(251,251,253,.92)!important;
  color:var(--babo-ink)!important;
  border-right:1px solid var(--babo-line)!important;
  box-shadow:none!important;
  backdrop-filter:saturate(180%) blur(18px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(18px)!important;
}

.sidebar .logo{
  font-size:0!important;
  margin:0 0 12px!important;
  padding:8px 10px 18px!important;
  border-bottom:1px solid var(--babo-line)!important;
}

.sidebar .logo:before{
  content:"BABO";
  display:block;
  color:var(--babo-ink);
  font-size:20px;
  line-height:1;
  font-weight:780;
}

.sidebar .logo:after{
  content:"Operations";
  display:block;
  color:var(--babo-muted);
  font-size:12px;
  font-weight:600;
  margin-top:5px;
}

.sidebar .logo span{
  display:none!important;
}

.workspace-title{
  padding:8px 10px 18px!important;
  margin-bottom:10px!important;
  border-bottom:1px solid var(--babo-line)!important;
}

.workspace-title strong{
  color:var(--babo-ink)!important;
  font-size:17px!important;
  font-weight:740!important;
}

.workspace-title span{
  color:var(--babo-muted)!important;
  font-size:12px!important;
  font-weight:500!important;
}

.menu{
  gap:4px!important;
}

.menu-link,
.menu-toggle,
.logout a{
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#3a3a3c!important;
  font-size:13px!important;
  font-weight:620!important;
  box-shadow:none!important;
}

.menu-link:hover,
.menu-toggle:hover,
.logout a:hover{
  background:#eceff3!important;
  color:var(--babo-blue)!important;
  transform:none!important;
}

.menu-link.active,
.submenu a.active{
  background:var(--babo-blue)!important;
  color:#fff!important;
}

.submenu{
  margin:2px 0 8px 12px!important;
  padding-left:10px!important;
  border-left:1px solid var(--babo-line-strong)!important;
}

.submenu a{
  color:var(--babo-muted)!important;
  padding:7px 9px!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:560!important;
}

.submenu a:hover{
  background:#f0f2f5!important;
  color:var(--babo-blue)!important;
  transform:none!important;
}

.logout{
  border-top:1px solid var(--babo-line)!important;
}

.main{
  margin-left:236px!important;
  padding:28px!important;
  background:transparent!important;
}

.mobile-topbar{
  height:56px!important;
  background:rgba(251,251,253,.92)!important;
  color:var(--babo-ink)!important;
  border-bottom:1px solid var(--babo-line)!important;
  backdrop-filter:saturate(180%) blur(18px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(18px)!important;
}

.mobile-topbar span{
  font-size:0!important;
}

.mobile-topbar span:before{
  content:"BABO";
  color:var(--babo-ink);
  font-size:16px;
  font-weight:760;
}

/* Layout */
.container{
  max-width:1280px!important;
  margin:0 auto!important;
  padding:30px 22px 110px!important;
}

.app{
  max-width:1120px!important;
  margin:0 auto!important;
  padding:26px 20px 110px!important;
  background:transparent!important;
}

.page-header,
.topbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
}

.header{
  background:#fff!important;
  color:var(--babo-ink)!important;
  border:1px solid var(--babo-line)!important;
  border-radius:var(--babo-radius-lg)!important;
  padding:28px 30px!important;
  box-shadow:var(--babo-shadow)!important;
}

.header h1{
  color:var(--babo-ink)!important;
  font-size:clamp(30px,3vw,42px)!important;
}

.header p{
  color:var(--babo-muted)!important;
  font-size:15px!important;
  font-weight:500!important;
}

.cards,
.stats,
.cards3,
.summary,
.quick,
.quick-grid,
.dashboard-grid,
.grid,
.summary-grid{
  gap:14px!important;
}

/* Surfaces */
.dashboard-box,
.table-box,
.card,
.stat-card,
.content-box,
.panel,
.section,
.upload-box,
.stat,
.sum,
.dark-card,
.quick-card,
.driver-summary,
.modal,
.modal-content,
.summary-card,
.balance-item,
.request,
.box,
.form-box{
  background:#fff!important;
  color:var(--babo-ink)!important;
  border:1px solid var(--babo-line)!important;
  border-radius:var(--babo-radius)!important;
  box-shadow:none!important;
}

.dashboard-box,
.table-box,
.content-box,
.panel,
.section,
.upload-box,
.modal,
.modal-content{
  box-shadow:var(--babo-shadow)!important;
}

.card,
.stat,
.sum,
.quick-card,
.dark-card{
  padding:18px!important;
}

.card p,
.stat span,
.sum span{
  color:var(--babo-muted)!important;
  font-size:12px!important;
  text-transform:none!important;
  letter-spacing:0!important;
  font-weight:580!important;
}

.card h2,
.stat h2,
.sum h2,
.big-number,
.msg-number,
.km-main,
.vehicle-title{
  color:var(--babo-ink)!important;
  font-size:clamp(24px,2.8vw,34px)!important;
  font-weight:760!important;
  letter-spacing:0!important;
}

/* Driver dashboard */
.app .hero,
.hero{
  background:#fff!important;
  color:var(--babo-ink)!important;
  border:1px solid var(--babo-line)!important;
  border-radius:24px!important;
  box-shadow:var(--babo-shadow)!important;
}

.app .hero{
  grid-template-columns:1.45fr .75fr!important;
}

.hero-text{
  padding:34px!important;
}

.hero-text .hello{
  color:var(--babo-muted)!important;
  font-size:17px!important;
  font-weight:560!important;
}

.hero-text h1{
  color:var(--babo-ink)!important;
  font-size:clamp(38px,5vw,58px)!important;
  font-weight:780!important;
}

.role,
.gold-text{
  color:var(--babo-gold)!important;
}

.progress{
  background:#ececf0!important;
}

.progress div{
  background:var(--babo-blue)!important;
}

.portrait{
  border:3px solid #fff!important;
  box-shadow:0 12px 32px rgba(0,0,0,.14)!important;
}

.quick-card{
  min-height:94px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  color:var(--babo-ink)!important;
  font-size:13px!important;
  font-weight:660!important;
  transition:background-color .16s ease!important;
}

.quick-card:hover{
  background:#f9f9fb!important;
  transform:none!important;
}

.quick-card .qicon,
.card-icon{
  width:38px!important;
  height:38px!important;
  border-radius:50%!important;
  background:#eef2f6!important;
  color:var(--babo-blue)!important;
  box-shadow:none!important;
}

/* Forms */
input,
select,
textarea,
.search-box{
  background:#fff!important;
  border:1px solid var(--babo-line)!important;
  border-radius:12px!important;
  color:var(--babo-ink)!important;
  box-shadow:none!important;
  font-family:var(--babo-font)!important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(21,57,95,.48)!important;
  outline:3px solid rgba(21,57,95,.11)!important;
}

.input-group label,
label{
  color:var(--babo-text)!important;
  font-size:13px!important;
  font-weight:620!important;
  text-transform:none!important;
  letter-spacing:0!important;
}

/* Buttons */
button,
.btn,
.quick-btn,
.action-btn,
.profile-action,
.save-btn,
.small-btn,
.install-btn,
.gold-btn,
.button-link{
  min-height:40px!important;
  border-radius:12px!important;
  border:1px solid var(--babo-blue)!important;
  background:var(--babo-blue)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:660!important;
  letter-spacing:0!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease!important;
}

button:hover,
.btn:hover,
.quick-btn:hover,
.action-btn:hover,
.profile-action:hover,
.save-btn:hover,
.small-btn:hover,
.install-btn:hover,
.gold-btn:hover,
.button-link:hover{
  background:var(--babo-blue-dark)!important;
  border-color:var(--babo-blue-dark)!important;
  color:#fff!important;
  transform:none!important;
  filter:none!important;
}

.btn.light,
.small-btn.light,
.btn.ghost,
.cancel-btn,
.quick-btn,
.install-btn{
  background:#fff!important;
  border:1px solid var(--babo-line-strong)!important;
  color:var(--babo-blue)!important;
}

.btn.light:hover,
.small-btn.light:hover,
.btn.ghost:hover,
.cancel-btn:hover,
.quick-btn:hover,
.install-btn:hover{
  background:#f5f5f7!important;
  border-color:var(--babo-line-strong)!important;
  color:var(--babo-blue)!important;
}

.btn.green,
.small-btn.green{
  background:var(--babo-green)!important;
  border-color:var(--babo-green)!important;
  color:#fff!important;
}

.btn.red,
.small-btn.red,
.danger{
  background:var(--babo-red)!important;
  border-color:var(--babo-red)!important;
  color:#fff!important;
}

/* Tables / calendar */
table{
  border-collapse:separate!important;
  border-spacing:0!important;
}

.table th,
.table td,
.task-table th,
.task-table td,
.week-table th,
.week-table td,
table th,
table td{
  border-color:var(--babo-line)!important;
}

.table th,
.task-table th,
.week-table th,
table th{
  background:#fbfbfd!important;
  color:var(--babo-muted)!important;
  font-size:12px!important;
  font-weight:660!important;
  text-transform:none!important;
  letter-spacing:0!important;
}

.task-row,
.warning-row,
.week-cell,
.day,
.check,
.total,
.empty{
  background:#fff!important;
  border:1px solid var(--babo-line)!important;
  border-radius:14px!important;
  box-shadow:none!important;
}

.day:hover,
.day.selected{
  border-color:rgba(21,57,95,.42)!important;
  background:#f8fbff!important;
}

.weekday{
  color:var(--babo-muted)!important;
  font-weight:660!important;
  letter-spacing:0!important;
}

.total{
  color:var(--babo-ink)!important;
  text-align:left!important;
}

.total h2{
  color:var(--babo-blue)!important;
}

/* Status labels */
.task-row strong,
.status-pill,
.pill,
.badge{
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:660!important;
  letter-spacing:0!important;
}

.task-row strong{
  background:var(--babo-blue)!important;
  color:#fff!important;
}

.status-pill,
.pill,
.badge{
  background:#eef2f6!important;
  color:var(--babo-blue)!important;
}

.status-pill.ok,
.pill.approved,
.badge.green,
.week-cell.normal{
  background:#e8f6ee!important;
  color:var(--babo-green)!important;
}

.status-pill.warn,
.pill.requested,
.badge.orange,
.week-cell.saturday{
  background:#fff4df!important;
  color:var(--babo-orange)!important;
}

.status-pill.danger,
.pill.rejected,
.pill.cancelled,
.badge.red,
.week-cell.krank{
  background:#ffeceb!important;
  color:var(--babo-red)!important;
}

.week-cell.shuttle,
.badge.purple{
  background:#edf0ff!important;
  color:#3d4a91!important;
}

.week-cell.urlaub,
.badge.blue{
  background:#eaf3ff!important;
  color:var(--babo-blue)!important;
}

.success,
.success-box{
  background:#e8f6ee!important;
  color:var(--babo-green)!important;
  border:1px solid #cfe9d9!important;
}

.error,
.error-box{
  background:#ffeceb!important;
  color:var(--babo-red)!important;
  border:1px solid #ffd1cc!important;
}

.alert-box,
.notice,
.invite-box{
  background:#fff8ec!important;
  color:#73501a!important;
  border:1px solid #f2dfbd!important;
}

/* Auth pages */
body:has(.login-box),
body:has(.register-box),
body:has(.box form[id*="approve" i]){
  min-height:100vh!important;
  padding:32px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(180deg,#fbfbfd 0%,#f5f5f7 100%)!important;
}

.login-box,
.register-box,
.box:has(form[id*="approve" i]){
  width:min(100%,460px)!important;
  padding:40px!important;
  border-radius:24px!important;
  background:#fff!important;
  border:1px solid var(--babo-line)!important;
  box-shadow:var(--babo-shadow)!important;
}

.register-box{
  width:min(100%,540px)!important;
}

.login-box .logo,
.register-box .logo,
.box:has(form[id*="approve" i]) .logo{
  margin-bottom:26px!important;
  text-align:left!important;
}

.login-box .logo h1,
.register-box .logo h1,
.box:has(form[id*="approve" i]) .logo h1{
  color:var(--babo-ink)!important;
  font-size:clamp(34px,5vw,48px)!important;
  line-height:.98!important;
  font-weight:760!important;
}

.login-box .logo h1::after,
.register-box .logo h1::after,
.box:has(form[id*="approve" i]) .logo h1::after{
  content:" Logistik";
}

.login-box .logo span,
.register-box .logo span,
.box:has(form[id*="approve" i]) .logo span{
  display:block!important;
  margin-top:10px!important;
  color:var(--babo-gold)!important;
  font-size:0!important;
  line-height:1.25!important;
  font-weight:520!important;
  letter-spacing:0!important;
}

.login-box .logo span::before{
  content:"Anmelden und weiterarbeiten.";
  font-size:18px;
}

.register-box .logo span::before{
  content:"Ein Konto fuer das BABO Team erstellen.";
  font-size:18px;
}

.box:has(form[id*="approve" i]) .logo span::before{
  content:"Registrierung sicher aktivieren.";
  font-size:18px;
}

.login-box .input-group input,
.register-box .input-group input,
.register-box .input-group select,
.box:has(form[id*="approve" i]) .input-group input{
  height:50px!important;
  border-radius:12px!important;
  padding:0 15px!important;
  font-size:15px!important;
}

.login-box .btn,
.register-box .btn,
.box:has(form[id*="approve" i]) .btn{
  width:100%!important;
  height:50px!important;
  margin-top:10px!important;
}

.register-link,
.login-link{
  color:var(--babo-muted)!important;
  font-size:14px!important;
}

.register-link a,
.login-link a{
  color:var(--babo-blue)!important;
  font-weight:660!important;
}

.back-home{
  position:fixed!important;
  top:22px!important;
  left:22px!important;
  min-height:40px!important;
  padding:0 16px!important;
  background:#fff!important;
  border:1px solid var(--babo-line)!important;
  color:var(--babo-ink)!important;
  border-radius:999px!important;
}

.back-home:hover{
  background:var(--babo-blue)!important;
  border-color:var(--babo-blue)!important;
  color:#fff!important;
}

/* Bottom driver navigation */
.bottom-nav{
  left:50%!important;
  bottom:14px!important;
  width:min(96%,760px)!important;
  height:66px!important;
  background:rgba(251,251,253,.92)!important;
  border:1px solid var(--babo-line)!important;
  border-radius:22px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.10)!important;
  backdrop-filter:saturate(180%) blur(18px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(18px)!important;
}

.bottom-nav .nav-item,
.nav-item{
  color:var(--babo-muted)!important;
  font-size:11px!important;
  font-weight:620!important;
}

.bottom-nav .nav-item b,
.nav-item b{
  font-size:19px!important;
}

.bottom-nav .nav-item.active,
.nav-item.active{
  color:var(--babo-blue)!important;
  background:transparent!important;
}

.nav-badge{
  background:var(--babo-gold)!important;
  color:#fff!important;
}

@media(max-width:980px){
  .main{
    margin-left:0!important;
    padding:18px!important;
  }

  .sidebar{
    width:290px!important;
    background:rgba(251,251,253,.98)!important;
  }

  .sidebar-close{
    border-radius:12px!important;
  }

  .page-header,
  .dashboard-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
}

@media(max-width:900px){
  .container{
    padding:20px 12px 100px!important;
  }

  .app .hero{
    grid-template-columns:1fr!important;
  }

  .quick{
    grid-template-columns:repeat(3,1fr)!important;
  }
}

@media(max-width:620px){
  h1{
    font-size:30px!important;
  }

  .cards,
  .stats,
  .cards3,
  .summary,
  .quick-grid,
  .dashboard-grid,
  .grid,
  .summary-grid{
    grid-template-columns:1fr!important;
  }

  .quick{
    grid-template-columns:repeat(2,1fr)!important;
  }

  body:has(.login-box),
  body:has(.register-box),
  body:has(.box form[id*="approve" i]){
    align-items:flex-start!important;
    padding:82px 14px 24px!important;
  }

  .login-box,
  .register-box,
  .box:has(form[id*="approve" i]){
    padding:30px 22px!important;
  }

  .back-home{
    top:16px!important;
    left:14px!important;
  }
}