/* =========================================================
   PORTAL.CSS
   ---------------------------------------------------------
   All styles for the International CodeFest '26 participant portal.
   This file covers:
     - Login page
     - Participant dashboard
     - Ambassador dashboard
     - Admin password step
     - Admin dashboard
     - Shared portal components (cards, badges, tables, etc.)

   IMPORTANT:
   This file uses CSS variables defined in style.css :root.
   Do NOT redefine colors here - use the existing variables:

     --bg-primary, --bg-secondary, --bg-tertiary
     --surface-glass, --surface-border
     --text-primary, --text-secondary, --text-muted
     --accent-primary, --accent-secondary, --accent-tertiary
     --success, --danger
     --shadow-soft, --shadow-strong
     --radius-sm, --radius-md, --radius-lg
     --transition-fast, --transition-medium

   This file is imported in base.html so it applies globally
   to every page that extends base.html - no need to import
   it again in individual portal templates.
   ========================================================= */


/* =========================================================
   PORTAL PAGE SHELL
   The outer wrapper that centers portal content and
   provides the ambient background gradient specific to
   portal pages (subtler than the homepage hero).
   ========================================================= */

.portal-page {
    /* Full-height centering layout */
    min-height: calc(100vh - 78px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;

    /* Subtle radial glows for portal pages only. */
    background:
        radial-gradient(ellipse at 65% 15%, rgba(91, 140, 255, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 85%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
}

.portal-page-wide {
    /* Dashboard variant - wider layout, no flex centering needed */
    min-height: calc(100vh - 78px);
    padding: 2.5rem 1rem 5rem;
    background:
        radial-gradient(ellipse at 70% 5%, rgba(91, 140, 255, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 10% 90%, rgba(139, 92, 246, 0.06) 0%, transparent 45%);
}

.portal-container {
    /* Centered content wrapper for dashboards */
    max-width: 960px;
    margin: 0 auto;
}


/* =========================================================
   PORTAL CARD
   The main card component used on login and password pages.
   Extends the existing .glass-backdrop style from style.css but
   with slightly different sizing for portal-specific layouts.
   ========================================================= */

.portal-card {
    /* Reuse the site's glass surface variables */
    background: var(--surface-glass);
    border: 1px solid var(--surface-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-strong);
    border-radius: var(--radius-lg);

    /* Card sizing */
    width: 100%;
    max-width: 460px;
    padding: 3rem 2.75rem;

    /* Entrance animation - card slides up and fades in on load */
    animation: portalCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes portalCardIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   PORTAL ICON BADGE
   The emoji/icon square shown at the top of login cards.
   ========================================================= */

.portal-icon-badge {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    margin: 0 auto 1.75rem;
    box-shadow: 0 10px 28px rgba(91, 140, 255, 0.35);
}


/* =========================================================
   PORTAL TYPOGRAPHY
   Headings and subtext used on login/password/error pages.
   ========================================================= */

.portal-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.portal-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.93rem;
    margin-bottom: 2rem;
    line-height: 1.65;
}


/* =========================================================
   PORTAL FORM ELEMENTS
   Inputs and buttons used on the login and password pages.
   These mirror the style of .form-field inputs in style.css
   but are scoped to portal pages to avoid conflicts.
   ========================================================= */

.portal-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.portal-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.portal-input {
    width: 100%;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.portal-input::placeholder {
    color: var(--text-muted);
}

.portal-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.14);
    /* Matches the focus ring used on the main registration form */
}

.portal-btn {
    /* Primary action button - styled to match .btn-primary in style.css */
    display: block;
    width: 100%;
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity var(--transition-fast), transform 0.15s ease;
    letter-spacing: 0.02em;
    text-align: center;
    box-shadow: 0 10px 25px rgba(91, 140, 255, 0.25);
}

.portal-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.portal-btn:active {
    transform: scale(0.98);
}


/* =========================================================
   PORTAL ALERTS
   Notification banners shown inside portal pages.
   Map to Django message tags: success, error, info.
   ========================================================= */

.portal-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Success = green, using --success variable */
.portal-alert-success {
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}

/* Error = red, using --danger variable */
.portal-alert-error {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

/* Info = blue/indigo, using --accent-primary */
.portal-alert-info {
    background: rgba(91, 140, 255, 0.10);
    border: 1px solid rgba(91, 140, 255, 0.25);
    color: #a5b4fc;
}

/* Warning = amber - used for pending payment notices etc. */
.portal-alert-warning {
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fcd34d;
}


/* =========================================================
   EMAIL SENT STATE
   Shown on the login page after the magic link is emailed.
   ========================================================= */

.portal-sent-state {
    text-align: center;
    padding: 0.75rem 0;
}

.portal-sent-icon {
    font-size: 3.25rem;
    display: block;
    margin-bottom: 1rem;
    animation: portalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes portalPop {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.portal-sent-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.portal-sent-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

.portal-sent-email {
    color: var(--accent-primary);
    font-weight: 600;
}

.portal-resend-btn {
    /* Minimal text button for the "Resend link" action */
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 1.5rem;
    padding: 0;
}

.portal-resend-btn:hover {
    color: var(--accent-secondary);
}


/* =========================================================
   PORTAL DIVIDER LINK
   The small "Not registered yet? Register here" line
   shown at the bottom of the login card.
   ========================================================= */

.portal-footer-link {
    text-align: center;
    margin-top: 1.75rem;
    font-size: 0.87rem;
    color: var(--text-muted);
}

.portal-footer-link a {
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.portal-footer-link a:hover {
    color: var(--accent-secondary);
}


/* =========================================================
   PORTAL NAVBAR LINK
   The "Portal" link added to the navbar in base.html.
   Styled slightly differently from regular nav links
   to draw attention without competing with "Register".
   ========================================================= */




/* =========================================================
   DASHBOARD TOP BAR
   The header row shown at the top of all dashboard pages.
   Contains the brand label and the sign-out button.
   ========================================================= */

.dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.dash-brand {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.dash-brand span {
    /* The accent word in the brand name (e.g. "International CodeFest '26") */
    color: var(--accent-primary);
}

.dash-signout-btn {
    /* Danger-toned sign out link */
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(239, 68, 68, 0.30);
    border-radius: var(--radius-sm);
    color: #fca5a5;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.dash-signout-btn:hover {
    background: rgba(239, 68, 68, 0.10);
}


/* =========================================================
   DASHBOARD HERO BANNER
   The greeting card at the top of each dashboard showing
   the user's name, email, and current status.
   ========================================================= */

.dash-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.75rem 2.25rem;
    margin-bottom: 1.5rem;

    /* Reuse the glass card style from style.css */
    background: var(--surface-glass);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* Staggered entrance - slightly delayed after the topbar */
    animation: portalCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.dash-avatar {
    /* Colourful square showing an emoji/icon representing the user's role */
    width: 68px;
    height: 68px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(91, 140, 255, 0.30);
}

.dash-hero-text h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
    line-height: 1.2;
}

.dash-hero-text p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0;
}

.dash-hero-status {
    /* Status badge pushed to the far right on wide screens */
    margin-left: auto;
}


/* =========================================================
   STATUS BADGE
   Coloured pill badges showing registration/account status.
   Used in the hero banner and inside data cards.
   ========================================================= */

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Colour variants - one per possible status value */
.status-pending {
    background: rgba(251, 191, 36, 0.13);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.30);
}

.status-approved {
    background: rgba(16, 185, 129, 0.13);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.30);
}

.status-paid {
    background: rgba(91, 140, 255, 0.13);
    color: #5b8cff;
    border: 1px solid rgba(91, 140, 255, 0.30);
}

.status-rejected {
    background: rgba(239, 68, 68, 0.13);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.30);
}

.status-discounted {
    background: rgba(139, 92, 246, 0.13);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.30);
}

.status-active {
    background: rgba(16, 185, 129, 0.13);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.30);
}

.status-inactive {
    background: rgba(100, 116, 139, 0.13);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.30);
}


