:root{color-scheme:dark;--bg:#06152c;--panel:#092447;--panel2:#051a35;--line:#0798d7;--blue:#07c7ec;--muted:#afc9dc;--gold:#ffc85a;--ok:#5becad;--warning:#ffb167;--ink:#f2f7ff;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 65% 0,#10396d 0,transparent 45%),#031226;color:var(--ink);font-size:16px;line-height:1.55}button,input,select,textarea{font:inherit}a{color:#81e6ff}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.topbar{padding:14px max(16px,calc((100vw - 1200px)/2));background:#041024ee;display:flex;align-items:center;gap:12px;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{display:flex;gap:12px;align-items:center;letter-spacing:.05em}.brand img{width:55px;height:55px;object-fit:contain;border:1px solid var(--blue);border-radius:11px}.brand strong{display:block;line-height:1.2}.brand small{display:block;font-size:.67rem;color:#77dbff;letter-spacing:.14em;margin-top:4px}.topbar nav{display:flex;gap:8px;flex-wrap:wrap}.topbar nav a{display:inline-flex;border:1px solid #246fa0;border-radius:9px;padding:9px 11px;text-decoration:none;color:#e6f9ff;font-size:.84rem}.topbar nav a:hover{background:#164672}.layout{max-width:1240px;margin:auto;padding:18px}.hero{background:linear-gradient(130deg,#081f43,#063c68);border:1px solid var(--line);border-radius:18px;min-height:205px;padding:25px;display:flex;align-items:center;justify-content:space-between;gap:20px}.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin:0 0 9px;line-height:1.05}.hero p{margin:6px 0}.hero-badge{font-size:4.6rem;text-align:center;filter:drop-shadow(0 0 12px #05a2ff)}.hero-badge span{font-size:.68rem;letter-spacing:.12em;display:block;color:var(--gold)}.eyebrow{text-transform:uppercase;color:#6be1ff;letter-spacing:.17em;font-size:.72rem;font-weight:900;margin:0 0 4px}.muted{color:var(--muted)}.fine{font-size:.84rem}.stats,.staff-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.metric,.staff-stats>div{border:1px solid #237db3;background:#061d39;border-radius:12px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;min-height:105px}.metric span{font-size:.88rem;color:#b6d2e8}.metric strong{font-size:2.4rem;color:#83e7ff;line-height:1.2}.quick-nav{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.quick-nav a{background:#114489;color:white;border:1px solid var(--blue);border-radius:12px;text-decoration:none;padding:10px 15px;font-weight:750}.quick-nav a:hover,.button:hover{filter:brightness(1.17)}.panel{background:linear-gradient(150deg,#092649,#05172f);border:1px solid var(--line);border-radius:17px;padding:23px;margin:20px 0;scroll-margin-top:20px}.panel h2{font-size:clamp(1.35rem,3vw,1.9rem);margin:4px 0}.panel-head{display:flex;align-items:start;justify-content:space-between;gap:12px;flex-wrap:wrap}.pill{border:1px solid #1facce;border-radius:99px;color:#adf1ff;padding:4px 9px;font-size:.8rem}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:15px 0}.form-grid label,.search{display:flex;flex-direction:column;gap:6px;font-weight:700}.wide{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea,.search input,.job-editor input,.job-editor select,.job-editor textarea{background:#fff;color:#06152d;border:3px solid #5bcff1;border-radius:10px;min-height:48px;padding:10px 12px;width:100%;min-width:0}.form-grid textarea,.job-editor textarea{resize:vertical;min-height:90px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #26bcef;border-radius:10px;padding:11px 17px;min-height:46px;text-align:center;cursor:pointer;background:#1650a1;color:#fff;text-decoration:none;font-weight:800}.button.primary{background:#09b8db;color:#05283f}.button.small{min-height:38px;padding:7px 12px;font-size:.92rem}.button:disabled{opacity:.55;cursor:not-allowed}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.notice{border:1px solid #d7ad44;background:#162e42;color:#fff5ce;padding:14px 18px;margin:15px 0;border-radius:12px}.notice.error{border-color:#ff8378;background:#3d1b2b}.notice.success{border-color:#56dfaa;background:#083c35}.job-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:13px;margin:14px 0}.job-card{background:#061933;border:1px solid #257bb7;border-radius:13px;padding:16px;min-width:0}.job-card h3{margin:4px 0 10px;font-size:1.2rem}.job-title{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.job-ref{color:#8bc9e6;font-size:.78rem;letter-spacing:.08em}.job-status{display:inline-flex;align-items:center;padding:3px 10px;border:1px solid #4fc7ec;background:#0c405b;border-radius:999px;font-size:.76rem;font-weight:900}.status-completed,.status-ready_for_collection{border-color:#41ce94;background:#104135;color:#adffd7}.status-awaiting_parts{border-color:#ffc269;background:#49331d;color:#ffe1aa}.status-cancelled{border-color:#8e9bb0;background:#303541;color:#c5ccd8}.job-meta{margin:10px 0;display:grid;grid-template-columns:auto 1fr;gap:3px 11px;font-size:.9rem}.job-meta dt{color:#a6cbdd}.job-meta dd{margin:0;min-width:0;overflow-wrap:anywhere;font-weight:600}.progress{display:flex;align-items:center;gap:4px;margin:13px 0}.progress span{flex:1;height:7px;background:#1d486c;border-radius:4px}.progress .done{background:#00d6dc}.job-description{white-space:pre-wrap;overflow-wrap:anywhere}.job-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.job-editor label{font-size:.85rem;color:#bbd9e9;display:block}.job-editor input,.job-editor select,.job-editor textarea{margin-top:4px;font-size:1rem}.job-editor .full{grid-column:1/-1}.job-editor .wide-button{grid-column:1/-1}.staff-create{border:1px solid #178cbb;background:#05284b;border-radius:11px;padding:14px;margin:20px 0}.staff-create summary{cursor:pointer;font-weight:900;color:#85ecff}.staff-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.staff-stats>div{min-height:85px;color:#b4d2e0}.staff-stats strong{font-size:1.9rem;color:white}.search{margin:16px 0}.footer{color:#9cbad0;text-align:center;padding:26px 8px;font-size:.86rem}.footer a{display:inline-block}#booking,#tracker,#workshop{min-height:120px}@media(max-width:680px){.topbar{align-items:start;flex-wrap:wrap;padding:10px}.topbar nav{width:100%}.layout{padding:10px}.hero{padding:20px;min-height:0}.hero-badge{display:none}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.metric{min-height:88px;padding:11px}.metric strong{font-size:1.9rem}.panel{padding:15px;margin:13px 0}.form-grid,.job-editor{grid-template-columns:1fr;gap:13px}.wide,.job-editor .full,.job-editor .wide-button{grid-column:auto}.quick-nav a{flex:1 1 46%;text-align:center}.buttons .button{width:100%}.job-list{grid-template-columns:1fr}}
/* Customer estimate approval and safety messaging. */
.quote-actions{margin:16px 0 3px;padding:14px;border:1px solid #1bd2ff;background:#082746;border-radius:12px}
.quote-actions p{margin:0 0 12px;color:#d5f6ff}
.quote-actions .button{margin:0 8px 9px 0;max-width:100%}
@media(max-width:680px){.quote-actions .button{width:100%;margin-right:0}}

/* Real booking availability calendar and workshop scheduling. */
.booking-availability,.calendar-admin{
 margin:18px 0 22px;padding:18px;border-radius:16px;
 border:1px solid #1c99d4;
 background:linear-gradient(140deg,#05162f 10%,#0b3258 100%);
 box-shadow:inset 0 1px rgba(255,255,255,.07);
}
.booking-availability h3,.calendar-admin h3{margin:0 0 8px;color:#f5fbff;font-size:1.16rem}
.calendar-heading{display:flex;justify-content:space-between;align-items:start;gap:18px;flex-wrap:wrap}
.calendar-heading p{max-width:650px}
.calendar-month-controls{display:flex;align-items:center;gap:12px;white-space:nowrap}
.calendar-month-controls .button{padding:6px 14px;font-size:1.3rem}
.calendar-month-controls strong{min-width:125px;text-align:center}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calendar-weekdays{margin:16px 0 7px;color:#c4d9f0;text-align:center;font-size:.81rem;font-weight:700}
.calendar-day{display:flex;min-width:0;min-height:65px;flex-direction:column;align-items:center;justify-content:center;
gap:5px;background:#06172d;border:1px solid #194267;border-radius:10px;color:#718da8;font:inherit;padding:5px 2px}
.calendar-day strong{font-size:1.08rem}
.calendar-day span{font-size:.67rem}
.calendar-day.is-open{background:#104478;border-color:#35d3ff;color:white;cursor:pointer;box-shadow:inset 0 -2px rgba(0,190,240,.3)}
.calendar-day.is-open span{color:#95f6ff;font-weight:700}
.calendar-day.is-open:hover,.calendar-day.is-open:focus-visible{outline:2px solid #62efff;outline-offset:1px}
.calendar-day.is-selected{background:#0274b2;outline:3px solid #f5c54b;outline-offset:0}
.calendar-day:disabled{cursor:not-allowed;opacity:.72}
.calendar-blank{min-height:50px}
#calendarMessage{min-height:24px;margin:15px 0 10px;color:#afdaf1}
.calendar-error{color:#ffb0a7!important}
.calendar-admin-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px;margin:12px 0}
.calendar-slot-card{border:1px solid #2877a8;border-radius:12px;padding:14px;background:#061c37}
.calendar-slot-card strong{color:#e9faff}
.calendar-slot-card p{color:#b5d9ed;margin:5px 0;font-size:.88rem}
.calendar-slot-card .button{margin-top:6px}
.calendar-availability-switch{display:flex;align-items:center;gap:10px}
.calendar-availability-switch input{width:20px;height:20px;flex:none}
.booking-review-actions{margin:12px 0;border:1px solid #29c9f5;border-radius:12px;padding:12px;background:#09365a}
.booking-review-actions .button{margin:0 6px 8px 0}
.booking-review-actions p{margin:5px 0}
@media(max-width:600px){
 .booking-availability,.calendar-admin{padding:12px;margin:14px 0}
 .calendar-heading{gap:6px}
 .calendar-month-controls{width:100%;justify-content:space-between}
 .calendar-weekdays,.calendar-days{gap:3px}
 .calendar-day{min-height:52px;border-radius:6px}
 .calendar-day strong{font-size:.9rem}
 .calendar-day span{font-size:.55rem}
 .calendar-blank{min-height:40px}
 .booking-review-actions .button{width:100%;margin-right:0}
}

/* Restore horizontal checkbox/label alignment despite generic form-grid styles. */
.calendar-admin .form-grid label.calendar-availability-switch{
 display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;
}
.calendar-admin .form-grid .calendar-availability-switch input[type=checkbox]{
 width:22px;min-width:22px;height:22px;max-width:22px;flex:0 0 22px;margin:0;
}

/* Requested dates must remain selectable even before workshop availability is published.
   Only bright blue dates are actual published capacity; dark dates are enquiry-only. */
.calendar-day.is-request-only{
 background:#0b2944;border-color:#35688e;color:#d2e6f7;
 cursor:pointer;
}
.calendar-day.is-request-only span{color:#a8d7f0;font-weight:600}
.calendar-day.is-request-only:hover,.calendar-day.is-request-only:focus-visible{
 outline:2px solid #a0def5;outline-offset:1px;
}
.calendar-day.is-request-only.is-selected,.calendar-day.is-open.is-selected{
 outline:3px solid #f5c54b;outline-offset:0;background:#15618b;color:#fff;
}
.calendar-legend{display:flex;gap:10px 20px;flex-wrap:wrap;
 margin:14px 0 5px;color:#c5e2f5;font-size:.85rem}
.calendar-legend>span{display:inline-flex;align-items:center;gap:8px}
.legend-swatch{width:15px;height:15px;border:1px solid #32caff;border-radius:4px;background:#104478;display:inline-block}
.legend-swatch.is-request-only{background:#0b2944;border-color:#35688e}
@media(max-width:600px){.calendar-legend{font-size:.75rem;gap:8px}}

/* Authorised workshop route planning on mobile and desktop */
.route-planner{margin:18px 0;border:1px solid #1e8fc9;background:#071d36;padding:15px;border-radius:14px}
.route-planner h3{margin:0 0 6px}
.route-stop{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 6px;border-bottom:1px solid #245f83}
.route-stop p{margin:2px 0;overflow-wrap:anywhere}
.route-stop small{color:#a9d9eb}
.route-move{display:flex;gap:5px;flex-wrap:wrap}
.route-job-actions{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0}
@media(max-width:600px){.route-stop{flex-direction:column;align-items:stretch}.route-move button{min-height:44px}}

/* Professional customer and workshop booking diary */
.pro-diary{margin-top:18px;padding:clamp(12px,2.5vw,24px);
 border:1px solid #258fc6;border-radius:16px;
 background:linear-gradient(135deg,#0b3155 0%,#07182f 100%);
 box-shadow:inset 0 1px 0 #3d87af55}
.pro-diary h3{margin:0 0 7px;font-size:clamp(1.1rem,2.1vw,1.5rem)}
.pro-diary h4{margin:20px 0 8px}
.diary-time-list{display:grid;gap:10px;margin:15px 0}
.diary-slot-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
 border:1px solid #22618c;border-radius:10px;background:#051d35;padding:11px 15px}
.diary-slot-item strong{display:block;color:#c6f5ff}
.diary-slot-item small{display:block;color:#a5cce5;margin-top:4px}
.diary-day-jobs{display:grid;gap:8px;color:#d6e9f8}
.diary-job-line{padding:10px 12px;background:#061e3b;border:1px solid #245a81;border-radius:8px}
.pro-time-choice{background:#071e37;border:1px solid #1c6c98;padding:12px 14px;border-radius:12px}
.pro-time-choice select{display:block;margin-top:8px}
.pro-time-choice small{display:block;font-weight:400;color:#afd8ee;margin-top:9px;line-height:1.5}
#timeChoiceWrap{max-width:100%}
#timeChoiceWrap select{width:100%}
@media(max-width:600px){.pro-diary{padding:12px}.diary-slot-item{align-items:stretch;flex-direction:column}}

/* Calendar day -> repair form: an immediately actionable mobile journey. */
.selected-date-action{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin:12px 0 16px;padding:14px 16px;border:2px solid #43cfff;border-radius:13px;
  background:linear-gradient(120deg,#083d65,#061a33);box-shadow:0 0 12px #0799d744}
.selected-date-action strong{font-size:1.05rem;color:#e8fbff;display:block}
.selected-date-action p{margin:4px 0 0;color:#b9dff1;font-size:.89rem;line-height:1.4}
.selected-date-action .button{flex-shrink:0}
.booking-date-reminder{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border:1px solid #3bc9ee;background:#073455;border-radius:13px;padding:13px 15px;
  scroll-margin-top:20px;flex-wrap:wrap}
.booking-date-reminder strong{display:block;color:white;font-size:1.08rem}
.booking-date-reminder span{display:block;color:#86e6ff;font-size:.9rem;font-weight:650}
.booking-date-reminder p{font-size:.86rem;line-height:1.45;color:#c9e4f3;margin:5px 0 0}
#selectedDateAction[hidden],#bookingDateReminder[hidden]{display:none!important}
.calendar-day.is-request-only{border-color:#4785b4;color:#e1f5ff}
.calendar-day.is-request-only:active,.calendar-day.is-open:active{transform:scale(.95);filter:brightness(1.3)}
@media(max-width:680px){
 .selected-date-action{display:flex;flex-direction:column;align-items:stretch}
 .selected-date-action .button{width:100%;min-height:52px}
 .booking-date-reminder .button{width:100%}
 .calendar-day.is-request-only{min-height:57px}
}