/* PlanApprove portal brand layer (André 2026-10-20): every portal — architect, QS, staff, sign-in, estate & council —
   in the planapprove.online style: Inter / Inter Tight, the logo's blue + green, deep blue for strong surfaces,
   light blue tints instead of grey, logo always in colour. Loaded LAST on every portal page; the <body data-pa="…">
   marker picks the page family. Estate/council branding (hoa.js / muni.js set CSS variables inline on <html>, e.g.
   Woodhill) still wins over these defaults, so estates keep their own look. */
:root {
  --pa-blue: #0058E6; --pa-blue-d: #0A2F7A; --pa-sky: #12A6EE; --pa-green: #2EA62A; --pa-green-b: #3CC830;
  --pa-ink: #0B1B3A; --pa-ink-2: #34445F; --pa-muted: #64738C; --pa-line: #DCE5F2; --pa-tint: #F2F7FF; --pa-green-t: #EDF9EB;
  --pa-grad: linear-gradient(135deg, #0A2F7A 0%, #0058E6 58%, #12A6EE 100%);
  --pa-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pa-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
}
body[data-pa] { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body[data-pa] :focus-visible { outline: 2px solid var(--pa-blue); outline-offset: 2px; }
body[data-pa] ::selection { background: #CFE0FF; }

/* ── Sign in / register / reset (architect + staff) ──────────────────────── */
body[data-pa="auth"] {
  --navy: var(--pa-blue-d); --navy-deep: #06225C; --teal: var(--pa-blue); --teal-dim: var(--pa-blue-d); --green: var(--pa-green);
  --line-dark: var(--pa-line); --muted: var(--pa-muted); --serif: var(--pa-display); --sans: var(--pa-sans); --mono: var(--pa-sans);
  --paper: var(--pa-tint); --ink: var(--pa-ink); --line: var(--pa-line); --charcoal: var(--pa-blue-d); --accent: var(--pa-blue); --accent-dim: var(--pa-blue-d);
  background: radial-gradient(60% 50% at 85% 0%, rgba(18,166,238,.14), transparent 70%), linear-gradient(180deg, var(--pa-tint) 0%, #fff 70%) !important;
  color: var(--pa-ink) !important; font-family: var(--pa-sans) !important;
}
body[data-pa="auth"]::after { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--pa-blue), var(--pa-sky) 55%, var(--pa-green-b)); }
body[data-pa="auth"] .word img { height: 40px !important; }
body[data-pa="auth"] .cap { font-family: var(--pa-sans) !important; font-weight: 600; letter-spacing: .12em; color: var(--pa-blue) !important; }
body[data-pa="auth"] .card { background: #fff !important; border: 1px solid var(--pa-line) !important; border-top: 3px solid var(--pa-blue) !important; border-radius: 8px;
  box-shadow: 0 24px 56px -28px rgba(10,47,122,.35); color: var(--pa-ink); }
body[data-pa="auth"] .card h1, body[data-pa="auth"] h1 { font-family: var(--pa-display) !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--pa-ink) !important; font-size: 26px !important; }
body[data-pa="auth"] .card p.sub, body[data-pa="auth"] .sub { color: var(--pa-muted) !important; font-size: 14px !important; }
body[data-pa="auth"] .field label { font-family: var(--pa-sans) !important; font-weight: 600; font-size: 12px !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--pa-ink-2) !important; }
body[data-pa="auth"] .field input, body[data-pa="auth"] .field select, body[data-pa="auth"] .field textarea {
  background: var(--pa-tint) !important; color: var(--pa-ink) !important; border: 1px solid var(--pa-line) !important; border-radius: 6px !important;
  padding: 12px 13px !important; font-family: var(--pa-sans) !important; font-size: 16px !important; }
