:root{--ink:#0d1b27;--muted:#65727b;--paper:#f7f6f1;--mint:#c9f1d8;--lime:#a9ec69;--yellow:#ffd66b;--line:#dfe2dc;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.wrap{max-width:1180px;margin:auto;padding-left:28px;padding-right:28px}.nav{height:90px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:800;font-size:20px;letter-spacing:-1px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}.brand-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--ink);color:var(--lime);font-size:16px;font-weight:800;font-family:Georgia}.nav nav{display:flex;gap:31px}.nav nav a,.nav-cta{font-size:13px;text-decoration:none;color:var(--ink);font-weight:700}.nav-cta{border-bottom:1px solid var(--ink);padding-bottom:3px}.nav-cta span{margin-left:6px}.hero{min-height:630px;padding-top:75px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.eyebrow{font-family:"DM Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:500;color:#5d7072;display:flex;align-items:center;gap:9px}.eyebrow span{width:7px;height:7px;background:#75cf7c;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px #d6eed4}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(46px,5.4vw,75px);line-height:1.05;letter-spacing:-4px;margin:18px 0 24px;font-weight:800}h1 em,h2 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-3px;color:#345a50}.lede{font-size:17px;line-height:1.65;max-width:490px;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:26px;margin:34px 0 48px}.button{display:inline-flex;align-items:center;gap:20px;text-decoration:none;font-size:13px;font-weight:800;padding:15px 18px;border-radius:5px}.button-primary{background:var(--ink);color:white;box-shadow:4px 4px 0 var(--lime)}.button-primary span{font-size:20px;line-height:10px}.button-plain{color:var(--ink);border-bottom:1px solid #9da7a8;border-radius:0;padding:8px 0}.proof{display:flex;align-items:center;gap:13px}.proof p{font-size:11px;line-height:1.55;color:var(--muted);margin:0}.avatars{display:flex}.avatars i{width:27px;height:27px;background:#e9b47d;border:2px solid var(--paper);border-radius:50%;margin-left:-7px;display:grid;place-items:center;font-style:normal;color:#643c25;font-size:9px;font-weight:800}.avatars i:first-child{margin:0;background:#acc9b9}.avatars i:nth-child(3){background:#a1bad8}.hero-visual{height:510px;position:relative}.orbit{position:absolute;border:1px solid #d8e1d9;border-radius:50%}.orbit-a{width:450px;height:450px;right:4px;top:15px}.orbit-b{width:340px;height:340px;right:60px;top:70px;border-style:dashed}.ticket-card{position:absolute;top:71px;left:30px;width:359px;background:#10222e;color:#f7f7f3;padding:22px 24px 18px;box-shadow:12px 13px 0 #c1e9d3;transform:rotate(-2deg);z-index:2}.ticket-head{font:10px "DM Mono";letter-spacing:1px;display:flex;align-items:center;gap:8px;color:#a9c6ba}.ticket-head b{margin-left:auto;color:#fff;font-weight:500}.ticket-logo{background:#b9ee73;color:#183129;border-radius:4px;width:20px;height:20px;display:grid;place-items:center;font:bold 13px Georgia}.ticket-vehicle{margin:39px 0 23px}.ticket-card small{display:block;color:#8fa5a0;font:9px "DM Mono";letter-spacing:1px;margin-bottom:7px}.ticket-vehicle strong{display:block;font:700 28px "DM Mono";letter-spacing:-1.5px}.ticket-vehicle span{font-size:10px;color:#b4c4c1;display:block;margin-top:8px}.ticket-rule{border-top:1px dashed #49605f}.ticket-meta{display:flex;gap:50px;padding:17px 0}.ticket-meta b{font:700 11px "DM Mono";white-space:nowrap}.ticket-meta b i{display:inline-block;width:7px;height:7px;background:#a9ec69;border-radius:50%;margin-right:4px}.ticket-foot{border-top:1px solid #314550;padding-top:11px;color:#9eb0ad;display:flex;justify-content:space-between;font:8px "DM Mono";letter-spacing:.2px}.whatsapp-card{position:absolute;right:0;bottom:37px;width:268px;background:white;border-radius:10px;padding:15px 16px;box-shadow:0 16px 35px #77877a33;z-index:3;transform:rotate(3deg)}.wa-title{font-size:11px;font-weight:800;color:#277c53}.wa-title span{font-size:20px;vertical-align:middle}.whatsapp-card p{font-size:10px;line-height:1.6;margin:7px 0 11px;color:#52615d}.whatsapp-card button{background:#e6f8eb;border:0;border-radius:5px;width:100%;padding:9px;color:#24724f;font-size:10px;font-weight:800}.float-label{font:11px "DM Mono";position:absolute;background:#f4f2ea;padding:9px 12px;z-index:4;box-shadow:3px 3px 0 #d5ded5}.label-one{right:15px;top:44px}.label-one::first-letter{color:#65c675}.label-two{left:0;bottom:16px}.trust{background:#e2e8e0;padding:25px 0}.trust .wrap{display:flex;justify-content:space-between;align-items:center}.trust p{font:10px "DM Mono";letter-spacing:1.2px;color:#62706b;margin:0}.trust div div{display:flex;gap:37px}.trust span{font-size:12px;letter-spacing:1px;color:#75817c;font-weight:800}.workflow{padding-top:130px;padding-bottom:130px}.section-intro{text-align:center}.section-intro h2,.roles h2,.demo h2,.final-cta h2{font-size:clamp(31px,4vw,50px);line-height:1.15;letter-spacing:-2.5px;margin:15px 0 0}.steps{margin-top:65px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps article{border-top:1px solid #bcc6bf;padding:18px 18px 0;position:relative;min-height:245px}.step-no{font:11px "DM Mono";color:#86948c}.step-icon{width:42px;height:42px;display:grid;place-items:center;background:#c8efd7;font-size:22px;margin:35px 0 21px;border-radius:50%}.step-icon.car{background:#ffdc82}.step-icon.wa{background:#a7e770}.steps h3{font-size:17px;letter-spacing:-.5px;margin-bottom:9px}.steps p{font-size:13px;line-height:1.65;color:var(--muted);max-width:285px}.roles{background:var(--ink);color:#eff4ed;padding:110px 0}.roles-grid{display:grid;grid-template-columns:.82fr 1fr;gap:105px;align-items:center}.roles .eyebrow{color:#b7c7c0}.roles .eyebrow span{background:var(--lime);box-shadow:0 0 0 4px #263d38}.roles h2 em{color:#b7d9cc}.roles-copy>p:not(.eyebrow){color:#adc0b9;font-size:14px;line-height:1.7;max-width:380px;margin-top:25px}.role-tabs{margin-top:31px;display:flex;gap:5px}.role-tab{border:1px solid #3a4f50;background:transparent;color:#bdcdc5;padding:10px 13px;border-radius:4px;font-size:11px;font-weight:700;cursor:pointer}.role-tab span{color:#7d9690;margin-right:7px;font-family:"DM Mono"}.role-tab.active{background:var(--lime);border-color:var(--lime);color:var(--ink)}.role-preview{height:350px;background:#eff2ec;color:var(--ink);padding:18px;box-shadow:12px 12px 0 #42645b}.preview-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d4dbd4;padding-bottom:13px}.preview-title{font-size:15px;font-weight:800}.preview-user{font-size:10px;background:#d9f2d8;padding:7px 9px;border-radius:14px}.preview-cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:13px}.mini-card{background:#fff;padding:14px;border:1px solid #e2e4e0}.mini-card small{font:9px "DM Mono";color:#788680}.mini-card b{display:block;font:700 18px "DM Mono";margin:9px 0}.mini-card span{font-size:10px;color:#65736d}.mini-action{margin-top:15px;padding:13px 14px;background:var(--ink);color:white;display:flex;justify-content:space-between;font-size:12px;font-weight:700}.demo{padding-top:125px;padding-bottom:125px}.demo-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:37px}.demo-heading>p{max-width:350px;font-size:13px;line-height:1.7;color:var(--muted);margin:0}.console{height:590px;display:flex;background:#fdfdfb;border:1px solid #d7ded6;box-shadow:11px 11px 0 #dce7db}.console-side{width:180px;background:#10222e;color:#ecf3ed;padding:19px 13px;display:flex;flex-direction:column}.console-brand{font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px;margin:0 4px 37px}.console-brand .brand-mark{width:20px;height:20px;font-size:12px;border-radius:5px}.console-brand small{font:8px "DM Mono";color:#8ba39b;margin-left:auto}.screen-nav{background:none;border:0;color:#a6bbb4;text-align:left;padding:11px;border-radius:4px;font-size:12px;font-family:Manrope;cursor:pointer;margin-bottom:3px}.screen-nav span{margin-left:8px}.screen-nav.active{color:#10222e;background:var(--lime);font-weight:800}.side-bottom{margin-top:auto;color:#a7c0b5;font:10px "DM Mono";line-height:1.6;padding:8px}.side-bottom small{color:#6d8980}.presence{display:inline-block;width:7px;height:7px;background:#9bea73;border-radius:50%;margin-right:5px}.console-main{flex:1;overflow:auto;padding:32px 37px;background:#fafbf8}.app-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:26px}.app-header h3{font-size:22px;letter-spacing:-1px;margin:0 0 4px}.app-header p{font-size:11px;color:#74807a;margin:0}.app-button{border:0;border-radius:4px;background:#0d202b;color:white;padding:11px 13px;font:700 11px Manrope;cursor:pointer}.app-button.secondary{background:#e8ede7;color:#1a302d}.app-button.warn{background:#f6da83;color:#322b12}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}.app-stat{background:#f0f2ed;border:1px solid #e0e5df;padding:12px}.app-stat small{font:9px "DM Mono";text-transform:uppercase;color:#78857e}.app-stat b{display:block;font-size:22px;margin-top:5px}.ticket-list{background:white;border:1px solid #e0e5df}.list-title{padding:14px 16px;border-bottom:1px solid #e5e8e3;font-weight:800;font-size:12px;display:flex;justify-content:space-between}.list-title span{font:9px "DM Mono";color:#6d7c75}.ticket-row{display:grid;grid-template-columns:1.6fr 1fr 1fr .8fr;align-items:center;padding:13px 16px;border-bottom:1px solid #edf0ec;font-size:11px}.ticket-row:last-child{border:0}.plate{font:700 13px "DM Mono"}.sub{font-size:9px;color:#87918c;display:block;margin-top:3px}.badge{font:9px "DM Mono";padding:5px 7px;border-radius:12px;background:#e9f7ec;color:#267744;display:inline-block;white-space:nowrap}.badge.new{background:#fff1c9;color:#8a6400}.badge.request{background:#e8ecff;color:#4653a0}.badge.ready{background:#cfefe2;color:#197151}.row-action{font-size:10px;text-decoration:underline;cursor:pointer;font-weight:700;color:#294f46;background:none;border:0}.form-panel{background:white;border:1px solid #dfe5de;padding:20px;margin-top:15px}.form-panel h4{margin:0 0 17px;font-size:14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{font-size:10px;font-weight:700}.form-grid input{margin-top:7px;width:100%;border:1px solid #cfd8d0;border-radius:3px;padding:11px;font:12px "DM Mono";outline-color:#77b58a}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.driver-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.job-col{border:1px solid #dce3dc;background:white}.job-col h4{margin:0;padding:13px 15px;border-bottom:1px solid #e6ebe5;font-size:12px}.job{margin:11px;padding:14px;border:1px solid #e2e8e1}.job b{font:700 15px "DM Mono"}.job p{font-size:10px;color:#738078;margin:7px 0 12px}.job button{border:0;background:var(--ink);color:white;padding:8px 10px;font:700 10px Manrope;border-radius:3px;cursor:pointer}.empty{font-size:11px;color:#87918c;padding:33px 15px;text-align:center}.admin-table{width:100%;border-collapse:collapse;background:white;border:1px solid #e0e5df;font-size:11px}.admin-table th{text-align:left;padding:12px;color:#7b8780;font:9px "DM Mono";border-bottom:1px solid #e4e8e3}.admin-table td{padding:13px;border-bottom:1px solid #edf0ec}.final-cta{background:#d4f1dc;text-align:center;padding:105px 0}.final-cta .eyebrow{justify-content:center}.final-cta h2{margin-bottom:31px}.final-cta h2 em{color:#397158}footer{height:100px;display:flex;justify-content:space-between;align-items:center}footer p{font-size:11px;color:#7c8881;margin:0}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,90px);background:#11232e;color:white;padding:12px 17px;border-radius:4px;font-size:12px;box-shadow:0 8px 30px #0003;transition:.25s;z-index:20}#toast.show{transform:translate(-50%,0)}
@media(max-width:760px){.nav{height:72px}.nav nav{display:none}.hero{padding-top:48px;display:block;min-height:0}.hero-visual{height:440px;margin-top:45px;transform:scale(.85);transform-origin:top left;width:118%}.trust .wrap{display:block}.trust div div{margin-top:16px;gap:14px;flex-wrap:wrap}.workflow,.demo{padding-top:75px;padding-bottom:75px}.steps,.roles-grid{grid-template-columns:1fr}.steps{gap:28px;margin-top:45px}.roles-grid{gap:45px}.role-preview{height:330px}.demo-heading{display:block}.demo-heading>p{margin-top:17px}.console{height:590px;margin-left:-14px;margin-right:-14px}.console-side{width:61px;padding:14px 8px}.console-brand{margin:0 4px 30px}.console-brand>span+*{display:none}.console-brand small,.screen-nav span,.side-bottom{display:none}.screen-nav{padding:11px;width:42px}.console-main{padding:23px 16px}.app-header{display:block}.app-header .app-button{margin-top:12px}.stat-row{grid-template-columns:1fr 1fr}.ticket-row{grid-template-columns:1.35fr .9fr .8fr}.ticket-row>:nth-child(3){display:none}.ticket-row .row-action{font-size:9px}.form-grid,.driver-grid{grid-template-columns:1fr}.final-cta{padding:75px 0}footer{height:auto;padding-top:30px;padding-bottom:30px;gap:15px;flex-wrap:wrap}footer p:last-child{display:none}}

/* ==========================================================================
   ParkPilot application styles
   Everything below styles the real app (sign-in, console shell, customer
   tracking page, modals, forms). The block above is the original marketing
   design system - these styles reuse its tokens, type scale, and the flat
   offset-shadow language rather than introducing a second visual vocabulary.
   ========================================================================== */

/* --- shared primitives ---------------------------------------------------- */
/* The [hidden] attribute must always win over the display values set below;
   without this a rule like .field-error{display:block} would force hidden
   error slots to render as empty boxes and disturb the layout. */
[hidden] { display: none !important; }


.loading-state,
.error-state {
  padding: 40px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.error-state .app-button { margin-left: 10px; }

.field { margin-bottom: 15px; }
.field label,
.form-grid label {
  display: block;
  font: 700 10px Manrope, Arial, sans-serif;
  letter-spacing: .4px;
  color: #46545c;
  margin-bottom: 7px;
}
.field input,
.form-grid input {
  width: 100%;
  border: 1px solid #cfd8d0;
  border-radius: 3px;
  padding: 11px;
  font: 12px "DM Mono", monospace;
  background: var(--white);
  outline-color: #77b58a;
}
.field input:focus,
.form-grid input:focus,
.role-select:focus,
.park-location-form input:focus { outline: 2px solid #77b58a; outline-offset: 1px; }

.field input.invalid,
.form-grid input.invalid { border-color: #c96a6a; background: #fdf6f6; }

.field-error {
  display: block;
  margin: 6px 0 0;
  font-size: 10px;
  font-weight: 700;
  color: #b04a4a;
}

.form-error-banner {
  background: #fbeaea;
  border: 1px solid #f0cfcf;
  color: #8e3838;
  font-size: 11px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}

.badge.cancelled { background: #f6e0e0; color: #993b3b; }
.badge.completed { background: #e7ebe7; color: #5b6a62; }

/* --- sign-in -------------------------------------------------------------- */
.login-page { margin: 0; }
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.login-brand {
  background: var(--ink);
  color: #eff4ed;
  padding: 38px 46px;
  display: flex;
  flex-direction: column;
}
.login-brand .brand { color: #fff; }
.login-brand-copy { margin: auto 0; }
.login-brand-copy h1 {
  font-size: clamp(38px, 4vw, 56px);
  letter-spacing: -3px;
  margin: 16px 0 18px;
}
.login-brand-copy .lede { color: #adc0b9; max-width: 360px; }
.login-brand .eyebrow { color: #b7c7c0; }
.login-brand .eyebrow span { background: var(--lime); box-shadow: 0 0 0 4px #263d38; }
.login-brand-foot {
  font: 10px "DM Mono", monospace;
  color: #7d9690;
  letter-spacing: 1px;
  margin: 0;
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
}
.login-form-wrap { width: 100%; max-width: 340px; }
.login-form-wrap h2 { font-size: 27px; letter-spacing: -1.4px; margin: 0 0 6px; }
.login-sub { font-size: 12px; color: var(--muted); margin: 0 0 24px; }
.login-submit { width: 100%; padding: 14px; font-size: 12px; }
.login-submit[disabled] { opacity: .6; cursor: not-allowed; }

.demo-accounts { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px; }
.demo-accounts-title {
  font: 9px "DM Mono", monospace;
  letter-spacing: 1.2px;
  color: #8b968f;
  margin: 0 0 10px;
}
.demo-account-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 7px;
  cursor: pointer;
  font-family: Manrope, Arial, sans-serif;
  text-align: left;
}
.demo-account-btn:hover { border-color: #9fc7ac; background: #f6fbf7; }
.demo-account-btn b { display: block; font-size: 12px; }
.demo-account-btn small { font-size: 10px; color: var(--muted); }
.demo-fill { font: 9px "DM Mono", monospace; color: #3d7a5b; white-space: nowrap; }

/* --- console shell -------------------------------------------------------- */
.app-page { margin: 0; }
.console.app-shell {
  height: 100vh;
  width: 100%;
  border: 0;
  box-shadow: none;
  background: #fafbf8;
}
.app-shell .console-side { width: 208px; flex: 0 0 208px; }
.app-shell #app-nav { display: flex; flex-direction: column; }
.app-shell .screen-nav { width: 100%; cursor: pointer; }
.app-shell .screen-nav:hover:not(.active) { background: #1b3341; color: #dcece4; }
.app-shell .console-main { padding: 30px 34px; }

.console-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 6px 2px; }
.conn-indicator { display: flex; align-items: center; gap: 6px; font: 10px "DM Mono", monospace; color: #9db5ab; }
.conn-indicator .presence { background: #9bea73; margin: 0; flex: 0 0 auto; }
.conn-indicator.is-down .presence { background: #e79a6a; }
.conn-indicator.is-live .presence { background: #9bea73; }
.console-user { line-height: 1.4; }
.console-user b { display: block; font-size: 12px; color: #eef4ef; }
.console-user span { font: 9px "DM Mono", monospace; color: #8ba39b; text-transform: uppercase; letter-spacing: 1px; }
.signout-btn { width: 100%; cursor: pointer; }

/* --- ticket rows / actions ------------------------------------------------ */
.ticket-row { gap: 10px; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.icon-btn {
  background: none;
  border: 0;
  padding: 0;
  font: 700 10px Manrope, Arial, sans-serif;
  color: #4c6b60;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.icon-btn:hover { color: var(--ink); }
.primary-action {
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
  padding: 7px 10px;
  white-space: nowrap;
}
.primary-action:hover { background: #1b3341; color: #fff; }
button[disabled], .row-action[disabled], .job button[disabled] { opacity: .55; cursor: not-allowed; }

/* --- driver job cards ----------------------------------------------------- */
.job-claimed { border-color: #bcdcc4; background: #f6fbf7; }
.park-location-form { display: flex; gap: 7px; align-items: flex-start; flex-wrap: wrap; }
.park-location-form input {
  flex: 1 1 130px;
  min-width: 0;
  border: 1px solid #cfd8d0;
  border-radius: 3px;
  padding: 8px 9px;
  font: 11px "DM Mono", monospace;
}
.park-location-form button {
  border: 0;
  background: var(--ink);
  color: #fff;
  padding: 9px 11px;
  font: 700 10px Manrope, Arial, sans-serif;
  border-radius: 3px;
  cursor: pointer;
}
.park-location-form .field-error { flex: 1 0 100%; }

/* --- notification log ----------------------------------------------------- */
.notif-row {
  display: grid;
  grid-template-columns: 1.1fr 2.4fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: 1px solid #edf0ec;
  font-size: 11px;
}
.notif-row:last-child { border: 0; }
.notif-body { color: #55625c; line-height: 1.55; word-break: break-word; }

/* --- team table ----------------------------------------------------------- */
.users-table td { vertical-align: middle; }
.role-select {
  border: 1px solid #cfd8d0;
  border-radius: 3px;
  padding: 6px 8px;
  font: 11px Manrope, Arial, sans-serif;
  background: var(--white);
  cursor: pointer;
}
.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background: #cdd6cf;
  position: relative;
  transition: background .18s;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s;
}
.switch input:checked + .switch-track { background: #7fc98d; }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid #77b58a; outline-offset: 2px; }

/* --- ticket modal --------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: #0d1b2799;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 30;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--white);
  width: 100%;
  max-width: 470px;
  max-height: 86vh;
  overflow: auto;
  border: 1px solid var(--line);
  box-shadow: 12px 12px 0 #cfe0d3;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid #e8ebe6;
}
.modal-head h3 { margin: 0; font-size: 15px; letter-spacing: -.5px; }
.modal-close { background: none; border: 0; font-size: 15px; cursor: pointer; color: #6f7c76; line-height: 1; }
.modal-body { padding: 18px; }
.modal-ticket-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-ticket-meta small {
  display: block;
  font: 9px "DM Mono", monospace;
  color: #7d8a83;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.modal-ticket-meta b { font-size: 12px; font-weight: 700; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.modal-actions .app-button { text-decoration: none; cursor: pointer; }
.event-heading { margin: 22px 0 10px; font-size: 12px; }
.event-timeline { border-top: 1px solid #ecefea; }
.event-row { padding: 10px 0; border-bottom: 1px solid #f0f2ee; }
.event-row b { font-size: 11px; text-transform: capitalize; }

/* --- customer tracking page ----------------------------------------------- */
.track-page { margin: 0; background: var(--paper); }
.track-shell {
  min-height: 100vh;
  max-width: 460px;
  margin: 0 auto;
  padding: 26px 18px 40px;
  display: flex;
  flex-direction: column;
}
.track-brand { margin-bottom: 22px; }
.track-content { flex: 1; }

/* .ticket-card is absolutely positioned on the landing page - reset it here. */
.ticket-card.track-card {
  position: static;
  width: auto;
  top: auto;
  left: auto;
  transform: none;
  box-shadow: 9px 9px 0 #c1e9d3;
}
.track-card .ticket-vehicle { margin: 26px 0 20px; }
.track-card .ticket-meta { gap: 30px; }

.track-status-banner {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 16px;
  margin-top: 22px;
}
.track-status-banner p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: #53615b; }
.track-status-banner.status-ready { border-color: #a9d9c1; background: #f2fbf6; }
.track-status-banner.status-cancelled { border-color: #e4c2c2; background: #fdf6f6; }

.track-cta {
  width: 100%;
  margin-top: 16px;
  border: 0;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  padding: 17px;
  font: 800 14px Manrope, Arial, sans-serif;
  box-shadow: 4px 4px 0 var(--lime);
  cursor: pointer;
}
.track-cta:disabled { background: #b9c3bd; box-shadow: 4px 4px 0 #dfe4dd; cursor: not-allowed; }
.track-hint { font-size: 11px; color: var(--muted); text-align: center; margin: 12px 0 0; }

.track-error { text-align: center; padding: 42px 20px; background: var(--white); border: 1px solid var(--line); }
.track-error-icon { font-size: 27px; }
.track-error h2 { font-size: 19px; margin: 12px 0 8px; letter-spacing: -1px; }
.track-error p { font-size: 13px; color: var(--muted); margin: 0; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { padding: 26px 22px 30px; }
  .login-brand-copy { margin: 22px 0; }
  .login-brand-copy h1 { font-size: 34px; letter-spacing: -2px; margin: 12px 0 12px; }
  .login-brand-foot { display: none; }
  .login-panel { padding: 30px 22px 46px; }
}

@media (max-width: 760px) {
  /* full-bleed app shell: sidebar becomes a top bar */
  .console.app-shell {
    height: 100vh;
    margin: 0;
    flex-direction: column;
  }
  .app-shell .console-side {
    width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    overflow-x: auto;
  }
  .app-shell .console-brand { margin: 0 6px 0 0; flex: 0 0 auto; }
  .app-shell .console-brand > span + * { display: inline; }
  .app-shell #app-nav { flex-direction: row; gap: 4px; }
  .app-shell .screen-nav { width: auto; margin: 0; padding: 9px 11px; white-space: nowrap; }
  .app-shell .screen-nav span { display: inline; margin-left: 6px; }
  .app-shell .console-foot {
    margin: 0 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0;
    flex: 0 0 auto;
  }
  .app-shell .conn-indicator .conn-label,
  .app-shell .console-user { display: none; }
  .app-shell .signout-btn { width: auto; white-space: nowrap; }
  .app-shell .console-main { padding: 20px 15px 32px; }

  .row-actions { gap: 8px; }
  .notif-row { grid-template-columns: 1fr; gap: 6px; }
  .modal-ticket-meta { grid-template-columns: 1fr; gap: 12px; }
  .modal { box-shadow: 8px 8px 0 #cfe0d3; }
}

/* ==========================================================================
   ParkPilot v2 components
   Shift bar, driver job cards, driver picker, WhatsApp panel, key custody
   chips, and the customer progress tracker. Same tokens and flat offset
   shadows as everything above.
   ========================================================================== */

/* --- a stat tile that needs attention ------------------------------------ */
/* Yellow means exactly one thing across this whole app: a human is waiting. */
.app-stat.attention { background: #fff6da; border-color: #f0dca6; }
.app-stat.attention b { color: #7a5a00; }

/* --- key custody chip ----------------------------------------------------- */
.key-chip {
  display: inline-block;
  margin-top: 5px;
  font: 9px "DM Mono", monospace;
  padding: 3px 6px;
  border-radius: 10px;
  background: #eef1ed;
  color: #5c6a63;
}
.key-chip.key-WITH_DRIVER { background: #fff1c9; color: #8a6400; }
.key-chip.key-RETURNED_TO_CUSTOMER { background: #e7ebe7; color: #66746c; }

/* --- driver shift bar ----------------------------------------------------- */
.shift-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--white);
  margin-bottom: 16px;
}
.shift-bar b { display: block; font-size: 14px; }
.shift-bar .sub { margin-top: 4px; }
.shift-bar.on { background: #f3fbf5; border-color: #b9dcc4; }
.shift-bar.off { background: #f1f2ef; }
.shift-toggle { min-width: 116px; padding: 13px 16px; font-size: 12px; }
.shift-blocked {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: #8a6400;
}

/* --- driver job cards ----------------------------------------------------- */
/* Sized for a phone held in one hand, outdoors, at night. */
.job-stack { display: flex; flex-direction: column; gap: 12px; }
.job-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.job-head b { font: 700 17px "DM Mono", monospace; }
.job-instruction { font-size: 13px !important; color: var(--ink) !important; font-weight: 600; margin: 10px 0 12px !important; }
.job-haskey { border-color: #e6c88a; background: #fffdf6; }

.job-primary {
  width: 100%;
  border: 0;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  padding: 15px;
  font: 800 13px Manrope, Arial, sans-serif;
  box-shadow: 3px 3px 0 var(--lime);
  cursor: pointer;
}
.job-primary:disabled { background: #b9c3bd; box-shadow: 3px 3px 0 #dfe4dd; cursor: not-allowed; }

.job-waiting {
  font-size: 11px;
  color: #7a857f;
  background: #f2f4f1;
  border: 1px dashed #d5dbd4;
  padding: 11px 12px;
  border-radius: 4px;
  text-align: center;
}

/* --- driver picker -------------------------------------------------------- */
.driver-pick {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 7px;
  cursor: pointer;
  text-align: left;
  font-family: Manrope, Arial, sans-serif;
}
.driver-pick:hover:not(:disabled) { border-color: #9fc7ac; background: #f6fbf7; }
.driver-pick:disabled { opacity: .5; cursor: not-allowed; }
.driver-pick b { display: block; font-size: 13px; }
.driver-pick small { font-size: 10px; color: var(--muted); }
.driver-pick-go { font: 9px "DM Mono", monospace; color: #3d7a5b; white-space: nowrap; }
.picker-note {
  font: 9px "DM Mono", monospace;
  letter-spacing: 1px;
  color: #8b968f;
  margin: 16px 0 8px;
  text-transform: uppercase;
}

/* --- WhatsApp panel ------------------------------------------------------- */
.wa-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.wa-tab {
  flex: 1 1 180px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 13px 14px;
  cursor: pointer;
  font-family: Manrope, Arial, sans-serif;
}
.wa-tab b { display: block; font-size: 13px; margin-bottom: 3px; }
.wa-tab span { font-size: 10px; color: var(--muted); }
.wa-tab:hover:not(.active) { border-color: #9fc7ac; }
.wa-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--lime);
}
.wa-tab.active b { color: #fff; }
.wa-tab.active span { color: #a9bdb4; }

.wa-connected { background: var(--white); border: 1px solid var(--line); padding: 20px; }
.wa-connected > p { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.6; }
.wa-state-line { font-size: 14px; font-weight: 700; }
.wa-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.wa-actions .app-button { cursor: pointer; }

.wa-qr-panel {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 22px;
  flex-wrap: wrap;
}
.wa-qr {
  width: 232px;
  height: 232px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px;
}
.wa-qr-steps { flex: 1 1 260px; }
.wa-qr-steps h4 { margin: 0 0 12px; font-size: 15px; }
.wa-qr-steps ol { margin: 0 0 12px; padding-left: 18px; }
.wa-qr-steps li { font-size: 12.5px; line-height: 1.9; color: #48555d; }

/* --- customer progress tracker -------------------------------------------- */
.progress-track {
  display: flex;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  counter-reset: node;
}
.pnode {
  flex: 1;
  position: relative;
  text-align: center;
  min-width: 0;
}
/* The connector sits behind the dots and fills as progress is made. */
.pnode::before {
  content: "";
  position: absolute;
  top: 11px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.pnode:first-child::before { display: none; }
.pnode.done::before,
.pnode.current::before { background: var(--ink); }

.pdot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.pnode.done .pdot { background: var(--ink); border-color: var(--ink); }
.pnode.current .pdot {
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 0 4px #d8f3bd;
}
.plabel {
  display: block;
  font: 9px "DM Mono", monospace;
  letter-spacing: .3px;
  color: #7c8983;
  padding: 0 2px;
  word-break: break-word;
}
.pnode.done .plabel,
.pnode.current .plabel { color: var(--ink); font-weight: 500; }

.track-foot {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 760px) {
  .shift-bar { padding: 13px; }
  .shift-toggle { min-width: 0; flex: 0 0 auto; }
  .wa-qr-panel { gap: 18px; padding: 16px; justify-content: center; }
  .wa-qr { width: 200px; height: 200px; }
  .wa-tab { flex: 1 1 100%; }
  .plabel { font-size: 8px; }
  .job-head b { font-size: 15px; }
  /* Driver screens get bigger touch targets — used one-handed, often at night. */
  .job-primary { padding: 16px; font-size: 14px; }
  .park-location-form button { padding: 12px 14px; font-size: 11px; }
}

/* The message log grows without bound on a busy day — cap it and scroll. */
.notif-list { max-height: 460px; overflow-y: auto; }

/* --- alert bell + inbox --------------------------------------------------- */
.bell-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  color: #a6bbb4;
  padding: 9px 10px;
  border-radius: 4px;
  font: 700 12px Manrope, Arial, sans-serif;
  cursor: pointer;
  text-align: left;
}
.bell-btn:hover { background: #1b3341; color: #dcece4; }
.bell-icon { font-size: 15px; line-height: 1; }
.bell-btn.has-unread { color: var(--lime); }
.bell-count {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--lime);
  color: var(--ink);
  font: 800 10px Manrope, Arial, sans-serif;
  display: grid;
  place-items: center;
}

.inbox-panel {
  position: fixed;
  left: 200px;
  bottom: 96px;
  width: 330px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 10px 10px 0 #cfe0d3;
  z-index: 25;
}
.inbox-panel[hidden] { display: none; }
.inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border-bottom: 1px solid #e8ebe6;
  font-size: 13px;
}
.inbox-list { overflow-y: auto; }

.inbox-item {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid #f0f2ee;
  padding: 12px 15px;
  cursor: pointer;
  font-family: Manrope, Arial, sans-serif;
}
.inbox-item:hover { background: #f6fbf7; }
.inbox-item.unread { background: #fbfdf9; }
.inbox-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: transparent;
}
.inbox-item.unread .inbox-dot { background: var(--lime); box-shadow: 0 0 0 3px #e4f6d2; }
.inbox-text { min-width: 0; }
.inbox-text b { display: block; font-size: 12px; margin-bottom: 3px; }
.inbox-text span { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; }
.inbox-text small { display: block; margin-top: 5px; font: 9px "DM Mono", monospace; color: #939d97; }

@media (max-width: 760px) {
  /* Sidebar becomes a top bar on mobile, so the panel drops from the top. */
  .bell-btn { width: auto; padding: 8px 9px; }
  .bell-label { display: none; }
  .inbox-panel {
    left: 8px;
    right: 8px;
    top: 62px;
    bottom: auto;
    width: auto;
    max-height: 70vh;
    box-shadow: 6px 6px 0 #cfe0d3;
  }
}