:root{
  --bg: var(--diary-bg);
  --bg2: var(--diary-bg-soft);
  --panel: var(--diary-panel);
  --panel2: var(--diary-panel-alt);
  --panel3: var(--diary-panel-raised);
  --text: var(--diary-text);
  --muted: var(--diary-muted);
  --soft: var(--diary-text-body);
  --border: var(--diary-border);
  --border-strong: var(--diary-border-strong);
  --blue: var(--diary-primary);
  --orange: var(--diary-accent);
  --danger:#ff5d66;
  --success:#40d688;
  --warning:#ffd166;
  --shadow:0 22px 70px rgba(0,0,0,.34);
  --radius:22px;
}

*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 8% -8%,rgb(var(--diary-primary-rgb) / .24),transparent 34%),
    radial-gradient(circle at 88% 8%,rgb(var(--diary-accent-rgb) / .16),transparent 30%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.topbar{
  position:sticky;
  top:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px clamp(18px,3vw,34px);
  border-bottom:1px solid var(--border);
  background:rgba(6,11,19,.84);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--orange));
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 16px 34px rgb(var(--diary-primary-rgb) / .22);
}
.brand-copy{display:grid;line-height:1.1}
.brand-copy strong{font-weight:900;letter-spacing:.01em}
.brand-copy small{color:var(--muted);font-size:.78rem;margin-top:3px}
.portal-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.portal-nav a{
  color:var(--muted);
  padding:9px 12px;
  border-radius:999px;
  border:1px solid transparent;
}
.portal-nav a:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:var(--border)}

.shell{width:min(1180px,calc(100% - 32px));margin:30px auto 70px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.032));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(20px,3vw,28px);
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.card.subtle{background:rgba(255,255,255,.035);box-shadow:none}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.card-head h1,.card-head h2{margin:0}

h1,h2,h3{margin:0 0 10px;letter-spacing:-.02em}
h1{font-size:clamp(1.8rem,4vw,3.1rem);line-height:1.03}
h2{font-size:clamp(1.25rem,2.3vw,1.65rem)}
p{line-height:1.58;margin:0 0 14px}.muted{color:var(--muted)}.soft{color:var(--soft)}

.flash,.notice,.success-box,.state-card,.empty{
  border-radius:18px;
  border:1px solid var(--border);
}
.flash,.notice,.success-box{padding:13px 15px;margin:12px 0}
.notice{background:rgb(var(--diary-primary-rgb) / .1);border-color:rgb(var(--diary-primary-rgb) / .26)}
.success-box,.flash-success{background:rgba(64,214,136,.12);border-color:rgba(64,214,136,.35)}
.flash-error{background:rgba(255,93,102,.12);border-color:rgba(255,93,102,.35)}
.empty{color:var(--muted);padding:20px;border-style:dashed;background:rgba(255,255,255,.025)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 15px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.09)}
.btn-primary{border:0;background:linear-gradient(135deg,var(--blue),var(--orange));font-weight:900;box-shadow:0 15px 35px rgb(var(--diary-primary-rgb) / .22)}
.btn-ghost{background:transparent}.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

input,select,textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(0,0,0,.24);
  color:var(--text);
  padding:12px 13px;
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgb(var(--diary-primary-rgb) / .78);box-shadow:0 0 0 4px rgb(var(--diary-primary-rgb) / .12)}
.form-stack{display:grid;gap:15px}.form-stack label{display:grid;gap:8px;color:var(--soft);font-weight:650}.field-help{font-size:.85rem;color:var(--muted);font-weight:500}

/* Authentication / invite activation */
.auth-wrap,.activation-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,470px);
  gap:22px;
  align-items:stretch;
  margin-top:clamp(18px,5vw,54px);
}
.auth-panel,.activation-panel{
  position:relative;
  overflow:hidden;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.auth-panel:before,.activation-panel:before,.hero.card:before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(circle at 18% 18%,rgb(var(--diary-primary-rgb) / .24),transparent 28%),
    radial-gradient(circle at 82% 28%,rgb(var(--diary-accent-rgb) / .18),transparent 25%);
  pointer-events:none;
}
.auth-panel > *,.activation-panel > *{position:relative}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--soft);
  font-size:.86rem;
}
.kicker:before{content:"";width:8px;height:8px;border-radius:99px;background:var(--success);box-shadow:0 0 16px rgba(64,214,136,.8)}
.activation-copy{max-width:620px}.activation-copy h1{margin-top:22px}.activation-copy p{font-size:1.05rem;color:var(--soft)}
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.trust-tile{padding:14px;border-radius:18px;border:1px solid var(--border);background:rgba(0,0,0,.17)}
.trust-tile strong{display:block;margin-bottom:5px}.trust-tile span{display:block;color:var(--muted);font-size:.88rem;line-height:1.45}
.auth-card,.activation-card{align-self:center;margin:0;width:100%;padding:26px}
.secure-list{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none;color:var(--muted)}
.secure-list li{display:flex;gap:9px;align-items:flex-start}.secure-list li:before{content:"✓";color:var(--success);font-weight:900}
.password-rules{display:grid;gap:8px;margin-top:4px;color:var(--muted);font-size:.9rem}
.password-rules span{display:flex;gap:8px}.password-rules span:before{content:"•";color:var(--orange);font-weight:900}

.hero.card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.hero > *{position:relative}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.hero-stat{text-align:right;display:grid;gap:6px}.hero-stat span,.stat-grid span,.bank-box span{color:var(--muted);font-size:.88rem}.hero-stat strong{font-size:clamp(2rem,4vw,3.2rem);line-height:1;background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;color:transparent}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}.stat-grid div,.bank-box div{background:rgba(255,255,255,.045);border:1px solid var(--border);border-radius:18px;padding:16px;display:grid;gap:6px}.stat-grid strong{font-size:1.15rem}

