/* ==========================================================
   Sanduku brand theme
   Grounded in the VICOBA cash box: deep trunk green, aged
   brass hardware, ledger-paper cream. Loaded after Bootstrap
   so these rules override the framework defaults.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --brand-trunk: #1F4B3F;
    --brand-trunk-dark: #163A31;
    --brand-brass: #B8863B;
    --brand-brass-dark: #96702E;
    --brand-cream: #EFE9DA;
    --brand-cream-dark: #E4DFD3;
    --brand-ink: #2B2622;
    --brand-clay: #A3402C;
    --brand-clay-dark: #85331F;
    --brand-moss: #4C7A3D;
    --brand-moss-dark: #3C6230;
    --brand-slate: #3E6B8A;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--brand-ink);
    background-color: #F7F5EF;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .brand-wordmark, .card-header, .table thead th {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---------- Brand mark (navbar / login) ---------- */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.brand-mark svg {
    flex-shrink: 0;
}
.brand-wordmark {
    font-size: 1.35rem;
    line-height: 1;
}
.navbar-dark .brand-wordmark {
    color: #FBF8F1;
}
.business-model-badge {
    margin-left: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.35em 0.75em;
    vertical-align: middle;
    text-decoration: none;
}
a.business-model-badge:hover {
    opacity: 0.85;
    text-decoration: none;
}
.business-model-vicoba_sacco {
    background-color: #B8863B; /* brass — matches the app's existing accent color */
    color: #1F4B3F;
}
.business-model-microfinance {
    background-color: #4A7A6B; /* a distinct teal-green, clearly different from the brass VICOBA badge at a glance */
    color: #FBF8F1;
}

/* ---------- Navbar / primary brand color ---------- */
.navbar.bg-dark,
nav.bg-dark {
    background-color: var(--brand-trunk) !important;
}

/* ---------- Links ---------- */
a {
    color: var(--brand-trunk);
}
a:hover {
    color: var(--brand-trunk-dark);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: var(--brand-trunk);
    border-color: var(--brand-trunk);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-trunk-dark);
    border-color: var(--brand-trunk-dark);
}
.btn-outline-primary {
    color: var(--brand-trunk);
    border-color: var(--brand-trunk);
}
.btn-outline-primary:hover {
    background-color: var(--brand-trunk);
    border-color: var(--brand-trunk);
}
.btn-success { background-color: var(--brand-moss); border-color: var(--brand-moss); }
.btn-success:hover { background-color: var(--brand-moss-dark); border-color: var(--brand-moss-dark); }
.btn-danger { background-color: var(--brand-clay); border-color: var(--brand-clay); }
.btn-danger:hover { background-color: var(--brand-clay-dark); border-color: var(--brand-clay-dark); }
.btn-warning { background-color: var(--brand-brass); border-color: var(--brand-brass); color: #fff; }
.btn-warning:hover { background-color: var(--brand-brass-dark); border-color: var(--brand-brass-dark); color: #fff; }
.btn-outline-danger { color: var(--brand-clay); border-color: var(--brand-clay); }
.btn-outline-danger:hover { background-color: var(--brand-clay); border-color: var(--brand-clay); }
.btn-outline-success { color: var(--brand-moss); border-color: var(--brand-moss); }
.btn-outline-success:hover { background-color: var(--brand-moss); border-color: var(--brand-moss); }
.btn-outline-warning { color: var(--brand-brass-dark); border-color: var(--brand-brass); }
.btn-outline-warning:hover { background-color: var(--brand-brass); border-color: var(--brand-brass); color: #fff; }
.btn-outline-info { color: var(--brand-slate); border-color: var(--brand-slate); }
.btn-outline-info:hover { background-color: var(--brand-slate); border-color: var(--brand-slate); }
.btn-outline-secondary:hover { background-color: var(--brand-ink); border-color: var(--brand-ink); }
.btn-outline-dark { color: var(--brand-ink); border-color: var(--brand-ink); }
.btn-outline-dark:hover { background-color: var(--brand-ink); border-color: var(--brand-ink); }

/* ---------- Status semantics (badges + solid backgrounds) ---------- */
.badge-success, .bg-success { background-color: var(--brand-moss) !important; }
.badge-warning, .bg-warning { background-color: var(--brand-brass) !important; color: #fff !important; }
.badge-danger, .bg-danger   { background-color: var(--brand-clay) !important; }
.badge-info, .bg-info       { background-color: var(--brand-slate) !important; }
.badge-secondary            { background-color: #8B8478 !important; }

/* ---------- Sidebar ---------- */
nav.bg-light {
    background-color: #FBFAF5 !important;
    border-right: 1px solid var(--brand-cream-dark);
}
nav.bg-light .nav-link {
    color: var(--brand-ink);
    border-radius: 6px;
    margin: 1px 8px;
    padding: 0.55rem 0.9rem;
    font-size: 0.93rem;
}
nav.bg-light .nav-link:hover {
    background-color: var(--brand-cream);
    color: var(--brand-trunk-dark);
}
nav.bg-light .nav-link i {
    width: 18px;
    text-align: center;
}

/* ---------- Sidebar: collapsible group chevrons ---------- */
nav.bg-light [data-toggle="collapse"] .fa-chevron-down {
    transition: transform 0.2s ease;
}
nav.bg-light [data-toggle="collapse"][aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}
nav.bg-light .nav-link.active {
    color: var(--brand-trunk-dark);
    background-color: var(--brand-cream);
}
.card {
    border: 1px solid var(--brand-cream-dark);
    box-shadow: none;
    border-radius: 6px;
}
.card-header {
    background-color: var(--brand-cream);
    border-bottom: 1px solid var(--brand-cream-dark);
    font-size: 1rem;
}

/* Elevation reserved for things that actually float above the page */
.modal-content {
    border: none;
    box-shadow: 0 12px 40px rgba(43, 38, 34, 0.22);
    border-radius: 8px;
}
.toast {
    box-shadow: 0 6px 20px rgba(43, 38, 34, 0.18);
}

/* ---------- Tables: ledger feel ---------- */
.table thead th {
    background-color: var(--brand-cream);
    border-bottom: 2px solid var(--brand-trunk);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(239, 233, 218, 0.35);
}

/* DataTables plugin controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--brand-cream-dark);
    border-radius: 4px;
}
.dataTables_wrapper .page-item.active .page-link {
    background-color: var(--brand-trunk);
    border-color: var(--brand-trunk);
}
.dataTables_wrapper .page-link {
    color: var(--brand-trunk);
}

/* ---------- Forms ---------- */
.form-control:focus {
    border-color: var(--brand-trunk);
    box-shadow: 0 0 0 0.2rem rgba(31, 75, 63, 0.15);
}

/* ---------- Login / portal login page ---------- */
.login-wrapper {
    background-color: #F7F5EF;
}
.login-topbar {
    background-color: var(--brand-trunk);
    padding: 1.1rem 0;
    text-align: center;
}
.login-topbar .brand-mark {
    justify-content: center;
}
.login-wrapper .login-card-title {
    text-align: center;
    color: var(--brand-ink);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}
.login-wrapper .login-tagline {
    text-align: center;
    color: #6B6459;
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}
.login-wrapper .card {
    border: none;
    box-shadow: 0 12px 40px rgba(31, 75, 63, 0.15);
    border-radius: 10px;
}