/* REGISTRATIE Graphite & Gold R1 - inspired by the supplied black/gold alarm clock. */
:root {
    --reg-brand-950: #0d0f14;
    --reg-brand-900: #151922;
    --reg-brand-850: #1c212b;
    --reg-brand-800: #242a35;
    --reg-brand-700: #8e620f;
    --reg-brand-600: #ad7915;
    --reg-brand-500: #c9951f;
    --reg-brand-400: #ddb442;
    --reg-brand-300: #e9ca72;
    --reg-brand-200: #f4e2ae;
    --reg-brand-100: #fbf2d8;
    --reg-brand-50: #fffaf0;
    --reg-ink-950: #15171c;
    --reg-ink-900: #20232a;
    --reg-ink-700: #484d57;
    --reg-ink-600: #5e6470;
    --reg-ink-500: #767d89;
    --reg-ink-300: #ccd0d7;
    --reg-ink-200: #e0e2e6;
    --reg-ink-100: #efeff0;
    --reg-bg: #f5f3ed;
    --reg-card: #fffdf8;
    --reg-shadow-sm: 0 10px 30px rgba(18,20,27,.08);
    --reg-shadow-md: 0 18px 55px rgba(18,20,27,.13);
    --reg-shadow-lg: 0 35px 90px rgba(18,20,27,.18);
    --reg-sidebar-width: 300px;
    --reg-topbar-height: 84px;
}

html { font-size: 18px; }
body { font-size: 1rem; line-height: 1.55; background: var(--reg-bg); }

