/* ux-supplier.css — page-level styles for the supplier portal, account/auth and help pages. */

/* ── Shared utilities ──────────────────────────────────────── */
.u-hide { display: none; }
.modalbg.u-hide { display: none; }
.u-inline { display: inline; }
.u-flex1 { flex: 1; min-width: 0; }
.u-minw0 { min-width: 0; }
.u-pad0 { padding: 0; overflow: hidden; }
.u-lh2 { line-height: 2; }
.u-lh18 { line-height: 1.8; }
.u-lh15 { line-height: 1.5; }
.u-ital { font-style: italic; }
.u-warn { color: var(--warn); }
.u-ok { color: var(--ok); }
.u-nowrap { white-space: nowrap; }
.u-clickable { cursor: pointer; }
.u-w100 { width: 100%; }
.u-mw280 { max-width: 280px; }
.u-ls { letter-spacing: .06em; }
.u-tr { text-align: right; }
.u-ml8 { margin-left: 8px; }
.u-pre { white-space: pre-wrap; }
.u-break { word-break: break-word; overflow-wrap: anywhere; }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Section header strip inside a padded-0 card */
.sp-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sp-toolbar { padding: 12px 20px; border-bottom: 1px solid var(--line); }
.sp-nomatch { margin: 16px 20px; }
.sp-lead { max-width: 62ch; line-height: 1.55; }

