/* SYGNAL partners portal — partner-only styles. Everything shared with the
 * admin console (buttons, dialogs, sheets, tiles, the shell/tabbar/rail/
 * sidebar, cards, forms, badges, toasts) comes from /ui.css, copied verbatim
 * from hosting/admin (admin_tests/static/partners-check.mjs fails if the two
 * ever drift). This file holds only what the admin kit has no component for:
 * the login screen, quote cards, the composer's price box, the Ontario map
 * stage, and small spacing utilities ui.css deliberately leaves to the page.
 *
 * Mobile-first throughout: the base rule is the PHONE layout; @media(min-width)
 * rules only ADD for wider screens, never override a phone rule a wider rule
 * forgot to restate (the trap PtnTablet.dc.html and the brief both call out).
 */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--ui-bg); color: var(--ui-ink); font-family: var(--ui-font); -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

/* ── Login ── */
#login-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pf-login-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow-2); padding: 32px 24px; max-width: 400px; width: 100%; }
.pf-brand { font-family: var(--ui-font); font-weight: 800; font-size: 20px; letter-spacing: 0.3px; color: var(--ui-ink); }
.pf-brand .accent { color: var(--ui-brand); }
.pf-brand-sub { color: var(--ui-slate); font-size: 13px; margin: 4px 0 22px; }
.pf-field { margin-bottom: 16px; }
.pf-field:last-child { margin-bottom: 0; }
.pf-two-col { display: flex; gap: 12px; }
.pf-two-col > .pf-field { flex: 1; margin-bottom: 16px; }
@media (max-width: 559.98px) { .pf-two-col { flex-direction: column; gap: 0; } }

/* ── App shell additions (ui-shell/ui-tabbar/ui-nav/ui-main come from ui.css) ── */
.pf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: calc(10px + var(--ui-safe-top)) 16px 10px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
@media (min-width: 768px) { .pf-topbar { margin-left: calc(var(--ui-nav-w) + var(--ui-safe-left)); padding-left: 24px; padding-right: calc(24px + var(--ui-safe-right)); } }
.pf-topbar__who { display: flex; align-items: center; gap: 10px; }
.pf-avatar { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--ui-brand-50); color: var(--ui-brand); font-weight: 700; font-size: 14px; text-decoration: none; flex: none; }
.pf-topbar__dealer { font-size: 12px; color: var(--ui-slate); }

/* ── Home ── */
.pf-section-title { font-size: 15px; font-weight: 700; color: var(--ui-ink); margin: 24px 0 10px; }
.pf-section-title:first-child { margin-top: 0; }
.pf-banner-row { margin-bottom: 4px; }
.pf-chart-card { padding: 16px; }
.pf-chart-box { position: relative; height: 220px; }
.pf-chart-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .pf-chart-row { grid-template-columns: 1fr 1fr; } }
.pf-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ui-slate); justify-content: center; margin-top: 8px; }
.pf-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pf-renewal-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--ui-line); font-size: 14px; }
.pf-renewal-row:last-child { border-bottom: none; }
.pf-material-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ui-line); text-decoration: none; color: inherit; }
.pf-material-row:last-child { border-bottom: none; }

/* ── Quotes list ── */
.pf-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pf-toolbar .ui-search { flex: 1; min-width: 160px; }
/* Quotes: search and All | Mine share ONE row (FLOWS-OTHER.md §4.2), and the
   placeholder "Customer, contact, email, PO" must not cut off at 402px. With
   the kit's spacing the search showed "Customer, contact, email, P". Chrome
   also lays out a search field's clear button while it is invisible (~15px
   the text cannot use), so the room needed is text 220 + clear 15 + padding
   16 = ~251px. On a phone the row's gap, the search's padding and the
   toggle's own padding tighten (the toggle's two options stay at their 44px
   floor), which leaves ~10px spare at 390 and ~22px at 402; the search's
   flex-basis is that ~251px plus a little, so on a screen too narrow for
   both on one row the toggle wraps under the search instead of the text
   being cut. browser/partners.mjs measures every placeholder AS RENDERED. */
.pf-toolbar .pf-quotes-search { flex: 1 1 256px; min-width: 0; }
@media (max-width: 767.98px) {
  .pf-toolbar { gap: 4px; }
  .pf-toolbar .pf-quotes-search { padding: 0 6px 0 10px; }
  .pf-toolbar #mine-toggle { padding: 0 2px; }
  .pf-toolbar #mine-toggle .ui-seg__opt { padding: 0 6px; }
}
.pf-qcard { display: block; width: 100%; text-align: left; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow-1); padding: 14px 16px; margin-bottom: 10px; font-family: var(--ui-font); color: inherit; cursor: pointer; }
.pf-qcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.pf-qcard__org { font-size: 15px; font-weight: 700; }
.pf-qcard__contact { font-size: 13px; color: var(--ui-slate); margin-top: 2px; word-break: break-word; }
.pf-qcard__total { font-size: 16px; font-weight: 800; white-space: nowrap; }
.pf-qcard__items { font-size: 13px; color: var(--ui-slate); margin: 8px 0; }
.pf-qcard__meta { font-size: 12px; color: var(--ui-muted); }
.pf-qcard__note { font-size: 12px; color: var(--ui-warning); font-weight: 600; margin-top: 6px; }
.pf-qcard__action { margin-top: 10px; }
.pf-collapse-h { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ui-slate); padding: 14px 2px 8px; cursor: pointer; background: none; border: 0; width: 100%; text-align: left; font-family: var(--ui-font); }
.pf-collapse-h .ui-i { transition: transform .15s; }
.pf-collapse-h.is-open .ui-i { transform: rotate(90deg); }
.pf-empty { text-align: center; color: var(--ui-muted); font-size: 14px; padding: 28px 12px; }
.pf-badge-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--ui-brand-50); color: var(--ui-brand); margin-right: 6px; }

/* ── Quote detail page ── */
.pf-qd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pf-qd-total { font-size: 20px; font-weight: 800; white-space: nowrap; }
.pf-qd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 14px 0; }
.pf-qd-meta .k { font-size: 11px; font-weight: 700; color: var(--ui-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.pf-qd-meta .v { font-size: 14px; margin-top: 2px; word-break: break-word; }
.pf-qd-primary { margin: 16px 0; }
.pf-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pf-qd-group { font-size: 11px; font-weight: 700; color: var(--ui-muted); text-transform: uppercase; letter-spacing: 0.4px; margin: 14px 0 6px; }
.pf-breakdown-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; color: var(--ui-slate); }
.pf-breakdown-row.strong { font-weight: 700; color: var(--ui-ink); border-top: 1px solid var(--ui-line); margin-top: 6px; padding-top: 8px; }
.pf-settled-note { background: var(--ui-success-50); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); padding: 12px 14px; font-size: 13px; color: var(--ui-slate); margin-bottom: 14px; }

/* ── Composer ── */
.pf-card-group { margin-bottom: 14px; }
.pf-lrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ui-line); flex-wrap: wrap; }
.pf-lrow:last-child { border-bottom: none; }
.pf-lrow .nm { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pf-lrow .unit { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ui-slate); flex-wrap: wrap; }
.pf-num-input { width: 96px; padding: 7px 9px; font-size: var(--ui-input-size); text-align: right; font-weight: 600; border-radius: var(--ui-radius-control); border: 1.5px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-ink); min-height: 44px; }
.pf-qty-input { width: 56px; text-align: center; }
.pf-hold-label { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; white-space: nowrap; color: var(--ui-muted); cursor: pointer; }
.pf-preview { border: 1px solid var(--ui-brand-50); background: var(--ui-brand-50); border-radius: var(--ui-radius-card); padding: 14px 16px; margin-bottom: 16px; }
.pf-sticky-bar { position: sticky; bottom: calc(var(--ui-tabbar-h) + var(--ui-safe-bottom)); left: 0; right: 0; background: var(--ui-surface); border-top: 1px solid var(--ui-line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); margin: 16px -16px -16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 5; }
@media (min-width: 768px) { .pf-sticky-bar { position: static; margin: 16px 0 0; border-radius: var(--ui-radius-card); border: 1px solid var(--ui-line); } }
.pf-sticky-bar__total { font-size: 18px; font-weight: 800; }
.pf-attrib-banner { display: inline-flex; align-items: center; gap: 8px; background: var(--ui-success-50); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-control); padding: 8px 14px; margin-bottom: 16px; font-size: 13px; }

/* ── Customers ── */
.pf-ccard { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); box-shadow: var(--ui-shadow-1); padding: 14px 16px; margin-bottom: 10px; }
.pf-ccard__name { font-size: 15px; font-weight: 700; }
.pf-ccard__meta { font-size: 13px; color: var(--ui-slate); margin-top: 4px; }
.pf-ccard__renewal { font-size: 13px; color: var(--ui-warning); font-weight: 600; margin-top: 6px; }

/* ── Map ── */
.pf-map-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-map-stage { height: 320px; border-radius: var(--ui-radius-control); overflow: hidden; background: #eaf1f8; }
@media (min-width: 768px) { .pf-map-stage { height: 440px; } }
.pf-map-hint { font-size: 11px; color: var(--ui-muted); margin-top: 8px; }
.pf-unresolved-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--ui-line); }
.pf-unresolved-row:last-child { border-bottom: none; }

/* ── Account ── */
.pf-account-row { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--ui-line); text-decoration: none; color: inherit; background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; font-family: var(--ui-font); font-size: 15px; cursor: pointer; }
.pf-account-row:last-child { border-bottom: none; }
.pf-account-row__sub { font-size: 12px; color: var(--ui-muted); margin-top: 2px; }

/* ── Dialog extras (toast host position, recipient list spacing) ── */
.sg-recipients-list { max-height: 44vh; overflow-y: auto; margin-bottom: 8px; }
.sg-dialog-busy .ui-dialog { pointer-events: none; opacity: 0.85; }

/* ── Pipe / badge colours not covered by generic ui-badge tones ── */
.pf-badge-won { color: var(--ui-success); }
.pf-badge-lost { color: var(--ui-muted); }

/* ── Added 2026-10-01 (finisher pass): states, draft, sold strip, sheets ── */
/* A sheet body built from markup (js/dialogs.js adds this class). */
.ui-dialog__body.pf-sheet-body { white-space: normal; }

/* First-load skeleton: grey bars where the numbers will be, never a 0. */
#loading-bar .ui-tiles { margin-bottom: 16px; }
.pf-skel-card { display: flex; flex-direction: column; gap: 12px; }

/* Kit empty state inside a card or list: a little tighter than a whole page. */
.pf-empty-state { padding: 24px 12px; }

/* Home tile sub-line: visible at every width (kit .ui-tile__meta hides below 768). */
.pf-tile-sub { display: block; font-size: 13px; line-height: 18px; color: var(--ui-slate); overflow-wrap: anywhere; }

/* What you've sold: three tiles, one row at every width (no orphan tile). */
.pf-sold { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .pf-sold { gap: var(--ui-gap); } }
.pf-sold__tile { min-height: 0; padding: 12px; gap: 4px; justify-content: flex-start; }
@media (min-width: 768px) { .pf-sold__tile { min-height: 0; padding: 16px 20px; } }
.pf-sold__tile .ui-tile__label { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
.pf-sold__rev { font-size: 12px; line-height: 16px; color: var(--ui-slate); overflow-wrap: anywhere; }
@media (min-width: 768px) { .pf-sold__tile .ui-tile__label { font-size: 15px; line-height: 22px; } .pf-sold__rev { font-size: 13px; line-height: 18px; } }

/* Sign-in-again sheet: password field with its Show button beside it. */
.pf-pass-row { display: flex; gap: 8px; align-items: center; }
.pf-pass-row .ui-input { flex: 1; min-width: 0; }

/* Map: the engine's zoom buttons are 38px; every target here is 44. */
.pf-map-stage .omap-ctrls button { width: 44px; height: 44px; }
.pf-place-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 8px 4px; background: none; border: 0; border-bottom: 1px solid var(--ui-line); font-family: var(--ui-font); font-size: 15px; color: var(--ui-ink); text-align: left; cursor: pointer; }
.pf-place-row:last-child { border-bottom: 0; }
.pf-place-deals { display: flex; flex-direction: column; }
.pf-place-deal { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main amt" "main open"; align-items: center; gap: 2px 12px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--ui-line); color: var(--ui-ink); text-decoration: none; }
.pf-place-deal:last-child { border-bottom: 0; }
.pf-place-deal__main { grid-area: main; overflow-wrap: anywhere; }
.pf-place-deal__amt { grid-area: amt; font-weight: 700; white-space: nowrap; text-align: right; }
.pf-place-deal__open { grid-area: open; color: var(--ui-brand); font-weight: 600; font-size: 14px; text-align: right; }

/* Every control a rep taps or types into is >= 44px, with >= 16px text below
   768 (iOS Safari zooms the page on focus otherwise). browser/partners.mjs
   measures every visible control, not just the kit's classes. */
.pf-mini-select { width: auto; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--ui-line); border-radius: var(--ui-radius-control); background: var(--ui-surface); color: var(--ui-ink); font-family: var(--ui-font); font-size: var(--ui-input-size); }
.pf-lrow label.nm { min-height: 44px; cursor: pointer; }
a.pf-renewal-row { min-height: 44px; }
.pf-qd-meta .v a { display: inline-flex; align-items: center; min-height: 44px; }
/* setup/reset "Show": the kit's .ui-control__suffix is decoration
   (pointer-events: none); here it is a real button and must take a tap. */
button.ui-control__suffix { pointer-events: auto; min-width: 44px; justify-content: center; right: 4px; padding: 0 10px; border: 0; background: none; color: var(--ui-brand); cursor: pointer; }