/* ============================================================
   Crew Schedule — styles. Internal tool: minimalist, big touch targets,
   mobile-first. Light theme, brass accent.
   ============================================================ */

:root {
  --ink:        oklch(0.18 0.018 250);
  --ink-soft:   oklch(0.40 0.020 250);
  --ink-mute:   oklch(0.55 0.014 245);
  --bg:         oklch(0.985 0.005 250);
  --surface:    oklch(1 0 0);
  --surface-2:  oklch(0.965 0.006 250);
  --line:       color-mix(in oklch, var(--ink), transparent 88%);
  --line-2:     color-mix(in oklch, var(--ink), transparent 78%);
  --brass:      oklch(0.66 0.125 75);
  --brass-deep: oklch(0.52 0.120 70);
  --brass-soft: color-mix(in oklch, var(--brass), white 55%);

  --avail:        oklch(0.62 0.10 150);
  --avail-bg:     color-mix(in oklch, var(--avail), white 84%);
  --pending:      oklch(0.70 0.13 75);
  --pending-bg:   color-mix(in oklch, var(--pending), white 80%);
  --confirmed:    oklch(0.55 0.12 245);
  --confirmed-bg: color-mix(in oklch, var(--confirmed), white 82%);
  --done:         oklch(0.55 0.02 250);
  --done-bg:      color-mix(in oklch, var(--done), white 86%);
  --cancelled:    oklch(0.55 0.13 25);
  --cancelled-bg: color-mix(in oklch, var(--cancelled), white 86%);
  --danger:       oklch(0.52 0.16 25);

  --display: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

  --hour-h: 56px;
  --time-col-w: 52px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --r: 10px;
  --tap: 44px;       /* minimum touch target */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100%; font-family: var(--body); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--surface); }
[hidden] { display: none !important; }
::selection { background: var(--brass); color: white; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--tap);
  padding: .6rem 1.1rem;
  border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--body); font-weight: 600; font-size: 14px; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 36px; padding: .42rem .8rem; font-size: 13px; }
.btn-lg { min-height: 52px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--brass-deep); color: white; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-2); }
.btn-text { background: none; border: 0; color: var(--brass-deep); padding: .4rem .3rem; font-weight: 600; min-height: 0; }
.btn-text:hover { text-decoration: underline; }
.btn-danger { background: transparent; border-color: color-mix(in oklch, var(--danger), transparent 50%); color: var(--danger); }
.btn-danger:hover { background: color-mix(in oklch, var(--danger), transparent 88%); border-color: var(--danger); }
.icon-btn {
  width: var(--tap); height: var(--tap); border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink); }

/* ---------------- form fields ---------------- */
.field { display: grid; gap: .3rem; }
.field label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.field .optional { text-transform: none; letter-spacing: .02em; opacity: .7; font-weight: 400; }
.field input, .field select, .field textarea {
  min-height: var(--tap);
  border: 1px solid var(--line-2); border-radius: 8px; padding: .6rem .7rem; font-size: 16px; width: 100%;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.field textarea { min-height: 4.5rem; resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brass), transparent 82%); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }

/* ---------------- login ---------------- */
.login-screen { min-height: 100svh; display: grid; place-items: center; padding: 1.5rem; position: relative; overflow: hidden; background: #0E1319; }
.login-shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.login-card {
  position: relative; z-index: 1;
  width: min(380px, 100%);
  background: color-mix(in oklch, white, transparent 4%);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid color-mix(in oklch, white, transparent 78%);
  border-radius: 16px; padding: 2rem 1.75rem; display: grid; gap: 1rem;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55);
}
.login-mark { display: grid; place-items: center; }
.login-card h1 { font-family: var(--display); font-weight: 700; font-size: 28px; text-transform: uppercase; letter-spacing: .01em; margin: 0; text-align: center; color: var(--ink); }
.login-sub { color: var(--ink-mute); margin: -.4rem 0 0; text-align: center; font-size: 13px; }
.login-note { color: var(--ink-mute); font-size: 12px; text-align: center; margin: -.2rem 0 0; }
.login-error { color: var(--danger); font-size: 13px; margin: 0; }
.login-config-warn { position: relative; z-index: 1; margin-top: 1.25rem; max-width: 420px; text-align: center; font-size: 12.5px; color: white; background: rgba(0,0,0,.45); border-radius: 8px; padding: .65rem .85rem; }
.login-config-warn code { background: rgba(255,255,255,.12); padding: 1px 4px; border-radius: 3px; }

