/* One reusable data-table skeleton for participant-facing pages. Structure (layout, spacing,
   status-pill/button treatment, responsive mobile stacking) is fixed here; per-event color comes
   entirely from the --brand-* custom properties ThemedHead already sets on a themed page (falls
   back to a plain light palette when unthemed, e.g. a page that only shows the generic InuniNav).
   Before this, several pages each hand-rolled their own near-identical table CSS (Blazor's CSS
   isolation scopes a .razor.css to only its own component, so "reuse" meant copy-pasting) that
   drifted out of sync and broke independently - see Documents.razor for the reference usage. */

.app-table-wrap {
    --app-table-surface: color-mix(in srgb, var(--brand-surface, #fff) 92%, transparent);
    --app-table-surface-solid: var(--brand-surface, #fff);
    --app-table-border: var(--brand-border, #d8e8e8);
    --app-table-row-hover: color-mix(in srgb, var(--brand-text-main, #000) 4%, transparent);
    --app-table-text: var(--brand-text-main, #232323);
    --app-table-text-muted: var(--brand-text-muted, #5d7a7a);
    --app-table-accent: var(--brand-primary, #185354);
    --app-table-accent-contrast: var(--brand-primary-contrast, #fff);
    --app-table-good-bg: color-mix(in srgb, #22c55e 18%, transparent);
    --app-table-good-fg: #16a34a;
    --app-table-warn-bg: color-mix(in srgb, #eab308 18%, transparent);
    --app-table-warn-fg: #a16207;
    --app-table-bad-bg: color-mix(in srgb, #ef4444 18%, transparent);
    --app-table-bad-fg: #b91c1c;

    background: var(--app-table-surface);
    border: 1px solid var(--app-table-border);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.app-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: var(--app-table-text);
    font-size: 0.9rem;
}

.app-table thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--app-table-text-muted);
    background: var(--app-table-surface-solid);
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--app-table-border);
}

.app-table__actions-col {
    text-align: right !important;
}

.app-table tbody td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--app-table-border);
    vertical-align: middle;
    overflow-wrap: break-word;
}

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

.app-table tbody tr:not(.app-table__expand-row):hover {
    background: var(--app-table-row-hover);
}

.app-table__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.app-table__expand-row td {
    background: color-mix(in srgb, var(--app-table-text) 3%, transparent);
}

.app-table__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-table__status::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}

.app-table__status--good { background: var(--app-table-good-bg); color: var(--app-table-good-fg); }
.app-table__status--warn { background: var(--app-table-warn-bg); color: var(--app-table-warn-fg); }
.app-table__status--bad { background: var(--app-table-bad-bg); color: var(--app-table-bad-fg); }

.app-table__tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--app-table-bad-bg);
    color: var(--app-table-bad-fg);
}

.app-table__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    background: none;
}

.app-table__btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.app-table__btn--brand {
    background: var(--app-table-accent);
    color: var(--app-table-accent-contrast);
}

.app-table__btn--ghost {
    background: transparent;
    border-color: color-mix(in srgb, var(--app-table-text) 30%, transparent);
    color: var(--app-table-text);
}

.app-table__btn--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--app-table-text) 8%, transparent);
}

.app-table__btn--outline {
    background: transparent;
    border-color: var(--app-table-border);
    color: var(--app-table-text-muted);
}

.app-table__btn--outline:hover:not(:disabled) {
    color: var(--app-table-text);
    border-color: color-mix(in srgb, var(--app-table-text) 30%, transparent);
}

@media (max-width: 720px) {
    .app-table-wrap {
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .app-table thead {
        display: none;
    }

    .app-table, .app-table tbody, .app-table tr, .app-table td {
        display: block;
        width: 100%;
    }

    .app-table tbody tr {
        background: var(--app-table-surface);
        border: 1px solid var(--app-table-border);
        border-radius: 0.9rem;
        padding: 0.85rem 1rem;
        margin-bottom: 0.75rem;
    }

    .app-table tbody tr:hover {
        background: var(--app-table-surface);
    }

    .app-table tbody td {
        padding: 0.3rem 0;
        border-bottom: none;
    }

    .app-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--app-table-text-muted);
        margin-bottom: 0.15rem;
    }

    .app-table__actions, .app-table__actions-col {
        text-align: left !important;
    }

    .app-table__actions {
        justify-content: flex-start;
    }
}