/* ── Regulens Custom Styles ───────────────────────────────────────────────── */
/* Dark navy theme — professional, fintech-grade, not generic SaaS             */

/* ── DM Sans typography (replaces MudBlazor theme Typography API removed in v9) */
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.mud-typography-body1, .mud-typography-body2 {
    font-family: 'DM Sans', sans-serif;
}
.mud-typography-h4 { font-weight: 700; }
.mud-typography-h5, .mud-typography-h6 { font-weight: 600; }

:root {
    --rg-navy:       #0F1629;
    --rg-surface:    #1A2340;
    --rg-surface-2:  #1F2A4A;
    --rg-border:     rgba(255,255,255,0.07);
    --rg-primary:    #4F8EF7;
    --rg-purple:     #A78BFA;
    --rg-critical:   #EF4444;
    --rg-high:       #F59E0B;
    --rg-medium:     #3B82F6;
    --rg-low:        #6B7280;
    --rg-success:    #10B981;
    --rg-text:       #E8EDF5;
    --rg-muted:      #8B9DBF;
}

/* ── Global ──────────────────────────────────────────────────────────────── */

body {
    background-color: var(--rg-navy);
    color: var(--rg-text);
    font-family: 'DM Sans', sans-serif;
}

/* ── App bar & drawer ────────────────────────────────────────────────────── */

.rg-appbar {
    border-bottom: 1px solid var(--rg-border) !important;
}

.rg-brand {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
}

.rg-drawer {
    border-right: 1px solid var(--rg-border) !important;
}

.rg-main {
    background: var(--rg-navy) !important;
    min-height: 100vh;
}

/* ── Surfaces ────────────────────────────────────────────────────────────── */

.rg-surface {
    background: var(--rg-surface) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: 8px !important;
}

/* ── Stat cards ──────────────────────────────────────────────────────────── */

.rg-stat-card {
    background: var(--rg-surface) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: 8px !important;
    border-left: 3px solid var(--rg-muted) !important;
}

.rg-stat-card.rg-stat-red   { border-left-color: var(--rg-critical) !important; }
.rg-stat-card.rg-stat-amber { border-left-color: var(--rg-high) !important; }
.rg-stat-card.rg-stat-green { border-left-color: var(--rg-success) !important; }

.rg-stat-number {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-bottom: 4px;
}

/* ── System cards ────────────────────────────────────────────────────────── */

.rg-system-card {
    background: var(--rg-surface) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s, transform 0.15s;
}

.rg-system-card:hover {
    border-color: var(--rg-primary) !important;
    transform: translateY(-2px);
}

/* ── Template picker cards ───────────────────────────────────────────────── */

.rg-template-card {
    background: var(--rg-surface-2) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s;
    cursor: pointer;
}

.rg-template-card:hover {
    border-color: var(--rg-primary) !important;
}

.rg-template-card--selected {
    border-color: var(--rg-primary) !important;
    background: rgba(79, 142, 247, 0.08) !important;
}

/* ── Gap panels ──────────────────────────────────────────────────────────── */

.rg-gap-panel {
    background: var(--rg-surface) !important;
}

.rg-gap-panel:hover {
    background: var(--rg-surface-2) !important;
}

/* ── Overlap cards ───────────────────────────────────────────────────────── */

.rg-overlap-card {
    background: var(--rg-surface-2) !important;
    border: 1px solid var(--rg-border) !important;
    border-radius: 6px !important;
    border-left: 3px solid var(--rg-purple) !important;
}

/* ── Severity colours ────────────────────────────────────────────────────── */

.rg-critical { color: var(--rg-critical) !important; }
.rg-high     { color: var(--rg-high)     !important; }
.rg-medium   { color: var(--rg-medium)   !important; }
.rg-muted    { color: var(--rg-muted)    !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.rg-table .mud-table-head {
    background: var(--rg-surface-2) !important;
}

/* Suppress built-in stepper navigation — sticky bar above provides Previous/Next */
.rg-stepper .mud-stepper-nav,
.rg-stepper .mud-stepper-footer,
.rg-stepper > .mud-stack:last-child > .mud-button-root {
    display: none !important;
}

/* Sticky step navigation bar */
.rg-step-nav {
    background: var(--rg-surface-2) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
}

/* ── Cursor ──────────────────────────────────────────────────────────────── */

.cursor-pointer { cursor: pointer; }

/* ── Splash screen ───────────────────────────────────────────────────────── */

.rg-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--rg-navy);
}

.rg-splash-inner {
    text-align: center;
}

.rg-splash-logo {
    width: 56px;
    height: 56px;
    background: var(--rg-primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: white;
    margin: 0 auto 12px;
    font-family: 'DM Sans', sans-serif;
}

.rg-splash-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--rg-text);
    margin-bottom: 4px;
}

.rg-splash-sub {
    color: var(--rg-muted);
    font-size: 14px;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--rg-navy); }
::-webkit-scrollbar-thumb { background: var(--rg-surface-2); border-radius: 3px; }

/* ── Blazor error UI ─────────────────────────────────────────────────────── */

#blazor-error-ui {
    background: #2d1b1b;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--rg-critical);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}