/* Global Responsive Styles for All Pages */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Touch-Friendly Button Sizes */
    button,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
        font-size: 15px;
    }

    /* Better nav link targets */
    .nav-link,
    a.nav-link {
        min-height: 44px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        font-size: 15px;
    }

    /* Form inputs should be touch-friendly */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 10px 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    textarea {
        min-height: 100px;
    }

    /* Improve text readability on mobile */
    body {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Prevent text overflow */
    h1, h2, h3, h4, h5, h6, p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Better heading sizes for mobile */
    h1 {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.3;
        margin-bottom: 0.875rem;
    }

    h3 {
        font-size: 1.25rem !important; /* 20px */
        line-height: 1.4;
        margin-bottom: 0.75rem;
    }

    h4 {
        font-size: 1.125rem !important; /* 18px */
        line-height: 1.4;
    }

    /* Better image handling */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Table responsiveness */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        width: 100%;
    }

    /* Cards and containers */
    .card, .bg-white, .rounded-lg, .rounded-2xl {
        padding: 14px !important;
        margin-bottom: 14px;
    }

    /* Improve container spacing */
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
        max-width: 100% !important;
    }

    /* Better section padding */
    section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Reduce hero section height on mobile */
    .min-h-screen {
        min-height: 70vh !important;
    }

    /* Modal improvements */
    .modal, [role="dialog"] {
        max-width: 95vw !important;
        max-height: 85vh !important;
        overflow-y: auto;
        margin: 10px auto;
    }

    /* Grid improvements - stack everything */
    .grid-cols-1,
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .md\:grid-cols-4,
    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Flex improvements */
    .flex-wrap {
        gap: 10px !important;
    }

    /* Better spacing between elements */
    .space-x-1 > * + *,
    .space-x-2 > * + *,
    .space-x-4 > * + *,
    .space-x-6 > * + *,
    .space-x-8 > * + * {
        margin-left: 0 !important;
        margin-top: 8px !important;
    }

    .space-y-2 > * + * {
        margin-top: 8px !important;
    }

    .space-y-4 > * + * {
        margin-top: 10px !important;
    }

    .space-y-6 > * + * {
        margin-top: 12px !important;
    }

    /* Better gap spacing */
    .gap-3 {
        gap: 0.625rem !important;
    }

    .gap-4 {
        gap: 0.75rem !important;
    }

    .gap-6 {
        gap: 1rem !important;
    }

    .gap-8 {
        gap: 1rem !important;
    }

    /* Padding adjustments */
    .p-4, .p-6, .p-8 {
        padding: 1rem !important;
    }

    .px-4, .px-6, .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-4, .py-6, .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-12, .py-16, .py-20, .py-32 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Margin adjustments */
    .mb-4, .mb-6, .mb-8 {
        margin-bottom: 1rem !important;
    }

    .mb-12, .mb-16, .mb-20 {
        margin-bottom: 1.5rem !important;
    }

    /* Rounded corners - slightly smaller on mobile */
    .rounded-lg, .rounded-xl, .rounded-2xl {
        border-radius: 0.75rem !important;
    }

    /* Shadow adjustments - lighter on mobile */
    .shadow-lg, .shadow-xl, .shadow-2xl {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Text size adjustments */
    .text-xl {
        font-size: 1.125rem !important;
    }

    .text-2xl {
        font-size: 1.375rem !important;
    }

    .text-3xl {
        font-size: 1.625rem !important;
    }

    .text-4xl {
        font-size: 1.875rem !important;
    }

    .text-5xl {
        font-size: 2rem !important;
    }

    .text-6xl {
        font-size: 2.25rem !important;
    }

    /* Logo and header adjustments */
    .logo-text {
        font-size: 1.125rem !important;
    }

    .logo-icon {
        width: 32px !important;
        height: 32px !important;
    }

    /* Navigation improvements */
    header .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Fix aspect ratio for images in cards */
    .h-64 {
        height: 180px !important;
    }

    .h-48 {
        height: 140px !important;
    }

    /* Better max-widths */
    .max-w-3xl,
    .max-w-4xl,
    .max-w-5xl,
    .max-w-6xl,
    .max-w-7xl {
        max-width: 100% !important;
    }
}

/* Very small screens (phones in portrait) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.625rem !important; /* 26px */
    }

    h2 {
        font-size: 1.375rem !important; /* 22px */
    }

    h3 {
        font-size: 1.125rem !important; /* 18px */
    }

    h4 {
        font-size: 1rem !important; /* 16px */
    }

    /* Stack all flex containers */
    .flex:not(.flex-col) {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Full width buttons on very small screens */
    button:not(.icon-only),
    a.btn:not(.icon-only) {
        width: 100%;
        justify-content: center;
    }

    /* Tighter padding on very small screens */
    .p-4, .p-6, .p-8 {
        padding: 0.875rem !important;
    }

    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Smaller hero on very small screens */
    .min-h-screen {
        min-height: 60vh !important;
    }

    /* Reduce image heights further */
    .h-64 {
        height: 160px !important;
    }

    .h-48 {
        height: 120px !important;
    }

    /* Back to top button */
    .back-to-top {
        width: 44px !important;
        height: 44px !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* 2-column grid on tablets */
    .grid-cols-4,
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-cols-3,
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Landscape phone adjustments */
@media (max-width: 896px) and (orientation: landscape) {
    section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Reduce hero heights in landscape */
    .h-screen, .min-h-screen {
        min-height: 50vh !important;
        height: auto !important;
    }

    /* Make modals scrollable */
    .modal, [role="dialog"] {
        max-height: 75vh !important;
    }
}

/* Accessibility improvements */
@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;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }

    button, a {
        text-decoration: underline;
    }
}

/* Print styles */
@media print {
    .no-print,
    header,
    footer,
    .sidebar,
    .admin-sidebar,
    .residents-sidebar,
    .mobile-menu-toggle,
    .back-to-top {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a {
        text-decoration: underline;
    }

    img {
        max-width: 100%;
        page-break-inside: avoid;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    table, pre, blockquote {
        page-break-inside: avoid;
    }
}