/* ============================================================
   Branch Microfinance - Oceanic Theme
   Palette: Oceanic Teal #0E7C86 | Deep Navy #0A2540 | White/White Smoke
   Radius: 2px | Soft app-like shadows | Clean margins
   Load AFTER app.min.css to override the base template.
   ============================================================ */

:root {
    --brand-teal: #0E7C86;
    --brand-teal-dark: #0A5C64;
    --brand-navy: #0A2540;
    --brand-navy-soft: #123352;
    --brand-smoke: #F5F7FA;
    --brand-border: #E3ECEF;
    --brand-radius: 2px;
}

/* ---------- Base ---------- */
body {
    background: var(--brand-smoke) !important;
    color: var(--brand-navy);
}

html, body { overflow-x: hidden; }

a { color: var(--brand-teal); }
a:hover { color: var(--brand-teal-dark); }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--brand-radius) !important; }
.btn-primary {
    background-color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-teal-dark) !important;
    border-color: var(--brand-teal-dark) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
}
.btn-outline-primary:hover {
    background-color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    color: #fff !important;
}
.btn-info {
    background-color: #1B8A96 !important;
    border-color: #1B8A96 !important;
}
.btn-outline-secondary { color: var(--brand-navy); border-color: #CBD8DE; }

/* ---------- Text / badges ---------- */
.text-primary { color: var(--brand-teal) !important; }
.bg-primary { background-color: var(--brand-teal) !important; }
.bg-soft-primary { background-color: rgba(14, 124, 134, 0.12) !important; color: var(--brand-teal) !important; }
.badge { border-radius: var(--brand-radius) !important; }
.badge.bg-info { background-color: #1B8A96 !important; }
.badge.bg-primary { background-color: var(--brand-teal) !important; }

/* ---------- Cards (app-like) ---------- */
.card {
    border-radius: var(--brand-radius) !important;
    border: 1px solid var(--brand-border) !important;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.05), 0 10px 30px rgba(10, 37, 64, 0.04) !important;
    background: #fff;
}
.card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--brand-border) !important;
    color: var(--brand-navy);
    font-weight: 600;
}

/* ---------- Tables ---------- */
.table thead th {
    background-color: #EFF6F8 !important;
    color: var(--brand-navy) !important;
    border-bottom: 2px solid var(--brand-teal) !important;
    font-weight: 600;
}
.table tbody tr:hover { background-color: #F5F9FA !important; }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text {
    border-radius: var(--brand-radius) !important;
    border-color: #C9D8DE;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 0.18rem rgba(14, 124, 134, 0.15) !important;
}
.form-label { color: var(--brand-navy); font-weight: 500; }

/* ---------- Navigation / topbar ---------- */
.nav-tabs .nav-link.active {
    color: var(--brand-teal) !important;
    border-color: var(--brand-border) var(--brand-border) #fff !important;
    font-weight: 600;
}
.nav-pills .nav-link.active {
    background-color: var(--brand-teal) !important;
}

/* ---------- Modals / dropdowns ---------- */
.modal-content {
    border-radius: 4px !important;
    border: none !important;
    box-shadow: 0 24px 70px rgba(10, 37, 64, 0.25) !important;
}
.modal-header { border-bottom: 1px solid var(--brand-border); }
.modal-footer { border-top: 1px solid var(--brand-border); }
.dropdown-menu {
    border-radius: var(--brand-radius) !important;
    border-color: var(--brand-border) !important;
    box-shadow: 0 10px 34px rgba(10, 37, 64, 0.12) !important;
}
.dropdown-item:hover, .dropdown-item:focus { background-color: #F0F7F9; }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--brand-radius) !important; border: none !important; }

/* ---------- Pagination ---------- */
.pagination .page-link { color: var(--brand-navy) !important; border-radius: var(--brand-radius) !important; }
.pagination .page-item.active .page-link {
    background-color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    color: #fff !important;
}

/* ---------- Progress ---------- */
.progress { border-radius: var(--brand-radius) !important; background-color: #E8F0F2; }
.progress-bar { background-color: var(--brand-teal) !important; }

/* ---------- Page title ---------- */
.page-title-box .page-title, .page-title-box h4 {
    color: var(--brand-navy) !important;
    font-weight: 700;
}

/* ---------- Stats / metric cards ---------- */
.stat-label, .metric-title { color: #6B7F8C !important; }

/* ---------- Sidebar (navy app rail) ---------- */
.vertical-menu {
    background: linear-gradient(180deg, #0A2540 0%, #0D2E4D 55%, #0A2540 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 4px 0 24px rgba(10, 37, 64, 0.18) !important;
}
.vertical-menu .menu-title {
    color: #7FA6BD !important;
    letter-spacing: 1px;
}
.vertical-menu .user-profile h4,
.vertical-menu .user-profile .role-badge {
    color: #FFFFFF !important;
}
.vertical-menu #sidebar-menu ul li a {
    color: #C9DEE9 !important;
}
.vertical-menu #sidebar-menu ul li a:hover {
    color: #FFFFFF !important;
    background-color: rgba(14, 124, 134, 0.35) !important;
}
.vertical-menu #sidebar-menu ul li.active > a,
.vertical-menu #sidebar-menu ul li.mm-active > a {
    background-color: var(--brand-teal) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}
.vertical-menu #sidebar-menu ul li.active > a i,
.vertical-menu #sidebar-menu ul li.mm-active > a i {
    color: #FFFFFF !important;
}
.vertical-menu #sidebar-menu ul ul.sub-menu {
    background-color: transparent !important;
    border-left: 2px solid rgba(14, 124, 134, 0.5);
}
.vertical-menu #sidebar-menu ul ul li a { color: #A9C6D6 !important; }
.vertical-menu #sidebar-menu ul ul li a:hover { color: #fff !important; }

/* ---------- Print (no blank sections, tight margins) ---------- */
@media print {
    .no-print, .btn, .dropdown-menu, .pagination, .filter-bar,
    .page-title-box .page-title-right, .topbar-right, .notification-dropdown,
    .breadcrumb, .modal, .alert, .sidebar, .vertical-menu, #page-topbar {
        display: none !important;
    }
    .main-content { margin-left: 0 !important; }
    .page-content { padding: 0 !important; margin: 0 !important; }
    .card {
        box-shadow: none !important;
        border: 1px solid #C9D8DE !important;
        break-inside: avoid;
    }
    body { background: #fff !important; }
    .table thead th {
        background-color: #EFF6F8 !important;
        color: var(--brand-navy) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}