/* =========================================================
   DASHBOARD GRID
   Two-column layout for the info cards on dashboard pages.
   Collapses to single column on small screens.
   ========================================================= */

.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 640px) {
    .dash-grid {
        grid-template-columns: 1fr;
        /* Single column on phones */
    }
}

.dash-card {
    /* Individual info card within the grid */
    background: var(--surface-glass);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: portalCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Staggered animation delay for each card */
.dash-card:nth-child(1) {
    animation-delay: 0.08s;
}

.dash-card:nth-child(2) {
    animation-delay: 0.13s;
}

.dash-card:nth-child(3) {
    animation-delay: 0.18s;
}

.dash-card:nth-child(4) {
    animation-delay: 0.23s;
}

.dash-card-full {
    /* Spans both columns - used for wide content like tables */
    grid-column: 1 / -1;
}


/* =========================================================
   CARD HEADER
   The title row at the top of each info card.
   Contains an icon badge and a label.
   ========================================================= */

.card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.card-icon {
    /* Small coloured square for the card category icon */
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Colour variants for card icons */
.card-icon-blue {
    background: rgba(91, 140, 255, 0.18);
}

.card-icon-green {
    background: rgba(16, 185, 129, 0.18);
}

.card-icon-amber {
    background: rgba(251, 191, 36, 0.14);
}

.card-icon-purple {
    background: rgba(139, 92, 246, 0.18);
}

.card-icon-red {
    background: rgba(239, 68, 68, 0.18);
}

.card-icon-teal {
    background: rgba(34, 211, 238, 0.14);
}

.card-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}


/* =========================================================
   FIELD ROWS
   Key-value rows inside info cards.
   Label on the left, value on the right.
   ========================================================= */

.field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.field-row:last-child {
    border-bottom: none;
}

.field-label {
    /* Left side: small uppercase label */
    font-size: 0.77rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    flex-shrink: 0;
}

.field-value {
    /* Right side: the actual data value */
    font-size: 0.91rem;
    color: var(--text-secondary);
    text-align: right;
    word-break: break-word;
}

.field-value-highlight {
    /* Accented value - used for important fields like email, code */
    color: var(--accent-primary);
    font-weight: 600;
}

.field-value-muted {
    /* Used when the field has no value yet */
    color: var(--text-muted);
    font-style: italic;
}

.field-value-mono {
    /* Monospace font for codes, UUIDs, reference numbers */
    font-family: "Courier New", Courier, monospace;
    font-size: 0.97rem;
    letter-spacing: 0.06em;
}


/* =========================================================
   AMBASSADOR PROGRESS BAR
   Shows progress toward the next referral milestone (every 10).
   ========================================================= */

.amb-progress-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.amb-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.amb-progress-count {
    font-weight: 700;
    color: var(--text-secondary);
}

.amb-bar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.amb-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-tertiary));
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    /* Width is set inline in the template: style="width: X%" */
}


