/* SMART FRIENDS Financial Management System - Main Stylesheet */

:root {
    --primary-color: #1a472a;
    --secondary-color: #2d6a4f;
    --accent-color: #f4a261;
    --light-color: #f8f9fa;
    --dark-text: #2c3e50;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --info-color: #3498db;
    /* Fixed navbar heights — used for body padding-top */
    --navbar-h:  52px;
    --subnav-h:  34px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: var(--dark-text);
    background-color: var(--light-color);
}

body {
    display: flex;
    flex-direction: column;
}

table {
    font-size: 11px;
}

.card-header { font-size: 11.5px; }
.btn          { font-size: 11px; }
.badge        { font-size: 10px; }
h1 { font-size: 1.15rem !important; }
h4 { font-size: 1rem   !important; }
h5 { font-size: 0.88rem !important; }
h6 { font-size: 0.8rem  !important; }
.stat-value  { font-size: 1rem !important; }
.form-label  { font-size: 11px; }
.form-control, .form-select { font-size: 11.5px; padding: 4px 8px; height: auto; }

/* ===== NAVBAR ===== */
.navbar {
    background: linear-gradient(135deg, #0d2b1a 0%, #1a472a 45%, #245c36 100%);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
    padding: 0.45rem 1.2rem;
    border-bottom: 2px solid #e8b923; /* gold accent trim */
    /* Fixed: always visible regardless of scroll container */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1031;
    /* Allow dropdowns to show below the fixed navbar */
    overflow: visible !important;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: white !important;
    display: flex;
    align-items: center;
    gap: 7px;
}

.navbar-brand i {
    font-size: 1.2rem;
}

.navbar a:not(.dropdown-item), .navbar .nav-link:not(.dropdown-item) {
    color: #ffffff !important;          /* Full white — no more faint text */
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: color 0.3s ease;
}

.navbar .nav-link:not(.dropdown-item):hover {
    color: var(--accent-color) !important;
    text-shadow: none;
}

/* Dropdown ndani ya navbar: maandishi meusi kwenye background nyeupe */
.navbar .dropdown-menu {
    background-color: #ffffff !important;
    z-index: 1060;   /* above fixed navbars */
    /* Desktop: cap height so long menus scroll instead of overflow screen */
    max-height: min(calc(100vh - 90px), 520px);
    overflow-y: auto;
    overflow-x: hidden;
    /* thin custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #c8d8c8 transparent;
}
.navbar .dropdown-menu::-webkit-scrollbar {
    width: 4px;
}
.navbar .dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}
.navbar .dropdown-menu::-webkit-scrollbar-thumb {
    background: #b8ccb8;
    border-radius: 4px;
}
/* Compact sf-dd-item inside the main navbar (not subnav) */
.navbar .dropdown-menu .sf-dd-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 12px !important;
}
.navbar .dropdown-menu .sf-dd-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    flex-shrink: 0;
}
.navbar .dropdown-menu .sf-dd-text strong {
    font-size: 12px !important;
}
.navbar .dropdown-menu .sf-dd-text small {
    font-size: 10px !important;
}
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu a.dropdown-item {
    color: #1a1a1a !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    opacity: 1 !important;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: #f0f7f0 !important;
    color: var(--primary-color) !important;
}
.navbar .dropdown-menu .dropdown-item.text-danger,
.navbar .dropdown-menu a.text-danger {
    color: #dc3545 !important;
}
.navbar .dropdown-menu .dropdown-item.text-danger:hover {
    background-color: #fff5f5 !important;
    color: #b02a37 !important;
}

.navbar .badge {
    margin-left: 5px;
}

/* ── Kitufe cha Logout daima kinaonekana mobile (karibu na toggler) ── */
.sf-mobile-logout {
    display: none;   /* desktop: ficha */
}
@media (max-width: 991.98px) {
    .sf-mobile-logout {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: #fff !important;
        background: rgba(220,53,69,.85);
        border: 1.5px solid rgba(255,255,255,.35);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin-right: 6px;
        text-decoration: none !important;
        flex-shrink: 0;
        transition: background .2s;
    }
    .sf-mobile-logout:hover {
        background: #b02a37 !important;
        color: #fff !important;
    }
}

/* ── Mobile navbar collapse: panel ndogo inayoscrolla ── */
@media (max-width: 991.98px) {

    /* Collapse = overlay ndogo chini ya navbar, scrollable */
    .navbar .navbar-collapse.show,
    .navbar .navbar-collapse.collapsing {
        position: fixed !important;
        top: var(--navbar-h);
        left: 0;
        right: 0;
        width: 100% !important;
        max-height: calc(100vh - var(--navbar-h)) !important;
        overflow-y: auto  !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(160deg, #0d2b1a 0%, #1a472a 60%, #245c36 100%);
        border-top: 2px solid #e8b923;
        padding: 6px 14px 14px !important;
        z-index: 1030;
        box-shadow: 0 8px 28px rgba(0,0,0,.35);
    }

    /* Nav links ndani ya collapse — punguza urefu */
    .navbar .navbar-collapse.show .navbar-nav .nav-link {
        padding: 6px 10px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* Dropdown ya mtumiaji — static, hakuna float */
    .navbar .dropdown-menu {
        position: static !important;
        float: none !important;
        max-height: 55vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: none !important;
        border: 1px solid rgba(255,255,255,.2) !important;
        background: rgba(255,255,255,.97) !important;
        margin: 3px 0 6px !important;
        border-radius: 8px !important;
        scrollbar-width: thin;
        scrollbar-color: #c8d8c8 transparent;
    }

    /* Dropdown items — fupi zaidi */
    .navbar .dropdown-menu .dropdown-item,
    .navbar .dropdown-menu a.dropdown-item {
        font-size: 11.5px !important;
        padding: 4px 12px !important;
    }

    /* sf-dd-item on mobile — compact */
    .navbar .dropdown-menu .sf-dd-item {
        padding: 4px 12px !important;
        gap: 7px !important;
    }
    .navbar .dropdown-menu .sf-dd-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
    }

    /* Dividers nyembamba */
    .navbar .dropdown-menu .dropdown-divider {
        margin: 2px 0 !important;
    }
}

.nav-pills .nav-link.active {
    background-color: var(--accent-color);
    color: var(--primary-color) !important;
}

/* ===== SIDEBAR ===== */
.sidebar {
    background: var(--light-color);
    border-right: 1px solid #dee2e6;
    padding: 2rem 1rem;
    min-height: calc(100vh - 70px);
}

.sidebar .nav-link,
.sidebar .nav-link:link,
.sidebar .nav-link:visited,
.sidebar a.nav-link {
    /* Hard-coded color — immune to Bootstrap 5.3 dark-mode variable overrides */
    color: #2c3e50 !important;
    opacity: 1 !important;
    /* Reset all Bootstrap color-related CSS variables */
    --bs-nav-link-color: #2c3e50;
    --bs-nav-link-hover-color: var(--primary-color);
    --bs-nav-link-opacity: 1;
    --bs-link-color: #2c3e50;
    --bs-link-color-rgb: 44, 62, 80;

    padding: 0.6rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.25rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    text-decoration: none !important;
    background-color: transparent;
}

.sidebar .nav-link:hover {
    background-color: rgba(26, 71, 42, 0.1);
    color: var(--primary-color) !important;
    transform: translateX(4px);
}

.sidebar .nav-link.active,
.sidebar .nav-link.active:focus,
.sidebar .nav-link.active:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(26, 71, 42, 0.3);
    transform: none;
}

