/* ==========================================================================
   ABDUL DATA HUB - Responsive layer (mobile-first breakpoints)
   ========================================================================== */

/* Top navbar (public + user site chrome) */
.site-header {
    background: var(--primary);
    position: sticky; top: 0; z-index: 500;
    box-shadow: var(--shadow-sm);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 18px; }
.brand-mark {
    width: 36px; height: 36px; border-radius: 10px; background: #fff; padding: 4px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }

.nav-links { display: none; align-items: center; gap: 26px; }
.nav-links a { color: rgba(255,255,255,0.85); font-weight: 600; font-size: 14.5px; }
.nav-links a:hover, .nav-links a.active { color: #fff; }

.nav-actions { display: none; align-items: center; gap: 10px; }

/* Profile avatar + dropdown, desktop header only. */
.nav-profile { position: relative; }
.nav-profile-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; }
.nav-profile-avatar {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
}
.nav-profile-menu {
    display: flex; flex-direction: column;
    position: absolute; top: calc(100% + 12px); right: 0;
    width: 230px; background: var(--surface); color: var(--text);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border);
    padding: 8px; z-index: 800;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
}
.nav-profile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-profile-info { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.nav-profile-name { font-weight: 700; font-size: 14px; }
.nav-profile-email { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.nav-profile-menu a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: var(--radius-sm);
    color: var(--text); font-weight: 600; font-size: 13.5px;
}
.nav-profile-menu a:hover { background: var(--bg); }
.nav-profile-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.nav-profile-logout { color: var(--danger) !important; }

.nav-toggle {
    display: inline-flex; background: transparent; border: none; color: #fff;
    font-size: 22px; cursor: pointer; padding: 6px;
}

/* Unread-notification badge, shared by the desktop bell and the drawer link. */
/* Support/notification icon buttons in the top bar - no hover effect, larger tap target. */
.nav-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: transparent; border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff; font-size: 20px; text-decoration: none;
}

.nav-bell { position: relative; }
.nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 1;
}
.nav-bell .nav-badge { position: absolute; top: -4px; right: -4px; }

/* Off-canvas drawer: slides in from the left, overlays the page. */
.mobile-menu {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 82vw; max-width: 300px;
    background: var(--primary-dark);
    padding: 76px 20px 20px;
    box-shadow: 8px 0 24px rgba(13, 20, 64, 0.25);
    z-index: 700;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu a { display: flex; align-items: center; gap: 10px; color: #fff; padding: 10px 0; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-menu .btn { margin-top: 10px; }
.mobile-menu-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

/* Line-icons replacing emoji throughout the navbar (desktop dropdown, bell,
   mobile slide-out drawer) - includes/functions.php website_nav_icon_html(). */
.nav-link-icon { width: 17px; height: 17px; flex-shrink: 0; }
.nav-icon-btn .nav-link-icon { width: 19px; height: 19px; }

.mobile-menu-section {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5); margin: 16px 0 4px;
}
.mobile-menu-section:first-of-type { margin-top: 4px; }

.mobile-menu-user { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.mobile-menu-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
    background: var(--accent); color: #fff; font-weight: 800; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}
.mobile-menu-name { color: #fff; font-weight: 700; font-size: 14.5px; }
.mobile-menu-email { color: rgba(255,255,255,0.6); font-size: 12px; }

/* Dimmed backdrop behind the drawer, tap to close. */
.nav-scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(13, 20, 64, 0.45);
    z-index: 650;
}
.nav-scrim.is-open { display: block; }

/* Below the desktop breakpoint, put the menu toggle on the left, next to the brand. */
@media (max-width: 899.98px) {
    .site-header .container { justify-content: flex-start; gap: 14px; }
    .nav-toggle { order: -1; }
}

@media (min-width: 900px) {
    .nav-links { display: flex; }
    .nav-actions { display: flex; }
    .nav-toggle { display: none; }
    .mobile-menu { display: none !important; }
    .nav-scrim { display: none !important; }
}

/* Grids */
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Typography scale */
.hero-title { font-size: 32px; }
@media (min-width: 700px) { .hero-title { font-size: 44px; } }
@media (min-width: 1000px) { .hero-title { font-size: 52px; } }

/* Tables collapse gracefully via horizontal scroll wrapper already in style.css */

/* Generic stacking helpers */
@media (max-width: 640px) {
    .stack-mobile { flex-direction: column; align-items: stretch !important; }
    .modal { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   Mobile bottom navigation: Home, Data, raised Fund button, History, Profile
   --------------------------------------------------------------------- */
.bottom-nav { display: none; }
@media (max-width: 899px) {
    body { padding-bottom: 78px; }
    .bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
        background: var(--surface); border-top: 1px solid var(--border);
        box-shadow: 0 -6px 24px rgba(22, 33, 92, 0.08);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .bottom-nav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
        color: var(--text-muted); font-size: 11.5px; font-weight: 600; padding: 4px 0; text-decoration: none;
    }
    .bottom-nav-icon svg { width: 24px; height: 24px; display: block; }
    .bottom-nav-item.is-active { color: var(--primary); font-weight: 800; }
    .bottom-nav-item.is-fab { position: relative; }
    .bottom-nav-item.is-fab .bottom-nav-icon {
        width: 56px; height: 56px; border-radius: 50%; margin-top: -30px;
        background: var(--primary); color: #fff; border: 4px solid var(--bg);
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 10px 22px rgba(22, 33, 92, 0.32);
    }
    .bottom-nav-item.is-fab .bottom-nav-icon svg { width: 28px; height: 28px; }
    .bottom-nav-item.is-fab.is-active { color: var(--primary); }
    #toast-container { bottom: 90px; top: auto; }
}

/* Mobile drawer stops above the bottom bar, so "Logout" is never hidden behind it. */
@media (max-width: 899px) {
    body:has(.bottom-nav) .mobile-menu { bottom: calc(72px + env(safe-area-inset-bottom)); padding-bottom: 24px; }
}

/* =====================================================================
   App-style top bar for logged-in users (white bar, dark text, shadow)
   ===================================================================== */
.site-header.is-app { background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 2px 16px rgba(22, 33, 92, 0.06); }
.site-header.is-app .brand { color: var(--primary); }
.site-header.is-app .nav-links a { color: var(--text-muted); padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.site-header.is-app .nav-links a:hover { color: var(--primary); background: var(--bg); }
.site-header.is-app .nav-links a.active { color: var(--primary); background: #e9edfc; }
.site-header.is-app .nav-toggle { color: var(--primary); }
.site-header.is-app .nav-icon-btn { border: 1px solid var(--border); background: #fff; color: var(--primary); width: 40px; height: 40px; }
.site-header.is-app .nav-profile-avatar { border: 2px solid #fff; box-shadow: 0 0 0 2px var(--accent); }
.site-header.is-app .nav-badge { border: 2px solid #fff; }
@media (min-width: 900px) { .site-header.is-app .nav-links { gap: 6px; } }
.site-header.is-app .brand span:last-child { white-space: nowrap; font-size: 16px; }
@media (max-width: 420px) { .site-header.is-app .brand span:last-child { font-size: 14px; } }