/* Cupo admin UI — aligned with Hostport hp-* patterns, Radzen theme tokens */

:root {
    --hp-text: var(--rz-text-color);
    --hp-text-muted: var(--rz-text-secondary-color);
    --hp-surface: var(--rz-base-background-color);
    --hp-surface-raised: var(--rz-base-50, #f8fafc);
    --hp-border-subtle: var(--rz-base-300);
    --hp-primary: var(--rz-primary);
    --hp-primary-accent: var(--rz-primary);
    --hp-primary-muted: var(--rz-primary-lighter);
    --hp-success: var(--rz-success);
    --hp-warning: var(--rz-warning);
    --hp-danger: var(--rz-danger);
    --hp-radius: 10px;
    --hp-radius-sm: 8px;
    --hp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --hp-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);

    /* Shared Hp* component tokens (Lib/Ui, _content/Ui/hp-ui.css) — Cupo values */

    --hp-page-header-gap-bottom: 0.25rem;
    --hp-page-header-title-size: 1.5rem;
    --hp-page-header-subtitle-size: 0.9rem;

    --hp-card-bg: var(--hp-surface);
    --hp-card-header-padding: 1rem 1.25rem;
    --hp-card-header-bg: var(--hp-surface-raised);
    --hp-card-header-font-size: 0.95rem;
    --hp-card-header-border: 1px solid var(--hp-border-subtle);

    --hp-stat-card-bg: var(--hp-surface);
    --hp-stat-value-size: 1.35rem;
    --hp-stat-label-weight: 600;
    --hp-stat-label-transform: uppercase;
    --hp-stat-label-letter-spacing: 0.04em;
    --hp-stat-label-margin: 0 0 0.35rem;

    --hp-empty-state-padding: 2rem 1.25rem;
    --hp-empty-state-icon-size: 2.75rem;
    --hp-empty-state-title-size: 1.05rem;
    --hp-empty-state-description-size: 0.9rem;
    --hp-empty-state-actions-margin-top: 0.35rem;

    --hp-section-margin-bottom: 0;
    --hp-section-title-size: 0.95rem;
}

.cupo-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.85rem;
}

.cupo-hub-card {
    height: 100%;
}

.cupo-admin-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: var(--hp-surface-raised);
    border: 1px solid var(--hp-border-subtle);
    border-radius: var(--hp-radius-sm);
}

.cupo-admin-filter-search {
    min-width: 14rem;
    flex: 1 1 14rem;
    max-width: 22rem;
}

.cupo-admin-filter-extra {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cupo-admin-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.cupo-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.cupo-page-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Notifications feed (/notifications + header bell) --- */

.cupo-notice-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.cupo-notice-group {
    padding: 1rem 1.25rem;
}

.cupo-notice-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--hp-radius-sm);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.cupo-notice-row:hover {
    background: var(--hp-surface-raised);
}

.cupo-notice-row:focus-visible {
    outline: 2px solid var(--hp-primary);
    outline-offset: 2px;
}

.cupo-metering-tile:focus-visible {
    outline: 2px solid var(--hp-primary);
    outline-offset: 2px;
}

.cupo-notice-row.critical {
    border-left-color: var(--hp-danger);
}

.cupo-notice-row.warning {
    border-left-color: var(--hp-warning);
}

.cupo-notice-row.info {
    border-left-color: var(--hp-border-subtle);
}

.cupo-notice-icon {
    color: var(--hp-text-muted);
    margin-top: 0.15rem;
}

.cupo-notice-body {
    flex: 1;
    min-width: 0;
}

.cupo-notice-title-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cupo-notice-title {
    font-weight: 600;
    color: var(--hp-text);
}

.cupo-notice-detail {
    font-size: 0.85rem;
    color: var(--hp-text-muted);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.cupo-notice-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--hp-text-muted);
    white-space: nowrap;
    margin-top: 0.15rem;
}

.cupo-notice-time {
    font-size: 0.78rem;
}

.cupo-notice-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cupo-notice-source {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--hp-border-subtle);
    color: var(--hp-text-muted);
}

.cupo-notice-source.ok .rz-icon {
    color: var(--hp-success);
}

.cupo-notice-source.failed {
    border-color: var(--hp-danger);
    color: var(--hp-danger);
}

.cupo-notice-source.failed .rz-icon {
    color: var(--hp-danger);
}

.cupo-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.cupo-bell:hover {
    background: rgba(255, 255, 255, 0.12);
}

.cupo-bell-badge {
    position: absolute;
    top: 0.1rem;
    right: -0.15rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    color: #fff;
}

.cupo-bell-badge.critical {
    background: var(--hp-danger);
}

.cupo-bell-badge.warning {
    background: var(--hp-warning);
}

/* Per-page crash guard (MainLayout ErrorBoundary) */
.cupo-page-crash {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 1.5rem;
    text-align: center;
}

.cupo-page-crash h2 {
    margin: 0;
    font-size: 1.35rem;
}

.cupo-page-crash p {
    margin: 0;
    max-width: 48rem;
    overflow-wrap: anywhere;
}

/* Separator before a total row in the finance cards. Replaces <RadzenDivider />, which never
   existed in Radzen.Blazor 11.0.5 — it parsed as an inert unknown element that drew nothing
   (board card 4eea8803). */
.cupo-total-rule {
    border: 0;
    border-top: 1px solid var(--hp-border-subtle);
    margin: 0;
}