:root {
    --navy-950: #08162d;
    --navy-900: #102a56;
    --navy-800: #173b76;
    --primary: #1e4fa3;
    --primary-600: #2563c9;
    --primary-100: #dbeafe;
    --surface: #f4f7fb;
    --card: #ffffff;
    --border: #dfe6ef;
    --border-soft: #edf1f6;
    --text: #172033;
    --muted: #667085;
    --success: #138a5b;
    --warning: #d97706;
    --danger: #d92d20;
    --sidebar-width: 292px;
    --sidebar-collapsed: 84px;
    --topbar-height: 76px;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 22px;
    --shadow-sm: 0 2px 8px rgba(16, 42, 86, .06);
    --shadow: 0 12px 32px rgba(16, 42, 86, .10);
    --shadow-lg: 0 24px 60px rgba(8, 22, 45, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--surface); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .925rem; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; }
.skip-link { position: fixed; z-index: 3000; top: -60px; left: 1rem; padding: .7rem 1rem; border-radius: 0 0 10px 10px; color: #fff; background: var(--navy-950); transition: top .2s; }
.skip-link:focus { top: 0; }

/* Authentication */
.auth-body { min-height: 100vh; background: radial-gradient(circle at 12% 12%, #dbeafe 0, transparent 32%), radial-gradient(circle at 88% 84%, #e0e7ff 0, transparent 30%), linear-gradient(145deg, #f8fbff, #eef3f9); }
.auth-shell { max-width: 440px; }
.auth-shell .card { border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.brand-mark { width: 54px; height: 54px; margin: auto; display: grid; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #2d6ddb, var(--navy-900)); font-size: 1.35rem; font-weight: 800; box-shadow: 0 12px 28px rgba(37, 99, 201, .3); }
.brand-mark.small-mark { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; border-radius: 13px; font-size: 1rem; }

/* Application shell */
.app-shell { min-height: 100vh; background: var(--surface); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1045; width: var(--sidebar-width); display: flex; flex-direction: column; overflow: hidden; color: #fff; background: linear-gradient(180deg, var(--navy-950), #0d2245 55%, #112d5a); transition: width .24s ease, transform .24s ease; box-shadow: 10px 0 35px rgba(8,22,45,.09); }
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 4%, rgba(74,139,255,.20), transparent 25%), linear-gradient(120deg, transparent 55%, rgba(255,255,255,.025)); }
.sidebar-head { position: relative; min-height: var(--topbar-height); display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem .7rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand { min-width: 0; display: flex; align-items: center; gap: .8rem; color: #fff; text-decoration: none; }
.sidebar-brand:hover { color: #fff; }
.brand-copy { min-width: 0; display: block; white-space: nowrap; }
.brand-copy strong { display: block; font-size: 1.05rem; letter-spacing: .05em; }
.brand-copy small { display: block; margin-top: .1rem; color: #aebeda; font-size: .67rem; }
.sidebar-close { margin-left: auto; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; color: #dbe7fb; background: rgba(255,255,255,.08); }
.nav-search-trigger { position: relative; margin: .9rem .85rem .55rem; min-height: 42px; display: flex; align-items: center; gap: .65rem; padding: .55rem .65rem; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; color: #b9c8df; background: rgba(255,255,255,.06); text-align: left; white-space: nowrap; }
.nav-search-trigger:hover { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.1); }
.nav-search-trigger span { overflow: hidden; flex: 1; font-size: .76rem; }
kbd { display: inline-flex; align-items: center; min-height: 21px; padding: 0 .4rem; border: 1px solid #d5dce7; border-bottom-width: 2px; border-radius: 5px; color: #667085; background: #fff; font: 600 .65rem/1 Inter, sans-serif; box-shadow: none; }
.nav-search-trigger kbd { color: #b9c8df; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.08); }
.sidebar-nav { position: relative; flex: 1; padding: .25rem .7rem 1rem; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.nav-group { margin-bottom: .25rem; }
.nav-group > summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: .5rem .65rem; border-radius: 11px; color: #98accb; cursor: pointer; list-style: none; user-select: none; transition: color .18s, background .18s; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { color: #fff; background: rgba(255,255,255,.045); }
.nav-group-label { min-width: 0; display: flex; align-items: center; gap: .7rem; font-size: .71rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
.nav-group-label > i { width: 20px; color: #7fa8ee; font-size: .95rem; text-align: center; }
.nav-chevron { font-size: .7rem; transition: transform .2s; }
.nav-group[open] .nav-chevron { transform: rotate(180deg); }
.nav-group-items { display: grid; gap: .18rem; padding: .15rem 0 .4rem; }
.sidebar .nav-link { position: relative; min-height: 42px; display: flex; align-items: center; gap: .72rem; margin-left: .2rem; padding: .55rem .75rem .55rem .78rem; border-radius: 11px; color: var(--sidebar-text); text-decoration: none; font-size: .815rem; font-weight: 500; white-space: nowrap; transition: background .16s, color .16s, transform .16s; }
.sidebar .nav-link > i:first-child { flex: 0 0 20px; width: 20px; color: #90a7c9; font-size: 1rem; text-align: center; }
.sidebar .nav-link:hover { color: #fff; background: var(--sidebar-hover); transform: translateX(2px); }
.sidebar .nav-link:hover > i:first-child { color: #fff; }
.sidebar .nav-link.active { color: #fff; background: var(--sidebar-active); box-shadow: 0 8px 20px rgba(0,0,0,.14); }
.sidebar .nav-link.active > i:first-child { color: #fff; }
.active-dot { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.12); }
.sidebar-support { position: relative; margin: .2rem .8rem .9rem; display: flex; align-items: center; gap: .65rem; padding: .75rem; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.055); }
.sidebar-support-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #dbeafe; background: rgba(96,165,250,.17); }
.sidebar-support-copy { min-width: 0; flex: 1; white-space: nowrap; }
.sidebar-support-copy strong, .sidebar-support-copy small { display: block; }
.sidebar-support-copy strong { font-size: .75rem; }
.sidebar-support-copy small { overflow: hidden; color: #9db0cd; font-size: .64rem; text-overflow: ellipsis; }
.sidebar-support a { color: #dbeafe; }
.main-area { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; margin-left: var(--sidebar-width); transition: margin-left .24s ease; }
.sidebar-scrim { display: none; }

/* Top bar and page context */
.topbar { position: sticky; top: 0; z-index: 1030; min-height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1.6rem; border-bottom: 1px solid rgba(215,224,236,.9); background: rgba(255,255,255,.92); backdrop-filter: blur(15px); }
.topbar-start, .topbar-actions { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.icon-button { flex: 0 0 auto; width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 11px; color: #344054; background: #fff; transition: border-color .16s, color .16s, background .16s; }
.icon-button:hover { color: var(--primary); border-color: #b8cff3; background: #f4f8ff; }
.topbar-context { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.topbar-context strong { overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.topbar-eyebrow { color: var(--muted); font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.topbar-action { min-height: 40px; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .72rem; border: 1px solid var(--border); border-radius: 11px; color: #475467; background: #fff; font-weight: 600; font-size: .78rem; }
.topbar-action:hover { color: var(--primary); border-color: #b8cff3; background: #f7faff; }
.topbar-action kbd { margin-left: .2rem; }
.user-menu-button { min-height: 46px; display: flex; align-items: center; gap: .65rem; padding: .25rem .45rem .25rem .3rem; border: 0; border-radius: 13px; color: var(--text); background: transparent; }
.user-menu-button:hover { background: #f4f6f9; }
.user-avatar { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #c8d9f5; border-radius: 12px; color: var(--navy-900); background: #eaf2ff; font-weight: 800; font-size: .75rem; }
.user-copy { max-width: 180px; min-width: 0; flex-direction: column; text-align: left; line-height: 1.25; }
.user-copy strong, .user-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { font-size: .76rem; }
.user-copy small { color: var(--muted); font-size: .65rem; }
.dropdown-menu { border-radius: 13px; padding: .45rem; }
.dropdown-item { padding: .58rem .7rem; border-radius: 8px; font-size: .82rem; }
.content-area { width: 100%; max-width: 1720px; flex: 1; padding: 1.5rem 1.65rem 2rem; margin: 0 auto; }
.page-context-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.35rem; padding: 1.15rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.75); box-shadow: var(--shadow-sm); }
.page-context-icon { flex: 0 0 50px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg, var(--primary-600), var(--navy-900)); font-size: 1.25rem; box-shadow: 0 8px 20px rgba(30,79,163,.20); }
.page-context-copy { min-width: 0; flex: 1; }
.page-context-copy h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; }
.page-context-copy p { margin: .22rem 0 0; color: var(--muted); font-size: .78rem; }
.breadcrumb { font-size: .68rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.btn-guide { flex: 0 0 auto; border: 1px solid #c7d9f6; color: var(--primary); background: #eef5ff; font-weight: 700; }
.btn-guide:hover { color: #fff; border-color: var(--primary); background: var(--primary); }
.app-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.65rem; border-top: 1px solid var(--border); color: var(--muted); background: #fff; font-size: .7rem; }

/* Shared components */
.card, .dashboard-card { border: 1px solid var(--border-soft) !important; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm) !important; }
.card-header { min-height: 52px; display: flex; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--border-soft); border-radius: var(--radius) var(--radius) 0 0 !important; color: #27364f; background: #fff !important; font-weight: 700; }
.card-body { padding: 1rem; }
.content-area .card + .card { margin-top: .35rem; }
.btn { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: .8rem; font-weight: 700; }
.btn-sm { min-height: 32px; border-radius: 8px; font-size: .72rem; }
.btn-primary { border-color: var(--primary); background: var(--primary); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--navy-800); background: var(--navy-800); }
.form-label { margin-bottom: .35rem; color: #344054; font-size: .75rem; font-weight: 700; }
.form-label.required::after { content: " *"; color: var(--danger); }
.form-control, .form-select { min-height: 42px; border-color: #d4dce7; border-radius: 10px; color: var(--text); font-size: .82rem; background-color: #fff; box-shadow: none; }
.form-control-sm, .form-select-sm { min-height: 34px; border-radius: 8px; font-size: .75rem; }
textarea.form-control { min-height: 88px; }
.form-control:focus, .form-select:focus { border-color: #77a2e7; box-shadow: 0 0 0 3px rgba(37,99,201,.12); }
.form-control::placeholder { color: #98a2b3; }
.input-group-text { border-color: #d4dce7; color: #667085; background: #f8fafc; font-size: .75rem; font-weight: 600; }
.nav-tabs { gap: .3rem; overflow-x: auto; flex-wrap: nowrap; padding: .35rem; border: 1px solid var(--border); border-radius: 13px; background: #fff; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { min-height: 38px; padding: .45rem .8rem; border: 0 !important; border-radius: 9px; color: var(--muted); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.nav-tabs .nav-link:hover { color: var(--primary); background: #f1f5fb; }
.nav-tabs .nav-link.active { color: #fff; background: var(--primary); box-shadow: 0 5px 12px rgba(30,79,163,.18); }
.table-responsive { border-radius: 0 0 var(--radius) var(--radius); scrollbar-width: thin; }
.table { --bs-table-bg: transparent; color: var(--text); font-size: .78rem; }
.table > :not(caption) > * > * { padding: .72rem .8rem; border-color: var(--border-soft); vertical-align: middle; }
.table thead th { color: #667085; background: #f8fafc; font-size: .665rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr { transition: background .15s; }
.table-hover tbody tr:hover > * { --bs-table-bg-state: #f8fbff; }
.table td .btn + .btn { margin-left: .25rem; }
.table-filter-bar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; border-bottom: 1px solid var(--border-soft); background: #fff; }
.table-filter-bar label { width: min(300px, 100%); display: flex; align-items: center; gap: .45rem; margin: 0; padding: .42rem .6rem; border: 1px solid var(--border); border-radius: 9px; color: #98a2b3; background: #f9fbfd; }
.table-filter-bar input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .7rem; }
.table-filter-bar > span { color: var(--muted); font-size: .62rem; white-space: nowrap; }
.table-filter-bar > span strong { color: #344054; }
.table-primary-text, .table-subtext { display: block; white-space: nowrap; }
.table-primary-text { color: #344054; font-weight: 600; }
.table-subtext { color: var(--muted); font-size: .66rem; }
.table-empty { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; color: var(--muted); }
.table-empty i { color: #b5c2d4; font-size: 1.6rem; }
.table-empty strong { color: #475467; }
.badge { padding: .38rem .55rem; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .025em; }
.soft-badge { display: inline-flex; align-items: center; padding: .3rem .55rem; border-radius: 999px; font-size: .65rem; font-weight: 700; white-space: nowrap; }
.soft-badge.neutral { color: #475467; background: #f0f2f5; }
.status-draft, .status-inactive { color: #475467 !important; background: #eef1f5 !important; }
.status-submitted, .status-pending, .status-under-review, .status-kyc-review, .status-preview { color: #934b00 !important; background: #fff0d5 !important; }
.status-approved, .status-recommended, .status-active, .status-current, .status-open { color: #08714b !important; background: #dff7ed !important; }
.status-posted, .status-completed, .status-finalized, .status-paid, .status-closed { color: #075b40 !important; background: #d4f3e6 !important; }
.status-reversed, .status-rejected, .status-failed, .status-cancelled, .status-delinquent, .status-past-due { color: #b42318 !important; background: #fee4e2 !important; }
.sticky-card { position: sticky; top: calc(var(--topbar-height) + 1rem); }
.max-card { max-width: 980px; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; }
.permission-grid .form-check { padding: .7rem .7rem .7rem 2.35rem; border: 1px solid var(--border); border-radius: 11px; background: #fff; }
.permission-grid small { display: block; color: var(--muted); }
.recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.recovery-grid code { padding: .7rem; border: 1px dashed #94a3b8; border-radius: 9px; text-align: center; }
pre { white-space: pre-wrap; }
details > summary.btn { list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }

/* Dashboard */
.dashboard-hero { position: relative; overflow: hidden; min-height: 210px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; padding: 2rem 2.1rem; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(115deg, #0b2146 0%, #174789 55%, #2465c6 100%); box-shadow: 0 18px 45px rgba(16,42,86,.20); }
.dashboard-hero::before, .dashboard-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); }
.dashboard-hero::before { width: 320px; height: 320px; right: -90px; top: -175px; }
.dashboard-hero::after { width: 180px; height: 180px; right: 20%; bottom: -140px; }
.dashboard-hero > * { position: relative; z-index: 1; }
.hero-kicker { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .85rem; color: #cfe2ff; font-size: .7rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.dashboard-hero h1 { max-width: 760px; margin: 0; font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.16; }
.dashboard-hero p { margin: .75rem 0 0; color: #c7d9f4; font-size: .82rem; }
.hero-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.hero-actions .btn { min-height: 44px; padding-inline: 1rem; border: 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; }
.section-heading > div > span, .dashboard-card-head > div > span { display: block; margin-bottom: .18rem; color: var(--primary-600); font-size: .65rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.section-heading h2, .dashboard-card-head h2 { margin: 0; color: #1d2939; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.section-heading > small { color: var(--muted); font-size: .68rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.metric-card { position: relative; min-height: 142px; display: flex; align-items: flex-start; gap: .8rem; overflow: hidden; padding: 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius); color: var(--text); background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.metric-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -45px; bottom: -50px; border-radius: 50%; background: var(--metric-soft); }
.metric-card:hover { color: var(--text); border-color: var(--metric-border); transform: translateY(-3px); box-shadow: var(--shadow); }
.metric-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--metric-color); background: var(--metric-soft); font-size: 1.05rem; }
.metric-copy { min-width: 0; display: flex; flex-direction: column; }
.metric-copy small { color: var(--muted); font-size: .68rem; font-weight: 700; }
.metric-copy strong { margin: .32rem 0 .25rem; color: #101828; font-size: clamp(1.12rem, 1.7vw, 1.52rem); font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; }
.metric-copy em { color: #98a2b3; font-size: .61rem; font-style: normal; line-height: 1.35; }
.metric-arrow { margin-left: auto; color: #b4c0d0; font-size: .75rem; }
.tone-blue { --metric-color:#2563eb; --metric-soft:#eaf2ff; --metric-border:#bad1fa; }
.tone-cyan { --metric-color:#0783a5; --metric-soft:#e2f8fd; --metric-border:#a5e5f0; }
.tone-purple { --metric-color:#7c3aed; --metric-soft:#f1eafe; --metric-border:#d3bdf9; }
.tone-amber { --metric-color:#c96b09; --metric-soft:#fff3df; --metric-border:#f4d199; }
.tone-green { --metric-color:#138a5b; --metric-soft:#e3f7ee; --metric-border:#aee3cb; }
.tone-red { --metric-color:#d92d20; --metric-soft:#feeceb; --metric-border:#f6c0bc; }
.tone-orange { --metric-color:#e05a12; --metric-soft:#fff0e8; --metric-border:#f8c5aa; }
.tone-slate { --metric-color:#475467; --metric-soft:#eef1f5; --metric-border:#cfd6df; }
.dashboard-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.dashboard-grid-main { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr); }
.dashboard-grid-secondary { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.dashboard-card { overflow: hidden; }
.dashboard-card-head { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--border-soft); }
.dashboard-card-head > a { color: var(--primary); text-decoration: none; font-size: .7rem; font-weight: 700; }
.chart-legend { display: flex; justify-content: flex-end; gap: 1rem; padding: .75rem 1.1rem 0; color: var(--muted); font-size: .66rem; }
.chart-legend span { display: flex; align-items: center; gap: .38rem; }
.legend-dot { width: 8px; height: 8px; border-radius: 3px; }
.legend-dot.receipts, .cash-bar.receipts { background: #2563eb; }
.legend-dot.disbursements, .cash-bar.disbursements { background: #f59e0b; }
.cash-flow-chart { height: 230px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: stretch; gap: .8rem; padding: 1.2rem 1.25rem .8rem; background-image: linear-gradient(to bottom, transparent 24%, #edf1f6 25%, transparent 25%, transparent 49%, #edf1f6 50%, transparent 50%, transparent 74%, #edf1f6 75%, transparent 75%); }
.cash-month { min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: .55rem; text-align: center; }
.cash-bars { display: flex; align-items: end; justify-content: center; gap: min(.42rem, 1vw); }
.cash-bar { width: min(18px, 30%); min-height: 3px; border-radius: 5px 5px 2px 2px; transition: filter .15s; }
.cash-bar:hover { filter: brightness(.88); }
.cash-month small { color: var(--muted); font-size: .64rem; font-weight: 700; }
.chart-note { display: flex; align-items: center; gap: .45rem; padding: .65rem 1.1rem .95rem; color: var(--muted); font-size: .65rem; }
.portfolio-visual { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 1.35rem 1rem 1rem; }
.portfolio-donut { flex: 0 0 150px; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; }
.portfolio-donut::before { content: ""; grid-area: 1/1; width: 102px; height: 102px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); }
.portfolio-donut > span { z-index: 1; grid-area: 1/1; display: flex; flex-direction: column; text-align: center; }
.portfolio-donut strong { font-size: 1.25rem; }
.portfolio-donut small { color: var(--muted); font-size: .6rem; }
.portfolio-legend { min-width: 0; display: grid; gap: .72rem; }
.portfolio-legend > div { display: flex; align-items: center; gap: .55rem; }
.portfolio-legend > div > i { flex: 0 0 8px; width: 8px; height: 30px; border-radius: 6px; }
.portfolio-legend span { min-width: 0; display: flex; flex-direction: column; }
.portfolio-legend small { color: var(--muted); font-size: .62rem; }
.portfolio-legend strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.risk-meter { margin: 0 1.1rem 1.1rem; padding: .85rem; border: 1px solid var(--border-soft); border-radius: 12px; background: #f9fbfd; }
.risk-meter > div:first-child { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; font-size: .7rem; font-weight: 700; }
.risk-meter .progress { height: 7px; background: #e7ecf2; }
.risk-meter > small { display: block; margin-top: .5rem; color: var(--muted); font-size: .62rem; }
.attention-list { display: grid; gap: .55rem; padding: 1rem; }
.attention-item { display: flex; align-items: center; gap: .75rem; padding: .72rem; border: 1px solid var(--border-soft); border-radius: 12px; color: var(--text); background: #fff; text-decoration: none; }
.attention-item:hover { color: var(--text); border-color: #cad8ea; background: #f9fbfe; }
.attention-item > span { flex: 0 0 37px; width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; }
.attention-item.warning > span { color: #a15400; background: #fff0d5; }
.attention-item.danger > span { color: #b42318; background: #fee4e2; }
.attention-item.info > span { color: #175cd3; background: #eaf2ff; }
.attention-item > div { min-width: 0; flex: 1; }
.attention-item strong, .attention-item small { display: block; }
.attention-item strong { font-size: .73rem; }
.attention-item small { margin-top: .12rem; color: var(--primary); font-size: .63rem; font-weight: 700; }
.attention-item > i { color: #98a2b3; }
.all-clear { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 1rem; }
.all-clear > i { color: var(--success); font-size: 2rem; }
.all-clear strong { display: block; }
.all-clear p { margin: .15rem 0 0; color: var(--muted); font-size: .7rem; }
.quick-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: 1rem; }
.quick-actions-grid > a { min-height: 76px; display: flex; align-items: center; gap: .7rem; padding: .75rem; border: 1px solid var(--border-soft); border-radius: 12px; color: var(--text); background: #fff; text-decoration: none; transition: border-color .16s, transform .16s, background .16s; }
.quick-actions-grid > a:hover { border-color: #bad1f6; background: #f7faff; transform: translateY(-2px); }
.quick-actions-grid > a > i { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: #eaf2ff; font-size: 1rem; }
.quick-actions-grid strong, .quick-actions-grid small { display: block; }
.quick-actions-grid strong { font-size: .72rem; }
.quick-actions-grid small { margin-top: .12rem; color: var(--muted); font-size: .59rem; }
.process-overview, .module-procedures { margin-top: 1.75rem; }
.process-flow { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: .6rem; overflow-x: auto; padding: .2rem .1rem .8rem; scrollbar-width: thin; }
.process-step { position: relative; min-width: 130px; min-height: 155px; display: flex; flex-direction: column; align-items: flex-start; padding: .85rem; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; }
.process-step:not(:last-child)::after { content: "\F135"; position: absolute; z-index: 2; right: -.75rem; top: 50%; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--primary); background: #fff; font-family: bootstrap-icons; font-size: .68rem; transform: translateY(-50%); }
.process-step:hover { color: var(--text); border-color: #aac7f3; transform: translateY(-2px); }
.process-index { color: #98a2b3; font-size: .58rem; font-weight: 800; }
.process-step > i { width: 36px; height: 36px; display: grid; place-items: center; margin: .55rem 0 .65rem; border-radius: 10px; color: var(--primary); background: #eaf2ff; }
.process-step strong { font-size: .72rem; }
.process-step small { margin-top: .25rem; color: var(--muted); font-size: .59rem; line-height: 1.4; }
.module-filter, .guide-page-search { min-width: min(330px, 100%); display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 11px; background: #fff; }
.module-filter i, .guide-page-search i { color: #98a2b3; }
.module-filter input, .guide-page-search input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .75rem; }
.module-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.module-guide-card { min-height: 235px; display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.module-guide-card[hidden] { display: none; }
.module-guide-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.module-guide-top > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: #eaf2ff; }
.module-guide-top > small { color: var(--muted); font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.module-guide-card h3 { margin: .85rem 0 .35rem; font-size: .86rem; font-weight: 800; }
.module-guide-card p { flex: 1; margin: 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.module-guide-meta { display: flex; gap: .75rem; margin-top: .7rem; color: #667085; font-size: .6rem; }
.module-guide-meta span { display: flex; align-items: center; gap: .3rem; }
.module-guide-card > a { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--border-soft); text-decoration: none; font-size: .66rem; font-weight: 700; }
.filter-empty { display: none; min-height: 180px; align-items: center; justify-content: center; flex-direction: column; color: var(--muted); text-align: center; }
.filter-empty.show { display: flex; }
.filter-empty > i { margin-bottom: .5rem; font-size: 1.7rem; }
.activity-card { margin-top: 1.75rem; }

/* Full process guide */
.guide-page-intro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; padding: 1.5rem; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(125deg, var(--navy-950), var(--navy-800)); }
.guide-page-intro h2 { max-width: 780px; margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; }
.guide-page-intro p { max-width: 800px; margin: .55rem 0 0; color: #c1d1e9; font-size: .73rem; }
.guide-page-search { flex: 0 0 min(350px, 38%); border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.1); }
.guide-page-search i, .guide-page-search input, .guide-page-search input::placeholder { color: #d8e5f7; }
.guide-jump-nav { position: sticky; top: calc(var(--topbar-height) + .5rem); z-index: 10; display: flex; gap: .4rem; overflow-x: auto; margin-bottom: 1rem; padding: .55rem; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); scrollbar-width: none; box-shadow: var(--shadow-sm); }
.guide-jump-nav::-webkit-scrollbar { display: none; }
.guide-jump-nav a { display: flex; align-items: center; gap: .4rem; padding: .55rem .7rem; border-radius: 9px; color: #475467; text-decoration: none; font-size: .67rem; font-weight: 700; white-space: nowrap; }
.guide-jump-nav a:hover, .guide-jump-nav a.active { color: #fff; background: var(--primary); }
.full-guide-list { display: grid; gap: 1rem; }
.full-guide-card { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); scroll-margin-top: 155px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
.full-guide-card[hidden] { display: none; }
.full-guide-card.selected { border-color: #78a5ea; box-shadow: 0 0 0 3px rgba(37,99,201,.10), var(--shadow); }
.full-guide-summary { padding: 1.35rem; color: #fff; background: linear-gradient(145deg, #102a56, #173b76); }
.full-guide-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 14px; color: #fff; background: rgba(255,255,255,.13); font-size: 1.2rem; }
.guide-category { color: #a9c7f4; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.full-guide-summary h3 { margin: .35rem 0 .5rem; font-size: 1.25rem; font-weight: 800; }
.full-guide-summary > p { color: #c6d5eb; font-size: .7rem; line-height: 1.55; }
.guide-connections { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.guide-connections strong { width: 100%; margin-bottom: .15rem; color: #a9c7f4; font-size: .58rem; text-transform: uppercase; }
.guide-connections span { display: inline-flex; align-items: center; gap: .2rem; padding: .35rem .48rem; border-radius: 8px; color: #eaf2ff; background: rgba(255,255,255,.09); font-size: .57rem; }
.full-guide-steps { padding: 1.2rem 1.35rem; }
.guide-steps-head { display: flex; justify-content: space-between; margin-bottom: .6rem; color: var(--muted); font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.full-guide-steps ol { margin: 0; padding: 0; list-style: none; }
.full-guide-steps li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: .8rem; padding: .6rem 0 .9rem; }
.full-guide-steps li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 39px; bottom: -4px; width: 2px; background: #e6ecf3; }
.full-guide-steps li > span { z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #bcd1f2; border-radius: 11px; color: var(--primary); background: #edf4ff; font-size: .62rem; font-weight: 800; }
.full-guide-steps h4 { margin: .05rem 0 .22rem; font-size: .78rem; font-weight: 800; }
.full-guide-steps p { margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.full-guide-steps a { display: inline-block; margin-top: .32rem; font-size: .62rem; font-weight: 700; text-decoration: none; }

/* Help drawer and command search */
.panel-scrim { position: fixed; z-index: 1060; inset: 0; visibility: hidden; opacity: 0; background: rgba(8,22,45,.46); backdrop-filter: blur(2px); transition: opacity .2s, visibility .2s; }
.guide-panel { position: fixed; z-index: 1070; inset: 0 0 0 auto; width: min(450px, 100vw); display: flex; flex-direction: column; visibility: hidden; transform: translateX(100%); color: var(--text); background: #fff; box-shadow: -20px 0 55px rgba(8,22,45,.22); transition: transform .24s ease, visibility .24s; }
.guide-panel.open { visibility: visible; transform: translateX(0); }
.panel-scrim.show { visibility: visible; opacity: 1; }
.guide-panel-head { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); background: #f8fafc; }
.guide-panel-head span { color: var(--primary); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.guide-panel-head h2 { margin: .18rem 0 0; font-size: 1.05rem; font-weight: 800; }
.guide-panel-body { flex: 1; overflow-y: auto; padding: 1.15rem; }
.guide-intro { color: var(--muted); font-size: .73rem; line-height: 1.6; }
.guide-label { color: #475467; font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.procedure-list { margin: .75rem 0 0; padding: 0; list-style: none; }
.procedure-list li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: .75rem; padding-bottom: 1rem; }
.procedure-list li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: #e4eaf2; }
.procedure-number { z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #c7d8f3; border-radius: 10px; color: var(--primary); background: #eef5ff; font-size: .65rem; font-weight: 800; }
.procedure-list a { color: #27364f; font-size: .75rem; font-weight: 800; text-decoration: none; }
.procedure-list a:hover { color: var(--primary); }
.procedure-list p { margin: .18rem 0 0; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.connection-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.connection-list span { display: inline-flex; align-items: center; gap: .25rem; padding: .42rem .55rem; border: 1px solid #d9e4f3; border-radius: 9px; color: #475467; background: #f6f9fd; font-size: .6rem; }
.guide-empty { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.guide-empty > i { color: #7ba4e6; font-size: 2.4rem; }
.guide-empty h3 { margin: .8rem 0 .4rem; font-size: 1rem; }
.guide-empty p { max-width: 310px; color: var(--muted); font-size: .7rem; }
.command-palette { position: fixed; z-index: 2000; inset: 0; display: flex; align-items: flex-start; justify-content: center; visibility: hidden; opacity: 0; padding: 9vh 1rem 1rem; background: rgba(8,22,45,.60); backdrop-filter: blur(5px); transition: opacity .16s, visibility .16s; }
.command-palette.open { visibility: visible; opacity: 1; }
.command-dialog { width: min(720px, 100%); max-height: min(690px, 82vh); overflow: hidden; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lg); transform: translateY(-10px); transition: transform .18s; }
.command-palette.open .command-dialog { transform: translateY(0); }
.command-input-wrap { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.command-input-wrap > i { color: var(--primary); font-size: 1.05rem; }
.command-input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); font-size: .9rem; }
.command-input-wrap button { border: 0; background: transparent; }
.command-caption { padding: .7rem 1rem .4rem; color: var(--muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.command-results { max-height: min(580px, 68vh); overflow-y: auto; padding: .3rem .55rem .7rem; }
.command-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 18px; align-items: center; gap: .7rem; padding: .68rem; border-radius: 11px; color: var(--text); text-decoration: none; }
.command-item:hover, .command-item.keyboard-active { color: var(--text); background: #edf4ff; }
.command-item[hidden] { display: none; }
.command-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #d9e5f6; border-radius: 12px; color: var(--primary); background: #f6f9ff; }
.command-item > span:nth-child(2) { min-width: 0; }
.command-item strong, .command-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-item strong { font-size: .75rem; }
.command-item small { margin-top: .15rem; color: var(--muted); font-size: .61rem; }
.command-item em { color: #98a2b3; font-size: .58rem; font-style: normal; }
.command-item > i { color: #98a2b3; }
.command-empty { display: none; min-height: 170px; align-items: center; justify-content: center; flex-direction: column; gap: .5rem; color: var(--muted); font-size: .72rem; }
.command-empty.show { display: flex; }
.command-empty i { font-size: 1.5rem; }

/* Collapsed desktop navigation */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed); }
body.sidebar-collapsed .main-area { margin-left: var(--sidebar-collapsed); }
body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .nav-search-trigger span, body.sidebar-collapsed .nav-search-trigger kbd, body.sidebar-collapsed .nav-group-label span, body.sidebar-collapsed .nav-chevron, body.sidebar-collapsed .nav-label, body.sidebar-collapsed .active-dot, body.sidebar-collapsed .sidebar-support-copy, body.sidebar-collapsed .sidebar-support > a { display: none; }
body.sidebar-collapsed .sidebar-head { justify-content: center; padding-inline: .7rem; }
body.sidebar-collapsed .nav-search-trigger { justify-content: center; margin-inline: .7rem; padding-inline: .5rem; }
body.sidebar-collapsed .nav-group > summary { justify-content: center; }
body.sidebar-collapsed .nav-group-label { gap: 0; }
body.sidebar-collapsed .nav-group-items { display: grid; }
body.sidebar-collapsed .sidebar .nav-link { color: var(--sidebar-text); justify-content: center; margin-left: 0; padding-inline: .5rem; }
body.sidebar-collapsed .sidebar .nav-link:hover { transform: none; }
body.sidebar-collapsed .sidebar-support { justify-content: center; margin-inline: .7rem; padding: .6rem; }

@media (max-width: 1399.98px) {
    .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .module-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .process-flow { grid-template-columns: repeat(7, minmax(140px, 1fr)); }
}

@media (max-width: 1199.98px) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid-main, .dashboard-grid-secondary { grid-template-columns: 1fr; }
    .module-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    :root { --topbar-height: 68px; }
    .sidebar { width: min(var(--sidebar-width), 88vw); transform: translateX(-102%); }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-scrim { position: fixed; z-index: 1040; inset: 0; display: block; visibility: hidden; opacity: 0; background: rgba(8,22,45,.48); transition: opacity .2s, visibility .2s; }
    .sidebar-scrim.show { visibility: visible; opacity: 1; }
    .main-area, body.sidebar-collapsed .main-area { margin-left: 0; }
    .content-area { padding: 1.15rem; }
    .topbar { padding-inline: 1rem; }
    .dashboard-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 1.5rem; }
    .hero-actions { justify-content: flex-start; }
    .full-guide-card { grid-template-columns: 1fr; }
    .guide-page-intro { align-items: flex-start; flex-direction: column; }
    .guide-page-search { width: 100%; flex-basis: auto; }
    .sticky-card { position: static; }
}

@media (max-width: 767.98px) {
    body { font-size: .875rem; }
    .content-area { padding: .9rem .75rem 1.4rem; }
    .topbar-context { display: none; }
    .topbar { min-height: 64px; padding: .5rem .7rem; }
    .topbar-actions { gap: .4rem; }
    .topbar-action { width: 40px; padding: 0; justify-content: center; }
    .user-menu-button { padding-right: .2rem; }
    .page-context-header { align-items: flex-start; flex-wrap: wrap; padding: .9rem; }
    .page-context-icon { flex-basis: 42px; width: 42px; height: 42px; }
    .page-context-copy { width: calc(100% - 60px); }
    .page-context-copy h1 { font-size: 1.1rem; }
    .page-context-copy p { font-size: .7rem; }
    .btn-guide { width: 100%; }
    .dashboard-hero { margin-bottom: 1.25rem; padding: 1.25rem; border-radius: var(--radius); }
    .dashboard-hero h1 { font-size: 1.45rem; }
    .hero-actions { width: 100%; }
    .hero-actions .btn { flex: 1; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .section-heading > small { display: none; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .metric-card { min-height: 126px; flex-direction: column; gap: .5rem; padding: .8rem; }
    .metric-copy strong { margin: .18rem 0; font-size: 1rem; }
    .metric-copy em, .metric-arrow { display: none; }
    .metric-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
    .dashboard-card-head { min-height: 58px; padding: .8rem; }
    .cash-flow-chart { height: 210px; gap: .35rem; padding-inline: .7rem; }
    .portfolio-visual { gap: 1rem; }
    .portfolio-donut { width: 125px; height: 125px; flex-basis: 125px; }
    .portfolio-donut::before { width: 84px; height: 84px; }
    .portfolio-legend strong { font-size: .68rem; }
    .quick-actions-grid { grid-template-columns: 1fr; }
    .module-guide-grid { grid-template-columns: 1fr; }
    .module-filter { width: 100%; min-width: 0; }
    .app-footer { align-items: flex-start; flex-direction: column; padding: .9rem; }
    .content-area > .d-flex.justify-content-between, .card-header.d-flex.justify-content-between { align-items: flex-start !important; flex-wrap: wrap; gap: .6rem; }
    .content-area > .d-flex.justify-content-between .btn { width: 100%; }
    .table-responsive { max-width: calc(100vw - 1.5rem); }
    .table-filter-bar { align-items: stretch; flex-direction: column; gap: .4rem; }
    .table-filter-bar label { width: 100%; }
    .table-filter-bar > span { padding-left: .2rem; }
    .table { min-width: 680px; }
    .table.table-sm { min-width: 620px; }
    .card .row > [class*="col-"] .btn.w-100 { min-width: 90px; }
    .nav-tabs { margin-inline: -.1rem; }
    .full-guide-summary, .full-guide-steps { padding: 1rem; }
    .guide-jump-nav { top: 70px; }
    .guide-panel { width: 100vw; }
    .command-palette { padding: 0; align-items: stretch; }
    .command-dialog { width: 100%; max-height: 100vh; border-radius: 0; }
    .command-results { max-height: calc(100vh - 110px); }
    .command-item { grid-template-columns: 38px minmax(0, 1fr) 18px; }
    .command-item em { display: none; }
}

@media (max-width: 420px) {
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 105px; flex-direction: row; align-items: center; }
    .metric-copy em { display: block; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .portfolio-visual { align-items: flex-start; flex-direction: column; }
    .portfolio-donut { align-self: center; }
    .recovery-grid { grid-template-columns: 1fr; }
}

.process-intro { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 1.5rem; border: 1px solid #dbe7f6; border-radius: 18px; background: linear-gradient(135deg,#f7fbff,#eef5ff); }
.process-intro h2 { margin: .15rem 0 .35rem; font-size: clamp(1.25rem,2vw,1.65rem); color: var(--navy-900); }
.process-intro p { max-width: 780px; margin: 0; color: var(--slate-600); }
.process-intro-note { display: flex; align-items: center; gap: .75rem; min-width: 235px; padding: .8rem 1rem; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.process-intro-note > i { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; color: var(--success); background: #ecfdf3; font-size: 1.15rem; }
.eyebrow,.section-heading > span { color: var(--primary); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.wizard-progress { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .4rem; padding: 1rem 1.2rem; background: #f8fbff; overflow-x: auto; }
.wizard-step-indicator { position: relative; display: flex; align-items: center; justify-content: center; gap: .45rem; min-width: 100px; padding: .55rem .65rem; border: 0; border-radius: 12px; color: var(--slate-500); background: transparent; font-weight: 700; }
.wizard-step-indicator span { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #cbd5e1; border-radius: 50%; background: #fff; font-size: .75rem; }
.wizard-step-indicator.active { color: var(--primary); background: #eaf2ff; }
.wizard-step-indicator.active span { border-color: var(--primary); color: #fff; background: var(--primary); }
.wizard-step-indicator.complete { color: var(--success); }
.wizard-step-indicator.complete span { border-color: var(--success); color: #fff; background: var(--success); }
.wizard-pane { animation: wizardFade .2s ease; }
.section-heading { margin-bottom: 1.25rem; }
.section-heading h3 { margin: .2rem 0 .3rem; font-size: 1.2rem; color: var(--navy-900); }
.section-heading p { margin: 0; color: var(--slate-500); }
.wizard-actions { display: flex; align-items: center; padding: 1rem 1.25rem; background: #f8fafc; }
.repeat-row { padding: .7rem; border: 1px dashed #d6e1ef; border-radius: 12px; background: #fbfdff; }
.review-tile { display: flex; align-items: flex-start; gap: .8rem; height: 100%; padding: 1rem; border: 1px solid #dce7f4; border-radius: 14px; background: #fbfdff; }
.review-tile > i { color: var(--primary); font-size: 1.3rem; }
.review-tile strong,.review-tile span { display: block; }
.review-tile span { margin-top: .2rem; color: var(--slate-500); font-size: .86rem; }
.disabled-section { opacity: .5; }
.workflow-steps { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .6rem; }
.workflow-step { position: relative; padding: .85rem; border: 1px solid #dce6f2; border-radius: 13px; background: #fff; }
.workflow-step strong,.workflow-step small { display: block; }
.workflow-step strong { color: var(--navy-900); font-size: .83rem; }
.workflow-step small { margin-top: .2rem; color: var(--slate-500); }
.workflow-step.done { border-color: #9fd9b2; background: #f0fdf4; }
.workflow-step.current { border-color: #8bb8ef; box-shadow: 0 0 0 3px #e8f1ff; }
.evidence-box { padding: 1rem; border: 1px solid #f1c27d; border-radius: 14px; background: #fffaf0; }
@keyframes wizardFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
    .process-intro { align-items: flex-start; flex-direction: column; }
    .process-intro-note { width: 100%; }
    .workflow-steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 575.98px) {
    .wizard-progress { grid-template-columns: repeat(6,100px); }
    .wizard-step-indicator { flex-direction: column; font-size: .72rem; }
    .wizard-actions { align-items: stretch; flex-direction: column; }
    .wizard-actions > div { width: 100%; }
    .wizard-actions .btn { flex: 1; }
    .workflow-steps { grid-template-columns: 1fr 1fr; }
}

@media print {
    .sidebar, .topbar, .page-context-header .btn, .app-footer, .guide-panel, .panel-scrim, .command-palette, .sidebar-scrim { display: none !important; }
    .main-area { margin: 0 !important; }
    .content-area { max-width: none; padding: 0; }
    .card, .dashboard-card { box-shadow: none !important; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v019 Administration modernization */
.brand-logo { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: inherit; }
.auth-brand-mark { overflow: hidden; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.admin-kpi { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.admin-kpi-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 13px; color: var(--primary); background: #edf4ff; font-size: 1.15rem; }
.admin-kpi-icon.success { color: var(--success); background: #ecfdf3; }.admin-kpi-icon.warning { color: var(--warning); background: #fff7e6; }.admin-kpi-icon.danger { color: var(--danger); background: #fff0ef; }
.admin-kpi small,.admin-kpi strong { display: block; }.admin-kpi small { color: var(--muted); font-size: .72rem; }.admin-kpi strong { margin-top: .1rem; color: var(--navy-900); font-size: 1.35rem; }
.admin-register-card .dataTables_wrapper { padding: 1rem; }.admin-register-card table.dataTable { margin-top: .4rem !important; }
.user-cell { display: flex; align-items: center; gap: .65rem; min-width: 200px; }.user-cell strong,.user-cell small { display: block; }.user-cell small { margin-top: .1rem; color: var(--muted); }
.user-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: #eaf2ff; font-weight: 800; font-size: .76rem; }
.admin-tabs { padding: .3rem; border: 1px solid var(--border); border-radius: 13px; background: #f8fafc; }.admin-tabs .nav-link { border-radius: 10px; color: var(--muted); font-weight: 700; }.admin-tabs .nav-link.active { color: #fff; background: var(--primary); }
.security-summary { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }.security-summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border-soft); }.security-summary-row:last-child { border-bottom: 0; }.security-summary-row span { color: var(--muted); }.security-summary-row strong { color: var(--navy-900); text-align: right; }
.select2-container--default .select2-selection--multiple,.select2-container--default .select2-selection--single { min-height: 40px; border: 1px solid #ced4da; border-radius: .5rem; }.select2-container--default .select2-selection--multiple { padding: .2rem .35rem; }.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; }.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }.select2-dropdown { border-color: #bfd0e7; box-shadow: 0 12px 30px rgba(16,42,86,.12); }

.role-manager { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 1rem; align-items: start; }.role-sidebar { position: sticky; top: calc(var(--topbar-height) + 1rem); max-height: calc(100vh - var(--topbar-height) - 2rem); overflow: hidden; }.role-list { overflow-y: auto; }.role-list-item { padding: .85rem 1rem; border-color: var(--border-soft); }.role-list-item strong { font-size: .86rem; }.role-list-item.active { color: var(--navy-900); border-color: #cfe0f8; background: #eaf2ff; }.role-list-item.active .badge { color: #6b4700 !important; }
.role-capability-panel { min-width: 0; overflow: hidden; }.role-capability-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; }.role-summary-chips { display: flex; gap: .45rem; }.role-tools { display: grid; grid-template-columns: minmax(260px,1fr) 220px; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border-soft); background: #f8fafc; }.role-modules { max-height: calc(100vh - 285px); padding: 1rem; overflow-y: auto; background: #f8fafc; }.capability-module { margin-bottom: 1rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }.capability-module > header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem .9rem; border-bottom: 1px solid var(--border-soft); background: #f7faff; }.capability-module > header strong,.capability-module > header small { display: block; }.capability-module > header small { color: var(--muted); font-size: .7rem; }.capability-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.capability-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: .5rem; padding: .7rem .85rem; border-bottom: 1px solid var(--border-soft); cursor: pointer; }.capability-row:nth-child(odd) { border-right: 1px solid var(--border-soft); }.capability-row:hover { background: #fbfdff; }.capability-copy { min-width: 0; }.capability-copy strong,.capability-copy small { display: block; overflow-wrap: anywhere; }.capability-copy strong { color: var(--navy-900); font-size: .78rem; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }.capability-copy small { margin-top: .15rem; color: var(--muted); font-size: .7rem; }.role-savebar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-top: 1px solid var(--border); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }.role-savebar > div { color: var(--muted); font-size: .76rem; }

.workflow-explainer { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: 1.2rem 1.3rem; border: 1px solid #cfe0f8; border-radius: 18px; background: linear-gradient(135deg,#f7fbff,#eef5ff); }.workflow-explainer-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: var(--primary); font-size: 1.35rem; }.workflow-explainer h2 { margin: .15rem 0 .25rem; color: var(--navy-900); font-size: 1.15rem; }.workflow-explainer p { margin: 0; max-width: 850px; color: var(--muted); font-size: .82rem; }.workflow-flow { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }.workflow-flow span { padding: .45rem .6rem; border-radius: 9px; color: var(--primary); background: #fff; box-shadow: var(--shadow-sm); font-size: .72rem; font-weight: 700; }.workflow-flow i { color: #8aa4c9; }
.workflow-step-editor { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: .75rem; margin-bottom: .9rem; padding: 1rem; border: 1px solid var(--border); border-radius: 15px; background: #fbfdff; }.workflow-step-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--primary); font-weight: 800; }.workflow-step-body { min-width: 0; }

.settings-shell { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 1rem; align-items: start; }.settings-nav { position: sticky; top: calc(var(--topbar-height) + 1rem); }.settings-nav .nav-link { color: var(--muted); font-weight: 700; }.settings-nav .nav-link.active { color: #fff; background: var(--primary); }.branding-logo-upload { display: flex; gap: 1rem; align-items: center; padding: .85rem; border: 1px dashed #b9cbe3; border-radius: 14px; background: #f9fbfe; }.branding-logo-preview { width: 82px; height: 82px; flex: 0 0 82px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; color: var(--primary); background: #fff; font-size: 1.6rem; }.branding-logo-preview img { width: 100%; height: 100%; object-fit: contain; }.color-field { display: flex; align-items: center; gap: .7rem; padding: .4rem .5rem; border: 1px solid #ced4da; border-radius: .5rem; background: #fff; }.color-field input { width: 46px; height: 34px; padding: 0; border: 0; background: transparent; }.color-field code { color: var(--text); }
.site-preview { --preview-primary: var(--primary); --preview-secondary: var(--navy-900); --preview-accent: var(--primary-600); min-height: 280px; display: grid; grid-template-columns: 38% 62%; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #f4f7fb; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }.site-preview-sidebar { display: flex; flex-direction: column; align-items: center; padding: 1.2rem .65rem; color: #fff; background: var(--preview-secondary); text-align: center; }.site-preview-logo { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: .6rem; overflow: hidden; border-radius: 14px; background: var(--preview-primary); }.site-preview-logo img { width: 100%; height: 100%; object-fit: contain; }.site-preview-sidebar strong { font-size: .8rem; }.site-preview-sidebar small { margin-top: .15rem; opacity: .75; font-size: .58rem; }.site-preview-main { padding: .65rem; }.site-preview-topbar { height: 28px; margin-bottom: .8rem; border-radius: 7px; background: #fff; box-shadow: var(--shadow-sm); }.site-preview-card { display: grid; gap: .5rem; padding: .8rem; border-radius: 10px; background: #fff; }.site-preview-card span { height: 10px; border-radius: 5px; background: #e7edf5; }.site-preview-card span:first-child { width: 55%; background: var(--preview-accent); }.site-preview-card span:last-child { width: 75%; }

@media (max-width: 1199.98px) { .admin-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.workflow-explainer { grid-template-columns: 52px 1fr; }.workflow-flow { grid-column: 1 / -1; justify-content: center; }.role-manager { grid-template-columns: 260px minmax(0,1fr); }.capability-list { grid-template-columns: 1fr; }.capability-row:nth-child(odd) { border-right: 0; } }
@media (max-width: 991.98px) { .role-manager,.settings-shell { grid-template-columns: 1fr; }.role-sidebar,.settings-nav { position: static; max-height: none; }.role-list { max-height: 280px; }.role-modules { max-height: none; }.role-tools { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .admin-kpi-grid { grid-template-columns: 1fr; }.workflow-explainer { grid-template-columns: 1fr; text-align: left; }.workflow-flow { overflow-x: auto; justify-content: flex-start; }.role-capability-header,.role-savebar { align-items: stretch; flex-direction: column; }.workflow-step-editor { grid-template-columns: 1fr; }.workflow-step-number { width: 34px; height: 34px; } }
.status-active { color:#067647!important;background:#ecfdf3!important; }.status-disabled { color:#475467!important;background:#f2f4f7!important; }.status-locked { color:#b54708!important;background:#fffaeb!important; }

/* v020 administration stability and expanded site settings */
.system-notice { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:1rem; padding:.85rem 1rem; border:1px solid #b9d3f7; border-radius:14px; color:var(--navy-900); background:#eef6ff; box-shadow:var(--shadow-sm); }
.system-notice > i { margin-top:.05rem; color:var(--primary); font-size:1.05rem; }
.system-notice strong,.system-notice span { display:block; }
.system-notice strong { margin-bottom:.15rem; font-size:.78rem; }
.system-notice span { color:#475467; font-size:.72rem; line-height:1.45; }
.app-footer-links { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; }
.app-footer-links a { color:var(--primary); text-decoration:none; font-weight:700; }
.app-footer-links a:hover { text-decoration:underline; }
.settings-content { min-width:0; }
.settings-content .card-header strong { color:var(--navy-900); }
.settings-content textarea { resize:vertical; }
.auth-guidance { max-width:460px; margin-left:auto; margin-right:auto; padding:.55rem .7rem; border:1px solid #d7e4f4; border-radius:10px; color:#475467; background:#f8fbff; font-size:.75rem; line-height:1.45; }
.member-auth-guidance { max-width:520px; }
@media (max-width: 767.98px) { .app-footer-links { justify-content:flex-start; } }

/* v021 global modal ergonomics */
.modal-dialog .modal-content>form{display:flex;flex-direction:column;max-height:calc(100vh - 2rem);min-height:0}.modal-dialog .modal-content>form>.modal-body{overflow-y:auto;min-height:0}.modal-dialog .modal-content>form>.modal-header,.modal-dialog .modal-content>form>.modal-footer{flex:0 0 auto;background:#fff;z-index:2}.modal-dialog .modal-content>form>.modal-footer{position:sticky;bottom:0;border-top:1px solid var(--border);box-shadow:0 -8px 18px rgba(15,23,42,.05)}.sidebar .nav-link:not(.active):hover{background:var(--sidebar-hover);color:#fff}.website-overview{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.4rem;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow-sm)}.website-overview h2{margin:.2rem 0;font-size:1.3rem}.website-overview p{margin:0;color:var(--muted);max-width:850px}.website-thumb{width:100%;height:100%;min-height:240px;object-fit:cover}.website-manager .accordion-button small{font-weight:400}@media(max-width:767.98px){.website-overview{align-items:flex-start;flex-direction:column}}

/* v022 independent surface theme tokens */
body{background:var(--page-bg,#f4f7fb)}
.topbar{background:var(--header-bg,#fff)}
.auth-body{background:var(--login-bg,var(--page-bg,#eef5ff))}
.sidebar{background:linear-gradient(180deg,var(--navy-900),var(--navy-950))}
.sidebar .nav-link.active{background:var(--sidebar-active)!important;color:#fff!important}
.sidebar .nav-link:not(.active):hover{background:var(--sidebar-hover)!important}
.btn-primary{background-color:var(--primary);border-color:var(--primary)}
.btn-primary:hover,.btn-primary:focus{background-color:var(--primary-600);border-color:var(--primary-600)}

/* v022: remove fixed-blue administration accents in favor of the selected admin theme. */
.user-avatar,.quick-actions-grid>a>i,.process-step>i,.module-guide-top>span,.procedure-number,.wizard-step-indicator.active{color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 11%,#fff)!important;border-color:color-mix(in srgb,var(--primary) 28%,#fff)!important}
.btn-guide{color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 8%,#fff)!important;border-color:color-mix(in srgb,var(--primary) 26%,#fff)!important}
.process-intro,.workflow-explainer{border-color:color-mix(in srgb,var(--primary) 22%,#fff)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 3%,#fff),color-mix(in srgb,var(--primary) 8%,#fff))!important}
.role-list-item.active{color:var(--navy-900)!important;border-color:color-mix(in srgb,var(--primary) 25%,#fff)!important;background:color-mix(in srgb,var(--primary) 10%,#fff)!important}
.workflow-step.current{border-color:color-mix(in srgb,var(--primary) 50%,#fff)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,#fff)!important}
.workflow-flow i{color:color-mix(in srgb,var(--primary) 55%,#64748b)!important}
.tone-blue{--metric-color:var(--primary);--metric-soft:color-mix(in srgb,var(--primary) 10%,#fff);--metric-border:color-mix(in srgb,var(--primary) 28%,#fff)}
.legend-dot.receipts,.cash-bar.receipts{background:var(--primary)!important}.attention-item.info>span{color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 10%,#fff)!important}

/* v022.10 administration AJAX state */
.cms-pane-refreshing{position:relative;opacity:.72;pointer-events:none;transition:opacity .15s ease}
.cms-pane-refreshing::after{content:"Updating…";position:absolute;top:.75rem;right:.75rem;z-index:20;padding:.4rem .7rem;border-radius:999px;background:var(--header-bg,#fff);box-shadow:0 6px 20px rgba(15,23,42,.14);font-size:.78rem;font-weight:700;color:var(--primary,#1e4fa3)}
#adminStepUpModal .modal-content{border:0;border-radius:1rem;box-shadow:0 24px 70px rgba(15,23,42,.24)}
#adminStepUpCode{letter-spacing:.18em}

/* v022.14 Notification & Task Center */
.notification-bell-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--bs-border-color);border-radius:12px;background:var(--bs-body-bg);color:var(--bs-body-color)}
.notification-bell-button:hover{background:var(--bs-tertiary-bg)}
.notification-bell-badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--bs-danger);color:#fff;font-size:.68rem;font-weight:700;border:2px solid var(--bs-body-bg)}
.notification-dropdown{width:min(390px,92vw);max-height:70vh;overflow:auto}
/* v023.5: one unobtrusive in-page task state; it no longer covers records while scrolling. */
.cimfs-inline-task-control{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--primary) 24%,#dfe6ef)!important;background:linear-gradient(110deg,color-mix(in srgb,var(--primary) 5%,#fff),#fff 72%);box-shadow:0 8px 22px rgba(15,23,42,.08)!important}
.cimfs-inline-task-control::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--primary),var(--secondary))}
.cimfs-inline-task-control .card-body{padding:.9rem 1rem .9rem 1.15rem}
@media(max-width:767.98px){.cimfs-inline-task-control .card-body{padding:.8rem .85rem .8rem 1rem}.cimfs-inline-task-control .btn{width:100%}}
@media print{.cimfs-inline-task-control{display:none!important}}

/* v023.6: place the lifecycle action beside the workflow instead of hiding it at page bottom. */
.membership-next-action-card{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--warning) 30%,#dfe6ef)!important;background:linear-gradient(115deg,color-mix(in srgb,var(--warning) 8%,#fff),#fff 70%)}
.membership-next-action-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--warning),var(--primary))}
.membership-next-action-card .card-body{padding:1rem 1.1rem 1rem 1.25rem}
@media(max-width:575.98px){.membership-next-action-card form,.membership-next-action-card .btn{width:100%}}