.invoice-list{display:grid;gap:10px}.invoice-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:15px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.035)}
a.invoice-row:hover{border-color:rgb(var(--diary-primary-rgb) / .55);background:rgb(var(--diary-primary-rgb) / .08)}
.invoice-main{display:grid;gap:4px}.invoice-main small{color:var(--muted)}.invoice-money{text-align:right}.invoice-money strong{font-size:1.1rem}.invoice-money span{display:block;color:var(--muted);font-size:.86rem}

.table-wrap{overflow:auto;border-radius:18px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.025)}
th,td{padding:14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}tr:last-child td{border-bottom:0}th{color:var(--muted);font-size:.84rem;text-transform:uppercase;letter-spacing:.06em}.table-actions{display:flex;justify-content:flex-end;gap:8px}.status-pill{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.055);font-size:.84rem;color:var(--soft)}.status-pill.paid{border-color:rgba(64,214,136,.34);background:rgba(64,214,136,.12);color:#bff5d7}.status-pill.unpaid,.status-pill.part_paid{border-color:rgba(255,209,102,.34);background:rgba(255,209,102,.1);color:#ffe5a4}

.payment-card{max-width:780px;margin-inline:auto}.pay-amount{font-size:clamp(2.4rem,7vw,4.6rem);font-weight:950;margin:18px 0 8px;background:linear-gradient(135deg,var(--blue),var(--orange));-webkit-background-clip:text;color:transparent;letter-spacing:-.05em}.bank-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.bank-ref{font-size:1.08rem;letter-spacing:.04em}.receipt-card{max-width:760px;margin-inline:auto}.receipt-line{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--border)}.receipt-line:last-child{border-bottom:0}

@media(max-width:860px){
  .auth-wrap,.activation-wrap{grid-template-columns:1fr}.activation-panel,.auth-panel{min-height:auto}.trust-grid,.stat-grid,.bank-box{grid-template-columns:1fr}.hero.card{grid-template-columns:1fr}.hero-stat{text-align:left}.card-head{align-items:flex-start;flex-direction:column}.invoice-row{grid-template-columns:1fr}.invoice-money{text-align:left}.topbar{align-items:flex-start;flex-direction:column}.portal-nav{width:100%}
}

/* Customer jobs and requests */
.portal-grid{display:grid;gap:18px;margin-bottom:18px}
.portal-grid.two-one{grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr)}
.dashboard-grid{align-items:start;margin-top:18px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.job-request-hero{background:linear-gradient(135deg,rgb(var(--diary-primary-rgb) / .12),rgb(var(--diary-accent-rgb) / .08)),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.032))}
.step-list{display:grid;gap:13px;margin:18px 0 0;padding:0;list-style:none}
.step-list li{display:grid;gap:4px;padding:14px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.035)}
.step-list li strong{color:var(--text)}
.step-list li span{color:var(--muted);font-size:.92rem;line-height:1.45}
.mini-divider{height:1px;background:var(--border);margin:22px 0}
.mini-list{display:grid;gap:10px}.mini-row{display:grid;gap:4px;padding:13px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.035)}.mini-row span,.mini-row small{color:var(--muted)}.empty.compact{padding:14px}
.job-card-list{display:grid;gap:12px}.job-card-list.compact{gap:10px}.job-card-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.035);transition:border-color .16s ease,background .16s ease,transform .16s ease}.job-card-row:hover{transform:translateY(-1px);border-color:rgb(var(--diary-primary-rgb) / .52);background:rgb(var(--diary-primary-rgb) / .08)}.job-main{display:grid;gap:5px;min-width:0}.job-main small,.job-main em{color:var(--muted);font-size:.9rem;font-style:normal;line-height:1.45}.job-meta{display:grid;justify-items:end;gap:8px}.job-meta small{color:var(--muted)}.job-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.note-panel{padding:18px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.04);line-height:1.6;color:var(--soft)}.accordion-list{display:grid;gap:10px}.task-collapse{border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.035);overflow:hidden}.task-collapse summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px;list-style:none}.task-collapse summary::-webkit-details-marker{display:none}.task-collapse p{padding:0 15px 15px;margin:0}.note-list{display:grid;gap:12px}.customer-note{padding:15px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.04)}.customer-note p{margin:8px 0 10px;color:var(--soft)}.customer-note small{color:var(--muted)}
.status-pill.travelling{border-color:rgba(168,85,247,.42);background:rgba(168,85,247,.13);color:#e9d5ff}.status-pill.submitted,.status-pill.reviewing{border-color:rgb(var(--diary-primary-rgb) / .34);background:rgb(var(--diary-primary-rgb) / .12);color:#bfe5ff}.status-pill.accepted,.status-pill.converted,.status-pill.done,.status-pill.complete,.status-pill.completed{border-color:rgba(64,214,136,.34);background:rgba(64,214,136,.12);color:#bff5d7}.status-pill.rejected,.status-pill.cancelled{border-color:rgba(255,93,102,.34);background:rgba(255,93,102,.12);color:#ffc0c5}.status-pill.in_progress,.status-pill.open,.status-pill.outstanding{border-color:rgba(255,209,102,.34);background:rgba(255,209,102,.1);color:#ffe5a4}
@media(max-width:980px){.portal-grid.two-one,.form-grid,.job-stats{grid-template-columns:1fr}.job-card-row{grid-template-columns:1fr}.job-meta{justify-items:start}}

.form-footnote{margin:0;text-align:center;color:var(--muted);font-size:.92rem}.form-footnote a{color:#bfe5ff;text-decoration:underline;text-underline-offset:3px}.form-footnote a:hover{color:#fff}

/* v8 invoice status/PDF polish */
.invoice-hero-card .card-head,
.invoice-detail-card .card-head{
    align-items:flex-start;
}
.button-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}
.row-subline{
    display:block;
    margin-top:4px;
    color:rgba(233,242,255,.55);
    font-size:12px;
}
.status-pill.paid,
.status-pill.settled,
.status-pill.complete,
.status-pill.completed{
    background:rgb(var(--diary-primary-rgb) / .14);
    border-color:rgb(var(--diary-primary-rgb) / .42);
    color:#dcefff;
}
.status-pill.part_paid,
.status-pill.part-paid,
.status-pill.partial,
.status-pill.partially_paid{
    background:rgb(var(--diary-accent-rgb) / .12);
    border-color:rgb(var(--diary-accent-rgb) / .42);
}
.status-pill.issued,
.status-pill.sent,
.status-pill.unpaid{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.16);
}
.status-pill.void,
.status-pill.cancelled,
.status-pill.draft{
    background:rgba(148,163,184,.10);
    border-color:rgba(148,163,184,.28);
}

