/* ============================================================================
 * Participant (Parent) Portal — GnomeSurf
 * ============================================================================
 * Layered on top of interface-base.css. Team brand vars come from the
 * team's interface CSS (loaded by /api/team-brand/{teamId}.css). For team
 * 50337 GnomeSurf the palette resolves to charcoal #27282A primary +
 * coral #E64928 secondary + headings in caveat-brush + body in bitter.
 *
 * Mobile-first: stack header → content. ≥768px: two-column with a left
 * rail nav. Cards have generous breathing room, soft shadows, and rounded
 * corners so the whole thing reads as a friendly consumer app instead of
 * an internal CRM.
 * ========================================================================== */

/* ───────── Tokens scoped to .pp-layout so nothing leaks to admin pages ───── */
.pp-layout {
    --pp-bg: #FAF7F4;             /* warm cream */
    --pp-surface: #FFFFFF;
    --pp-border: #ECE6DF;
    --pp-text: #27282A;
    --pp-text-muted: #6B6B6B;
    --pp-accent: var(--color-buttons, #E64928);
    --pp-accent-soft: rgba(230, 73, 40, 0.08);
    --pp-accent-hover: var(--color-buttons-hover, #27282A);
    --pp-primary: var(--color-primary, #27282A);
    --pp-card-shadow: 0 2px 6px rgba(39, 40, 42, 0.04), 0 12px 32px rgba(39, 40, 42, 0.06);
    --pp-radius: 14px;
    --pp-radius-sm: 8px;

    min-height: 100vh;
    background: var(--pp-bg);
    color: var(--pp-text);
    font-family: var(--font-primary, bitter, serif);
    /* Defensive: nothing inside the portal should produce horizontal scroll */
    overflow-x: hidden;
}

/* Reusable page chrome — replaces the inline h1 / breadcrumb / action-row styles
   that were duplicated across every portal .razor page. Centralizing them here
   lets the small-screen breakpoint scale them down without touching markup. */
.pp-layout .pp-page-title {
    font-family: var(--font-headings, caveat-brush, sans-serif);
    font-size: 2.4rem;
    line-height: 1.05;
    color: var(--pp-primary);
    margin: 0 0 1rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.pp-layout .pp-card-h1 {
    font-family: var(--font-headings, caveat-brush, sans-serif);
    font-size: 2.4rem;
    line-height: 1.05;
    color: var(--pp-primary);
    margin: 0 0 0.5rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.pp-layout .pp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.pp-layout .pp-breadcrumb a {
    text-decoration: none;
    color: var(--pp-text-muted);
    font-family: muli, sans-serif;
    font-size: 0.88rem;
}

.pp-layout .pp-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.pp-layout .pp-action-row-center {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.pp-layout .pp-detail-list {
    font-family: muli, sans-serif;
    color: var(--pp-text);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}
.pp-layout .pp-detail-list .pp-detail-icon {
    color: var(--pp-accent);
    margin-right: 0.5rem;
}

.pp-layout .pp-muted-lead {
    font-family: muli, sans-serif;
    color: var(--pp-text-muted);
    margin: 0;
}

.pp-layout .pp-child-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.pp-layout .pp-child-header-info {
    flex: 1;
    min-width: 0;
}
.pp-layout .pp-child-header-name {
    font-size: 2.2rem;
    margin: 0;
}

.pp-layout .pp-card-mb { margin-bottom: 1rem; }
.pp-layout .pp-eyebrow {
    font-size: 0.75rem;
    color: var(--pp-text-muted);
    font-family: muli, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.pp-layout .pp-breadcrumb-pill { margin-left: auto; }
.pp-layout .pp-payment-status {
    margin-left: 0.5rem;
    color: var(--pp-text-muted);
    font-family: muli, sans-serif;
}

/* Quick-links card used at the bottom of booking detail */
.pp-layout .pp-card-quicklinks {
    margin-top: 1.5rem;
    background: var(--pp-accent-soft);
    border-left: 4px solid var(--pp-accent);
}
.pp-layout .pp-quicklinks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    font-family: muli, sans-serif;
}
.pp-layout .pp-quicklinks a {
    color: var(--pp-text);
    text-decoration: none;
    overflow-wrap: break-word;
}
.pp-layout .pp-quicklinks a:hover { color: var(--pp-accent); }

/* Card with a left accent strip — used by 24-hour fee warning and confirmation
   states on booking cancel / reschedule. Variants tweak the colors. */
.pp-layout .pp-card-warn {
    background: #FDEDEC;
    border-left: 4px solid #B83C3C;
}
.pp-layout .pp-card-warn .pp-card-title { color: #B83C3C; }
.pp-layout .pp-card-warn .pp-muted-lead { color: var(--pp-text); }

.pp-layout .pp-card-center { text-align: center; }
.pp-layout .pp-confirm-icon {
    font-size: 3rem;
    color: #1D7A3A;
    margin-bottom: 1rem;
}
.pp-layout .pp-btn-danger {
    background: #B83C3C;
    border-color: #B83C3C;
}
.pp-layout .pp-btn-danger:hover {
    background: #9A2D2D;
    border-color: #9A2D2D;
}

/* Form controls inside the portal always use Muli regular — same rule as
   the volunteer portal. Brand fonts are for headings and labels, never for
   what the user types into. */
.pp-layout input.form-control,
.pp-layout select.form-control,
.pp-layout textarea.form-control {
    font-family: muli, sans-serif !important;
    font-weight: 400 !important;
    border-radius: var(--pp-radius-sm);
    border: 1px solid var(--pp-border);
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
}

.pp-layout input.form-control:focus,
.pp-layout select.form-control:focus,
.pp-layout textarea.form-control:focus {
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 3px var(--pp-accent-soft);
    outline: none;
}

.pp-layout label.form-label {
    font-weight: 700;
    color: var(--pp-text);
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    display: block;
}

/* Buttons */
.pp-layout .btn-primary,
.pp-layout button.pp-btn-primary,
.pp-layout a.pp-btn-primary {
    background: var(--pp-accent);
    border-color: var(--pp-accent);
    color: #FFF;
    border-radius: 999px;
    padding: 0.65rem 1.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform .12s ease, background-color .15s ease;
}
.pp-layout .btn-primary:hover,
.pp-layout button.pp-btn-primary:hover,
.pp-layout a.pp-btn-primary:hover {
    background: var(--pp-accent-hover);
    border-color: var(--pp-accent-hover);
    transform: translateY(-1px);
    color: #FFF;
}

.pp-layout .pp-btn-ghost {
    background: transparent;
    border: 1.5px solid var(--pp-border);
    color: var(--pp-text);
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: border-color .15s ease, color .15s ease;
}
.pp-layout .pp-btn-ghost:hover {
    border-color: var(--pp-accent);
    color: var(--pp-accent);
}

/* ════════ PUBLIC layout (pre-login) ════════ */
.pp-public-layout {
    display: flex;
    flex-direction: column;
}

.pp-public-header {
    background: linear-gradient(135deg, var(--pp-primary) 0%, #3A3B3D 100%);
    color: #FFF;
    padding: 2.5rem 1.5rem 4.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle wave at the bottom of the header */
.pp-public-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 36px;
    background: var(--pp-bg);
    clip-path: ellipse(75% 100% at 50% 100%);
}

.pp-public-logo {
    max-height: 90px;
    margin-bottom: 1rem;
}

.pp-public-tag {
    font-family: var(--font-headings, caveat-brush, sans-serif);
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #FFF;
}

.pp-public-main {
    flex: 1;
    padding: 0 1rem 3rem;
}

.pp-public-main .container {
    max-width: 540px;
    margin: -2rem auto 0;
}

/* Card wrapper used by login / forgot / set-password / status alerts */
.pp-public-main .pp-card {
    background: var(--pp-surface);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-card-shadow);
    padding: 2rem 1.75rem;
    margin-bottom: 1.25rem;
}

.pp-public-main .pp-card h1 {
    font-family: var(--font-headings, caveat-brush, sans-serif);
    font-size: 2.6rem;
    color: var(--pp-primary);
    margin: 0 0 0.5rem;
    text-align: center;
    line-height: 1.1;
}

.pp-public-main .pp-card p.pp-lead {
    color: var(--pp-text-muted);
    font-size: 0.95rem;
    text-align: center;
    margin: 0 0 1.5rem;
}

.pp-public-main .pp-form-row {
    margin-bottom: 1rem;
}

.pp-public-main .pp-form-actions {
    margin-top: 1.5rem;
    text-align: center;
}

.pp-public-main .pp-form-actions .pp-secondary-action {
    display: block;
    margin-top: 1rem;
    color: var(--pp-text-muted);
    font-size: 0.88rem;
}
.pp-public-main .pp-form-actions .pp-secondary-action a {
    color: var(--pp-accent);
    text-decoration: none;
    font-weight: 600;
}
.pp-public-main .pp-form-actions .pp-secondary-action a:hover {
    text-decoration: underline;
}

.pp-public-main .alert {
    border-radius: var(--pp-radius-sm);
    border: none;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
}
.pp-public-main .alert-danger {
    background: #FDEDEC;
    color: #B83C3C;
}
.pp-public-main .alert-success {
    background: #E8F5EC;
    color: #1D7A3A;
}

/* ════════ AUTHED layout ════════ */
.pp-authed-layout {
    display: flex;
    flex-direction: column;
}

.pp-header {
    background: linear-gradient(135deg, var(--pp-primary) 0%, #3A3B3D 100%);
    color: #FFF;
    padding: 1.1rem 1.25rem 0;
}

.pp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 1rem;
}

.pp-header-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.pp-header-logo {
    height: 48px;
    width: auto;
    border-radius: 6px;
}

.pp-header-tag {
    font-family: var(--font-headings, caveat-brush, sans-serif);
    font-size: 1.6rem;
    line-height: 1;
    color: #FFF;
}

.pp-header-user {
    text-align: right;
    line-height: 1.2;
    font-family: muli, sans-serif;
    min-width: 0;
}

.pp-header-greeting {
    font-size: 1.05rem;
    font-weight: 700;
}

.pp-header-email {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    word-break: break-all;
}

/* Horizontal nav lives in the header band on mobile, becomes a tighter
   row of icon-text pills below the brand bar on tablet/desktop. */
.pp-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0 1rem;
}

.pp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    font-family: muli, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.pp-nav-link:hover,
.pp-nav-link.active {
    background: var(--pp-accent);
    color: #FFF;
}
.pp-nav-link i {
    font-size: 0.95rem;
}
.pp-nav-logout {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.pp-nav-logout:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
    border-color: rgba(255, 255, 255, 0.4);
}

/* Main content */
.pp-main {
    flex: 1;
    padding: 1.5rem 1rem 4rem;
}

.pp-main-inner {
    max-width: 1180px;
    margin: 0 auto;
}

/* Hero card on the dashboard — next upcoming session */
.pp-hero {
    background: var(--pp-surface);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-card-shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-left: 6px solid var(--pp-accent);
    position: relative;
    overflow: hidden;
}

.pp-hero-eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pp-accent);
    margin-bottom: 0.35rem;
}

.pp-hero-title {
    font-family: var(--font-headings, caveat-brush, sans-serif);
    font-size: 2.4rem;
    line-height: 1.05;
    color: var(--pp-primary);
    margin: 0 0 0.5rem;
}

.pp-hero-countdown {
    display: inline-block;
    background: var(--pp-accent-soft);
    color: var(--pp-accent);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-family: muli, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.pp-hero-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem 1.5rem;
    font-family: muli, sans-serif;
    font-size: 0.92rem;
    color: var(--pp-text);
    margin-bottom: 1.25rem;
}

.pp-hero-meta .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pp-text-muted);
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.pp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Generic card grid used for child cards, quick links, etc. */
.pp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pp-card {
    background: var(--pp-surface);
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-card-shadow);
    padding: 1.25rem 1.35rem;
}

.pp-card-title {
    font-family: var(--font-subheadings, bitter, serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pp-primary);
    margin: 0 0 0.5rem;
}

/* Child card with avatar */
.pp-child-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pp-child-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pp-accent) 0%, #B83C3C 100%);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-headings, caveat-brush, sans-serif);
    font-size: 1.6rem;
    flex-shrink: 0;
}
.pp-child-info {
    flex: 1;
    min-width: 0;
}
.pp-child-name {
    font-weight: 700;
    color: var(--pp-primary);
    font-size: 1.05rem;
    margin: 0;
}
.pp-child-meta {
    color: var(--pp-text-muted);
    font-size: 0.85rem;
    font-family: muli, sans-serif;
    margin: 0.15rem 0 0;
}

