/* Admin Registration Waitlist.
   Namespaced with .wl- to avoid collisions; loaded globally via App.razor.

   Mirrors the .ps- (admin-statistics) conventions: theme CSS variables only so
   light/dark both track automatically, hairline border + soft shadow, a single
   radius scale, tabular figures, and color reserved for meaning (the ON state). */

/* ---- Page header ---- */
.wl-head {
    margin: 8px 0 4px;
}

.wl-head__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

.wl-head__sub {
    margin-top: 4px;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* ---- Section header (labeled divider) ---- */
.wl-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 12px;
}

.wl-section__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--mud-palette-text-secondary);
    opacity: 0.45;
}

.wl-section__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.wl-section__rule {
    height: 1px;
    flex: 1 1 auto;
    background: var(--mud-palette-lines-default);
}

/* ---- Shared soft surface ---- */
.wl-card {
    box-sizing: border-box;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

/* ---- Status-aware waitlist-mode banner ---- */
.wl-mode {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Left accent bar: neutral when off, warning when sign-ups are held. */
.wl-mode::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--mud-palette-lines-default);
}

.wl-mode--on::before {
    background: var(--mud-palette-warning);
}

.wl-mode__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.wl-mode--on .wl-mode__icon {
    /* Darkened amber toward the text color so the glyph keeps contrast in light mode. */
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.wl-mode__body {
    flex: 1 1 auto;
    min-width: 0;
}

.wl-mode__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.wl-mode__desc {
    margin-top: 2px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.wl-mode__pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.wl-mode--on .wl-mode__pill {
    /* Darkened amber text so the small bold "On" label passes contrast in light mode. */
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: var(--mud-palette-action-default-hover); /* fallback */
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

/* ---- Summary tile (calm: neutral surface, no trend) ---- */
.wl-tile {
    height: 100%;
    min-height: 96px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.wl-tile:hover {
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: 0 3px 10px rgba(16, 24, 40, 0.07);
}

.wl-tile__top {
    display: flex;
    align-items: center;
    min-height: 32px;
}

.wl-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
}

.wl-tile__value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.wl-tile__label {
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

/* ---- Two-line user cell ---- */
.wl-user {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.wl-user__name {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.wl-user__email {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    word-break: break-word;
}

/* Applicant's "why I'd be a good beta tester" note: two clamped lines, full text in the tooltip. */
.wl-user__note {
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 42ch;
    white-space: pre-line;
}

.wl-user__note--empty {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

/* ---- Framed data grid (hairline border + clipped radius) ---- */
.wl-grid {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    overflow: hidden;
}

/* ---- Pending toolbar (search + sort) ---- */
.wl-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.wl-toolbar__search {
    flex: 1 1 240px;
    min-width: 200px;
}

.wl-toolbar__sort {
    flex: 0 0 auto;
    width: 170px;
}

/* ---- Bulk-selection action bar ---- */
.wl-selectionbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-action-default-hover);
}

/* ---- Create-invite dialog ---- */
.wl-dialog__group-label {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Created-code result: a recessed well with the code featured. */
.wl-created {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 22px 16px;
    border-radius: 14px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
}

.wl-created__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.wl-created__code {
    max-width: 100%;
    padding: 8px 18px;
    border-radius: 10px;
    font-family: "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
    word-break: break-all;
}

/* ---- Uses cell doorway (only rendered when a code has been used) ---- */
.wl-uses-link {
    padding: 0 6px;
    min-width: 0;
    text-transform: none;
    font-weight: 600;
}

/* ---- Redemptions dialog: who used a code ---- */
.wl-redemptions {
    display: flex;
    flex-direction: column;
}

.wl-redemption {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.wl-redemption:last-child {
    border-bottom: none;
}

.wl-redemption .wl-user {
    flex: 1 1 auto;
}

.wl-redemption__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.wl-redemption__date {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Loading and empty states share one centred row. */
.wl-redemptions__state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 2px;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .wl-head__title {
        font-size: 1.3rem;
    }

    .wl-section {
        margin: 22px 0 10px;
    }

    .wl-mode {
        flex-wrap: wrap;
    }

    .wl-tile {
        min-height: 84px;
        padding: 12px 13px;
    }

    .wl-tile__value {
        font-size: 1.4rem;
    }

    /* Keep row and section actions at the 44px minimum touch target on mobile. */
    .wl-grid .mud-button-root,
    .wl-grid .mud-icon-button,
    .wl-section .mud-button-root {
        min-height: 44px;
    }

    .wl-grid .mud-icon-button {
        min-width: 44px;
    }
}