:root {
    --app-font: 'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


html, body {
    font-family: var(--app-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* Keep the sticky header (and its account dropdown) above page content.
   BlazorBootstrap ships .bb-top-row-sticky at z-index:1, which ties with
   positioned/stacking content like the dashboard's Refresh button (z-index:1
   + backdrop-filter) — and since content comes after the header in the DOM,
   the dropdown would otherwise be painted behind it. Sits below Bootstrap/
   Radzen modals (>=1050). */
.bb-top-row-sticky {
    z-index: 1030;
}

/* ===== Dashboard ===== */
.dashboard {
    --dash-radius: 0.9rem;
}

/* Hero header banner */
.dashboard-hero {
    background: linear-gradient(120deg, #4f46e5 0%, #6d28d9 45%, #2563eb 100%);
    border-radius: var(--dash-radius);
    color: #fff;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.25);
    position: relative;
    overflow: hidden;
}
.dashboard-hero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none; /* decorative glow must not swallow clicks on the Refresh button */
    z-index: 0;
}
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero h2 { font-weight: 700; letter-spacing: -0.5px; }
.dashboard-hero .hero-date { color: rgba(255,255,255,0.82); font-size: 0.9rem; }
.dashboard-hero .btn-hero {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.dashboard-hero .btn-hero:hover:not(:disabled) {
    background: rgba(255,255,255,0.32);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.22);
    color: #fff;
}
.dashboard-hero .btn-hero:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.dashboard-hero .btn-hero:disabled { opacity: 0.75; cursor: progress; }

/* Spin animation for the refresh icon while loading */
@keyframes dash-spin { to { transform: rotate(360deg); } }
.dashboard-hero .btn-hero .spin { display: inline-block; animation: dash-spin 0.8s linear infinite; }

/* KPI cards */
.kpi-card {
    border-radius: var(--dash-radius);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(16, 24, 40, 0.12) !important;
}
.kpi-accent { height: 4px; width: 100%; }
.kpi-accent-danger  { background: linear-gradient(90deg, #ef4444, #f97316); }
.kpi-accent-warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.kpi-accent-info    { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.kpi-accent-success { background: linear-gradient(90deg, #10b981, #34d399); }
.kpi-accent-primary { background: linear-gradient(90deg, #4f46e5, #6366f1); }

.kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.kpi-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.6px;
}
.kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: #101828;
}
.kpi-subtitle { font-size: 0.82rem; }
.kpi-link {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.kpi-link:hover { text-decoration: underline; }
.min-w-0 { min-width: 0; }

/* Panels (charts / lists) */
.dash-panel {
    border: 0;
    border-radius: var(--dash-radius);
    transition: box-shadow 0.18s ease;
}
.dash-panel:hover { box-shadow: 0 0.75rem 1.5rem rgba(16, 24, 40, 0.10) !important; }
.dash-panel .card-header {
    background: transparent;
    border-bottom: 1px solid #eef0f4;
    font-weight: 600;
    color: #101828;
    padding: 1rem 1.25rem;
}
.dash-panel .panel-icon {
    width: 34px;
    height: 34px;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-right: 0.6rem;
}

/* Ranked list rows */
.rank-row { padding: 0.35rem 0; }
.rank-row + .rank-row { border-top: 1px dashed #eef0f4; }
.rank-name { font-weight: 600; color: #1d2939; }
.rank-progress { height: 8px; border-radius: 6px; background: #f2f4f7; }
.rank-progress .progress-bar { border-radius: 6px; }

/* Soft alert pills */
.alert-soft {
    border: 0;
    border-radius: var(--dash-radius);
    display: flex;
    align-items: center;
    padding: 0.9rem 1.1rem;
}
.alert-soft.alert-soft-danger  { background: #fef3f2; color: #b42318; }
.alert-soft.alert-soft-warning { background: #fffaeb; color: #b54708; }
.alert-soft .alert-soft-icon { font-size: 1.3rem; margin-right: 0.7rem; }

/* Financial Position doughnut */
.fin-chart-wrap {
    position: relative;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fin-stats { border-top: 1px solid #eef0f4; padding-top: 0.75rem; }
.fin-row {
    display: flex;
    align-items: center;
    padding: 0.4rem 0;
}
.fin-row + .fin-row { border-top: 1px dashed #eef0f4; }
.fin-row .fin-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.6rem;
    flex-shrink: 0;
}
.fin-row .fin-name { font-weight: 600; color: #1d2939; }
.fin-row .fin-val { margin-left: auto; font-weight: 700; }
.fin-row.fin-net { margin-top: 0.25rem; border-top: 1px solid #e4e7ec; padding-top: 0.6rem; }

/* Action button hover affordance in grids */
.e-grid .e-rowcell button.btn:hover {
    background-color: rgba(0,0,0,0.04);
}

/* Subtle table-light footer */
.table-secondary > * {
    --bs-table-bg: #f2f4f7;
}