/* ─── AutoRent · v2 design system ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* surface */
  --bg:#FAF9F6; --bg2:#FFFFFF; --bg3:#F4F2EC;
  --border:#E4E2DA; --border-strong:#C8C5BA; --border2:#EEECE5;
  /* text — WCAG AA on white ≥ 4.5:1 */
  --text:#18181B; --text2:#52525B; --text3:#6B6B73;
  /* brand */
  --purple:#534AB7; --purple-d:#3C3489; --purple-l:#EEEDFE;
  /* CTA */
  --orange:#EA580C; --orange-d:#C2410C; --orange-l:#FFEDD5;
  /* status */
  --green:#15803D; --green-l:#DCFCE7;
  --amber:#B45309; --amber-l:#FEF3C7;
  --red:#B91C1C; --red-l:#FEE2E2;
  --blue:#1D4ED8; --blue-l:#DBEAFE;
  /* effects */
  --shadow-sm:0 1px 2px rgba(20,20,30,.04);
  --shadow:0 1px 3px rgba(20,20,30,.06),0 1px 2px rgba(20,20,30,.04);
  --shadow-md:0 4px 12px rgba(20,20,30,.08);
  --radius:8px; --radius-lg:12px;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* ─── Skip link ──────────────────────────────────────────────────────── */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--purple);color:#fff;padding:10px 16px;z-index:1000;text-decoration:none;border-radius:0 0 var(--radius) 0;font-size:13px;font-weight:600}
.skip-link:focus{left:0;outline:2px solid var(--purple-d);outline-offset:2px}

