/* TRAILER PRO LITE — App CSS */
:root {
  --bg:#090b12;--b4:#181b27;--b5:#1c2030;--b6:#222640;
  --t1:#eef0ff;--t2:#7e87a8;--t3:#3d4460;
  --green:#13c468;--g-dim:rgba(13,196,104,.12);--g-ring:rgba(19,196,104,.25);
  --red:#e05252;--r-dim:rgba(180,40,40,.14);--r-ring:rgba(224,82,82,.25);
  --yellow:#f59e0b;--y-dim:rgba(245,158,11,.12);--y-ring:rgba(245,158,11,.25);
  --blue:#3b82f6;--b-dim:rgba(59,130,246,.12);--b-ring:rgba(59,130,246,.25);
  --acc:#7b6ef6;--acc2:#a396ff;--acc-dim:rgba(123,110,246,.12);--acc-ring:rgba(123,110,246,.28);
  --glass:rgba(255,255,255,.035);--glass-b:rgba(255,255,255,.07);--glass-b2:rgba(255,255,255,.11);
  --ff:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--t1);font-family:var(--ff);-webkit-font-smoothing:antialiased;overflow:hidden}

/* Shell */
.app-shell{display:flex;flex-direction:column;height:100vh;height:100dvh}
.app-header{background:rgba(9,11,18,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-b);
  padding:calc(var(--safe-t)+10px) 16px 10px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;z-index:50}
.header-left{display:flex;align-items:center;gap:10px}
.app-logo{font-size:24px}
.app-title{font-size:16px;font-weight:900;display:flex;align-items:center;gap:6px}
.lite-badge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px;
  background:var(--acc-dim);color:var(--acc2);border:1px solid var(--acc-ring);letter-spacing:.5px}
.app-sub{font-size:11px;color:var(--t3);margin-top:1px}
.user-name{font-size:12px;color:var(--t2);margin-right:8px}
.logout-btn{padding:5px 10px;border-radius:8px;background:var(--r-dim);border:1px solid var(--r-ring);
  color:var(--red);font-size:11px;font-weight:700;cursor:pointer}

.app-main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(64px + var(--safe-b))}
.tab-panel{display:none;padding:14px}
.tab-panel.active{display:block}

/* Bottom Nav */
.bottom-nav{display:flex;background:rgba(9,11,18,.92);backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-b);padding-bottom:var(--safe-b);
  position:fixed;bottom:0;left:0;right:0;z-index:50}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 4px;background:transparent;border:none;color:var(--t3);cursor:pointer;
  font-family:var(--ff);transition:color .15s;-webkit-tap-highlight-color:transparent}
.nav-btn.active{color:var(--acc2)}
.nav-icon{font-size:20px;line-height:1}
.nav-lbl{font-size:10px;font-weight:700;letter-spacing:.3px}

/* Loading */
.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100vh;gap:12px}
.loading-logo{font-size:48px}
.loading-title{font-size:20px;font-weight:900}
.loading-sub{font-size:13px;color:var(--t2)}
.spinner{width:28px;height:28px;border:2px solid var(--glass-b2);border-top-color:var(--acc2);
  border-radius:50%;animation:spin .8s linear infinite;margin-top:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Dashboard */
.dashboard-wrap,.bookings-wrap{max-width:560px;margin:0 auto}
.trailer-card{background:var(--glass);border:1px solid var(--glass-b);border-radius:18px;
  padding:16px;margin-bottom:14px;display:flex;flex-direction:column;gap:12px}
.trailer-visual{text-align:center}
.trailer-img{max-height:90px;width:auto;max-width:100%}
.trailer-info{display:flex;flex-direction:column;gap:5px}
.trailer-name{font-size:14px;font-weight:700}
.trailer-sub{font-size:12px;color:var(--t2)}
.status-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;
  padding:4px 12px;border-radius:20px;border:1px solid;width:fit-content}
.trailer-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat-card{background:var(--glass);border:1px solid var(--glass-b);border-radius:12px;
  padding:12px;text-align:center}
.stat-val{font-size:24px;font-weight:900}
.stat-lbl{font-size:10px;color:var(--t2);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}

/* Section */
.section-title{font-size:12px;font-weight:700;color:var(--t2);text-transform:uppercase;
  letter-spacing:1px;margin:14px 0 8px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.booking-group-title{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:.8px;margin:16px 0 8px;padding-left:2px}

/* Booking Cards */
.booking-card{background:var(--glass);border:1px solid var(--glass-b);border-radius:14px;
  padding:14px;margin-bottom:10px}
.active-card{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.05)}
.bc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.bc-name{font-size:14px;font-weight:700}
.bc-meta{font-size:12px;color:var(--t2);margin-top:4px}
.bc-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.bc-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px}
.bc-active{background:var(--b-dim);color:var(--blue);border:1px solid var(--b-ring)}
.bc-reserved{background:var(--y-dim);color:var(--yellow);border:1px solid var(--y-ring)}
.bc-returned{background:var(--g-dim);color:var(--green);border:1px solid var(--g-ring)}
.bc-cancelled{background:rgba(255,255,255,.06);color:var(--t3);border:1px solid var(--glass-b)}
.payment-badge{font-size:11px;background:var(--b4);padding:1px 7px;border-radius:6px}

