/* Small additions on top of Pico's classless styles. Mobile first: the layout is
   a single column and only widens on larger screens. */

.inline-form { display: inline; margin: 0; }
.inline-form button { margin: 0; padding: 0.25rem 0.75rem; }

.message { padding: 0.75rem 1rem; margin-bottom: 1rem; }
.message-success { border-left: 4px solid var(--pico-color-green-500, #2f9e44); }
.message-error { border-left: 4px solid var(--pico-color-red-500, #e03131); }

.field-error { color: var(--pico-del-color, #e03131); display: block; }

.language-switcher { display: flex; gap: 0.5rem; align-items: center; }
.language-switcher select { width: auto; margin: 0; }

/* --- navigation drawer ------------------------------------------------- */
/* A <details> element, so it works without a script. Pico styles details as
   an accordion; that look is undone here and the panel is pinned to the left
   edge instead. The backdrop is the summary's own ::before: it is part of the
   toggle, so a tap on it closes the drawer for free. */
.sidenav { border: 0; margin: 0; padding: 0; }
.sidenav > summary {
  list-style: none; cursor: pointer; margin: 0; padding: 0.25rem;
  display: flex; align-items: center; line-height: 0; border-radius: var(--pico-border-radius);
}
.sidenav[open] > summary { margin-bottom: 0; }
.sidenav > summary::after, .sidenav > summary::marker { display: none; content: none; }
.sidenav > summary::-webkit-details-marker { display: none; }
.sidenav > summary:focus-visible { outline: 2px solid var(--pico-primary); }
.sidenav[open] > summary::before {
  content: ""; position: fixed; inset: 0; z-index: 10;
  background: rgba(0, 0, 0, 0.45);
}
.sidenav-panel {
  /* Pico lays a <nav> out as a row; this one is a column. */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  position: fixed; inset: 0 auto 0 0; z-index: 11;
  width: min(18rem, 85vw); padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
  overflow-y: auto; box-shadow: 0.25rem 0 1rem rgba(0, 0, 0, 0.25);
  background: var(--pico-background-color); color: var(--pico-color);
}
.sidenav-shop { margin: 0 0 1rem; padding: 0 0.5rem; font-size: 0.9rem; }
.sidenav-panel ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: block; }
.sidenav-panel li { display: block; padding: 0; margin: 0; }
.sidenav-panel li a {
  display: block; padding: 0.75rem 0.5rem; text-decoration: none;
  border-radius: var(--pico-border-radius);
}
.sidenav-panel li a:hover { background: var(--pico-secondary-focus, rgba(0, 0, 0, 0.06)); }
.sidenav-panel li a[aria-current="page"] { font-weight: 700; color: var(--pico-primary); }
.sidenav-logout { margin: auto 0 0; }
.sidenav-logout button { width: 100%; margin: 0; }

.brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.brand-name { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; }
.logo-mark { width: 1.75rem; height: 1.75rem; flex: none; }

.status-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.status-filter a { font-size: 0.85rem; }
.status-filter a[aria-current="page"] { font-weight: bold; }
.brand-filter { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.brand-filter label { margin: 0; font-size: 0.85rem; }
.brand-filter select { margin: 0; width: auto; min-width: 12rem; }

.service-card { margin-bottom: 1rem; }
.service-card h3 { margin-bottom: 0.25rem; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  background: var(--pico-secondary-background, #cfd4da);
  color: var(--pico-secondary-inverse, #fff);
}

.setup-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 700px) {
  .setup-grid { grid-template-columns: 1fr 1fr; }
}

table { display: block; overflow-x: auto; }

/* --- technician wizard ------------------------------------------------- */

.wizard-header { margin-bottom: 1.5rem; }
.step-hint { color: var(--pico-muted-color); }

.work-timer { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.work-timer .timer-value { font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 700; }

/* The stepper scrolls sideways rather than wrapping: on a phone a seven-step
   wizard would otherwise push the form off the screen. */
.stepper { overflow-x: auto; margin-bottom: 1rem; }
.stepper ol {
  display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0 0 0.25rem;
  scroll-snap-type: x proximity;
}
.stepper li { scroll-snap-align: start; }
.step-pill {
  display: flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  padding: 0.35rem 0.75rem; border-radius: 1rem; font-size: 0.8rem; text-decoration: none;
  background: var(--pico-secondary-background, #cfd4da); color: var(--pico-secondary-inverse, #fff);
}
.step-pill.is-done { background: var(--pico-color-green-500, #2f9e44); }
.step-pill.is-locked { opacity: 0.45; }
.step-pill[aria-current="step"] { background: var(--pico-primary, #1095c1); font-weight: 700; }
.step-pill .step-number { font-weight: 700; }
@media (max-width: 699px) {
  /* Room for seven pills: the number alone identifies the step, and its title
     is already the page heading. */
  .step-pill:not([aria-current="step"]) .step-title { display: none; }
}

/* The customer picker's matches: a radio per known rider, "new" last. */
.customer-matches { margin: 0 0 1rem; padding: 0; border: 0; }
.customer-matches label { display: block; padding: 0.35rem 0; margin: 0; }
.customer-matches label small { display: block; margin-left: 1.75rem; color: var(--pico-muted-color); }
.customer-matches .step-hint { margin: 0.25rem 0; font-size: 0.85rem; }

.confirm-gate { display: flex; align-items: center; gap: 0.5rem; margin: 1.5rem 0; }
.confirm-gate input[type="checkbox"] { transform: scale(1.3); }

.wizard-nav {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: 0.75rem; justify-content: space-between;
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--pico-background-color); border-top: 1px solid var(--pico-muted-border-color);
}
.wizard-nav > * { flex: 1; margin: 0; min-height: 3rem; }

.setup-before { background: var(--pico-code-background-color); }
.setup-readonly { margin: 0; }

.photo-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; }
.photo-grid li { width: 7rem; }
.photo-grid img { width: 100%; border-radius: 0.25rem; }
.photo-grid button { width: 100%; padding: 0.15rem; font-size: 0.7rem; margin: 0.25rem 0 0; }

.recap section { border-bottom: 1px solid var(--pico-muted-border-color); padding-bottom: 0.5rem; }
.recap section:last-child { border-bottom: none; }
.recap header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.recap dl { margin-bottom: 0; }

.wizard-progress { font-size: 0.75rem; color: var(--pico-muted-color); }

/* --- customer directory and the public service history ------------------ */

.customer-search { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.customer-search label { margin: 0; font-size: 0.85rem; }
.customer-search input { margin: 0; }
.customer-search button { margin: 0; width: auto; }

.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; }

/* The history is one page of collapsed cards, so the summary has to read as a
   row: title on the left, date on the right, Pico's marker at the end. */
details.service-card > summary {
  display: flex; align-items: baseline; gap: 0.75rem; cursor: pointer;
}
details.service-card > summary .service-date {
  margin-left: auto; font-size: 0.85rem; color: var(--pico-muted-color);
}
details.service-card h4 { margin: 1rem 0 0.25rem; font-size: 1rem; }

.current-service { border-left: 4px solid var(--pico-primary, #1095c1); }

/* Public photos are not deletable, so the grid's per-item button rule does not
   apply - the caption takes its place. */
.photo-grid small { display: block; font-size: 0.7rem; color: var(--pico-muted-color); }

.public-link input { font-family: var(--pico-font-family-monospace, monospace); font-size: 0.8rem; }

/* The QR code keeps a white quiet zone whatever the theme: a code drawn on the
   dark-mode background does not scan. */
.qr-block { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.qr-block > div { flex: 1 1 14rem; }
.qr-block p { margin-bottom: 0.5rem; }
.qr-code { width: 10rem; height: 10rem; background: #fff; padding: 0.5rem; border-radius: var(--pico-border-radius, 0.25rem); }