/* ─── Layout ─────────────────────────────────────────────────────────── */
.layout{display:flex;min-height:100vh}
.sidebar{width:230px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.main{flex:1;min-width:0;padding:0 0 48px;overflow-x:hidden}

/* ─── Sidebar — logo, groups, items, primary action ──────────────────── */
.logo{padding:18px 18px 14px}
.logo-name{display:block;font-size:17px;font-weight:700;color:var(--purple);letter-spacing:-.01em}
.logo-sub{display:block;font-size:11px;color:var(--text3);margin-top:2px;font-weight:500}
nav{padding:4px 0 8px;flex:1}
.nav-group{padding:14px 18px 4px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:13.5px;font-weight:500;color:var(--text2);text-decoration:none;transition:background .12s,color .12s;position:relative}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.65;transition:opacity .12s}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item:hover svg{opacity:1}
.nav-item.active{color:var(--purple-d);font-weight:600;background:var(--purple-l)}
.nav-item.active svg{opacity:1;color:var(--purple)}
.nav-item:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
.nav-item .nav-badge{margin-left:auto;background:var(--bg3);color:var(--text2);font-size:10px;font-weight:600;padding:2px 7px;border-radius:99px;min-width:20px;text-align:center}
.nav-item.active .nav-badge{background:var(--purple);color:#fff}
/* Primary action: + Nowy wynajem */
.nav-primary-action{margin:6px 12px 6px;padding:10px 14px;background:var(--orange);color:#fff;border-radius:var(--radius);font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:8px;text-decoration:none;transition:background .15s,transform .1s;box-shadow:var(--shadow-sm)}
.nav-primary-action:hover{background:var(--orange-d);color:#fff}
.nav-primary-action:active{transform:scale(.98)}
.nav-primary-action.active{background:var(--orange-d)}
.nav-primary-action svg{width:16px;height:16px}

.sidebar-bottom{padding:14px 16px;border-top:1px solid var(--border)}
.user-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--purple-l);color:var(--purple-d);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.user-name{font-size:13px;font-weight:600}
.user-role{font-size:11px;color:var(--text3)}
.logout-btn{display:block;font-size:12px;color:var(--text3);text-decoration:none;padding:4px 0}
.logout-btn:hover{color:var(--red)}

/* ─── Mobile topbar + hamburger ──────────────────────────────────────── */
.mobile-topbar{display:none}
.sidebar-backdrop{display:none}
.hamburger{display:none;background:transparent;border:0;cursor:pointer;padding:8px;color:var(--text);border-radius:var(--radius)}
.hamburger:hover{background:var(--bg3)}
.hamburger:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.hamburger svg{width:22px;height:22px}

/* ─── Topbar (page heading) ─────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px 18px;border-bottom:1px solid var(--border);background:var(--bg2)}
.topbar h1{font-size:22px;font-weight:700;letter-spacing:-.01em}
.topbar-meta{font-size:13px;color:var(--text3)}

/* ─── Alerts (flash) ─────────────────────────────────────────────────── */
.alert{margin:14px 28px 0;padding:12px 16px;border-radius:var(--radius);font-size:13.5px;font-weight:500;border:1px solid transparent}
.alert-success{background:var(--green-l);color:var(--green);border-color:#86EFAC}
.alert-error{background:var(--red-l);color:var(--red);border-color:#FCA5A5}

/* ─── KPI metrics — bigger, with trend ──────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:20px 28px 0}
.metric{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 18px 16px;box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s}
.metric:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.metric-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.metric-label{font-size:11.5px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.metric-icon{width:28px;height:28px;border-radius:8px;background:var(--purple-l);color:var(--purple-d);display:flex;align-items:center;justify-content:center}
.metric-icon svg{width:16px;height:16px}
.metric-val{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.metric-sub{font-size:12px;color:var(--text2);margin-top:6px;display:flex;align-items:center;gap:4px}
.metric-trend{font-weight:600}
.metric-trend.up{color:var(--green)}
.metric-trend.down{color:var(--red)}

/* ─── Wymaga uwagi (alert strip) ────────────────────────────────────── */
.alert-strip{margin:18px 28px 0;background:linear-gradient(180deg,#FFF7ED 0%, #FEF3C7 100%);border:1px solid #FCD34D;border-radius:var(--radius-lg);padding:14px 18px;box-shadow:var(--shadow-sm)}
.alert-strip-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#78350F;margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em}
.alert-strip-head svg{width:16px;height:16px;color:var(--amber)}
.alert-strip-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.alert-strip-item{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--radius);padding:10px 12px;border:1px solid #FCD34D;text-decoration:none;color:var(--text);transition:transform .12s,box-shadow .12s}
.alert-strip-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.alert-strip-num{font-size:22px;font-weight:700;color:var(--amber);min-width:28px;text-align:center}
.alert-strip-num.danger{color:var(--red)}
.alert-strip-text{flex:1;font-size:12.5px;line-height:1.35;color:var(--text2)}
.alert-strip-text strong{color:var(--text);font-weight:600;display:block}

/* ─── Today grid (Odbiory / Zwroty) ─────────────────────────────────── */
.today-grid{margin:16px 28px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.today-grid > *{min-width:0}
.today-block{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm)}
.today-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.today-block-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.today-block-count{background:var(--purple-l);color:var(--purple-d);font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px}
.today-list{display:flex;flex-direction:column;gap:6px;font-size:13px}
.today-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border2)}
.today-row:last-child{border-bottom:none}
.today-time{font-weight:600;font-variant-numeric:tabular-nums;min-width:46px;color:var(--purple-d)}
.today-row a{color:var(--text);text-decoration:none;flex:1}
.today-row a:hover{text-decoration:underline}
.today-empty{font-size:12.5px;color:var(--text3);font-style:italic;padding:6px 0}

/* ─── Cards / two-col / grids ──────────────────────────────────────── */
.card,.two-col,.car-grid,.form-card,.success-card,.filter-bar,.search-bar{margin:16px 28px 0}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);min-width:0}
.card .card-body img,.card .card-body svg,.card .card-body iframe{max-width:100%;height:auto}
.card .card-body .sign-link-box,.card .card-body .sign-url-box{overflow-wrap:anywhere;word-break:break-word}
.card--mb{margin-bottom:16px}
.card--warning{background:#FFFBEB;border-color:#FCD34D}
.card--warning .card-head{color:#78350F;border-bottom-color:#FCD34D}
.card-head{padding:14px 18px;border-bottom:1px solid var(--border);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff}
.card-body{padding:16px 18px}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.two-col > *{min-width:0}

/* ─── Tables ─────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:10px 18px;text-align:left;font-size:11px;font-weight:600;color:var(--text3);border-bottom:1px solid var(--border);background:var(--bg3);text-transform:uppercase;letter-spacing:.04em}
td{padding:12px 18px;border-bottom:1px solid var(--border2);color:var(--text);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg3)}
td a{color:var(--purple);text-decoration:none;font-weight:500}
td a:hover{text-decoration:underline}
.empty{color:var(--text3);font-style:italic;padding:18px;text-align:center}
.detail-table td{border:1px solid var(--border2)}
.detail-table td.lbl{background:var(--bg3);font-weight:600;width:38%;color:var(--text2)}

/* ─── Status badges — solid for stronger semantics ─────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.02em}
.badge-green{background:var(--green-l);color:#14532D}
.badge-amber{background:var(--amber-l);color:#78350F}
.badge-red{background:var(--red-l);color:#7F1D1D}
.badge-gray{background:var(--bg3);color:var(--text2)}
.badge-blue{background:var(--blue-l);color:#1E3A8A}
.badge-purple{background:var(--purple-l);color:var(--purple-d)}

/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;font-weight:500;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg2);color:var(--text);cursor:pointer;text-decoration:none;transition:background .12s,transform .08s,border-color .12s;white-space:nowrap;font-family:inherit}
.btn:hover{background:var(--bg3);border-color:var(--text2)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:600}
.btn-primary:hover{background:var(--orange-d);border-color:var(--orange-d);color:#fff}
.btn-secondary{background:var(--purple);color:#fff;border-color:var(--purple);font-weight:600}
.btn-secondary:hover{background:var(--purple-d);border-color:var(--purple-d);color:#fff}
.btn-danger{color:var(--red);border-color:#FCA5A5;background:#fff}
.btn-danger:hover{background:var(--red-l);color:var(--red);border-color:var(--red)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-block{width:100%;justify-content:center}
.btn-active{background:var(--purple-l);color:var(--purple-d);border-color:#AFA9EC;font-weight:600}

/* ─── Filters / search ─────────────────────────────────────────────── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-label{font-size:12px;color:var(--text3);font-weight:500}
.search-bar{display:flex;gap:8px}
.search-bar input{max-width:360px}

/* ─── Forms ────────────────────────────────────────────────────────── */
.form-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;max-width:720px;box-shadow:var(--shadow-sm)}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;color:var(--text2);margin-bottom:6px;font-weight:500}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-divider{text-align:center;font-size:12px;color:var(--text3);margin:12px 0;font-weight:500}
.form-actions{display:flex;gap:10px;margin-top:20px}
input,select,textarea{width:100%;font-size:13.5px;padding:9px 11px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg2);color:var(--text);font-family:inherit;transition:border-color .12s,box-shadow .12s}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--text3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(83,74,183,.15)}
textarea{resize:vertical;min-height:64px}
.checkbox-label{display:flex;align-items:flex-start;gap:8px;font-size:13px;margin-bottom:10px;cursor:pointer}
.checkbox-label input{width:auto}