/* Sidebar section title */
.sidebar .nav-link i {
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    letter-spacing: 0.5px;
}

/* ── Collapsible sidebar groups ───────────────────────────────────────────── */
.sidebar-group { margin-bottom: 2px; }

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 16px 7px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--secondary-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: background .18s, color .18s;
    margin-top: 10px;
    margin-bottom: 2px;
    gap: 6px;
    text-decoration: none !important;
}

.sidebar-group-toggle:hover {
    background: rgba(26, 71, 42, 0.08);
    color: var(--primary-color);
}

.sidebar-group-toggle .sg-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.sidebar-group-toggle .sg-left i.sg-icon {
    width: 18px;
    text-align: center;
    font-size: 0.82rem;
    flex-shrink: 0;
    color: var(--secondary-color);
}

.sidebar-group-toggle .sg-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.sidebar-group-toggle .sg-chevron {
    font-size: 9px;
    color: #bbb;
    transition: transform .25s ease;
}

/* Chevron points down when OPEN, right when closed */
.sidebar-group-toggle[aria-expanded="true"] .sg-chevron {
    transform: rotate(0deg);
}
.sidebar-group-toggle[aria-expanded="false"] .sg-chevron {
    transform: rotate(-90deg);
}

/* badge on group toggle — visible when section is collapsed */
.sidebar-group-toggle .sg-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
}

/* Indent links inside group */
.sidebar-group .group-links {
    padding-left: 8px;
}

/* Sidebar toggle button (mobile) */
.sidebar-mobile-toggle {
    display: none;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background .2s;
}
.sidebar-mobile-toggle:hover { background: rgba(255,255,255,.22); }

