/**
 * BRGY-CONNECT - MOBILE RESPONSIVE ENHANCEMENTS
 * Optimized for all screen sizes with focus on mobile experience
 */

/* ========================================================================
   MOBILE-FIRST RESPONSIVE UTILITIES
   ======================================================================== */

/* Hero Section Full Responsive Fix */
.hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
}

.hero .container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Base Mobile Optimizations */
@media (max-width: 767.98px) {
    /* Mobile menu button and content spacing */
    .app-main {
        padding-top: 3.25rem !important;
    }

    .sb-menu-btn {
        top: 0.75rem !important;
        left: 0.75rem !important;
    }

    /* Container padding for better mobile spacing */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Reduce vertical padding on mobile */
    .app-main .container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Typography responsive scaling */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    h5 { font-size: 1rem !important; }

    /* Page headers mobile friendly */
    .page-head {
        flex-direction: column;
        align-items: stretch !important;
        gap: 1rem;
    }

    .page-head .head-actions {
        width: 100%;
        justify-content: stretch;
    }

    .page-head .head-actions .btn {
        flex: 1;
        text-align: center;
    }

    /* Stats grid mobile friendly */
    .stat-card {
        margin-bottom: 1rem;
    }

    /* Forms full width on mobile */
    .form-control,
    .form-select,
    .btn {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    /* Tables responsive scroll */
    .table-responsive {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    table {
        font-size: 0.875rem;
    }

    /* Modal full screen on mobile */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-fullscreen-sm-down {
        max-width: 100%;
        margin: 0;
    }

    /* Cards better spacing */
    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem !important;
    }

    /* Button groups stack on mobile */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group > .btn {
        width: 100%;
        border-radius: 10px !important;
        margin-bottom: 0.5rem;
    }

    /* Navbar mobile optimizations */
    .navbar {
        padding: 0.75rem 1rem !important;
    }

    .navbar-brand {
        font-size: 1.1rem !important;
    }

    .navbar-nav {
        margin-top: 1rem;
        gap: 0.5rem;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        border-radius: 10px;
        text-align: left;
    }

    /* Dropdown full width */
    .dropdown-menu {
        width: 100%;
        border-radius: 12px;
    }

    /* Hero section mobile */
    .hero {
        padding: 2rem 1rem !important;
        border-radius: 0 0 20px 20px !important;
    }

    .hero h1 {
        font-size: 1.75rem !important;
        line-height: 1.2;
    }

    .hero .lead {
        font-size: 1rem !important;
    }

    .hero .btn {
        width: 100%;
        margin-bottom: 0.75rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-stat {
        width: 100%;
        text-align: left !important;
        padding: 0.75rem;
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
    }

    /* Stats responsive */
    .stat-card .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .stat-card .icon-chip {
        margin-bottom: 0.75rem;
    }

    /* Service cards */
    .service-card {
        margin-bottom: 1rem;
    }

    .service-card .icon-chip {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    /* Auth pages mobile */
    .auth-wrap {
        flex-direction: column;
    }

    .auth-brand {
        display: none; /* Hide decorative brand on mobile */
    }

    .auth-form-col {
        width: 100%;
    }

    .auth-card {
        border: none;
        box-shadow: none;
        margin: 0;
    }

    /* Dashboard improvements */
    .dashboard-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Timeline/Steps mobile */
    .step-circle {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem;
    }

    /* Calendar mobile */
    .calendar-grid {
        font-size: 0.75rem;
    }

    /* Map responsive */
    #map, .map-container {
        height: 300px !important;
        border-radius: 12px;
    }

    /* Alert messages */
    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        border-radius: 10px;
    }

    /* Badges */
    .badge {
        padding: 0.35em 0.65em;
        font-size: 0.75rem;
    }

    /* List groups */
    .list-group-item {
        padding: 0.875rem;
    }

    /* Footer mobile */
    footer {
        padding: 2rem 1rem !important;
        text-align: center;
    }

    footer .row {
        text-align: center;
    }

    footer .col-md-4 {
        margin-bottom: 1.5rem;
    }
}

/* ========================================================================
   TABLET OPTIMIZATIONS (768px - 991px)
   ======================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }

    /* Stats in 2 columns on tablet */
    .row.dashboard-grid > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Service cards 2 columns */
    .service-card {
        flex: 0 0 48%;
        max-width: 48%;
    }

    /* Forms still comfortable */
    .form-control,
    .form-select {
        font-size: 15px;
    }

    /* Hero adjust */
    .hero {
        padding: 2.5rem 2rem !important;
    }

    /* Auth split */
    .auth-brand {
        padding: 2rem;
    }
}

/* ========================================================================
   SMALL MOBILE DEVICES (< 375px)
   ======================================================================== */

@media (max-width: 374.98px) {
    body {
        font-size: 14px;
    }

    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.15rem !important; }

    .btn {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
    }

    .card-body {
        padding: 0.875rem !important;
    }

    .stat-card h3 {
        font-size: 1.5rem !important;
    }

    .icon-chip {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
    }

    .navbar {
        padding: 0.5rem 0.75rem !important;
    }

    .table {
        font-size: 0.8rem;
    }
}