/* ─── Car grid / cards (Flota) ─────────────────────────────────────── */
.car-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.car-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s}
.car-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.car-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:14px}
.car-name{font-size:15px;font-weight:600;margin-bottom:3px;letter-spacing:-.005em}
.car-meta{font-size:12px;color:var(--text3)}
.car-details{font-size:12.5px;margin-bottom:14px}
.car-detail-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border2);color:var(--text2)}
.car-detail-row:last-child{border-bottom:none}
.car-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px;flex-wrap:wrap}
.car-price{font-size:18px;font-weight:700;color:var(--purple-d);letter-spacing:-.01em}
.car-price-unit{font-size:11px;color:var(--text3);font-weight:500}
.car-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ─── Price summary (rentals) ──────────────────────────────────────── */
.price-summary{background:var(--bg3);border-radius:var(--radius);padding:14px;font-size:13px;margin-top:8px;border:1px solid var(--border)}
.price-row{display:flex;justify-content:space-between;padding:5px 0;color:var(--text2)}
.price-total{border-top:1px solid var(--border-strong);padding-top:10px;margin-top:6px;font-weight:600;color:var(--text)}
.price-total span:last-child{color:var(--purple-d);font-size:17px;font-weight:700}

/* ─── Kontrola przebiegu (km check during active rental) ────────────── */
.card-head-aux{font-size:11px;font-weight:500;color:var(--text3);text-transform:none;letter-spacing:0}
.km-empty{font-size:13px;color:var(--text2);margin:0;line-height:1.5}
.km-empty a{color:var(--purple);font-weight:500}
.km-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.km-stat{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;min-width:0}
.km-stat-label{display:block;font-size:10.5px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.km-stat-val{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;display:block}
.km-progress{height:10px;background:var(--bg3);border:1px solid var(--border);border-radius:99px;overflow:hidden;position:relative}
.km-progress-bar{height:100%;width:0%;background:linear-gradient(to right,#10B981 0%,#F59E0B 75%,#EF4444 100%);transition:width .3s cubic-bezier(.22,.61,.36,1);border-radius:99px}
.km-progress-bar.over{background:var(--red)}
.km-progress-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text2);font-weight:500;margin-top:6px;font-variant-numeric:tabular-nums}
.km-check-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.km-check-box{margin-top:10px;padding:10px 14px;border-radius:var(--radius);font-size:13px;line-height:1.5;border:1px solid;display:none}
.km-check-box.ok{background:var(--green-l);color:#14532D;border-color:#86EFAC}
.km-check-box.over{background:var(--red-l);color:#7F1D1D;border-color:#FCA5A5}
.km-check-meta{font-size:11.5px;color:var(--text3);margin:10px 0 0}
.km-check-meta a{color:var(--purple);font-weight:500}
.km-check-meta.km-check-warn{color:var(--amber)}
@media(max-width:600px){
  .km-stats{grid-template-columns:1fr 1fr}
  .km-stats .km-stat:nth-child(3){grid-column:span 2}
  .km-check-row{grid-template-columns:1fr}
}

/* ─── Rental detail: hero, status banner, stepper, danger zone ──────── */
.rental-hero{background:var(--bg2);border-bottom:1px solid var(--border);padding:22px 28px 18px}
.rental-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.rental-hero-eyebrow{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.rental-hero-eyebrow .rental-id{color:var(--text2);font-weight:500;letter-spacing:0;text-transform:none;margin-left:4px}
.rental-hero h1{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.15;margin-bottom:10px}
.rental-meta{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--text2);font-size:13.5px;align-items:center}
.rental-meta-item{display:inline-flex;align-items:center;gap:6px}
.rental-meta-item svg{width:14px;height:14px;color:var(--text3);flex-shrink:0}
.rental-meta-item a{color:var(--purple);text-decoration:none;font-weight:500}
.rental-meta-item a:hover{text-decoration:underline}
.rental-meta-item strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.rental-quick{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

.rental-banner{margin:16px 28px 0;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg2);box-shadow:var(--shadow-sm)}
.rental-banner--overdue{background:linear-gradient(180deg,#FFF1F1 0%,#FEE2E2 100%);border-color:#FCA5A5}
.rental-banner--ending{background:linear-gradient(180deg,#FFFBEB 0%,#FEF3C7 100%);border-color:#FCD34D}
.rental-banner--active{background:linear-gradient(180deg,#F0FDF4 0%,#DCFCE7 100%);border-color:#86EFAC}
.rental-banner-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.65)}
.rental-banner-icon svg{width:20px;height:20px}
.rental-banner--overdue .rental-banner-icon{color:var(--red)}
.rental-banner--ending .rental-banner-icon{color:var(--amber)}
.rental-banner--active .rental-banner-icon{color:var(--green)}
.rental-banner-text{flex:1;min-width:0}
.rental-banner-num{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.rental-banner-num small{font-size:13px;font-weight:500;color:var(--text2);margin-left:4px;font-variant-numeric:normal}
.rental-banner--overdue .rental-banner-num{color:var(--red)}
.rental-banner--ending .rental-banner-num{color:var(--amber)}
.rental-banner--active .rental-banner-num{color:var(--green)}
.rental-banner-sub{font-size:13px;color:var(--text2);margin-top:2px}
.rental-banner-actions{display:flex;gap:6px;flex-shrink:0}

.stepper{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:16px 28px 0;font-size:12px}
.stepper-item{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:99px;font-weight:600;text-decoration:none}
.stepper-item--done{background:var(--green-l);color:#14532D}
.stepper-item--pending{background:var(--amber-l);color:#78350F}
.stepper-item--current{background:var(--purple);color:#fff}
.stepper-item--cta{background:var(--orange);color:#fff}
.stepper-item--cta:hover{background:var(--orange-d);color:#fff}
.stepper-item--todo{background:var(--bg3);color:var(--text3)}
.stepper-item--cancel{background:var(--red-l);color:#7F1D1D}
.stepper-num{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:rgba(255,255,255,.25)}
.stepper-item--todo .stepper-num{background:#E0DDD5;color:var(--text3)}
.stepper-item--pending .stepper-num{background:rgba(180,83,9,.15)}
.stepper-divider{width:18px;height:1px;background:var(--border-strong)}

.danger-zone{margin:32px 28px 16px;padding:14px 18px;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:transparent}
.danger-zone-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.danger-zone-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.danger-zone-actions form{margin:0}

@media(max-width:600px){
  .rental-hero,.rental-banner,.stepper,.danger-zone{margin-left:14px;margin-right:14px}
  .rental-hero{padding:16px 18px;border-radius:0;margin-left:0;margin-right:0}
  .rental-hero-grid{grid-template-columns:1fr}
  .rental-quick{order:-1}
  .rental-hero h1{font-size:20px}
  .rental-banner-num{font-size:20px}
}

/* ─── Form rail (sticky right column) + mobile price bar ──────────── */
.form-rail{display:flex;flex-direction:column;gap:16px}
@media(min-width:901px){
  .form-rail{position:sticky;top:20px;align-self:start}
}
.price-mobile-bar{display:none}
@media(max-width:900px){
  body.has-mobile-bar{padding-bottom:84px}
  .price-mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);padding:12px 16px;gap:12px;z-index:60;box-shadow:0 -4px 16px rgba(0,0,0,.08);align-items:center}
  .price-mobile-bar-total{flex:1;display:flex;flex-direction:column;line-height:1.2}
  .price-mobile-bar-label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
  .price-mobile-bar-amount{font-size:18px;font-weight:700;color:var(--purple-d)}
}

/* ─── Misc ─────────────────────────────────────────────────────────── */
.avail-msg{padding:9px 12px;border-radius:var(--radius);font-size:12.5px;margin-top:8px;font-weight:500}
.avail-ok{background:var(--green-l);color:var(--green);border:1px solid #86EFAC}
.avail-err{background:var(--red-l);color:var(--red);border:1px solid #FCA5A5}
.autocomplete-dropdown{position:absolute;z-index:100;background:var(--bg2);border:1px solid var(--border-strong);border-radius:var(--radius);max-height:240px;overflow-y:auto;width:100%;box-shadow:var(--shadow-md);margin-top:4px}
.ac-item{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border2)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:var(--bg3)}
.customer-preview{background:var(--purple-l);color:var(--purple-d);border-radius:var(--radius);padding:9px 12px;font-size:13px;margin-top:6px;font-weight:500}
.doc-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border2)}
.doc-row:last-child{border-bottom:none}
.doc-icon{width:36px;height:36px;border-radius:8px;background:var(--purple-l);color:var(--purple);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.doc-info{flex:1;min-width:0}
.doc-name{font-size:13.5px;font-weight:600}
.doc-meta{font-size:11.5px;color:var(--text3);margin-top:2px}
.doc-actions{display:flex;gap:6px;flex-shrink:0}
.sign-link-box{background:var(--amber-l);border-radius:6px;padding:8px 12px;margin-top:6px;font-size:11.5px;color:#78350F;word-break:break-all}
.sign-code{font-size:11.5px;color:var(--text2);word-break:break-all}
.success-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;max-width:600px;box-shadow:var(--shadow-sm)}
.success-icon{width:60px;height:60px;border-radius:50%;background:var(--green-l);color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.success-card h2{font-size:18px;font-weight:700;margin-bottom:6px}
.success-card p{font-size:14px;color:var(--text2);margin-bottom:14px}
.created-doc{background:var(--bg3);border-radius:var(--radius);padding:14px;font-size:13px;margin-bottom:10px;border:1px solid var(--border)}
.sign-url-box{background:var(--amber-l);border-radius:var(--radius);padding:14px;font-size:13px;color:#78350F;margin-bottom:14px;word-break:break-all;border:1px solid #FCD34D}
.sign-url-box code{font-size:12px;font-family:'Inter',sans-serif}

/* ─── Login ────────────────────────────────────────────────────────── */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);padding:20px}
.login-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 30px;width:100%;max-width:380px;box-shadow:var(--shadow-md)}
.login-logo{font-size:26px;font-weight:700;color:var(--purple);text-align:center;margin-bottom:6px;letter-spacing:-.02em}
.login-sub{font-size:13.5px;color:var(--text3);text-align:center;margin-bottom:24px}

/* ─── Responsive tables (stacked-card on mobile) ────────────────────── */
@media(max-width:600px){
  table.responsive thead{display:none}
  table.responsive,table.responsive tbody{display:block}
  table.responsive tr{display:block;padding:12px 14px;border-bottom:1px solid var(--border)}
  table.responsive tr:last-child{border-bottom:none}
  table.responsive td{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border:0;text-align:right}
  table.responsive td::before{content:attr(data-label);font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;font-weight:600;text-align:left;flex-shrink:0}
  table.responsive td:last-child{justify-content:flex-end;padding-top:10px;margin-top:6px;border-top:1px solid var(--border2)}
  table.responsive td:last-child::before{display:none}
}

/* ─── Mobile drawer ────────────────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;height:100vh;width:280px;z-index:200;transform:translateX(-100%);transition:transform .25s ease-out;display:flex;box-shadow:0 0 32px rgba(0,0,0,.18)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(20,20,30,.45);z-index:199;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px)}
  .sidebar-backdrop.open{opacity:1;pointer-events:auto}
  .mobile-topbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;z-index:50}
  .mobile-topbar-logo{font-size:16px;font-weight:700;color:var(--purple);letter-spacing:-.01em}
  .hamburger{display:flex}
  .metrics{grid-template-columns:1fr 1fr}
  .two-col,.today-grid{grid-template-columns:minmax(0,1fr)}
  .car-grid{grid-template-columns:1fr 1fr}
  .topbar{padding:18px 20px 14px}
}
@media(max-width:600px){
  .metrics{grid-template-columns:1fr}
  .car-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .card,.two-col,.car-grid,.form-card,.success-card,.filter-bar,.search-bar,.metrics,.alert-strip,.today-grid{margin-left:14px;margin-right:14px;padding-left:14px;padding-right:14px}
  .metrics{padding-left:0;padding-right:0;margin-left:14px;margin-right:14px}
  .topbar{padding:14px 16px}
  .topbar h1{font-size:18px}
  .filter-bar .btn{font-size:12px;padding:6px 10px}
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}