/* ═══════════════════════════════════════════════════════════
   PatrolWizzard V6 — Mobile Responsive Overrides
   Bug #3: Mobile layout responsiveness
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
    /* Stats: 2 columns */
    .stats-grid, .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Widget grid: single column */
    .widget-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile (≤768px) ──────────────────────────────────── */
@media (max-width: 768px) {
    /* Modal → near-fullscreen */
    .modal-overlay { padding: var(--sp-2); }
    .modal-sm, .modal-md, .modal-lg, .modal-xl {
        max-width: 100%;
        max-height: calc(100vh - 16px);
        border-radius: var(--radius-lg);
    }
    .modal-header { padding: var(--sp-3) var(--sp-4); }
    .modal-header h3 { font-size: var(--text-base); }
    .modal-body { padding: var(--sp-4); }
    .modal-footer { padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; gap: var(--sp-2); }
    .modal-footer .btn { flex: 1; min-width: 100px; }

    /* Form rows → single column */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: var(--sp-3);
    }
    .form-group { margin-bottom: var(--sp-3); }

    /* Form inputs: proper mobile sizing */
    .form-input, .form-select, .form-textarea,
    input[type="text"], input[type="email"], input[type="number"],
    input[type="password"], input[type="tel"], input[type="url"],
    select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Tables → horizontal scroll wrapper */
    .table-wrap, .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table { min-width: 600px; }
    .sub-table { min-width: 500px; }

    /* Table toolbar → stack */
    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
    }
    .table-toolbar .table-search { width: 100%; }
    .table-toolbar input[type="search"],
    .table-toolbar input[type="text"] { width: 100%; }

    /* Table pagination → stack */
    .table-pagination {
        flex-direction: column;
        gap: var(--sp-2);
        text-align: center;
    }

    /* Stat cards → 2 columns */
    .stats-grid, .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--sp-3);
    }
    .stat-card { padding: var(--sp-3); }
    .stat-value { font-size: var(--text-lg); }
    .stat-label { font-size: 10px; }

    /* Detail panels → single column */
    .detail-panel {
        grid-template-columns: 1fr !important;
        gap: var(--sp-3);
        padding: var(--sp-3);
    }

    /* Property tabs → scrollable pills */
    .prop-tabs {
        padding: 3px;
        gap: 1px;
        margin-bottom: var(--sp-3);
        scrollbar-width: none;
    }
    .prop-tabs::-webkit-scrollbar { display: none; }
    .prop-tab { padding: 6px 10px; font-size: 11px; gap: 4px; }
    .prop-tab svg { display: none; } /* Hide icons on mobile */

    /* Sub-table wrapper */
    .prop-tab-content { overflow-x: auto; }

    /* Page header → stack */
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--sp-2);
    }
    .page-header h2 { font-size: var(--text-lg); }
    .page-header .actions { width: 100%; flex-wrap: wrap; }
    .page-header .actions .btn { flex: 1; min-width: 0; text-align: center; }

    /* Content area → tighter padding */
    .content { padding: var(--sp-3) !important; }

    /* Quick actions → 2 col */
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-2);
    }
    .quick-action { padding: var(--sp-3); }
    .quick-action .qa-icon { width: 32px; height: 32px; }
    .quick-action .qa-label { font-size: 11px; }

    /* Widget grid → single column */
    .widget-grid { grid-template-columns: 1fr; }

    /* Buttons in action columns → smaller */
    .btn-icon { width: 28px; height: 28px; }

    /* Card adjustments */
    .card-header, .card-body { padding: var(--sp-3); }

    /* Geofence map */
    #geo-map { height: 280px !important; }

    /* Bug FAB → smaller, closer to edge */
    #pw-bug-fab {
        width: 42px !important;
        height: 42px !important;
        bottom: 16px !important;
        right: 16px !important;
        font-size: 18px !important;
    }

    /* Login card */
    .login-card { margin: var(--sp-3); padding: var(--sp-5); }
}

/* ── Small phone (≤480px) ─────────────────────────────── */
@media (max-width: 480px) {
    /* Stats → still 2 col but tighter */
    .stats-grid, .stat-grid {
        gap: var(--sp-2);
    }
    .stat-card {
        padding: var(--sp-2) var(--sp-3);
    }
    .stat-icon { width: 28px; height: 28px; }
    .stat-value { font-size: var(--text-base); }

    /* Modal truly fullscreen */
    .modal-overlay { padding: 0; }
    .modal-sm, .modal-md, .modal-lg, .modal-xl {
        border-radius: 0;
        max-height: 100vh;
    }

    /* Header tighter */
    .top-header { padding: var(--sp-2) var(--sp-3); }
    .header-title h1 { font-size: var(--text-base); }

    /* Content minimal padding */
    .content { padding: var(--sp-2) !important; }

    /* Tabs even smaller */
    .prop-tab { padding: 5px 8px; font-size: 10px; }

    /* Actions in tables */
    td .btn-ghost { padding: 2px 4px; }
}

/* ── Touch-friendly enhancements ──────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Bigger touch targets */
    .btn { min-height: 40px; }
    .btn-sm { min-height: 36px; padding-left: 12px; padding-right: 12px; }
    .menu-item { min-height: 44px; }
    .data-table td { padding: 10px 12px; }
    .sub-table td { padding: 10px 12px; }

    /* No hover states on touch */
    .quick-action:hover { transform: none; }
    .btn:hover { transform: none; }
}