/* v9 final pre-provider polish */
.portal-toast-stack{position:fixed;right:18px;bottom:18px;z-index:1100;display:grid;gap:10px;width:min(420px,calc(100vw - 36px))}
.portal-toast{border-radius:18px;border:1px solid var(--border);padding:13px 15px;background:rgba(16,24,39,.96);box-shadow:var(--shadow);animation:toastIn .18s ease-out;color:var(--text)}
.portal-toast.success{border-color:rgba(64,214,136,.35);background:rgba(20,46,38,.96)}
.portal-toast.error{border-color:rgba(255,93,102,.35);background:rgba(58,24,32,.96)}
.portal-toast.info{border-color:rgb(var(--diary-primary-rgb) / .35);background:rgba(12,33,58,.96)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.portal-collapse{border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.035);overflow:hidden;margin-top:14px}.portal-collapse summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;padding:16px 18px;font-weight:900}.portal-collapse summary::-webkit-details-marker{display:none}.portal-collapse summary:after{content:'⌄';width:28px;height:28px;border-radius:999px;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);transition:transform .16s ease}.portal-collapse[open] summary:after{transform:rotate(180deg)}.portal-collapse summary em{font-style:normal;color:var(--muted);font-weight:600;font-size:.86rem}.collapse-body{padding:0 18px 18px;border-top:1px solid var(--border)}
.provider-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.provider-choice-card{padding:16px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.045);display:grid;gap:4px}.provider-choice-card.is-primary{background:linear-gradient(135deg,rgb(var(--diary-primary-rgb) / .14),rgb(var(--diary-accent-rgb) / .08));border-color:rgb(var(--diary-primary-rgb) / .35)}.provider-choice-card span{color:var(--muted);font-size:.84rem}.provider-choice-card strong{font-size:1.1rem}.provider-choice-card small{color:var(--muted);line-height:1.45}.payment-state-card{max-width:780px;margin-inline:auto}.success-state{border-color:rgba(64,214,136,.3)}.failed-state{border-color:rgba(255,93,102,.32)}.cancelled-state{border-color:rgba(255,209,102,.3)}
/* consistent native date/calendar styling */
input[type="date"],input[type="datetime-local"],input[type="month"]{color-scheme:dark;position:relative}input[type="date"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.75;cursor:pointer;padding:4px;border-radius:8px}input[type="date"]::-webkit-calendar-picker-indicator:hover,input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,input[type="month"]::-webkit-calendar-picker-indicator:hover{background:rgba(255,255,255,.12);opacity:1}.date-field{position:relative}.date-field:after{content:'📅';position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.62}.date-field input{padding-right:46px}
@media(max-width:860px){.provider-choice-grid{grid-template-columns:1fr}.portal-toast-stack{right:12px;bottom:12px;width:calc(100vw - 24px)}}

/* v10 final pre-test hardening polish */
.portal-banner.test-mode{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid rgba(255,209,102,.38);background:linear-gradient(90deg,rgba(255,209,102,.14),rgb(var(--diary-accent-rgb) / .09));color:#ffe7a3;border-radius:18px;padding:13px 16px;margin:0 0 16px}.portal-banner.test-mode span{color:rgba(233,242,255,.72)}
input[type="date"],input[type="datetime-local"],input[type="month"]{color-scheme:dark}.portal-collapse{border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.04);margin:14px 0;overflow:hidden}.portal-collapse>summary{cursor:pointer;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-weight:900}.portal-collapse>summary::-webkit-details-marker{display:none}.portal-collapse>summary:after{content:'⌄';opacity:.72}.portal-collapse[open]>summary:after{content:'⌃'}.portal-collapse .collapse-body{padding:0 16px 16px}