@media (max-width: 768px) {
    .sidebar-mobile-toggle { display: inline-flex; align-items: center; gap: 6px; }
    .sidebar {
        width: 100% !important;
        padding: 0.8rem 1rem;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
    #sidebarCollapseWrap { padding-top: 6px; }
}

/* ══ SUBNAV — responsive navbar below main navbar ═══════════════════════════ */
.sf-subnav {
    background: linear-gradient(to bottom, #f8fdfb 0%, #edf7f1 100%);
    border-top: 1px solid #cde8d7;
    border-bottom: 3px solid #1a472a;
    box-shadow: 0 5px 18px rgba(26,71,42,.18);
    /* Fixed: always below the fixed main navbar */
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1019;
    padding: 0;
    /* CRITICAL: overflow must be visible so dropdown menus are not clipped */
    overflow: visible !important;
}

/* Mobile brand label (shows current section) */
.sf-subnav-brand {
    font-size: 11px;
    font-weight: 700;
    color: #1a472a;
    padding: 3px 4px;
    flex: 1;
    letter-spacing: .2px;
}

/* Mobile toggler */
.sf-subnav-toggler {
    border: 1.5px solid #1a472a !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    color: #1a472a !important;
    font-size: 11px;
    background: rgba(26,71,42,.07) !important;
    transition: all .2s;
}
.sf-subnav-toggler:hover, .sf-subnav-toggler:focus {
    background: #1a472a !important;
    color: #ffffff !important;
    border-color: #1a472a !important;
    outline: none !important;
    box-shadow: none !important;
}
.sf-subnav-toggler[aria-expanded="true"] {
    background: #1a472a !important;
    color: #e8b923 !important;
}
.sf-subnav-toggler[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
    display: inline-block;
    transition: transform .25s;
}
.sf-subnav-toggler .fa-chevron-down {
    transition: transform .25s;
}

/* Desktop: items in a horizontal row */
.sf-subnav .sf-subnav-list {
    flex-wrap: nowrap;
    gap: 3px;
    padding: 5px 4px;
    margin: 0;
}

/* Nav items */
.sf-subnav .nav-item { flex-shrink: 0; }

/* Nav links (shared desktop + mobile base styles) */
.sf-subnav .nav-link {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 5px 13px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;                        /* white text — always bright */
    text-decoration: none !important;
    border: none !important;
    background: linear-gradient(135deg, #1e5c34 0%, #2d7a4f 60%, #3a9463 100%) !important;
    cursor: pointer;
    border-radius: 20px !important;                   /* pill shape */
    transition: background .2s, box-shadow .2s, transform .15s;
    white-space: nowrap;
    line-height: 1;
    /* Permanent glow — visible before any hover */
    box-shadow: 0 3px 10px rgba(26,71,42,.38), 0 1px 3px rgba(0,0,0,.18);
    text-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.sf-subnav .nav-link:hover,
.sf-subnav .nav-link[aria-expanded="true"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #245c36 0%, #1a472a 60%, #163d23 100%) !important;
    box-shadow: 0 5px 18px rgba(26,71,42,.55), 0 2px 6px rgba(0,0,0,.22) !important;
    transform: translateY(-1px);
}
.sf-subnav .nav-item.sf-active > .nav-link,
.sf-subnav .nav-link.sf-active {
    color: #1a1a1a !important;
    background: linear-gradient(135deg, #f5c842 0%, #e8b923 60%, #d4a510 100%) !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(232,185,35,.60), 0 2px 5px rgba(0,0,0,.15) !important;
    text-shadow: none;
    transform: none;
}

/* Badge inside nav-link */
.sf-subnav .nav-link .sf-badge {
    background: #dc3545;
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 700;
    line-height: 1.4;
}
.sf-subnav .nav-link .sf-badge-warn { background: #e8b923; color: #1a1a1a; }

.sf-subnav .nav-link.dropdown-toggle::after {
    border-top-width: 4px;
    margin-left: 3px;
    opacity: .85;
    filter: brightness(2);  /* always white arrow on green bg */
}

/* Dropdown menus — desktop: appear below, mobile: static (inline) */
.sf-subnav .dropdown-menu {
    min-width: 215px;
    border-radius: 10px;
    border: 1px solid #d4e6d9;
    box-shadow: 0 8px 24px rgba(26,71,42,.15);
    padding: 6px 0;
    font-size: 12px;
    margin-top: 4px !important;
    z-index: 1060;   /* above all fixed navbars */
    background: #ffffff;
    /* Desktop: cap so long menus scroll */
    max-height: min(calc(100vh - 120px), 480px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c8d8c8 transparent;
}
.sf-subnav .dropdown-menu::-webkit-scrollbar { width: 4px; }
.sf-subnav .dropdown-menu::-webkit-scrollbar-thumb { background: #b8ccb8; border-radius: 4px; }
.sf-subnav .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 16px !important;
    color: #1e3a28 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}
.sf-subnav .dropdown-item:hover {
    background: #f0f7f0 !important;
    color: #1a472a !important;
}
.sf-subnav .dropdown-item i { width: 14px; text-align: center; color: #1a472a; }
.sf-subnav .dropdown-item .ms-auto { margin-left: auto !important; }
.sf-subnav .dropdown-divider { margin: 4px 0; border-color: #e2ece5; }

/* ── Desktop: base — icons shown only on large screens (set by breakpoints above) ── */
@media (min-width: 768px) {
    .sf-subnav .nav-link > i { display: none !important; } /* overridden at 1400px+ */
}

/* ── Mobile subnav (< md = 768px) — ID selector kwa nguvu kubwa zaidi kuliko Bootstrap ── */
@media (max-width: 767px) {

    #sfSubnav .container-fluid { padding: 4px 10px !important; }

    /* ═══ Panel inayofunguka ═══ */
    #sfSubnav .navbar-collapse,
    #sfSubnav .navbar-collapse.show,
    #sfSubnav .collapse.show {
        background: linear-gradient(to bottom, #edf7f1 0%, #e0f2e9 100%) !important;
        border-top: 2px solid #1a472a !important;
        max-height: 78vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px 10px 16px !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
    }

    /* ═══ Orodha ya vitu ═══ */
    #sfSubnav .sf-subnav-list {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 5px !important;
        display: flex !important;
    }

    #sfSubnav .nav-item { width: 100% !important; }

    /* ═══ KILA NAV-LINK = KIBONYE KINACHONG'AA DAIMA ═══ */
    #sfSubnav .navbar-nav .nav-link,
    #sfSubnav .navbar-nav > li > a,
    #sfSubnav .navbar-nav > li > button {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 13px 18px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        background: linear-gradient(135deg, #1e5c34 0%, #2d7a4f 60%, #3a9463 100%) !important;
        border: none !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        /* Permanent glow on mobile too */
        box-shadow: 0 3px 10px rgba(26,71,42,.40), 0 1px 4px rgba(0,0,0,.18) !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.20);
        transition: background .15s, box-shadow .2s !important;
        white-space: nowrap;
        line-height: 1.3;
        margin-bottom: 0;
    }

    /* Hover / bonyeza */
    #sfSubnav .navbar-nav .nav-link:hover,
    #sfSubnav .navbar-nav .nav-link:active,
    #sfSubnav .navbar-nav .nav-link[aria-expanded="true"],
    #sfSubnav .navbar-nav > li > button:hover,
    #sfSubnav .navbar-nav > li > button[aria-expanded="true"] {
        background: linear-gradient(135deg, #163d23 0%, #1a472a 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 5px 18px rgba(26,71,42,.55) !important;
    }

    /* Ukurasa unaofanya kazi — dhahabu */
    #sfSubnav .nav-item.sf-active > .nav-link,
    #sfSubnav .nav-item.sf-active > button.nav-link,
    #sfSubnav .navbar-nav .nav-link.sf-active {
        background: linear-gradient(135deg, #f5c842 0%, #e8b923 60%, #d4a510 100%) !important;
        color: #1a1a1a !important;
        text-shadow: none;
        box-shadow: 0 4px 14px rgba(232,185,35,.55), 0 2px 5px rgba(0,0,0,.12) !important;
    }

    /* Ikoni — zionyeshwe daima kwenye mobile */
    #sfSubnav .navbar-nav .nav-link > i,
    #sfSubnav .navbar-nav > li > button > i {
        display: inline-block !important;
        width: 22px !important;
        text-align: center !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
        color: inherit !important;
    }

    /* Caret ya dropdown — upande wa kulia */
    #sfSubnav .navbar-nav .nav-link.dropdown-toggle::after,
    #sfSubnav .navbar-nav button.dropdown-toggle::after {
        margin-left: auto !important;
        opacity: .7;
    }

    /* ═══ Dropdown menu — inline chini ya kichwa ═══ */
    #sfSubnav .dropdown-menu,
    #sfSubnav .dropdown-menu.show {
        position: static !important;
        display: none;
        box-shadow: 0 2px 10px rgba(26,71,42,.12) !important;
        border: 1px solid #d4e6d9 !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        padding: 4px 0 4px 10px !important;
        margin: 5px 0 2px 0 !important;
        width: 100% !important;
        min-width: unset !important;
        float: none !important;
        transform: none !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin;
        scrollbar-color: #b8ccb8 transparent;
    }
    #sfSubnav .dropdown-menu.show { display: block !important; }

    /* Dropdown items */
    #sfSubnav .dropdown-item,
    #sfSubnav .dropdown-menu a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #1e3a28 !important;
        background: transparent !important;
        border-radius: 8px !important;
        border-bottom: none !important;
        margin-bottom: 1px;
    }
    #sfSubnav .dropdown-item:hover,
    #sfSubnav .dropdown-item:active {
        background: #f0f7f0 !important;
        color: #1a472a !important;
    }
    #sfSubnav .dropdown-item i { color: #1a472a !important; width: 16px; text-align: center; flex-shrink: 0; }
    #sfSubnav .sf-dd-text small { color: #6b7280 !important; font-size: 10px; display: block; }
    #sfSubnav .dropdown-header,
    #sfSubnav .sf-dh { color: #6b7280 !important; font-size: 10px !important; padding: 4px 12px !important; }
    #sfSubnav .dropdown-divider { border-color: #e2ece5 !important; margin: 3px 0 !important; }

    /* Badge */
    #sfSubnav .nav-link .sf-badge { background: #dc3545 !important; color: #fff !important; }
    #sfSubnav .nav-link .sf-badge-warn { background: #e8b923 !important; color: #1a1a1a !important; }
}

/* ══ DESKTOP SIDEBAR — sf-subnav inaonekana kushoto kama sidebar ══════════════ */
@media (min-width: 992px) {

    /* 1. Body: top-padding ya navbar peke yake; kushoto ya sidebar */
    body.sf-app {
        padding-top: var(--navbar-h) !important;
        padding-left: 220px !important;
    }

    /* 2. sf-subnav = sidebar ya kushoto, fixed */
    .sf-subnav {
        top: var(--navbar-h) !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: 220px !important;
        height: auto !important;
        border-right: 2px solid #b6dfc5 !important;
        border-bottom: none !important;
        border-top: 1px solid #cde8d7 !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
        box-shadow: 2px 0 10px rgba(26,71,42,.13) !important;
    }

    /* 3. Container-fluid: wima */
    .sf-subnav .container-fluid {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px 4px 20px !important;
        overflow-x: visible !important;
    }

    /* 4. Ficha brand na kitufe cha kubonyeza (mobile tu) */
    .sf-subnav .sf-subnav-brand,
    .sf-subnav .sf-subnav-toggler {
        display: none !important;
    }

    /* 5. Onyesha vitu vya nav daima bila kubonyeza */
    #sfSubnavItems,
    .sf-subnav .navbar-collapse {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        overflow-x: visible !important;
        overflow-y: auto !important;
    }

    /* 6. Orodha ya vitu: wima */
    .sf-subnav .sf-subnav-list {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 2px !important;
    }

    /* 7. Nav-item: upana kamili */
    .sf-subnav .nav-item {
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* 8. Nav-link: upana kamili, sidebar style */
    .sf-subnav .nav-link {
        width: 100% !important;
        border-radius: 8px !important;
        padding: 9px 12px !important;
        font-size: 11px !important;
        justify-content: flex-start !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    /* 9. Onyesha icons kwenye sidebar */
    .sf-subnav .nav-link > i {
        display: inline-block !important;
        width: 18px;
        text-align: center;
        flex-shrink: 0;
    }

    /* 10. Dropdown inafunguka upande wa kulia */
    .sf-subnav .dropdown-menu {
        top: 0 !important;
        left: 100% !important;
        right: auto !important;
        margin-top: 0 !important;
        margin-left: 4px !important;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ===== MAIN LAYOUT ===== */

/* Mobile: Push content below navbar + subnav; Desktop: sidebar handles layout above */
body.sf-app {
    padding-top: calc(var(--navbar-h) + var(--subnav-h));
    overflow-x: hidden; /* prevent body-level horizontal scroll; each table wrapper handles its own */
}

.main-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden; /* contain children — tables scroll within their own wrappers */
}

/* Sidebar hidden: main-content takes full width */
.sidebar { display: none !important; }

.main-content {
    flex: 1;
    padding: 1rem 1.25rem;
    overflow-y: auto;   /* vertical scroll for the page */
    overflow-x: hidden; /* no body-level horizontal scroll — table wrappers scroll independently */
    min-width: 0;       /* allows flex child to shrink below content width */
}

@media (max-width: 768px) {
    .main-wrapper { flex-direction: column; }
}

/* ── Member accordion table ─────────────────────────────────────────────── */
.member-acc-row {
    cursor: pointer;
    transition: background .15s;
}
.member-acc-row:hover { background: #f5fbf5 !important; }
.member-acc-row td:first-child { padding-left: 10px !important; }
.member-acc-expand-btn {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #1a472a;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, background .2s;
    flex-shrink: 0;
}
.member-acc-row.expanded .member-acc-expand-btn {
    transform: rotate(180deg);
    background: #1a472a;
    color: #fff;
    border-color: #1a472a;
}
.member-acc-detail-row { display: none; }
.member-acc-detail-row.show { display: table-row; }
.member-acc-detail-row td {
    background: linear-gradient(135deg, #f8faf8 0%, #f0f7f0 100%) !important;
    padding: 10px 16px !important;
    border-top: none !important;
}
.member-acc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.member-chip {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.member-chip i { color: #888; font-size: 10px; }
.member-chip strong { color: #1a472a; }

/* ===== CARDS ===== */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.11);
    transform: none;
}

.card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    padding: 0.65rem 1rem;
    border: none;
    font-weight: 600;
}

/* card-body — comfortable breathing room */
.card-body {
    padding: 0.9rem 1rem !important;
}

.card-title {
    margin: 0;
    font-weight: 600;
    color: var(--primary-color);
}

/* ===== STAT CARDS ===== */
.stat-card {
    background: white;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.09);
    transition: all 0.2s ease;
    border-left: 3px solid var(--accent-color);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transform: translateY(-3px);
}

/* Colored variants — gradient backgrounds with white text */
.stat-card.primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-left: none;
}
.stat-card.success {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    border-left: none;
}
.stat-card.danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-left: none;
}
.stat-card.warning {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
    border-left: none;
}
.stat-card.info {
    background: linear-gradient(135deg, #3498db 0%, #2176ae 100%);
    border-left: none;
}

/* White text for all colored variants */
.stat-card.primary .stat-label,
.stat-card.primary .stat-value,
.stat-card.primary .stat-icon,
.stat-card.success .stat-label,
.stat-card.success .stat-value,
.stat-card.success .stat-icon,
.stat-card.danger .stat-label,
.stat-card.danger .stat-value,
.stat-card.danger .stat-icon,
.stat-card.warning .stat-label,
.stat-card.warning .stat-value,
.stat-card.warning .stat-icon,
.stat-card.info .stat-label,
.stat-card.info .stat-value,
.stat-card.info .stat-icon {
    color: #fff !important;
    opacity: 1;
}

.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #7f8c8d;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 0.15rem;
    line-height: 1.2;
}

.stat-icon {
    font-size: 1.5rem;
    /* Default: dark icon for plain-white cards */
    color: rgba(0,0,0,0.10);
    float: right;
    margin-top: -2px;
}

/* Coloured/gradient cards — icon should be semi-visible white */
.stat-card.primary .stat-icon,
.stat-card.success .stat-icon,
.stat-card.danger  .stat-icon,
.stat-card.warning .stat-icon,
.stat-card.info    .stat-icon,
.stat-dark         .stat-icon {
    color: rgba(255,255,255,0.55) !important;
}

/* Generic class for custom-gradient stat cards (used via inline background) */
.stat-dark,
.stat-dark *,
.stat-dark .stat-label,
.stat-dark .stat-value,
.stat-dark .stat-icon,
.stat-dark small,
.stat-dark div,
.stat-dark strong,
.stat-dark span {
    color: #fff !important;
    opacity: 1 !important;
}
.stat-dark .stat-label {
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    font-weight: 700;
    letter-spacing: 0.6px;
}
.stat-dark .stat-value {
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    font-weight: 800;
}
.stat-dark .sf-sub {
    color: rgba(255,255,255,0.95) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.stat-dark .stat-icon {
    color: rgba(255,255,255,0.65) !important;
    text-shadow: none;
}

/* ===== DROPDOWN MENU ===== */
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18) !important;
    border-radius: 10px !important;
    padding: 6px 0 !important;
    min-width: 200px;
}
.dropdown-item {
    color: #1a1a1a !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 9px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    transition: background 0.15s, color 0.15s;
    opacity: 1 !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f0f7f0 !important;
    color: var(--primary-color) !important;
}
.dropdown-item.text-danger {
    color: #dc3545 !important;
}
.dropdown-item.text-danger:hover {
    background-color: #fff5f5 !important;
    color: #b02a37 !important;
}
.dropdown-divider {
    border-color: rgba(0,0,0,0.08) !important;
    margin: 4px 0 !important;
}
.dropdown-menu .dropdown-item i {
    width: 16px;
    text-align: center;
    color: inherit !important;
    opacity: 0.75;
}

/* ===== BUTTONS ===== */
.btn {
    border: none;
    border-radius: 6px;
    padding: 0.38rem 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 71, 42, 0.3);
}

.btn-secondary {
    background-color: var(--accent-color);
    color: white;
}

.btn-secondary:hover {
    background-color: #f39206;
    color: white;
}

.btn-success {
    background-color: var(--success-color);
    color: white;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-sm {
    padding: 0.28rem 0.65rem;
    font-size: 10.5px;
}

.btn-lg {
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
}

/* ===== FORMS ===== */
.form-control, .form-select {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 7px 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    height: auto;
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(26, 71, 42, 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.3rem;
}

.input-group-text {
    background-color: var(--light-color);
    border-color: #dee2e6;
    font-weight: 600;
    color: var(--primary-color);
}

/* ===== TABLES ===== */
.table {
    font-size: 11px;
}

.table thead {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
}

.table thead th {
    border: none;
    padding: 8px 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
}

.table tbody td {
    padding: 7px 10px;
    border-color: #e0e0e0;
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: rgba(26, 71, 42, 0.05);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(26, 71, 42, 0.02);
}

/* ===== BADGES ===== */
.badge {
    padding: 3px 8px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 10px;
}

.badge.bg-success {
    background-color: var(--success-color) !important;
}

.badge.bg-danger {
    background-color: var(--danger-color) !important;
}

.badge.bg-warning {
    background-color: var(--warning-color) !important;
    color: white;
}

.badge.bg-info {
    background-color: var(--info-color) !important;
}

/* ===== PAGINATION ===== */
.pagination {
    gap: 5px;
}

.page-link {
    border: 1px solid #dee2e6;
    color: var(--primary-color);
    border-radius: 6px;
}

.page-link:hover {
    background-color: var(--light-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.page-link.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ===== ALERTS ===== */
.alert {
    border: none;
    border-radius: 8px;
    border-left: 4px solid;
}

.alert-success {
    background-color: #d4edda;
    border-left-color: var(--success-color);
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-left-color: var(--danger-color);
    color: #721c24;
}

.alert-warning {
    background-color: #fff3cd;
    border-left-color: var(--warning-color);
    color: #856404;
}

.alert-info {
    background-color: #d1ecf1;
    border-left-color: var(--info-color);
    color: #0c5460;
}

/* ===== MODAL ===== */
.modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    font-size: 11.5px;
}

.modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 0.75rem 1.1rem;
}

.modal-body {
    padding: 0.9rem 1.1rem;
}

.modal-footer {
    padding: 0.6rem 1.1rem;
}

.modal-title {
    font-weight: 700;
    font-size: 0.9rem;
}

.btn-close {
    filter: brightness(0) invert(1);
}

/* ===== LOADING SPINNER ===== */
.spinner-border {
    color: var(--primary-color);
}

/* ===== CHARTS ===== */
.chart-container {
    position: relative;
    background: white;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
    margin-bottom: 0.6rem;
}

/* ===== LOGIN PAGE ===== */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.login-form {
    background: white;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 400px;
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo i {
    font-size: 3rem;
    color: var(--primary-color);
}

.login-logo h1 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.login-logo p {
    color: #7f8c8d;
    font-size: 0.9rem;
}

/* ===== DASHBOARD PAGE ===== */
.dashboard-header {
    margin-bottom: 0.75rem;
}

.dashboard-header h1 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.page-subtitle {
    color: #7f8c8d;
    font-size: 0.75rem;
}

/* ===== MEMBER CARD ===== */
.member-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.member-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}

.member-avatar {
    width: 100%;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    position: relative;
}

.member-info {
    padding: 0.6rem 0.75rem;
}

.member-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--primary-color);
    margin-bottom: 0.2rem;
}

.member-id {
    color: #7f8c8d;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
}

.member-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid #e0e0e0;
}

.member-stat {
    text-align: center;
}

.member-stat-label {
    font-size: 9px;
    color: #7f8c8d;
    text-transform: uppercase;
    font-weight: 600;
}

.member-stat-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 0.1rem;
}

