:root {
    --brand: #123b8a;
    --brand-dark: #08265f;
    --brand-light: #e9efff;
    --accent: #f6c445;
    --accent-dark: #dba91d;
    --bg: #f5f7fc;
    --card: #ffffff;
    --text: #15213b;
    --muted: #65708a;
    --border: #e0e6f1;
    --danger: #b42318;
    --warning: #9a6700;
    --success: #087443;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Arial, sans-serif; }
a { color: var(--brand); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
.topbar { background: #fff; border-bottom: 4px solid var(--accent); box-shadow: 0 4px 18px rgba(18,59,138,.06); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.container { max-width: 1240px; margin: 0 auto; padding: 24px; }
.narrow { max-width: 760px; }
.brand-lockup { display: flex; gap: 13px; align-items: center; min-width: 0; }
.brand-logo { display: block; width: 66px; height: 66px; object-fit: contain; background: #fff; border-radius: 12px; flex: 0 0 auto; }
.brand { font-size: 19px; font-weight: 850; color: var(--brand-dark); letter-spacing: -.02em; }
.brand-subtitle { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nav a { white-space: nowrap; }
.hero { padding: 32px 0 20px; position: relative; }
.hero:after { content: ""; display: block; width: 74px; height: 5px; background: var(--accent); border-radius: 5px; margin-top: 16px; }
.hero h1 { margin: 0 0 10px; font-size: 34px; color: var(--brand-dark); letter-spacing: -.025em; }
.hero p { color: var(--muted); max-width: 820px; line-height: 1.65; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: 0 10px 26px rgba(18,59,138,.055); }
.card h2, .card h3 { margin-top: 0; color: var(--brand-dark); }
label { display: block; margin: 14px 0 7px; font-weight: 700; color: #26375e; }
input, select, textarea { width: 100%; padding: 12px 13px; border: 1px solid #cbd5e7; border-radius: 10px; background: #fff; color: var(--text); font: inherit; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(246,196,69,.45); border-color: var(--brand); }
button, .btn { border: 0; border-radius: 10px; background: var(--brand); color: #fff; padding: 12px 16px; font-weight: 750; cursor: pointer; display: inline-block; box-shadow: 0 4px 10px rgba(18,59,138,.12); }
button:hover, .btn:hover { background: var(--brand-dark); color: #fff; opacity: .98; text-decoration: none; }
.btn.secondary { background: #fff; color: var(--brand-dark); border: 1px solid #b8c7e5; box-shadow: none; }
.btn.accent, button.accent { background: var(--accent); color: var(--brand-dark); }
.btn.accent:hover, button.accent:hover { background: var(--accent-dark); color: var(--brand-dark); }
.btn.danger { background: var(--danger); }
.form-actions { margin-top: 18px; display:flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 18px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 7px; line-height: 1.5; }
.alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; }
.alert.error { background: #fff1f0; color: var(--danger); border: 1px solid #fecdca; }
.alert.success { background: #ecfdf3; color: var(--success); border: 1px solid #abefc6; }
.alert.info { background: #edf3ff; color: var(--brand-dark); border: 1px solid #cbd8fb; }
.kpi-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 20px 0; }
.kpi { background:#fff; border:1px solid var(--border); border-top: 4px solid var(--accent); border-radius:14px; padding:18px; }
.kpi .value { font-size: 25px; font-weight: 850; margin-top: 6px; color: var(--brand-dark); overflow-wrap: anywhere; }
.kpi .label { color:var(--muted); font-size:13px; font-weight:700; }
.table-wrap { overflow-x: auto; background:#fff; border:1px solid var(--border); border-radius:14px; }
table { width:100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 13px 14px; border-bottom:1px solid #eef0f6; text-align:left; vertical-align:top; }
th { background:#edf2ff; font-size:13px; color:var(--brand-dark); }
tbody tr:nth-child(even) { background:#fbfcff; }
.badge { display:inline-block; padding:5px 9px; border-radius:999px; font-size:12px; font-weight:750; }
.badge.success { background:#ecfdf3; color:var(--success); }
.badge.warning { background:#fff7dc; color:#795900; }
.badge.danger { background:#fff1f0; color:var(--danger); }
.badge.neutral { background:#edf2ff; color:#334d85; }
.detail-list { display:grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.detail { padding: 10px 0; border-bottom:1px solid #eef0f6; overflow-wrap: anywhere; }
.detail span { display:block; color:var(--muted); font-size:12px; font-weight:650; margin-bottom:4px; }
.money { font-variant-numeric: tabular-nums; }
.footer { color:var(--muted); padding: 30px 0; font-size:13px; }
.fee-question { margin: 20px 0; padding: 14px 16px 8px; border: 1px solid var(--border); border-radius: 12px; }
.fee-question legend { padding: 0 6px; font-weight: 800; color:var(--brand-dark); }
label.choice-label { display: flex; align-items: flex-start; gap: 10px; font-weight: 550; line-height: 1.5; }
label.choice-label input[type="radio"] { width: auto; margin-top: 4px; flex: 0 0 auto; }
.fee-quote { margin-top: 18px; padding: 18px; border: 1px solid #e5c75a; background: #fffbed; border-radius: 12px; }
.fee-quote h3 { margin: 0 0 8px; }
.fee-explanation { line-height: 1.55; }
.password-field { position: relative; width: 100%; }
.password-field input { padding-right: 50px; }
.password-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #475467; border: 0; border-radius: 8px; box-shadow:none; }
.password-toggle:hover, .password-toggle:focus-visible { background: #edf2ff; color: var(--brand); opacity: 1; }
.password-toggle svg { width: 21px; height: 21px; }
.filter-grid { display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; align-items: end; }
.filter-grid label { margin-top: 0; }
.section-title { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.logo-panel { text-align:center; margin: 8px auto 14px; }
.logo-panel img { max-width: 170px; max-height: 170px; width: 100%; object-fit: contain; }
hr.brand-rule { height:4px; border:0; background:var(--accent); border-radius:4px; }
@media(max-width: 900px) { .grid, .grid-3, .kpi-grid, .detail-list, .form-grid { grid-template-columns:1fr 1fr; } .topbar .container { align-items:flex-start; } .nav { gap:12px; } }
@media(max-width: 660px) { .grid, .grid-3, .kpi-grid, .detail-list, .form-grid, .filter-grid { grid-template-columns:1fr; } .hero h1 { font-size:28px; } .topbar .container { flex-direction:column; align-items:flex-start; } .brand-logo { width:55px; height:55px; } .container { padding:18px; } .card { padding:18px; } }

.filter-form { display:grid; grid-template-columns:minmax(220px,2fr) repeat(5,minmax(130px,1fr)) auto; gap:14px; align-items:end; }
.filter-form label { margin-top:0; }
.filter-form .form-actions { margin-top:0; }
@media(max-width: 900px) { .filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width: 660px) { .filter-form { grid-template-columns:1fr; } }


/* Monetary KPIs stay inside their cards even when totals grow. */
.currency-summary-card { min-width: 0; overflow: hidden; }
.currency-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { min-width: 0; }
.kpi .money-kpi-value {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-size: clamp(12px, 1vw, 18px);
    line-height: 1.25;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
.kpi .money-kpi-value > span:first-child { flex: 0 0 auto; }
.kpi .money-kpi-value .money-amount {
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dashboard-actions { margin-bottom: 20px; }
@media (max-width: 900px) {
    .currency-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi .money-kpi-value { font-size: clamp(12px, 1.8vw, 17px); }
}
@media (max-width: 660px) {
    .currency-kpi-grid { grid-template-columns: minmax(0, 1fr); }
    .kpi .money-kpi-value { font-size: clamp(15px, 4vw, 18px); }
}

/* Super-admin-controlled delegation toggle on the administrator registration form. */
.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    line-height: 1.5;
}

.checkbox-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0.25rem;
}

/* Public regional representative cards and the site-wide developer contact footer. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }
.site-footer { margin-top: 28px; background: #fff; border-top: 4px solid var(--accent); color: var(--muted); font-size: 13px; }
.site-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.site-footer a { white-space: nowrap; }
.page-note { color: var(--muted); padding: 30px 0; font-size: 13px; }
.regional-representatives, .regional-representative { margin: 16px 0 22px; border-top: 4px solid var(--accent); }
.regional-representatives h2, .regional-representative h2 { margin-bottom: 8px; }
.regional-representative-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 14px; }
.regional-representative-item { padding: 12px; background: #f8faff; border: 1px solid var(--border); border-radius: 10px; overflow-wrap: anywhere; }
.regional-representative-selected p { margin-bottom: 0; line-height: 1.6; }
@media(max-width: 660px) {
    .site-footer-inner { align-items: flex-start; flex-direction: column; }
    .regional-representative-list { grid-template-columns: 1fr; }
}