/* Mobile Responsive Fixes for Organizations Management Page */
/* Base responsive container */
@media (max-width: 768px) {
    .management-container {
        padding: 1rem 0.75rem;
        max-width: 100%;
    }

    .navbar-toggler {
        display: none !important;
    }

    .navbar-collapse {
        display: flex !important;
        background: none;
        border: none;
        border-radius: 0;
        margin-top: 0;
        padding: 0;
        box-shadow: none;
    }

    /* Fix page header for mobile */
    .page-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 1rem;
        text-align: center;
    }

    .header-content h1 {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .header-content p {
        font-size: 1rem;
        line-height: 1.4;
    }

    .mode-indicator {
        align-items: center;
        margin-left: 0;
    }

    /* Fix search with sidebar layout */
    .search-with-sidebar {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .map-sidebar {
        position: static;
        order: 1; /* Place map first on mobile */
    }

    .search-main {
        order: 2;
    }

    /* Fix county map for mobile */
    .county-map-widget {
        margin-bottom: 1rem;
    }

    #wisconsinCountyMap {
        height: 250px;
        min-height: 250px;
    }

    /* Fix search form grid */
    .search-grid-primary {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .search-grid-advanced {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* FIXED: Search actions - ensure text is visible */
    .search-actions {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .search-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 48px;
    }

    /* Ensure icons and text are both visible */
    .search-actions .btn .btn-icon {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .search-actions .btn span:not(.btn-icon) {
        display: inline-block;
        font-weight: 600;
    }

    /* Fix form controls */
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }

    /* Fix checkbox groups */
    .checkbox-group {
        grid-template-columns: 1fr;
    }

    .organization-types {
        max-height: 150px;
    }

    /* Fix admin panel */
    .admin-actions {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Fix business services section */
    .services-compact-grid {
        grid-template-columns: 1fr;
    }

    .service-compact-item {
        padding: 0.75rem;
    }

    /* Fix export options */
    .export-options {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        right: auto;
        width: 90vw;
        max-width: 400px;
        max-height: 80vh;
        overflow-y: auto;
    }

    .format-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .column-grid {
        grid-template-columns: 1fr;
    }

    /* Fix tips section */
    .tips-grid {
        grid-template-columns: 1fr;
    }

    /* FIXED: Sticky actions - keep text visible on mobile */
    .sticky-search-actions {
        bottom: 10px;
        left: 10px;
        right: 10px;
        flex-direction: row;
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .sticky-search-actions .btn {
        flex: 1;
        font-size: 0.9rem;
        padding: 0.75rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        min-height: 44px;
    }

    /* Ensure sticky button icons and text are visible */
    .sticky-search-actions .btn .btn-icon {
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .sticky-search-actions .btn .btn-text {
        display: inline-block !important; /* Force text to show */
        font-weight: 500;
        font-size: 0.85rem;
    }
}

/* Small screens (phones) - Keep text visible but make it more compact */
@media (max-width: 480px) {
    .management-container {
        padding: 0.75rem 0.5rem;
    }

    .page-header {
        padding: 1rem 0.75rem;
    }

    .header-content h1 {
        font-size: 1.5rem;
    }

    .header-content p {
        font-size: 0.9rem;
    }

    /* More compact county map */
    #wisconsinCountyMap {
        height: 200px;
        min-height: 200px;
    }

    /* Smaller form elements */
    .form-control {
        padding: 0.625rem;
        font-size: 16px; /* Still prevent zoom */
    }

    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    /* FIXED: Search actions - keep text but make more compact */
    .search-actions .btn {
        padding: 1rem 1.25rem;
        font-size: 0.9rem;
        gap: 0.5rem;
    }

    .search-actions .btn .btn-icon {
        font-size: 1rem;
    }

    /* FIXED: Sticky actions - compact but keep text visible */
    .sticky-search-actions {
        padding: 0.5rem;
        gap: 0.375rem;
        border-radius: 8px;
    }

    .sticky-search-actions .btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
        gap: 0.25rem;
        min-height: 40px;
    }

    .sticky-search-actions .btn .btn-icon {
        font-size: 0.85rem;
    }

    .sticky-search-actions .btn .btn-text {
        font-size: 0.75rem !important;
        display: inline-block !important; /* Keep text visible */
    }

    /* Organization types - more compact */
    .organization-types {
        max-height: 120px;
    }

    .checkbox-item {
        padding: 0.5rem;
    }

    /* More compact tips */
    .search-tips-header {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .tip-card {
        padding: 0.75rem;
    }

    .tip-card h4 {
        font-size: 0.9rem;
    }

    .tip-card p {
        font-size: 0.8rem;
    }
}

/* Extra small screens - Ultra compact but still show text */
@media (max-width: 360px) {
    .search-actions .btn {
        padding: 0.875rem 1rem;
        font-size: 0.85rem;
        flex-direction: column;
        gap: 0.25rem;
    }

    .search-actions .btn .btn-icon {
        font-size: 1.1rem;
    }

    .sticky-search-actions {
        flex-direction: column;
        gap: 0.375rem;
        padding: 0.5rem;
    }

    .sticky-search-actions .btn {
        width: 100%;
        padding: 0.75rem;
        gap: 0.375rem;
    }

    .sticky-search-actions .btn .btn-text {
        font-size: 0.8rem !important;
    }
}

/* Landscape tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .search-with-sidebar {
        grid-template-columns: 2fr 1fr;
        gap: 1.5rem;
    }

    .search-grid-primary {
        grid-template-columns: repeat(2, 1fr);
    }

    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fix touch targets for better mobile experience */
@media (max-width: 768px) {
    /* Ensure all clickable elements are at least 44px tall */
    .btn,
    .form-control,
    .advanced-toggle,
    .county-map-toggle,
    .search-tips-header {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Better spacing for touch */
    .checkbox-item {
        min-height: 44px;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .checkbox-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    /* Improve text readability */
    .form-group label {
        font-size: 1rem;
        line-height: 1.4;
    }

    .form-text {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}

/* Fix iOS specific issues */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari fixes */
    .form-control {
        border-radius: 0; /* Removes iOS default styling */
        -webkit-appearance: none;
    }

    select.form-control {
        background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='m2 0l2 2.5h-4z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 12px;
        padding-right: 2.5rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .btn-icon,
    .mode-icon,
    .tip-icon {
        font-size: 1.1em; /* Slightly larger icons on high DPI */
    }
}

/* Dark mode considerations */
@media (prefers-color-scheme: dark) {
    .county-map-widget {
        border-color: #4a5568;
    }

    .search-tips-collapsible {
        background: #2d3748;
        border-color: #4a5568;
    }

    .search-tips-header {
        background: #2d3748;
        color: #e2e8f0;
    }

    .tip-card {
        background: #4a5568;
        border-color: #718096;
        color: #e2e8f0;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid;
    }

    .form-control {
        border: 2px solid;
    }

    .checkbox-item {
        border: 2px solid;
    }
}

/* Print styles */
@media print {
    .sticky-search-actions,
    .county-map-widget,
    .search-actions,
    .export-section {
        display: none !important;
    }

    .management-container {
        padding: 0;
    }

    .page-header {
        background: none !important;
        color: black !important;
        border: 2px solid black;
    }
}