/* Garragewala partner app: phone-first, large tap targets, works on old Android browsers. */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Saira; font-weight: 700; font-style: italic; font-display: swap; src: url(../fonts/saira-latin-700-italic.woff2) format('woff2'); }
:root { --c: #1E1F22; --c2: #2A2C31; --o: #F26A1B; --od: #C2490A; --os: #FFF1E8; --s: #5B6270; --m: #F2F3F5; --l: #E3E5E9; --ok: #15803D; --bad: #B42318; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.45; color: #23262B; background: var(--m); }
body.has-shell { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
a { color: var(--od); }
.muted { color: var(--s); }
.small { font-size: .88rem; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.pa-top { background: var(--c); color: #fff; position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px); }
.pa-top-in { max-width: 640px; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pa-brand { display: flex; flex-direction: column; min-width: 0; }
.pa-logo { font-family: Saira, sans-serif; font-style: italic; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.pa-logo b { color: var(--o); font-weight: 700; }
.pa-logo.big { font-size: 2rem; color: var(--c); }
.pa-garage { font-size: .8rem; color: #B9BEC6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-avail { margin: 0; }
.pa-switch { display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .4rem .75rem .4rem .45rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.pa-switch span { width: 26px; height: 16px; border-radius: 999px; position: relative; background: rgba(255,255,255,.35); }
.pa-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.pa-switch.on { background: #1F8A4C; color: #fff; }
.pa-switch.on span::after { left: 12px; }
.pa-switch.off { background: #4A4D55; color: #E2E4E8; }

.pa-main { max-width: 640px; margin: 0 auto; padding: 1rem; }
.pa-banner { padding: .7rem 1rem; font-size: .9rem; text-align: center; }
.pa-banner.bad { background: #FDECEC; color: var(--bad); }
.pa-banner.warn { background: #FEF5E2; color: #7A4D00; border-radius: 12px; margin-bottom: .75rem; }
.pa-flash { padding: .75rem 1rem; border-radius: 12px; margin-bottom: .9rem; font-size: .95rem; background: #E8F6EE; color: #14532D; }
.pa-flash.danger { background: #FDECEC; color: var(--bad); }
.pa-flash.warning { background: #FEF5E2; color: #7A4D00; }

.pa-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; overflow-x: auto; }
.pa-tabs a { flex: 1 0 auto; text-align: center; padding: .6rem .8rem; border-radius: 999px; background: #fff; color: var(--s); text-decoration: none; font-weight: 600; font-size: .92rem; border: 1px solid var(--l); }
.pa-tabs a[aria-current="page"] { background: var(--c); color: #fff; border-color: var(--c); }
.pa-tabs a b { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--o); color: #fff; font-size: .78rem; margin-left: .2rem; }

.pa-card { display: block; background: #fff; border: 1px solid var(--l); border-radius: 16px; padding: 1rem; margin-bottom: .9rem; color: inherit; text-decoration: none; }
a.pa-card:active { background: #FAFAFB; }
.pa-card h2 { font-size: 1.05rem; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pa-card-top { display: flex; gap: .75rem; align-items: flex-start; }
.pa-card-top .grow { flex: 1; min-width: 0; }
.pa-card-top strong { display: block; font-size: 1.02rem; color: var(--c); }
.pa-card-top .muted { display: block; font-size: .88rem; }
.pa-veh { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 12px; background: var(--os); color: var(--od); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.pa-pill { flex: none; padding: .2rem .6rem; border-radius: 999px; background: var(--m); color: var(--s); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pa-pill.new { background: var(--o); color: #fff; }
.pa-pill.ok { background: #E8F6EE; color: var(--ok); }
.pa-pill.bad { background: #FDECEC; color: var(--bad); }
.pa-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .7rem; font-size: .88rem; color: var(--s); }
.pa-meta i { margin-right: .3rem; color: var(--o); }
.pa-count { margin-top: .7rem; font-weight: 700; color: var(--od); font-size: .9rem; }
.pa-count.big { font-size: 1.15rem; text-align: center; margin: 0 0 .8rem; }
.pa-count.late { color: var(--bad); }
.pa-empty { text-align: center; padding: 3rem 1rem; color: var(--s); }
.pa-empty i { font-size: 2.4rem; color: #C3C7CE; }

.pa-back { display: inline-flex; align-items: center; gap: .2rem; margin-bottom: .7rem; text-decoration: none; color: var(--s); font-weight: 600; }
.pa-dl { margin: .9rem 0 0; }
.pa-dl > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--m); font-size: .94rem; }
.pa-dl dt { color: var(--s); }
.pa-dl dd { margin: 0; overflow-wrap: anywhere; }

.pa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .6rem 1rem; border-radius: 12px; border: 1px solid #CDD1D7; background: #fff; color: var(--c); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.pa-btn.primary { background: var(--o); border-color: var(--o); color: #fff; }
.pa-btn.danger { background: #fff; border-color: #F1B8B3; color: var(--bad); }
.pa-btn.ghost { background: transparent; border-color: transparent; color: var(--s); }
.pa-btn.block { width: 100%; margin-top: .6rem; }
.pa-btn:disabled { opacity: .6; }
.pa-actions3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .9rem; }
.pa-actions3 .pa-btn { padding: .5rem .3rem; font-size: .88rem; }
.pa-steps { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .6rem; }
.pa-row { display: flex; gap: .5rem; }
.pa-row > * { flex: 1; }
.pa-row form { margin: 0; }

label { display: block; font-weight: 600; font-size: .9rem; margin: .6rem 0 .3rem; }
input, select, textarea { width: 100%; font: inherit; font-size: 16px; padding: .7rem .8rem; border: 1px solid #CDD1D7; border-radius: 12px; background: #fff; color: inherit; margin-top: .4rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--o); box-shadow: 0 0 0 3px rgba(242,106,27,.18); }
input.otp { font-size: 1.5rem; letter-spacing: .35em; text-align: center; }
.pa-decline { margin-top: .9rem; }
.pa-decline summary { cursor: pointer; color: var(--s); font-weight: 600; text-align: center; padding: .4rem; }
.pa-line { display: grid; grid-template-columns: 1fr 5.5rem; gap: .4rem; padding: .5rem 0; border-top: 1px solid var(--m); }
.pa-line input, .pa-line select { margin-top: 0; padding: .6rem; }
.pa-line input[name="desc[]"] { grid-column: 1 / -1; }
.pa-line input[name="qty[]"] { display: none; }
.pa-est textarea { margin-top: .6rem; }

.pa-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.pa-table td { padding: .55rem 0; border-top: 1px solid var(--m); vertical-align: top; }
.pa-table tr:first-child td { border-top: 0; }
.pa-table td .muted { display: block; font-size: .82rem; }
.pa-table .r { text-align: right; white-space: nowrap; padding-left: .75rem; }
.pa-table .tot td { font-weight: 700; border-top: 2px solid var(--c); }
.pa-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .6rem; }
.pa-photos a { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--m); }
.pa-photos img { width: 100%; height: 100%; object-fit: cover; }
.pa-photos span { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; padding: .15rem .3rem; }
.pa-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.pa-chips span { padding: .3rem .7rem; border-radius: 999px; background: var(--m); font-size: .85rem; }
.pa-month { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.pa-month a, .pa-month span { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; border: 1px solid var(--l); color: var(--c); text-decoration: none; }
.pa-month span { visibility: hidden; }
.pa-sum { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pa-sum span { display: block; font-size: .8rem; color: var(--s); }
.pa-sum strong { font-size: 1.15rem; color: var(--c); }
.pa-sum .hl strong { color: var(--ok); }

.pa-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center; background: #fff; border-top: 1px solid var(--l); padding-bottom: env(safe-area-inset-bottom, 0px); }
.pa-nav a { flex: 1; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem 0 .5rem; text-decoration: none; color: var(--s); font-size: .75rem; font-weight: 600; }
.pa-nav i { font-size: 1.35rem; }
.pa-nav a[aria-current="page"] { color: var(--od); }

.pa-login { max-width: 420px; margin: 2.5rem auto 0; background: #fff; border: 1px solid var(--l); border-radius: 20px; padding: 1.75rem 1.4rem; }
.pa-login h1 { font-size: 1.5rem; margin: .4rem 0 .3rem; }
.pa-login form { margin: 0; }
.pa-login .pa-btn.primary { width: 100%; margin-top: .9rem; }

/* ==== Phase 2.3A: modern layer + dark theme ==== */
:root { --od: #C2410C; --c: #0F172A; --s: #475569; --m: #F1F5F9; --l: #E2E8F0; --card: #fff; --field: #CBD5E1; --head: #0F172A; --shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 22px -14px rgba(15,23,42,.25); }
[data-theme="dark"] { --od: #FB923C; --os: rgba(249,115,22,.14); --s: #94A3B8; --m: #0B1120; --l: #1F2937; --card: #111827; --field: #334155; --head: #F1F5F9; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 22px -14px rgba(0,0,0,.8); color-scheme: dark; }
body { background: var(--m); color: var(--head); transition: background-color .2s ease, color .2s ease; }
.pa-top { background: #0F172A; }
[data-theme="dark"] .pa-top { background: #020617; border-bottom: 1px solid var(--l); }
.pa-card, .pa-login, .pa-tabs a, .pa-month a, .pa-month span, .pa-nav, .pa-btn, input, select, textarea { background: var(--card); border-color: var(--l); }
.pa-card { box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .2s ease; }
a.pa-card:hover { box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 14px 30px -16px rgba(15,23,42,.35); }
a.pa-card:active, .pa-btn:active, .pa-switch:active { transform: scale(.98); }
.pa-card-top strong, .pa-card h2, .pa-sum strong, .pa-login h1, .pa-dl dd { color: var(--head); }
.pa-tabs a[aria-current="page"] { background: var(--head); color: var(--card); border-color: var(--head); }
.pa-btn { color: var(--head); border-color: var(--field); transition: background-color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .2s ease; }
.pa-btn:hover { border-color: var(--o); }
.pa-btn.primary { background: #C2410C; border-color: #C2410C; color: #fff; box-shadow: 0 6px 16px -8px rgba(194,65,12,.6); }
.pa-btn.primary:hover { background: #9A3412; border-color: #9A3412; }
[data-theme="dark"] .pa-btn.primary { background: #F97316; border-color: #F97316; color: #0F172A; }
[data-theme="dark"] .pa-btn.primary:hover { background: #FB923C; border-color: #FB923C; }
.pa-btn.ghost { background: transparent; }
input, select, textarea { color: var(--head); border-color: var(--field); transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(249,115,22,.2); }
.pa-dl > div, .pa-table td, .pa-line { border-color: var(--l); }
.pa-chips span, .pa-pill { background: var(--m); }
.pa-pill.new { background: #C2410C; color: #fff; }
.pa-veh { background: var(--os); color: var(--od); }
.pa-logo.big { color: var(--head); }
.pa-nav a[aria-current="page"] { color: var(--od); }
.pa-theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #E2E8F0; cursor: pointer; }
.pa-theme .bi-sun, [data-theme="dark"] .pa-theme .bi-moon-stars { display: none; }
[data-theme="dark"] .pa-theme .bi-sun { display: inline; }
.pa-top-tools { display: flex; align-items: center; gap: .5rem; }
[data-theme="dark"] .pa-flash { background: rgba(34,197,94,.12); color: #BBF7D0; }
[data-theme="dark"] .pa-flash.danger, [data-theme="dark"] .pa-banner.bad { background: rgba(239,68,68,.12); color: #FECACA; }
[data-theme="dark"] .pa-flash.warning, [data-theme="dark"] .pa-banner.warn { background: rgba(245,158,11,.12); color: #FDE68A; }
@media (prefers-reduced-motion: reduce) { a.pa-card:active, .pa-btn:active, .pa-switch:active { transform: none; } }