/* =========================================================
   ADMIN STATS ROW
   Quick-glance number cards at the top of the admin dashboard.
   ========================================================= */

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 820px) {
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }
}

.admin-stat-card {
    background: var(--surface-glass);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: portalCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.admin-stat-card:nth-child(1) {
    animation-delay: 0.05s;
}

.admin-stat-card:nth-child(2) {
    animation-delay: 0.10s;
}

.admin-stat-card:nth-child(3) {
    animation-delay: 0.15s;
}

.admin-stat-card:nth-child(4) {
    animation-delay: 0.20s;
}

.admin-stat-label {
    font-size: 0.77rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.admin-stat-number {
    font-family: "Space Grotesk", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.admin-stat-number-accent {
    /* Coloured variant - used for pending count, ambassador count etc. */
    color: var(--accent-primary);
}


/* =========================================================
   PORTAL TABLE
   Used in the admin dashboard for registrations and ambassadors.
   ========================================================= */

.portal-table-wrapper {
    /* Horizontal scroll on small screens */
    overflow-x: auto;
    border-radius: var(--radius-md);
}

.portal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.portal-table th {
    padding: 0.8rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.portal-table td {
    padding: 0.875rem 1rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.portal-table tr:last-child td {
    border-bottom: none;
}

.portal-table tr:hover td {
    background: rgba(255, 255, 255, 0.025);
    /* Subtle hover highlight on table rows */
}


/* =========================================================
   PORTAL ACTION BUTTON
   Small inline buttons used inside tables or cards.
   ========================================================= */

.portal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--transition-fast), transform 0.12s ease;
    border: 1px solid transparent;
}

.portal-action-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.portal-action-btn-primary {
    background: rgba(91, 140, 255, 0.15);
    border-color: rgba(91, 140, 255, 0.30);
    color: var(--accent-primary);
}

.portal-action-btn-success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.28);
    color: #10b981;
}

.portal-action-btn-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
    color: #ef4444;
}


/* =========================================================
   ADD AMBASSADOR FORM
   Used on the admin "Add Ambassador" page.
   Reuses .portal-card but with a slightly wider max-width.
   ========================================================= */

.portal-form-card {
    background: var(--surface-glass);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-strong);
    padding: 2.5rem;
    max-width: 620px;
    width: 100%;
    animation: portalCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.portal-form-grid {
    /* Two-column layout for the add ambassador form fields */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
}

@media (max-width: 540px) {
    .portal-form-grid {
        grid-template-columns: 1fr;
    }

    .portal-form-card {
        padding: 1.75rem 1.5rem;
    }
}

.portal-form-full {
    /* Spans both columns in the form grid */
    grid-column: 1 / -1;
}


/* =========================================================
   PORTAL FOOTER NOTE
   Small text at the bottom of dashboard pages with a
   contact link and sign-out link.
   ========================================================= */

