diff --git a/sistem-km-next/src/app/globals.css b/sistem-km-next/src/app/globals.css index 1417807..e4dad47 100644 --- a/sistem-km-next/src/app/globals.css +++ b/sistem-km-next/src/app/globals.css @@ -781,197 +781,4 @@ } .pulse-border { animation: pulse-border 1.8s infinite !important; - } - - /* ========================================================================== - Mobile Responsive Styles (Screen widths 768px and below) - ========================================================================== */ - @media (max-width: 768px) { - body, html { - font-size: 14px; - } - - /* 1. Header (Top Bar) - Stacks elements and handles widths */ - .top-bar { - top: 10px; - width: 94%; - height: auto; - padding: 12px 16px; - flex-direction: column; - align-items: stretch; - gap: 8px; - } - - .top-bar-right { - justify-content: space-between; - width: 100%; - margin-top: 4px; - } - - .logo { - font-size: 1.1rem; - } - - .search-container { - width: 100% !important; - max-width: none; - padding: 8px 16px; - order: 3; /* Push search to bottom of the stacked top-bar */ - margin-top: 4px; - } - - /* 2. Floating Action Buttons - repositioned for touch ergonomics at the bottom */ - .show-panel-btn { - padding: 10px 16px; - font-size: 0.85rem; - border-radius: 12px; - } - - #showControlsBtn { - top: auto; - bottom: 20px; - left: 3%; - } - - #showStatsBtn { - top: auto; - bottom: 20px; - right: 3%; - } - - #showLegendBtn { - bottom: 75px; - left: 3%; - } - - #showTopBarBtn { - top: 10px; - } - - /* 3. Left & Right Panels - Formatted as full-width overlays below header */ - .left-panel { - top: 130px; - left: 3%; - width: 94%; - max-height: calc(100vh - 220px); - overflow-y: auto; - padding: 16px; - box-shadow: 0 10px 25px rgba(0,0,0,0.15); - } - - .right-panel { - top: 130px; - right: 3%; - width: 94%; - max-height: calc(100vh - 220px); - padding: 16px; - box-shadow: 0 10px 25px rgba(0,0,0,0.15); - } - - .submenu { - position: static; - width: 100%; - margin-top: 8px; - border-radius: 8px; - box-shadow: none; - background: rgba(0, 0, 0, 0.03); - } - - /* 4. Legend - floating container */ - .legend { - bottom: 75px; - left: 3%; - width: 94%; - max-height: 250px; - overflow-y: auto; - padding: 12px; - } - - /* 5. Modals - Align top + scroll support for soft-keyboard friendliness */ - .modal-overlay { - padding: 16px 8px; - align-items: flex-start; - overflow-y: auto; - } - - .modal-content { - max-width: 100%; - width: 100%; - margin: 10px auto; - padding: 16px; - border-radius: 12px; - max-height: 90vh; - overflow-y: auto; - } - - .modal-header h2 { - font-size: 1.1rem; - } - - .modal-body { - gap: 12px !important; - } - - .form-group { - margin-bottom: 12px; - } - - .form-control { - padding: 8px 10px; - font-size: 0.9rem; - } - - .modal-actions { - margin-top: 16px; - gap: 8px; - } - - /* 6. Citizen Geotag Modal details stacking */ - .citizen-modal { - flex-direction: column; - align-items: center; - gap: 16px; - text-align: center; - } - - .citizen-photo { - width: 120px; - height: 120px; - } - - /* 7. Statistics KPI Boxes */ - .kpi-container { - gap: 8px; - margin-bottom: 16px; - } - - .kpi-box { - padding: 10px 6px; - } - - .kpi-value { - font-size: 1.25rem; - } - - .kpi-label { - font-size: 0.65rem; - } - - .chart-box { - padding: 12px; - margin-bottom: 12px; - } - } - - /* Extra small devices (phones) */ - @media (max-width: 480px) { - .login-container { - width: 90%; - padding: 24px; - gap: 16px; - } - - .login-container h1 { - font-size: 1.5rem; - } } \ No newline at end of file