/* ---------------- app shell ---------------- */
.app { display: flex; flex-direction: column; min-height: 100svh; }
.app-header {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .65rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.app-brand { display: inline-flex; align-items: center; gap: .5rem; }
.app-title { font-family: var(--display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.week-nav { display: inline-flex; align-items: center; gap: .35rem; }
.week-label { font-family: var(--display); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; margin-left: .4rem; color: var(--ink-soft); }
.app-right { margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.user-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; padding-left: .5rem; border-left: 1px solid var(--line-2); }
.user-chip #userName { font-weight: 600; }
@media (max-width: 720px) {
  .app-title, .week-label { display: none; }
  .app-header { gap: .5rem; padding: .55rem .7rem; }
  .app-right { width: 100%; justify-content: space-between; }
  .user-chip { border-left: 0; padding-left: 0; }
}

/* ---------------- mechanic: big availability banner ---------------- */
.avail-banner {
  width: 100%; border: 0; cursor: pointer; text-align: center;
  padding: 1.1rem 1rem; font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 4.5vw, 30px); text-transform: uppercase; letter-spacing: .03em;
  color: white; background: var(--avail);
  transition: background .2s var(--ease), filter .15s var(--ease);
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.avail-banner .ab-dot { width: .8rem; height: .8rem; border-radius: 50%; background: white; box-shadow: 0 0 0 5px rgba(255,255,255,.25); flex: 0 0 auto; }
.avail-banner .ab-sub { display: block; font-family: var(--body); font-weight: 500; font-size: 13px; text-transform: none; letter-spacing: 0; opacity: .92; }
.avail-banner:hover { filter: brightness(1.05); }
.avail-banner.is-off { background: var(--cancelled); }
@media (max-width: 720px) { .avail-banner { padding: 1.25rem 1rem; } }

/* ---------------- admin: mechanic status chips ---------------- */
.mech-status-bar {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  padding: .7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.msb-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-right: .2rem; }
.mech-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .8rem; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--surface); cursor: pointer; font-size: 13px;
  transition: border-color .12s var(--ease), background .12s var(--ease), box-shadow .12s var(--ease);
  min-height: 40px;
}
.mech-chip:hover { background: var(--surface-2); }
.mech-chip.is-active { border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in oklch, var(--brass), transparent 84%); }
.mech-chip .mc-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; }
.mech-chip.st-avail .mc-dot { background: var(--avail); box-shadow: 0 0 0 3px color-mix(in oklch, var(--avail), transparent 80%); }
.mech-chip.st-off   .mc-dot { background: var(--cancelled); }
.mech-chip .mc-name { font-weight: 700; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; }
.mech-chip .mc-status { color: var(--ink-mute); }
.mech-chip.is-all .mc-name { font-family: var(--body); text-transform: none; letter-spacing: 0; font-weight: 600; }
@media (max-width: 720px) { .mech-status-bar { padding: .6rem .7rem; gap: .45rem; } .mech-chip { font-size: 12px; padding: .45rem .65rem; } }

/* ---------------- calendar: desktop grid ---------------- */
.cal-wrap { flex: 1; padding: .8rem 1rem 6rem; overflow-x: auto; }
.cal {
  display: grid; grid-template-columns: var(--time-col-w) repeat(7, minmax(112px, 1fr));
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface);
  min-width: 880px;
  /* Scroll vertically inside the calendar so the full 24h is reachable while
     day headers stay pinned at the top. Falls back to natural height if the
     viewport is short enough that it doesn't need to scroll. */
  max-height: calc(100svh - 200px); min-height: 420px; overflow-y: auto;
  scrollbar-gutter: stable;
}
.cal-corner, .cal-dayhead {
  border-bottom: 1px solid var(--line-2); padding: .5rem .55rem; background: var(--surface-2); font-size: 12px;
  position: sticky; top: 0; z-index: 5;
}
.cal-corner { border-right: 1px solid var(--line-2); font-weight: 700; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; }
.cal-dayhead { border-right: 1px solid var(--line); text-align: center; }
.cal-dayhead:last-child { border-right: 0; }
.cal-dayhead .dh-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 13px; }
.cal-dayhead .dh-date { color: var(--ink-mute); font-size: 12px; }
.cal-dayhead.is-today { background: color-mix(in oklch, var(--brass), white 80%); }
.cal-dayhead.is-today .dh-name { color: var(--brass-deep); }
.cal-timecol { border-right: 1px solid var(--line-2); position: relative; }
.cal-timecol .tlabel { position: absolute; right: 6px; font-size: 11px; color: var(--ink-mute); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.cal-daycol {
  position: relative; border-right: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour-h) - 1px), var(--line) calc(var(--hour-h) - 1px), var(--line) var(--hour-h));
}
.cal-daycol:last-child { border-right: 0; }
.cal-daycol.is-weekend { background-color: var(--surface-2); }
.cal-daycol.is-today { box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--brass), transparent 55%); }