/* Modal footer used across pages */
.sp-modalft { padding: 0 26px 24px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sp-panel-sm { max-width: 520px; }
.sp-panel-xs { max-width: 480px; }
.sp-detail { line-height: 2; font-size: 14px; }
.sp-quote { background: var(--cream); font-style: italic; }

/* Dark "today" hero + ghost-on-dark button */
.sp-hero { background: var(--navy); color: #fff; border: none; }
.sp-hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FF7FA9; }
.sp-hero-title { letter-spacing: -.01em; }
.sp-hero-sub { color: #B4B4BA; }
.btn-ondark { border: 1px solid #3A3A3F; color: #fff; background: transparent; }
.btn-ondark:hover { border-color: #fff; color: #fff; }

/* Step/summary strips */
.sp-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sp-meter { height: 8px; border-radius: 99px; background: var(--cream2); overflow: hidden; }
.sp-meter > span { display: block; height: 100%; background: var(--gold); border-radius: inherit; transition: width .4s; }
.sp-meter.ok > span { background: var(--ok); }

/* Checklist rows (profile completeness etc.) */
.sp-check { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.sp-check:first-child { border-top: none; }
.sp-check .tick { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); align-items: center; justify-content: center; font-size: 11px; margin-right: 8px; flex: none; color: #fff; }
.sp-check.done .tick { background: var(--ok); border-color: var(--ok); }
.sp-check.done .txt { color: var(--muted); }
.sp-check .why { display: block; font-size: 12px; color: var(--muted); margin-left: 26px; }

/* Row lists with dividers */
.sp-row { padding: 14px 0; border-top: 1px solid var(--line); }
.sp-row:first-of-type { border-top: none; }
.sp-row-sm { padding: 8px 0; border-top: 1px solid var(--line); }
.sp-kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }

/* "Next step" callout used on booking/contract cards */
.sp-next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.sp-next .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.sp-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sp-actions form { margin: 0; }
.sp-cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

/* Cards that open a detail modal */
.sp-opens { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.sp-opens:hover { box-shadow: var(--shadow); }
.sp-opens:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 640px) {
  .sp-head, .sp-toolbar { padding-left: 14px; padding-right: 14px; }
  .sp-modalft { padding: 0 18px 18px; }
  .sp-modalft .btn { flex: 1; }
  .sp-actions .btn { flex: 1 1 auto; }
}

.u-pendc { color: var(--pend); }

/* Availability calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-dow { padding: 4px; }
.cal-day { border-radius: 6px; padding: 8px 0; text-align: center; font-size: 13px; cursor: pointer; font-family: inherit; min-height: 38px; border: 1px solid transparent; }
.cal-open { background: var(--cream); border-color: var(--line); color: var(--navy); }
.cal-open:hover { border-color: var(--navy); }
.cal-book { background: var(--gold); color: #fff; font-weight: 700; }
.cal-block { background: var(--warn); color: #fff; }
.cal-today { box-shadow: inset 0 0 0 2px var(--navy); }
.cal-day:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.cal-sw { width: 16px; height: 16px; border-radius: 4px; display: inline-block; flex: none; }
.cal-sw-book { background: var(--gold); }
.cal-sw-block { background: var(--warn); }
.cal-sw-open { background: var(--cream); border: 1px solid var(--line); }
@media (max-width: 860px) { .cal-layout { grid-template-columns: 1fr; } }

/* Dashboard */
.dash-cols { grid-template-columns: 1.5fr 1fr; align-items: start; }
@media (max-width: 860px) { .dash-cols { grid-template-columns: 1fr; } }
.dot-gold { background: var(--gold); }
.dot-muted { background: var(--muted); }
.bg-cream2 { background: var(--cream2); }
.sp-eyebrow-warn { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }

.bg-cream { background: var(--cream); }
.sp-aligntop { align-items: start; }
.sp-price { font-size: 24px; }
.sp-setup { max-width: 640px; display: grid; gap: 16px; }
.sp-steps { margin: 0; padding-left: 18px; display: grid; gap: 8px; line-height: 1.5; }

/* Portfolio gallery */
.sp-gallery { padding: 16px 20px; }
.sp-photo { position: relative; }
.sp-photo img { display: block; width: 100%; height: 110px; object-fit: cover; border-radius: 8px; background: var(--cream2); }
.sp-photo-del { position: absolute; top: 6px; right: 6px; margin: 0; }
.sp-photo-del .btn { padding: 2px 10px; background: rgba(255,255,255,.92); }

/* Payments */
.sp-attn { border-color: rgba(184,20,77,.35); background: linear-gradient(180deg, #fff 0%, #FFF8FB 100%); }
.sp-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-jump a { text-decoration: none; }
.sp-formrow { align-items: flex-end; }
.sp-fld { min-width: 150px; flex: 1 1 150px; }
.sp-fld-wide { flex: 2 1 240px; min-width: 200px; }
.sp-panel-wide { max-width: 620px; width: 100%; max-height: 90vh; overflow-y: auto; }
section[id^="sec-"] { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  .sp-fld, .sp-fld-wide { flex-basis: 100%; }
  .sp-panel-wide { padding: 20px; }
}

.sp-narrow { max-width: 620px; }

/* Account / auth */
.auth-brandlink { text-decoration: none; color: #fff; }
.auth-brandlink:hover { color: #fff; }
.auth-logo { background: var(--gold); }
.auth-brandname { color: #fff; }
.auth-copy { color: #6E6E74; }
.signcard.auth-card { box-shadow: none; border: none; max-width: 400px; padding: 40px 0; }
.signcard.auth-card.auth-card-wide { max-width: 480px; }
.signcard.auth-card-sm { max-width: 440px; }
.auth-back { display: inline-block; margin-bottom: 20px; }
.auth-h1 { margin: 0; }
.auth-okico { width: 54px; height: 54px; margin: 4px auto 16px; font-size: 24px; }
.u-upper { text-transform: uppercase; }
@media (max-width: 520px) {
  .signcard.auth-card { padding: 24px 0; }
  .signcard.auth-card-sm { padding: 24px 20px; }
  .authbrand { min-height: 0; padding: 24px; gap: 16px; }
}
.pwwrap { position: relative; }
.pwwrap .inp { padding-right: 64px; }
.pwtog { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: none; color: var(--gold); font: 600 12.5px var(--sans); padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pwtog:hover { background: var(--cream2); }
.pwtog:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sp-listrow { padding: 11px 0; border-top: 1px solid var(--cream); margin-top: 8px; }
.sp-acctrow { padding: 11px 0; border-bottom: 1px solid var(--cream); gap: 12px; }
.sp-acctrow.last { border-bottom: none; }
.sp-plainbtn { background: none; border: none; cursor: pointer; }

/* Help guides: sticky table of contents + mock snippets */
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.guide-toc { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.guide-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.guide-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--navy); text-decoration: none; line-height: 1.35; }
.guide-toc a:hover { background: var(--cream2); }
.guide-toc a.cur { background: var(--cream2); color: var(--gold); font-weight: 600; }
.guide-toc a.off { opacity: .35; }
.guide-toc a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.guide-h { margin-top: 0; }
.guide-section { scroll-margin-top: 84px; }
@media (max-width: 860px) {
  .guide-layout { grid-template-columns: 1fr; gap: 12px; }
  .guide-toc { position: static; max-height: none; padding: 10px 12px; }
  .guide-toc ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .guide-toc li { flex: none; }
  .guide-toc a { white-space: nowrap; border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; }
}
.mock-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mock-stat { font-size: 20px; font-weight: 700; color: var(--navy); }
.mock-code { font-family: monospace; font-weight: 700; color: var(--navy); }
.mock-btn-sm { padding: 4px 12px; }
.mock-camera { height: 70px; border: 2px dashed var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.mock-qr { width: 90px; height: 90px; margin: 0 auto 10px; border: 1px solid var(--line); border-radius: 8px; background: repeating-linear-gradient(45deg, var(--cream2) 0 6px, #fff 6px 12px); }
.mock-bar { height: 8px; border-radius: 5px; background: var(--cream2); overflow: hidden; }
.mock-bar > span { display: block; height: 100%; }
.mock-bar .w70 { width: 70%; }
.mock-bar .w40 { width: 40%; }
.gold-fill { background: var(--gold); }
.navy-fill { background: var(--navy); }
.u-mr8 { margin-right: 8px; }
@media (max-width: 520px) { .mock-grid4 { grid-template-columns: repeat(2, 1fr); } }

/* END */