/*
    Styling for the admin dashboard at /admin.

    The whole site sits on the purple gradient set in app.css, so the dashboard
    uses translucent "glass" panels with white text instead of the usual white
    MudBlazor surfaces, which would be unreadable there.
*/

/* --- sign in / sign out ------------------------------------------------- */

.admin-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.admin-auth-card {
    width: 100%;
    max-width: 25rem;
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.admin-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.admin-auth-subtitle {
    color: #5b6270;
    margin: 0 0 1.5rem;
    font-size: 0.925rem;
}

/* --- dashboard shell ---------------------------------------------------- */

.admin-page {
    color: #fff;
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.admin-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.admin-subtitle {
    margin: 0.25rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.admin-range-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-page .admin-range-buttons .mud-button-outlined {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
}

.admin-loading {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.admin-footnote {
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* --- cards -------------------------------------------------------------- */

.admin-card {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px !important;
    color: #fff !important;
    backdrop-filter: blur(6px);
}

.admin-card-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.72);
}

.admin-card-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.35rem;
}

.admin-card-caption {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.admin-card-delta {
    margin-top: 0.4rem;
    font-size: 0.78rem;
}

.admin-card-delta-up {
    color: #8ef0b4;
}

.admin-card-delta-down {
    color: #ffb3b3;
}

.admin-card-delta-neutral {
    color: rgba(255, 255, 255, 0.55);
}

/* --- charts and tables inside the cards --------------------------------- */

.admin-card .mud-chart-legend,
.admin-card .mud-chart-legend-item {
    color: #fff;
}

.admin-card svg text {
    fill: #fff;
}

.admin-card .mud-table,
.admin-card .mud-table-container {
    background-color: transparent !important;
}

.admin-card .mud-table th,
.admin-card .mud-table td {
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

.admin-card .mud-table-row:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}