.avail-band { position: absolute; left: 2px; right: 2px; background: var(--avail-bg); border: 1px solid color-mix(in oklch, var(--avail), transparent 55%); border-radius: 5px; }
.avail-band.is-exc-block { background: repeating-linear-gradient(45deg, color-mix(in oklch, var(--cancelled), white 86%) 0 6px, color-mix(in oklch, var(--cancelled), white 92%) 6px 12px); border-color: color-mix(in oklch, var(--cancelled), transparent 60%); }
.avail-band.is-off { background: repeating-linear-gradient(45deg, color-mix(in oklch, var(--done), white 80%) 0 8px, color-mix(in oklch, var(--done), white 88%) 8px 16px); border: 1px dashed color-mix(in oklch, var(--done), transparent 50%); }
.avail-band .ab-label { position: absolute; top: 2px; left: 5px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in oklch, var(--avail), black 25%); }
.avail-band.is-exc-block .ab-label { color: color-mix(in oklch, var(--cancelled), black 15%); }
.avail-band.is-off .ab-label { color: color-mix(in oklch, var(--done), black 20%); top: 50%; transform: translateY(-50%); left: 0; right: 0; text-align: center; font-size: 12px; }

.job-card {
  position: absolute; border-radius: 6px; padding: 4px 6px; font-size: 12px; line-height: 1.25;
  overflow: hidden; cursor: pointer; z-index: 3; border: 1px solid; box-shadow: 0 1px 3px rgba(0,0,0,.12);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .12s var(--ease);
}
.job-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.18); filter: saturate(1.1); z-index: 4; }
.job-card .jc-time { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; font-size: 11px; }
.job-card .jc-title { font-weight: 700; }
.job-card .jc-meta { opacity: .85; }
.job-card.st-pending   { background: var(--pending-bg);   border-color: color-mix(in oklch, var(--pending), transparent 45%);   color: color-mix(in oklch, var(--pending), black 35%); border-style: dashed; }
.job-card.st-confirmed { background: var(--confirmed-bg); border-color: color-mix(in oklch, var(--confirmed), transparent 45%); color: color-mix(in oklch, var(--confirmed), black 30%); }
.job-card.st-rejected  { background: var(--cancelled-bg); border-color: color-mix(in oklch, var(--cancelled), transparent 35%); color: color-mix(in oklch, var(--cancelled), black 18%); }
.job-card.st-rejected .jc-title { text-decoration: line-through; }
.job-card.st-done      { background: var(--done-bg);      border-color: color-mix(in oklch, var(--done), transparent 45%);      color: color-mix(in oklch, var(--done), black 22%); text-decoration: line-through; opacity: .8; }
.job-card.st-cancelled { background: var(--cancelled-bg); border-color: color-mix(in oklch, var(--cancelled), transparent 50%); color: color-mix(in oklch, var(--cancelled), black 20%); text-decoration: line-through; opacity: .6; }

.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--cancelled); z-index: 5; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -1px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cancelled); }

.cal-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 12px; color: var(--ink-mute); margin: .9rem .2rem 0; align-items: center; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: -2px; margin-right: .3rem; border: 1px solid; }
.lg-avail     { background: var(--avail-bg);     border-color: color-mix(in oklch, var(--avail), transparent 55%); }
.lg-pending   { background: var(--pending-bg);   border-color: color-mix(in oklch, var(--pending), transparent 45%); border-style: dashed; }
.lg-confirmed { background: var(--confirmed-bg); border-color: color-mix(in oklch, var(--confirmed), transparent 45%); }
.lg-rejected  { background: var(--cancelled-bg); border-color: color-mix(in oklch, var(--cancelled), transparent 40%); }
.lg-done      { background: var(--done-bg);      border-color: color-mix(in oklch, var(--done), transparent 45%); }
@media (max-width: 720px) { .cal-wrap { padding: .6rem .6rem 6rem; overflow-x: hidden; } .cal { display: none; } .cal-legend { font-size: 11px; gap: .7rem; } }

