/* ═══════════════════════════════════════════════════════════════════════
   TotumTeams — portal, admin and account chrome, dark redesign
   Source of truth for the look: scratch/redesign/css/app.css

   portal.css is token-driven: panels use var(--white), separators use
   var(--grey), copy uses var(--text). Redefining those tokens on the shell
   flips most of the file at once, so what follows the token block is only
   the hardcoded light values and the pieces the redesign shapes differently
   (sidebar, topbar, status badges).

   MudBlazor components are handled by PaletteDark in TotumTeamsTheme, not
   here — this file styles the chrome around them.
═══════════════════════════════════════════════════════════════════════ */

.portal-shell {
    --tt-heading: var(--tt-text);

    /* portal.css is token-driven too: panels are var(--white), separators
       var(--grey), copy var(--text). Mapping those onto the palette flips most
       of the file without editing it. */
    --white: var(--tt-panel);
    --bg: var(--tt-band);
    --light-bg: var(--tt-band-alt);
    --grey: var(--tt-border);
    --text: var(--tt-text);
    --muted: var(--tt-muted);
    --blue: var(--tt-orange);
    --orange: var(--tt-orange);

    --tt-glass: var(--tt-panel);
    --tt-glass-border: var(--tt-border);

    font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    word-spacing: .06em;
    color: var(--tt-text);
    background-color: var(--tt-band);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, var(--tt-glow), transparent 55%),
        linear-gradient(180deg, var(--tt-grad-top) 0%, var(--tt-band) 100%);
    background-attachment: fixed;
}


/* ── Top bar ─────────────────────────────────────────────────────────── */
.portal-shell .topbar {
    background: var(--tt-appbar);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--tt-appbar-border);
    box-shadow: none;
    color: var(--tt-appbar-text);
}