/* ===== FINANCIAL STATUS ===== */
.financial-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

/* ===== OVERDUE ALERT ===== */
.overdue-item {
    background: #fff3cd;
    border-left: 3px solid var(--warning-color);
    padding: 0.35rem 0.6rem;
    border-radius: 5px;
    margin-bottom: 0.4rem;
}

.overdue-item.danger {
    background: #f8d7da;
    border-left-color: var(--danger-color);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    /* Adjust fixed navbar heights for mobile */
    :root { --navbar-h: 46px; --subnav-h: 34px; }

    html, body { font-size: 11px; }

    .main-content {
        padding: 0.75rem;
    }

    .sidebar {
        padding: 0.5rem;
        min-height: auto;
    }

    .sidebar .nav-link {
        padding: 0.4rem 0.6rem;
        font-size: 11px;
    }

    .login-form {
        padding: 1.5rem;
    }

    .stat-card {
        padding: 0.45rem 0.6rem;
        margin-bottom: 0.4rem;
    }

    .stat-value {
        font-size: 0.95rem !important;
    }

    .stat-icon {
        font-size: 1.2rem;
    }

    .stat-label {
        font-size: 9px;
    }

    .financial-summary {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .navbar {
        padding: 0.35rem 0.75rem;
    }

    .table {
        font-size: 10.5px;
    }

    .table thead th {
        padding: 4px 5px;
        font-size: 10px;
    }

    .table tbody td {
        padding: 4px 5px;
    }

    .card-header {
        padding: 0.4rem 0.6rem;
        font-size: 11px;
    }

    .btn {
        padding: 3px 8px;
        font-size: 10px;
    }

    .btn-sm {
        padding: 2px 6px;
        font-size: 10px;
    }

    .badge {
        padding: 2px 5px;
        font-size: 9px;
    }

    h1 { font-size: 1rem !important; }
    .page-subtitle { font-size: 0.7rem; }

    .dashboard-header {
        margin-bottom: 0.5rem;
    }

    /* Ensure tables scroll horizontally on mobile */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Modal on mobile */
    .modal-dialog {
        margin: 0.5rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    :root { --navbar-h: 44px; --subnav-h: 32px; }
    html, body { font-size: 10.5px; }
    .main-content { padding: 0.5rem; }
    .stat-value { font-size: 1rem !important; }
    .table { font-size: 0.72rem; }
    h1 { font-size: 1rem !important; }
    /* Stack header buttons on tiny screens */
    .dashboard-header .d-flex { flex-direction: column !important; align-items: flex-start !important; }
    .dashboard-header .d-flex > .d-flex { flex-direction: row !important; flex-wrap: wrap; }
    /* Full-width form controls on tiny screens */
    .form-control, .form-select { font-size: 14px !important; } /* Prevent iOS zoom on focus */
    input[type="text"], input[type="number"], input[type="email"],
    input[type="tel"], input[type="date"], select, textarea {
        font-size: 14px !important; /* iOS: prevents auto-zoom */
    }
    /* Bottom phone action bar on very small screens */
    .sf-tel-fab { display: flex !important; }
}

/* ── Picha ya profaili (mwanachama / mrithi) ─────────────────────────── */
.sf-avatar {
    width: 100px; height: 100px;
    object-fit: cover; border-radius: 50%;
    border: 3px solid var(--primary-color);
    background: #eee;
}
.sf-avatar-placeholder {
    width: 100px; height: 100px; border-radius: 50%;
    background: #e9ecef; border: 2px dashed #adb5bd;
    display: flex; align-items: center; justify-content: center;
    color: #adb5bd; font-size: 2rem;
}
.sf-photo-wrap { position: relative; display: inline-block; cursor: pointer; }
.sf-photo-wrap .sf-photo-overlay {
    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(0,0,0,0.45); color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.sf-photo-wrap:hover .sf-photo-overlay { display: flex; }

/* ── Floating call button (mobile only) ─────────────────────────────── */
.sf-tel-fab {
    display: none;
    position: fixed; bottom: 80px; right: 18px; z-index: 9998;
    width: 52px; height: 52px; border-radius: 50%;
    background: #27ae60; color: #fff;
    align-items: center; justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    text-decoration: none;
    animation: sfPulse 2s infinite;
}
@keyframes sfPulse {
    0%,100% { box-shadow: 0 4px 16px rgba(39,174,96,0.4); }
    50%      { box-shadow: 0 4px 28px rgba(39,174,96,0.75); }
}
@media (max-width: 768px) { .sf-tel-fab { display: flex !important; } }

/* ===== UTILITIES ===== */
.text-primary {
    color: var(--primary-color) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.text-muted {
    color: #7f8c8d !important;
}

.bg-light-primary {
    background-color: rgba(26, 71, 42, 0.1);
}

.shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.rounded-12 {
    border-radius: 12px;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

.gap-4 {
    gap: 1.5rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mt-4 {
    margin-top: 1.5rem;
}

/* ===== DARK-MODE OVERRIDE — keep sidebar always light ===== */
/* Bootstrap 5.3 auto-detects system dark mode and changes --bs-* variables.
   We force our UI to stay in light mode so sidebar text remains dark. */
[data-bs-theme="dark"] .sidebar,
@media (prefers-color-scheme: dark) {
    .sidebar {
        background: #f8f9fa !important;
    }
    .sidebar .nav-link,
    .sidebar .nav-link:link,
    .sidebar .nav-link:visited {
        color: #2c3e50 !important;
    }
    .sidebar .nav-link.active {
        background-color: var(--primary-color) !important;
        color: #fff !important;
    }
    .sidebar-section-title {
        color: var(--secondary-color) !important;
    }
    /* Keep main body background light */
    body {
        background-color: #f8f9fa !important;
        color: #2c3e50 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLLAPSIBLE CARDS — Global System
   Cards with .card-header get a toggle automatically via JS
   Use data-no-collapse on .card-header to opt out
   ═══════════════════════════════════════════════════════════════════════════ */

/* Make card-header clickable and show toggle arrow */
.card-header.sf-collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}
.card-header.sf-collapsible-header:hover {
    filter: brightness(0.96);
}
.card-header.sf-collapsible-header .sf-toggle-icon {
    flex-shrink: 0;
    margin-left: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #666;
    transition: transform 0.28s ease, background 0.2s;
}
.card-header.sf-collapsible-header.collapsed .sf-toggle-icon {
    transform: rotate(-90deg);
    background: rgba(26,71,42,0.12);
    color: var(--primary-color);
}

/* Smooth collapse animation */
.sf-collapsible-body {
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
    max-height: 4000px;  /* large enough */
    opacity: 1;
}
.sf-collapsible-body.sf-collapsed {
    max-height: 0 !important;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Section label badge on collapsed card */
.card-header.sf-collapsible-header.collapsed::after {
    content: attr(data-summary);
    font-size: 10px;
    color: #888;
    font-weight: 400;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* Mobile: all cards start collapsed except first */
@media (max-width: 767px) {
    .sf-mobile-collapse .sf-collapsible-body {
        max-height: 0 !important;
        opacity: 0;
    }
    .sf-mobile-collapse .card-header.sf-collapsible-header {
        /* collapsed state on mobile */
    }
}

/* ═══ RESPONSIVE TABLES ══════════════════════════════════════════════════════
   JS wraps tables in .sf-table-wrap; CSS ensures scroll behaviour.
   Also handles tables already inside .table-responsive.
   ═══════════════════════════════════════════════════════════════════════════ */

/* JS-generated wrapper — always scrollable */
.sf-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
    display: block;
    /* show scrollbar on hover for visual hint */
    scrollbar-width: thin;
    scrollbar-color: #c8d6c8 transparent;
}
.sf-table-wrap::-webkit-scrollbar { height: 4px; }
.sf-table-wrap::-webkit-scrollbar-thumb { background: #c8d6c8; border-radius: 4px; }
.sf-table-wrap::-webkit-scrollbar-track { background: transparent; }

/* Ensure Bootstrap .table-responsive also scrolls properly */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c8d6c8 transparent;
}
.table-responsive::-webkit-scrollbar { height: 4px; }
.table-responsive::-webkit-scrollbar-thumb { background: #c8d6c8; border-radius: 4px; }

/* Tables inside wrappers — keep natural width, don't squeeze columns */
.sf-table-wrap table,
.table-responsive table {
    min-width: max-content; /* table keeps full width; wrapper provides the scroll */
}

/* Tighten table text on small screens */
@media (max-width: 768px) {
    .sf-table-wrap table td,
    .sf-table-wrap table th,
    .table-responsive table td,
    .table-responsive table th {
        font-size: 11px;
        padding: 4px 6px !important;
        white-space: nowrap; /* prevent text from wrapping in cells — let table scroll instead */
    }
    /* Explicitly allow wrapping in description/notes columns */
    .sf-table-wrap table td.sf-wrap,
    .table-responsive table td.sf-wrap {
        white-space: normal !important;
        min-width: 120px;
    }
    /* Hide optional columns on mobile with this class */
    .d-mobile-none,
    .col-hide-mobile { display: none !important; }
}

@media (max-width: 768px) {
    /* Main navbar */
    .navbar { padding: 0.4rem 0.75rem; }
    .navbar-brand { font-size: 1rem; }
    .navbar-brand i { font-size: 1.3rem; }

    /* Page headers: stack on mobile */
    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Modals: full-width on mobile */
    .modal-dialog { margin: 0.25rem; max-width: calc(100vw - 0.5rem); }
    .modal-header { padding: 0.75rem 1rem; }
    .modal-body { padding: 0.75rem 1rem; }
    .modal-footer { padding: 0.5rem 1rem; }

    /* Stat cards: 2 per row */
    .col-lg { flex: 0 0 auto; width: 50% !important; }

    /* Card headers */
    .card-header { padding: 0.6rem 0.85rem; }

    /* Member chips on mobile */
    .member-acc-chips { gap: 5px; }
    .member-chip { font-size: 10px; padding: 2px 8px; }

    /* Form groups */
    .row.g-3 > .col-md-6,
    .row.g-3 > .col-md-4,
    .row.g-3 > .col-md-3 { width: 100% !important; }
}

@media (max-width: 480px) {
    .stat-card { padding: 0.65rem 0.75rem; }
    .stat-value { font-size: 1rem !important; }
    .stat-icon { font-size: 1.4rem; }
    .col-lg { width: 50% !important; }

    /* Buttons in card headers: icon only */
    .card-header .btn-sm .btn-text { display: none; }

    /* Badge numbers: smaller */
    .badge { font-size: 9px !important; }

    /* Hide less important table columns */
    .table .d-mobile-none { display: none !important; }
}

/* ═══ MOBILE UX IMPROVEMENTS ═════════════════════════════════════════════════
   Additional polish for phones and small tablets
   ════════════════════════════════════════════════════════════════════════════ */

/* ── nav-tabs / nav-pills: scrollable row (NOT sf-subnav — would break Bootstrap collapse) ── */
.nav-tabs,
.nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* isolate scroll from parent so main-content overflow-x:hidden doesn't clip it */
    position: relative;
}
.nav-tabs::-webkit-scrollbar,
.nav-pills::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link,
.nav-pills .nav-link { white-space: nowrap; flex-shrink: 0; }

/* ── Subnav desktop: all items in ONE row, smaller on medium screens ─────── */
/* NOTE: Do NOT use overflow-x on sf-subnav-list — it clips dropdown menus.
   Instead, shrink padding/font on medium screens so all tabs fit.
   Super admin has 10 tabs max — these breakpoints ensure they all fit. */
@media (min-width: 768px) and (max-width: 1400px) {
    .sf-subnav .nav-link {
        padding: 6px 9px !important;
        font-size: 11px !important;
        gap: 3px !important;
    }
    .sf-subnav .nav-link i { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1060px) {
    .sf-subnav .nav-link {
        padding: 6px 6px !important;
        font-size: 10px !important;
        letter-spacing: -.1px;
    }
}
@media (min-width: 1400px) {
    /* Large screens: comfortable padding with icons */
    .sf-subnav .nav-link {
        padding: 7px 11px !important;
        font-size: 11.5px !important;
    }
    .sf-subnav .nav-link i { display: inline-block !important; }
}

/* ── Section header shorthand inside Utawala dropdown ────────────────────── */
.sf-dh {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .65px !important;
    text-transform: uppercase !important;
    padding: 6px 14px 3px !important;
    line-height: 1 !important;
    color: #999;
    display: block;
}

/* ── Birthday banner responsive ──────────────────────────────────────────── */
#sfBirthdayBanner {
    font-size: 13px;
    padding: 0.5rem 0.75rem;
}
@media (max-width: 480px) {
    #sfBirthdayBanner { font-size: 11px; }
    #sfBirthdayBanner .btn-close { transform: scale(0.8); }
}

/* ── Photo upload buttons on mobile ──────────────────────────────────────── */
@media (max-width: 576px) {
    .sf-photo-wrap { width: 90px; height: 90px; }
    .sf-avatar, .sf-avatar-placeholder { width: 90px; height: 90px; }
    /* Gallery + Camera buttons: stack nicely */
    .d-flex.gap-2.justify-content-center.flex-wrap.mt-1 .btn {
        min-width: 110px;
    }
}

/* ── Stat cards: 2-per-row on phones, 1-per-row on very small ────────────── */
@media (max-width: 576px) {
    .col-6.col-sm-3 { width: 50% !important; }
}
@media (max-width: 360px) {
    .stat-card .stat-value { font-size: 0.9rem !important; }
    .stat-card .stat-label { font-size: 0.65rem; }
}

/* ── Scrollable main content area — allow FAB/nav overlap clearance ───────── */
@media (max-width: 768px) {
    .main-content {
        padding-bottom: 4.5rem; /* room above floating action button */
    }
    /* Collapsible sidebar on mobile — full width */
    .sidebar {
        width: 100%;
    }
    /* Page-level action buttons: full-width on phones */
    .sf-page-actions > .btn {
        width: 100%;
        margin-bottom: 0.35rem;
    }
}

/* ── Modals: full-screen on phones ───────────────────────────────────────── */
@media (max-width: 576px) {
    .modal-dialog:not(.modal-sm) {
        margin: 0;
        max-width: 100vw;
        min-height: 100vh;
        align-items: flex-end;
    }
    .modal-content {
        border-radius: 1rem 1rem 0 0;
        max-height: 92vh;
        overflow-y: auto;
    }
    .modal-footer { flex-wrap: wrap; gap: 0.4rem; }
    .modal-footer .btn { flex: 1 1 45%; }
}

/* ── Form rows: all single-column on phones ─────────────────────────────── */
@media (max-width: 576px) {
    [class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"] {
        width: 100% !important;
    }
    /* Keep 2-column for tiny inline pairs (e.g. col-6) */
    .row-cols-2 > * { width: 50% !important; }
}

/* ── Input groups: stack on phones ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .input-group { flex-direction: column; }
    .input-group > * { width: 100% !important; border-radius: 0.375rem !important; margin-bottom: 2px; }
}

/* ── Tables: min-width to trigger horizontal scroll, not wrap ──────────────── */
.table-responsive, .sf-table-wrap { overflow-x: auto; }
@media (max-width: 768px) {
    .table-responsive > table, .sf-table-wrap > table { min-width: 540px; }
}
@media (max-width: 480px) {
    .table-responsive > table, .sf-table-wrap > table { min-width: 400px; }
}

/* ── Landing / invite / public pages ──────────────────────────────────────── */
@media (max-width: 576px) {
    .invite-card { padding: 1.5rem 1rem !important; }
    .invite-name { font-size: 1.5rem !important; }
    .invite-actions .btn { width: 100%; margin-bottom: 0.5rem; }
}

/* ── Prevent iOS font-size zoom on focus ──────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
    input, select, textarea {
        font-size: 16px !important;
    }
    .form-control, .form-select { font-size: 16px !important; }
}

/* ── Smooth tap highlight ─────────────────────────────────────────────────── */
a, button, [role="button"], .btn, .nav-link, .card-header[data-bs-toggle] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

/* ── Touch-friendly minimum tap targets ──────────────────────────────────── */
@media (max-width: 768px) {
    /* Buttons: keep min-height for easy tapping */
    .btn { min-height: 36px; }

    /* Main navbar links: bigger tap area via padding only
       (do NOT set display:inline-flex — Bootstrap needs block in collapsed state) */
    .navbar.navbar-expand-lg .nav-link {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    /* Dropdown items (not in navbars): flex is safe */
    .card .dropdown-item,
    .table .dropdown-item {
        min-height: 38px;
        display: flex !important;
        align-items: center;
    }
}

/* ═══ END MOBILE UX IMPROVEMENTS ═══════════════════════════════════════════ */

/* ===== PRINT STYLES — KAMILI ===== */
@media print {

    /* ── 1. Ukurasa — margin=0 inafuta URL/tarehe/nambari ya kivinjari ─────────
       Mbinu: @page { margin: 0 } = hakuna nafasi kwa Chrome/Edge kuandika header
       Nafasi ya karatasi inafanywa na body { padding } badala yake              */
    @page {
        size: A4 portrait;
        margin: 0 !important;
    }

    /* ── 2. Body — padding badala ya margin, ficha scrollbars ────────────────── */
    html {
        overflow: hidden !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body {
        overflow: hidden !important;
        overflow-x: hidden !important;
        padding: 8mm 9mm !important;
        margin: 0 !important;
        background: #fff !important;
        font-size: 10px !important;
        color: #000 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── 3. Ficha vitu vyote visivyo vya kuchapishwa ─────────────────────────── */
    .navbar,
    .sf-subnav,
    nav.sf-subnav,
    .sidebar,
    .btn,
    .modal,
    .modal-backdrop,
    .toast,
    .offcanvas,
    .dropdown-menu,
    .navbar-toggler,
    .sf-subnav-toggler,
    .breadcrumb,
    .pagination,
    .no-print,
    .d-print-none,
    .sf-badge,
    .alert .btn-close,
    [data-bs-toggle],
    .progress-bar-animated,
    input[type="search"],
    form.no-print,
    .filter-row,
    .search-row,
    .action-buttons,
    .chapisha-btn,
    .dashboard-header .btn,
    .card-header .btn,
    .d-flex .btn,
    button:not([type="submit"]) { display: none !important; }

    /* ── 4. Ficha icons za simu na links za kupigia simu ─────────────────────── */
    a[href^="tel"],
    a[href^="tel"] *,
    a[href^="tel"] i { display: none !important; }

    /* Ficha icons za simu popote zilipo */
    .fa-phone, .fa-phone-alt, .fa-phone-slash,
    .fa-mobile, .fa-mobile-alt,
    i.fa-phone, i.fa-mobile { display: none !important; }

    /* ── 5. Ondoa URL inayoonyeshwa baada ya links (Chrome/Bootstrap default) ── */
    a::after, a[href]::after { content: none !important; }
    a { color: inherit !important; text-decoration: none !important; }

    /* ── 6. Layout — ondoa padding, shadows, borders za sura ────────────────── */
    .main-content,
    .content-wrapper,
    .container-fluid,
    .dashboard-header { padding: 0 !important; margin-bottom: 4px !important; }

    .row { margin-left: 0 !important; margin-right: 0 !important; }

    [class*="col-"] {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        margin-bottom: 5px !important;
    }

    .card-body { padding: 6px 8px !important; }

    .card-header {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }

    .table {
        box-shadow: none !important;
        font-size: 9px !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    .table td, .table th {
        padding: 2px 5px !important;
        border: 1px solid #ccc !important;
        font-size: 9px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* ── 7. Stat cards — kiwango kidogo kwa ripoti ───────────────────────────── */
    .stat-card {
        padding: 4px 7px !important;
        border-radius: 4px !important;
        margin-bottom: 4px !important;
    }
    .stat-value {
        font-size: 12px !important;
        margin-top: 0 !important;
        line-height: 1.2 !important;
    }
    .stat-label { font-size: 7.5px !important; }
    .stat-icon  { display: none !important; }
    .mb-3, .mb-4 { margin-bottom: 5px !important; }
    h4, h5, h6 { font-size: 11px !important; margin-bottom: 3px !important; }
    h1, h2, h3 { font-size: 13px !important; margin-bottom: 4px !important; }
    .badge { font-size: 8px !important; padding: 2px 4px !important; }

    /* ── 8. Ficha picha za wanachama kwenye orodha (zinachukua nafasi nyingi) ── */
    .sf-avatar, .sf-avatar-placeholder,
    td img, .member-photo, .picha-col { display: none !important; }

    /* ── 9. Rangi za hali (badges) — zibakishe ziwe zinaonekana ─────────────── */
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* ── 10. Vipande vya kurasa — epuka kukata mstari katikati ──────────────── */
    tr { break-inside: avoid; }
    table { break-inside: auto; }
    thead { display: table-header-group; }

    /* ── 11. Scroll containers — zifunguliwe kikamilifu kwa uchapishaji ─────── */
    .table-responsive,
    [style*="overflow"],
    [style*="overflow-x"],
    [style*="overflow-y"],
    [class*="overflow"] {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
    }

    /* ── 12. Kila kipande kisizidi upana wa ukurasa ───────────────────────────── */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    img { max-width: 100% !important; height: auto !important; }
}

/* ══ Utawala dropdown — rich item style (icon slab + two-line text) ══════════ */
.sf-subnav .sf-utawala-menu {
    min-width: 255px !important;
    padding: 8px 0 !important;
}
/* Usimamizi wa Mfumo — Super Admin dropdown */
.sf-subnav .sf-admin-menu {
    min-width: 278px !important;
    padding: 0 !important;
    border-top: 3px solid #6f42c1 !important;
    box-shadow: 0 6px 24px rgba(111,66,193,.15) !important;
}
.sf-subnav .sf-admin-menu .dropdown-header.sf-dh {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
    padding: 8px 14px 3px !important;
    line-height: 1 !important;
}
/* Active nav button for Usimamizi */
.sf-subnav .nav-link.sf-active[data-usimamizi],
.sf-subnav .sf-admin-active {
    color: #6f42c1 !important;
    border-bottom-color: #6f42c1 !important;
}
/* Override the generic dropdown-item flex for sf-dd-item */
.sf-subnav .sf-dd-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 14px !important;
    border-radius: 0;
    transition: background .15s;
}
.sf-subnav .sf-dd-item:hover {
    background: #f5f8ff !important;
}
.sf-subnav .sf-dd-item.active,
.sf-subnav .sf-dd-item:active {
    background: #eef2ff !important;
    color: #1a1a1a !important;
}
/* Coloured icon slab */
.sf-dd-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
/* Two-line text block */
.sf-dd-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.sf-dd-text strong {
    font-size: 12.5px;
    font-weight: 600;
    color: #1a1a1a;
}
.sf-dd-text small {
    font-size: 10.5px;
    color: #888;
    font-weight: 400;
}
/* Section header labels inside dropdown */
.sf-subnav .sf-utawala-menu .dropdown-header {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .65px !important;
    text-transform: uppercase !important;
    padding: 6px 14px 3px !important;
    line-height: 1 !important;
}
/* On mobile: stack items normally, keep text visible */
@media (max-width: 767px) {
    .sf-subnav .sf-dd-item {
        padding: 9px 20px !important;
    }
    .sf-dd-icon { width: 30px; height: 30px; font-size: 12px; border-radius: 7px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACTION BUTTONS — Desktop inline / Mobile dropdown
   .vitendo-desktop : show all buttons in a row on ≥768px, hide on mobile
   .vitendo-mobile  : show compact dropdown on <768px, hide on desktop
   ══════════════════════════════════════════════════════════════════════════════ */
.vitendo-desktop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
}
.vitendo-mobile { display: none !important; }

@media (max-width: 767px) {
    .vitendo-desktop { display: none !important; }
    .vitendo-mobile  {
        display: flex !important;
        align-items: center;
        gap: 4px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FILTER / TOOLBAR ROWS — wrap cleanly on small screens
   ══════════════════════════════════════════════════════════════════════════════ */
/* Any d-flex row inside .card-body used as a filter bar */
.card-body .d-flex.gap-2,
.card-body .d-flex.gap-3,
.dashboard-header .d-flex,
.filter-row {
    flex-wrap: wrap;
}

/* Period selector tabs — scroll instead of overflow on tiny phones */
@media (max-width: 480px) {
    .nav.nav-pills.gap-1 {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .nav.nav-pills.gap-1::-webkit-scrollbar { height: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   STAT CARDS — ensure value text doesn't overflow on very small phones
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .stat-card .stat-value {
        font-size: 0.85rem !important;
        word-break: break-all;
    }
    .stat-card .stat-label { font-size: 0.6rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD HEADER — stack title + buttons on narrow phones
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .dashboard-header > div:last-child {
        width: 100%;
    }
    .dashboard-header > div:last-child .btn {
        flex: 1 1 auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MEMBER PORTAL & TABLES — long text word-break protection
   ══════════════════════════════════════════════════════════════════════════════ */
.table td.td-truncate {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Emails and phone numbers in table cells must never overflow */
.table td a[href^="mailto:"],
.table td a[href^="tel:"] {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODAL BODY — globally scrollable so tall forms never clip off-screen
   (Bootstrap's modal-dialog-scrollable effect applied globally)
   ══════════════════════════════════════════════════════════════════════════════ */
.modal-body {
    overflow-y: auto;
    max-height: 70vh;
    overscroll-behavior: contain;
}
@media (max-width: 576px) {
    /* On phones the modal sheet already takes 92vh; body gets most of that */
    .modal-body { max-height: 75vh; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTON GROUPS in table cells — prevent overflow
   ══════════════════════════════════════════════════════════════════════════════ */
td .btn-group,
td .d-flex {
    flex-wrap: wrap;
    gap: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FORM SELECT / INPUT — consistent sizing on all phones
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 576px) {
    /* Ensure select dropdowns don't overflow container */
    select.form-select { max-width: 100%; }
    /* Stacked inline forms */
    .input-group.flex-nowrap { flex-wrap: wrap !important; }
    .input-group.flex-nowrap > * { width: 100% !important; margin-bottom: 3px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARDS with overflow-x:auto inline style — unfold properly on print &
   also ensure they don't bleed on mobile
   ══════════════════════════════════════════════════════════════════════════════ */
.card-body[style*="overflow-x"],
.card-body > div[style*="overflow-x"] {
    max-width: 100%;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BODY OVERFLOW — prevent horizontal scroll on all pages
   ══════════════════════════════════════════════════════════════════════════════ */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}