.portal-footer-note {
    text-align: center;
    margin-top: 3rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.portal-footer-note a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.portal-footer-note a:hover {
    color: var(--accent-secondary);
}


/* =========================================================
   INVALID LINK / ERROR PAGE
   Shown when a magic link is expired or already used.
   ========================================================= */

.portal-error-card {
    background: var(--surface-glass);
    border: 1px solid rgba(239, 68, 68, 0.20);
    /* Red-tinted border to signal an error state */
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-strong);
    padding: 3rem 2.75rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    animation: portalCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.portal-error-icon {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 1.25rem;
}

.portal-error-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.portal-error-msg {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}


/* =========================================================
   RESPONSIVE ADJUSTMENTS
   Breakpoints that apply specifically to portal pages.
   ========================================================= */

@media (max-width: 820px) {
    .dash-hero {
        padding: 1.5rem;
    }

    .dash-hero-status {
        margin-left: 0;
        /* On mobile, status badge flows naturally below hero text */
    }

    .admin-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .portal-card {
        padding: 2.25rem 1.75rem;
    }
}

@media (max-width: 480px) {
    .portal-page {
        padding: 2rem 0.75rem;
    }

    .portal-card {
        padding: 2rem 1.35rem;
    }

    .dash-card {
        padding: 1.25rem 1.25rem;
    }
}

/* =========================================================
   APPEND TO BOTTOM OF static/css/portal.css
   ========================================================= */


/* =========================================================
   DASH SECTION TITLE
   Section headings within the dashboard (e.g. "Team Members")
   ========================================================= */

.dash-section-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.dash-section-subtitle {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.25rem;
}


/* =========================================================
   TEAM MEMBER CARDS
   One card per team member - replaces old table on participant
   dashboard for a cleaner mobile-friendly layout.
   ========================================================= */

.dash-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.dash-member-card {
    background: var(--surface-glass);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem 1.25rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: portalCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: border-color var(--transition-fast);
}

/* Highlight the card belonging to the logged-in user */
.dash-member-card--mine {
    border-color: rgba(91, 140, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(91, 140, 255, 0.12);
}

.dash-member-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.dash-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.dash-member-meta {
    flex: 1;
    min-width: 0;
}

.dash-member-meta strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-member-role-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    margin-top: 0.2rem;
}

.tag-lead {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.30);
}

.tag-member {
    background: rgba(91, 140, 255, 0.12);
    color: var(--accent-primary);
    border: 1px solid rgba(91, 140, 255, 0.25);
}

.dash-member-edit-btn {
    margin-left: auto;
    flex-shrink: 0;
}


/* =========================================================
   PAYMENT BANNER
   Full-width call-to-action shown when payment is needed
   or has been submitted but not yet verified.
   ========================================================= */

.dash-payment-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-lg);
    background: rgba(91, 140, 255, 0.08);
    border: 1px solid rgba(91, 140, 255, 0.25);
    animation: portalCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Urgent variant - payment not yet uploaded */
.dash-payment-banner--urgent {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.30);
}

.dash-payment-banner__left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
}

.dash-payment-banner__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}


/* =========================================================
   PORTAL MODAL (pmodal)
   Used for the payment upload and member edit overlays.
   Separate namespace (pmodal-) to avoid clash with anything
   else on the site.
   ========================================================= */

.pmodal-backdrop {
    /* Full-screen overlay - hidden by default */
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;

    /* Hidden until .is-open is added */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.pmodal-backdrop.is-open {
    opacity: 1;
    pointer-events: all;
}

.pmodal {
    background: var(--bg-secondary, #13151f);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;

    /* Slide-up entrance */
    transform: translateY(20px);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.pmodal-backdrop.is-open .pmodal {
    transform: translateY(0);
}

/* Wide variant for the edit member modal (more fields) */
.pmodal--wide {
    max-width: 680px;
}

.pmodal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pmodal-header h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.pmodal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: color var(--transition-fast), background var(--transition-fast);
    line-height: 1;
}

.pmodal-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.pmodal-body {
    padding: 1.4rem 1.75rem 1.75rem;
}

/* Two-column grid inside the modal for the edit form */
.pmodal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 520px) {
    .pmodal-grid {
        grid-template-columns: 1fr;
    }

    .pmodal--wide {
        max-width: 100%;
    }
}

/* Span both columns */
.pmodal-full {
    grid-column: 1 / -1;
}

/* status_payment_submitted badge */
.status-payment_submitted {
    background: rgba(251, 191, 36, 0.13);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.30);
}