:root {
    --primary: #1a3a5c;
    --primary-light: #2a5a8c;
    --accent: #e8a838;
    --accent-dark: #c98a20;
    --success: #28a745;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #1a1a2e;
    --gray: #6c757d;
    --border: #dee2e6;
    --shadow: 0 2px 15px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --radius: 12px;
    --transition: all 0.3s ease;
}

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

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #333;
    line-height: 1.6;
    background: #fff;
}

/* ===== SITE HEADER ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.28));
}

/* Top Bar */
.header-topbar {
    background: #0f172a;
    border-bottom: none;
    padding: 7px 0;
    font-size: 0.78rem;
}
.topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.75);
    font-size: 0.78rem;
}
.topbar-item i { color: #f5c850; font-size: 0.72rem; }
.topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #16a34a;
    border: none;
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.topbar-login {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #1d4ed8;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 600;
    transition: background 0.2s;
}
.topbar-login:hover { background: #2563eb; color: #fff; }

/* Main Navbar */
.navbar-main {
    background: #fff;
    padding: 0;
    border-bottom: 3px solid #1a3a5c;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

/* Brand */
.navbar-main .navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 10px 0;
}
.navbar-main .brand-logo-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--hdr_nav_border, #e8a838);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.navbar-main .brand-logo-wrap img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}
.navbar-main .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.navbar-main .brand-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a3a5c;
    letter-spacing: 0.2px;
}
.navbar-main .brand-name::first-letter { color: #1d4ed8; }
.navbar-main .brand-tagline {
    font-size: 0.62rem;
    color: #ea580c;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Nav links — each item gets a unique solid pill color */
.navbar-main .nav-link {
    position: relative;
    color: #374151 !important;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.2px;
    padding: 0.45rem 1.1rem !important;
    margin: 0.8rem 0.2rem !important;
    border-radius: 22px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.navbar-main .nav-link span { position: relative; }
/* Unique solid pill colors per nav item */
.navbar-main .navbar-nav .nav-item:nth-child(1) .nav-link { background: #eff6ff; color: #1d4ed8 !important; }
.navbar-main .navbar-nav .nav-item:nth-child(1) .nav-link:hover,
.navbar-main .navbar-nav .nav-item:nth-child(1) .nav-link.active { background: #1d4ed8; color: #fff !important; }

.navbar-main .navbar-nav .nav-item:nth-child(2) .nav-link { background: #f0fdf4; color: #15803d !important; }
.navbar-main .navbar-nav .nav-item:nth-child(2) .nav-link:hover,
.navbar-main .navbar-nav .nav-item:nth-child(2) .nav-link.active { background: #16a34a; color: #fff !important; }

.navbar-main .navbar-nav .nav-item:nth-child(3) .nav-link { background: #fdf4ff; color: #7e22ce !important; }
.navbar-main .navbar-nav .nav-item:nth-child(3) .nav-link:hover,
.navbar-main .navbar-nav .nav-item:nth-child(3) .nav-link.active { background: #7c3aed; color: #fff !important; }

.navbar-main .navbar-nav .nav-item:nth-child(4) .nav-link { background: #fff7ed; color: #c2410c !important; }
.navbar-main .navbar-nav .nav-item:nth-child(4) .nav-link:hover,
.navbar-main .navbar-nav .nav-item:nth-child(4) .nav-link.active { background: #ea580c; color: #fff !important; }

/* Remove old underline pseudo */
.navbar-main .nav-link span::after { display: none; }

/* Action buttons */
.nav-actions { flex-shrink: 0; }
.navbar-main .nav-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1a3a5c !important;
    border: 2px solid #1a3a5c;
    border-radius: 8px;
    padding: 0.42rem 1.1rem;
    font-size: 0.835rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: #fff;
}
.navbar-main .nav-btn-outline:hover {
    background: #1a3a5c;
    color: #fff !important;
    border-color: #1a3a5c;
}
.navbar-main .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #e8a838;
    color: #0b1d3e !important;
    font-weight: 800;
    font-size: 0.845rem;
    letter-spacing: 0.3px;
    border-radius: 8px;
    padding: 0.46rem 1.3rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(232,168,56,0.35);
    transition: all 0.22s ease;
    white-space: nowrap;
}
.navbar-main .nav-cta:hover {
    background: #f5c322;
    color: #0b1d3e !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232,168,56,0.5);
}
/* Dashboard button: vivid indigo-blue */
.navbar-main .nav-cta.nav-cta-dashboard {
    background: #4f46e5;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(79,70,229,0.4);
}
.navbar-main .nav-cta.nav-cta-dashboard i {
    color: #a5f3fc;
    font-size: 1rem;
}
.navbar-main .nav-cta.nav-cta-dashboard:hover {
    background: #4338ca;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(79,70,229,0.55);
    transform: translateY(-2px);
}

/* Toggler */
.navbar-main .navbar-toggler {
    border: none;
    background: none;
    padding: 8px 6px;
    box-shadow: none !important;
    outline: none;
}
.navbar-main .toggler-icon {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--hdr_nav_text, #374151);
    border-radius: 2px;
}

/* Mobile */
@media (max-width: 991.98px) {
    .navbar-main .navbar-toggler {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }
    .navbar-main .navbar-collapse {
        background: #fff;
        border-top: 2px solid #e8a838;
        padding: 0.75rem 0.5rem 1rem;
    }
    .navbar-main .navbar-nav .nav-item .nav-link {
        margin: 0.25rem 0.5rem !important;
        display: block;
        text-align: center;
    }
    .nav-actions { padding: 0.5rem 1rem 0; gap: 0.5rem; }
    .navbar-main .nav-cta,
    .navbar-main .nav-btn-outline { width: 100%; justify-content: center; }
}

/* ===== HERO SECTION ===== */
.hero-section {
    background: linear-gradient(135deg, #070f23 0%, #0e2050 30%, #131e4a 60%, #060c1e 100%);
    color: #fff;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124,58,237,0.22) 0%, transparent 70%);
    border-radius: 50%;
}
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #3b82f6, #0891b2, #10b981, #f97316, #e8a838, #ec4899);
}
.hero-section h1 {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.hero-section h1 span { color: var(--accent); }
.hero-section p.lead {
    font-size: 1.15rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 540px;
}
.hero-section .hero-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 2.5rem;
}
.hero-section .hero-stats .stat h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
}
.hero-section .hero-stats .stat p {
    font-size: 0.85rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== BUTTONS ===== */
.btn-primary-custom {
    background: linear-gradient(135deg, #e8a838 0%, #f5c850 100%);
    color: #0b1d3e;
    border: none;
    font-weight: 800;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 20px rgba(232,168,56,0.35);
    letter-spacing: 0.2px;
}
.btn-primary-custom:hover {
    background: linear-gradient(135deg, #f5c850 0%, #fad364 100%);
    color: #0b1d3e;
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(232,168,56,0.55);
}
.btn-outline-custom {
    border: 2px solid rgba(255,255,255,0.75);
    color: #fff;
    font-weight: 700;
    padding: 0.7rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(6px);
}
.btn-outline-custom:hover {
    background: #fff;
    border-color: #fff;
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(255,255,255,0.25);
}
/* White button for use on any dark/colored background */
.btn-white-custom {
    background: #fff;
    color: var(--primary);
    border: 2px solid #fff;
    font-weight: 800;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 4px 20px rgba(255,255,255,0.18);
}
.btn-white-custom:hover {
    background: transparent;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(255,255,255,0.3);
}

/* ===== SECTIONS ===== */
.section-padding { padding: 80px 0; }
.section-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.5rem;
}
.section-subtitle {
    color: var(--gray);
    font-size: 1.05rem;
    margin-bottom: 3rem;
}

/* ===== CARDS ===== */
.feature-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: var(--transition);
    height: 100%;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}
.feature-card .icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
}
.feature-card h5 { font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; }
.feature-card p { color: var(--gray); font-size: 0.9rem; }

/* ===== INCOME PLAN TABLE ===== */
.plan-table {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.plan-table table {
    width: 100%;
    margin: 0;
}
.plan-table thead th {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    padding: 1rem;
    font-size: 0.9rem;
    border: none;
}
.plan-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.plan-table tbody tr:hover { background: rgba(232,168,56,0.05); }

/* ===== ABOUT SECTION ===== */
.about-section { background: var(--light); }
.about-img {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* ===== CTA SECTION ===== */
.cta-section {
    background: linear-gradient(135deg, #0b1d3e 0%, #1e1060 22%, #1d4ed8 52%, #0369a1 78%, #065f46 100%);
    color: #fff;
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.35) 0%, transparent 60%);
    pointer-events: none;
}
.cta-section h2 { font-weight: 800; margin-bottom: 1rem; }
.cta-section p { opacity: 0.8; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }

/* ===== FOOTER ===== */
.footer {
    background: var(--dark);
    color: rgba(255,255,255,0.7);
    padding: 50px 0 20px;
}
.footer h5 { color: #fff; font-weight: 700; margin-bottom: 1.2rem; font-size: 1.1rem; }
.footer a { color: rgba(255,255,255,0.6); text-decoration: none; transition: var(--transition); }
.footer a:hover { color: var(--accent); }
.footer .footer-links { list-style: none; padding: 0; }
.footer .footer-links li { margin-bottom: 0.5rem; }
.footer .footer-links li a { font-size: 0.9rem; }
.footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem;
    margin-top: 2rem;
    text-align: center;
    font-size: 0.85rem;
}
.footer .social-links a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    color: #fff;
    transition: var(--transition);
}
.footer .social-links a:hover { background: var(--accent); color: var(--primary); }

/* ===== AUTH FORMS (legacy standalone) ===== */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
    padding: 2rem;
}
.auth-card {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
}
.auth-card.wide { max-width: 700px; }
.auth-card h2 { font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.auth-card p.subtitle { color: var(--gray); margin-bottom: 2rem; }

/* ===== AUTH SECTION (with header) ===== */
.auth-section {
    background: var(--primary);
    min-height: calc(100vh - 130px);
    padding: 3rem 0 4rem;
    display: flex;
    align-items: center;
}
.auth-card-new {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}
.auth-card-new::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--accent);
}
.auth-logo-img {
    height: 72px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 0.5rem;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.12));
}
.auth-logo-text {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.5rem;
}
.auth-title {
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.4rem;
    font-size: 1.6rem;
}
.auth-subtitle {
    color: var(--gray);
    margin-bottom: 1.8rem;
    font-size: 0.95rem;
}
.input-group-auth {
    position: relative;
    display: flex;
    align-items: center;
}
.input-group-auth .input-icon {
    position: absolute;
    left: 0.9rem;
    color: var(--gray);
    font-size: 0.85rem;
    z-index: 2;
    pointer-events: none;
}
.input-group-auth .auth-input {
    padding-left: 2.4rem !important;
}
.input-group-auth .toggle-pw {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--gray);
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    z-index: 2;
}
.input-group-auth .toggle-pw:hover { color: var(--primary); }
.auth-input {
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    transition: var(--transition);
    width: 100%;
}
.auth-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232,168,56,0.15);
    outline: none;
}
.auth-select {
    border: 2px solid var(--border) !important;
    border-radius: 8px !important;
    transition: var(--transition);
}
.auth-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(232,168,56,0.15) !important;
}
.btn-auth-submit {
    display: block;
    width: 100%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    padding: 0.8rem;
    border-radius: 10px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.3px;
    text-decoration: none;
    text-align: center;
}
.btn-auth-submit:hover {
    background: var(--accent);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.auth-footer-text { font-size: 0.9rem; color: var(--gray); }
.auth-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-link:hover { color: var(--primary); text-decoration: underline; }
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--primary); }
.form-control {
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    transition: var(--transition);
}
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232,168,56,0.15);
}
.form-select {
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 1rem;
}
.btn-submit {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    padding: 0.75rem;
    border-radius: 8px;
    border: none;
    width: 100%;
    font-size: 1rem;
    transition: var(--transition);
}
.btn-submit:hover {
    background: var(--primary-light);
    color: #fff;
    transform: translateY(-1px);
}

