/* Role home screens (board, manager, accountant, loans officer, auditor). Manrope, cobalt and purple. */
.rh { display: flex; flex-direction: column; gap: 18px; font-family: Manrope, system-ui, sans-serif; color: #0B1530; }
.rh a { color: inherit; }
.rh-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rh-top .rh-date { font-size: 13px; font-weight: 700; color: #5E6A82; }
.rh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-btn { height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid #E5E9F2; background: #fff; color: #0B1530 !important; font: 800 14px Manrope, sans-serif; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.rh-btn:hover { background: #F4F7FD; }
.rh-btn.is-primary { border: 0; background: linear-gradient(135deg, #6D28D9, #7C3AED); color: #fff !important; box-shadow: 0 8px 18px -8px rgba(109, 40, 217, .55); }
.rh-btn.is-small { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.rh-btn.is-light { border: 0; background: rgba(255, 255, 255, .16); color: #fff !important; }

.rh-hero { padding: 22px 24px; border-radius: 22px; background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 45%, #5B21B6 100%); color: #fff; display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.rh-hero.is-col { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; }
.rh-hero-main { flex: 999 1 480px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rh-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; opacity: .85; text-transform: uppercase; }
.rh-hero h2 { margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; }
.rh-hero ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.rh-hero-side { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .12); }
.rh-hero-side b { font-size: 17px; }
.rh-hero-side span { font-size: 13px; font-weight: 600; opacity: .92; }
.rh-hero-side a { color: #fff !important; font-size: 13px; font-weight: 800; }
.rh-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.rh-hero-grid div { display: flex; flex-direction: column; }
.rh-hero-grid span { font-size: 12.5px; font-weight: 700; opacity: .85; }
.rh-hero-grid b { font-size: 22px; font-weight: 800; }
.rh-hero-grid small { font-size: 12px; opacity: .85; }

.rh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rh-kpi { text-decoration: none; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #E5E9F2; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
a.rh-kpi:hover { border-color: #C7D2FE; }
.rh-kpi > span { font-size: 12.5px; font-weight: 700; color: #5E6A82; }
.rh-kpi > b { font-size: 23px; font-weight: 800; letter-spacing: -.4px; }
.rh-kpi > small { font-size: 12.5px; font-weight: 700; color: #5E6A82; }
.rh-kpi.is-good { background: #E6F6EE; border-color: #A7F3D0; } .rh-kpi.is-good > small { color: #047857; }
.rh-kpi.is-warn { background: #FFF8EB; border-color: #FBE3AE; } .rh-kpi.is-warn > small { color: #B45309; }

.rh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 14px; }
.rh-card { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid #E5E9F2; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rh-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rh-card-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.rh-card-head span, .rh-card-head a { font-size: 12.5px; font-weight: 700; color: #5E6A82; }
.rh-card-head a { color: #1E40AF; }
.rh-muted { font-size: 12.5px; color: #5E6A82; font-weight: 600; }
.rh-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; font-weight: 700; color: #5E6A82; }
.rh-legend .is-a { color: #2563EB; } .rh-legend .is-b { color: #7C3AED; } .rh-legend .is-in { color: #1E40AF; } .rh-legend .is-out { color: #C2410C; }

.rh-bars { display: grid; gap: 8px; align-items: end; height: 150px; }
.rh-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.rh-bar-col > span { font-size: 11px; font-weight: 700; color: #5E6A82; }
.rh-pair { display: flex; gap: 3px; align-items: flex-end; height: 120px; }
.rh-pair i { display: block; width: 10px; border-radius: 4px; }
.rh-pair .is-in { background: #1E40AF; } .rh-pair .is-out { background: #C2410C; }
.rh-solo { display: block; width: 100%; max-width: 34px; border-radius: 6px; background: #C7D2FE; }
.rh-solo.is-now { background: #6D28D9; }

.rh-stack { display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: #EEF1F7; }
.rh-stack i { display: block; height: 100%; }
.rh-q0 { background: #1E40AF; } .rh-q1 { background: #93C5FD; } .rh-q2 { background: #F59E0B; } .rh-q3 { background: #EA580C; } .rh-q4 { background: #B91C1C; }
.rh-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 16px; font-size: 13px; font-weight: 700; }
.rh-keys i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.rh-line { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #EEF1F7; text-decoration: none; }
.rh-line:first-of-type { border-top: 0; }
.rh-line-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rh-line-text strong { font-size: 14px; font-weight: 800; }
.rh-line-text small { font-size: 12.5px; color: #5E6A82; font-weight: 600; line-height: 1.45; }
.rh-line > a, .rh-line > button.rh-link { font-size: 13px; font-weight: 800; color: #1E40AF; white-space: nowrap; background: none; border: 0; cursor: pointer; padding: 0; }
.rh-pill { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.rh-pill.is-critical, .rh-pill.is-high { background: #FDEEF1; color: #B91C1C; }
.rh-pill.is-attention, .rh-pill.is-mid { background: #FFF8EB; color: #B45309; }
.rh-pill.is-info { background: #E6F6EE; color: #047857; }
.rh-pill.is-low { background: #F1F5F9; color: #5E6A82; }
.rh-count { min-width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; background: #EEF3FF; color: #1E40AF; }
.rh-count.is-bad, .rh-count.is-warn { background: #FDEEF1; color: #B91C1C; }
.rh-mark { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; background: #FFF8EB; color: #B45309; }
.rh-mark.is-ok { background: #E6F6EE; color: #047857; }

.rh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.rh-tile { text-decoration: none; padding: 14px; border-radius: 16px; background: #F7F9FC; border: 1px solid #EEF1F7; display: flex; flex-direction: column; gap: 2px; }
.rh-tile.is-hot { background: #F5F0FF; border-color: #E7DCFD; }
.rh-tile b { font-size: 24px; font-weight: 800; } .rh-tile strong { font-size: 13px; font-weight: 800; } .rh-tile small { font-size: 12px; color: #5E6A82; font-weight: 600; }

.rh-meter { height: 8px; border-radius: 999px; background: #EEF1F7; overflow: hidden; }
.rh-meter i { display: block; height: 8px; border-radius: 999px; background: #1E40AF; }
.rh-meter i.is-out { background: #C2410C; } .rh-meter i.is-good { background: #047857; }
.rh-hero .rh-meter { background: rgba(255, 255, 255, .2); } .rh-hero .rh-meter i { background: #fff; }

.rh-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 16px; background: #EEF3FF; border: 1px solid #C7D2FE; font-size: 14px; font-weight: 700; color: #1E3A8A; }
.rh-banner.is-bad { background: #FDEEF1; border-color: #FECACA; color: #991B1B; }

.rh-table-wrap { overflow-x: auto; }
.rh-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13.5px; }
.rh-table th { text-align: left; color: #5E6A82; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; padding: 8px 6px; }
.rh-table td { padding: 11px 6px; border-top: 1px solid #EEF1F7; vertical-align: top; }
.rh-table .r { text-align: right; white-space: nowrap; }
.rh-days { font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #EEF3FF; color: #1E40AF; }
.rh-days.is-30 { background: #FFF8EB; color: #B45309; } .rh-days.is-90 { background: #FDEEF1; color: #B91C1C; }
.rh-call { margin-top: 8px; padding: 12px; border-radius: 12px; background: #F7F9FC; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.rh-call label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #5E6A82; }
.rh-call input, .rh-call select { height: 38px; border-radius: 10px; border: 1px solid #E5E9F2; background: #fff; padding: 0 10px; font: 600 13px Manrope, sans-serif; color: #0B1530; }

.rh-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: #fff; border: 1px solid #E5E9F2; }
.rh-seg button { height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: #5E6A82; font: 800 13.5px Manrope, sans-serif; cursor: pointer; }
.rh-seg button.is-on { background: #EEF3FF; color: #1E40AF; }
.rh-flag { text-decoration: none; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #E5E9F2; display: flex; flex-direction: column; gap: 6px; }
.rh-flag-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rh-flag-top b { font-size: 26px; font-weight: 800; }
.rh-flag strong { font-size: 14px; font-weight: 800; }
.rh-flag small { font-size: 12.5px; font-weight: 600; color: #5E6A82; line-height: 1.45; }
.rh-log { display: grid; grid-template-columns: 120px 160px minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-top: 1px solid #EEF1F7; font-size: 13.5px; }
.rh-log span:first-child { font-size: 12.5px; font-weight: 800; color: #5E6A82; }
.rh-log b { font-weight: 800; }
.rh-svg { width: 100%; height: 170px; }
@media (max-width: 640px) {
    .rh-hero { padding: 18px; } .rh-hero h2 { font-size: 21px; }
    .rh-log { grid-template-columns: 1fr; }
    .rh-pair i { width: 6px; }
}

/* List page header buttons (Download template, Import from Excel, Register member): white words and icons on purple. */
.fi-resource-list-records-page .fi-header .fi-btn,
.fi-resource-list-records-page .fi-header .fi-btn .fi-btn-label,
.fi-resource-list-records-page .fi-header .fi-btn .fi-icon,
.fi-resource-list-records-page .fi-header .fi-btn svg {
    color: #fff !important;
}

/* Stay light on phones that force dark mode on websites (Chrome "dark mode for web pages", Samsung Internet). */
:root { color-scheme: only light; }