/* =============================================================================
   ParkPay customer portal shell (_PortalLayout) — mobile first, solid colours only.
     < 768px : solid orange top bar (logo + page title + theme + account) and the bottom tab bar (.pp-tabbar)
     >= 768px: surface top bar with wordmark, Find parking / Pay / My ParkPay links and actions; tab bar hidden
   Page content styles stay in portal.css (loaded by the customer views); cards, tab bar, page title come from
   parkpay-shell.css. Tokens from parkpay-brand.css. No side rail here.
   ============================================================================= */

:root[data-pp-portal] { --pp-rail-current: 0px; }

/* ---- Top bar ---------------------------------------------------------------- */
.pp-pbar {
    position: sticky; top: 0; z-index: 1030;
    padding-top: env(safe-area-inset-top);
    color: #fff;
    background: var(--pp-primary);
}
:root[data-bs-theme=dark] .pp-pbar { color: var(--pp-heading); background: var(--pp-surface); border-bottom: 1px solid var(--pp-border); }

.pp-pbar__inner {
    display: flex; align-items: center; gap: .5rem;
    min-height: var(--pp-appbar-h);
    max-width: 1120px; margin: 0 auto;
    padding: 0 calc(8px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
}

.pp-pbar__brand { flex: none; color: inherit; }
.pp-pbar__brand .pp-logo__icon { width: 34px; height: 34px; box-shadow: none; }
.pp-pbar__brand .pp-logo__word { display: none; color: inherit; }
.pp-pbar__brand .pp-logo__word span { color: inherit; }

.pp-pbar__title {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--pp-font-display); font-weight: 600; font-size: 1.125rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pp-pbar__nav { display: none; }
.pp-pbar__actions { display: flex; align-items: center; gap: .25rem; flex: none; margin-left: auto; }

.pp-pbar__signin, .pp-pbar__account {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: var(--pp-touch); min-width: var(--pp-touch); justify-content: center;
    padding: 0 .85rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .55); background: transparent; color: inherit;
    font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer;
}
.pp-pbar__signin:hover, .pp-pbar__account:hover { color: inherit; background: rgba(255, 255, 255, .16); }
:root[data-bs-theme=dark] .pp-pbar__signin, :root[data-bs-theme=dark] .pp-pbar__account { border-color: var(--pp-border); }
.pp-pbar__account-name { display: none; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-pbar .dropdown-menu { min-width: 14rem; margin-top: .4rem !important; }

/* Phones: icon-only account button, compact sign-in. */
@media (max-width: 767.98px) {
    .pp-pbar__account { padding: 0; }
    .pp-pbar__signin { padding: 0 .7rem; }
}

/* ---- Tablet / desktop ------------------------------------------------------- */
@media (min-width: 768px) {
    .pp-pbar { color: var(--pp-heading); background: var(--pp-surface); border-bottom: 1px solid var(--pp-border); }
    .pp-pbar__inner { min-height: 68px; gap: 1.5rem; padding: 0 24px; }
    .pp-pbar__brand .pp-logo__word { display: inline; color: var(--pp-heading); }
    .pp-pbar__brand .pp-logo__word span { color: var(--pp-primary); }
    .pp-pbar__title { display: none; }
    .pp-pbar__nav { display: flex; align-items: center; gap: .25rem; }
    .pp-pbar__link {
        display: inline-flex; align-items: center; gap: .45rem; min-height: var(--pp-touch); padding: 0 .9rem;
        border-radius: var(--pp-radius); color: var(--pp-text-muted); font-weight: 600; text-decoration: none;
    }
    .pp-pbar__link i { font-size: 1.1rem; }
    .pp-pbar__link:hover { color: var(--pp-heading); background: var(--pp-surface-2); }
    .pp-pbar__link.active { color: #fff; background: var(--pp-primary); }
    .pp-pbar__link.active:hover { background: var(--pp-primary-600); }
    :root[data-bs-theme=dark] .pp-pbar__link.active { color: #0F1115; }
    .pp-pbar .pp-iconbtn:hover { background: var(--pp-surface-2); color: var(--pp-primary); }
    .pp-pbar__signin { color: #fff; background: var(--pp-primary); border-color: var(--pp-primary); }
    .pp-pbar__signin:hover { color: #fff; background: var(--pp-primary-600); border-color: var(--pp-primary-600); }
    .pp-pbar__account { border-color: var(--pp-border); }
    .pp-pbar__account:hover { background: var(--pp-surface-2); }
    .pp-pbar__account-name { display: inline; }
}

/* ---- Content / footer ------------------------------------------------------- */
.pp-portal-content { max-width: 1120px; }
@media (min-width: 768px) { .pp-portal-content { padding-top: 28px; } }
.pp-portal-footer { max-width: 1120px; width: 100%; margin: 0 auto; }
.pp-portal-footer a { color: var(--pp-text-muted); }
.pp-portal-footer a:hover { color: var(--pp-primary); }