.portal-shell .topbar-lang-btn { color: var(--muted); }
.portal-shell .topbar-lang-btn:hover { color: var(--text); }
.portal-shell .user-avatar { background: var(--tt-orange); color: #fff; }

/* ── Sidebars: portal, admin, account manage ─────────────────────────── */
/* The redesign floats the sidebar as a glass card rather than butting a flat panel
   against the content, so it sits on the page background like everything else. */
.portal-shell .portal-sidenav--visible,
.portal-shell .admin-sidebar,
.portal-shell .manage-nav {
    background: var(--tt-panel);
    border: 1px solid var(--tt-border);
    border-radius: 18px;
    backdrop-filter: blur(18px);
    margin: 16px;
    box-shadow: none;
}

.portal-shell .manage-nav {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    border-radius: 18px;
    backdrop-filter: blur(18px);
}

.portal-shell .sidenav-link,
.portal-shell .sidenav-sublink,
.portal-shell .sidenav-group-toggle,
.portal-shell .manage-nav .nav-link,
.portal-shell .admin-sidebar a {
    color: var(--muted);
    border-radius: 12px;
    font-weight: 600;
}

.portal-shell .sidenav-link:hover,
.portal-shell .sidenav-sublink:hover,
.portal-shell .sidenav-group-toggle:hover,
.portal-shell .manage-nav .nav-link:hover,
.portal-shell .admin-sidebar a:hover {
    background: var(--tt-fill-2);
    color: var(--text);
}

/* The redesign marks the active item with an orange wash plus a hairline ring,
   rather than the light theme's navy tint. */
.portal-shell .sidenav-link.active,
.portal-shell .sidenav-sublink.active,
.portal-shell .manage-nav .nav-link.active,
.portal-shell .admin-sidebar a.active {
    background: var(--tt-orange-wash);
    color: var(--tt-orange);
    box-shadow: inset 0 0 0 1px var(--tt-orange-ring);
}

.portal-shell .sidenav-section-label { color: var(--muted); }
.portal-shell .sidenav-divider { background: var(--tt-border); }

/* ── Panels and cards → glass ────────────────────────────────────────── */
.portal-shell .group-panel,
.portal-shell .org-panel,
.portal-shell .dashboard-card,
.portal-shell .event-card,
.portal-shell .form-wrap,
.portal-shell .manage-body,
.portal-shell .toggle-row,
.portal-shell .cal-card {
    background: var(--tt-glass);
    border: 1px solid var(--tt-glass-border);
    border-radius: 18px;
    backdrop-filter: blur(18px);
    box-shadow: none;
    color: var(--text);
}

.portal-shell .event-card:hover,
.portal-shell .dashboard-card:hover {
    border-color: var(--tt-orange-ring);
    box-shadow: 0 12px 32px var(--tt-shadow);
}

.portal-shell .group-header,
.portal-shell .org-panel-header {
    background: var(--tt-fill-0);
    border-bottom: 1px solid var(--tt-glass-border);
}

.portal-shell .group-header-row1 { border-bottom-color: var(--tt-fill-3); }
.portal-shell .org-panel { border-top: 4px solid var(--tt-orange); }

.portal-shell .form-col-left { border-right-color: var(--tt-glass-border); }
.portal-shell .form-col-right { background: var(--tt-subpanel); }
.portal-shell .form-header { border-bottom-color: var(--tt-glass-border); }
.portal-shell .form-footer {
    background: var(--tt-sticky);
    border-top: 1px solid var(--tt-glass-border);
    backdrop-filter: blur(16px);
}

.portal-shell .admin-main { background: transparent; }

/* The fade over the scrollable group tabs has to match the header behind it. */
.portal-shell .group-tabs-wrapper::after {
    background: linear-gradient(to right, transparent 0%, var(--tt-band-alt) 60%);
}

/* ── Controls ────────────────────────────────────────────────────────── */
.portal-shell .view-switcher,
.portal-shell .search-box,
.portal-shell .filter-pill,
.portal-shell .day-chip,
.portal-shell .btn-secondary,
.portal-shell .action-btn,
.portal-shell .notification-mode-btn {
    background: var(--tt-fill-2);
    border: 1px solid var(--tt-glass-border);
    color: var(--text);
}

.portal-shell .filter-pill,
.portal-shell .day-chip,
.portal-shell .btn-secondary { border-radius: 999px; }

.portal-shell .view-switcher button.active,
.portal-shell .filter-pill.active,
.portal-shell .day-chip.active,
.portal-shell .notification-mode-btn.active {
    background: var(--tt-orange-wash);
    border-color: var(--tt-orange);
    color: var(--tt-orange);
}

.portal-shell input,
.portal-shell select,
.portal-shell textarea,
.portal-shell .form-wrap input {
    background: var(--tt-input-bg);
    border: 1px solid var(--tt-glass-border);
    color: var(--text);
    border-radius: 10px;
}
.portal-shell input::placeholder,
.portal-shell .form-wrap input::placeholder { color: var(--muted); }

/* ── Bootstrap classes retinted to the palette ───────────────────────────
   The account and manage pages were copied from the ASP.NET Identity
   template, which leans on Bootstrap. bootstrap.min.css is loaded, so
   .alert/.card/.text-danger paint their light-mode colours here whatever
   data-theme says. The opt-in field classes the pages use instead of
   Bootstrap's form controls live in theme.css, since the public account
   forms (which render outside .portal-shell) need them too.
─────────────────────────────────────────────────────────────────────────── */
/* Bootstrap's .text-* utilities carry !important, so this needs it too. */
.portal-shell .text-danger,
.portal-shell .validation-summary-errors { color: var(--tt-danger-fg) !important; }
.portal-shell .validation-message { display: block; margin-top: 4px; font-size: .78rem; }

.portal-shell .alert {
    background: var(--tt-fill-2);
    border: 1px solid var(--tt-glass-border);
    color: var(--text);
    border-radius: 12px;
}
.portal-shell .alert-success { background: var(--tt-ok-bg); border-color: transparent; color: var(--tt-ok-fg); }
.portal-shell .alert-warning { background: var(--tt-warn-bg); border-color: var(--tt-warn-border); color: var(--tt-warn-fg); }
.portal-shell .alert-danger { background: var(--tt-danger-bg); border-color: transparent; color: var(--tt-danger-fg); }
.portal-shell .alert-info { background: var(--tt-info-bg); border-color: transparent; color: var(--tt-info-fg); }

.portal-shell .card {
    background: var(--tt-fill-1);
    border: 1px solid var(--tt-glass-border);
    border-radius: 12px;
    color: var(--text);
}
.portal-shell .text-muted { color: var(--muted) !important; }

/* The element rule above paints every input in the shell, which squares off
   native checkboxes and radios. Give them their own shape back. */
.portal-shell input[type="checkbox"],
.portal-shell input[type="radio"] {
    width: 1rem;
    height: 1rem;
    padding: 0;
    background: var(--tt-input-bg);
    border: 1px solid var(--tt-border-input);
    accent-color: var(--tt-orange);
}
.portal-shell input[type="checkbox"] { border-radius: 3px; }
.portal-shell input[type="radio"] { border-radius: 50%; }

.portal-shell .user-menu-dropdown {
    background: var(--tt-menu);
    border: 1px solid var(--tt-glass-border);
    box-shadow: 0 20px 50px var(--tt-shadow-strong);
}
.portal-shell .user-menu-dropdown a { color: var(--text) !important; }
.portal-shell .user-menu-dropdown a:hover { background: var(--tt-fill-2); }

/* ── Text ────────────────────────────────────────────────────────────── */
.portal-shell .page-title,
.portal-shell .form-title,
.portal-shell .event-title,
.portal-shell .date-main,
.portal-shell .dashboard-card-name,
.portal-shell .invite-detail-value,
.portal-shell .toggle-info .toggle-label,
.portal-shell .notification-mode-btn-label { color: var(--text); }

.portal-shell .group-name { color: var(--tt-orange); }

.portal-shell .recur-badge,
.portal-shell .location-text,
.portal-shell .date-sub,
.portal-shell .dashboard-card-sub,
.portal-shell .invite-detail-label,
.portal-shell .toggle-info .toggle-sub,
.portal-shell .notification-mode-btn-sub,
.portal-shell .group-tab { color: var(--muted); }

.portal-shell .group-tab.active { color: var(--tt-orange); }
.portal-shell .type-chip,
.portal-shell .badge-role,
.portal-shell .cal-chip--admin {
    background: var(--tt-orange-wash);
    color: var(--tt-orange);
}

.portal-shell .invite-detail-row { border-bottom-color: var(--tt-glass-border); }

/* ── Status badges and calendar pills ────────────────────────────────────
   The light theme used pale tints with dark text. On the dark ground that
   inverts: a translucent wash of the same hue with a light-tinted label, so
   the colour still carries the meaning.
─────────────────────────────────────────────────────────────────────────── */
.portal-shell .badge-confirmed,
.portal-shell .badge-attending,
.portal-shell .badge-accepted,
.portal-shell .cal-status-pill--attending { background: var(--tt-ok-bg); color: var(--tt-ok-fg); }

.portal-shell .badge-tentative,
.portal-shell .badge-postponed,
.portal-shell .badge-pending,
.portal-shell .cal-status-pill--tentative { background: var(--tt-warn-bg); color: var(--tt-warn-fg); }

.portal-shell .badge-proposed,
.portal-shell .badge-reinvited,
.portal-shell .badge-notified,
.portal-shell .cal-status-pill--notified { background: var(--tt-fill-3); color: var(--muted); }

.portal-shell .badge-cancelled,
.portal-shell .badge-not-attending,
.portal-shell .badge-declined,
.portal-shell .cal-status-pill--not-attending { background: var(--tt-danger-bg); color: var(--tt-danger-fg); }

.portal-shell .badge-completed,
.portal-shell .badge-invited,
.portal-shell .cal-status-pill--invited { background: var(--tt-info-bg); color: var(--tt-info-fg); }

.portal-shell .cal-status-pill--reinvited { background: var(--tt-purple-bg); color: var(--tt-purple-fg); }

.portal-shell .cal-progress { border-color: var(--tt-glass-border); background: var(--tt-fill-2); }

/* ── Headings ────────────────────────────────────────────────────────── */
.portal-shell h1,
.portal-shell h2,
.portal-shell h3 { color: var(--text); letter-spacing: -.02em; word-spacing: .1em; }

/* The org pill inherited var(--blue), which the token remap turned orange — far
   too loud for a standing label. The redesign uses a faint wash instead. */
.portal-shell .sidenav-org-pill {
    background: var(--tt-fill-1);
    border: 1px solid var(--tt-glass-border);
    color: var(--text);
    border-radius: 12px;
}
.portal-shell .sidenav-org-name { color: var(--text); }
.portal-shell .sidenav-org-gear {
    color: var(--tt-text);
    background: var(--tt-fill-2);
    border-color: var(--tt-border-input);
}
.portal-shell .sidenav-org-gear:hover {
    color: var(--tt-text);
    background: var(--tt-fill-3);
    border-color: var(--tt-orange);
}
.portal-shell .sidenav-group-gear {
    color: var(--tt-muted);
    background: var(--tt-fill-1);
    border-color: var(--tt-border);
}
.portal-shell .sidenav-group-gear:hover {
    color: var(--tt-orange);
    background: var(--tt-fill-3);
    border-color: var(--tt-orange);
}


/* ── Radio buttons and checkboxes on the dark cards ──────────────────── */
/* Bootstrap's form-check inputs draw a dark-grey ring that all but vanishes on the glass
   cards (the account deletion form's per-child choices). */
.portal-shell .form-check-input {
    background-color: transparent;
    border: 2px solid var(--tt-muted);
}
.portal-shell .form-check-input:checked {
    background-color: var(--tt-orange);
    border-color: var(--tt-orange);
}