.reg-sidebar {
    background:
        radial-gradient(circle at 8% -5%, rgba(221,180,66,.18), transparent 26%),
        linear-gradient(160deg, #202530 0%, #151922 58%, #090b0f 100%);
    box-shadow: 14px 0 40px rgba(9,11,15,.18);
}
.reg-sidebar::after { border-color: rgba(221,180,66,.13); box-shadow: 0 0 0 42px rgba(221,180,66,.035),0 0 0 86px rgba(221,180,66,.02); }
.reg-brand-mark { color:#171a21; background:linear-gradient(145deg,#f8e6a3 0%,#bd8218 55%,#7d5008 100%); box-shadow:0 9px 24px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,239,183,.8); }
.reg-nav-item.is-active { background:linear-gradient(90deg,rgba(216,168,45,.24),rgba(216,168,45,.08)); color:#fff7dc; box-shadow:inset 3px 0 0 #e2b84a; }
.reg-nav-item:hover { background:rgba(221,180,66,.10); color:#fff; }
.reg-nav-scope { border-color:rgba(235,199,106,.36); color:#f3d57f; }
.reg-sidebar-status { background:rgba(201,149,31,.12); border-color:rgba(221,180,66,.22); }
.reg-status-dot,.reg-live-dot { background:#d9ad3d !important; box-shadow:0 0 0 4px rgba(217,173,61,.15); }

.reg-dashboard-hero,.reg-mod-hero,.reg-emp-hero,.reg-auth-showcase {
    background:
        radial-gradient(circle at 90% 15%, rgba(229,190,83,.16), transparent 30%),
        linear-gradient(135deg,#181c24 0%,#262c37 68%,#8e620f 145%) !important;
    color:#fff;
}
.reg-hero-monogram { color:#c9951f; background:#151922; border:1px solid rgba(233,202,114,.55); }
.reg-auth-glow { border-color:rgba(229,190,83,.18) !important; }

.btn.reg-btn-primary,.reg-btn-primary {
    color:#14171d !important;
    background:linear-gradient(135deg,#e2ba4e 0%,#c7921d 56%,#9b6a0f 100%) !important;
    border-color:#b27b13 !important;
    font-weight:800;
    min-height:48px;
}
.btn.reg-btn-primary:hover,.reg-btn-primary:hover { filter:brightness(1.06); box-shadow:0 12px 28px rgba(157,109,18,.24); }

a { color:#8e620f; }
a:hover { color:#5f410b; }
::selection { background:#f1d78f; color:#171a21; }

.reg-metric-card,.reg-panel,.reg-mod-stat,.reg-mod-link-card,.reg-emp-summary-card,.reg-emp-table-card { background:var(--reg-card) !important; border-color:#e7dfcc !important; }
.reg-metric-icon,.reg-quick-icon,.reg-mod-link-no { color:#8e620f !important; background:#fff5d8 !important; border-color:#ecdcae !important; }
.reg-metric-arrow,.reg-quick-chevron { color:#b57f16 !important; }
.reg-eyebrow,.reg-mod-kicker { color:#9d6a0d !important; }
.reg-eyebrow-light { color:#efd681 !important; }

/* Accessibility: no important interface text below a readable size. */
.reg-brand-copy strong { font-size:17px !important; }
.reg-brand-copy small { font-size:13px !important; }
.reg-nav-group-title { font-size:13px !important; letter-spacing:.11em; }
.reg-nav-item { min-height:50px; font-size:16px !important; }
.reg-nav-scope { font-size:12.5px !important; }
.reg-sidebar-status-copy strong { font-size:15px !important; }
.reg-sidebar-status-copy small { font-size:13px !important; }
.reg-page-identity span,.reg-context-caption,.reg-eyebrow,.reg-mod-kicker { font-size:13px !important; }
.reg-page-identity strong { font-size:18px !important; }
.reg-user-copy strong { font-size:15px !important; }
.reg-user-copy small { font-size:13px !important; }
.reg-dashboard-hero h1,.reg-auth-showcase h1 { font-size:clamp(2.15rem,3vw,3.3rem) !important; }
.reg-dashboard-hero p,.reg-auth-showcase p,.reg-auth-heading p,.reg-mod-hero p { font-size:16px !important; }
.reg-hero-meta>span,.reg-panel-badge,.reg-status-pill,.reg-mod-badge { font-size:13px !important; }
.reg-metric-label { font-size:14px !important; }
.reg-metric-content strong { font-size:2rem !important; }
.reg-metric-content small,.reg-quick-action small,.reg-system-list,.reg-system-foot { font-size:14px !important; }
.reg-panel h2,.reg-auth-heading h2 { font-size:1.55rem !important; }
.form-label { font-size:15px !important; font-weight:700; }
.form-control,.form-select { min-height:50px; font-size:16.5px !important; }
.form-check-label,.reg-security-note,.reg-field-help { font-size:14px !important; }
.btn { font-size:16px !important; }
.table { font-size:15px !important; }
.table th { font-size:13px !important; }
.reg-auth-feature strong { font-size:15px !important; }
.reg-auth-feature small { font-size:13px !important; }
.reg-auth-form-foot { font-size:13px !important; }
.reg-auth-card { max-width:1040px; }
.reg-tenant-field .form-select { border-color:#d9c58d; background-color:#fffdf7; }
.reg-field-help { display:block; margin-top:7px; color:var(--reg-ink-600); }

@media (max-width: 991.98px) {
    html { font-size:17px; }
    :root { --reg-sidebar-width: 300px; }
}

/* ============================================================
   REGISTRATIE Accessibility Typography R2
   Larger type scale for comfortable desktop reading.
   Keeps the Graphite & Gold visual language unchanged.
   ============================================================ */
:root {
    --reg-sidebar-width: 324px;
    --reg-topbar-height: 92px;
}

html { font-size: 20px !important; }
body { font-size: 1rem !important; line-height: 1.62 !important; }

/* Brand / sidebar */
.reg-brand-copy strong { font-size: 19px !important; }
.reg-brand-copy small { font-size: 15px !important; }
.reg-nav-group-title { font-size: 15px !important; letter-spacing: .09em !important; }
.reg-nav-item { min-height: 54px !important; font-size: 18px !important; }
.reg-nav-scope { font-size: 14px !important; min-width: 39px; }
.reg-sidebar-status-copy strong { font-size: 17px !important; }
.reg-sidebar-status-copy small { font-size: 15px !important; }

/* Top bar */
.reg-page-identity span,
.reg-context-caption,
.reg-eyebrow,
.reg-mod-kicker { font-size: 15px !important; }
.reg-page-identity strong { font-size: 20px !important; }
.reg-user-copy strong { font-size: 17px !important; }
.reg-user-copy small { font-size: 15px !important; }

/* Dashboard / hero */
.reg-dashboard-hero h1,
.reg-auth-showcase h1 { font-size: clamp(2.35rem, 3.2vw, 3.55rem) !important; }
.reg-dashboard-hero p,
.reg-auth-showcase p,
.reg-auth-heading p,
.reg-mod-hero p { font-size: 18px !important; line-height: 1.65 !important; }
.reg-hero-meta > span,
.reg-panel-badge,
.reg-status-pill,
.reg-mod-badge { font-size: 15px !important; }

/* Metric cards */
.reg-metric-label { font-size: 16px !important; }
.reg-metric-content strong { font-size: 2.25rem !important; }
.reg-metric-content small,
.reg-quick-action small,
.reg-system-list,
.reg-system-foot { font-size: 16px !important; }
.reg-panel h2,
.reg-auth-heading h2 { font-size: 1.72rem !important; }

/* Forms / controls */
.form-label { font-size: 17px !important; font-weight: 700 !important; }
.form-control,
.form-select { min-height: 54px !important; font-size: 18px !important; }
.form-check-label,
.reg-security-note,
.reg-field-help { font-size: 16px !important; }
.btn { font-size: 17px !important; min-height: 46px; }

/* Tables / dense data */
.table { font-size: 17px !important; }
.table th { font-size: 15px !important; letter-spacing: .035em; }
.table td { line-height: 1.55; }

/* Auth feature text */
.reg-auth-feature strong { font-size: 17px !important; }
.reg-auth-feature small { font-size: 15px !important; }
.reg-auth-form-foot { font-size: 15px !important; }

/* Common small helper text: never microscopic on desktop */
small,
.small,
.text-muted { line-height: 1.5; }

@media (max-width: 1399.98px) {
    :root { --reg-sidebar-width: 310px; }
    html { font-size: 19px !important; }
    .reg-nav-item { font-size: 17px !important; }
}

@media (max-width: 991.98px) {
    :root { --reg-sidebar-width: 310px; --reg-topbar-height: 82px; }
    html { font-size: 18px !important; }
    .reg-nav-item { font-size: 17px !important; }
    .reg-dashboard-hero p,
    .reg-auth-showcase p,
    .reg-auth-heading p,
    .reg-mod-hero p { font-size: 17px !important; }
}

/* ============================================================
   REGISTRATIE Accessibility Typography R3
   Focused correction for Dashboard quick-access and system-card
   micro typography. These elements had their own explicit 9-11px
   rules in registratie-theme.css and therefore did not inherit R2.
   ============================================================ */

/* Dashboard section headings */
.reg-panel-head .reg-eyebrow {
    font-size: 16px !important;
    font-weight: 850 !important;
    letter-spacing: .11em !important;
}

.reg-panel-head h2 {
    font-size: 2rem !important;
    line-height: 1.18 !important;
    font-weight: 850 !important;
}

/* Quick access cards: make the actual action labels readable */
.reg-quick-action {
    min-height: 82px !important;
    padding: 16px 17px !important;
    gap: 15px !important;
}

.reg-quick-icon {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.reg-quick-action strong {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
}

.reg-quick-action small {
    margin-top: 4px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}

.reg-quick-chevron {
    font-size: 28px !important;
    font-weight: 800 !important;
}

/* Platform status: child rows had a hard-coded 10px size */
.reg-status-pill {
    padding: 8px 12px !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.reg-status-pill span {
    width: 8px !important;
    height: 8px !important;
}

.reg-system-list > div {
    padding: 15px 0 !important;
    gap: 18px !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
}

.reg-system-list span {
    font-size: 17px !important;
    font-weight: 600 !important;
}

.reg-system-list strong {
    font-size: 17px !important;
    font-weight: 800 !important;
}

.reg-system-foot {
    padding: 16px 22px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

/* Keep these sizes useful on common 1366-1600px desktop screens. */
@media (max-width: 1399.98px) {
    .reg-panel-head h2 { font-size: 1.8rem !important; }
    .reg-quick-action strong { font-size: 17px !important; }
    .reg-system-list > div,
    .reg-system-list span,
    .reg-system-list strong { font-size: 16px !important; }
}

@media (max-width: 991.98px) {
    .reg-quick-action { min-height: 76px !important; }
    .reg-quick-action strong { font-size: 17px !important; }
    .reg-system-list > div,
    .reg-system-list span,
    .reg-system-list strong { font-size: 16px !important; }
}

/* ============================================================
   REGISTRATIE Sidebar Typography Balance R4
   Make the navigation label the primary visual element and keep
   the scope badge secondary. This intentionally overrides the
   smaller .reg-nav-label rule in registratie-theme.css.
   ============================================================ */

.reg-sidebar .reg-nav-item {
    min-height: 58px !important;
    gap: 13px !important;
    padding: 10px 12px !important;
}

.reg-sidebar .reg-nav-label {
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

.reg-sidebar .reg-nav-icon {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
}

.reg-sidebar .reg-nav-icon svg {
    width: 21px !important;
    height: 21px !important;
}

.reg-sidebar .reg-nav-scope {
    min-width: 38px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
    text-align: center !important;
}

.reg-sidebar .reg-nav-group-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: .10em !important;
    padding-bottom: 9px !important;
}

/* Slightly tighter scaling on medium desktop screens while preserving hierarchy. */
@media (max-width: 1399.98px) {
    .reg-sidebar .reg-nav-item {
        min-height: 55px !important;
    }

    .reg-sidebar .reg-nav-label {
        font-size: 17px !important;
    }

    .reg-sidebar .reg-nav-scope {
        font-size: 10.5px !important;
        min-width: 36px !important;
        padding: 4px 7px !important;
    }

    .reg-sidebar .reg-nav-group-title {
        font-size: 13px !important;
    }
}

@media (max-width: 991.98px) {
    .reg-sidebar .reg-nav-label {
        font-size: 17px !important;
    }

    .reg-sidebar .reg-nav-scope {
        font-size: 10.5px !important;
    }
}