/* v12 Customer 360 / vehicle history / walk-in media lookup */
.hero-lite{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;position:relative;overflow:hidden}.hero-lite:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 10% 12%,rgb(var(--diary-primary-rgb) / .22),transparent 32%),radial-gradient(circle at 88% 8%,rgb(var(--diary-accent-rgb) / .16),transparent 28%);pointer-events:none}.hero-lite>*{position:relative}.hero-stat.compact strong{font-size:2.55rem}
.dashboard-secondary-stats{margin-bottom:18px}.mini-row-link{display:grid;color:inherit}.mini-row-link:hover{border-color:rgb(var(--diary-primary-rgb) / .48);background:rgb(var(--diary-primary-rgb) / .08)}
.vehicle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.vehicle-card{margin:0}.vehicle-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.vehicle-reg{display:inline-flex;margin-bottom:8px;padding:6px 10px;border-radius:999px;border:1px solid rgb(var(--diary-primary-rgb) / .34);background:rgb(var(--diary-primary-rgb) / .12);color:#dff1ff;font-weight:900;letter-spacing:.04em}.vehicle-meta-stack{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.soft-pill{background:rgba(255,255,255,.05)}.vehicle-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.vehicle-summary-grid div{display:grid;gap:4px;padding:12px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.04)}.vehicle-summary-grid span{color:var(--muted);font-size:.84rem}.vehicle-history-collapse{margin-bottom:0}
.mini-history-list{display:grid;gap:10px}.mini-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.035)}a.mini-history-row:hover{border-color:rgb(var(--diary-primary-rgb) / .52);background:rgb(var(--diary-primary-rgb) / .08)}.mini-history-row small,.table-subline{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}.static-row{cursor:default}.history-money{font-weight:900;font-size:1.06rem}.history-stat-stack{display:grid;gap:9px;justify-items:end}.history-stat-stack span{display:inline-flex;align-items:center;gap:8px;min-width:150px;justify-content:space-between;border:1px solid var(--border);background:rgba(255,255,255,.05);border-radius:999px;padding:8px 12px;color:var(--muted)}.history-stat-stack strong{color:var(--text);font-size:1.04rem}.history-section{overflow:hidden}.history-grid{align-items:start}
.booking-timeline{display:grid;gap:12px}.booking-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.035)}.booking-row:hover{border-color:rgb(var(--diary-primary-rgb) / .52);background:rgb(var(--diary-primary-rgb) / .08)}.booking-date{display:grid;gap:3px}.booking-date strong{font-size:1.02rem}.booking-date small,.booking-main small{color:var(--muted)}.booking-main{display:grid;gap:4px}
.portal-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.portal-media-card{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,1fr);gap:14px;padding:14px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.035)}.portal-media-preview{min-height:150px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.24);display:grid;place-items:center;overflow:hidden}.portal-media-preview img,.portal-media-preview video{display:block;width:100%;height:100%;max-height:220px;object-fit:cover}.portal-media-preview audio{width:calc(100% - 18px)}.portal-media-file-badge{font-size:2.4rem}.portal-media-copy{display:grid;align-content:start;gap:10px}.portal-media-title{display:grid;gap:4px}.portal-media-title span{color:var(--muted);font-size:.84rem}.portal-media-copy p{margin:0;color:var(--soft)}.portal-media-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.portal-media-meta small{color:var(--muted)}
.walkin-wrap{margin-top:18px}.walkin-copy-panel{min-height:420px}.walkin-form-card{align-self:start}.walkin-results-card{margin-top:18px}.walkin-result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
@media(max-width:980px){.hero-lite,.vehicle-grid,.portal-media-grid{grid-template-columns:1fr}.history-stat-stack{justify-items:start}.portal-media-card{grid-template-columns:1fr}.booking-row{grid-template-columns:1fr}.vehicle-card-head{flex-direction:column}.vehicle-meta-stack{justify-content:flex-start}}
.task-customer-summary{margin-top:12px}.compact-copy{margin:12px 0 0}

.guest-access-hero{margin-bottom:18px}
.guest-session-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.guest-session-actions{justify-content:flex-start;width:100%}}


/* v14 Guest Access Packs + public online job requests */
.portal-inline-alert{padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.045);line-height:1.5}
.portal-inline-alert.error{border-color:rgba(255,93,102,.34);background:rgba(255,93,102,.11);color:#ffd0d4}
.guest-approval-section{margin-top:18px}
.guest-approval-list{display:grid;gap:14px}
.guest-approval-card{padding:16px;border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.035)}
.guest-approval-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.guest-approval-head strong{display:block;font-size:1.04rem}
.guest-approval-head small{display:block;color:var(--muted);margin-top:4px}
.guest-approval-message{margin:0 0 14px;color:var(--soft);line-height:1.6}
.guest-approval-items{display:grid;gap:10px;margin:14px 0}
.guest-approval-item{display:grid;gap:4px;padding:12px 13px;border:1px solid var(--border);border-radius:16px;background:rgba(0,0,0,.16)}
.guest-approval-item span{color:var(--soft);line-height:1.5}
.guest-approval-item small{color:var(--muted)}
.guest-approval-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--border);border-radius:16px;background:rgb(var(--diary-primary-rgb) / .09);margin:14px 0}
.guest-approval-total span{color:var(--muted)}
.guest-approval-total strong{font-size:1.18rem}
.guest-approval-actions{display:grid;grid-template-columns:auto minmax(260px,1fr);gap:12px;align-items:start;margin-top:14px}
.inline-approval-form{display:flex;align-items:end}
.decline-approval-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.decline-approval-form label{margin:0}
.public-request-hero{position:relative;overflow:hidden;margin-bottom:18px;background:linear-gradient(135deg,rgb(var(--diary-primary-rgb) / .12),rgb(var(--diary-accent-rgb) / .08)),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.032))}
.public-request-success{margin-bottom:18px;border-color:rgba(64,214,136,.34);background:rgba(64,214,136,.08)}
.public-request-success h2{margin-bottom:8px}
.public-request-layout{align-items:start}
.public-request-aside{position:sticky;top:18px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:.84rem;text-transform:uppercase;letter-spacing:.04em}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--border);flex:1}
.public-request-login-cta{display:grid;gap:8px;padding:14px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.035)}
.public-request-login-cta p{margin:0}

@media(max-width:980px){
  .guest-approval-actions,.decline-approval-form{grid-template-columns:1fr}
  .public-request-aside{position:static}
}


