/**
 * RIVR — Institutional DeFi Dashboard Design System
 * Font: Anuphan (project default; Helvetica spec mapped to Anuphan)
 * Scope: tokens + reusable component patterns (no page layouts)
 */

:root {
    /* Brand */
    --rivr-navy: #1e325a;
    --rivr-navy-deep: #16284a;
    --rivr-navy-accent: rgba(30, 50, 90, 0.8);
    --rivr-navy-ghost: rgba(30, 50, 90, 0.05);
    --rivr-navy-border: rgba(30, 50, 90, 0.1);
    --rivr-navy-focus: rgba(30, 50, 90, 0.4);

    /* Neutrals */
    --rivr-bg: #f0f0f0;
    --rivr-surface: #ffffff;
    --rivr-text: #5e6470;
    --rivr-text-secondary: rgba(94, 100, 112, 0.7);
    --rivr-border-glass: rgba(255, 255, 255, 0.1);

    /* Interactive */
    --rivr-success: #22c55e;
    --rivr-warning: #f59e0b;
    --rivr-error: #ef4444;
    --rivr-success-soft: rgba(34, 197, 94, 0.12);
    --rivr-warning-soft: rgba(245, 158, 11, 0.12);
    --rivr-error-soft: rgba(239, 68, 68, 0.12);

    /* Radius */
    --rivr-radius-sm: 12px;
    --rivr-radius-md: 20px;
    --rivr-radius-lg: 32px;
    --rivr-radius-xl: 48px;
    --rivr-radius-pill: 9999px;
    --rivr-radius-input: 16px;

    /* Glass */
    --rivr-glass-bg: rgba(255, 255, 255, 0.3);
    --rivr-glass-bg-strong: rgba(255, 255, 255, 0.7);
    --rivr-glass-blur: 24px;
    --rivr-glass-blur-input: 16px;
    --rivr-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --rivr-glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.1);

    /* Motion */
    --rivr-duration-fast: 200ms;
    --rivr-duration-normal: 400ms;
    --rivr-duration-slow: 800ms;
    --rivr-ease: cubic-bezier(0.2, 0, 0, 1);

    /* Typography (Anuphan; practical dashboard scale) */
    --rivr-font: 'Anuphan', system-ui, sans-serif;
    --rivr-text-caption: 0.75rem;
    --rivr-text-small: 0.875rem;
    --rivr-text-body: 1rem;
    --rivr-text-body-lg: 1.125rem;
    --rivr-text-h-md: 2rem;
    --rivr-text-h-lg: 3.5rem;
    --rivr-text-h-xl: 5rem;
    --rivr-tracking-tight: -0.04em;

    /* Spacing (4px scale) */
    --rivr-space-1: 4px;
    --rivr-space-2: 8px;
    --rivr-space-3: 12px;
    --rivr-space-4: 16px;
    --rivr-space-5: 24px;
    --rivr-space-6: 32px;
    --rivr-space-7: 48px;
    --rivr-space-8: 64px;

    /* Map legacy site tokens → RIVR (overridden by inline theme when set) */
    --site-primary-color: var(--rivr-navy);
    --site-secondary-color: var(--rivr-navy-deep);
    --site-button-color: var(--rivr-navy);
    --site-badge-color: var(--rivr-navy-deep);
    --site-progress-color: var(--rivr-navy);
    --site-card-primary-color: var(--rivr-navy);
    --site-card-secondary-color: var(--rivr-navy-deep);
    --site-card-button-color: var(--rivr-navy);
    --site-card-badge-color: var(--rivr-navy-deep);
    --site-card-progress-color: var(--rivr-navy);
    --site-primary-soft: rgba(30, 50, 90, 0.08);
    --site-secondary-soft: rgba(22, 40, 74, 0.08);
}

