/* =========================================================
   KENEWA October 2026 design for the members area, committee area,
   sign-in page and guides. Loaded LAST (after css/theme-karibu.css),
   it points the Karibu colour and font names at the new palette, so
   these pages match the public website (css/kenewa.css).
   Remove its line from a page to go back to Karibu.
   ========================================================= */
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
    --kb-forest: #14532D;       /* forest green */
    --kb-pine: #102A24;         /* deep charcoal-green */
    --kb-emerald: #1F7A45;
    --kb-sun: #D99A18;          /* warm gold (used with charcoal text, 6.4:1) */
    --kb-sun-hover: #C48912;
    --kb-sun-soft: #FBF2DD;
    --kb-navy: #1F2933;         /* charcoal */
    --kb-ink: #1F2933;
    --kb-slate: #4A5560;
    --kb-mint: #EAF1EA;
    --kb-mint-2: #FAF8F2;       /* soft cream */
    --kb-foam: #EAF1EA;
    --kb-rule: #E5E0D2;
    --kb-red: #B42318;
    --kb-shadow: 0 1px 2px rgba(16, 42, 36, .04), 0 10px 30px -12px rgba(16, 42, 36, .14);
    --kb-shadow-lg: 0 2px 4px rgba(16, 42, 36, .04), 0 24px 50px -20px rgba(16, 42, 36, .25);
    --kb-font: "Inter", "Segoe UI", system-ui, sans-serif;
    --kb-head: "Manrope", "Segoe UI", system-ui, sans-serif;
    --kb-swash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11C40 4 92 3 197 6' fill='none' stroke='%23D99A18' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
    --hb-maize-light: #EDB548;
    --hb-on-dark: #E8EFEA;
}
body { font-family: var(--kb-font); font-weight: 400; color: var(--kb-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .section-title, .page-hero h1, .footer-name, .hb-subhead, .hb-card h3, .hb-plan h3,
body.app .app-main h1, body.app .view > h1, body.app .pg-head h1, body.app h2, body.app h3, body.app h4 {
    font-family: var(--kb-head) !important; font-weight: 700 !important; letter-spacing: -.015em !important; }
h1, h2, .section-title, body.app .app-main h1, body.app .pg-head h1 { color: var(--kb-forest); }
.btn { border-radius: 999px !important; font-family: var(--kb-head); font-weight: 650; }
::selection { background: var(--kb-sun-soft); color: var(--kb-ink); }
:focus-visible { outline: 3px solid var(--kb-forest) !important; outline-offset: 2px; }
body.app, body.auth { background: var(--kb-mint-2); }
body.app .panel, body.app .card, body.auth .auth-card { border-radius: 20px !important; }

/* =========================================================
   Members area, committee area and sign-in pages, in detail
   (overrides the Karibu shapes: no gradients, no stripes or dots,
   green for the main action, gold and red only as small accents)
   ========================================================= */
:root {
    --kn-beads: repeating-linear-gradient(90deg, #14532D 0 14px, transparent 14px 18px, #D99A18 18px 24px, transparent 24px 28px,
        #14532D 28px 42px, transparent 42px 46px, #B42318 46px 52px, transparent 52px 56px, #14532D 56px 70px, transparent 70px 74px,
        #1F2933 74px 80px, transparent 80px 84px);
    --kn-beads-dark: repeating-linear-gradient(90deg, #E8EFEA 0 14px, transparent 14px 18px, #D99A18 18px 24px, transparent 24px 28px,
        #E8EFEA 28px 42px, transparent 42px 46px, #E06A5F 46px 52px, transparent 52px 56px);
    --kn-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23D99A18' stroke-width='1'%3E%3Cpath d='M20 2 38 20 20 38 2 20z'/%3E%3Cpath d='M20 12l8 8-8 8-8-8z'/%3E%3C/g%3E%3C/svg%3E");
}

/* page headings */
body.app .app-main h1, body.app .view > h1, body.app .pg-head h1 { color: var(--kb-forest) !important; font-weight: 750 !important; letter-spacing: -.025em !important; }
body.app .lead, body.app .muted, body.app .text-muted { color: var(--kb-slate) !important; }

/* the side menu: deep charcoal-green, a bead band on top, no dots */
@media (min-width: 992px) {
    body.app .side { background: var(--kb-pine) !important; }
    body.app .side::before { background: var(--kn-beads-dark) !important; height: 5px !important; opacity: .95; }
    body.app .side::after { content: none !important; }
    .side-brand { background: var(--kb-pine) !important; top: 5px !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .side-brand strong { font-family: var(--kb-head) !important; font-weight: 800 !important; letter-spacing: .02em !important; }
    body.app .side .side-label { color: #9FB7AE !important; font-family: var(--kb-font); font-weight: 600 !important; letter-spacing: .04em !important; text-transform: none !important; font-size: .78rem !important; }
    body.app .side button, body.app .side .side-link { color: #E8EFEA !important; border-radius: 12px !important; }
    body.app .side button:hover, body.app .side .side-link:hover { background: rgba(255, 255, 255, .07) !important; }
    body.app .side button.on { background: #FAF8F2 !important; color: var(--kb-forest) !important; box-shadow: inset 4px 0 0 var(--kb-sun) !important; font-weight: 650; }
    body.app .side .count { background: var(--kb-sun) !important; color: var(--kb-pine) !important; font-weight: 700; }
    .side-help { background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px !important; }
    .side-me .ui-av { background: #EAF1EA !important; color: var(--kb-forest) !important; }
}
.app-top { background: rgba(250, 248, 242, .94) !important; box-shadow: none !important; border-bottom: 1px solid var(--kb-rule); }
@media (max-width: 991.98px) {
    .app-top, .pt-head { background: var(--kb-pine) !important; border-bottom: 0; }
    .app-top::before, .pt-head::before { background: var(--kn-beads-dark) !important; height: 4px !important; }
}
.drawer { border-top-color: var(--kb-forest) !important; }
.ui-av, .top-av, .me-av { background: #EAF1EA !important; color: var(--kb-forest) !important; }

/* practice-account banner: soft gold, not loud */
.demo-bar, .demo-banner, #demo-bar { background: var(--kb-sun-soft) !important; color: var(--kb-ink) !important; border-bottom: 1px solid #EFDDB0 !important; }
.demo-bar a, .demo-banner a, #demo-bar a { color: var(--kb-forest) !important; }

/* cards and panels: white, 20px corners, a fine border and a soft shadow */
body.app .panel, body.app .card, .home-steps, .glance-card, .svc-dir-grid, .td-inbox, .td-cal, .ui-table-box, .cm-section, .wa-card, .ht, .sd, .ov-card {
    border-radius: 20px !important; box-shadow: 0 1px 2px rgba(16, 42, 36, .04), 0 10px 30px -14px rgba(16, 42, 36, .14) !important; }
body.app .panel, body.app .card, .ht, .glance-card:not(.fee-card), .wa-card, .ov-card, .home-steps, .td-inbox, .td-cal, .ui-table-box, .cm-section, .sd { border: 1px solid var(--kb-rule) !important; }
.ht:hover { transform: translateY(-2px); }
/* quick tiles: only the KENEWA colours (green, gold, red) */
.ht .ht-ic, .ht:nth-of-type(n) .ht-ic { background: #EAF1EA !important; color: var(--kb-forest) !important; border-radius: 14px !important; }
.ht:nth-of-type(2) .ht-ic, .ht:nth-of-type(5) .ht-ic { background: #FBF2DD !important; color: #7A5308 !important; }
.ht:nth-of-type(1) .ht-ic { background: #FCEDEB !important; color: var(--kb-red) !important; }

/* the membership card, fees card and welfare fund balance: flat forest green, a bead band, a faint kanga pattern */
.home-card, .fee-card, .td-fund { background: var(--kb-forest) !important; border-radius: 22px !important; position: relative; overflow: hidden; isolation: isolate;
    box-shadow: 0 2px 4px rgba(16, 42, 36, .05), 0 24px 50px -24px rgba(16, 42, 36, .45) !important; }
.home-card::before, .td-fund::before, .mc-stripe { background: var(--kn-beads-dark) !important; height: 5px !important; }
.home-card::after, .fee-card::after, .td-fund::after { content: "" !important; position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; z-index: -1; pointer-events: none;
    background: var(--kn-lattice) 0 0 / 34px 34px !important; opacity: .1; -webkit-mask: linear-gradient(120deg, transparent 40%, #000) !important; mask: linear-gradient(120deg, transparent 40%, #000) !important; }
.home-card .hc-name { font-family: var(--kb-head) !important; font-weight: 750 !important; letter-spacing: -.02em; }

/* buttons: green for the main action everywhere; gold is not used for buttons */
.btn-maize, .hb-primary, .kb-btn-sun,
.k-hero .btn-maize, .page-hero .btn-maize, .page-hero .btn-gold, .section-dark .btn-gold, .cta .btn-gold, .cta .btn-maize, .donate-band .btn-gold,
.home-head-acts .btn-gold, .td-acts .btn-gold, .ui-bulk .btn-gold, .sheet-acts .btn-gold, .home-card .btn-maize, .choose-featured .btn-gold,
.btn-gold, .btn-green, .btn-success, .btn-primary {
    background: var(--kb-forest) !important; border: 1.5px solid var(--kb-forest) !important; color: #fff !important; box-shadow: none !important; }
.btn-maize:hover, .hb-primary:hover, .kb-btn-sun:hover, .page-hero .btn-gold:hover, .page-hero .btn-maize:hover, .home-head-acts .btn-gold:hover, .td-acts .btn-gold:hover,
.ui-bulk .btn-gold:hover, .sheet-acts .btn-gold:hover, .choose-featured .btn-gold:hover, .home-card .btn-maize:hover,
.btn-gold:hover, .btn-green:hover, .btn-success:hover, .btn-primary:hover { background: #0F4223 !important; border-color: #0F4223 !important; color: #fff !important; }
/* on the green cards the main button is white */
.home-card .btn-maize, .home-card .btn-gold, .fee-card .btn-gold, .fee-card .btn-maize, .td-fund .btn-gold, .auth-intro .btn-gold {
    background: #fff !important; border-color: #fff !important; color: var(--kb-forest) !important; }
.home-card .btn-maize:hover, .home-card .btn-gold:hover, .fee-card .btn-gold:hover, .td-fund .btn-gold:hover { background: #FAF8F2 !important; border-color: #FAF8F2 !important; color: var(--kb-forest) !important; }
.btn-outline-ink, body.app .btn-outline-ink { background: #fff !important; border: 1.5px solid var(--kb-forest) !important; color: var(--kb-forest) !important; border-radius: 999px !important; }
.btn-outline-ink:hover, .btn-outline-ink:focus-visible { background: #EAF1EA !important; color: var(--kb-forest) !important; }
.btn-help, .btn-damu { background: var(--kb-red) !important; border: 1.5px solid var(--kb-red) !important; color: #fff !important; }
.kb-arrow::after, .kb-go::after { content: none !important; }

/* forms */
body.app .form-control, body.app .form-select, body.auth .form-control, body.auth .form-select {
    border: 1.5px solid #D3CCB9 !important; border-radius: 12px !important; min-height: 48px; }
body.app .form-control:focus, body.app .form-select:focus, body.auth .form-control:focus, body.auth .form-select:focus {
    border-color: var(--kb-forest) !important; box-shadow: 0 0 0 3px rgba(20, 83, 45, .18) !important; }
.form-check-input:checked { background-color: var(--kb-forest) !important; border-color: var(--kb-forest) !important; }

/* tables, tabs, segmented buttons, pills */
.ui-table th { border-bottom: 2px solid var(--kb-forest) !important; color: var(--kb-forest) !important; font-family: var(--kb-head); font-weight: 700; }
.ui-table tbody tr:hover { background: #FAF8F2; }
.ui-seg button[aria-pressed="true"], .ui-seg .on { background: var(--kb-forest) !important; border-color: var(--kb-forest) !important; color: #fff !important; }
.ui-tabs [aria-selected="true"], .tabs .on { color: var(--kb-forest) !important; border-color: var(--kb-forest) !important; }

/* sign-in pages: deep green panel with the bead band and the kanga pattern, no stripes or dots */
.auth-intro { background: var(--kb-pine) !important; }
.auth-intro::before { content: "" !important; right: 0 !important; bottom: auto !important; left: 0 !important; top: 0 !important; width: auto !important; height: 5px !important; aspect-ratio: auto !important; border-radius: 0 !important;
    background: var(--kn-beads-dark) !important; -webkit-mask: none !important; mask: none !important; opacity: 1 !important; z-index: 1 !important; }
.auth-intro::after { width: 100% !important; height: 100% !important; background: var(--kn-lattice) 0 0 / 40px 40px !important; opacity: .08; }

/* guides: the public pages' header and footer colours */
.kb-topbar { background: var(--kb-pine) !important; }
.kb-footer { background: var(--kb-pine) !important; color: #B8C9C1 !important; }
.kb-footer a, .kb-footer h2, .kb-footer h3, .kb-footer strong { color: #E8EFEA !important; }
.page-hero.kb-banner, .kb-banner { background: var(--kb-pine) !important; }

/* details */
.pt-head, .app-top { box-shadow: none !important; }
.welcome-hi { font-family: var(--kb-head) !important; color: var(--kb-forest) !important; font-weight: 750 !important; letter-spacing: -.025em !important; }
.avatar, .pt-account-btn .avatar { background: #EAF1EA !important; color: var(--kb-forest) !important; }
@media (max-width: 991.98px) { .pt-account-btn .avatar, .app-top .avatar { background: #FAF8F2 !important; color: var(--kb-forest) !important; } }
.drawer-head, .profile-band { background: var(--kb-pine) !important; }