/* =====================================================================
   MerchPlus "Pulse" frame for the full report pages (Coverage, Attendance, Scorecard, Photos, Tasks,
   Reports …) and the login — so every MerchPlus page matches the Team app: dark slate, cyan accent,
   Plus Jakarta Sans, the same bottom tab bar. Loaded only on the MerchPlus address (body.plp).
   ===================================================================== */
body.plp, body.plp-login {
  --bg: #0B1220; --bg2: #0F1A2E; --sur: #111A2E; --sur2: #1E293B; --line: #1E293B; --line2: #334155;
  --tx: #E2E8F0; --mut: #94A3B8; --acc: #22D3EE; --acc-ink: #042F3A; --org: #FB923C;
  --paper: #0B1220; --card: #111A2E; --ink: #E2E8F0; --ink-soft: #94A3B8; --blue: #22D3EE; --blue-deep: #E2E8F0; --blue-soft: #1E293B;
  --green: #34D399; --green-soft: rgba(52,211,153,.14); --amber: #FDBA74; --amber-soft: rgba(251,146,60,.15); --red: #F87171; --red-soft: rgba(248,113,113,.14);
  --radius: 14px; --shadow: none;
}
body.plp, body.plp * , body.plp-login, body.plp-login * { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; }
body.plp code, body.plp-login code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
body.plp { background: var(--bg) !important; color: var(--tx); }
body.plp main.wrap { max-width: 760px; padding: 14px 16px calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---- header: back to More · page title · sign out ---- */
.plh { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, #111A2E, #0B1220); border-bottom: 1px solid var(--line);
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px; display: flex; align-items: center; gap: 12px; }
.plh-back, .plh-out { flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--sur); border: 1px solid var(--line); color: var(--tx);
  display: grid; place-items: center; text-decoration: none; }
.plh-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.plh-t small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plh-t b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- bottom tab bar (same as the Team app) ---- */
.plbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #0B1220; border-top: 1px solid var(--line); padding: 8px 6px calc(10px + env(safe-area-inset-bottom, 0px)); }
.plbar > div { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.plbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; text-decoration: none; color: var(--mut); font-size: 11.5px; font-weight: 700; }
.plbar a.on { color: var(--acc); font-weight: 800; }