/* ---------------- calendar: mobile agenda ---------------- */
.agenda { display: none; }
@media (max-width: 720px) { .agenda { display: grid; gap: .9rem; } }
.agenda-day { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.agenda-day.is-today { border-color: color-mix(in oklch, var(--brass), transparent 40%); box-shadow: 0 0 0 2px color-mix(in oklch, var(--brass), transparent 86%); }
.agenda-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .7rem .85rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.agenda-day-head .ad-date { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 16px; }
.agenda-day-head.is-today .ad-date { color: var(--brass-deep); }
.agenda-day-head .ad-avail { font-size: 12px; color: var(--ink-mute); text-align: right; }
.agenda-day-head .ad-avail.is-off { color: var(--cancelled); font-weight: 600; }
.agenda-day-head .ad-avail.is-free { color: color-mix(in oklch, var(--avail), black 25%); }
.agenda-jobs { display: grid; }
.agenda-job { display: grid; grid-template-columns: 64px 1fr auto; gap: .7rem; align-items: start; padding: .75rem .85rem; border-top: 1px solid var(--line); cursor: pointer; background: var(--surface); }
.agenda-job:first-child { border-top: 0; }
.agenda-job:active { background: var(--surface-2); }
.agenda-job .aj-time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-soft); }
.agenda-job .aj-time small { display: block; font-weight: 400; color: var(--ink-mute); font-size: 11px; }
.agenda-job .aj-title { font-weight: 600; }
.agenda-job .aj-meta { color: var(--ink-mute); font-size: 12.5px; margin-top: .1rem; }
.agenda-job .aj-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .45rem; border-radius: 5px; align-self: center; white-space: nowrap; border: 1px solid; }
.aj-badge.st-pending   { background: var(--pending-bg);   border-color: color-mix(in oklch, var(--pending), transparent 45%);   color: color-mix(in oklch, var(--pending), black 35%); border-style: dashed; }
.aj-badge.st-confirmed { background: var(--confirmed-bg); border-color: color-mix(in oklch, var(--confirmed), transparent 45%); color: color-mix(in oklch, var(--confirmed), black 30%); }
.aj-badge.st-rejected  { background: var(--cancelled-bg); border-color: color-mix(in oklch, var(--cancelled), transparent 40%); color: color-mix(in oklch, var(--cancelled), black 18%); }
.aj-badge.st-done      { background: var(--done-bg);      border-color: color-mix(in oklch, var(--done), transparent 45%);      color: color-mix(in oklch, var(--done), black 22%); }
.aj-badge.st-cancelled { background: var(--cancelled-bg); border-color: color-mix(in oklch, var(--cancelled), transparent 50%); color: color-mix(in oklch, var(--cancelled), black 20%); }
.agenda-empty { padding: .8rem .85rem; color: var(--ink-mute); font-size: 13px; font-style: italic; border-top: 1px solid var(--line); }
.agenda-day-head + .agenda-empty { border-top: 0; }