/* Status pills */
.pp-pill {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: muli, sans-serif;
}
.pp-pill-upcoming { background: var(--pp-accent-soft); color: var(--pp-accent); }
.pp-pill-past { background: #ECECEC; color: #6B6B6B; }
.pp-pill-waitlist { background: #FFF4E5; color: #C47A05; }
.pp-pill-cancelled { background: #FDEDEC; color: #B83C3C; }

/* Empty state */
.pp-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--pp-text-muted);
}
.pp-empty i {
    font-size: 2.5rem;
    color: var(--pp-border);
    margin-bottom: 0.75rem;
}
.pp-empty p {
    margin: 0.25rem 0;
    font-size: 0.95rem;
}

/* Section heading inside the main content */
.pp-section-heading {
    font-family: var(--font-subheadings, bitter, serif);
    font-size: 1.15rem;
    color: var(--pp-primary);
    margin: 1.75rem 0 0.85rem;
    font-weight: 700;
}

/* Booking row */
.pp-booking-row {
    background: var(--pp-surface);
    border-radius: var(--pp-radius-sm);
    box-shadow: 0 1px 3px rgba(39, 40, 42, 0.04);
    padding: 1rem 1.15rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform .12s ease, box-shadow .15s ease;
    text-decoration: none;
    color: var(--pp-text);
}
.pp-booking-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(39, 40, 42, 0.08);
    color: var(--pp-text);
}
.pp-booking-date {
    text-align: center;
    flex-shrink: 0;
    min-width: 52px;
}
.pp-booking-date .day {
    font-family: var(--font-headings, caveat-brush, sans-serif);
    font-size: 2rem;
    line-height: 1;
    color: var(--pp-primary);
}
.pp-booking-date .month {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pp-text-muted);
    font-family: muli, sans-serif;
}
.pp-booking-body {
    flex: 1;
    min-width: 0;
}
.pp-booking-title {
    font-weight: 700;
    color: var(--pp-primary);
    margin: 0;
    overflow-wrap: break-word;
}
.pp-booking-meta {
    color: var(--pp-text-muted);
    font-size: 0.85rem;
    font-family: muli, sans-serif;
    margin: 0.15rem 0 0;
    overflow-wrap: break-word;
}