/* ========================================================================
   TOUCH & MOBILE INTERACTION IMPROVEMENTS
   ======================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn,
    .nav-link,
    .list-group-item,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Remove hover effects on touch devices */
    .hover-lift:hover {
        transform: none;
    }

    /* Tap highlight color */
    * {
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    }

    /* Better tap targets for checkboxes/radios */
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    .form-check-label {
        padding-left: 0.5rem;
    }

    /* Table actions bigger */
    table .btn-sm {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.875rem !important;
    }
}

/* ========================================================================
   LANDSCAPE MOBILE (MOBILE HORIZONTAL)
   ======================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 1.5rem 1rem !important;
    }

    .hero h1 {
        font-size: 1.5rem !important;
    }

    .hero .lead {
        font-size: 0.875rem !important;
    }

    .hero-stats {
        margin-top: 1rem !important;
    }

    .modal-dialog {
        max-height: 90vh;
        overflow-y: auto;
    }

    .auth-wrap {
        flex-direction: row;
    }

    .auth-brand {
        display: none;
    }
}

/* ========================================================================
   IMPROVED SPACING & ALIGNMENT
   ======================================================================== */

/* Better spacing for all screen sizes */
.mb-mobile-2 {
    margin-bottom: 0.5rem;
}

.mb-mobile-3 {
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .mb-mobile-2 {
        margin-bottom: 0.75rem;
    }

    .mb-mobile-3 {
        margin-bottom: 1.25rem;
    }

    /* Stack flex items on mobile */
    .d-flex.stack-mobile {
        flex-direction: column;
    }

    /* Full width on mobile helper */
    .w-mobile-100 {
        width: 100% !important;
    }

    /* Center on mobile helper */
    .text-mobile-center {
        text-align: center !important;
    }
}

/* ========================================================================
   MOBILE APPOINTMENT & INCIDENT FORMS
   ======================================================================== */

@media (max-width: 767.98px) {
    /* Time picker mobile friendly */
    input[type="time"],
    input[type="date"] {
        font-size: 16px !important;
        padding: 0.75rem !important;
    }

    /* Map picker mobile */
    .map-picker {
        height: 250px !important;
        margin: 1rem 0;
    }

    /* GPS button prominent */
    .btn-gps {
        width: 100%;
        padding: 0.875rem !important;
        font-size: 1rem !important;
        margin-bottom: 1rem;
    }

    /* Form sections */
    .form-section {
        padding: 1rem;
        background: #f9fafb;
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    /* File upload */
    .form-control[type="file"] {
        padding: 0.75rem;
    }

    /* Textarea mobile */
    textarea.form-control {
        min-height: 120px;
        font-size: 16px !important;
    }
}

/* ========================================================================
   MOBILE NAVIGATION IMPROVEMENTS
   ======================================================================== */

@media (max-width: 991.98px) {
    /* Offcanvas full width on mobile */
    .offcanvas {
        width: 85% !important;
        max-width: 320px;
    }

    /* Navbar toggler bigger */
    .navbar-toggler {
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
    }

    .navbar-toggler-icon {
        width: 1.5em;
        height: 1.5em;
    }

    /* Navbar collapse spacing */
    .navbar-collapse {
        padding-top: 1rem;
    }

    /* Sidebar mobile */
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 300px;
        height: 100vh;
        background: white;
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
        transition: left 0.3s ease;
        z-index: 1050;
        overflow-y: auto;
    }

    .sidebar.show {
        left: 0;
    }

    /* Sidebar overlay */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ========================================================================
   MOBILE DATA TABLES
   ======================================================================== */

@media (max-width: 767.98px) {
    /* Stack table cells */
    .table-mobile-stack {
        display: block;
    }

    .table-mobile-stack thead {
        display: none;
    }

    .table-mobile-stack tbody,
    .table-mobile-stack tr,
    .table-mobile-stack td {
        display: block;
        width: 100%;
    }

    .table-mobile-stack tr {
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 0.75rem;
        background: white;
    }

    .table-mobile-stack td {
        text-align: left !important;
        padding: 0.5rem 0 !important;
        border: none !important;
        position: relative;
        padding-left: 40% !important;
    }

    .table-mobile-stack td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 38%;
        padding-right: 10px;
        font-weight: 600;
        color: #4b5563;
    }

    .table-mobile-stack td:last-child {
        padding-bottom: 0 !important;
    }
}

/* ========================================================================
   MOBILE CHARTS & ANALYTICS
   ======================================================================== */