body[data-pa="auth"] .field input:focus, body[data-pa="auth"] .field select:focus, body[data-pa="auth"] .field textarea:focus { border-color: var(--pa-blue) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(0,88,230,.15); outline: none; }
body[data-pa="auth"] .field select option { color: var(--pa-ink); background: #fff; }
body[data-pa="auth"] .btn { font-family: var(--pa-sans) !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600 !important;
  background: var(--pa-blue) !important; color: #fff !important; border-radius: 6px !important; padding: 14px !important; box-shadow: 0 10px 22px -12px rgba(0,88,230,.7); }
body[data-pa="auth"] .btn:hover { background: var(--pa-blue-d) !important; }
body[data-pa="auth"] .foot { font-family: var(--pa-sans) !important; font-size: 13.5px !important; color: var(--pa-muted) !important; }
body[data-pa="auth"] .foot a, body[data-pa="auth"] a.link { color: var(--pa-blue) !important; font-weight: 600; }
body[data-pa="auth"] .err { font-family: var(--pa-sans) !important; font-size: 13.5px !important; color: #B42318 !important; }
body[data-pa="auth"] .banner { font-family: var(--pa-sans) !important; font-size: 13.5px !important; }
body[data-pa="auth"] .banner.ok { color: #1E6B1B !important; background: var(--pa-green-t) !important; }

/* ── Architect / QS / practice app (pa.css pages) ────────────────────────── */
body[data-pa="app"] {
  --navy: var(--pa-blue-d); --teal: var(--pa-blue); --teal-2: var(--pa-blue-d); --teal-soft: #EBF2FF; --bg: var(--pa-tint); --line: var(--pa-line);
  --muted: var(--pa-muted); --text: var(--pa-ink); --radius: 8px;
  font-family: var(--pa-sans) !important; background: var(--pa-tint) !important; color: var(--pa-ink);
}
body[data-pa="app"] h1, body[data-pa="app"] .h1, body[data-pa="app"] h2, body[data-pa="app"] .h2, body[data-pa="app"] h3 { font-family: var(--pa-display) !important; font-weight: 600 !important; letter-spacing: -.015em; }
body[data-pa="app"] h1, body[data-pa="app"] .h1 { font-size: 28px; }
body[data-pa="app"] .hdr { background: #fff !important; border-bottom: 1px solid var(--pa-line) !important; box-shadow: 0 1px 0 rgba(10,47,122,.04); height: 64px; position: sticky; }
body[data-pa="app"] .hdr::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--pa-blue), var(--pa-sky) 55%, var(--pa-green-b)); }
body[data-pa="app"] .hdr img { height: 28px; }
body[data-pa="app"] .hdr nav a { color: var(--pa-ink-2) !important; font-weight: 500; font-size: 14px; }
body[data-pa="app"] .hdr nav a.on, body[data-pa="app"] .hdr nav a:hover { background: #EBF2FF !important; color: var(--pa-blue) !important; }
body[data-pa="app"] .hdr-user, body[data-pa="app"] .hdr-user * { color: var(--pa-ink-2); }
body[data-pa="app"] .hdr-user strong { color: var(--pa-ink) !important; }
body[data-pa="app"] .btn-logout { border-color: var(--pa-line) !important; color: var(--pa-blue) !important; background: #fff !important; }
body[data-pa="app"] .btn-logout:hover { border-color: var(--pa-blue) !important; }
body[data-pa="app"] .btn { font-family: var(--pa-sans) !important; font-weight: 600 !important; letter-spacing: 0 !important; border-radius: 6px !important; }
body[data-pa="app"] .btn:not(.btn-ghost):not(.btn-danger) { background: var(--pa-blue); }
body[data-pa="app"] .btn:not(.btn-ghost):not(.btn-danger):hover { background: var(--pa-blue-d); }
body[data-pa="app"] .btn-ghost { color: var(--pa-blue) !important; border-color: #B9CDF1 !important; }
body[data-pa="app"] .btn-ghost:hover { background: #EBF2FF !important; border-color: var(--pa-blue) !important; }
body[data-pa="app"] .card { border-radius: 8px; border-color: var(--pa-line); box-shadow: 0 1px 2px rgba(10,47,122,.04); }
body[data-pa="app"] a { color: var(--pa-blue); }
body[data-pa="app"] a.btn:not(.btn-ghost):not(.btn-danger) { color: #fff; }
body[data-pa="app"] a.btn-ghost { color: var(--pa-blue); }
body[data-pa="app"] .field input:focus, body[data-pa="app"] .field select:focus, body[data-pa="app"] .field textarea:focus { outline: none; border-color: var(--pa-blue); box-shadow: 0 0 0 3px rgba(0,88,230,.14); }
body[data-pa="app"] input, body[data-pa="app"] select, body[data-pa="app"] textarea { font-size: 16px; } /* no iOS zoom on focus */
@media (min-width: 768px) { body[data-pa="app"] input, body[data-pa="app"] select, body[data-pa="app"] textarea { font-size: 14px; } }

/* ── Staff portal (index / portals) ──────────────────────────────────────── */
body[data-pa="staff"] {
  --paper: var(--pa-tint); --paper-dim: #E7EFFB; --ink: var(--pa-ink); --muted: var(--pa-muted); --line: var(--pa-line); --line-dark: #1C3E7E;
  --charcoal: var(--pa-blue-d); --accent: var(--pa-blue); --accent-dim: var(--pa-blue-d); --ok: var(--pa-green); --serif: var(--pa-display); --sans: var(--pa-sans); --mono: var(--pa-sans);
  font-family: var(--pa-sans) !important; background: var(--pa-tint) !important; color: var(--pa-ink);
}
body[data-pa="staff"] h1, body[data-pa="staff"] h2, body[data-pa="staff"] h3 { font-family: var(--pa-display) !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: -.015em; }
body[data-pa="staff"] .word img { filter: none !important; }

/* ── Estate & council portals (hoa.css / muni.css) — defaults only; an estate's own branding overrides ── */
body[data-pa="portal"] { font-feature-settings: 'cv11'; }
body[data-pa="portal"] .btn, body[data-pa="portal"] .chip { border-radius: 6px; }
body[data-pa="portal"] input, body[data-pa="portal"] select, body[data-pa="portal"] textarea { font-size: 16px; }
@media (min-width: 768px) { body[data-pa="portal"] input, body[data-pa="portal"] select, body[data-pa="portal"] textarea { font-size: 14px; } }
.pa-powered { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 16px 30px; font: 500 13px var(--pa-sans); color: var(--pa-muted); }
.pa-powered img { height: 22px; width: auto; }
.pa-powered a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }

/* ── Mobile: every portal page ───────────────────────────────────────────── */
@media (max-width: 720px) {
  body[data-pa="app"] .hdr { height: auto !important; min-height: 60px; flex-wrap: wrap; padding: 10px 14px !important; gap: 8px; }
  body[data-pa="app"] .hdr nav { margin-left: 0 !important; overflow-x: auto; max-width: 100%; }
  body[data-pa="app"] .main { padding: 18px 14px 50px !important; }
  body[data-pa="app"] .grid2, body[data-pa="app"] .grid3 { grid-template-columns: 1fr !important; }
  body[data-pa="app"] .card { padding: 16px !important; }
  body[data-pa="auth"] .card { padding: 26px 20px !important; }
  body[data-pa] table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body[data-pa] .btn { min-height: 44px; }
  body[data-pa="app"] .main > .top { flex-direction: column; align-items: flex-start !important; gap: 10px; }
  body[data-pa="app"] .main > .top > div:first-child { width: 100%; }
  body[data-pa="app"] .main > .top h1 { font-size: 26px !important; }
}