/* ============================================================
   CAMPUS LIFELINE — MOBILE.css
   Mobile-first fixes for Android WebView & small screens
   Include this on ALL pages for consistent mobile experience
   ============================================================ */

/* Safe area for notched phones */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* ── Toggle password button fix (all login/signup pages) ── */
.toggle-pw {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #94A3B8;
    padding: 8px; display: flex; align-items: center; justify-content: center;
    transition: color 0.2s; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%;
}
.toggle-pw:hover { color: #475569; background: rgba(0,0,0,0.04); }
.toggle-pw svg { width: 20px; height: 20px; }

/* ── Global mobile fixes ── */
@media (max-width: 768px) {
    /* Prevent horizontal overflow */
    html, body { overflow-x: hidden; max-width: 100vw; }

    /* Admin sidebar — ensure open state works */
    .sidebar.open { transform: translateX(0) !important; z-index: 9999; }
    .sidebar-overlay.active { display: block !important; z-index: 9998; }
    .main-content { margin-left: 0 !important; }

    /* Topbar compact */
    .topbar { padding: 0 14px; height: 56px; }
    .topbar-search { display: none; }
    .topbar-status span { display: none; }
    .bc-live-time { display: none; }
    .hamburger { display: flex !important; }

    /* Page content tighter padding */
    .page-content { padding: 16px 14px; }

    /* KPI cards stack */
    .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi-card { padding: 14px; }
    .kpi-number { font-size: 22px; }

    /* Grids collapse */
    .home-main-grid,
    .home-bottom-grid,
    .grid-two,
    .grid-three,
    .charts-row,
    .incidents-layout,
    .settings-layout { grid-template-columns: 1fr !important; }

    /* Kanban stacks */
    .kanban-board { grid-template-columns: 1fr !important; }

    /* Responder cards */
    .responders-grid { grid-template-columns: 1fr !important; }

    /* Alerts grid */
    .alerts-grid { grid-template-columns: 1fr !important; }

    /* Map sidebar hidden on mobile */
    .map-sidebar-panel { display: none; }
    .map-page-layout { flex-direction: column; }
    .map-main { height: 60vh; }

    /* Tables scroll */
    .table-scroll, .table-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table, .home-incidents-table { min-width: 500px; }

    /* Filter tabs wrap */
    .filter-tabs { flex-wrap: wrap; }

    /* Stats bar wrap */
    .stats-row { flex-direction: column; }
    .stat-pill { width: 100%; }

    /* Profile grid */
    .profile-grid { grid-template-columns: 1fr !important; }
    .modal-grid { grid-template-columns: 1fr !important; }

    /* Analytics KPI */
    .analytics-kpi-row { grid-template-columns: 1fr 1fr !important; }

    /* System info */
    .sysinfo-grid { grid-template-columns: 1fr !important; }

    /* Settings nav horizontal scroll */
    .settings-nav { flex-direction: row !important; overflow-x: auto; flex-wrap: nowrap; }
    .snav-item { white-space: nowrap; min-width: auto; border-bottom: none !important; }
}

@media (max-width: 480px) {
    .kpi-row { grid-template-columns: 1fr; }
    .analytics-kpi-row { grid-template-columns: 1fr !important; }

    /* Role shell header */
    .app-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .app-nav { justify-content: center; flex-wrap: wrap; }
    .app-nav a, .app-nav button { padding: 8px 12px; font-size: 11px; }

    /* Hero card */
    .hero-card { padding: 18px 16px; }
    .hero-card h1 { font-size: 20px; }

    /* Buttons touch-friendly */
    .btn-primary, .btn-secondary, .submit-btn,
    .row-btn, .filter-tab, .rc-btn, .ac-btn,
    .app-nav a, .app-nav button { min-height: 44px; }

    /* Page titles */
    .page-title-large { font-size: 18px; }
    .ss-title { font-size: 16px; }

    /* Footer compact */
    .l-footer-inner { flex-direction: column; gap: 4px; }
}

/* ── Landing page mobile ── */
@media (max-width: 768px) {
    .l-hero-inner { grid-template-columns: 1fr !important; text-align: center; }
    .l-hero-left { max-width: 100%; }
    .l-hero-right { display: none; }
    .l-hero { padding: 40px 16px; min-height: auto; }
    .l-headline { font-size: 28px; letter-spacing: -1px; }
    .l-desc { font-size: 14px; margin: 0 auto 24px; }
    .l-cta-row { justify-content: center; }
    .l-role-grid { grid-template-columns: 1fr !important; max-width: 340px; margin: 0 auto; }
    .l-trust-row { flex-direction: column; gap: 12px; padding: 16px; }
    .l-trust-divider { display: none; }
    .l-nav { gap: 6px; }
    .l-nav-btn { padding: 7px 12px; font-size: 11px; }
    .l-header-inner { padding: 0 14px; }
    .l-brand-text { font-size: 15px; }
}

@media (max-width: 420px) {
    .l-header-inner { padding: 0 10px; gap: 6px; }
    .l-brand-text { font-size: 13px; }
    .l-logo-img { width: 24px; }
    .l-brand { gap: 6px; }
    .l-nav { gap: 4px; }
    .l-nav-btn { padding: 6px 10px; font-size: 10px; }
    .l-nav-btn.icon { width: 30px; height: 30px; padding: 4px; }
    .l-nav-btn.icon svg { width: 22px; height: 22px; }
}

/* ── Auth pages mobile ── */
@media (max-width: 768px) {
    .auth-container, .login-container { flex-direction: column !important; max-width: 100%; border-radius: 16px; overflow: hidden; }
    .info-panel { width: 100% !important; padding: 24px 20px; min-height: auto; border-radius: 0; }
    .info-panel .panel-hero { margin-bottom: 0; }
    .panel-title { font-size: 20px; }
    .panel-desc { font-size: 13px; }
    .feature-list { display: none; }
    .form-panel { padding: 24px 18px; border-radius: 0; }
    .form-title { font-size: 20px; }
    .form-row { grid-template-columns: 1fr !important; }
    .signup-container { padding: 20px 14px; border-radius: 16px; }
    .page-wrapper { padding: 0 !important; min-height: 100vh; }
    .page-wrapper.signup-wrapper { padding: 16px 10px !important; }
    .back-btn { position: fixed; top: 16px; left: 12px; z-index: 50; background: rgba(255,255,255,0.95); border-radius: 20px; padding: 8px 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-size: 12px; }
}

@media (max-width: 420px) {
    .info-panel { padding: 20px 16px; }
    .panel-logo { gap: 8px; }
    .panel-logo-main { font-size: 14px; }
    .panel-logo-sub { font-size: 10px; }
    .panel-title { font-size: 18px; }
    .form-panel { padding: 20px 14px; }
    .form-title { font-size: 18px; }
    .form-subtitle { font-size: 12px; }
    .form-label { font-size: 11px; }
    .submit-btn { padding: 14px; font-size: 13px; }
}

/* ── Touch optimizations ── */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets */
    .nav-item, .snav-item, .filter-tab,
    .btn-primary, .btn-secondary, .submit-btn,
    .row-btn, .rc-btn, .ac-btn, .tc-btn,
    .app-nav a, .app-nav button,
    .l-nav-btn, .l-cta, .l-role-card { min-height: 44px; }

    /* Disable hover effects that cause issues on touch */
    .nav-item:hover { transform: none; }
    .role-card:hover, .l-role-card:hover { transform: none; }
    .kpi-card:hover { transform: none; }
    .responder-card:hover { transform: none; }
    .l-float-card { animation: none !important; }
}