@media (max-width: 767.98px) {
    /* Chart containers */
    .chart-container {
        height: 250px !important;
        margin: 1rem 0;
    }

    canvas {
        max-height: 250px !important;
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Activity feed mobile */
    .activity-feed {
        font-size: 0.875rem;
    }

    .activity-item {
        padding: 0.75rem;
    }

    .activity-item .icon {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
}

/* ========================================================================
   SAFE AREA INSETS (iPhone X+, Notch Support)
   ======================================================================== */

@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .navbar {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }

    .container {
        padding-left: max(1rem, env(safe-area-inset-left)) !important;
        padding-right: max(1rem, env(safe-area-inset-right)) !important;
    }
}

/* ========================================================================
   DARK MODE CONSIDERATIONS (Future Enhancement)
   ======================================================================== */

@media (prefers-color-scheme: dark) {
    /* Uncomment when implementing dark mode */
    /* body {
        background: #0f172a;
        color: #e2e8f0;
    } */
}

/* ========================================================================
   PRINT STYLES MOBILE
   ======================================================================== */

@media print {
    .navbar,
    .btn,
    .footer,
    .sidebar,
    .page-head .head-actions {
        display: none !important;
    }

    body {
        background: white !important;
    }

    .container {
        max-width: 100% !important;
    }
}

/* ========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 1rem;
    background: #1e40af;
    color: white;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}

.skip-to-content:focus {
    left: 0;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ========================================================================
   PERFORMANCE OPTIMIZATIONS
   ======================================================================== */

/* GPU acceleration for smooth animations */
.card,
.btn,
.stat-card,
.service-card,
.hero-stat {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce motion for 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;
    }
}


/* ========================================================================
   HERO SECTION COMPLETE RESPONSIVE FIX
   ======================================================================== */

/* Force hero to be full width on all screens */
.hero {
    position: relative !important;
    overflow: hidden !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 3rem 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
}

/* Hero container proper spacing and centering */
.hero > .container {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
}

/* Ensure all hero content is centered */
.hero .text-center {
    text-align: center !important;
}

.hero .justify-content-center {
    justify-content: center !important;
}

.hero .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile hero adjustments */
@media (max-width: 767.98px) {
    .hero {
        border-radius: 0 0 20px 20px !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .hero > .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .hero h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    .hero .lead,
    .hero p {
        font-size: 0.95rem !important;
    }

    .hero .hero-sub {
        font-size: 0.9rem !important;
    }

    /* Hero stats mobile */
    .hero-stats {
        margin-top: 1.5rem !important;
        gap: 0.75rem !important;
        justify-content: center !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0 !important;
    }

    .hero-stat {
        min-width: 80px !important;
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        text-align: center !important;
    }

    .hero-stat .num {
        font-size: 1.5rem !important;
    }

    .hero-stat .lbl {
        font-size: 0.7rem !important;
    }

    /* Button row mobile */
    .hero .btn-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .hero .btn-row .btn {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Eyebrow chip mobile */
    .hero .eyebrow-chip {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.85rem !important;
    }
}

/* Tablet hero adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .hero h1 {
        font-size: 2.25rem !important;
    }

    .hero-stats {
        gap: 1rem 2rem !important;
    }

    .hero-stat {
        min-width: 100px !important;
    }
}

/* Desktop - ensure full width and perfect alignment */
@media (min-width: 992px) {
    .hero {
        border-radius: 0 0 28px 28px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .hero > .container {
        max-width: 1140px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .hero-stats {
        justify-content: center !important;
        gap: 0.5rem 3.5rem !important;
    }

    .hero-stat {
        flex: 0 0 auto !important;
        min-width: 110px !important;
        max-width: none !important;
    }
}

@media (min-width: 1200px) {
    .hero > .container {
        max-width: 1320px !important;
    }
}

/* Extra large screens */
@media (min-width: 1400px) {
    .hero > .container {
        max-width: 1320px !important;
    }
}

/* Fix for any container overflow */
body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
}

.container,
.container-fluid {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure main content wrapper doesn't cause alignment issues */
body > .container {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Reset any negative margins on sections */
section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ========================================================================
   END HERO SECTION FIX
   ======================================================================== */


/* ========================================================================
   GLOBAL LAYOUT ALIGNMENT FIXES
   ======================================================================== */

/* Remove any default margins/padding that might cause misalignment */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix main content wrapper */
main {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Ensure all sections are properly aligned */
section {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Container alignment fixes */
.container {
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px !important;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px !important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px !important;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px !important;
    }
}

/* Row alignment fixes */
.row {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* Column padding fixes */
[class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* ========================================================================
   HERO CONTENT CENTERING
   ======================================================================== */

.hero .container {
    text-align: center !important;
}

.hero .eyebrow-chip,
.hero h1,
.hero .hero-sub,
.hero p.lead,
.hero .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero .btn-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero stats perfect centering */
.hero-stats {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}

/* ========================================================================
   NAVBAR ALIGNMENT FIX
   ======================================================================== */

.navbar {
    margin: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    max-width: 100vw !important;
}

.navbar-brand,
.navbar-nav {
    margin-left: 0 !important;
}

/* ========================================================================
   FOOTER ALIGNMENT FIX
   ======================================================================== */

footer {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

footer .container {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* ========================================================================
   END ALIGNMENT FIXES
   ======================================================================== */