/* portal/public/css/portal.css */
:root{
/* Brand palette — Tim's brand system (regio.business/strategy/brand-guidelines) */
--brand-navy:#0A2540; /* Deep Navy — reserved for opened deal headers, not the base bg */
--brand-blue:#1B4F8A; /* Regio Blue — primary CTA / emphasis */
--brand-horizon:#3A80D2; /* Horizon Blue — interactive, hover, focus, links */
--brand-red:#C8102E; /* accent only, max 1 per page; never an error color */
/* Dark mode (portal default) semantic tokens, mapped to the brand palette */
--bg:#1C2330; /* Surface Dark */
--panel:#243040; /* Deal Card Dark */
--panel2:rgba(0,0,0,.18); /* card-header darken over --panel */
--border:#2D3748; /* Slate */
--text:#FFFFFF;
--muted:#94A3B8; /* secondary text */
--muted2:#64748B; /* Steel Gray — meta */
--accent:rgba(58,128,210,.30); /* Horizon Blue tint */
--accent2:#1B4F8A; /* Regio Blue — primary button fill */
--shadow:0 10px 30px rgba(10,37,64,.28);
/* Corner-radius scale (brand) */
--radius-card:8px;
--radius-btn:8px;
--radius-input:6px;
--radius-badge:4px;
--radius-modal:12px;
/* Motion scale (brand 09-motion-animation.md) — smooth, controlled, <600ms */
--ease-standard:cubic-bezier(.4,0,.2,1);
--ease-out:cubic-bezier(0,0,.2,1);
--ease-gauge:cubic-bezier(.25,.46,.45,.94);
--dur-hover:120ms;
--dur-ui:200ms;
/* Floor keeps the content column from shrinking narrower than the top menu
on small screens — below this the whole page scrolls horizontally as one
unit (menu + content stay aligned) instead of the layout squishing.
Tuned per Text Size preset (see html[data-font] below); base = Medium. */
--portal_w_min: 1120px;
--portal_w: clamp(var(--portal_w_min), 85vw, 1760px);
--footer_h: 48px;
--content_pad_y: 22px;
--content_pad_x: 18px;
}
*{ box-sizing:border-box; }
/* Keyboard focus ring — brand non-negotiable (09-motion-animation.md) */
:focus-visible{ outline:2px solid var(--brand-horizon); outline-offset:2px; }
/* ============================================================
Light mode (opt-in via )
Dark is the default; everything below is additive and only
applies when the theme toggle is set to light. Palette per
regio.business .../brand-guidelines/04-portal-color-logic.md.
Remove this block + the nav toggle markup + the portal.js
theme IIFE to fully revert the feature.
============================================================ */
:root[data-theme="light"]{
--bg:#F5F6F8; /* Off White */
--panel:#FFFFFF; /* card surfaces */
--panel2:#F1F5F9; /* card-header subtle */
--border:#E2E8F0; /* Cool Gray */
--text:#0A2540; /* Deep Navy */
--muted:#64748B; /* Steel Gray */
--muted2:#94A3B8;
--accent:rgba(58,128,210,.14);
--accent2:#1B4F8A; /* Regio Blue — primary fill unchanged */
--shadow:0 2px 8px rgba(10,37,64,.08);
}
/* Chrome surfaces that hardcode dark values need explicit light overrides */
:root[data-theme="light"] .p-topbar{ background:rgba(255,255,255,.85); }
:root[data-theme="light"] .p-footer{ background:rgba(255,255,255,.85); }
:root[data-theme="light"] .p-nav a:hover,
:root[data-theme="light"] .p-nav-dd-btn:hover,
:root[data-theme="light"] .p-nav-dd.is-open .p-nav-dd-btn{
background:rgba(10,37,64,.05);
border-color:#E2E8F0;
color:#1B4F8A; /* active/hover nav = Regio Blue */
}
:root[data-theme="light"] .p-nav-dd-menu{
background:#FFFFFF;
border-color:#E2E8F0;
box-shadow:0 16px 40px rgba(10,37,64,.18);
}
:root[data-theme="light"] .p-nav-dd-menu .p-font-btn,
:root[data-theme="light"] .p-nav-dd-menu .p-theme-btn{
background:#F5F6F8;
border-color:#E2E8F0;
color:#0A2540;
}
:root[data-theme="light"] .p-nav-dd-menu .p-font-btn:hover,
:root[data-theme="light"] .p-nav-dd-menu .p-theme-btn:hover{
background:#F1F5F9;
border-color:#CBD5E1;
}
:root[data-theme="light"] .p-nav-dd-menu .p-font-btn.is-active,
:root[data-theme="light"] .p-nav-dd-menu .p-theme-btn.is-active{
background:rgba(58,128,210,.16);
border-color:#3A80D2;
color:#1B4F8A;
}
:root[data-theme="light"] input,
:root[data-theme="light"] .p-field select,
:root[data-theme="light"] .p-field textarea{
background:#FFFFFF;
border-color:#E2E8F0;
}
:root[data-theme="light"] .p-field select option{ background:#FFFFFF; color:#0A2540; }
:root[data-theme="light"] .p-btn{
background:#FFFFFF;
border-color:#E2E8F0;
}
:root[data-theme="light"] .p-btn:hover{ background:#F1F5F9; }
/* Re-assert primary AFTER the light .p-btn override above — that override
(specificity 0,3,0) otherwise beats base .p-btn.primary (0,2,0) and forces
the primary button white-on-white in light mode. Keep it Regio Blue. */
:root[data-theme="light"] .p-btn.primary{
background:var(--accent2); /* Regio Blue */
border-color:var(--brand-horizon); /* Horizon Blue */
color:#fff;
}
:root[data-theme="light"] .p-btn.primary:hover{ background:#2563A8; border-color:#5B9FE8; }
/* Light-mode re-assert for the .p-btn-primary alias (beats the light .p-btn override). */
:root[data-theme="light"] .p-btn-primary{ background:var(--accent2); border-color:var(--brand-horizon); color:#fff; }
:root[data-theme="light"] .p-btn-primary:hover{ background:#2563A8; border-color:#5B9FE8; }
/* Status text: dark uses light tints; light mode needs solid brand functional colors */
:root[data-theme="light"] .p-msg.ok{ color:#16A34A; }
:root[data-theme="light"] .p-msg.err{ color:#DC2626; }
:root[data-theme="light"] .p-msg.warn{ color:#EA580C; }
/* Theme toggle buttons (text labels, wider than the A size buttons). Base
styling mirrors .p-font-btn so the control matches the text-size dropdown. */
.p-nav-dd-menu .p-theme-btn{
min-width:54px;
height:32px;
padding:0 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.03);
color:rgba(234,240,255,.85);
cursor:pointer;
font-weight:700;
font-size:0.8125rem;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
}
.p-nav-dd-menu .p-theme-btn:hover{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.16);
}
.p-nav-dd-menu .p-theme-btn.is-active{
background:rgba(58,128,210,.22);
border-color:#3A80D2;
color:#fff;
}
/* ------------------------------------------------------------------
Light-mode polish — deeper components that hardcode dark-only
surfaces or light text. Colored status tints are kept (they read
fine on white); only neutral surfaces and low-contrast text are
overridden. All scoped under [data-theme="light"] so dark is
untouched. Grouped to mirror source order above.
------------------------------------------------------------------ */
/* Dashboard tiles */
:root[data-theme="light"] .p-tile{ background:#FFFFFF; border-color:#E2E8F0; }
:root[data-theme="light"] .p-tile:hover{ background:#F1F5F9; border-color:#CBD5E1; }
:root[data-theme="light"] .p-tile-icon{ background:#EFF4FB; border-color:#E2E8F0; }
:root[data-theme="light"] .p-tile-icon svg{ color:#1B4F8A; }
:root[data-theme="light"] .p-tile-sub{ color:#64748B; }
/* Quotes / Deals grid + list states */
:root[data-theme="light"] .p-grid-header{ color:#64748B; border-bottom-color:#E2E8F0; }
:root[data-theme="light"] .p-grid-row{ border-bottom-color:#E2E8F0; }
:root[data-theme="light"] .p-grid-row:hover,
:root[data-theme="light"] .p-grid-row.is-open{ background:#F1F5F9; border-color:#CBD5E1; }
:root[data-theme="light"] .p-grid-loading,
:root[data-theme="light"] .p-grid-empty,
:root[data-theme="light"] .p-detail-loading,
:root[data-theme="light"] .p-detail-note{ color:#64748B; }
/* Row action buttons — the deal plate keeps its own light face in both themes */
:root[data-theme="light"] .p-deal-action-btn{ background:#FFFFFF; border-color:#E2E8F0; color:#475569; }
:root[data-theme="light"] .p-deal-action-btn:hover{ background:#F1F5F9; color:#1B4F8A; }
/* Post-submission status bar (progress track, dots, step labels) */
:root[data-theme="light"] .p-status-bar::before{ background:#E2E8F0; }
:root[data-theme="light"] .p-status-dot{ background:#CBD5E1; }
:root[data-theme="light"] .p-status-step{ color:#64748B; }
:root[data-theme="light"] .p-status-step.done{ color:#475569; }
:root[data-theme="light"] .p-status-step.active{ color:#0A2540; }
:root[data-theme="light"] .p-status-step:not(.done):not(.active){ color:#94A3B8; }
:root[data-theme="light"] .p-status-step:not(.done):not(.active) .p-status-dot{ background:#CBD5E1; }
/* Pre-submission status chips — keep tints, darken text for contrast */
:root[data-theme="light"] .p-status-chip--neutral{ color:#475569; }
:root[data-theme="light"] .p-status-chip--pending{ color:#EA580C; }
:root[data-theme="light"] .p-status-chip--corrections{ color:#B91C1C; }
:root[data-theme="light"] .p-status-chip--approved{ color:#15803D; }
:root[data-theme="light"] .p-status-chip--ach{ color:#1D4ED8; }
/* Authorization / agreement callout boxes (bank link, banking, DSA sign).
Shared dark surface, formerly inlined as background:#0b1220 in 5 views.
Layout props (padding/max-height/overflow) stay inline per instance. */
.p-callout{ background:#0b1220; border:1px solid rgba(255,255,255,.08); border-radius:8px; }
:root[data-theme="light"] .p-callout{ background:#F8FAFC; border-color:#E2E8F0; }
/* Modal confirm/alert bodies (regioConfirm / regioAlert in portal.js). The
dealer portal never uses native alert()/confirm(); these style their bodies. */
.p-dialog-msg{ font-size:0.875rem; line-height:1.55; }
.p-dialog-warn{
display:flex; gap:10px; align-items:flex-start;
border:1px solid rgba(200,16,46,.35);
background:rgba(200,16,46,.08);
border-radius:8px; padding:12px 14px;
}
.p-dialog-warn-ico{ font-size:1.25rem; line-height:1.25; }
/* ── Accordion (Manage Dealerships: dealers + per-dealer sections) ────────── */
.p-acc-dealer{
background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-card);
box-shadow:var(--shadow); margin-bottom:12px; overflow:hidden;
}
.p-acc-dealer-head{
display:flex; align-items:center; gap:12px; width:100%;
padding:16px 18px; background:transparent; border:0; cursor:pointer;
text-align:left; color:var(--text); font:inherit;
}
.p-acc-dealer-head:hover{ background:var(--accent); }
.p-acc-dealer-titles{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.p-acc-dealer-title{ font-weight:800; font-size:1.05rem; }
.p-acc-dealer-sub{ color:var(--muted); font-size:0.8125rem; }
.p-acc-dealer-body{ display:none; padding:0 18px 8px; border-top:1px solid var(--border); }
.p-acc-dealer.is-open > .p-acc-dealer-body{ display:block; }
.p-acc-sec{ border-top:1px solid var(--border); }
.p-acc-sec:first-child{ border-top:0; }
.p-acc-sec-head{
display:flex; align-items:center; gap:10px; width:100%;
padding:14px 2px; background:transparent; border:0; cursor:pointer;
text-align:left; color:var(--text); font:inherit; font-weight:700; font-size:.95rem;
}
.p-acc-sec-head:hover .p-acc-sec-label{ color:var(--brand-horizon); }
.p-acc-sec-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.p-acc-sec-body{ display:none; padding:0 2px 16px; }
.p-acc-sec.is-open > .p-acc-sec-body{ display:block; }
.p-acc-chev{
color:var(--muted); font-size:1.125rem; line-height:1; display:inline-block;
transition:transform var(--dur-ui) var(--ease-standard);
}
.p-acc-dealer.is-open > .p-acc-dealer-head .p-acc-chev,
.p-acc-sec.is-open > .p-acc-sec-head .p-acc-chev{ transform:rotate(90deg); }
@media (prefers-reduced-motion: reduce){ .p-acc-chev{ transition:none; } }
/* Activity log: bounded, vertically-scrollable region when expanded so a long
history doesn't stretch the section. */
.md-activity, .md-billing{ max-height:320px; overflow-y:auto; overscroll-behavior:contain; }
.md-activity .md-activity-row:first-child{ border-top:0 !important; }
/* Billing / ACH activity rows */
.md-bill-table{ display:flex; flex-direction:column; }
.md-bill-row{
display:grid; grid-template-columns:9.375rem 3.75rem 1fr auto auto; gap:10px;
align-items:center; padding:8px 0; border-top:1px solid var(--border); font-size:0.8125rem;
}
.md-bill-row:first-child{ border-top:0; }
.md-bill-amt{ font-weight:700; text-align:right; white-space:nowrap; }
/* Detail panels / doc rows / trusted devices */
:root[data-theme="light"] .p-row-detail,
:root[data-theme="light"] .p-doc-row,
:root[data-theme="light"] .p-trusted-device{ background:#F8FAFC; border-color:#E2E8F0; }
:root[data-theme="light"] .p-detail-section,
:root[data-theme="light"] .p-review-request-section,
:root[data-theme="light"] .msg-section{ border-top-color:#E2E8F0; }
:root[data-theme="light"] .p-doc-progress,
:root[data-theme="light"] .p-doc-sub{ color:#64748B; }
:root[data-theme="light"] .p-doc-clerk-request{ color:#334155; }
:root[data-theme="light"] .p-doc-clerk-request strong{ color:#0A2540; }
:root[data-theme="light"] .p-doc-clerk-note{ color:#DC2626; }
:root[data-theme="light"] .p-doc-badge.orig{ color:#DC2626; }
:root[data-theme="light"] .p-doc-badge.copy{ color:#1B4F8A; }
:root[data-theme="light"] .p-doc-badge.p-doc-badge-supplemental{ color:#1D4ED8; }
:root[data-theme="light"] .p-doc-finding-msg{ color:#0A2540; }
:root[data-theme="light"] .p-doc-dropzone{ background:#F8FAFC; border-color:#CBD5E1; }
:root[data-theme="light"] .p-doc-dropzone:hover{ background:#F1F5F9; border-color:#94A3B8; }
/* Secondary buttons */
:root[data-theme="light"] .btn-outline{ color:#1B4F8A; border-color:#CBD5E1; }
:root[data-theme="light"] .p-btn-danger{ color:#B91C1C; }
:root[data-theme="light"] .p-btn-danger:hover{ color:#991B1B; }
/* Quote-complete dividers / notes */
:root[data-theme="light"] #quote-complete .qc-line{ border-bottom-color:#E2E8F0; }
:root[data-theme="light"] #quote-complete .qc-totals{ border-top-color:#E2E8F0; }
:root[data-theme="light"] #quote-complete .qc-head{ border-bottom-color:#E2E8F0; }
:root[data-theme="light"] #quote-complete .qc-note{ background:#F1F5F9; }
/* Pre-submission review banners — keep tints, darken titles/text */
:root[data-theme="light"] .p-review-banner--approved,
:root[data-theme="light"] .p-review-banner--approved .p-review-banner-title{ color:#15803D; }
:root[data-theme="light"] .p-review-banner--corrections,
:root[data-theme="light"] .p-review-banner--corrections .p-review-banner-title{ color:#B91C1C; }
:root[data-theme="light"] .p-review-banner--pending,
:root[data-theme="light"] .p-review-banner--pending .p-review-banner-title{ color:#EA580C; }
:root[data-theme="light"] .p-review-banner--ach,
:root[data-theme="light"] .p-review-banner--ach .p-review-banner-title{ color:#1D4ED8; }
:root[data-theme="light"] .p-review-banner-note{ background:rgba(10,37,64,.05); }
/* Findings summary card */
:root[data-theme="light"] .p-findings-section{ background:#F8FAFC; border-color:#E2E8F0; }
:root[data-theme="light"] .p-findings-title{ color:#0A2540; }
:root[data-theme="light"] .p-findings-meta{ color:#64748B; }
:root[data-theme="light"] .p-finding-card{ background:#FFFFFF; }
:root[data-theme="light"] .p-finding-card-num{ color:#94A3B8; }
:root[data-theme="light"] .p-finding-card-msg{ color:#0A2540; }
:root[data-theme="light"] .p-finding-card-affects{ color:#64748B; }
:root[data-theme="light"] .p-finding-card-affects strong{ color:#334155; }
/* Processing details form */
:root[data-theme="light"] .p-proc-label{ color:#0A2540; }
:root[data-theme="light"] .p-proc-input{ background:#FFFFFF; border-color:#E2E8F0; color:#0A2540; }
:root[data-theme="light"] .p-proc-input:focus{ background:#FFFFFF; border-color:#3A80D2; }
:root[data-theme="light"] .p-proc-input option{ background:#FFFFFF; color:#0A2540; }
/* Unread message badge */
:root[data-theme="light"] .p-deal-unread-badge{ color:#0284C7; }
/* Contact Regio dialog */
:root[data-theme="light"] .p-contact-dialog.ui-dialog{ background:#FFFFFF; color:#0A2540; border-color:#E2E8F0; }
:root[data-theme="light"] .p-contact-dialog .ui-dialog-titlebar{ background:#F1F5F9; color:#0A2540; }
:root[data-theme="light"] .p-contact-dialog .ui-dialog-titlebar-close:hover{ color:#0A2540; }
:root[data-theme="light"] .p-contact-dialog .ui-dialog-content{ background:#FFFFFF; color:#0A2540; }
:root[data-theme="light"] .p-contact-meta tr + tr td{ border-top-color:#E2E8F0; }
:root[data-theme="light"] .p-contact-editor{ background:#FFFFFF; border-color:#CBD5E1; color:#0A2540; }
:root[data-theme="light"] .p-contact-dropzone{ border-color:#CBD5E1; }
:root[data-theme="light"] .p-contact-file-label{ color:#1B4F8A; }
:root[data-theme="light"] .p-contact-file-label:hover{ color:#0A2540; }
:root[data-theme="light"] .p-contact-file-item{ background:#F1F5F9; color:#475569; }
/* Deal-detail dialog */
:root[data-theme="light"] .rg-deal-dlg.ui-dialog{ background:#FFFFFF; color:#0A2540; border-color:#E2E8F0; }
:root[data-theme="light"] .rg-deal-dlg .ui-dialog-titlebar{ background:#F1F5F9; color:#0A2540; border-bottom-color:#E2E8F0; }
:root[data-theme="light"] .rg-deal-dlg .ui-dialog-titlebar-close{ color:#0A2540; }
:root[data-theme="light"] .rg-deal-dlg .ui-dialog-content{ background:#FFFFFF; color:#0A2540; }
:root[data-theme="light"] .rg-deal-dlg .p-detail-title{ color:#0A2540; }
/* Messages dialog + thread */
:root[data-theme="light"] .p-msg-dialog.ui-dialog,
:root[data-theme="light"] .p-msg-dialog .ui-dialog-titlebar,
:root[data-theme="light"] .p-msg-dialog .ui-dialog-content{ background:#FFFFFF; color:#0A2540; border-color:#E2E8F0; }
:root[data-theme="light"] .msg-bubble--admin{ background:#F1F5F9; color:#0A2540; }
:root[data-theme="light"] .msg-input{ background:#FFFFFF; border-color:#E2E8F0; color:#0A2540; }
/* Form dialog (Manage Users invite/edit) */
:root[data-theme="light"] .p-form-dialog.ui-dialog{ background:#FFFFFF; color:#0A2540; border-color:#E2E8F0; }
:root[data-theme="light"] .p-form-dialog .ui-dialog-titlebar{ background:#F1F5F9; color:#0A2540; }
:root[data-theme="light"] .p-form-dialog .ui-dialog-titlebar-close:hover{ color:#0A2540; }
:root[data-theme="light"] .p-form-dialog .ui-dialog-content{ background:#FFFFFF; color:#0A2540; }
:root[data-theme="light"] .p-form-dialog .ui-dialog-content label{ color:#334155; }
:root[data-theme="light"] .p-form-dialog .ui-dialog-buttonpane{ background:#FFFFFF; border-top-color:#E2E8F0; }
:root[data-theme="light"] .p-form-dialog .ui-dialog-buttonpane button{ background:#FFFFFF; border-color:#CBD5E1; color:#0A2540; }
:root[data-theme="light"] .p-form-dialog .ui-dialog-buttonpane button:hover{ background:#F1F5F9; }
/* Primary action (Send invite / Save) — the rule above forces navy text on
every button; re-assert white-on-blue for the primary so it stays legible. */
:root[data-theme="light"] .p-form-dialog .ui-dialog-buttonpane button.ui-button:first-child{
background:var(--accent2); border-color:var(--brand-horizon); color:#fff;
}
:root[data-theme="light"] .p-form-dialog .ui-dialog-buttonpane button.ui-button:first-child:hover{ background:#2563A8; border-color:#5B9FE8; }
/* Yes/No segmented control */
:root[data-theme="light"] .p-yesno{ background:#FFFFFF; border-color:#CBD5E1; }
:root[data-theme="light"] .p-yesno-btn{ color:#475569; }
:root[data-theme="light"] .p-yesno-btn + .p-yesno-btn{ border-left-color:#E2E8F0; }
:root[data-theme="light"] .p-yesno-btn:hover{ background:#F1F5F9; color:#0A2540; }
/* Active selection — without this the base .is-on blue keeps the light-mode
muted text color (#475569), leaving gray-on-blue. Force white-on-blue. */
:root[data-theme="light"] .p-yesno-btn.is-on{ background:var(--accent2); color:#fff; }
:root[data-theme="light"] .p-yesno-btn.is-on:hover{ background:#2563A8; }
/* Onboarding checklist */
:root[data-theme="light"] .p-ck-item{ border-bottom-color:#E2E8F0; }
:root[data-theme="light"] .p-ck-done{ background:#DCFCE7; color:#15803D; }
:root[data-theme="light"] .p-ck-todo{ border-color:#CBD5E1; }
:root[data-theme="light"] .p-ck-action{ color:#1B4F8A; }
:root[data-theme="light"] .p-ck-waiting{ color:#EA580C; }
/* Onboarding drawer (right-edge slide-out) */
:root[data-theme="light"] .p-ob-panel,
:root[data-theme="light"] .p-ob-tab{ background:#FFFFFF; }
:root[data-theme="light"] .p-ob-premium{ background:#ECFDF3; border-color:#A7F3D0; color:#15803D; }
:root[data-theme="light"] .p-ob-gauge-track{ stroke:#E2E8F0; }
html, body{
margin:0;
padding:0;
background:var(--bg);
color:var(--text);
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
/* ---------- Font size ---------- */
/* Uses font-size (not zoom) so third-party dropdowns (Google Places) stay
in the normal coordinate system and position correctly. */
html{
--ui_scale: 1;
font-size: calc(100% * var(--ui_scale));
}
/* Global font-size presets — bumped up across all three for readability
(was .85 / 1.07 / 1.32). --ui_scale drives the root font-size above.
--portal_w_min is hand-tuned per tier (not derived from --ui_scale) so the
layout floor can be dialed independently of the text scale. */
html[data-font="sm"]{ --ui_scale: .92; --portal_w_min: 960px; }
html[data-font="md"]{ --ui_scale: 1.15; --portal_w_min: 1120px; }
html[data-font="lg"]{ --ui_scale: 1.45; --portal_w_min: 1360px; }
/* ---------- Nav dropdown ---------- */
.p-nav-dd{
position:relative;
display:inline-flex;
align-items:center;
}
.p-nav-dd-btn{
font-size:0.8125rem;
color:var(--muted);
padding:8px 10px;
border-radius:10px;
border:1px solid transparent;
display:inline-flex;
align-items:center;
gap:8px;
}
.p-nav-dd.is-open .p-nav-dd-menu{
display:flex;
align-items:center;
}
.p-nav-dd-btn:hover{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.10);
text-decoration:none;
}
.p-nav-dd-btn:after{
content:"▾";
font-size:0.6875rem;
opacity:.75;
}
.p-nav-dd.is-open .p-nav-dd-btn{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.10);
}
.p-nav-dd-menu{
position:absolute;
right:0;
top:calc(100% + 8px);
min-width:160px;
padding:10px;
border-radius:var(--radius-card);
border:1px solid rgba(255,255,255,.10);
background:rgba(15,22,38,.98);
box-shadow:0 16px 40px rgba(0,0,0,.35);
display:none;
z-index:60;
}
.p-nav-dd.is-open .p-nav-dd-menu{ display:flex; }
.p-nav-dd-menu{
gap:8px;
justify-content:flex-end;
}
/* Reuse your A buttons, but make them look great in a menu */
.p-nav-dd-menu .p-font-btn{
width:36px;
height:32px;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.03);
color:rgba(234,240,255,.85);
cursor:pointer;
font-weight:900;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
}
.p-nav-dd-menu .p-font-btn[data-font="sm"]{ font-size:0.75rem; }
.p-nav-dd-menu .p-font-btn[data-font="md"]{ font-size:1.125rem; }
.p-nav-dd-menu .p-font-btn[data-font="lg"]{ font-size:1.625rem; }
.p-nav-dd-menu .p-font-btn:hover{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.16);
}
.p-nav-dd-menu .p-font-btn.is-active{
background:rgba(120,170,255,.18);
border-color:rgba(120,170,255,.35);
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
/* Logo is a link — keep it clean on hover (no underline rollover). */
.p-brand:hover{ text-decoration:none; }
/* Checkboxes: larger hit target + brand color, aligned with their label text.
width !important overrides the inline width:auto sprinkled on checkboxes to
escape the generic form-input width:100%. */
input[type="checkbox"]{
width:18px !important;
height:18px;
accent-color:var(--brand-blue);
cursor:pointer;
flex:0 0 auto;
vertical-align:middle;
}
.p-wrap{
width:var(--portal_w) !important;
margin:0 auto;
padding:var(--content_pad_y) var(--content_pad_x) calc(var(--footer_h) + 30px);
}
/* ---------- Topbar ---------- */
.p-topbar{
border-bottom:1px solid var(--border);
background:rgba(0,0,0,.14);
backdrop-filter:saturate(140%) blur(8px);
position:sticky;
top:0;
z-index:50;
}
.p-topbar-inner{
width:var(--portal_w) !important;
max-width:none;
margin:0 auto;
padding:14px 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
/* hide the font toggle on very small screens if you want */
@media (max-width: 520px){
.p-font{ display:none; }
}
.p-brand{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}
/* regiotitle lockup styles (p-lockup / p-logo-*) live in brand.css —
shared with the admin portal so both stay visually in sync. */
.p-brand-text{
display:flex;
flex-direction:column;
line-height:1.1;
min-width:0;
}
.p-brand-title{
font-weight:800;
letter-spacing:.2px;
font-size:0.9375rem;
margin:0;
white-space:nowrap;
}
.p-brand-sub{
font-size:0.75rem;
color:var(--muted);
margin:2px 0 0;
white-space:nowrap;
}
.p-nav{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
}
.p-nav a{
font-size:0.8125rem;
color:var(--muted);
padding:8px 10px;
border-radius:10px;
border:1px solid transparent;
}
.p-nav a:hover{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.10);
text-decoration:none;
}
/* ---------- Hero ---------- */
.p-hero{
padding:34px 0 18px;
}
.p-h1{
margin:0 0 8px;
font-size:1.875rem;
letter-spacing:.2px;
}
/* Dashboard hero heading — quieter than the full-size .p-h1 used on the
flow pages (login, onboarding, banking), but still above body/sub text.
Double class so the ≤640px .p-h1 override can't bump it back up. */
.p-h1.p-h1--quiet{
font-size:1.375rem;
}
.p-sub{
margin:0;
max-width:70ch;
color:var(--muted);
line-height:1.5;
}
/* ---------- Card ---------- */
.p-card{
border:1px solid var(--border);
background:var(--panel);
border-radius:var(--radius-card);
overflow:hidden;
box-shadow:var(--shadow);
}
.p-card-h{
padding:14px 16px;
border-bottom:1px solid var(--border);
background:var(--panel2);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.p-card-title{
margin:0;
font-size:0.875rem;
letter-spacing:.15px;
}
.p-card-b{
padding:16px;
}
.card{
border:1px solid var(--border);
background:var(--panel);
border-radius:var(--radius-card);
box-shadow:var(--shadow);
padding:16px;
overflow:hidden;
}
/* ---------- Form ---------- */
.p-row{
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:flex-end;
}
.p-field{
min-width:260px;
flex:1;
max-width:420px;
}
label{
display:block;
font-size:0.8125rem;
color:var(--muted);
margin:0 0 6px;
}
input, .p-field select, .p-field textarea{
width:100%;
padding:12px 12px;
border-radius:var(--radius-input);
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.25);
color:var(--text);
outline:none;
font:inherit;
}
/* Native select: hide system chrome, draw a chevron via background-image so
the field matches the input motif on the dark portal background. */
.p-field select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
padding-right:36px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:12px 8px;
cursor:pointer;
}
.p-field select::-ms-expand{ display:none; }
/* Match the dark portal palette for the dropdown panel where supported. */
.p-field select option{
background:#0f1623;
color:var(--text);
}
input:focus, .p-field select:focus, .p-field textarea:focus{
border-color:var(--brand-horizon);
box-shadow:0 0 0 3px rgba(58,128,210,.18);
}
/* Styled