/* Buttons */
.btn{border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;
  border:1px solid;font-family:var(--ff);-webkit-tap-highlight-color:transparent;transition:opacity .1s}
.btn:active{opacity:.8}
.btn-primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-return{background:var(--b-dim);border-color:var(--b-ring);color:var(--blue)}
.btn-outline{background:transparent;border-color:var(--glass-b2);color:var(--t2)}
.btn-danger{background:var(--r-dim);border-color:var(--r-ring);color:var(--red)}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.btn-full{width:100%}

/* Forms */
.form-group{margin-bottom:14px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-label{display:block;font-size:11px;font-weight:700;color:var(--t2);
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px}
.form-input{width:100%;background:var(--b4);border:1px solid var(--glass-b2);border-radius:10px;
  padding:10px 13px;font-size:14px;color:var(--t1);font-family:var(--ff)}
.form-input:focus{outline:none;border-color:var(--acc-ring)}
.form-input option{background:var(--b4)}

/* Checkliste */
.checklist-section{background:var(--b5);border:1px solid var(--glass-b);border-radius:14px;
  padding:14px;margin-bottom:14px}
.checklist-title{font-size:14px;font-weight:700;margin-bottom:3px}
.checklist-subtitle{font-size:11px;color:var(--t2);margin-bottom:12px}
.checklist-items{display:flex;flex-direction:column;gap:8px}
.checklist-item{display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:10px 12px;border-radius:10px;border:1px solid var(--glass-b);
  background:var(--glass);transition:all .15s;-webkit-tap-highlight-color:transparent}
.checklist-item input[type="checkbox"]{display:none}
.cli-box{width:22px;height:22px;border-radius:6px;border:2px solid var(--glass-b2);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.cli-check{color:transparent;font-size:12px;font-weight:900}
.checklist-item.checked{border-color:var(--g-ring);background:var(--g-dim)}
.checklist-item.checked .cli-box{background:var(--green);border-color:var(--green)}
.checklist-item.checked .cli-check{color:#fff}
.cli-label{font-size:13px;line-height:1.4}
.checklist-status{margin-top:10px;font-size:12px;text-align:right}

/* Unterschrift */
.signature-area{background:var(--b4);border:1px solid var(--acc-ring);border-radius:12px;
  position:relative;overflow:hidden}
.sig-canvas{display:block;width:100%;height:140px;touch-action:none}
.sig-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--t3);font-size:13px;pointer-events:none;user-select:none}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;
  backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;
  padding-bottom:var(--safe-b)}
.modal-overlay.open{display:flex}
.modal-sheet{background:linear-gradient(170deg,var(--b4),var(--b5));
  border:1px solid var(--glass-b2);border-radius:20px 20px 0 0;
  width:100%;max-width:600px;max-height:92vh;overflow-y:auto;padding-bottom:8px}
.modal-handle{width:36px;height:4px;background:var(--t3);border-radius:2px;margin:10px auto 0}
.modal-header{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--glass-b)}
.modal-title{font-size:16px;font-weight:800}
.modal-close{background:transparent;border:none;color:var(--t2);font-size:18px;cursor:pointer;padding:4px}
.modal-body{padding:14px 16px}
.modal-footer{padding:12px 16px;border-top:1px solid var(--glass-b)}

/* Details */
.detail-row{display:flex;justify-content:space-between;padding:8px 0;
  border-bottom:1px solid var(--glass-b);font-size:13px}
.detail-row span{color:var(--t2)}
.detail-row strong{text-align:right}

/* Alert */
.alert-warning{background:var(--y-dim);border:1px solid var(--y-ring);border-radius:10px;
  padding:10px 14px;font-size:12px;color:var(--yellow);margin-bottom:14px}

/* Empty */
.empty-state{text-align:center;padding:48px 20px;color:var(--t3)}
.empty-icon{font-size:40px;margin-bottom:12px;opacity:.5}
.empty-title{font-size:15px;font-weight:700;color:var(--t2);margin-bottom:4px}
.empty-sub{font-size:13px;margin-bottom:16px}

/* Cashbook */
.cashbook-wrap{max-width:560px;margin:0 auto}
.cb-entry{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.04)}
.cb-entry:last-child{border-bottom:none}
.cb-amount{font-size:14px;font-weight:700}
.cb-amount.income{color:var(--green)}
.cb-note{font-size:12px;color:var(--t2)}
.cb-time{font-size:11px;color:var(--t3)}

@media(min-width:600px){.modal-overlay{align-items:center}.modal-sheet{border-radius:20px;max-height:85vh}}