/* ===== ADMIN & MEMBER PANEL ===== */
.panel-wrapper { display: flex; min-height: 100vh; }

/* --- SIDEBAR --- */
.sidebar {
    width: 260px;
    background: #0f172a;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s ease;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.sidebar .sidebar-brand {
    padding: 1.35rem 1.2rem;
    font-size: 1.3rem;
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    text-align: center;
    background: #1e293b;
}
.sidebar .sidebar-brand span { color: var(--accent); }
.sidebar .sidebar-nav { padding: 0.75rem 0; }
.sidebar .nav-item { margin-bottom: 1px; }
.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.65rem 1rem;
    margin: 2px 10px;
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 10px;
    border-left: none;
}
.sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
    border-left: none;
}
.sidebar .nav-link.active {
    color: #fff;
    background: #4338ca;
    font-weight: 600;
    border-left: none;
}
.sidebar .nav-link i { font-size: 1rem; width: 22px; text-align: center; }

/* Colorful icons per section (non-active) */
.sidebar .nav-link:not(.active) .fa-tachometer-alt { color: #a5b4fc; }
.sidebar .nav-link:not(.active) .fa-user-circle    { color: #c4b5fd; }
.sidebar .nav-link:not(.active) .fa-user-friends   { color: #6ee7b7; }
.sidebar .nav-link:not(.active) .fa-sitemap        { color: #67e8f9; }
.sidebar .nav-link:not(.active) .fa-chart-line     { color: #fcd34d; }
.sidebar .nav-link:not(.active) .fa-wallet         { color: #93c5fd; }
.sidebar .nav-link:not(.active) .fa-money-bill-wave{ color: #fca5a5; }
.sidebar .nav-link:not(.active) .fa-percentage     { color: #f9a8d4; }
.sidebar .nav-link:not(.active) .fa-headset        { color: #5eead4; }
.sidebar .nav-link:not(.active) .fa-sign-out-alt   { color: #fdba74; }

.sidebar .sidebar-section {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.28);
    padding: 1rem 1.5rem 0.35rem;
    font-weight: 700;
}

/* --- PANEL CONTENT --- */
.panel-content {
    flex: 1;
    margin-left: 260px;
    background: #f1f5f9;
    min-height: 100vh;
}

/* --- TOPBAR --- */
.panel-topbar {
    background: #fff;
    padding: 0.8rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.panel-topbar h5 { font-weight: 700; margin: 0; font-size: 1.1rem; color: #0f172a; }
.panel-topbar .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.panel-topbar .user-info .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #4338ca;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.panel-body { padding: 2rem; }

/* ===== DASHBOARD CARDS ===== */
.dash-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    border: 1px solid var(--border);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    height: 100%;
}
.dash-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.13); }

/* Colored variant (legacy) */
.dash-card.colored {
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
}
.dash-card.colored .dash-label { color: rgba(255,255,255,0.82); }
.dash-card.colored .dash-value { color: #fff !important; }
.dash-card.colored small       { color: rgba(255,255,255,0.6) !important; }
.dash-card.colored .dash-icon  { background: rgba(255,255,255,0.18); color: #fff; }
.dash-card.colored:hover { box-shadow: 0 12px 36px rgba(0,0,0,0.22); }

.dash-card .dash-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    flex-shrink: 0;
}
.dash-card .dash-value { font-size: 1.55rem; font-weight: 800; color: var(--primary); margin-top: 4px; }
.dash-card .dash-label { font-size: 0.72rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== PREMIUM STAT CARDS ===== */
.stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
    transition: box-shadow .2s ease, transform .2s ease;
    height: 100%;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(0,0,0,.04);
}
.stat-card:hover {
    box-shadow: 0 6px 28px rgba(0,0,0,.11);
    transform: translateY(-2px);
}
.stat-card .stat-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.stat-card .stat-label {
    font-size: .65rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.stat-card .stat-value.stat-value-md { font-size: 1.1rem; line-height: 1.3; }
.stat-card .stat-sub {
    font-size: .7rem;
    color: #64748b;
    margin-top: 5px;
    font-weight: 500;
}
.stat-card .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Solid color palette */
.bg-indigo  { background: #4338ca; }
.bg-emerald { background: #047857; }
.bg-sky     { background: #0369a1; }
.bg-amber   { background: #b45309; }
.bg-violet  { background: #6d28d9; }
.bg-rose    { background: #b91c1c; }
.bg-teal    { background: #0f766e; }
.bg-orange  { background: #c2410c; }

/* Legacy gradient classes → solid replacements */
.bg-gradient-1 { background: #4338ca; }
.bg-gradient-2 { background: #be185d; }
.bg-gradient-3 { background: #0369a1; }
.bg-gradient-4 { background: #047857; }
.bg-gradient-5 { background: #b45309; }
.bg-gradient-6 { background: #6d28d9; }

/* ===== DATA TABLE ===== */
.data-table {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.data-table .table-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.data-table .table-header h5 { font-weight: 700; margin: 0; }
.data-table table thead th {
    background: var(--light);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray);
    border-bottom: 2px solid var(--border);
    padding: 0.85rem 1rem;
}
.data-table table td {
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    vertical-align: middle;
}
.badge-status {
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-active { background: #d4edda; color: #155724; }
.badge-pending { background: #fff3cd; color: #856404; }
.badge-blocked { background: #f8d7da; color: #721c24; }
.badge-paid { background: #cce5ff; color: #004085; }

/* ===== TREE VIEW ===== */
.tree-container { overflow-x: auto; padding: 20px; }
/* tree-scroll-wrap: creates its own scroll island even when body has overflow-x:hidden */
.tree-scroll-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.tree { display: flex; flex-direction: column; align-items: center; }
.tree-node {
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    text-align: center;
    min-width: 130px;
    margin: 0 5px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.tree-node:hover { border-color: var(--accent); transform: scale(1.03); }
.tree-node .name { font-weight: 700; font-size: 0.82rem; color: var(--primary); }
.tree-node .mid { font-size: 0.72rem; color: var(--gray); }
.tree-node.empty { border: 2px dashed #ccc; background: #fafafa; color: #999; }
.tree-children { display: flex; gap: 10px; margin-top: 5px; position: relative; }

.tree-level { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
    .sidebar { transform: translateX(-260px); }
    .sidebar.show { transform: translateX(0); }
    .panel-content { margin-left: 0; }
    .hero-section h1 { font-size: 2.2rem; }
    .hero-section { padding: 60px 0 50px; }
    .hero-section .hero-stats { flex-wrap: wrap; gap: 1.5rem; }
}
@media (max-width: 576px) {
    .auth-card { padding: 1.5rem; }
    .panel-body { padding: 1rem; }
    .hero-section h1 { font-size: 1.8rem; }
}

/* ===== PLAN PAGE ===== */
.plan-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}
.plan-card h4 {
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

/* ===== MISC ===== */
.text-accent { color: var(--accent); }
.bg-primary-custom { background: var(--primary); }
.page-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
    color: #fff;
    padding: 50px 0;
    text-align: center;
}
.page-header h1 { font-weight: 800; }
.page-header p { opacity: 0.7; }

.animate-fade { animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Sidebar toggle button (mobile) */
.sidebar-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: #f0efff;
    color: #4338ca;
    border: 1.5px solid #ddd8ff;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    flex-shrink: 0;
}
.sidebar-toggle:hover {
    background: #4338ca;
    color: #fff;
    border-color: #4338ca;
}
.sidebar-toggle.is-open {
    background: #4338ca;
    color: #fff;
    border-color: #4338ca;
}
@media (max-width: 991px) {
    .sidebar-toggle { display: inline-flex; }
}

/* Sidebar submenu */
.sidebar .submenu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar .submenu-toggle span { flex: 1; }
.sidebar .submenu-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    width: auto !important;
    color: rgba(255,255,255,0.4);
}
.sidebar .submenu-toggle[aria-expanded="true"] .submenu-arrow {
    transform: rotate(180deg);
}
.sidebar .nav-sub-link {
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    margin: 1px 10px 1px 18px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 8px;
    border-left: none;
}
.sidebar .nav-sub-link i {
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}
.sidebar .nav-sub-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
    border-left: none;
}
.sidebar .nav-sub-link.active {
    color: #c4b5fd;
    background: rgba(67,56,202,0.22);
    border-left: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #4338ca; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6d28d9; }

/* ===== HERO ENHANCEMENTS ===== */
.hero-bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-bg-shapes .shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
}
.shape-1 { width: 400px; height: 400px; background: var(--accent); top: -100px; right: -80px; }
.shape-2 { width: 250px; height: 250px; background: #fff; bottom: -50px; left: 10%; }
.shape-3 { width: 150px; height: 150px; background: var(--accent); top: 40%; left: -40px; }

.hero-badge {
    display: inline-block;
    background: rgba(232,168,56,0.15);
    color: var(--accent);
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid rgba(232,168,56,0.3);
}
.hero-visual {
    position: relative;
    padding: 2rem;
}
.hero-card-main {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
}
.hero-card-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.2rem;
}
.hero-card-main h3 { font-weight: 800; color: #fff; margin-bottom: 0.3rem; }
.hero-card-main p { color: rgba(255,255,255,0.6); }
.hero-price-tag {
    background: var(--accent);
    color: var(--primary);
    padding: 0.8rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    margin-top: 1.2rem;
}
.hero-floating {
    position: absolute;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.6rem 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    animation: float 3s ease-in-out infinite;
}
.hero-floating i { color: var(--accent); font-size: 1rem; }
.hero-float-1 { top: 10%; left: -20px; animation-delay: 0s; }
.hero-float-2 { bottom: 20%; right: -10px; animation-delay: 1s; }
.hero-float-3 { top: 55%; left: -40px; animation-delay: 2s; }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ===== TRUST BAR ===== */
.trust-bar {
    background: #fff;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.trust-item i {
    font-size: 1.8rem;
    color: var(--accent);
}
.trust-item strong {
    display: block;
    font-size: 0.88rem;
    color: var(--primary);
}
.trust-item span {
    font-size: 0.75rem;
    color: var(--gray);
}

/* ═══════════════════════════════════════════════
   PANEL – MOBILE / TABLET RESPONSIVE
   ═══════════════════════════════════════════════ */

/* Sidebar drawer backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }

/* ── Tablet (≤991px) ── */
@media (max-width: 991.98px) {
    .sidebar { box-shadow: none; }
    .sidebar.show { box-shadow: 8px 0 32px rgba(0,0,0,.35); }
    .panel-content { margin-left: 0; }
    .panel-body { padding: 1rem; }
}

/* ── Large mobile (≤767px) ── */
@media (max-width: 767.98px) {
    /* Topbar */
    .panel-topbar { padding: .6rem .9rem; }
    .panel-topbar h5 {
        font-size: .875rem;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Hide "Visit Website" button on mobile topbar */
    .panel-topbar .user-info > a.btn       { display: none !important; }
    /* Hide name/ID text block but keep avatar */
    .panel-topbar .user-info > div:not(.avatar) { display: none !important; }
    /* Hide admin span name on mobile */
    .panel-topbar .user-info > span        { display: none !important; }
    .panel-topbar .user-info               { gap: 6px; }

    /* Panel body */
    .panel-body { padding: .75rem; }

    /* Data tables: allow horizontal scroll */
    .data-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table .table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    /* Stat / dash cards */
    .stat-card .stat-value  { font-size: 1.2rem; }
    .stat-card .stat-icon   { width: 40px; height: 40px; font-size: .95rem; }
    .dash-card .dash-value  { font-size: 1.25rem; }

    /* Bootstrap table-responsive touch scroll */
    .panel-body .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Form rows: stack label + input on small screens */
    .panel-body .row.mb-3 > [class*="col-"] { margin-bottom: .15rem; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
    .panel-topbar { padding: .5rem .75rem; }
    .panel-topbar h5 { font-size: .78rem; max-width: 100px; }
    .sidebar-toggle  { width: 34px; height: 34px; font-size: .88rem; }
    .panel-body      { padding: .5rem; }
    .stat-card .stat-value { font-size: .95rem; }
    .dash-card .dash-value { font-size: 1rem; }
}

/* ===== SECTION LABEL ===== */
.section-label {
    display: inline-block;
    background: rgba(232,168,56,0.1);
    color: var(--accent-dark);
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ===== ABOUT INTRO VISUAL ===== */
.about-visual { position: relative; }
.about-img-block {
    background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    color: #fff;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.about-img-block::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 150px;
    height: 150px;
    background: rgba(232,168,56,0.15);
    border-radius: 50%;
}
.about-img-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    opacity: 0.08;
    color: #fff;
}
.about-img-content { position: relative; z-index: 1; }
.img-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 1rem;
    overflow: hidden;
}
.about-img-content h4 { font-weight: 700; margin-bottom: 0.3rem; }
.about-img-content p { opacity: 0.7; font-size: 0.9rem; margin: 0; }

/* ─── Notification Bell ─────────────────────────────────────────────────────── */
.notif-bell-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-bell-btn {
    background: none; border: none; cursor: pointer; outline: none;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; font-size: 1.05rem;
    position: relative; transition: background .2s, color .2s;
    flex-shrink: 0;
}
.notif-bell-btn:hover { background: #f1f5f9; color: #1a3a5c; }
.notif-badge {
    position: absolute; top: 1px; right: 1px;
    background: #ef4444; color: #fff;
    font-size: .58rem; font-weight: 700; line-height: 1;
    min-width: 15px; height: 15px; border-radius: 50px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 2px solid #fff;
    pointer-events: none;
}
.notif-dropdown {
    display: none;
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 340px; background: #fff; border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,.15);
    z-index: 10000; overflow: hidden;
    animation: notifFadeIn .2s ease;
}
@keyframes notifFadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.notif-dropdown.show { display: block; }
.notif-dd-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px 11px; border-bottom: 1px solid #f0f0f0;
}
.notif-dd-title { font-weight: 700; font-size: .875rem; color: #1a3a5c; }
.notif-mark-all-btn {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: .73rem; color: #6366f1; line-height: 1;
}
.notif-mark-all-btn:hover { text-decoration: underline; }
.notif-dd-body { max-height: 310px; overflow-y: auto; }
.notif-item {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 11px 16px; cursor: pointer; transition: background .15s;
    border-bottom: 1px solid #f7f7f7; text-decoration: none;
}
.notif-item:hover { background: #f8fafc; }
.notif-item.unread { background: #eef2ff; }
.notif-item.unread:hover { background: #e5eafc; }
.notif-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem;
}
.notif-text { flex: 1; min-width: 0; }
.notif-item-title { font-size: .81rem; font-weight: 600; color: #111827; line-height: 1.3; }
.notif-item-msg {
    font-size: .74rem; color: #6b7280; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-item-time { font-size: .67rem; color: #9ca3af; margin-top: 4px; }
.notif-dd-footer {
    padding: 10px 16px; border-top: 1px solid #f0f0f0;
    background: #fafbfc; text-align: center;
}
.notif-dd-footer a { font-size: .78rem; color: #1a3a5c; text-decoration: none; font-weight: 600; }
.notif-dd-footer a:hover { text-decoration: underline; }
.notif-empty { text-align: center; padding: 32px 16px; color: #9ca3af; }
.notif-empty i { font-size: 2rem; margin-bottom: 8px; display: block; }
.notif-empty p { font-size: .78rem; margin: 0; }
.notif-loading { text-align: center; padding: 24px; color: #9ca3af; font-size: .78rem; }
/* Admin bell (darker bg) */
.notif-bell-btn.admin-bell { color: rgba(0,0,0,.5); }
.notif-bell-btn.admin-bell:hover { background: rgba(0,0,0,.06); color: #1a3a5c; }
/* Notification page items */
.notif-page-item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 20px; border-bottom: 1px solid #f0f4fa;
    transition: background .15s;
}
.notif-page-item.unread { background: #eef2ff; }
.notif-page-item:hover { background: #f5f8ff; }
.notif-page-icon {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.notif-page-text { flex: 1; min-width: 0; }
.notif-page-title { font-size: .9rem; font-weight: 600; color: #111827; }
.notif-page-msg { font-size: .8rem; color: #6b7280; margin-top: 3px; line-height: 1.5; }
.notif-page-meta { font-size: .7rem; color: #9ca3af; margin-top: 5px; }
@media (max-width: 767.98px) {
    .notif-dropdown { width: calc(100vw - 24px); right: -8px; }
}

.about-experience-badge {
    position: absolute;
    bottom: -15px;
    right: 20px;
    background: var(--accent);
    color: var(--primary);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(232,168,56,0.3);
}
.about-experience-badge .exp-number {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1;
}
.about-experience-badge .exp-text {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.about-point-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
}
.about-point strong { display: block; font-size: 0.88rem; color: var(--primary); }
.about-point p { font-size: 0.75rem; color: var(--gray); margin: 0; }

/* ===== HOW IT WORKS ===== */
.how-it-works-section {
    background: linear-gradient(180deg, var(--light) 0%, #fff 100%);
}
.step-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    position: relative;
    height: 100%;
    transition: var(--transition);
}
.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.step-number {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
}
.step-icon {
    font-size: 2.2rem;
    margin: 1rem 0 1rem;
}
.step-card h5 { font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; }
.step-card p { font-size: 0.85rem; color: var(--gray); margin: 0; }
.step-arrow {
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-size: 1.2rem;
    z-index: 2;
}

/* ===== INCOME HIGHLIGHT LIST ===== */
.income-highlight-list { display: flex; flex-direction: column; gap: 1rem; }
.income-hl-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.income-hl-icon {
    width: 45px;
    height: 45px;
    min-width: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
}
.income-hl-item strong { display: block; font-size: 0.9rem; color: var(--primary); }
.income-hl-item span { font-size: 0.78rem; color: var(--gray); }

/* ===== COUNTERS SECTION ===== */
.counters-section {
    background: linear-gradient(135deg, #5b21b6 0%, #2563eb 38%, #0891b2 68%, #059669 100%);
    color: #fff;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
.counters-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(255,255,255,0.09) 0%, transparent 40%),
        radial-gradient(circle at 85% 50%, rgba(255,255,255,0.07) 0%, transparent 40%);
    pointer-events: none;
}
.counters-section .container { position: relative; }
.counter-item { padding: 1.5rem; }
.counter-icon {
    font-size: 2.2rem;
    color: var(--accent);
    margin-bottom: 0.8rem;
}
.counter-value {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.3rem;
}
.counter-item p {
    font-size: 0.85rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* ===== REFERRAL LEVEL PILLS ===== */
.referral-visual {
    background: #fff;
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.level-pill {
    border: 2px solid;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    transition: var(--transition);
}
.level-pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.level-name {
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.level-amount {
    padding: 0.6rem;
    font-weight: 800;
    font-size: 1rem;
    color: var(--primary);
}

/* ===== COORDINATOR RANKS ===== */
.rank-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: var(--transition);
    height: 100%;
}
.rank-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.rank-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    margin: 0 auto 0.8rem;
}
.rank-title { font-weight: 700; font-size: 0.85rem; color: var(--primary); margin-bottom: 0.3rem; }
.rank-req { font-size: 0.72rem; color: var(--gray); display: block; margin-bottom: 0.5rem; }
.rank-badge { font-size: 0.72rem; font-weight: 700; }

/* ===== WELFARE CARDS ===== */
.welfare-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    height: 100%;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.welfare-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}
.welfare-emergency::before { background: linear-gradient(90deg, #f5576c, #ff6b6b); }
.welfare-kanyadaan::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
.welfare-rojgar::before { background: linear-gradient(90deg, #43e97b, #38f9d7); }
.welfare-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.welfare-icon {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.welfare-emergency .welfare-icon { background: rgba(245,87,108,0.1); color: #f5576c; }
.welfare-kanyadaan .welfare-icon { background: rgba(240,147,251,0.1); color: #f093fb; }
.welfare-rojgar .welfare-icon { background: rgba(67,233,123,0.1); color: #43e97b; }
.welfare-card h5 { font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; }
.welfare-card > p { font-size: 0.85rem; color: var(--gray); margin-bottom: 1rem; }
.welfare-table { border-top: 1px solid var(--border); padding-top: 0.8rem; }
.welfare-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.welfare-row span { color: var(--gray); }
.welfare-row strong { color: var(--primary); }

/* ===== FAQ ACCORDION ===== */
.accordion-item {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    margin-bottom: 0.8rem;
    overflow: hidden;
}
.accordion-button {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary);
    padding: 1rem 1.5rem;
    background: #fff;
}
.accordion-button:not(.collapsed) {
    background: rgba(232,168,56,0.06);
    color: var(--primary);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: var(--border); }
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a3a5c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-body {
    font-size: 0.9rem;
    color: var(--gray);
    line-height: 1.7;
    padding: 0 1.5rem 1.2rem;
}
.faq-visual {
    margin-top: 2rem;
}
.faq-img-block {
    background: var(--light);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--border);
}
.faq-img-block h5 { font-weight: 700; color: var(--primary); }
.faq-img-block p { font-size: 0.85rem; }

/* ===== NEWS CARDS ===== */
.news-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 1.8rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    height: 100%;
    transition: var(--transition);
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.news-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.news-type {
    background: rgba(232,168,56,0.1);
    color: var(--accent-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.news-date { font-size: 0.78rem; color: var(--gray); }
.news-card h5 { font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; font-size: 1rem; }
.news-card p { font-size: 0.85rem; color: var(--gray); margin: 0; }

/* ===== CTA ENHANCED ===== */
.cta-enhanced { position: relative; overflow: hidden; padding: 80px 0; }
.cta-shapes { position: absolute; inset: 0; pointer-events: none; }
.cta-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
    background: #fff;
}
.cta-shape-1 { width: 300px; height: 300px; top: -80px; left: -50px; }
.cta-shape-2 { width: 200px; height: 200px; bottom: -60px; right: 10%; }
.cta-features {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cta-features span {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}
.cta-features i { color: var(--accent); }
.btn-lg {
    padding: 0.9rem 2.5rem !important;
    font-size: 1.05rem !important;
}

/* ===== RESPONSIVE ADDITIONS ===== */
@media (max-width: 991px) {
    .hero-floating { display: none; }
    .about-experience-badge { position: static; margin-top: 1rem; display: inline-flex; }
    .step-arrow { display: none !important; }
    .cta-features { gap: 0.8rem; }
    .welfare-card { margin-bottom: 0; }
}
@media (max-width: 576px) {
    .trust-item i { font-size: 1.3rem; }
    .trust-item strong { font-size: 0.78rem; }
    .trust-item span { font-size: 0.68rem; }
    .counter-value { font-size: 1.5rem; }
    .counter-icon { font-size: 1.5rem; }
    .level-amount { font-size: 0.85rem; }
    .cta-features span { font-size: 0.75rem; }
    .rank-card { padding: 1rem 0.5rem; }
    .rank-icon { width: 40px; height: 40px; font-size: 1rem; }
}

/* ================================================================
   HOMEPAGE RICH REDESIGN — vivid colors, light buttons, sections
   ================================================================ */

/* Extended vivid palette */
:root {
    --vivid-purple: #7c3aed;
    --vivid-teal:   #0284c7;
    --vivid-pink:   #ec4899;
    --vivid-green:  #10b981;
    --vivid-orange: #f97316;
    --vivid-blue:   #3b82f6;
}

/* ---- Trust bar: colorful unique icons + rainbow bottom border ---- */
.trust-bar {
    background: linear-gradient(135deg, #fdfeff 0%, #f2f7ff 100%);
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #7c3aed, #3b82f6, #0891b2, #10b981) 1;
}
.trust-item:nth-child(1) i { color: #ea580c; }
.trust-item:nth-child(2) i { color: #059669; }
.trust-item:nth-child(3) i { color: #2563eb; }
.trust-item:nth-child(4) i { color: #7c3aed; }

/* ---- Section labels: vivid purple-blue ---- */
.section-label {
    background: linear-gradient(135deg, rgba(124,58,237,0.09) 0%, rgba(59,130,246,0.09) 100%);
    color: #5b21b6;
    border: 1px solid rgba(124,58,237,0.2);
}

/* ---- Hero enhancements ---- */
.hero-badge {
    background: rgba(124,58,237,0.18);
    color: #c4b5fd;
    border-color: rgba(124,58,237,0.4);
}
.hero-bg-shapes .shape-1 {
    background: radial-gradient(circle, rgba(124,58,237,0.28) 0%, transparent 70%);
    opacity: 1;
}
.hero-bg-shapes .shape-2 {
    background: radial-gradient(circle, rgba(59,130,246,0.22) 0%, transparent 70%);
    opacity: 1;
    width: 300px; height: 300px;
}
.hero-bg-shapes .shape-3 {
    background: radial-gradient(circle, rgba(16,185,129,0.22) 0%, transparent 70%);
    opacity: 1;
}
.hero-card-main {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 28px 64px rgba(0,0,0,0.45);
}
.hero-card-icon {
    background: linear-gradient(135deg, #e8a838 0%, #f5c850 100%);
    box-shadow: 0 8px 24px rgba(232,168,56,0.4);
}
.hero-price-tag {
    background: linear-gradient(135deg, #e8a838 0%, #f5c850 100%);
    font-weight: 800;
}
.hero-floating {
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    backdrop-filter: blur(12px);
}

/* ---- About intro: soft blue-purple bg ---- */
#about-intro {
    background: linear-gradient(135deg, #f4f8ff 0%, #e8f0ff 60%, #f3fbff 100%);
}
.about-img-block {
    background: linear-gradient(135deg, #0a1a46 0%, #1e40af 52%, #0369a1 100%);
}
.about-img-block::before {
    background: radial-gradient(circle, rgba(124,58,237,0.3) 0%, transparent 70%);
}
.img-icon {
    background: linear-gradient(135deg, #e8a838 0%, #f5c850 100%);
    box-shadow: 0 8px 24px rgba(232,168,56,0.4);
}
.about-point-icon.bg-gradient-1 { background: linear-gradient(135deg, #667eea, #764ba2) !important; }
.about-point-icon.bg-gradient-3 { background: linear-gradient(135deg, #4facfe, #00f2fe) !important; }
.about-point-icon.bg-gradient-4 { background: linear-gradient(135deg, #43e97b, #38f9d7) !important; }
.about-point-icon.bg-gradient-5 { background: linear-gradient(135deg, #fa709a, #fee140) !important; }

/* ---- How-it-works: vivid pastel gradient bg ---- */
.how-it-works-section {
    background: linear-gradient(135deg, #f0f3ff 0%, #fdf0ff 50%, #effffa 100%);
    position: relative;
    overflow: hidden;
}
.how-it-works-section > .container { position: relative; }
/* Step cards — each gets a unique vivid top color */
.how-it-works-section .row > div:nth-child(1) .step-card { border-top: 4px solid #667eea; }
.how-it-works-section .row > div:nth-child(2) .step-card { border-top: 4px solid #10b981; }
.how-it-works-section .row > div:nth-child(3) .step-card { border-top: 4px solid #f97316; }
.how-it-works-section .row > div:nth-child(4) .step-card { border-top: 4px solid #ec4899; }
.how-it-works-section .step-card:hover { box-shadow: 0 20px 56px rgba(0,0,0,0.11); }

/* ---- Feature/benefits cards ---- */
.feature-card {
    border-top: 3px solid var(--accent);
}
.feature-card:hover {
    border-top-color: #7c3aed;
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* ---- bg-gradient utilities: vivid ---- */
.bg-gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; }
.bg-gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; }
.bg-gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important; }
.bg-gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important; }
.bg-gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important; }
.bg-gradient-6 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%) !important; }

/* ---- Income section: dark vivid ---- */
.income-dark-section {
    background: linear-gradient(135deg, #07122a 0%, #0e2356 55%, #07122a 100%);
}
.income-dark-section .section-label {
    background: rgba(232,168,56,0.15);
    color: #f5c850;
    border-color: rgba(232,168,56,0.3);
}
.income-dark-section .section-title { color: #fff; }
.income-dark-section .text-muted { color: rgba(255,255,255,0.6) !important; }
.income-dark-section .text-accent { color: #f5c850; }
.income-dark-section .income-hl-item {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    box-shadow: none;
}
.income-dark-section .income-hl-item strong { color: #f0f4ff; }
.income-dark-section .income-hl-item span { color: rgba(255,255,255,0.55); }
.income-dark-section .feature-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 3px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    box-shadow: none;
}
.income-dark-section .feature-card h5 { color: #e2e8f0; }
.income-dark-section .feature-card p { color: rgba(255,255,255,0.55); }
.income-dark-section .feature-card:hover {
    border-top-color: #f5c850;
    background: rgba(255,255,255,0.09);
    box-shadow: 0 16px 48px rgba(0,0,0,0.35);
    transform: translateY(-6px);

}
.income-dark-section .btn-primary-custom {
    background: linear-gradient(135deg, #e8a838 0%, #f5c850 100%);
    color: #07122a;
}

/* ---- Counters: vivid accent ---- */
.counters-section .counter-icon { color: rgba(255,255,255,0.92); text-shadow: 0 0 20px rgba(255,255,255,0.3); }
.counters-section .counter-value { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.2); }
.counters-section p { color: rgba(255,255,255,0.8); letter-spacing: 1.2px; }

/* ---- Referral section visual ---- */
.referral-visual {
    background: linear-gradient(135deg, #f5f0ff 0%, #fdf2ff 50%, #f0f8ff 100%);
    border: 1px solid rgba(124,58,237,0.12);
    box-shadow: 0 10px 50px rgba(124,58,237,0.07);
}
.level-pill:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.15);
}

/* ---- Coordinator ranks section ---- */
.section-coordinator {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
}

/* ---- Welfare cards: vivid solid top border ---- */
.welfare-card { border-top: 5px solid; }
.welfare-card::before { display: none; }
.welfare-emergency   { border-top-color: #e11d48; }
.welfare-kanyadaan   { border-top-color: #ec4899; }
.welfare-social      { border-top-color: #3b82f6; }
.welfare-rojgar      { border-top-color: #10b981; }
.welfare-rojgar-sub  { border-top-color: #f59e0b; }
.welfare-emergency  .welfare-icon { background: rgba(225,29,72,0.09);  color: #e11d48; }
.welfare-kanyadaan  .welfare-icon { background: rgba(236,72,153,0.09); color: #ec4899; }
.welfare-social     .welfare-icon { background: rgba(59,130,246,0.09); color: #3b82f6; }
.welfare-rojgar     .welfare-icon { background: rgba(16,185,129,0.09); color: #10b981; }
.welfare-rojgar-sub .welfare-icon { background: rgba(245,158,11,0.09); color: #f59e0b; }
.welfare-samihik     { border-top-color: #8b5cf6; }
.welfare-samihik    .welfare-icon { background: rgba(139,92,246,0.09); color: #8b5cf6; }
.welfare-card:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(0,0,0,0.12); }

/* ---- FAQ section ---- */
.section-faq {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
}
.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(124,58,237,0.05), rgba(59,130,246,0.05));
    color: #5b21b6;
    box-shadow: none;
    border-left: 3px solid #7c3aed;
    padding-left: calc(1.5rem - 3px);
}
.faq-img-block {
    background: linear-gradient(135deg, #f0f3ff 0%, #faf0ff 100%);
    border: 1px solid rgba(124,58,237,0.15);
}
.faq-visual .btn-primary-custom {
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(124,58,237,0.35);
}
.faq-visual .btn-primary-custom:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 10px 32px rgba(124,58,237,0.45);
}

/* ---- News cards ---- */
.news-card { border-top: 3px solid #3b82f6; }
.news-card-header .news-type {
    background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(59,130,246,0.1));
    color: #5b21b6;
    border: 1px solid rgba(124,58,237,0.15);
}

/* ---- CTA section: light buttons + vivid features check ---- */
.cta-enhanced .btn-primary-custom {
    background: #fff;
    color: #0b1d3e;
    box-shadow: 0 4px 20px rgba(255,255,255,0.2);
}
.cta-enhanced .btn-primary-custom:hover {
    background: linear-gradient(135deg, #e8a838 0%, #f5c850 100%);
    color: #0b1d3e;
    box-shadow: 0 10px 32px rgba(232,168,56,0.45);
}
.cta-features i { color: #6ee7b7; }
.cta-shapes .cta-shape { opacity: 0.05; background: #fff; }

/* ---- btn-lg: matching size ---- */
.btn-white-custom.btn-lg,
.btn-primary-custom.btn-lg,
.btn-outline-custom.btn-lg {
    padding: 0.9rem 2.5rem !important;
    font-size: 1.05rem !important;
}

/* 
   PANEL-CARD COMPONENT  (used throughout member & admin pages)
    */
.panel-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.panel-card-header {
    background: var(--primary);
    color: #fff;
    padding: .85rem 1.25rem;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.panel-card-body {
    padding: 1.25rem;
}

/* 
   TABLE HORIZONTAL SCROLL  — universal inside panel regions
    */
.panel-body .table-responsive,
.panel-card .table-responsive,
.data-table,
.dash-card .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 
   FUND CHART (request_donation page)
    */
.fund-chart-mini {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    font-size: .82rem;
}
.fund-chart-mini-title {
    background: var(--primary);
    color: #fff;
    padding: .45rem .9rem;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .3px;
}
.fund-chart-row {
    display: flex;
    justify-content: space-between;
    padding: .35rem .9rem;
    border-bottom: 1px solid #f0f4fa;
    font-size: .8rem;
    color: #374151;
}
.fund-chart-row:last-child { border-bottom: none; }
.fund-chart-row.fcr-active {
    background: #eff6ff;
    color: var(--primary);
    font-weight: 700;
}
.you-badge {
    background: #4338ca;
    color: #fff;
    font-size: .65rem;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 700;
    margin-left: 4px;
}

/* 
   NAV TABS CUSTOM  (security.php and other pages)
    */
.nav-tabs-custom {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
    gap: 0;
}
.nav-tabs-custom .nav-item { display: flex; }
.nav-tab-link {
    display: block;
    padding: .6rem 1.25rem;
    text-decoration: none;
    color: var(--gray);
    font-weight: 600;
    font-size: .88rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}
.nav-tab-link:hover { color: var(--primary); }
.nav-tab-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* 
   HIDE TOPBAR "Visit Website" ON TABLETS TOO
    */
@media (max-width: 1199.98px) {
    .panel-topbar .user-info > a.btn { display: none !important; }
}

/* 
   TABLET  (769 – 991 px)
    */
@media (min-width: 769px) and (max-width: 991.98px) {
    .panel-body { padding: 1rem; }
    .panel-topbar { padding: .7rem 1.25rem; }
    /* 4-col stat grids  2-col on tablet */
    .panel-body .row > .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
    /* table-header: allow wrap */
    .data-table .table-header { flex-wrap: wrap; gap: .5rem; }
}

/* 
   MOBILE  ( 768 px)
    */
@media (max-width: 768px) {
    /* Panel body */
    .panel-body { padding: .75rem; }

    /* Topbar */
    .panel-topbar { padding: .55rem .85rem; gap: .5rem; }
    .panel-topbar h5 {
        font-size: .84rem;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .panel-topbar .user-info { gap: 6px; }
    /* Hide verbose items – keep bell + avatar */
    .panel-topbar .user-info > div:not(.notif-bell-wrap):not([class*="avatar"]) { display: none !important; }
    .panel-topbar .user-info > span { display: none !important; }
    .panel-topbar .user-info > a.btn { display: none !important; }

    /* All tables inside panels: horizontal scroll */
    .panel-body table,
    .panel-card table,
    .data-table table,
    .dash-card table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* table-header strip */
    .data-table .table-header {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }
    .data-table .table-header h5 { font-size: .88rem; }
    .data-table .table-header .input-group,
    .data-table .table-header select { width: 100% !important; max-width: 100% !important; }

    /* panel-card padding */
    .panel-card-body { padding: .85rem; }
    .panel-card-header { padding: .65rem .9rem; font-size: .84rem; }

    /* dash-card */
    .dash-card { padding: 1rem; }
    .dash-card .dash-value { font-size: 1.15rem; }
    .dash-card .dash-icon { width: 44px; height: 44px; font-size: 1.1rem; }

    /* stat-card */
    .stat-card { padding: 1rem; min-height: 90px; }
    .stat-card .stat-value { font-size: 1.15rem; }
    .stat-card .stat-icon { width: 40px; height: 40px; font-size: .95rem; }

    /* Button sizes in tables */
    .data-table .btn-sm,
    .panel-card .btn-sm,
    .panel-body table .btn-sm { padding: .22rem .5rem; font-size: .73rem; }

    /* Modals */
    .modal-dialog { margin: .75rem auto; }
    .modal-header { padding: .85rem 1rem; }
    .modal-body   { padding: .85rem 1rem; }
    .modal-footer { padding: .6rem 1rem; flex-wrap: wrap; gap: .4rem; }
    .modal-footer .btn { flex: 1 1 auto; min-width: 120px; }

    /* Alert banners */
    .alert { padding: .6rem .85rem; font-size: .83rem; }

    /* notification dropdown full width */
    .notif-dropdown { width: calc(100vw - 20px); right: -6px; max-height: 75vh; overflow-y: auto; }

    /* Tree page: always scroll */
    .tree-container { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }

    /* Fund chart: smaller on mobile */
    .fund-chart-mini { font-size: .77rem; }
    .fund-chart-row { padding: .28rem .75rem; }

    /* Row-of-cards */
    .row.g-3 > .col-6 { padding-left: .4rem; padding-right: .4rem; }

    /* Stat card grids: force 2-per-row on mobile (col-md-3 / col-lg-3 each) */
    .panel-body .row > .col-md-3,
    .panel-body .row > .col-lg-3 {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    /* Two-col form rows: keep label + control readable */
    .panel-body .row > .col-md-6,
    .panel-body .row > .col-md-4,
    .panel-body .row > .col-md-8 {
        margin-bottom: .25rem;
    }

    /* Prevent iOS Safari from zooming on input focus */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea { font-size: max(16px, .875rem) !important; }

    /* Tabs: scroll instead of wrap */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: none; }
    .nav-tabs .nav-link { white-space: nowrap; flex-shrink: 0; }

    /* Badge row flex: wrap gracefully */
    .d-flex.gap-2 { flex-wrap: wrap; }
}

/* 
   SMALL MOBILE  ( 480 px)
    */
@media (max-width: 480px) {
    .panel-body { padding: .5rem; }
    .panel-topbar { padding: .45rem .6rem; }
    .panel-topbar h5 { font-size: .75rem; max-width: 100px; }
    .sidebar-toggle { width: 34px; height: 34px; font-size: .85rem; }

    .dash-card { padding: .8rem; }
    .dash-card .dash-value { font-size: .98rem; }
    .dash-card .dash-label { font-size: .6rem; }
    .dash-card .dash-icon { width: 38px; height: 38px; font-size: 1rem; }

    .stat-card { padding: .75rem; }
    .stat-card .stat-value { font-size: .92rem; }
    .stat-card .stat-label { font-size: .6rem; }
    .stat-card .stat-icon { width: 34px; height: 34px; font-size: .82rem; }

    /* Full-screen modals on very small devices */
    .modal-dialog { margin: 0; max-width: 100%; border-radius: 0; }
    .modal-content { border-radius: 0; }

    /* Action buttons: smaller */
    .panel-body .btn-sm { font-size: .7rem; padding: .2rem .45rem; }
}

/* 
   SIDEBAR CLOSE OVERLAY  — ensure it's above everything
    */
.sidebar-backdrop { z-index: 98; }
.sidebar { z-index: 99; }
.panel-topbar { z-index: 97; }

/* ══════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE TABLE  (.rt)
   Add class="... rt" to any <table> to enable mobile card-view.
   JS in main.js auto-assigns data-label from thead > th text.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    table.rt thead { display: none; }

    table.rt tbody tr {
        display:        block;
        width:          100%;
        background:     #fff;
        border:         1px solid #e3eaf3;
        border-radius:  12px;
        margin-bottom:  .75rem;
        padding:        .65rem 1rem;
        box-shadow:     0 1px 6px rgba(0,0,0,.07);
        box-sizing:     border-box;
    }

    /* Empty / colspan rows stay normal */
    table.rt tbody tr.rt-empty       { background: transparent; border: none; box-shadow: none; }
    table.rt tbody tr.rt-empty td    { display: table-cell !important; padding: 1rem; text-align: center; }
    table.rt tbody tr.rt-empty td::before { display: none; }

    table.rt tbody tr td {
        display:         flex;
        justify-content: space-between;
        align-items:     center;
        width:           100%;
        gap:             .4rem;
        border:          none;
        padding:         .3rem 0;
        font-size:       .85rem;
        border-bottom:   1px solid #f2f4f8;
        min-height:      1.8rem;
        box-sizing:      border-box;
    }
    table.rt tbody tr td:last-child { border-bottom: none; }

    /* LABEL — fixed 40% left side */
    table.rt tbody tr td::before {
        content:         attr(data-label);
        font-weight:     600;
        color:           #999;
        font-size:       .72rem;
        text-transform:  uppercase;
        letter-spacing:  .04em;
        flex:            0 0 40%;
        text-align:      left;
        white-space:     nowrap;
        overflow:        hidden;
        text-overflow:   ellipsis;
    }

    /* VALUE — fills remaining 60%, right-aligned */
    table.rt tbody tr td > * {
        flex:       1 1 auto;
        text-align: right;
        word-break: break-word;
    }
    table.rt tbody tr td > span,
    table.rt tbody tr td > div,
    table.rt tbody tr td > small,
    table.rt tbody tr td > strong,
    table.rt tbody tr td > a,
    table.rt tbody tr td > code { text-align: right; word-break: break-word; }

    /* Neutralise Bootstrap table-hover / table-striped in card mode */
    table.rt.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: transparent; background-color: transparent; }
    table.rt > :not(caption) > * > * { background-color: transparent !important; box-shadow: none; }

    /* Cells with no data-label (colspan etc.) fall back to full width */
    table.rt tbody tr td[colspan] {
        justify-content: center;
        text-align:      center;
    }
    table.rt tbody tr td[colspan]::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MEMBER PANEL — GLOBAL MOBILE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page gradient banners: add class="pg-banner" to banner div ── */
@media (max-width: 767.98px) {
    .pg-banner { padding: 1.25rem !important; }
    /* Second column (big metric) centers below the description */
    .pg-banner .row > [class*="col-"]:last-child { text-align: center; margin-top: .5rem; }
    .pg-banner h5 { font-size: .95rem; }
    .pg-banner p  { font-size: .83rem; word-break: break-word; }
}
@media (max-width: 575.98px) {
    .pg-banner { padding: .9rem !important; border-radius: 10px !important; }
    .pg-banner .row > [class*="col-"] { text-align: center !important; }
}

/* ── Dash-label: allow wrapping — removes the ellipsis truncation ── */
@media (max-width: 767.98px) {
    .dash-card .dash-label {
        white-space: normal   !important;
        overflow:    visible  !important;
        text-overflow: initial !important;
        line-height: 1.3;
    }
}

/* ── Colored stat cards in 2-per-row (col-6) grid: stack + center ── */
@media (max-width: 767.98px) {
    /* Tighten padding so content fits */
    .col-6 .dash-card.colored { padding: .75rem .55rem !important; }

    /* Stack icon above label/value and center everything */
    .col-6 .dash-card.colored > .d-flex {
        flex-direction: column !important;
        align-items:    center !important;
        gap:            .3rem;
    }
    /* Icon: smaller, placed first (order: -1) */
    .col-6 .dash-card.colored .dash-icon {
        order:         -1;
        width:         30px !important;
        height:        30px !important;
        font-size:     .8rem !important;
        border-radius: 8px !important;
        flex-shrink:   0;
    }
    /* Text block: full width, centered */
    .col-6 .dash-card.colored > .d-flex > div:first-child {
        text-align: center;
        width: 100%;
    }
    .col-6 .dash-card.colored .dash-value { font-size: 1rem !important; }
    .col-6 .dash-card.colored small       { font-size: .62rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN PANEL — FULL MOBILE & TABLET RESPONSIVE (NATIVE APP FEEL)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Mobile Bottom Navigation Bar ───────────────────────────────────────── */
.admin-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 24px rgba(0,0,0,.08);
    z-index: 1000;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.admin-bottom-nav .bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: 56px;
}
.admin-bottom-nav .bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: #94a3b8;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .02em;
    position: relative;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
}
.admin-bottom-nav .bnav-item i {
    font-size: 1.1rem;
    transition: transform .15s;
}
.admin-bottom-nav .bnav-item.active {
    color: #4338ca;
}
.admin-bottom-nav .bnav-item.active i {
    transform: scale(1.12);
}
.admin-bottom-nav .bnav-item:active {
    color: #4338ca;
}
.admin-bottom-nav .bnav-item:active i {
    transform: scale(.92);
}
.admin-bottom-nav .bnav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    background: #ef4444;
    color: #fff;
    font-size: .55rem;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.admin-bottom-nav .bnav-item .bnav-dot {
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4338ca;
    display: none;
}
.admin-bottom-nav .bnav-item.active .bnav-dot {
    display: block;
}

/* ── Safe Area for notched phones ──────────────────────────────────────── */
@supports (padding: max(0px)) {
    .panel-body {
        padding-left: max(.75rem, env(safe-area-inset-left));
        padding-right: max(.75rem, env(safe-area-inset-right));
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET BREAKPOINT (768px – 991px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Settings page: sidebar nav becomes horizontal tabs */
    .settings-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: .35rem !important;
        padding-bottom: .25rem;
    }
    .settings-nav .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        padding: .5rem .85rem !important;
        font-size: .8rem !important;
    }

    /* Table filter bars */
    .data-table .table-header form {
        flex-wrap: wrap;
        gap: .4rem;
    }
    .data-table .table-header form input[style*="width"],
    .data-table .table-header form select[style*="width"] {
        width: auto !important;
        min-width: 140px;
        flex: 1;
    }

    /* Pending page stats */
    .panel-body > .d-flex.align-items-start.justify-content-between {
        flex-direction: column;
    }

    /* Action button groups in tables */
    .data-table td .d-flex.gap-1,
    .data-table td .d-flex.gap-2 {
        flex-wrap: wrap;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BREAKPOINT (≤ 767px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ── Show bottom nav ──────────────────────────────────────────────── */
    .admin-bottom-nav { display: block; }

    /* Add bottom padding to panel-body so content isn't hidden behind bottom nav */
    .panel-body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 8px)) !important;
    }

    /* ── Settings Page Nav: horizontal pills ──────────────────────────── */
    .panel-body > .row.g-4 > .col-lg-3 {
        order: -1;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: .5rem;
    }
    .panel-body > .row.g-4 > .col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .settings-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: .3rem !important;
        padding-bottom: .35rem;
        scrollbar-width: none;
    }
    .settings-nav::-webkit-scrollbar { display: none; }
    .settings-nav .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        padding: .45rem .75rem !important;
        font-size: .78rem !important;
        border-radius: 20px !important;
    }
    .settings-nav .nav-link i { display: none !important; }
    .settings-nav .section-card { padding: .5rem !important; }

    /* ── Section cards on mobile ──────────────────────────────────────── */
    .section-card {
        padding: 1rem !important;
        border-radius: 10px !important;
    }
    .section-card .section-title {
        font-size: .9rem !important;
        margin-bottom: 1rem !important;
    }

    /* ── Form improvements ────────────────────────────────────────────── */
    /* Override inline widths on search/filter inputs */
    .data-table .table-header form input[style*="width"],
    .data-table .table-header form select[style*="width"],
    .panel-body form input[style*="width:2"],
    .panel-body form input[style*="width:1"],
    .panel-body form select[style*="width:1"],
    .panel-body form select[style*="width:9"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Filter form stacking */
    .data-table .table-header form.d-flex {
        flex-direction: column !important;
        width: 100%;
        gap: .4rem !important;
    }
    .data-table .table-header form.d-flex > * {
        width: 100% !important;
    }

    /* Input groups: prevent overflow */
    .input-group {
        flex-wrap: nowrap;
    }
    .input-group .form-control,
    .input-group .form-select {
        min-width: 0;
    }

    /* Logo upload preview */
    .logo-preview-box {
        width: 120px !important;
        height: 60px !important;
    }

    /* Settings file input */
    .panel-body input[type="file"][style*="max-width"] {
        max-width: 100% !important;
    }

    /* Color inputs in settings */
    .hex-input[style*="max-width"] {
        max-width: 80px !important;
    }

    /* ── Page header sections ─────────────────────────────────────────── */
    .panel-body > .d-flex.align-items-start.justify-content-between {
        flex-direction: column !important;
        gap: .75rem !important;
    }
    .panel-body > .d-flex.align-items-start.justify-content-between > .d-flex.gap-2 {
        width: 100%;
        justify-content: space-between;
    }
    .panel-body > .d-flex.align-items-start.justify-content-between h4 {
        font-size: 1rem !important;
    }

    /* ── Pending page stat boxes ──────────────────────────────────────── */
    .panel-body > .d-flex > .text-center.px-3 {
        flex: 1;
        min-width: 0 !important;
        padding: .4rem .5rem !important;
    }
    .panel-body > .d-flex > .text-center.px-3 .fw-bold.fs-5 {
        font-size: 1.1rem !important;
    }

    /* ── Tab navigation: mobile scroll ────────────────────────────────── */
    #pendingTabs,
    .nav.mb-4 {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    #pendingTabs::-webkit-scrollbar,
    .nav.mb-4::-webkit-scrollbar { display: none; }
    #pendingTabs .nav-link,
    .nav.mb-4 .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: .82rem !important;
        padding: .5rem .85rem !important;
    }

    /* ── Pending page cards: full width ───────────────────────────────── */
    .tab-content .col-xl-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ── Action buttons: touch-friendly ───────────────────────────────── */
    .panel-body .d-flex.gap-2.flex-wrap .btn,
    .panel-body .d-flex.gap-1 .btn {
        min-height: 40px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Pending card action buttons: stack on mobile */
    .panel-body .d-flex.gap-2.flex-wrap.mt-auto {
        flex-direction: column !important;
    }
    .panel-body .d-flex.gap-2.flex-wrap.mt-auto .btn,
    .panel-body .d-flex.gap-2.flex-wrap.mt-auto form {
        width: 100% !important;
    }
    .panel-body .d-flex.gap-2.flex-wrap.mt-auto form .btn {
        width: 100% !important;
    }
    .panel-body .d-flex.gap-2.flex-wrap.mt-auto > a.btn {
        text-align: center;
    }

    /* ── Table action buttons: better flex ────────────────────────────── */
    table td .d-flex.gap-1 {
        gap: .35rem !important;
    }
    table td .d-flex.gap-1 .btn-sm,
    table td .d-flex.gap-2 .btn-sm {
        min-width: 34px;
        min-height: 34px;
        padding: .3rem .5rem !important;
        font-size: .78rem !important;
    }

    /* ── Pagination: touch-friendly ──────────────────────────────────── */
    .pagination .page-link {
        min-width: 38px;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .82rem;
    }

    /* ── Withdrawal/deposit txn ref input ────────────────────────────── */
    input[name="txn_ref"][style*="width:100px"] {
        width: 100% !important;
    }

    /* ── Tree page: horizontal scroll + mobile-friendly ──────────────── */
    .tree-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px !important;
    }
    .tree-node {
        min-width: 100px !important;
        padding: .6rem .75rem !important;
        font-size: .8rem;
    }

    /* ── Repurchase income level select ───────────────────────────────── */
    select[name="level"][style*="width:90px"] {
        width: 100% !important;
    }

    /* ── Search input in pending tab ──────────────────────────────────── */
    .position-relative[style*="max-width:340px"] {
        max-width: 100% !important;
    }

    /* ── Alerts: mobile compact ──────────────────────────────────────── */
    .panel-body .alert {
        padding: .55rem .75rem !important;
        font-size: .82rem !important;
        border-radius: 8px !important;
    }

    /* ── Donation/fund cards ──────────────────────────────────────────── */
    .panel-card-body .row > .col-md-6,
    .panel-card-body .row > .col-md-4 {
        margin-bottom: .5rem;
    }

    /* ── Member view: profile header mobile ───────────────────────────── */
    .panel-body > .rounded-4 > .d-flex.align-items-center.gap-3 {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* ── Coordinators page: card layout adaption ──────────────────────── */
    .panel-body .col-xl-6.col-lg-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ── Fund/Awards pages: address truncation fix ────────────────────── */
    td[style*="max-width:180px"] {
        max-width: 140px !important;
    }

    /* ── KYC pill links: wrap properly ────────────────────────────────── */
    .d-flex.flex-wrap.gap-2 a.rounded-pill {
        font-size: .7rem !important;
        padding: .2rem .5rem !important;
    }

    /* ── Modal enhancements: near full screen ─────────────────────────── */
    .modal-dialog {
        margin: .5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
    .modal-dialog-centered {
        min-height: calc(100vh - 1rem);
    }
    .modal-content {
        border-radius: 16px !important;
    }
    .modal-header {
        padding: .75rem 1rem !important;
    }
    .modal-body {
        padding: .75rem 1rem !important;
    }
    .modal-footer {
        padding: .5rem .75rem !important;
        flex-wrap: wrap;
        gap: .4rem;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 100px;
        min-height: 40px;
    }

    /* ── Notification page: mobile compact ────────────────────────────── */
    .notif-page-item {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
    .notif-page-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: .85rem !important;
    }

    /* ── Bootstrap grid fix: force search/filter inputs full-width ─── */
    .panel-body form.d-flex.gap-2[method="GET"] {
        flex-direction: column !important;
        width: 100% !important;
    }
    .panel-body form.d-flex.gap-2[method="GET"] > * {
        width: 100% !important;
    }

    /* ── Orders/Donations search input override ──────────────────────── */
    input[name="q"][style*="width:220px"],
    input[name="search"][style*="width:220px"],
    input[name="search"][style*="width:200px"] {
        width: 100% !important;
    }

    /* ── Slider/Image grid: 2 columns on mobile ──────────────────────── */
    .panel-body .row.g-3 > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ── Settings security form max-width ─────────────────────────────── */
    form[style*="max-width:420px"] {
        max-width: 100% !important;
    }

    /* ── Signature line widths ────────────────────────────────────────── */
    div[style*="width:170px"][style*="height:1px"] {
        width: 120px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   SMALL MOBILE BREAKPOINT (≤ 480px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* Even tighter panel body */
    .panel-body {
        padding-left: .4rem !important;
        padding-right: .4rem !important;
    }

    /* Section cards */
    .section-card {
        padding: .75rem !important;
    }

    /* Settings nav pills: even smaller */
    .settings-nav .nav-link {
        padding: .35rem .6rem !important;
        font-size: .72rem !important;
    }

    /* Page header titles */
    .panel-body h4 {
        font-size: .92rem !important;
    }

    /* Stat boxes in pending */
    .panel-body > .d-flex > .text-center.px-3 {
        padding: .3rem .35rem !important;
    }
    .panel-body > .d-flex > .text-center.px-3 .fw-bold.fs-5 {
        font-size: .95rem !important;
    }
    .panel-body > .d-flex > .text-center.px-3 div[style*="font-size:.7rem"] {
        font-size: .6rem !important;
    }

    /* Tab pills */
    #pendingTabs .nav-link {
        font-size: .75rem !important;
        padding: .4rem .65rem !important;
    }

    /* Pending card header text */
    .panel-body .rounded-4 .px-4.py-3 {
        padding: .6rem .75rem !important;
    }
    .panel-body .rounded-4 .px-4.py-3 .fw-bold.text-white {
        font-size: .85rem !important;
    }

    /* Pending card body */
    .panel-body .rounded-4 .p-4.flex-grow-1 {
        padding: .75rem !important;
    }

    /* Card inner summary box */
    .panel-body .rounded-3.p-3.mb-3[style*="background:#f8faff"] {
        padding: .65rem !important;
    }

    /* Membership coupon card */
    .panel-body .rounded-3.overflow-hidden[style*="background:linear-gradient"] .px-3.py-2 {
        padding: .4rem .5rem !important;
    }

    /* Action buttons: full width stack */
    .panel-body .d-flex.gap-2.flex-wrap .btn {
        font-size: .8rem !important;
    }

    /* No proof table: make rows feel like cards */
    .panel-body .rounded-4 table td .d-flex.gap-2.align-items-center {
        flex-wrap: wrap !important;
        gap: .3rem !important;
    }

    /* Slider images: single column on very small */
    .panel-body .row.g-3 > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Bottom nav: slightly smaller */
    .admin-bottom-nav .bottom-nav-inner {
        height: 52px;
    }
    .admin-bottom-nav .bnav-item {
        font-size: .58rem;
    }
    .admin-bottom-nav .bnav-item i {
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ULTRA-SMALL MOBILE (≤ 360px)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .panel-topbar h5 {
        font-size: .7rem !important;
        max-width: 80px !important;
    }
    .sidebar-toggle {
        width: 30px !important;
        height: 30px !important;
        font-size: .8rem !important;
    }

    /* Dash cards: tighter grid */
    .row.g-3 > .col-6 {
        padding-left: .25rem !important;
        padding-right: .25rem !important;
    }
    .dash-card .dash-value { font-size: .88rem !important; }
    .dash-card .dash-label { font-size: .55rem !important; }
    .dash-card .dash-icon { width: 32px !important; height: 32px !important; font-size: .85rem !important; }

    /* Settings nav */
    .settings-nav .nav-link {
        padding: .3rem .5rem !important;
        font-size: .68rem !important;
    }
}

/* ── Touch interaction improvements ──────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Enlarge touch targets */
    .sidebar .nav-link {
        padding: .75rem 1rem !important;
        min-height: 44px;
    }
    .sidebar .nav-sub-link {
        padding: .6rem 1rem .6rem 2.5rem !important;
        min-height: 40px;
    }

    /* Remove hover effects on touch */
    .dash-card:hover,
    .stat-card:hover,
    .feature-card:hover {
        transform: none !important;
    }

    /* Smooth scrolling everywhere */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent text selection on nav items */
    .admin-bottom-nav,
    .sidebar .nav-link,
    .settings-nav .nav-link {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ── Member View: tabs horizontal scroll on mobile ─────────────────── */
@media (max-width: 767px) {
    .nav-tabs-admin {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding-bottom: 2px;
    }
    .nav-tabs-admin::-webkit-scrollbar { display: none; }
    .nav-tabs-admin .nav-item { flex-shrink: 0; }
    .nav-tabs-admin .nav-link {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: .78rem;
    }
    .nav-tabs-admin .nav-link i { margin-right: 4px !important; }

    /* Info rows stack on narrow screens */
    .info-row {
        flex-direction: column;
        gap: 2px;
        padding: 8px 16px;
    }
    .info-row .lbl {
        min-width: unset;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .3px;
    }
    .info-row .val { font-size: .88rem; }

    /* Profile card header adjust */
    .profile-card .profile-header { padding: 20px 16px 16px; }
    .member-avatar-lg { width: 64px; height: 64px; font-size: 1.6rem; }

    /* Section card body tighter */
    .section-card .section-card-body { padding: 14px; }
    .section-card .section-card-header { padding: 10px 14px; font-size: .84rem; }

    /* Stat mini cards */
    .stat-mini { padding: 10px 12px; }
    .stat-mini .sm-val { font-size: 1.15rem; }
    .stat-mini .sm-lbl { font-size: .68rem; }

    /* KYC file thumbs */
    .kyc-file-thumb { width: 72px; height: 72px; }
    .kyc-file-doc { width: 72px; height: 72px; }

    /* Coordinator assign level select — remove fixed width */
    .form-select[name="level"] { max-width: 100% !important; width: 100% !important; }

    /* Orders/withdrawals status tabs scroll */
    .d-flex.gap-2.mb-3.flex-wrap {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .d-flex.gap-2.mb-3.flex-wrap::-webkit-scrollbar { display: none; }
    .d-flex.gap-2.mb-3.flex-wrap > .btn { flex-shrink: 0; white-space: nowrap; }

    /* Header banner responsive */
    div[style*="padding:1.5rem 2rem"] {
        padding: 1rem 1.2rem !important;
    }
    div[style*="padding:1.5rem 2rem"] h5 { font-size: 1rem; }
    div[style*="padding:1.5rem 2rem"] p { font-size: .82rem !important; }
    div[style*="font-size:1.8rem"] { font-size: 1.4rem !important; }

    /* Action btn row wrap */
    .action-btn-row { gap: 6px; }
    .action-btn-row .btn { font-size: .78rem; padding: 4px 10px; }

    /* Coordinator level cards smaller */
    .col-lg-2.col-md-4.col-6 .dash-card { padding: 8px 6px !important; }
    .col-lg-2.col-md-4.col-6 .dash-card .fs-5 { font-size: 1rem !important; }
    .col-lg-2.col-md-4.col-6 .dash-card i { font-size: 1rem !important; }

    /* Fund page level breakdown cards */
    div[style*="border-left:4px solid"] {
        padding: .65rem .8rem !important;
    }
    div[style*="border-left:4px solid"] div[style*="width:40px"] {
        width: 32px !important;
        height: 32px !important;
        font-size: .78rem !important;
    }
}

/* ── Ultra-small: additional tweaks ────────────────────────────────── */
@media (max-width: 360px) {
    .nav-tabs-admin .nav-link { padding: 6px 8px; font-size: .72rem; }
    .stat-mini .sm-val { font-size: 1rem; }
    .action-btn-row .btn { font-size: .72rem; padding: 3px 8px; }
}

/* ── Print: hide mobile-only elements ────────────────────────────────── */
@media print {
    .admin-bottom-nav { display: none !important; }
    .sidebar-toggle { display: none !important; }
    .sidebar-backdrop { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Coordinators · Deposits · Donations · Fund Requests · Awards
   Full mobile fix: no horizontal scroll, centered content, card tables
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Common: constrain panel-body width, allow child scroll containers ──── */
.panel-body {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* ── Scrollable tab/filter rows — override parent overflow so they can scroll ── */
/* Using a containing-block trick: children with overflow-x:auto still scroll   */
.overflow-x-auto {
    overflow-x: auto !important;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
/* Ensure panel-body doesn't clip horizontally-scrolling children */
.panel-body > .overflow-x-auto,
.panel-body > * > .overflow-x-auto {
    overflow-x: auto !important;
    max-width: 100%;
}

/* ── Ensure table-responsive allows touch scroll ───────────────────────── */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}


@media (max-width: 767px) {
    /* Stats banners (gradient headers) */
    .mb-4[style*="background:linear-gradient"],
    .mb-4[style*="background: linear-gradient"] {
        padding: 1rem !important;
        border-radius: 10px !important;
    }
    .mb-4[style*="background:linear-gradient"] h5,
    .mb-4[style*="background: linear-gradient"] h5 { font-size: .95rem !important; }
    .mb-4[style*="background:linear-gradient"] p,
    .mb-4[style*="background: linear-gradient"] p { font-size: .8rem !important; }

    /* Center both banner halves on mobile */
    .mb-4[style*="background:linear-gradient"] .row > div {
        text-align: center !important;
    }
    .mb-4[style*="background:linear-gradient"] .text-md-end { text-align: center !important; }

    /* ── Coordinator level breakdown: 3-per-row ─────────────────────────── */
    .row.g-2.mb-4 .col-lg-2.col-md-4.col-6 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
    .row.g-2.mb-4 .col-lg-2.col-md-4.col-6 .dash-card { padding: 8px 4px !important; }

    /* ── Nav tabs: horizontal scrollable ────────────────────────────────── */
    .nav.nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 3px;
    }
    .nav.nav-tabs::-webkit-scrollbar { display: none; }
    .nav.nav-tabs .nav-item { flex-shrink: 0; }
    .nav.nav-tabs .nav-link {
        white-space: nowrap;
        padding: 7px 12px !important;
        font-size: .8rem !important;
    }

    /* ── Filter forms: stack on mobile ──────────────────────────────────── */
    .dash-card form.row.g-2 > div,
    .data-table .p-3 form.row.g-2 > div {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ── Pagination: center ──────────────────────────────────────────────── */
    .d-flex.justify-content-between.align-items-center.mt-3 {
        flex-direction: column !important;
        gap: 8px !important;
        text-align: center;
    }

    /* ── Table header wrap ───────────────────────────────────────────────── */
    .data-table .table-header { flex-wrap: wrap; gap: 6px; }
    .data-table .table-header h5 { font-size: .9rem; flex: 1 1 100%; }

    /* ────────────────────────────────────────────────────────────────────
       RESPONSIVE TABLE → CARD LAYOUT
       Tables with class "rt" convert to stacked card rows on mobile
       ──────────────────────────────────────────────────────────────────── */
    .rt thead { display: none !important; }
    .rt,
    .rt tbody,
    .rt tr,
    .rt td {
        display: block !important;
        width: 100% !important;
    }
    .rt tr {
        background: #fff;
        border: 1px solid #e3eaf3;
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 10px 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .rt td {
        padding: 5px 0 !important;
        border: none !important;
        font-size: .86rem !important;
        display: flex !important;
        align-items: flex-start;
        gap: 8px;
        min-height: unset !important;
        text-align: left !important;
    }
    .rt td[data-label]::before {
        content: attr(data-label);
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: #8492a6;
        min-width: 90px;
        flex-shrink: 0;
        padding-top: 2px;
    }
    .rt td[style*="max-width"] { max-width: 100% !important; }
    .rt td:last-child {
        flex-wrap: wrap;
        padding-top: 8px !important;
        border-top: 1px solid #f0f4f8 !important;
        margin-top: 4px;
        gap: 6px !important;
    }
    .rt .d-inline-block.text-truncate {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    .rt td .d-flex.gap-1.justify-content-center.align-items-center {
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }
    .rt td .form-select { max-width: 160px; }
    .rt td small { white-space: normal !important; word-break: break-word; }

    /* ── Deposits: action row stack ─────────────────────────────────────── */
    .d-flex.gap-2.pt-2 {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .d-flex.gap-2.pt-2 form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    .d-flex.gap-2.pt-2 form .btn { width: 100%; justify-content: center; }

    /* ── Donations summary cards: reduce label/value ─────────────────────── */
    .row.g-3.mb-4 > .col-4 .dash-card .dash-label { font-size: .62rem !important; }
    .row.g-3.mb-4 > .col-4 .dash-card .dash-value { font-size: 1rem !important; }
    .row.g-3.mb-4 > .col-4 .dash-card .dash-icon { display: none; }

    /* ── Donation form: stacked on mobile ────────────────────────────────── */
    .row.g-4 > .col-lg-4,
    .row.g-4 > .col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* ── Panel body tighter padding ─────────────────────────────────────── */
    .panel-body { padding: 0.85rem !important; }

    /* ── Eligibility cards: tighter ─────────────────────────────────────── */
    .col-md-6.col-lg-4 .dash-card { padding: 1rem !important; }

    /* ── Honor kit btn size ─────────────────────────────────────────────── */
    .btn.btn-xs { font-size: .78rem; padding: 4px 10px; }

    /* ── Coordinator search form: full width ─────────────────────────────── */
    .dash-card.mb-4 form .col-md-4,
    .dash-card.mb-4 form .col-6.col-md-3,
    .dash-card.mb-4 form .col-md-auto {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .dash-card.mb-4 form .col-md-auto.ms-auto { margin-left: 0 !important; }
}

/* ── Very small phones (≤ 480px) ────────────────────────────────────────── */
@media (max-width: 480px) {
    .panel-body { padding: 0.65rem !important; }

    .row.g-2.mb-4 .col-lg-2.col-md-4.col-6 .dash-card { padding: 6px 2px !important; }
    .row.g-2.mb-4 .col-lg-2.col-md-4.col-6 .dash-card div[style*="font-size:.74rem"] {
        font-size: .65rem !important;
    }
    .mb-4[style*="background:linear-gradient"] .fw-bold.fs-4 { font-size: 1.2rem !important; }

    /* Fund-request stat cards: 2×2 grid */
    .row.g-3.mb-4 > .col-6.col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; }
    /* Awards stat cards: 2×2 grid */
    .row.g-3.mb-4 > .col-6.col-lg-3 { flex: 0 0 50% !important; max-width: 50% !important; }

    .rt tr { padding: 8px 10px; }
    .rt td[data-label]::before { min-width: 80px; font-size: .68rem; }
    .rt td { font-size: .82rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEMBER PANEL — GLOBAL MOBILE RESPONSIVE
   Covers all 38 member pages without modifying individual PHP files.
   ══════════════════════════════════════════════════════════════════════════ */

/* Nav tabs — scrollable everywhere (tree, coordinator, profile, income…) */
.nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-item { flex-shrink: 0; }

/* data-table header always wraps */
.table-header { flex-wrap: wrap; gap: 0.5rem; }

/* Referral link inputs shrink with container */
.dash-card .d-flex.gap-2 input[type="text"].form-control { min-width: 0; flex: 1 1 0; }

/* Gradient banners — center content */
[style*="background:linear-gradient"] .row.align-items-center > div,
[style*="background: linear-gradient"] .row.align-items-center > div { text-align: center; }

/* ── Tablet + Mobile ≤ 767px ─────────────────────────────────────────────── */
@media (max-width: 767px) {
    .panel-body { padding: 1rem 0.75rem !important; }

    /* Stack all Bootstrap lg columns to full width */
    .col-lg-8, .col-lg-4, .col-lg-6, .col-lg-3,
    .col-lg-9, .col-lg-5, .col-lg-7, .col-lg-2 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Stat card text */
    .dash-value { font-size: 1.1rem !important; }
    .dash-label { font-size: 0.7rem !important; }
    .dash-card  { padding: 14px !important; }

    /* Gradient banners */
    [style*="background:linear-gradient"]   { padding: 1.1rem 1rem !important; }
    [style*="background:linear-gradient"] h5,
    [style*="background:linear-gradient"] h4 { font-size: 0.95rem !important; }
    [style*="background:linear-gradient"] p  { font-size: .8rem !important; }

    /* Level breakdown grids */
    .row.g-3 > .col-lg-4 { flex: 0 0 100% !important; max-width: 100% !important; }
    .row.g-3 > .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Table headers */
    .table-header { flex-direction: column; align-items: flex-start !important; }

    /* Profile hero */
    .profile-hero { flex-direction: column !important; align-items: flex-start !important; padding: 16px !important; }
    .profile-hero-info h4 { font-size: 1.1rem !important; }
    .profile-hero-stats   { gap: 12px !important; }

    /* Info items */
    .info-item { flex-direction: column; gap: 1px; padding: 8px 14px; }
    .info-item .il { min-width: unset !important; font-size: .78rem; }

    /* Income stat cards: 2-per-row */
    .row.g-3.mb-4 > .col-lg-2,
    .row.g-3.mb-4 > .col-md-4 { flex: 0 0 50% !important; max-width: 50% !important; }

    /* Fixed widths that cause overflow */
    [style*="max-width:300px"] { max-width: 100% !important; }
    [style*="max-width: 300px"] { max-width: 100% !important; }

    /* Donation categories: 1 column */
    .row.g-3.p-3 > .col-md-4,
    .row.g-3.p-3 > .col-sm-6 { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Filter card rows */
    .card .card-body .row.g-2 > .col-6   { flex: 0 0 50% !important; max-width: 50% !important; }
    .card .card-body .row.g-2 > .col-12  { flex: 0 0 100% !important; max-width: 100% !important; }

    /* d-flex rows that aren't explicitly nowrap should wrap */
    .d-flex:not(.flex-nowrap):not(.input-group) { flex-wrap: wrap; }
}

/* ── Small phones ≤ 575px ────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .panel-body { padding: 0.65rem !important; }

    /* 2-column stat grid maintained */
    .col-6 { flex: 0 0 50% !important; max-width: 50% !important; }

    /* Referral link section: stack below input */
    .dash-card .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Shrink large display numbers */
    .fw-bold[style*="font-size:1.8rem"] { font-size: 1.2rem !important; }
    .fw-bold[style*="font-size:2rem"]   { font-size: 1.3rem !important; }

    /* Pagination */
    .pagination .page-link { padding: .3rem .55rem; font-size: .78rem; }

    /* Nav link font */
    .nav-tabs .nav-link { font-size: .76rem; padding: 8px 10px; }

    /* Profile tab content padding */
    .tab-content.p-4 { padding: 0.75rem !important; }
}