/* =============================================================
   responsive.css - Phase 3 Mobile Responsive Optimization
   GhaniWelfare.ca
   All breakpoints: 1400px, 1200px, 992px, 768px, 576px, 480px,
   390px, 375px, 360px, 320px
   ============================================================= */

/* Global Overflow Guard */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

/* Images always responsive */
img, video, iframe, canvas, object, embed { max-width: 100%; height: auto; display: block; }

/* Touch target minimum sizing */
button, [role=button],
input[type=submit], input[type=button], input[type=reset],
.btn, .hdr-mobile-toggle, .hdr-mobile-link, .dash-nav-item { min-height: 44px; }

/* Table scrollable container */
.table-responsive {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 12px; scrollbar-width: thin;
    scrollbar-color: rgba(6,78,59,0.2) transparent;
}
.table-responsive::-webkit-scrollbar { height: 5px; }
.table-responsive::-webkit-scrollbar-thumb { background: rgba(6,78,59,0.2); border-radius: 10px; }

/* Modal responsive */
.modal-content { border-radius: 20px; }
@media (max-width: 768px) {
    .modal-dialog { max-width: 96vw !important; margin: 0.75rem auto !important; }
}

/* BREAKPOINT: max-width 1400px */
@media (max-width: 1400px) {
    .container { max-width: 100%; padding: 0 1.5rem; }
}

/* BREAKPOINT: max-width 1200px */
@media (max-width: 1200px) {
    .container { padding: 0 1.25rem; }
    .hdr-nav { gap: 1.25rem; }
    .hdr-logo { font-size: 1.2rem; }
}

/* BREAKPOINT: max-width 992px */
@media (max-width: 992px) {
    .section { padding: 70px 0; }
    .filter-sidebar { position: static !important; top: auto !important; margin-bottom: 1.5rem; }
    .login-card { padding: 2rem; border-radius: 28px; }
    #adminSidebar { transform: translateX(-100%); }
    #adminSidebar.show { transform: translateX(0); }
    #adminTopbar, #adminMain { left: 0 !important; margin-left: 0 !important; }
    .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1029; }
    .sidebar-backdrop.show { display: block; }
    .dash-sidebar { transform: translateX(-100%); }
    .dash-sidebar.open { transform: translateX(0); }
    .dash-main { margin-left: 0 !important; }
}