@supports (color: color-mix(in srgb, #000 50%, #fff 50%)) {
    :root {
        --site-primary-soft: color-mix(in srgb, var(--site-primary-color) 10%, #ffffff);
        --site-secondary-soft: color-mix(in srgb, var(--site-secondary-color) 10%, #ffffff);
    }
}

/* ─── Base ─── */
body {
    font-family: var(--rivr-font);
    font-size: var(--rivr-text-body);
    color: var(--rivr-text);
    background-color: var(--rivr-bg);
    -webkit-font-smoothing: antialiased;
}

h1, .rivr-h-xl {
    font-size: clamp(2rem, 4vw, var(--rivr-text-h-xl));
    font-weight: 400;
    letter-spacing: var(--rivr-tracking-tight);
    color: var(--rivr-navy);
    line-height: 1.05;
}

h2, .rivr-h-lg {
    font-size: clamp(1.5rem, 3vw, var(--rivr-text-h-lg));
    font-weight: 400;
    color: var(--rivr-navy);
    line-height: 1.15;
}

h3, .rivr-h-md {
    font-size: clamp(1.25rem, 2vw, var(--rivr-text-h-md));
    font-weight: 400;
    color: var(--rivr-navy);
    line-height: 1.2;
}

.rivr-body-lg { font-size: var(--rivr-text-body-lg); }
.rivr-small { font-size: var(--rivr-text-small); }
.rivr-caption { font-size: var(--rivr-text-caption); color: var(--rivr-text-secondary); }

/* ─── Glass surfaces ─── */
.rivr-glass,
.app-surface-panel,
.admin-page .view-toolbar,
.admin-page .admin-page-panel,
.admin-page .admin-report-toolbar,
.admin-page #view-system .system-settings-card,
.admin-page #view-announcement .system-settings-card,
.home-alert,
.home-stat-card,
.home-profile-card,
.admin-report-stat,
.admin-report-row,
.admin-page .admin-sidebar,
.admin-header,
.app-unified-header {
    background: var(--rivr-glass-bg-strong);
    backdrop-filter: blur(var(--rivr-glass-blur));
    -webkit-backdrop-filter: blur(var(--rivr-glass-blur));
    border: 1px solid var(--rivr-border-glass);
    box-shadow: var(--rivr-glass-shadow);
}

.admin-page #view-clubs #admin-club-list .admin-club-card {
    background: var(--rivr-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(30, 50, 90, 0.08);
    border-radius: var(--rivr-radius-sm);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.rivr-glass--soft {
    background: var(--rivr-glass-bg);
}

.rivr-card,
.rivr-glass-card {
    border-radius: var(--rivr-radius-md);
    background: var(--rivr-surface);
    border: 1px solid var(--rivr-border-glass);
    box-shadow: var(--rivr-glass-shadow);
    transition: box-shadow var(--rivr-duration-fast) var(--rivr-ease),
        border-color var(--rivr-duration-fast) var(--rivr-ease);
}

.rivr-card:hover,
.rivr-glass-card:hover {
    box-shadow: var(--rivr-glass-shadow-hover);
}

.rivr-stat-card {
    border-radius: var(--rivr-radius-md);
    padding: var(--rivr-space-4);
    background: var(--rivr-glass-bg-strong);
    backdrop-filter: blur(var(--rivr-glass-blur));
    -webkit-backdrop-filter: blur(var(--rivr-glass-blur));
    border: 1px solid var(--rivr-border-glass);
    box-shadow: var(--rivr-glass-shadow);
}

/* ─── Buttons ─── */
.rivr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rivr-space-2);
    min-height: 44px;
    padding: 0 var(--rivr-space-5);
    font-family: var(--rivr-font);
    font-size: var(--rivr-text-small);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--rivr-radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--rivr-duration-fast) var(--rivr-ease),
        border-color var(--rivr-duration-fast) var(--rivr-ease),
        box-shadow var(--rivr-duration-fast) var(--rivr-ease),
        transform var(--rivr-duration-fast) var(--rivr-ease),
        color var(--rivr-duration-fast) var(--rivr-ease);
}

.rivr-btn-primary,
.admin-page .admin-teacher-action-btn--primary,
.admin-page .admin-report-btn--primary,
.admin-page #view-system .system-settings-save-btn,
.public-theme-gradient-btn,
.public-card-theme-gradient-btn,
.home-clubs-toolbar .home-toolbar-btn--primary {
    background: var(--rivr-navy-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
    filter: none !important;
}

.rivr-btn-primary:hover,
.admin-page .admin-teacher-action-btn--primary:hover,
.admin-page .admin-report-btn--primary:hover,
.admin-page #view-system .system-settings-save-btn:hover,
.public-theme-gradient-btn:hover,
.public-card-theme-gradient-btn:hover {
    background: var(--rivr-navy) !important;
    transform: scale(1.02);
}

.rivr-btn-primary:active,
.admin-page .admin-teacher-action-btn--primary:active,
.public-theme-gradient-btn:active {
    transform: scale(0.98);
}

.rivr-btn-secondary,
.admin-page .admin-teacher-action-btn--ghost,
.admin-page .admin-teacher-action-btn--blue,
.admin-page .admin-teacher-action-btn--sky,
.admin-page .admin-teacher-action-btn--emerald,
.admin-page .admin-teacher-action-btn--rose,
.admin-page .admin-page-btn,
.public-theme-outline-btn {
    background: var(--rivr-surface) !important;
    color: var(--rivr-navy) !important;
    border: 1px solid var(--rivr-navy-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.rivr-btn-secondary:hover,
.admin-page .admin-teacher-action-btn--ghost:hover,
.admin-page .admin-teacher-action-btn--blue:hover,
.admin-page .admin-page-btn:hover,
.public-theme-outline-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: var(--rivr-glass-shadow);
}

.rivr-btn-ghost,
.admin-page .admin-teacher-action-btn--danger {
    background: transparent !important;
    color: var(--rivr-navy) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.rivr-btn-ghost:hover,
.admin-page .admin-teacher-action-btn--danger:hover {
    background: var(--rivr-navy-ghost) !important;
}

.admin-page .admin-teacher-action-btn {
    border-radius: var(--rivr-radius-pill);
    transform: none;
    box-shadow: none;
}

.admin-page .admin-teacher-action-btn:hover {
    transform: none;
}

.admin-page .admin-teacher-action-btn--primary:hover {
    transform: scale(1.02);
}

/* ─── Icon containers ─── */
.rivr-icon-wrap,
.admin-report-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--rivr-space-2) var(--rivr-space-3);
    border-radius: 50%;
    background: rgba(30, 50, 90, 0.08);
    border: 1px solid var(--rivr-navy-border);
    color: var(--rivr-navy);
}

/* ─── Inputs ─── */
.rivr-input,
.admin-page .admin-page-input,
.admin-page .admin-report-input,
input[type="text"]:not(.swal2-input),
input[type="search"]:not(.swal2-input),
input[type="email"]:not(.swal2-input),
input[type="password"]:not(.swal2-input),
input[type="number"]:not(.swal2-input),
input[type="date"]:not(.swal2-input),
input[type="datetime-local"]:not(.swal2-input),
select:not(.swal2-select),
textarea:not(.swal2-textarea) {
    font-family: var(--rivr-font);
    font-size: var(--rivr-text-small);
    color: var(--rivr-text);
    min-height: 48px;
    padding: 0 var(--rivr-space-4);
    border-radius: var(--rivr-radius-input);
    border: 1px solid var(--rivr-border-glass);
    background: var(--rivr-glass-bg-strong);
    backdrop-filter: blur(var(--rivr-glass-blur-input));
    -webkit-backdrop-filter: blur(var(--rivr-glass-blur-input));
    outline: none;
    transition: border-color var(--rivr-duration-fast) var(--rivr-ease),
        box-shadow var(--rivr-duration-fast) var(--rivr-ease);
}

.rivr-input:focus,
.admin-page .admin-page-input:focus,
.admin-page .admin-report-input:focus,
input:focus:not(.swal2-input),
select:focus:not(.swal2-select),
textarea:focus:not(.swal2-textarea) {
    border-color: var(--rivr-navy-focus);
    box-shadow: 0 0 0 3px rgba(30, 50, 90, 0.12);
}

/* ─── Navigation ─── */
.admin-sidebar,
.admin-page .admin-sidebar {
    background: var(--rivr-glass-bg-strong) !important;
    backdrop-filter: blur(var(--rivr-glass-blur));
    -webkit-backdrop-filter: blur(var(--rivr-glass-blur));
    border-right: 1px solid var(--rivr-border-glass) !important;
    box-shadow: var(--rivr-glass-shadow);
}

.sidebar-link {
    border-radius: var(--rivr-radius-sm);
    color: var(--rivr-text) !important;
    transition: background-color var(--rivr-duration-fast) var(--rivr-ease),
        color var(--rivr-duration-fast) var(--rivr-ease);
}

.sidebar-link:hover:not(.active) {
    background: var(--rivr-navy-ghost) !important;
    color: var(--rivr-navy) !important;
}

.sidebar-link.active,
.admin-page .sidebar-link.active {
    background: rgba(30, 50, 90, 0.1) !important;
    color: var(--rivr-navy) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--rivr-navy) !important;
}

.admin-header,
.app-unified-header {
    background: var(--rivr-glass-bg-strong) !important;
    backdrop-filter: blur(var(--rivr-glass-blur));
    -webkit-backdrop-filter: blur(var(--rivr-glass-blur));
    border-bottom: 1px solid var(--rivr-border-glass) !important;
    box-shadow: var(--rivr-glass-shadow);
}

.admin-header #page-title,
.app-unified-header .header-brand-title {
    color: var(--rivr-navy) !important;
    font-weight: 500;
}

.admin-content,
.admin-page .admin-content {
    background: var(--rivr-bg) !important;
}

.admin-footer {
    background: var(--rivr-glass-bg-strong);
    border-top: 1px solid var(--rivr-border-glass);
    color: var(--rivr-text-secondary);
}

/* ─── Badges ─── */
.admin-page .admin-badge--ok,
.admin-report-badge--ok {
    color: #15803d !important;
    background: var(--rivr-success-soft) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}

.admin-page .admin-badge--warn,
.admin-report-badge--pending {
    color: #b45309 !important;
    background: var(--rivr-warning-soft) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

.admin-page .admin-badge--danger,
.admin-report-badge--inactive {
    color: #b91c1c !important;
    background: var(--rivr-error-soft) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

.admin-page .admin-badge--primary,
.admin-page .admin-badge--info {
    color: var(--rivr-navy) !important;
    background: var(--site-primary-soft) !important;
    border-color: var(--rivr-navy-border) !important;
}

/* ─── Tables ─── */
.admin-page .admin-data-table thead th {
    color: var(--rivr-text-secondary) !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

.admin-page .admin-data-table tbody td {
    color: var(--rivr-text);
}

/* ─── Modals ─── */
.admin-modal-root:not(.hidden),
.modal-overlay:not(.hidden),
#club-edit-modal:not(.hidden),
#attendance-detail-modal:not(.hidden) {
    background-color: rgba(22, 40, 74, 0.45) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.admin-modal-root .modal-panel,
.modal-overlay .modal-panel,
.modal-content {
    border-radius: var(--rivr-radius-md);
    background: var(--rivr-glass-bg-strong);
    backdrop-filter: blur(var(--rivr-glass-blur));
    -webkit-backdrop-filter: blur(var(--rivr-glass-blur));
    border: 1px solid var(--rivr-border-glass);
    box-shadow: var(--rivr-glass-shadow-hover);
}

/* ─── Public / Home overrides ─── */
.public-theme-title-gradient {
    color: var(--rivr-navy) !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
}

.public-theme-accent-bar {
    background: var(--rivr-navy) !important;
}

.home-hero--compact,
#dashboard-view .home-section-head h2 {
    color: var(--rivr-navy);
}

/* ─── Motion: component entrances ─── */
@keyframes rivr-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rivr-slide-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-page .view-section:not(.hidden),
.home-shell > section {
    animation: rivr-fade-in var(--rivr-duration-normal) var(--rivr-ease) both;
}

.admin-page .admin-page-panel,
.admin-page #admin-club-list .admin-club-card {
    animation: rivr-slide-up var(--rivr-duration-normal) var(--rivr-ease) both;
}

@media (prefers-reduced-motion: reduce) {
    .rivr-btn,
    .rivr-btn-primary,
    .admin-page .admin-teacher-action-btn--primary,
    .admin-page .view-section,
    .admin-page .admin-page-panel {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}