/* Global Responsive Styles for All Pages */

/* Touch-Friendly Button Sizes */
@media (max-width: 768px) {
    button,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
    }

    /* Better nav link targets */
    .nav-link,
    a.nav-link {
        min-height: 44px;
        padding: 12px 16px;
        display: flex;
        align-items: center;
    }

    /* 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: 12px;
    }

    textarea {
        min-height: 120px;
    }

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

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

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

    /* Cards and containers */
    .card, .bg-white {
        padding: 16px !important;
        margin-bottom: 16px;
    }

    /* Improve container spacing */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

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

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

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

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

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

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

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

    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
    }

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

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

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

    .py-8, .py-6, .py-4 {
        padding-top: 12px !important;
        padding-bottom: 12px !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: 2rem !important;
        padding-bottom: 2rem !important;
    }

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

    /* Make modals scrollable */
    .modal, [role="dialog"] {
        max-height: 80vh !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;
    }
}