/* ---- page heads ---- */
body.plp .phead2, body.plp .page-head { background: none !important; padding: 2px 0 6px; margin: 0 0 10px; }
body.plp .phead2 .t1, body.plp .page-head h1 { color: #fff; font-size: 19px; font-weight: 800; }
body.plp .phead2 .t1 small, body.plp .page-head .sub { color: var(--mut) !important; font-weight: 600; }

/* ---- cards & panels ---- */
body.plp .card, body.plp .stat, body.plp .ak, body.plp .cov-kpi, body.plp .mrc, body.plp .bp-row, body.plp .mini4, body.plp .steps2, body.plp .srchbox,
body.plp .mr-pick label, body.plp .daypick label, body.plp .rsn label, body.plp .mswitch a, body.plp .datechip, body.plp .tl-card, body.plp .lb {
  background: var(--sur) !important; border: 1px solid var(--line) !important; color: var(--tx); box-shadow: none !important; }
body.plp .card { border-radius: 16px; }
body.plp .card h2, body.plp .card h3, body.plp h1, body.plp h2, body.plp h3, body.plp b, body.plp strong { color: #fff; }
body.plp p, body.plp .hint, body.plp small, body.plp .sub, body.plp .stat .l, body.plp .ak span, body.plp .cov-kpi span { color: var(--mut); }
body.plp .card *:not(.btn):not(.badge):not(.chip):not(.chip2) { border-color: var(--line); }
body.plp a:not(.btn):not(.plbar a):not(.plh-back):not(.plh-out) { color: var(--acc); }
body.plp .stat .n, body.plp .ak b { color: #fff; }
body.plp .ak.g b, body.plp .stat.good .n { color: #34D399; } body.plp .ak.r b { color: #F87171; } body.plp .ak.a b, body.plp .stat.warn .n { color: #FDBA74; }
body.plp .ak.b b { color: var(--acc); } body.plp .ak.p b { color: #C4B5FD; }

/* ---- forms ---- */
body.plp label.f { color: #CBD5E1; font-weight: 600; }
body.plp input, body.plp select, body.plp textarea { background: var(--bg2) !important; border: 1px solid var(--line2) !important; color: var(--tx) !important; border-radius: 12px; }
body.plp input::placeholder, body.plp textarea::placeholder { color: #64748B; }
body.plp input:focus, body.plp select:focus, body.plp textarea:focus { border-color: var(--acc) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important; outline: none; }
body.plp input[type=checkbox], body.plp input[type=radio] { accent-color: var(--acc); background: none !important; }
body.plp input[type=date]::-webkit-calendar-picker-indicator, body.plp input[type=month]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }
body.plp select { color-scheme: dark; }
body.plp .srchbox input { background: transparent !important; border: 0 !important; }
body.plp input[type=file]::file-selector-button { background: var(--acc); color: var(--acc-ink); }

/* ---- buttons ---- */
body.plp .btn { background: var(--acc) !important; color: var(--acc-ink) !important; border: 0; box-shadow: none; font-weight: 800; border-radius: 12px; }
body.plp .btn-quiet { background: var(--sur2) !important; color: var(--tx) !important; border: 1px solid var(--line2) !important; }
body.plp .btn-green { background: #34D399 !important; color: #052E22 !important; }
body.plp .btn-danger { background: rgba(248,113,113,.12) !important; color: #FCA5A5 !important; border: 1px solid rgba(248,113,113,.4) !important; }
body.plp a.btn { color: var(--acc-ink) !important; } body.plp a.btn.btn-quiet { color: var(--tx) !important; }

/* ---- chips, badges, filter pills ---- */
body.plp .badge, body.plp .chip, body.plp .chip2 { background: var(--sur2); color: #CBD5E1; }
body.plp .badge-green, body.plp .chip.g { background: rgba(52,211,153,.15) !important; color: #34D399 !important; }
body.plp .badge-blue, body.plp .chip.b { background: rgba(34,211,238,.14) !important; color: var(--acc) !important; }
body.plp .badge-amber, body.plp .chip.a, body.plp .chip.o { background: rgba(251,146,60,.15) !important; color: #FDBA74 !important; }
body.plp .badge-red { background: rgba(248,113,113,.14) !important; color: #FCA5A5 !important; }
body.plp .afc, body.plp .fchip { background: var(--sur) !important; border: 1px solid var(--line) !important; color: var(--mut) !important; }
body.plp .afc.on, body.plp .fchip.on { background: var(--tx) !important; border-color: var(--tx) !important; color: var(--bg) !important; }
body.plp .afc b { color: inherit; }

/* ---- tables ---- */
body.plp .tbl { background: transparent !important; }
body.plp .tbl th, body.plp .atbl thead th { background: var(--bg2) !important; color: var(--mut) !important; border-color: var(--line) !important; }
body.plp .tbl td { background: var(--sur) !important; color: var(--tx); border-color: var(--line) !important; }
body.plp .tbl tr:hover td { background: #16223A !important; }
body.plp .tbl th:first-child, body.plp .tbl td:first-child { box-shadow: 6px 0 10px -6px rgba(0,0,0,.5); }

/* ---- bars, flash, toasts ---- */
body.plp .bar, body.plp .barw, body.plp .pbar, body.plp .cc-bar { background: var(--sur2); }
body.plp .bar i, body.plp .barw i, body.plp .pbar i, body.plp .cc-bar i { background: var(--acc); }
body.plp .flash { background: var(--sur); color: var(--tx); border: 1px solid var(--line); }
body.plp .flash-ok { border-color: rgba(52,211,153,.5); color: #34D399; } body.plp .flash-err { border-color: rgba(251,146,60,.5); color: #FDBA74; }
body.plp .leaflet-container { background: #0F1A2E; }

/* =====================================================================
   MerchPlus login — dark, full screen (same family as the Team app)
   ===================================================================== */
body.plp-login { background: radial-gradient(120% 60% at 50% 0%, #13213B 0%, #0B1220 60%) !important; color: var(--tx); min-height: 100vh; }
body.plp-login .login-card { background: transparent; box-shadow: none; border: 0; max-width: 400px; padding: 8px 6px; }
body.plp-login .login-card .brand { gap: 12px; margin-bottom: 8px; }
body.plp-login .login-card .brand-mark img { width: 52px !important; height: 52px !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(0,0,0,.45); }
body.plp-login .login-card .brand-word { color: #fff; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
body.plp-login .login-card .brand-word b { color: var(--acc); }
body.plp-login .portal-tag { background: rgba(34,211,238,.12); color: var(--acc); border: 1px solid rgba(34,211,238,.35); }
body.plp-login .login-tag { color: var(--mut); margin-bottom: 26px; }
body.plp-login label.f { color: #CBD5E1; font-weight: 600; }
body.plp-login input { background: var(--sur) !important; border: 1px solid var(--line2) !important; color: #fff !important; border-radius: 14px; min-height: 52px; }
body.plp-login input::placeholder { color: #64748B; }
body.plp-login input:focus { border-color: var(--acc) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.18) !important; outline: none; }
body.plp-login input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #111A2E inset !important; -webkit-text-fill-color: #fff !important; }
body.plp-login .btn { background: var(--acc) !important; color: var(--acc-ink) !important; font-weight: 800; min-height: 54px; border-radius: 14px; margin-top: 6px; box-shadow: 0 12px 28px rgba(34,211,238,.25); }
body.plp-login .login-err { background: rgba(251,146,60,.12); color: #FDBA74; border: 1px solid rgba(251,146,60,.35); }
body.plp-login .login-ver { color: #64748B; } body.plp-login .login-ver a { color: var(--mut) !important; }
/* the page name is already in the header — keep only the line under it (dates, counts) */
body.plp .phead2 .t1 { font-size: 0 !important; line-height: 0; }
body.plp .phead2 .t1 small { font-size: 12.5px !important; line-height: 1.45; margin: 0; display: block; }
body.plp .phead2:has(.t1 small:empty), body.plp .phead2:not(:has(small)):not(:has(.side)) { display: none; }