/* Toast */
.pp-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pp-primary);
    color: #FFF;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-family: muli, sans-serif;
    font-size: 0.9rem;
    z-index: 9999;
    animation: pp-toast-in .25s ease;
}
@keyframes pp-toast-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Responsive: small phones (<= 480px) ──
   The base styles target ~360px mobile, but several elements (hero title,
   page titles, header chrome) feel cramped or risk horizontal scroll on the
   smallest devices. Scale them down here so a 320–375px screen still reads
   cleanly. */
@media (max-width: 480px) {
    /* Public (pre-login) chrome */
    .pp-public-header { padding: 1.75rem 1rem 3.5rem; }
    .pp-public-logo { max-height: 70px; margin-bottom: 0.65rem; }
    .pp-public-tag { font-size: 2rem; }
    .pp-public-main { padding: 0 0.65rem 2.5rem; }
    .pp-public-main .pp-card { padding: 1.4rem 1.15rem; }
    .pp-public-main .pp-card h1 { font-size: 2.1rem; }

    /* Authed header — stack brand and user info to keep both readable */
    .pp-header { padding: 0.85rem 0.75rem 0; }
    .pp-header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding-bottom: 0.65rem;
    }
    .pp-header-brand { gap: 0.6rem; }
    .pp-header-logo { height: 38px; }
    .pp-header-tag { font-size: 1.3rem; }
    .pp-header-user { text-align: left; }
    .pp-header-greeting { font-size: 0.95rem; }
    .pp-header-email { font-size: 0.74rem; }

    /* Nav pills — tighten so all six fit on two rows max */
    .pp-nav { gap: 0.3rem; padding: 0 0 0.85rem; }
    .pp-nav-link {
        padding: 0.45rem 0.75rem;
        font-size: 0.82rem;
        gap: 0.4rem;
    }
    .pp-nav-link i { font-size: 0.85rem; }
    .pp-nav-logout { margin-left: 0; }

    /* Main content */
    .pp-main { padding: 1rem 0.85rem 3rem; }
    .pp-page-title { font-size: 1.9rem; }
    .pp-card-h1 { font-size: 1.9rem; }
    .pp-child-header-name { font-size: 1.65rem; }
    .pp-child-header { gap: 0.75rem; }

    /* Hero */
    .pp-hero { padding: 1.15rem 1rem; }
    .pp-hero-title { font-size: 1.85rem; }
    .pp-hero-countdown { font-size: 0.78rem; padding: 0.25rem 0.7rem; }
    .pp-hero-meta { font-size: 0.88rem; }
    .pp-hero-actions .btn-primary,
    .pp-hero-actions .pp-btn-ghost { padding: 0.55rem 1.1rem; font-size: 0.88rem; }

    /* Generic cards */
    .pp-card { padding: 1rem 1rem; }
    .pp-card-title { font-size: 1rem; }
    .pp-section-heading { font-size: 1.05rem; margin: 1.25rem 0 0.65rem; }

    /* Booking rows */
    .pp-booking-row { padding: 0.85rem 0.95rem; gap: 0.75rem; }
    .pp-booking-date { min-width: 44px; }
    .pp-booking-date .day { font-size: 1.7rem; }
    .pp-booking-title { font-size: 0.95rem; }
    .pp-booking-meta { font-size: 0.78rem; }

    /* Child cards */
    .pp-child-avatar { width: 48px; height: 48px; font-size: 1.4rem; }
    .pp-child-name { font-size: 0.98rem; }
    .pp-child-meta { font-size: 0.8rem; }

    /* Status pills */
    .pp-pill { padding: 0.18rem 0.55rem; font-size: 0.66rem; }

    /* Form controls — buy a touch more vertical space for thumbs */
    .pp-layout input.form-control,
    .pp-layout select.form-control,
    .pp-layout textarea.form-control {
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
    }

    /* Action button rows */
    .pp-action-row .btn-primary,
    .pp-action-row .pp-btn-ghost,
    .pp-action-row-center .btn-primary,
    .pp-action-row-center .pp-btn-ghost { font-size: 0.88rem; }
}

/* ── Responsive: tablet+ ── */
@media (min-width: 768px) {
    .pp-public-main .container { max-width: 480px; }
    .pp-public-main .pp-card { padding: 2.5rem 2.25rem; }
    .pp-public-main .pp-card h1 { font-size: 3rem; }

    .pp-header-logo { height: 56px; }
    .pp-header-tag { font-size: 2rem; }

    .pp-hero { padding: 2rem 2.25rem; }
    .pp-hero-title { font-size: 3rem; }
    .pp-hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pp-main { padding: 2rem 1.5rem 4rem; }
}