/* =========================================
   2. ADMIN DASHBOARD SPECIFIC STYLES
   ========================================= */

/* Layout: Flex container for Sidebar + Main */
.admin-wrapper { display: flex; height: 100vh; width: 100%; overflow: hidden; }

/* Sidebar (Left) - Flex Column for Scrolling */
.admin-sidebar {
    width: 250px;
    background-color: #0e2a42; /* Keeping your Theme Color */
    color: #fff;
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    height: 100vh;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    z-index: 100;
}

.sidebar-brand {
    padding: 25px 20px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: #0b2236;
    flex-shrink: 0; /* Prevents shrinking */
    position: relative;
}

/* SCROLLABLE MENU SECTION */
.sidebar-menu {
    flex-grow: 1; /* Takes up all available middle space */
    overflow-y: auto; /* Enables scrolling if list is long */
    padding-top: 20px;
}

/* Custom Scrollbar for Sidebar */
.sidebar-menu::-webkit-scrollbar { width: 5px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

.sidebar-menu ul { list-style: none; }
.sidebar-menu li { padding: 0; border-left: 4px solid transparent; transition: 0.3s; }
.sidebar-menu li:hover, .sidebar-menu li.active { background-color: rgba(255,255,255,0.05); border-left: 4px solid #3498db; }
.sidebar-menu a { 
    color: #b0c4d6; 
    font-size: 14px; 
    display: block; 
    padding: 15px 20px;
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}
.sidebar-menu a:hover { color: #fff; }
.sidebar-menu i { width: 25px; text-align: center; margin-right: 10px; } /* Icon spacing */

/* BOTTOM SIGN OUT BUTTON SECTION */
.sidebar-footer {
    padding: 20px;
    background: #0b2236;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0; /* Prevents shrinking */
}

.btn-signout {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff; /* White Button */
    color: #0e2a42; /* Dark Text */
    padding: 12px;
    border-radius: 8px; /* Rounded corners like image */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-signout:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    color: #e8491d;
}

.btn-signout i { margin-right: 10px; }

/* Sidebar collapsed state: narrower and icon-only */
.admin-sidebar { transition: width .28s ease; }
.admin-sidebar.collapsed { width: 72px !important; }
.admin-sidebar .sidebar-brand { padding-left: 12px; padding-right: 12px; }
.admin-sidebar .sidebar-brand .brand-text { display: inline-block; vertical-align: middle; }
.admin-sidebar .sidebar-brand .sidebar-toggle { position: absolute; right: 8px; top: 10px; background: transparent; border: 0; color: #fff; font-size: 16px; }
.admin-sidebar .sidebar-menu a { display: flex; align-items: center; gap: 10px; }
/* Labels animate when collapsing/expanding */
.admin-sidebar .sidebar-menu a .label { display: inline-block; opacity: 1; transform: none; transition: opacity .22s ease, transform .22s ease; }
.admin-sidebar.collapsed .sidebar-menu a { justify-content: center; }
.admin-sidebar.collapsed .sidebar-menu a .label { opacity: 0; transform: translateX(-6px); }
.admin-sidebar.collapsed .sidebar-footer { display: none; }

/* Adjust main content spacing when sidebar collapsed */
.admin-main { transition: margin-left .28s ease; }

/* Main Content Area (Right) */
.admin-main { 
    flex: 1; 
    background-color: #f0f3f5; 
    display: flex; 
    flex-direction: column; 
    height: 100vh;
    overflow-y: auto; /* Main content scrolls independently */
}
/* =========================================
   3. DASHBOARD CONTENT STYLES (Restored)
   ========================================= */

/* Content Padding */
.admin-content { 
    padding: 30px; 
    flex: 1; 
}

/* Header Date Styling */
.admin-header {
    background: #fff;
    height: 60px;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex-shrink: 0;
}
.header-date { font-size: 14px; color: #777; }
.user-info { font-weight: bold; color: #333; }
.user-info i { margin-right: 8px; color: #e8491d; }

/* Grid for Top Cards */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* KPI Cards (Dark Blue) */
.kpi-card {
    background-color: #0e2a42;
    color: #fff;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.kpi-title { 
    font-size: 12px; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    margin-bottom: 10px; 
    opacity: 0.8; 
}
.kpi-value { 
    font-size: 36px; 
    font-weight: 300; 
    margin: 10px 0; 
}
.kpi-sub { 
    font-size: 12px; 
    color: #8faec5; 
    line-height: 1.5; 
}

/* Payment Mode Block (Admin Dashboard Stack) */
.payment-stack { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    border-radius: 8px; 
    overflow: hidden; 
}
.pay-box {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: #fff;
    margin-bottom: 2px;
}
.pay-box:last-child { margin-bottom: 0; }
.pay-box.dcb { background-color: #0e2a42; } /* Darkest */
.pay-box.sms { background-color: #1b5e91; } /* Medium Blue */
.pay-box.ussd { background-color: #b5d6f5; color: #0e2a42; } /* Light Blue */

.pay-label { font-size: 14px; text-transform: uppercase; }
.pay-amount { font-size: 20px; font-weight: 400; }

/* Charts Section Grid */
.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}
/* Responsive adjust for charts on small screens */
@media (max-width: 900px) {
    .charts-grid { grid-template-columns: 1fr; }
}

/* Make chart canvases responsive and give them a stable height */
.chart-card canvas { width: 100% !important; display: block; }

/* Slightly reduce sidebar width on medium screens to preserve space */
@media (max-width: 1200px) {
    .admin-sidebar { width: 220px; }
}
@media (max-width: 992px) {
    .admin-sidebar { width: 200px; }
}

/* Chart/Content Card White Box */
.chart-card {
    background: #fff;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-radius: 8px;
    margin-bottom: 20px;
}
.chart-title { 
    font-size: 14px; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #555; 
    margin-bottom: 20px; 
    text-align: center; 
}

/* Tables (Restoring basic table styles) */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; }
/* =========================================
   4. RESPONSIVE MEDIA QUERIES (Updated)
   ========================================= */

/* Responsive table container used across admin pages */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* --- TABLET & SMALL DESKTOP (Max Width: 992px) --- */
@media (max-width: 992px) {
    .container { width: 90%; }
    /* Dashboard: 2 Columns for Cards */
    .cards-grid { grid-template-columns: 1fr 1fr; }
    /* Dashboard: Charts Stack */
    .charts-grid { grid-template-columns: 1fr; }
    /* Public: Eligibility Grid */
    .eligibility-grid { grid-template-columns: 1fr; gap: 30px; }
    .eligibility-img { display: none; } 
}

/* --- MOBILE DEVICES (Max Width: 768px) --- */
@media (max-width: 768px) {
    
    /* === 1. PUBLIC HEADER & NAVIGATION (Hamburger Menu Fix) === */
    
    .main-header { 
        height: 70px; /* Fixed height to prevent huge white gap */
        padding: 0;
    }

    .main-header .container { 
        flex-direction: row; /* Keep Logo and Hamburger side-by-side */
        justify-content: space-between;
        align-items: center;
    }

    /* Logo Adjustments */
    .logo h1 { font-size: 24px; }
    .logo p { display: none; } /* Hide slogan on mobile to save space */

    /* Show Hamburger Icon */
    .menu-toggle { 
        display: block !important; 
        font-size: 26px;
        padding: 10px;
        color: #0e2a42;
    }

    /* Hide Menu by Default on Mobile */
    .nav-menu {
        position: absolute;
        top: 70px; /* Height of header */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        display: none; /* Hidden until clicked */
        flex-direction: column;
        z-index: 999;
        border-top: 2px solid #e8491d;
    }

    /* Show Menu when Active (JS toggles this class) */
    .nav-menu.active {
        display: flex;
    }

    .nav-menu ul { 
        flex-direction: column; 
        width: 100%; 
        gap: 0; 
        padding: 0;
    }

    .nav-menu li { 
        width: 100%; 
        text-align: center;
        margin: 0;
    }

    .nav-menu a { 
        display: block; 
        padding: 15px; 
        border-bottom: 1px solid #f0f0f0; 
        width: 100%;
    }

    .btn-register {
        margin: 15px auto;
        display: inline-block;
        width: 80%;
    }

    /* === 2. PUBLIC PAGE CONTENT === */
    
    /* Hero Section */
   /* Hero Section with American Flag Background */
.hero {
    /* The linear-gradient creates a dark blue see-through layer so text remains readable */
    background: 
        linear-gradient(rgba(14, 42, 66, 0.85), rgba(14, 42, 66, 0.65)), 
        url('https://images.unsplash.com/photo-1501238295340-c810d3c156d2?q=80&w=1000'); 
    
    /* If you downloaded the image locally, use this line instead: */
    /* background: linear-gradient(rgba(14, 42, 66, 0.85), rgba(14, 42, 66, 0.65)), url('../uploads/usa_flag.jpg'); */

    background-size: cover;          /* Ensures image covers the whole area */
    background-position: center;     /* Centers the flag */
    background-repeat: no-repeat;    /* Prevents tiling */
    
    height: 600px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: var(--white);
    position: relative; /* needed for layering */
}
    .hero h1 { font-size: 32px; }

    /* Stats Bar */
    .stats-bar { 
        flex-direction: column; 
        width: 90%; 
        margin: -30px auto 40px auto; 
        gap: 20px;
    }

    /* Grids */
    .steps-grid, .faq-grid, .footer-grid { 
        grid-template-columns: 1fr; 
        text-align: center; 
    }

    /* Footer adjustments */
    .footer-col h3 { border-bottom: none; text-decoration: underline; text-decoration-color: #e8491d; }

    /* Login/Register Forms */
    .login-card, .register-card { width: 100%; padding: 20px; }


    /* === 3. DASHBOARD SIDEBAR (Horizontal Scroll Fix) === */
    
    .admin-wrapper { 
        flex-direction: column; 
        height: auto; 
        overflow: visible; 
    }
    
    /* Horizontal Top Bar Sidebar */
    .admin-sidebar {
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto; /* Allow horizontal scroll */
        padding: 5px 10px;
        position: sticky;
        top: 0;
        box-shadow: 0 4px 5px rgba(0,0,0,0.1);
        background: #0e2a42;
    }
    
    /* Keep the top bar visible but hide the long brand text to save space */
    .sidebar-brand { display: flex; align-items: center; gap: 8px; }
    .sidebar-brand .brand-text { display: none; }
    .sidebar-brand .sidebar-toggle { margin-left: auto; }
    
    .sidebar-menu { padding: 0; overflow-y: hidden; }
    
    .sidebar-menu ul { 
        display: flex; 
        flex-direction: row; 
        gap: 10px; 
        width: max-content; 
    }
    
    .sidebar-menu li { 
        border-left: none; 
        border-bottom: 3px solid transparent; 
        padding: 0;
    }
    
    .sidebar-menu li.active { 
        border-left: none; 
        border-bottom: 3px solid #3498db; 
        background: none;
    }
    
    .sidebar-menu a { 
        padding: 8px 10px; 
        font-size: 12px; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        white-space: nowrap;
    }
    
    .sidebar-menu i { margin: 0 0 5px 0; font-size: 16px; }
    
    /* Compact Logout */
    .sidebar-footer { padding: 5px; border: none; margin-left: auto; }
    .btn-signout { padding: 8px; font-size: 0; }
    .btn-signout i { margin: 0; font-size: 14px; }
    
    /* Dashboard Content */
    .admin-main { height: auto; overflow: visible; }
    /* Ensure main content sits below the sticky top bar on mobile */
    .admin-main { padding-top: 56px; }
    .admin-header { padding: 0 15px; }
    .header-date { display: none; }
    
    .cards-grid { grid-template-columns: 1fr; }
    .chart-card { overflow-x: auto; }
    /* Reduce/chart height safety on small devices; JS will set exact heights */
    .chart-card canvas { max-height: 320px; height: auto !important; }
    .chart-card { min-height: 240px; }
    .chart-card { min-height: 240px; }
    /* Tighten KPI card spacing and fonts on phones */
    .kpi-card { padding: 16px; }
    .kpi-value { font-size: 28px; }
    table { min-width: 0; width: 100%; }
    /* Reduce padding on small devices to fit content better */
    .admin-content { padding: 14px; }

    /* When the sidebar becomes a top bar, the collapsed class should not shrink it to 72px */
    .admin-sidebar.collapsed { width: 100% !important; }
    /* Keep labels visible in the horizontal top bar even if collapsed state is set */
    .admin-sidebar.collapsed .sidebar-menu a .label { opacity: 1; transform: none; }

    /* Admin view details/grid adjustments */
    .detail-grid { grid-template-columns: 1fr; }
    .photo-section { flex-direction: column; gap: 12px; }
}

/* Convert tables into stacked cards on very small screens for better readability */
@media (max-width: 520px) {
    .table-responsive { overflow: visible; }
    table.responsive-stack { width: 100%; border: 0; }
    table.responsive-stack thead { display: none; }
    table.responsive-stack tr { display: block; margin-bottom: 12px; background: #fff; border-radius: 8px; padding: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); border: 1px solid #eee; }
    table.responsive-stack td { display: flex; justify-content: space-between; padding: 8px 6px; border: none; }
    table.responsive-stack td:before { content: attr(data-label); font-weight: 600; color: #666; margin-right: 8px; }
}

/* Very small phones — make fonts and charts even more compact */
@media (max-width: 420px) {
    .kpi-card { padding: 12px; }
    .kpi-value { font-size: 24px; }
    .chart-card canvas { max-height: 260px !important; }
    .admin-main { padding-top: 52px; }
    .sidebar-menu a { font-size: 11px; padding: 6px 8px; }
}