/* BREAKPOINT: max-width 768px */
@media (max-width: 768px) {
    .section { padding: 55px 0; }
    .container { padding: 0 1rem; }
    h1 { font-size: clamp(1.75rem, 5.5vw, 2.8rem) !important; }
    h2 { font-size: clamp(1.4rem, 4vw, 2.2rem) !important; }
    h3 { font-size: clamp(1.15rem, 3vw, 1.6rem) !important; }
    .cta-wrapper { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .btn-cta, .donate-hero-btn { width: 100%; text-align: center; justify-content: center; }
    .hdr-mobile-drawer { max-height: calc(100vh - 80px); overflow-y: auto; }
    .login-card { padding: 1.5rem; border-radius: 22px; }
    .login-role-tab { font-size: 0.78rem; padding: 0.6rem 0.4rem; gap: 0.3rem; }
    .reg-wizard-header::before { left: 5%; right: 5%; }
    .reg-step-label { font-size: 0.65rem; }
    .reg-step-circle { width: 36px; height: 36px; font-size: 0.8rem; }
    .dash-card { padding: 1.25rem; }
    #adminMain { padding: 1.25rem 1rem 3rem; }
    .page-title-bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .page-title-bar h1 { font-size: 1.2rem; }
    #adminTopbar { padding: 0 0.85rem; gap: 0.5rem; }
    .topbar-right { gap: 0.4rem; }
    .floating-whatsapp-btn { bottom: 90px !important; }
}

/* BREAKPOINT: max-width 576px */
@media (max-width: 576px) {
    .section { padding: 45px 0; }
    .container { padding: 0 0.85rem; }
    input[type=text], input[type=email], input[type=password],
    input[type=number], input[type=tel], input[type=search],
    input[type=url], select, textarea {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
    }
    .login-card { padding: 1.25rem; border-radius: 20px; }
    .stat-card .card-body { padding: 1rem; }
    .stat-num { font-size: 1.4rem; }
    .stat-icon { width: 42px; height: 42px; font-size: 1.1rem; }
    #adminMain { padding: 1rem 0.75rem 3rem; }
    .page-title-bar h1 { font-size: 1.1rem; }
    .topbar-icon-btn { width: 34px; height: 34px; font-size: 0.88rem; }
    .panel-card .panel-header { flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; }
    .contact-info-card { flex-direction: column; text-align: center; }
    .contact-info-icon { margin: 0 auto; }
    .profile-body { padding: 1rem; }
    .donate-hero-scroll-chips { gap: 0.4rem; }
    .donate-hero-chip { font-size: 0.65rem; padding: 0.3rem 0.65rem; }
    .quick-action-btn { padding: 0.75rem 0.5rem; font-size: 0.7rem; }
    .quick-action-btn i { font-size: 1.2rem; }
}

/* BREAKPOINT: max-width 480px */
@media (max-width: 480px) {
    .container { padding: 0 0.75rem; }
    .otp-box-group { gap: 0.3rem; }
    .otp-digit-input { width: 38px; height: 46px; font-size: 1.1rem; border-radius: 10px; }
    .reg-wizard-header { margin-bottom: 1.5rem; }
    .reg-step-label { font-size: 0.6rem; letter-spacing: 0; }
    .reg-step-circle { width: 32px; height: 32px; font-size: 0.72rem; }
    .modal-dialog { max-width: 98vw !important; margin: 0.25rem auto !important; }
}

/* BREAKPOINT: max-width 390px */
@media (max-width: 390px) {
    .container { padding: 0 0.7rem; }
    .hdr-logo { font-size: 1.15rem; gap: 0.45rem; }
    .hdr-logo-icon { width: 34px; height: 34px; font-size: 1rem; }
    .dash-header { flex-wrap: wrap; gap: 0.5rem; }
    .login-role-tab { font-size: 0.73rem; padding: 0.55rem 0.3rem; }
}

/* BREAKPOINT: max-width 375px */
@media (max-width: 375px) {
    .container { padding: 0 0.65rem; }
    h1 { font-size: 1.55rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }
    .btn, .btn-cta { padding: 0.72rem 1.2rem; font-size: 0.84rem; }
    .otp-digit-input { width: 34px; height: 42px; font-size: 0.98rem; }
    .login-role-tab { font-size: 0.7rem; padding: 0.5rem 0.25rem; }
    #adminMain { padding: 0.75rem 0.6rem 2.5rem; }
    .topbar-title { font-size: 0.85rem; }
    .profile-view-btn { font-size: 0.78rem; padding: 0.7rem; }
    .stat-num { font-size: 1.3rem; }
}

/* BREAKPOINT: max-width 360px */
@media (max-width: 360px) {
    .container { padding: 0 0.6rem; }
    .hdr-logo { font-size: 1.05rem; }
    .hdr-container { padding: 0 0.75rem; }
    .otp-digit-input { width: 32px; height: 40px; font-size: 0.92rem; }
    .sidebar-brand .brand-text span { font-size: 0.88rem; }
}

/* BREAKPOINT: max-width 320px */
@media (max-width: 320px) {
    .container { padding: 0 0.5rem; }
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.2rem !important; }
    .otp-digit-input { width: 28px; height: 36px; font-size: 0.85rem; border-radius: 8px; }
    .otp-box-group { gap: 0.2rem; }
    .login-role-tab i { display: none !important; }
    .hdr-logo-icon { width: 30px; height: 30px; border-radius: 8px; }
    .hdr-logo { font-size: 0.95rem; gap: 0.35rem; }
    .hdr-container { padding: 0 0.5rem; }
    .sidebar-brand { padding: 1rem; }
    .sidebar-brand .brand-text span { font-size: 0.82rem; }
    #adminMain { padding: 0.65rem 0.4rem 2rem; }
    .sidebar-nav .nav-link { font-size: 0.78rem; padding: 0.5rem 0.65rem; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus ring for keyboard accessibility */
:focus-visible {
    outline: 3px solid #d4af37;
    outline-offset: 3px;
    border-radius: 4px;
}