/* ---------------- FABs (mobile-friendly floating actions) ---------------- */
.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg); font-size: 26px; line-height: 1;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s var(--ease), background .15s var(--ease);
}
.fab:hover { background: var(--brass-deep); color: white; }
.fab:active { transform: scale(0.94); }
.fab-2 { bottom: 84px; background: var(--surface); color: var(--brass-deep); border: 1.5px solid var(--line-2); font-size: 20px; }
.fab-2:hover { background: var(--surface-2); border-color: var(--brass); color: var(--brass-deep); }
/* admin payment-link FAB — bottom slot (mechanic's "+ booking" FAB is hidden for admin) */
.fab-pay { bottom: 16px; background: #635BFF; color: #fff; font-size: 22px; } /* Stripe purple */
.fab-pay:hover { background: #4b45d6; color: #fff; }

/* ---------------- modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(20,24,30,.45); backdrop-filter: blur(2px); }
.modal-card {
  position: relative; width: min(560px, 100%); max-height: calc(100svh - 1.5rem); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem 1.35rem 1.35rem;
  display: grid; gap: .85rem; box-shadow: 0 30px 80px -20px rgba(20,24,30,.4);
}
.modal-card-wide { width: min(720px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal-head h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 22px; margin: 0; }
.modal-error { color: var(--danger); font-size: 13px; margin: 0; }
.modal-actions { display: flex; gap: .55rem; align-items: center; margin-top: .3rem; flex-wrap: wrap; }
.modal-actions-spacer { flex: 1; min-width: .5rem; }
.modal-actions .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .modal { padding: 0; place-items: end stretch; }
  .modal-card { border-radius: 16px 16px 0 0; max-height: 92svh; padding: 1.1rem 1rem 1.2rem; }
  .modal-actions .btn { flex: 1; }
}

.job-avail-hint { font-size: 13px; padding: .5rem .7rem; border-radius: 8px; border: 1px solid; }
.job-avail-hint.ok   { background: var(--avail-bg);     border-color: color-mix(in oklch, var(--avail), transparent 55%);   color: color-mix(in oklch, var(--avail), black 28%); }
.job-avail-hint.warn { background: var(--pending-bg);   border-color: color-mix(in oklch, var(--pending), transparent 45%); color: color-mix(in oklch, var(--pending), black 35%); }
.job-avail-hint.bad  { background: var(--cancelled-bg); border-color: color-mix(in oklch, var(--cancelled), transparent 45%); color: color-mix(in oklch, var(--cancelled), black 22%); }

/* job-detail modal */
.jd-body { display: grid; gap: 0; }
.jd-row { display: grid; grid-template-columns: 92px 1fr; gap: .8rem; align-items: baseline; font-size: 14px; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.jd-row:last-child { border-bottom: 0; }
.jd-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.jd-v { color: var(--ink); }

/* availability panel */
.avail-section { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .3rem; }
.avail-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.avail-section h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 16px; margin: 0 0 .25rem; }
.avail-hint { color: var(--ink-mute); font-size: 12.5px; margin: 0 0 .7rem; }
.avail-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .4rem; }
.avail-list:empty::before { content: "Nothing yet."; color: var(--ink-mute); font-size: 13px; font-style: italic; }
.avail-list li { display: flex; align-items: center; gap: .6rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; font-size: 13px; }
.avail-list li .al-main { font-weight: 600; }
.avail-list li .al-sub { color: var(--ink-mute); }
.avail-list li .al-spacer { flex: 1; }
.avail-list li.is-block { background: color-mix(in oklch, var(--cancelled), white 90%); border-color: color-mix(in oklch, var(--cancelled), transparent 75%); }
.avail-add { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.avail-add select, .avail-add input { min-height: 40px; border: 1px solid var(--line-2); border-radius: 8px; padding: .42rem .5rem; font-size: 14px; }
.avail-add input[type=time] { width: 116px; }
.avail-add input[type=date] { width: 160px; }
.avail-dash { color: var(--ink-mute); font-size: 12px; }
.avail-note-in { flex: 1; min-width: 120px; }
.avail-del { color: var(--danger); background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 .3rem; min-height: var(--tap); }
.avail-del:hover { color: oklch(0.42 0.18 25); }
@media (max-width: 560px) { .avail-add, .avail-add-exc { flex-direction: column; align-items: stretch; } .avail-add input[type=time], .avail-add input[type=date] { width: 100%; } }

/* toast */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(20,24,30,.3); z-index: 200; animation: toastIn .25s var(--ease); max-width: calc(100vw - 2rem); text-align: center; }
.toast.is-err { background: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ============================================================
   Leads tab + new_lead status (added with Formspree intake)
   ============================================================ */
:root { --lead: oklch(0.64 0.16 42); --lead-bg: color-mix(in oklch, var(--lead), white 84%); }

/* view switcher (admin) */
.view-tabs { display: flex; gap: .4rem; padding: .55rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 57px; z-index: 19; }
@media (max-width: 720px) { .view-tabs { top: 53px; } }
.view-tab {
  appearance: none; border: 1px solid var(--line-2); background: transparent;
  border-radius: 999px; padding: .5rem 1.1rem; font: 600 13px var(--body); cursor: pointer;
  color: var(--ink-soft); min-height: 40px; display: inline-flex; align-items: center; gap: .45rem;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.view-tab:hover { background: var(--surface-2); }
.view-tab.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tab-count { background: var(--lead); color: white; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.view-tab.is-active .tab-count { background: white; color: var(--ink); }

/* leads list */
.leads-wrap { flex: 1; padding: 1rem 1rem 6rem; max-width: 880px; width: 100%; margin: 0 auto; }
.leads-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.leads-head h2 { font: 700 22px var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.leads-tools { display: inline-flex; gap: .5rem; align-items: center; }
.leads-list { display: grid; gap: .7rem; }
.leads-empty { color: var(--ink-mute); font-size: 14px; font-style: italic; padding: 2rem 0; text-align: center; }

.lead-card {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--lead);
  border-radius: 12px; padding: .85rem 1rem; cursor: pointer;
  display: grid; gap: .5rem; transition: border-color .12s var(--ease), box-shadow .12s var(--ease), transform .1s var(--ease);
}
.lead-card:hover { border-color: var(--lead); box-shadow: 0 6px 20px -8px color-mix(in oklch, var(--lead), transparent 60%); }
.lead-card:active { transform: translateY(1px); }
.lead-top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.lead-name { font: 700 16px var(--display); text-transform: uppercase; letter-spacing: .01em; margin-right: auto; }
.lead-age { font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
.lead-del { width: 30px; height: 30px; min-height: 0; font-size: 15px; line-height: 1; padding: 0; color: var(--ink-mute); opacity: .55; }
.lead-del:hover { color: #e5484d; opacity: 1; background: color-mix(in oklch, #e5484d, transparent 88%); }
.lead-meta { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.lead-meta b { color: var(--ink); font-weight: 600; }
.lead-source { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklch, var(--lead), black 25%); background: var(--lead-bg); border: 1px solid color-mix(in oklch, var(--lead), transparent 55%); border-radius: 5px; padding: .15rem .45rem; }
/* modular slot — Quo click-to-call / SMS thread mounts here later */
.lead-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding-top: .15rem; }
.lead-actions .btn { min-height: 38px; }
.lead-actions a.lead-call { text-decoration: none; }

/* new_lead status on calendar cards / badges / legend */
.job-card.st-new_lead, .aj-badge.st-new_lead { background: var(--lead-bg); border-color: color-mix(in oklch, var(--lead), transparent 45%); color: color-mix(in oklch, var(--lead), black 30%); }
.lg-new_lead { background: var(--lead-bg); border-color: color-mix(in oklch, var(--lead), transparent 45%); }

/* hide week-nav when on Leads tab */
.app.leads-mode .week-nav { display: none; }
.lead-bottom { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 480px) { .lead-bottom { flex-direction: column; align-items: stretch; } .lead-actions { justify-content: stretch; } .lead-actions .btn { flex: 1; } }

/* ============================================================
   Stripe payment link — job-modal billing strip + badges
   ============================================================ */
.job-billing { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .7rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.pay-hint { font-size: 12px; color: var(--ink-mute); margin: .2rem 0 0; }
.pay-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .55rem; border-radius: 6px; border: 1px solid; }
.pay-badge.s-unsent  { background: var(--surface);      border-color: var(--line-2);                                            color: var(--ink-mute); }
.pay-badge.s-sent    { background: var(--pending-bg);   border-color: color-mix(in oklch, var(--pending), transparent 45%);    color: color-mix(in oklch, var(--pending), black 35%); }
.pay-badge.s-paid    { background: var(--avail-bg);     border-color: color-mix(in oklch, var(--avail), transparent 45%);      color: color-mix(in oklch, var(--avail), black 28%); }
.pay-badge.s-refunded{ background: var(--cancelled-bg); border-color: color-mix(in oklch, var(--cancelled), transparent 45%);  color: color-mix(in oklch, var(--cancelled), black 22%); }
/* tiny $ chip on calendar/agenda cards when a job has billing */
.jc-pay, .aj-pay { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.jc-pay.s-paid, .aj-pay.s-paid { color: color-mix(in oklch, var(--avail), black 25%); }
.jc-pay.s-sent, .aj-pay.s-sent { color: color-mix(in oklch, var(--pending), black 30%); }

/* ============================================================
   Partner quote requests (Window) + admin quote strip
   ============================================================ */
.jq-select { flex: 1; min-width: 9rem; border: 1px solid var(--line-2); border-radius: 8px; padding: .4rem .5rem; font-size: 13px; background: var(--surface); }
.quote-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; display: grid; gap: .7rem; }
.quote-card .qc-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.quote-card .qc-veh { font-weight: 700; font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; }
.quote-card .qc-age { font-size: 12px; color: var(--ink-mute); }
.quote-card .qc-meta { font-size: 13px; color: var(--ink-soft); }
.quote-card .qc-meta b { color: var(--ink); }
.quote-card .qc-form { display: grid; gap: .55rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.quote-card .qc-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.quote-card .qc-row .field { flex: 1; min-width: 8rem; }
.quote-card input { min-height: 40px; border: 1px solid var(--line-2); border-radius: 8px; padding: .45rem .6rem; font-size: 15px; width: 100%; }
.quote-card .qc-have { font-size: 12px; color: color-mix(in oklch, var(--avail), black 25%); font-weight: 600; }

/* ---------------- Payments tracker (admin tab #3) ---------------- */
.payments-wrap { padding: .9rem 1rem 6rem; }
.payments-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 .2rem 1.1rem; }
.ps-card { display: flex; flex-direction: column; gap: .15rem; padding: .35rem .1rem; border-top: 1px solid var(--line-2); }
.ps-card .ps-num { font: 700 28px/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ps-card .ps-lbl { font-size: 11.5px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; }
.ps-card.is-paid .ps-num { color: color-mix(in oklch, var(--avail), black 18%); }
.ps-card.is-awaiting .ps-num { color: var(--brass-deep); }
@media (max-width: 560px) { .payments-stats { grid-template-columns: 1fr 1fr; } .ps-card:nth-child(3) { grid-column: 1 / -1; } }

.payments-filters { display: flex; gap: .35rem; margin: 0 .1rem .75rem; flex-wrap: wrap; }
.pf-pill { background: transparent; border: 1px solid var(--line-2); color: var(--ink-mute); font: 600 12.5px var(--body); letter-spacing: .02em; padding: .35rem .75rem; border-radius: 999px; cursor: pointer; transition: all .15s var(--ease); }
.pf-pill:hover { color: var(--ink); border-color: var(--ink-mute); }
.pf-pill.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.payments-list { display: grid; }
.payment-row { display: grid; grid-template-columns: 14px 1fr auto auto; gap: .6rem .75rem; padding: .8rem .25rem; border-top: 1px solid var(--line); align-items: center; }
.payment-row:last-child { border-bottom: 1px solid var(--line); }
.payment-row .pr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-mute); align-self: center; justify-self: center; box-shadow: 0 0 0 2px color-mix(in oklch, var(--ink-mute), transparent 85%); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.payment-row.s-sent .pr-dot { background: var(--brass); box-shadow: 0 0 0 2px color-mix(in oklch, var(--brass), transparent 80%); }
.payment-row.s-paid .pr-dot { background: var(--avail); box-shadow: 0 0 0 3px color-mix(in oklch, var(--avail), transparent 75%); }
.payment-row.s-refunded .pr-dot { background: var(--cancelled); box-shadow: 0 0 0 2px color-mix(in oklch, var(--cancelled), transparent 80%); }
.payment-row .pr-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.payment-row .pr-name { font: 700 16px var(--display); letter-spacing: .01em; text-transform: uppercase; }
.payment-row .pr-sub { font-size: 13px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-row .pr-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.payment-row .pr-amt { font: 700 17px var(--body); font-variant-numeric: tabular-nums; color: var(--ink); }
.payment-row .pr-status { font-size: 11.5px; color: var(--ink-mute); letter-spacing: .02em; }
.payment-row .pr-status .pr-brand { display: inline-block; margin-left: .45rem; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-soft); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.payment-row .pr-actions { display: flex; gap: .35rem; }
.payment-row .pr-actions .btn { min-height: 32px; padding: .25rem .65rem; font-size: 12.5px; }
.payment-row.is-fresh { animation: pay-row-in .26s var(--ease) both; }
.payment-row.is-just-paid .pr-dot { animation: paid-ring 800ms var(--ease) 1; }
@media (max-width: 640px) {
  .payment-row { grid-template-columns: 12px 1fr; }
  .payment-row .pr-meta, .payment-row .pr-actions { grid-column: 2; align-items: flex-start; flex-direction: row; gap: .5rem; }
  .payment-row .pr-actions { margin-top: .35rem; }
}

/* ---------------- "Paid" celebration — vault stamp toast ---------------- */
.toast.is-paid {
  background: var(--ink); color: var(--bg); border: 0;
  box-shadow: 0 22px 50px -16px rgba(0,0,0,.45), inset 3px 0 0 var(--brass);
  padding: .85rem 1rem .85rem .95rem; min-width: 280px; max-width: 380px;
  display: grid; grid-template-columns: 48px 1fr auto; gap: .75rem; align-items: center;
  border-radius: 12px; cursor: pointer;
  animation: paid-slide-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.toast.is-paid.is-leaving { animation: paid-slide-out 280ms cubic-bezier(0.33, 0, 0.67, 0) forwards; }
.toast.is-paid .pt-coin { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; }
.toast.is-paid .pt-coin::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--brass); opacity: 0;
  animation: paid-ring 800ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}
.toast.is-paid .pt-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.toast.is-paid .pt-paid { font: 700 11px var(--display); letter-spacing: .18em; color: var(--brass); text-shadow: 0 1px 0 var(--brass-deep); }
.toast.is-paid .pt-name { font: 700 15px var(--body); color: var(--bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast.is-paid .pt-name .pt-amt { font-variant-numeric: tabular-nums; margin-left: .35rem; color: color-mix(in oklch, var(--avail), white 35%); font-weight: 700; }
.toast.is-paid .pt-sub { font-size: 11.5px; color: color-mix(in oklch, var(--bg), black 22%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast.is-paid .pt-dismiss { background: transparent; border: 0; color: color-mix(in oklch, var(--bg), black 30%); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 .25rem; align-self: start; }
.toast.is-paid .pt-dismiss:hover { color: var(--bg); }
.paid-stack { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column-reverse; gap: .55rem; z-index: 80; pointer-events: none; }
.paid-stack .toast.is-paid { position: static; pointer-events: auto; }

@keyframes paid-ring     { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2.0); opacity: 0; } }
@keyframes paid-slide-in { from { transform: translateX(120%); } to { transform: translateX(0); } }
@keyframes paid-slide-out{ from { transform: translateX(0); } to { transform: translateX(120%); } }
@keyframes pay-row-in    { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .toast.is-paid, .toast.is-paid .pt-coin::after, .payment-row.is-fresh, .payment-row.is-just-paid .pr-dot { animation: none !important; }
  .toast.is-paid { opacity: 0; transition: opacity .25s linear; }
  .toast.is-paid.is-shown { opacity: 1; }
}

/* Availability modal — mechanic switcher for admin (override the muted payments-filter look) */
.avail-switcher { display: flex; gap: .4rem; margin: .55rem 0 .4rem; flex-wrap: wrap; }
.avail-switcher .pf-pill {
  padding: .42rem .9rem; font-size: 13px; font-weight: 600;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
}
.avail-switcher .pf-pill:hover { background: var(--surface-2); border-color: var(--ink-mute); color: var(--ink); }
.avail-switcher .pf-pill.is-active { background: var(--brass); color: #fff; border-color: var(--brass); }
.avail-switcher .pf-pill.is-active:hover { background: var(--brass-deep); border-color: var(--brass-deep); }

/* ---------------- mechanic close-out strip (the "mark done" faucet) ---------------- */
.closeout-strip { margin: .7rem 1rem 0; border: 1px solid color-mix(in oklch, var(--brass), transparent 55%); border-radius: 12px; background: color-mix(in oklch, var(--brass), white 86%); overflow: hidden; }
.co-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; flex-wrap: wrap; }
.co-head .co-title-lbl { font: 700 13px var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--brass-deep); }
.co-head .co-count { background: var(--brass-deep); color: #fff; font: 700 12px var(--body); min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .35rem; }
.co-head .co-hint { font-size: 12px; color: var(--ink-soft); margin-left: auto; }
.co-row { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-top: 1px solid color-mix(in oklch, var(--brass), transparent 75%); background: var(--surface); }
.co-row.is-overdue { background: color-mix(in oklch, var(--brass), white 92%); }
.co-info { flex: 1; min-width: 0; cursor: pointer; }
.co-job { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-when { font-size: 12.5px; color: var(--ink-mute); }
.co-row.is-overdue .co-when { color: var(--brass-deep); font-weight: 600; }
.co-done { min-height: 40px; padding: .45rem 1rem; white-space: nowrap; }
.co-dismiss { width: 34px; height: 34px; min-height: 0; font-size: 18px; line-height: 1; padding: 0; color: var(--ink-mute); opacity: .65; }
.co-dismiss:hover { color: #e5484d; opacity: 1; background: color-mix(in oklch, #e5484d, transparent 88%); border-color: color-mix(in oklch, #e5484d, transparent 65%); }
@media (max-width: 720px) { .closeout-strip { margin: .6rem .6rem 0; } .co-head .co-hint { width: 100%; margin-left: 0; } }

/* agenda one-tap done */
.aj-right { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; }
.aj-right .aj-done { min-height: 34px; padding: .3rem .7rem; }

/* toast with an action button (Undo) */
.toast.has-action { display: inline-flex; align-items: center; gap: .85rem; }
.toast .toast-action { background: transparent; border: 1px solid color-mix(in oklch, white, transparent 55%); color: #fff; font-weight: 700; font-size: 13px; padding: .3rem .7rem; border-radius: 7px; cursor: pointer; }
.toast .toast-action:hover { background: color-mix(in oklch, white, transparent 80%); }

/* ---------------- job proof photos ---------------- */
.job-photos { margin-top: .2rem; }
.jp-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; margin-bottom: .4rem; }
.jp-grid { display: flex; gap: .5rem; flex-wrap: wrap; }
.jp-thumb { display: block; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.jp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }