/* ==========================================================================================
   app-match.css — the website made to look and feel like the mobile app (26 Oct 2026).
   Jason: "there are a ton of differences between the web app and mobile app. Icon
   differences, sizing and feel differences. Please make them the same as the app."

   Loaded AFTER account.css, so everything here wins. The values come from the app's own
   design tokens (src/theme/palettes.ts, tokens.ts, lift.ts) and from measuring the same
   screens side by side (app web build vs website, same user and data).
   Desktop keeps a wider layout, but with the app's type, weights, buttons, cards and icons.
   ========================================================================================== */

/* ---------- 1. Colour tokens the app uses that the website had slightly different ---------- */
:root { --muted: #5B6472; }                          /* app LIGHT.muted (web had #6B7480) */
:root[data-theme="dark"] { --muted: #8A93A2; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] { --muted: #8A93A2; } }
:root { --r-btn: 12px; }                             /* app radius.md — buttons are rounded squares, not capsules */

/* ---------- 2. Icons (lib/ion.js: the app's Ionicons) ---------- */
svg.ion { display: inline-block; vertical-align: middle; flex-shrink: 0; }
svg.ion .io-s { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 3. Type: the app is bolder. Titles, names, labels and button text are Bold ---------- */
.row-title, .sec, .eyebrow, .ig-name, .area-title, .used-name, .cc-val, .cc-edit,
.sa-title, .sa-radius-label, .btn-signout, .ghost-btn, .ig-tab.on, .map-title { font-weight: 700; }
h1, .scr-title { font-weight: 700; }
strong, b { font-weight: 700; }
.row.unread .convo-last, .convo .convo-last.unread { font-weight: 600; color: var(--ink); }
.row.unread .convo-time { font-weight: 700; }
.lead-eyebrow { font-weight: 700; }
.kv-locked { font-weight: 600; color: var(--ink); }
.qh-who { font-weight: 500; font-size: 14.5px; }

/* status pills: the app's Badge is 11px Bold, 8px corners */
.badge, .jbadge, .pill, .pc-pill { font-weight: 700; }
.badge, .jbadge, .pill { border-radius: 8px; }
.badge-done { background: var(--green-bg); color: var(--green); }   /* "Done" is green in the app */

/* ---------- 4. Buttons: rounded squares, bold labels, the app's colours ---------- */
.btn { border-radius: var(--r-btn); font-weight: 600; }
.btn-primary, .btn-accept, .lc-accept, .sa-save { font-weight: 700; }
.btn-quiet, .lc-decline, .ghost-btn { font-weight: 600; }
.lc-accept, .lc-decline { border-radius: 12px; }
.lc-decline { font-weight: 700; color: var(--muted); }
.mj-seg-btn { border-radius: 12px; }
.mj-seg-btn.on { font-weight: 500; }
.pl-tab { color: var(--muted); }
.pl-cnt { color: var(--muted); }

/* ---------- 5. Bottom tab bar (phone width) and top nav: the app's tab bar ---------- */
.nav-lbl { font-weight: 500; }
.mainnav a { color: var(--muted); }
.mainnav a.on { color: var(--ink); }

/* ---------- 6. Back control: the app's chevron + "Back" (16px, semibold, ink) ---------- */
.back { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); font-size: 15px; font-weight: 600; margin-left: -4px; }
.back .ion { margin-right: 0; }

/* ---------- 7. Icon boxes ---------- */
.place-ic, .lc .place-ic { color: #fff; }
.cta-icon { color: #fff; }

/* ---------- 8. Screen titles: the app's 22px Bold, tight ---------- */
h1, .scr-title, h1.scr-title { font-size: 22px; letter-spacing: -.4px; }

/* ---------- 9. Weights, selector by selector (account.css set these lighter on purpose;
               the app draws them Bold / SemiBold — measured on the same screens) ---------- */
.row-title, .row.unread .row-title, .convo .row-title, .convo .convo-top .row-title,
.doc-name, .used-name, h2.sec, .sec, .chat-name, .chat-aside-name, .area-title,
.empty-state h3, .place-name, .prof-name, .prof-meta h1, .eyebrow, .sa-title, .pl-title,
.ig-name, .lc-title, .paywall-title, .leads-col-head h2, .q-name, .q-amount, .q-banner-h,
.pick strong, .cta-text strong, .nav-text strong, .total-row strong, .review-top strong,
.ig-stat strong, .cred-main strong, .who-name, .report-label { font-weight: 700; }
.kv strong, .kv span:last-child, .btn-link, .link-btn, .pl-open, .pl-btn, .stage-tab .cnt,
.ig-tab, .trade-name, .doc-sub.callout-free, .q-badge, .badge, .jbadge { font-weight: 600; }
.badge, .jbadge, .pill, .pc-pill { font-weight: 700; }
.ig-tab.on { font-weight: 700; }
.quote-note { font-weight: 400; }

/* ---------- 10. Forms: the app's labels (12.5 Bold) and fields (48 tall, 11px corners) ---------- */
label { font-weight: 700; color: var(--ink-soft); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select { border-radius: 11px; }
input[type=email], input[type=password], input[type=text], input[type=tel], input[type=search], input[type=number], input:not([type]) { min-height: 48px; }
/* phones keep 16px in fields (smaller makes iPhones zoom in on tap); with a mouse, the app's 14px */
@media (pointer: fine) { input, textarea, select { font-size: 14px; } }

/* ---------- 11. Sign in / create account / reset: the app's screen ---------- */
.auth-app { max-width: 400px; margin: 0 auto; min-height: calc(100dvh - 120px); display: flex; flex-direction: column; justify-content: center; padding: 24px 4px; }
.auth-app .auth-logo { width: 220px; height: auto; margin: 0 0 4px -6px; display: block; }
.auth-app h1 { font-size: 22px; margin: 0; }
.auth-app > .sub { color: var(--muted); font-size: 14px; margin: 8px 0 12px; }
.auth-app .auth-form label { margin-top: 12px; }
.auth-app .auth-go { width: 100%; height: 52px; margin-top: 24px; font-size: 16px; font-weight: 700; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(226, 0, 40, .2); }
.auth-app .auth-forgot { display: block; margin: 12px auto 0; background: none; border: 0; padding: 4px; cursor: pointer; font: inherit;
  color: var(--muted); font-size: 13.5px; text-decoration: underline; }
.auth-app .auth-switch { display: block; margin: 16px auto 0; background: none; border: 0; padding: 4px; cursor: pointer; font: inherit;
  color: var(--blue); font-size: 14px; font-weight: 600; }
.pw-eye { display: inline-flex; align-items: center; color: var(--muted); }
.auth-app .pw-rules { margin-top: 10px; }

/* ---------- 12. Onboarding: the app's one-screen form (app/onboarding.tsx) ---------- */
.ob-app { justify-content: flex-start; padding-top: 16px; }
.ob-back { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; margin: 0 0 12px -6px; padding: 2px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.ob-app .ob-title { font-size: 26px; font-weight: 700; letter-spacing: -.5px; margin: 0; }
.ob-app > .sub { margin: 8px 0 16px; }
.ob-bar { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; }
.ob-bar span { font-size: 12px; font-weight: 600; color: var(--muted); min-width: 70px; text-align: right; }
.ob-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin: 16px 0 8px; }
.ob-hint { font-size: 12px; color: var(--muted); margin: -4px 0 8px; }
.ob-hint-after { margin: 6px 0 0; }
.ob-use { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  background: var(--surface); color: var(--ink); margin: 0 0 8px; cursor: pointer; font: inherit; }
.ob-use .ob-use-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-use strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.ob-use .ob-use-text span { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ob-use.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ob-use.on strong { color: #fff; } .ob-use.on .ob-use-text span { color: #D7DBE2; }
.ob-readonly { min-height: 48px; display: flex; align-items: center; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--grey-bg);
  color: var(--ink-soft); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 4%; }
.ob-opt { min-height: 52px; border: 1px solid var(--line); border-radius: 11px; padding: 12px 10px; background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ob-opt.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ob-consent-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.ob-check { display: flex; align-items: center; gap: 10px; flex: 1; margin: 0; font-weight: 400; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.ob-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ob-box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; }
.ob-check input:checked + .ob-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-check input:focus-visible + .ob-box { outline: 2px solid var(--blue); outline-offset: 2px; }
.ob-view { font-size: 13.5px; font-weight: 700; color: var(--blue); padding: 0 6px; text-decoration: none; }
.ob-app .auth-go:disabled { opacity: .5; }
.ob-foot { font-size: 12px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 17px; }

/* ---------- 13. Photo picker "Add" tile: the app's camera icon over "Add" ---------- */
.photo-add { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); }
.photo-add span { font-size: 11px; font-weight: 600; }

/* ---------- 14. Payments block: no wrapper card (the app has none); call-out button with its calendar icon ---------- */
.pay-block > .pc:first-child, .pay-block > .pay-hist:first-child, .pay-block > .btn-row:first-child { margin-top: 0; }
.co-open { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; font-weight: 600; }

/* ---------- 15. Audit 5 (27 Oct 2026) ---------- */
/* Job status pill: the app's colours (app/client/job-detail.tsx) — amber when it needs
   the client ("quotes to review", "Is the work finished?"), grey when cancelled. */
.badge-action { background: var(--amber-bg); color: var(--amber-ink); }
.badge-off { background: var(--grey-bg); color: var(--muted); }

/* Payment buttons as in the app (src/components/JobPayments.tsx): side by side, the main
   one navy, a button that can't be used yet greyed (not the red brand colour). */
.pc .pc-actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.pc .pc-actions .btn { flex: 1 1 0; width: auto; min-width: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.pc .pc-actions .btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.pc .pc-actions .btn-primary:hover:not(:disabled) { filter: brightness(1.15); transform: none; box-shadow: none; }
.pc .pc-actions .btn-primary:disabled { opacity: .45; }

/* Tap targets on phones: at least 44 x 44 px for the small header buttons and links,
   without changing how they look — an invisible area around each one takes the tap. */
@media (max-width: 760px) {
  .back, .chat-back, .sa-back, .am-top-back, .cm-editlink, .cm-bin, .cc-edit, .tz-more, .chat-menu,
  .am-hdr-icon, .ob-view, .ob-back { position: relative; }
  .back::after, .chat-back::after, .sa-back::after, .am-top-back::after, .cm-editlink::after, .cm-bin::after,
  .cc-edit::after, .tz-more::after, .chat-menu::after, .am-hdr-icon::after, .ob-view::after, .ob-back::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .cm.cm-job .cm-jhdr-r { gap: 18px; }   /* Edit and the bin each keep their own 44px (was 14px apart) */
  /* the agreement rows are close together: each row is 44px tall instead (10px taller) */
  .ob-consent-row { min-height: 44px; padding: 0; align-items: stretch; }
  .ob-check, .ob-view { display: flex; align-items: center; }
}

/* Dark mode: the Your Trades list (Leads, computer) kept its light background, and the
   blue notes (e.g. Paystack's R1.00 check) kept a dark blue text on the dark blue box. */
:root[data-theme="dark"] .trade-scroll { background: var(--bg); }
:root[data-theme="dark"] .trade-card.is-scrollable::after { background: var(--line); }
:root[data-theme="dark"] .msg-info { color: var(--blue); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .trade-scroll { background: var(--bg); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .trade-card.is-scrollable::after { background: var(--line); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .msg-info { color: var(--blue); }
}