/* v15 Customer Portal polish: motion, depth, active navigation and richer interaction states */
body:before,body:after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  width:min(44vw,620px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(32px);
  opacity:.34;
  animation:portalAmbientFloat 18s ease-in-out infinite;
}
body:before{left:-15vw;top:18vh;background:radial-gradient(circle,rgb(var(--diary-primary-rgb) / .34),transparent 68%)}
body:after{right:-16vw;bottom:8vh;background:radial-gradient(circle,rgb(var(--diary-accent-rgb) / .24),transparent 68%);animation-delay:-9s}
@keyframes portalAmbientFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-24px,0) scale(1.06)}}
.topbar{transition:padding .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.topbar.is-scrolled{padding-top:12px;padding-bottom:12px;background:rgba(6,11,19,.94);border-bottom-color:rgba(255,255,255,.18);box-shadow:0 20px 52px rgba(0,0,0,.3)}
.portal-nav a{position:relative;transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease}
.portal-nav a:hover{transform:translateY(-1px)}
.portal-nav a.is-active{color:var(--text);background:linear-gradient(135deg,rgb(var(--diary-primary-rgb) / .22),rgb(var(--diary-accent-rgb) / .14));border-color:rgb(var(--diary-primary-rgb) / .42);box-shadow:0 10px 28px rgb(var(--diary-primary-rgb) / .14)}
.card,.stat-grid>div,.invoice-row,.job-card-row,.mini-row,.vehicle-card,.portal-media-card,.booking-row,.guest-approval-card,.trust-tile,.bank-box div{
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.card:hover,.stat-grid>div:hover,.trust-tile:hover,.bank-box div:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.invoice-row:hover,.job-card-row:hover,.mini-row-link:hover,.vehicle-card:hover,.portal-media-card:hover,.booking-row:hover,.guest-approval-card:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,0,0,.24)}
.btn{position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;inset:-1px;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.18) 46%,transparent 72%);transform:translateX(-130%);transition:transform .55s ease;pointer-events:none}
.btn:hover:before{transform:translateX(130%)}
.btn.is-loading{pointer-events:none;opacity:.82;padding-right:42px}
.btn.is-loading:after{content:"";position:absolute;right:15px;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.38);border-top-color:var(--text);animation:portalSpin .72s linear infinite}
@keyframes portalSpin{to{transform:rotate(360deg)}}
.portal-js .portal-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.portal-js .portal-reveal.is-visible{opacity:1;transform:none}
.hero.card,.public-request-hero,.guest-access-hero{isolation:isolate}
.hero.card:after,.public-request-hero:after,.guest-access-hero:after{content:"";position:absolute;inset:auto -18% -60% auto;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 66%);pointer-events:none;z-index:-1}
.status-pill{transition:transform .18s ease,border-color .18s ease,background .18s ease}
.status-pill:hover{transform:translateY(-1px)}
.table-wrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.empty{position:relative;overflow:hidden}
.empty:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.04),transparent);transform:translateX(-120%);animation:portalEmptySweep 4.8s ease-in-out infinite}
@keyframes portalEmptySweep{0%,72%,100%{transform:translateX(-120%)}88%{transform:translateX(120%)}}
.portal-toast{backdrop-filter:blur(12px)}
details.wd-collapse,details.task-customer-summary{transition:border-color .18s ease,background .18s ease}
details.wd-collapse[open],details.task-customer-summary[open]{border-color:rgb(var(--diary-primary-rgb) / .28);background:rgb(var(--diary-primary-rgb) / .06)}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .portal-js .portal-reveal{opacity:1;transform:none}
}

.portal-permission-note{
  border:1px solid rgb(var(--diary-primary-rgb) / .22);
  background:rgb(var(--diary-primary-rgb) / .08);
  border-radius:16px;
  padding:1rem;
  color:var(--muted);
  line-height:1.55;
}
.portal-user-list .mini-row small{
  text-transform:capitalize;
}

/* v18.2 multi-company customer portal scoping */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.portal-company-switch{
  display:flex;
  align-items:center;
  margin:0 2px;
}

.portal-company-switch select{
  max-width:min(280px,42vw);
  min-height:38px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
  background:rgba(255,255,255,.055);
  padding:8px 34px 8px 12px;
  outline:none;
  cursor:pointer;
}

.portal-company-switch select:hover,
.portal-company-switch select:focus{
  border-color:rgb(var(--diary-primary-rgb) / .48);
  box-shadow:0 0 0 3px rgb(var(--diary-primary-rgb) / .14);
}

.company-choice-wrap .auth-panel{
  min-height:360px;
}

.company-choice-list{
  gap:12px;
}

.company-choice-option{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}

.company-choice-option:hover,
.company-choice-option:focus-within{
  border-color:rgb(var(--diary-primary-rgb) / .44);
  background:rgb(var(--diary-primary-rgb) / .08);
  transform:translateY(-1px);
}

.company-choice-option.is-current{
  border-color:rgba(64,214,136,.42);
  background:rgba(64,214,136,.08);
}

.company-choice-option input{
  margin-top:4px;
  accent-color:var(--blue);
}

.company-choice-option span{
  display:grid;
  gap:3px;
  min-width:0;
}

.company-choice-option strong{
  color:var(--text);
  font-weight:850;
}

.company-choice-option small{
  color:var(--muted);
  overflow-wrap:anywhere;
}

@media (max-width: 680px){
  .portal-company-switch,
  .portal-company-switch label,
  .portal-company-switch select{
    width:100%;
    max-width:none;
  }
}

/* v18.3 production polish: clearer scoping, mobile hardening and SEO-friendly public page layout */
.portal-company-switch label{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:min(390px,48vw);
}
.portal-company-switch-label{
  color:var(--muted);
  font-size:.78rem;
  font-weight:850;
  white-space:nowrap;
}
.portal-company-switch select{
  min-width:190px;
}
@media (max-width: 900px){
  .topbar{
    align-items:stretch;
    flex-direction:column;
  }
  .brand{
    justify-content:flex-start;
  }
  .portal-nav{
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    scrollbar-width:thin;
  }
  .portal-nav a{
    white-space:nowrap;
    flex:0 0 auto;
  }
  .portal-company-switch{
    flex:0 0 auto;
  }
  .portal-company-switch label{
    max-width:none;
  }
}
@media (max-width: 680px){
  .shell{
    width:min(100% - 20px,1180px);
    margin-top:18px;
  }
  .card{
    border-radius:18px;
    padding:18px;
  }
  .card-head,
  .public-request-layout,
  .portal-grid.two-one,
  .form-grid,
  .auth-wrap,
  .activation-wrap{
    grid-template-columns:1fr!important;
  }
  .card-head{
    display:grid;
  }
  .card-head .btn,
  .form-actions .btn,
  .public-request-aside .btn{
    width:100%;
  }
  .portal-nav{
    gap:6px;
  }
  .portal-nav a{
    padding:8px 10px;
  }
  .portal-company-switch,
  .portal-company-switch label,
  .portal-company-switch select{
    width:100%;
    max-width:none;
  }
  .portal-company-switch label{
    align-items:stretch;
    flex-direction:column;
    gap:5px;
  }
  .portal-company-switch-label{
    padding-left:4px;
  }
  .btn{
    min-height:44px;
  }
  input,select,textarea{
    font-size:16px; /* prevents iOS input zoom */
  }
}