/* ── WebView specific ── */
@media screen and (max-width: 412px) {
    /* Common Android phone width */
    .page-shell { padding: 14px 12px 60px; }
    .info-card, .history-card { padding: 16px; }
    .card-title { font-size: 14px; }
    .sos-button { font-size: 16px; padding: 16px 20px; }

    /* Legal pages header nav */
    .legal-header-inner { padding: 0 12px; }
    .legal-nav-btn { padding: 6px 10px; font-size: 10px; }
    .legal-nav-btn:last-child { display: none; }
}

/* ── Landing page hero height fix ── */
@media (max-width: 768px) {
    .l-hero { min-height: auto !important; height: auto !important; padding-bottom: 40px; }
    .l-footer { margin-top: 0; }
}

/* ── Responder home mobile ── */
@media (max-width: 480px) {
    .availability-panel { flex-direction: column; gap: 12px; align-items: stretch; }
    .toggle-btn { width: 100%; }
    .alert-card { padding: 14px; }
    .respond-btn { width: 100%; }
    #respoMap { min-height: 300px !important; height: 50vh !important; }
}

/* ── User home mobile ── */
@media (max-width: 480px) {
    .sos-main-btn { width: 100% !important; padding: 18px !important; }
}

/* ── Dynamic scaling for different screen sizes ── */
@media (max-width: 360px) {
    /* Extra small phones (Galaxy S series, older iPhones) */
    html { font-size: 14px; }
    .page-shell { padding: 10px 8px 50px; }
    .info-card, .history-card { padding: 12px; }
    .hero-card h1 { font-size: 18px; }
    .hero-card p { font-size: 12px; }
    .sos-button { font-size: 14px !important; padding: 14px 16px !important; }
    .app-nav a, .app-nav button { padding: 6px 10px; font-size: 10px; }
    .card-title { font-size: 13px; }
    .toggle-btn { font-size: 12px; padding: 10px 16px; }
    .alert-card { padding: 12px; }
    .respond-btn { font-size: 12px; padding: 10px 14px; }
    .form-input, .form-select { font-size: 14px; padding: 10px 12px; }
    .form-label { font-size: 10px; }
    .submit-btn { font-size: 13px; padding: 12px; }
    .profile-name { font-size: 20px; }
    .item { padding: 14px 16px; }
    .item-val { font-size: 13px; }
    .stat-card { padding: 14px; }
}

@media (max-width: 320px) {
    /* Very small screens (iPhone SE 1st gen, budget phones) */
    html { font-size: 13px; }
    .app-header { padding: 12px; }
    .app-nav { gap: 4px; }
    .app-nav a, .app-nav button { padding: 5px 8px; font-size: 9px; }
    .hero-card { padding: 14px 12px; }
    .hero-card h1 { font-size: 16px; }
    .form-panel, .signup-container { padding: 16px 12px !important; }
}

/* Ensure text doesn't overflow on any screen */
@media (max-width: 480px) {
    * { word-wrap: break-word; overflow-wrap: break-word; }
    .item-val, .rc-detail, .profile-email { word-break: break-all; }
    table { font-size: 12px; }
    input, select, textarea { font-size: 16px !important; } /* Prevents iOS zoom on focus */
}