/* Bra Koroo and Family — portal & website styles. No external assets (strict CSP). */
:root {
  --ink: #12263a;
  --ink-2: #2b4257;
  --muted: #5d6f80;
  --line: #dfe3e6;
  --line-2: #eef0f2;
  --paper: #f6f5f1;
  --card: #ffffff;
  --brand: #0d6b58;
  --brand-2: #0a5545;
  --brand-tint: #e5f2ee;
  --gold: #b88a2c;
  --gold-tint: #f7efdc;
  --red: #b23b3b;
  --red-tint: #f9e6e4;
  --amber-tint: #fff4d6;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(18, 38, 58, .06), 0 4px 16px rgba(18, 38, 58, .05);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); font-size: 15px; line-height: 1.55; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.neg { color: var(--red); }
.pos { color: var(--brand); }
.hp { position: absolute; left: -9999px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; gap: .4em; padding: .55em 1em; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-weight: 550; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { text-decoration: none; border-color: #c6ccd1; background: #fafbfb; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.btn-danger { color: var(--red); }
.btn-sm { padding: .35em .7em; font-size: .85rem; }
.btn-link { background: none; border: 0; color: var(--brand); padding: 0; font: inherit; cursor: pointer; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; }
label { display: block; font-weight: 550; font-size: .9rem; margin-bottom: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=file],
input[type=search], select, textarea {
  width: 100%; padding: .55em .7em; border: 1px solid #cfd5da; border-radius: 8px; font: inherit; color: var(--ink); background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(13, 107, 88, .25); border-color: var(--brand); }
.field { margin-bottom: 1rem; }
.field .help { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.field .errorlist, .errorlist { color: var(--red); font-size: .85rem; list-style: none; padding: 0; margin: .3rem 0 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.form-grid .span-2 { grid-column: span 2; }
.radio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; list-style: none; padding: 0; margin: 0; }
.radio-cards label { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; font-weight: 500; cursor: pointer; display: flex; gap: .5rem; align-items: flex-start; background: #fff; }
.radio-cards input { margin-top: .25rem; }
.radio-cards label:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }

/* ---------- alerts ---------- */
.alerts { margin: 0 0 1rem; padding: 0; list-style: none; }
.alert { padding: .7rem 1rem; border-radius: 8px; margin-bottom: .5rem; border: 1px solid transparent; }
.alert-success { background: var(--brand-tint); border-color: #bfe0d6; }
.alert-error { background: var(--red-tint); border-color: #efc4bf; }
.alert-warning, .alert-info { background: var(--amber-tint); border-color: #f0dca0; }

/* ---------- cards / tables ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1.25rem; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .55rem .6rem; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; border-bottom-color: var(--line); }
tr.section td { font-weight: 650; background: #fafaf8; }
tr.total td { font-weight: 650; border-top: 1px solid var(--ink-2); }
tr.grand td { font-weight: 750; border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); }
td.indent-1 { padding-left: 1.6rem; } td.indent-2 { padding-left: 2.6rem; } td.indent-3 { padding-left: 3.6rem; }
.badge { display: inline-block; padding: .12em .55em; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--line-2); color: var(--ink-2); }
.badge-green { background: var(--brand-tint); color: var(--brand-2); }
.badge-gold { background: var(--gold-tint); color: #7a5a14; }
.badge-red { background: var(--red-tint); color: var(--red); }
.empty { text-align: center; padding: 2rem 1rem; color: var(--muted); }

/* ---------- portal layout ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--ink); color: #c9d4dd; padding: 1.25rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; margin-bottom: 1.5rem; }
.brand-mark { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, var(--brand), #13906f); display: grid; place-items: center; color: #fff; font-family: var(--font); font-weight: 800; font-size: .8rem; flex: none; }
.sidebar .co { background: rgba(255,255,255,.06); border-radius: 8px; padding: .6rem .7rem; margin-bottom: 1rem; }
.sidebar .co .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #8fa2b2; }
.sidebar .co .name { color: #fff; font-weight: 600; }
.sidebar .co select { margin-top: .4rem; background: rgba(255,255,255,.1); border-color: transparent; color: #fff; padding: .35em .5em; }
.sidebar .co select option { color: var(--ink); }
.nav-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #7f93a4; margin: 1.1rem .5rem .4rem; }
.nav a { display: flex; align-items: center; gap: .6rem; color: #d6dee5; padding: .45rem .6rem; border-radius: 7px; font-size: .93rem; }
.nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.nav a.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.nav .count { margin-left: auto; background: var(--gold); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .45em; font-weight: 700; }
.main { padding: 1.5rem 2rem 3rem; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.topbar .who { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--muted); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); margin-top: .2rem; }
.menu-toggle { display: none; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.kpi .k { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kpi .v { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: .2rem; letter-spacing: -.01em; }
.kpi .d { font-size: .8rem; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; }
.grid-2 > .card { margin-bottom: 0; }
.stack > * + * { margin-top: 1.25rem; }

/* bar chart (pure CSS) */
.chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .4rem; align-items: end; height: 180px; padding-top: .5rem; border-bottom: 1px solid var(--line); }
.chart .col { display: flex; gap: 2px; align-items: flex-end; height: 100%; justify-content: center; }
.chart .bar { width: 42%; border-radius: 3px 3px 0 0; min-height: 1px; }
.chart .bar.in { background: var(--brand); }
.chart .bar.out { background: #d9b26a; }
.chart-labels { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .4rem; font-size: .72rem; color: var(--muted); text-align: center; margin-top: .3rem; }
.legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.h-0{height:0%}.h-1{height:1%}.h-2{height:2%}.h-3{height:3%}.h-4{height:4%}.h-5{height:5%}.h-6{height:6%}.h-7{height:7%}.h-8{height:8%}.h-9{height:9%}.h-10{height:10%}.h-11{height:11%}.h-12{height:12%}.h-13{height:13%}.h-14{height:14%}.h-15{height:15%}.h-16{height:16%}.h-17{height:17%}.h-18{height:18%}.h-19{height:19%}.h-20{height:20%}.h-21{height:21%}.h-22{height:22%}.h-23{height:23%}.h-24{height:24%}.h-25{height:25%}.h-26{height:26%}.h-27{height:27%}.h-28{height:28%}.h-29{height:29%}.h-30{height:30%}.h-31{height:31%}.h-32{height:32%}.h-33{height:33%}.h-34{height:34%}.h-35{height:35%}.h-36{height:36%}.h-37{height:37%}.h-38{height:38%}.h-39{height:39%}.h-40{height:40%}.h-41{height:41%}.h-42{height:42%}.h-43{height:43%}.h-44{height:44%}.h-45{height:45%}.h-46{height:46%}.h-47{height:47%}.h-48{height:48%}.h-49{height:49%}.h-50{height:50%}.h-51{height:51%}.h-52{height:52%}.h-53{height:53%}.h-54{height:54%}.h-55{height:55%}.h-56{height:56%}.h-57{height:57%}.h-58{height:58%}.h-59{height:59%}.h-60{height:60%}.h-61{height:61%}.h-62{height:62%}.h-63{height:63%}.h-64{height:64%}.h-65{height:65%}.h-66{height:66%}.h-67{height:67%}.h-68{height:68%}.h-69{height:69%}.h-70{height:70%}.h-71{height:71%}.h-72{height:72%}.h-73{height:73%}.h-74{height:74%}.h-75{height:75%}.h-76{height:76%}.h-77{height:77%}.h-78{height:78%}.h-79{height:79%}.h-80{height:80%}.h-81{height:81%}.h-82{height:82%}.h-83{height:83%}.h-84{height:84%}.h-85{height:85%}.h-86{height:86%}.h-87{height:87%}.h-88{height:88%}.h-89{height:89%}.h-90{height:90%}.h-91{height:91%}.h-92{height:92%}.h-93{height:93%}.h-94{height:94%}.h-95{height:95%}.h-96{height:96%}.h-97{height:97%}.h-98{height:98%}.h-99{height:99%}.h-100{height:100%}
.ratio-list { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ratio-list div { background: #fafaf8; border: 1px solid var(--line-2); border-radius: 8px; padding: .6rem .75rem; }
.ratio-list b { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* filters */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.filters > div { min-width: 130px; }
.filters label { font-size: .75rem; color: var(--muted); }

/* report */
.report { max-width: 860px; }
.report-head { text-align: center; margin-bottom: 1rem; }
.report-head .co { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.report-head .title { font-size: 1.05rem; font-weight: 650; }
.report-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.report-tiles a { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; color: var(--ink); box-shadow: var(--shadow); }
.report-tiles a:hover { border-color: var(--brand); text-decoration: none; }
.report-tiles h3 { color: var(--brand); margin-bottom: .3rem; }

/* messages */
.thread { display: flex; flex-direction: column; gap: .6rem; max-height: 60vh; overflow-y: auto; padding: .25rem; }
.bubble { max-width: 75%; padding: .6rem .85rem; border-radius: 12px; background: #f0f2f3; white-space: pre-wrap; word-wrap: break-word; }
.bubble.mine { align-self: flex-end; background: var(--brand-tint); }
.bubble .meta { font-size: .72rem; color: var(--muted); margin-bottom: .15rem; }

/* auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background:
  radial-gradient(1200px 500px at 10% -10%, #dcebe6 0%, transparent 60%), var(--paper); }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 2rem; }
.auth-card .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin-bottom: 1.5rem; color: var(--ink); }
.auth-card .btn-primary { width: 100%; justify-content: center; padding: .7em; }
.qr { display: block; width: 190px; height: 190px; margin: .5rem auto 1rem; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #fff; }
.secret { font-family: var(--mono); background: var(--line-2); padding: .4rem .6rem; border-radius: 6px; word-break: break-all; font-size: .85rem; text-align: center; }
.trust { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: var(--muted); margin-top: 1.25rem; justify-content: center; }

/* ---------- public website ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1rem; }
.site-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.site-brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: 1.5rem; align-items: center; }
.site-nav a { color: var(--ink-2); font-weight: 500; }
.hero { padding: 5rem 0 4rem; background: radial-gradient(900px 400px at 85% 10%, #dcebe6 0%, transparent 65%), var(--paper); }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); font-weight: 700; margin-bottom: 1rem; }
.hero h1 { font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 600; letter-spacing: -.015em; margin-bottom: 1.1rem; }
.hero p.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 36em; margin-bottom: 1.75rem; }
.hero .btn { padding: .8em 1.3em; }
.hero-panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(18,38,58,.10); padding: 1.4rem; }
.hero-panel .row { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.hero-panel .row:last-child { border-bottom: 0; font-weight: 700; border-top: 2px solid var(--ink); margin-top: .3rem; }
.hero-panel .ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.section { padding: 4.5rem 0; }
.section.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; margin-bottom: .6rem; }
.section .intro { color: var(--muted); max-width: 40em; margin-bottom: 2.25rem; font-size: 1.05rem; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.svc { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem; }
.section.alt .svc { background: var(--paper); }
.svc .n { font-family: var(--serif); color: var(--gold); font-size: 1.1rem; font-weight: 600; margin-bottom: .4rem; }
.svc h3 { font-size: 1.05rem; }
.svc p { color: var(--muted); margin: 0; font-size: .95rem; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; counter-reset: s; }
.steps li { list-style: none; border-top: 2px solid var(--brand); padding-top: 1rem; }
.steps li::before { counter-increment: s; content: "0" counter(s); font-family: var(--serif); color: var(--brand); font-weight: 600; display: block; margin-bottom: .35rem; }
.steps { padding: 0; margin: 0; }
.sec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; padding: 0; list-style: none; }
.sec-list li { padding-left: 1.6rem; position: relative; }
.sec-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.cta { background: var(--ink); color: #dfe7ee; border-radius: 16px; padding: 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta h2 { color: #fff; margin: 0 0 .3rem; }
.site-footer { padding: 2.5rem 0; color: var(--muted); font-size: .88rem; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; display: none; }
  .app.nav-open .sidebar { display: block; }
  .menu-toggle { display: inline-flex; }
  .main { padding: 1rem 1rem 2.5rem; }
  .form-grid, .svc-grid, .steps, .sec-list, .radio-cards { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .site-nav a:not(.btn) { display: none; }
  .hero { padding: 3rem 0; }
  .section { padding: 3rem 0; }
  .bubble { max-width: 90%; }
}

/* ---------- print (reports) ---------- */
@media print {
  .sidebar, .topbar, .no-print, .filters, .alerts { display: none !important; }
  .app { display: block; }
  .main { padding: 0; }
  body { background: #fff; font-size: 12px; }
  .card { box-shadow: none; border: 0; padding: 0; }
}
.gap-top { margin-top: 1.25rem; }
.chart-key-in { background: var(--brand); }
.chart-key-out { background: #d9b26a; }
.task-row { padding: .45rem 0; border-bottom: 1px solid var(--line-2); font-size: .92rem; }
.task-row:last-child { border-bottom: 0; }
#cash-h { margin-top: 1.25rem; letter-spacing: .05em; }
.form-card { max-width: 760px; }
.site-nav a.btn-primary, .site-nav a.btn-primary:hover { color: #fff; }
.grid-2 .chart { height: 300px; }
.site-nav .btn { white-space: nowrap; }

/* ---------- Books ---------- */
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recon-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.kpi-link { color: var(--ink); text-decoration: none; }
a.kpi-link:hover { border-color: var(--brand); }
.badge-blue { background: #e4eef8; color: #24527a; }
.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid-4 .span-2 { grid-column: span 2; }
table.lines td { padding: .35rem .3rem; vertical-align: middle; }
table.lines select, table.lines input { padding: .4em .5em; font-size: .9rem; }
.w-qty { width: 80px; } .w-rate { width: 130px; }
.w-qty input, .w-rate input { text-align: right; }
.lines-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: .75rem 0 1rem; flex-wrap: wrap; }
table.totals { width: auto; min-width: 260px; }
table.totals td { padding: .3rem .6rem; }
table.totals tr.grand td { font-weight: 750; border-top: 2px solid var(--ink); }
.check-row { display: flex; gap: .5rem; align-items: center; }
.check-row label { margin: 0 1rem 0 0; display: inline; }
.pay-cell { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
.pay-cell input { width: 110px; text-align: right; }
.feed-row { border-top: 1px solid var(--line-2); padding: .75rem 0; }
.feed-main { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
.feed-date { font-weight: 650; display: flex; flex-direction: column; line-height: 1.2; font-size: .9rem; }
.feed-amt { font-weight: 700; font-size: 1.02rem; }
.feed-actions { margin: .5rem 0 0 calc(56px + .75rem); display: flex; flex-direction: column; gap: .4rem; }
.feed-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto auto; gap: .4rem; align-items: center; }
.feed-add select, .feed-add input { padding: .35em .5em; }
.hidden-form { display: none; }
.feed-add .btn-link { white-space: nowrap; }
.feed-match { display: flex; gap: .6rem; align-items: center; justify-content: space-between; background: var(--brand-tint); padding: .4rem .6rem; border-radius: 8px; }
.inv-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.inv-from { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.inv-title { font-size: 1.5rem; font-weight: 800; color: var(--brand); letter-spacing: .04em; text-align: right; }
.inv-bill { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.inv-due { font-size: 1.4rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.report-wide { max-width: none; }
.stubs { display: none; }
@media print { .stubs { display: block; } .stub { break-inside: avoid; border: 1px solid #ccc !important; padding: 12px !important; margin-bottom: 12px; } }
@media (max-width: 1000px) { .form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .recon-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .feed-add { grid-template-columns: 1fr 1fr; } .kpis-3, .form-grid-4 { grid-template-columns: 1fr; } .form-grid-4 .span-2 { grid-column: auto; } .feed-actions { margin-left: 0; } }
.grid-2 > * { min-width: 0; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================
   BRA KOROO GHANAIAN HERITAGE REDESIGN
   ========================================== */

:root {
  --ink:#15324b;
  --ink-2:#29475c;
  --muted:#607486;
  --paper:#f7faf8;
  --brand:#07896b;
  --brand-2:#056b57;
  --brand-tint:#def6ed;
  --gold:#e6aa29;
  --gold-tint:#fff2cb;
  --line:#dde9e4;
  --radius:15px;
  --shadow:0 8px 30px rgba(18,50,70,.075);
}

body { background:var(--paper); }
h1,h2,h3 { letter-spacing:-.025em; }

.btn {
  border-radius:10px;
  font-weight:650;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.btn:hover {
  transform:translateY(-1px);
  box-shadow:0 5px 15px rgba(0,0,0,.07);
}
.btn-primary {
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

.site-header {
  box-shadow:0 3px 24px rgba(15,50,60,.05);
}
.site-header .wrap { min-height:76px; height:auto; padding-top:10px; padding-bottom:10px; }
.site-brand { font-size:1.2rem; }
.brand-mark {
  background:linear-gradient(135deg,#07896b,#0b5672);
  box-shadow:0 3px 12px rgba(5,115,92,.22);
}
.site-nav a { font-weight:650; }

.ghana-hero {
  position:relative;
  overflow:hidden;
  padding:90px 0;
  background:linear-gradient(115deg,#fffdf4 0%,#eaf7f2 60%,#def1e9 100%);
}
.ghana-hero-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:55px;
  align-items:center;
}
.ghana-kicker {
  font-size:.77rem;
  letter-spacing:.13em;
  font-weight:800;
  color:#07896b;
  margin-bottom:17px;
}
.ghana-hero h1 {
  font-family:var(--serif);
  font-size:clamp(2.6rem,5vw,4.5rem);
  line-height:1.12;
  font-weight:600;
  margin-bottom:25px;
  color:#15324b;
}
.ghana-hero h1 em {
  color:#07896b;
  font-style:normal;
}
.ghana-hero p {
  font-size:1.1rem;
  color:#426073;
  line-height:1.8;
}
.ghana-hero .btn { padding:14px 22px; }
.ghana-trust {
  margin-top:35px;
  font-size:.9rem !important;
  font-weight:650;
}
.ghana-pattern {
  position:absolute;
  width:180px;
  height:180px;
  right:-55px;
  top:-55px;
  border:25px double rgba(230,170,41,.25);
  transform:rotate(45deg);
  border-radius:25px;
}
.ghana-art {
  min-height:390px;
  position:relative;
  border-radius:35px;
  background:linear-gradient(145deg,#088a70,#124f71);
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 25px 50px rgba(18,60,70,.15);
}
.ghana-art:before {
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  border:35px double rgba(255,221,125,.2);
  transform:rotate(45deg);
}
.ghana-art-symbol {
  font:700 13rem var(--serif);
  color:#f3c25f;
  text-shadow:0 15px 30px rgba(0,0,0,.13);
}
.ghana-art-card {
  position:absolute;
  bottom:23px;
  right:22px;
  background:#fff;
  border-radius:14px;
  padding:17px 20px;
  width:min(265px,80%);
  box-shadow:0 15px 35px rgba(0,0,0,.15);
}
.ghana-art-card small {
  color:#07896b;
  font-weight:800;
  letter-spacing:.1em;
}
.ghana-art-card strong { display:block; margin:7px 0; }
.ghana-bars { display:flex; align-items:end; gap:8px; height:40px; }
.ghana-bars i { flex:1; background:#e6aa29; border-radius:5px 5px 0 0; }
.ghana-bars i:nth-child(1) { height:35%; }
.ghana-bars i:nth-child(2) { height:55%; }
.ghana-bars i:nth-child(3) { height:45%; }
.ghana-bars i:nth-child(4) { height:82%; }
.ghana-bars i:nth-child(5) { height:100%; }
.ghana-stripe {
  height:14px;
  background:repeating-linear-gradient(90deg,
    #cf3434 0 25px,#f0bd40 25px 50px,
    #07896b 50px 75px,#15324b 75px 100px);
}
.ghana-services { background:#fff; }
.ghana-section-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.ghana-controls { display:flex; gap:10px; }
.ghana-controls button {
  width:45px;
  height:45px;
  border:1px solid #cfe3da;
  background:#fff;
  border-radius:50%;
  font-size:28px;
  color:#087f65;
  cursor:pointer;
}
.ghana-controls button:hover { background:#e2f5ec; }
.ghana-slider {
  border:1px solid #e0ebe7;
  border-radius:23px;
  overflow:hidden;
  box-shadow:0 14px 38px rgba(20,55,65,.08);
  margin-top:20px;
}
.ghana-slide {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:340px;
  background:#fff;
}
.ghana-slide[hidden] { display:none !important; }
.ghana-slide-graphic {
  background:linear-gradient(135deg,#087f65,#164f79);
  position:relative;
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ghana-slide-graphic.theme-even {
  background:linear-gradient(135deg,#185f9b,#078e88);
}
.ghana-slide-graphic:before {
  content:"";
  position:absolute;
  height:250px;
  width:250px;
  border:30px double rgba(255,222,137,.24);
  transform:rotate(45deg);
  border-radius:35px;
}
.ghana-symbol {
  color:#ffd578;
  font:700 9rem var(--serif);
  position:relative;
  z-index:1;
}
.ghana-graphic-bars {
  display:flex;
  align-items:end;
  gap:10px;
  height:55px;
  width:140px;
  z-index:1;
}
.ghana-graphic-bars i {
  flex:1;
  background:#fff4d2;
  border-radius:5px 5px 0 0;
}
.ghana-graphic-bars i:nth-child(1) {height:35%}
.ghana-graphic-bars i:nth-child(2) {height:60%}
.ghana-graphic-bars i:nth-child(3) {height:48%}
.ghana-graphic-bars i:nth-child(4) {height:95%}
.ghana-slide-copy {
  align-self:center;
  padding:clamp(25px,5vw,65px);
}
.ghana-slide-copy h3 {
  font:600 clamp(1.8rem,3vw,2.7rem)/1.2 var(--serif);
  color:#17344e;
}
.ghana-slide-copy p {
  color:#526b7b;
  font-size:1.07rem;
  line-height:1.75;
}
.ghana-slide-copy a { font-weight:750; }
.ghana-slider-bottom {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  padding:15px;
  font-weight:700;
  color:#436578;
}
.ghana-slider-bottom button {
  background:none;
  border:0;
  color:#07896b;
  text-decoration:underline;
  cursor:pointer;
}
.ghana-all-services { text-align:center; padding-top:20px; }
.ghana-process { background:#f0f8f4; }
.ghana-process .steps li {
  border:1px solid #dcebe4;
  border-top:5px solid #07896b;
  background:#fff;
  padding:20px;
  border-radius:12px;
  box-shadow:var(--shadow);
}
.ghana-process .steps li:nth-child(2) {border-top-color:#1782c5}
.ghana-process .steps li:nth-child(3) {border-top-color:#e6aa29}
.ghana-process .steps li:nth-child(4) {border-top-color:#d96e54}
.ghana-cta {
  background:linear-gradient(115deg,#14324d,#077966);
  padding:45px;
}
.ghana-cta .ghana-kicker {color:#ffd578}

/* Portal styling */
.sidebar {background:linear-gradient(180deg,#133750,#0c2a40)}
.nav a {border-radius:9px;padding:10px 12px}
.nav a.active {
  background:#087f65;
  color:#fff;
}
.nav-group {color:#c3a86c;font-weight:750}
.main {background:#f6faf8}
.card,.kpi {
  border-radius:15px;
  box-shadow:var(--shadow);
  border-color:#e1ece7;
}
.kpi {border-top:4px solid #07896b}
.kpi:nth-child(2) {border-top-color:#2488cf}
.kpi:nth-child(3) {border-top-color:#e6aa29}
.kpi:nth-child(4) {border-top-color:#d8765e}
.kpi .v {font-size:1.7rem}
th {background:#eef7f2;color:#244e61}
input:focus,select:focus,textarea:focus {
  outline:2px solid #a8dcca;
  border-color:#07896b;
}
.btn:focus-visible,a:focus-visible,button:focus-visible {
  outline:3px solid #e6aa29;
  outline-offset:3px;
}

@media(max-width:850px) {
  .ghana-hero-grid,.ghana-slide {grid-template-columns:1fr}
  .ghana-art {min-height:320px}
  .ghana-hero {padding:55px 0}
  .ghana-slide-graphic {min-height:230px}
}
@media(max-width:600px) {
  .ghana-hero h1 {font-size:2.6rem}
  .ghana-art-symbol {font-size:9rem}
  .ghana-cta {padding:25px}
  .ghana-slide-copy {padding:25px}
}
@media print {
  .ghana-controls,.ghana-slider-bottom {display:none}
}

/* ===== BK PORTAL DESIGN V2 ===== */

/* Portal background and typography */
.app {
  --portal-navy: #12334b;
  --portal-green: #07896b;
  --portal-gold: #e7ae35;
  background: #f3f8f7;
  color: #17354c;
}

.app .main {
  background:
    radial-gradient(circle at 100% 0%,
      rgba(7,137,107,.07),transparent 35%),
    #f3f8f7;
  min-height: 100vh;
  padding: 28px 34px 65px;
}

.app h1,
.app h2 {
  color: #15334d;
}

.app .page-head h1 {
  font-family: var(--serif);
  font-size: clamp(1.7rem,3vw,2.3rem);
  font-weight: 700;
}

.app .page-head {
  padding-bottom: 16px;
  border-bottom: 1px solid #e1ebe7;
}

/* Elegant sidebar */
.app .sidebar {
  background: linear-gradient(
    180deg,#123950,#102c42 70%,#0b2538
  );
  border-right: 3px solid #d9ab48;
  padding: 24px 15px;
}

.app .sidebar .brand {
  color: #fff;
  font-size: 1.12rem;
  line-height: 1.35;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}

.app .sidebar .brand-mark {
  background: linear-gradient(135deg,#0aac81,#078367);
  border: 1px solid rgba(255,255,255,.25);
}

.app .nav-group {
  color: #f2c46d;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .1em;
  margin-top: 21px;
}

.app .nav a {
  color: #e3eff0;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 3px 0;
  transition: background .18s,color .18s;
}

.app .nav a:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.app .nav a.active {
  background: #07896b;
  color: #fff;
  font-weight: 750;
  box-shadow: inset 3px 0 #f5c35b;
}

/* Header */
.app .topbar {
  background: #fff;
  border: 1px solid #e0ebe7;
  border-radius: 14px;
  padding: 12px 17px;
  box-shadow: 0 5px 18px rgba(18,55,75,.04);
  margin-bottom: 25px;
}

/* Cards */
.app .card,
.app .kpi,
.app .report-tiles a {
  background: #fff;
  border: 1px solid #e0ebe7;
  border-radius: 16px;
  box-shadow: 0 9px 26px rgba(15,55,70,.06);
}

.app .card {
  padding: 24px;
}

.app .kpi {
  padding: 22px;
  border-top: 4px solid #07896b;
}

.app .kpi:nth-child(4n+2) {
  border-top-color: #218bd0;
}

.app .kpi:nth-child(4n+3) {
  border-top-color: #e7ae35;
}

.app .kpi:nth-child(4n+4) {
  border-top-color: #e47760;
}

.app .kpi .k {
  color: #526e7f;
  font-weight: 750;
}

.app .kpi .v {
  font-size: clamp(1.35rem,2vw,1.85rem);
  color: #163750;
  overflow-wrap: anywhere;
}

/* Buttons */
.app .btn {
  border-radius: 10px;
  font-weight: 700;
}

.app .btn-primary {
  background: #07896b;
  border-color: #07896b;
  color: #fff;
}

.app .btn-primary:hover {
  background: #066b55;
  border-color: #066b55;
}

/* Professional tables */
.app .table-wrap {
  border-radius: 10px;
  overflow-x: auto;
}

.app th {
  background: #eaf5f0;
  color: #244d61;
  font-weight: 800;
}

.app td {
  border-bottom-color: #e9efec;
}

.app tbody tr:hover {
  background: #f6fbf9;
}

/* Forms */
.app input:not([type=checkbox]):not([type=radio]),
.app select,
.app textarea {
  border-color: #d4e5df;
  border-radius: 9px;
  background: #fff;
}

.app input:focus,
.app select:focus,
.app textarea:focus {
  border-color: #07896b;
  outline: 2px solid rgba(7,137,107,.2);
}

/* Financial reporting */
.app .chart .bar.in {
  background: #07896b;
}

.app .chart .bar.out {
  background: #e7ae35;
}

.app .report-tiles a:hover {
  border-color: #07896b;
  box-shadow: 0 12px 30px rgba(7,137,107,.1);
}

/* Mobile layout */
@media(max-width:760px) {
  .app .main {
    padding: 15px 13px 36px;
  }
  .app .topbar {
    padding: 12px;
  }
  .app .card {
    padding: 16px;
  }
  .app .kpis {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width:420px) {
  .app .kpis {
    grid-template-columns: 1fr;
  }
}

/* Preserve clean printed financial reports */
@media print {
  .app .main {
    background: #fff;
    padding: 0;
  }
  .app .card,
  .app .kpi {
    box-shadow: none;
  }
}

/* ===== BK STAFF SCREENS V1 ===== */

.bk-staff-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:28px;
}
.bk-overline {
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  color:#07896b;
  margin-bottom:10px;
}
.bk-staff-heading h1 {
  font:700 clamp(1.8rem,3vw,2.5rem)/1.2 var(--serif);
  color:#14344d;
  margin-bottom:8px;
}
.bk-staff-heading p,
.bk-card-heading p,
.bk-form-title p {
  color:#627788;
  margin:0;
}
.bk-staff-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:26px;
}
.bk-staff-stat {
  position:relative;
  border-radius:17px;
  padding:23px;
  border:1px solid #dceae4;
  background:#fff;
  box-shadow:0 8px 24px rgba(14,49,67,.06);
}
.bk-staff-stat.green {border-top:5px solid #07896b}
.bk-staff-stat.blue {border-top:5px solid #2389cd}
.bk-staff-stat.gold {border-top:5px solid #e6aa29}
.bk-staff-stat span,
.bk-staff-stat small {
  display:block;
  color:#5d7381;
}
.bk-staff-stat strong {
  display:block;
  margin:8px 0;
  font-size:1.8rem;
  color:#153850;
  overflow-wrap:anywhere;
}
.bk-stat-symbol {
  color:#07896b;
  font-size:1.7rem;
}
.bk-staff-stat.blue .bk-stat-symbol {color:#2389cd}
.bk-staff-stat.gold .bk-stat-symbol {color:#d79c19}
.bk-directory {margin-bottom:22px}
.bk-card-heading h2 {
  font:700 1.4rem var(--serif);
  margin-bottom:5px;
}
.bk-search {
  margin-top:22px;
  align-items:end;
}
.bk-search > div:first-child {
  flex:1;
  min-width:180px;
}
.bk-empty-state {
  text-align:center;
  padding:55px 18px;
}
.bk-empty-icon {
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  width:75px;
  height:75px;
  border-radius:50%;
  color:#07896b;
  font-size:2.3rem;
  background:#def5e9;
}
.bk-empty-state h2 {
  font:700 1.6rem var(--serif);
}
.bk-empty-state p {
  color:#607788;
  max-width:420px;
  margin:10px auto 22px;
}
.bk-onboard-banner {
  display:flex;
  align-items:center;
  gap:20px;
  background:linear-gradient(110deg,#143b52,#087c65);
  color:#fff;
  border-radius:17px;
  padding:25px;
  margin-bottom:25px;
}
.bk-onboard-icon {
  color:#ffd16d;
  font-size:2.6rem;
}
.bk-onboard-banner strong {font-size:1.15rem}
.bk-onboard-banner p {
  margin:5px 0 0;
  color:#e1f2ee;
}
.bk-client-form {max-width:900px}
.bk-form-section {margin-bottom:30px}
.bk-form-section + .bk-form-section {
  border-top:1px solid #e0eae6;
  padding-top:28px;
}
.bk-form-title {
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:24px;
}
.bk-form-title h2 {
  font:700 1.3rem var(--serif);
  margin-bottom:4px;
}
.bk-form-number {
  display:grid;
  place-items:center;
  flex:0 0 44px;
  height:44px;
  border-radius:12px;
  background:#e1f5eb;
  color:#07896b;
  font-weight:800;
}
.bk-form-actions {
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  padding-top:22px;
  border-top:1px solid #e1ece6;
}
@media(max-width:900px) {
  .bk-staff-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:560px) {
  .bk-staff-stats {grid-template-columns:1fr}
  .bk-onboard-banner {padding:18px}
  .bk-empty-state {padding:30px 10px}
}