/* Customer service sheet preview/download polish */
.service-sheet-count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--soft) !important;
  border:1px solid rgb(var(--diary-primary-rgb) / .24);
  background:rgb(var(--diary-primary-rgb) / .10);
  border-radius:999px;
  padding:5px 9px;
  font-weight:800;
}
.service-sheet-list{display:grid;gap:12px}
.service-sheet-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:15px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}
.service-sheet-row strong{display:block;color:var(--text);font-size:1rem;margin-bottom:5px}
.service-sheet-row small{display:block;color:var(--muted);line-height:1.4}
.service-sheet-row-actions,.service-sheet-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.service-sheet-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.service-sheet-toolbar p{margin:0}
.service-sheet-frame-wrap{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:20px;
  background:#fff;
  min-height:70vh;
}
.service-sheet-frame{
  display:block;
  width:100%;
  height:78vh;
  min-height:760px;
  border:0;
  background:#fff;
}
@media(max-width:760px){
  .service-sheet-row{grid-template-columns:1fr;align-items:stretch}
  .service-sheet-row-actions,.service-sheet-actions{justify-content:stretch}
  .service-sheet-row-actions .btn,.service-sheet-actions .btn,.service-sheet-toolbar .btn{width:100%}
  .service-sheet-frame-wrap{min-height:68vh;border-radius:16px}
  .service-sheet-frame{height:72vh;min-height:620px}
}


/* v18.14 Checklist before/after comparison layout */
.portal-before-after-list{
  display:grid;
  gap:16px;
}
.portal-before-after-card{
  border:1px solid var(--border);
  border-radius:20px;
  background:rgba(255,255,255,.035);
  padding:16px;
  display:grid;
  gap:14px;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.portal-before-after-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}
.portal-before-after-head{
  display:grid;
  gap:4px;
}
.portal-before-after-head h3{
  margin:0;
  color:var(--text);
  font-size:1.02rem;
  line-height:1.25;
}
.portal-before-after-head p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}
.portal-before-after-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.portal-before-after-column{
  display:grid;
  gap:12px;
  min-width:0;
}
.portal-media-asset{
  display:grid;
  gap:10px;
  min-width:0;
}
.portal-media-role-label{
  width:max-content;
  min-height:1.65rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.28rem .64rem;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.01em;
  background:rgba(255,255,255,.055);
}
.portal-media-asset-before .portal-media-role-label,
.portal-before-after-before .portal-media-role-label{
  color:var(--diary-info-border-solid);
  border-color:rgb(var(--diary-primary-rgb) / .3);
  background:rgb(var(--diary-primary-rgb) / .14);
}
.portal-media-asset-after .portal-media-role-label,
.portal-before-after-after .portal-media-role-label{
  color:#bbf7d0;
  border-color:rgb(var(--diary-success-rgb) / .28);
  background:rgb(var(--diary-success-rgb) / .12);
}
.portal-media-asset .portal-media-preview{
  min-height:220px;
}
.portal-media-asset .portal-media-preview img,
.portal-media-asset .portal-media-preview video{
  max-height:320px;
}
.portal-media-asset-meta{
  display:grid;
  gap:8px;
}
.portal-media-asset-meta p{
  margin:0;
  color:var(--soft);
  line-height:1.5;
}
.portal-media-asset-meta>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.portal-media-asset-meta small{
  color:var(--muted);
}
@media(max-width:760px){
  .portal-before-after-pair{
    grid-template-columns:1fr;
  }
  .portal-media-asset .portal-media-preview{
    min-height:180px;
  }
}

/* v18.16 invoice detail + portal user management polish */
.invoice-table-actions {
  min-width: 210px;
}

.invoice-context-grid {
  align-items: start;
}

.detail-list {
  display: grid;
  gap: 0.85rem;
}

.detail-list > div {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.detail-list > div:last-child {
  border-bottom: 0;
}

.detail-list span {
  color: var(--muted, var(--diary-disabled));
  font-size: 0.84rem;
  font-weight: 700;
}

.detail-list strong {
  color: var(--text, #f8fafc);
  line-height: 1.45;
}

.detail-list.compact > div {
  padding: 0.55rem 0;
}

.invoice-job-description {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.invoice-job-description h3 {
  margin: 0 0 0.45rem;
}

.invoice-job-description p {
  margin: 0;
  color: var(--text-soft, #cbd5e1);
  line-height: 1.6;
}

.portal-users-grid {
  align-items: start;
}

.portal-user-edit-list {
  display: grid;
  gap: 1rem;
}

.portal-user-edit-card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
}

.portal-user-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.portal-user-edit-head > div {
  display: grid;
  gap: 0.15rem;
}

.portal-user-edit-head span:not(.status-pill) {
  color: var(--muted, var(--diary-disabled));
  font-size: 0.92rem;
}

.portal-user-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.portal-permission-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.6rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
  color: var(--text-soft, #cbd5e1);
  font-weight: 700;
}

.portal-permission-check input {
  width: auto;
}

.portal-permission-check.is-disabled {
  opacity: 0.55;
}

.split-actions {
  justify-content: space-between;
}

@media (max-width: 980px) {
  .portal-user-fields,
  .portal-permission-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .invoice-table-actions {
    min-width: 0;
  }

  .portal-user-fields,
  .portal-permission-grid {
    grid-template-columns: 1fr;
  }

  .portal-user-edit-head,
  .split-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-user-edit-card .btn {
    width: 100%;
  }
}

/* v18.17 portal user accordion + autosave */
.portal-user-accordion-list {
  gap: 0.85rem;
}

.portal-user-accordion {
  padding: 0;
  overflow: hidden;
}

.portal-user-accordion-head {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 1rem;
  text-align: left;
}

.portal-user-accordion-head:hover {
  background: rgba(255,255,255,0.035);
}

.portal-user-main {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.portal-user-main strong,
.portal-user-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-user-head-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.portal-role-pill,
.portal-save-state {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--text-soft, #cbd5e1);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.portal-save-state.is-saving,
.portal-save-state.is-dirty {
  color: var(--diary-warning-border-solid);
  border-color: rgb(var(--diary-warning-rgb) / 0.3);
  background: rgb(var(--diary-warning-rgb) / 0.12);
}

.portal-save-state.is-saved {
  color: #bbf7d0;
  border-color: rgb(var(--diary-success-rgb) / 0.28);
  background: rgb(var(--diary-success-rgb) / 0.12);
}

.portal-save-state.is-error {
  color: var(--diary-danger-border-solid);
  border-color: rgb(var(--diary-danger-rgb) / 0.3);
  background: rgb(var(--diary-danger-rgb) / 0.12);
}

.portal-accordion-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-soft, #cbd5e1);
  transition: transform 180ms ease, background 180ms ease;
}

.portal-user-accordion.is-open .portal-accordion-caret {
  transform: rotate(180deg);
  background: rgba(255,255,255,0.07);
}

.portal-user-accordion-body {
  display: grid;
  gap: 1rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.portal-user-accordion-body[hidden] {
  display: none;
}

.portal-user-autosave-note {
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgb(var(--diary-primary-rgb) / 0.22);
  background: rgb(var(--diary-primary-rgb) / 0.08);
  color: var(--text-soft, #cbd5e1);
  font-size: 0.9rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .portal-user-accordion-head {
    align-items: stretch;
  }

  .portal-user-head-meta {
    justify-content: flex-start;
  }

  .portal-user-main strong,
  .portal-user-main span {
    white-space: normal;
  }
}

/* ==========================================================================
   v19 Trade VIN lookup
   ========================================================================== */
.vin-lookup-grid .stat-grid.compact-stats{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
}
.vin-lookup-form input[name="vrm"]{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:850;
}
.vin-result-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
  margin:0;
}
.vin-result-grid div{
  border:1px solid var(--border);
  border-radius:14px;
  padding:.85rem;
  background:rgba(255,255,255,.035);
}
.vin-result-grid dt{
  margin:0 0 .25rem;
  color:var(--muted);
  font-size:.82rem;
  font-weight:750;
}
.vin-result-grid dd{
  margin:0;
  color:var(--text);
  font-weight:850;
  word-break:break-word;
}
.vin-history-list{
  display:grid;
  gap:.75rem;
}
.vin-history-row small{
  display:block;
  color:var(--muted);
  margin-top:.25rem;
}
.right-stack{
  display:flex;
  gap:.45rem;
  align-items:flex-end;
  justify-content:center;
  flex-direction:column;
}
.status-pill.success{background:rgb(var(--diary-success-rgb) / .16); color:#bbf7d0; border-color:rgb(var(--diary-success-rgb) / .28)}
.status-pill.failed{background:rgb(var(--diary-danger-rgb) / .16); color:var(--diary-danger-border-solid); border-color:rgb(var(--diary-danger-rgb) / .28)}
.status-pill.not_found{background:rgb(var(--diary-warning-rgb) / .16); color:var(--diary-warning-border-solid); border-color:rgb(var(--diary-warning-rgb) / .28)}

/* Customer job media: combined checklist before/after plus customer_portal_media */
.portal-job-media-stack,
.portal-media-section{
  display:grid;
  gap:1rem;
}
.portal-media-section > h3{
  margin:0;
  color:var(--text);
  font-size:1rem;
}
.portal-standalone-media-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.portal-media-standalone-card{
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  overflow:hidden;
}
.portal-media-standalone-body{
  padding:.85rem;
  display:grid;
  gap:.45rem;
}
.portal-media-standalone-body strong{
  color:var(--text);
}
.portal-media-standalone-body p{
  margin:0;
  color:var(--muted);
}

@media (max-width: 760px){
  .vin-result-grid,
  .vin-lookup-grid .stat-grid.compact-stats,
  .portal-standalone-media-grid{
    grid-template-columns:1fr;
  }
  .right-stack{
    align-items:flex-start;
  }
}


/* v19.5 VIN Direct Debit gate */
.vin-dd-card .form-actions,
.vin-dd-card form { margin-top: 16px; }
.vin-dd-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.vin-dd-summary > div { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.035); border-radius: 14px; padding: 12px; }
.vin-dd-summary span { display:block; color: var(--muted,#9fb0c7); font-size: .84rem; margin-bottom: 4px; }
.vin-dd-summary strong { display:block; }
.success-card { border-color: rgb(var(--diary-success-rgb) / .30); }
.error-card { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.06); }
@media (max-width: 820px) { .vin-dd-summary { grid-template-columns: 1fr; } }

/* v19.7 VIN billing setup / automatic credit top-up */
.vin-setup-grid .choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.vin-setup-grid .choice-card{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04);cursor:pointer}
.vin-setup-grid .choice-card input{margin-top:4px}
.vin-setup-grid .choice-card strong{display:block}
.vin-setup-grid .choice-card small{display:block;color:var(--muted,#aab7c8);margin-top:4px;line-height:1.35}
.vin-credit-autotop-card{margin-top:14px;padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(0,0,0,.12)}
.vin-credit-autotop-card h3{margin-top:0}.inline-check{display:flex;align-items:center;gap:8px;margin:8px 0}.compact-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.warning-note{border-color:rgba(250,204,21,.35);background:rgba(250,204,21,.10)}.success-note{border-color:rgb(var(--diary-success-rgb) / .32);background:rgb(var(--diary-success-rgb) / .10)}
@media(max-width:760px){.vin-setup-grid .choice-grid,.compact-form-grid{grid-template-columns:1fr}}


/* v16 Booking self-service: responsive cards and accessible modal treatment */
.wdcp-booking-grid{display:grid;gap:16px}
.wdcp-booking-card{border:1px solid var(--border);border-radius:20px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));box-shadow:0 14px 34px rgba(0,0,0,.14)}
.wdcp-booking-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.wdcp-booking-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.wdcp-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgb(var(--diary-primary-rgb) / .26);background:rgb(var(--diary-primary-rgb) / .11);font-size:.82rem;color:var(--soft)}
.wdcp-chip.warn{border-color:rgb(var(--diary-accent-rgb) / .34);background:rgb(var(--diary-accent-rgb) / .16);color:#ffe2cf}
.wdcp-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.wdcp-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:18px}
.wdcp-modal.is-open{display:flex}
.wdcp-modal-backdrop{position:absolute;inset:0;background:rgba(4,10,18,.8);backdrop-filter:blur(5px)}
.wdcp-modal-card{position:relative;width:min(760px,96vw);max-height:92vh;overflow:auto;background:linear-gradient(180deg,#111b29,#0b121d);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:24px;box-shadow:0 28px 90px rgba(0,0,0,.52)}
.wdcp-modal-card h2{margin-top:0;padding-right:92px}
.wdcp-modal-close{position:absolute;right:18px;top:18px}
.wdcp-section-note{padding:13px 14px;border:1px solid rgb(var(--diary-primary-rgb) / .28);border-radius:14px;background:rgb(var(--diary-primary-rgb) / .09);color:var(--soft)}
.wdcp-late-warning{padding:13px 14px;border:1px solid rgb(var(--diary-accent-rgb) / .34);border-radius:14px;background:rgb(var(--diary-accent-rgb) / .15);margin:12px 0}
.wdcp-hidden{display:none!important}
@media(max-width:700px){.wdcp-booking-head{display:grid}.wdcp-actions .btn{width:100%;justify-content:center}.wdcp-modal{padding:8px;align-items:flex-end}.wdcp-modal-card{width:100%;max-height:94vh;border-radius:22px 22px 0 0;padding:20px}.wdcp-modal-card h2{padding-right:74px}}

/* VIN central volume pricing */
.vin-pack-presets{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.vin-price-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.vin-price-breakdown>div,.vin-tariff-mini-list>div{display:flex;justify-content:space-between;gap:14px;align-items:center;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.035);padding:12px}
.vin-price-breakdown span,.vin-tariff-mini-list span{color:var(--muted,#aab7c8)}
.vin-price-breakdown .vin-price-total{grid-column:1/-1;border-color:rgb(var(--diary-primary-rgb) / .42);background:linear-gradient(135deg,rgb(var(--diary-primary-rgb) / .16),rgb(var(--diary-accent-rgb) / .10));font-size:1.08rem}
.vin-tariff-mini-list{display:grid;gap:8px;margin-top:12px}
.vin-topup-card [data-vin-quote-status].is-error{color:var(--diary-danger-border-solid)}
@media(max-width:760px){.vin-price-breakdown{grid-template-columns:1fr}.vin-price-breakdown .vin-price-total{grid-column:auto}.vin-pack-presets .btn{flex:1 1 calc(50% - 9px)}}

.field-help.is-loading{color:#93c5fd}.field-help.is-success{color:var(--diary-success-border-solid)}.field-help.is-error{color:var(--diary-danger-border-solid)}
.portal-fieldset{margin:0;padding:16px;border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:16px;background:rgba(255,255,255,.025)}.portal-fieldset legend{padding:0 8px;font-weight:800;color:var(--text)}

/* Customer job media grouped into collapsible task cards */
.portal-task-media-list{
  display:grid;
  gap:1rem;
}
.portal-task-media-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-left:4px solid var(--orange);
  border-radius:18px;
  background:rgba(255,255,255,.035);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.portal-task-media-card[open]{
  border-color:rgb(var(--diary-accent-rgb) / .48);
  background:rgba(255,255,255,.05);
  box-shadow:0 16px 38px rgba(0,0,0,.2);
}
.portal-task-media-card > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:74px;
  padding:1rem 1.1rem;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.portal-task-media-card > summary::-webkit-details-marker{display:none}
.portal-task-media-card > summary::after{
  content:'+';
  width:2rem;
  height:2rem;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
  background:rgba(255,255,255,.055);
  font-size:1.15rem;
  font-weight:900;
  line-height:1;
}
.portal-task-media-card[open] > summary::after{content:'−'}
.portal-task-media-card > summary:hover{
  background:rgba(255,255,255,.035);
}
.portal-task-media-card > summary:focus-visible{
  outline:3px solid rgb(var(--diary-primary-rgb) / .45);
  outline-offset:-3px;
}
.portal-task-media-summary-main{
  display:grid;
  gap:.3rem;
  min-width:0;
}
.portal-task-media-summary-main .kicker{
  margin:0;
}
.portal-task-media-summary-main strong{
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:1.05rem;
}
.portal-task-media-count{
  margin-left:auto;
  padding:.32rem .65rem;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.035);
  font-size:.8rem;
  font-weight:800;
  white-space:nowrap;
}
.portal-task-media-body{
  display:grid;
  gap:1.25rem;
  padding:0 1.1rem 1.15rem;
  border-top:1px solid var(--border);
}
.portal-task-media-body > .portal-media-section{
  padding-top:1.1rem;
}
.portal-task-media-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.75rem;
}
.portal-task-media-section-head h3{
  margin:0;
  font-size:1rem;
}
.portal-task-media-section-head span{
  color:var(--muted);
  font-size:.82rem;
}
@media(max-width:760px){
  .portal-task-media-card > summary{
    align-items:flex-start;
    flex-wrap:wrap;
    padding:.9rem;
  }
  .portal-task-media-count{
    order:3;
    width:max-content;
    margin-left:0;
  }
  .portal-task-media-card > summary::after{
    margin-left:auto;
  }
  .portal-task-media-body{
    padding:0 .9rem .95rem;
  }
  .portal-task-media-section-head{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(prefers-reduced-motion:reduce){
  .portal-task-media-card{transition:none}
}