/* ============================================
   MOBILE RESPONSIVE CSS - Meet-Help
   ============================================ */

/* ---- TABLET (max-width: 900px) ---- */
@media (max-width: 900px) {
    /* All Requests: keep horizontal scroll on tablet */
    #allRequestsSection .all-requests-grid {
        gap: 12px !important;
    }

    .main-container {
        height: 350px !important;
        margin: 4px 8px 12px !important;
    }

    .category-section {
        margin: 12px 8px !important;
        padding: 12px !important;
    }

    .icons-top-bar-item {
        padding: 6px 8px !important;
    }

    .icon, .icon img, .icon svg {
        width: 44px !important;
        height: 44px !important;
    }

    .icons-top-bar-item span {
        font-size: 11px !important;
        padding: 3px 6px !important;
    }
}

/* ---- MOBILE (max-width: 768px) ---- */
@media (max-width: 768px) {
    /* --- Header: single row --- */
    .header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        padding: 6px 10px !important;
        gap: 0 !important;
        align-items: center !important;
    }

    .logo .logo-word {
        display: none !important;
    }

    .logo .logo-text {
        gap: 0 !important;
    }

    .logo .logo-text img {
        width: 28px !important;
        height: 28px !important;
    }

    .header-bottom-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        height: auto !important;
        margin-left: auto !important;
    }

    .user-profile strong {
        display: none !important;
    }

    .user-profile {
        padding: 0 0 0 6px !important;
        gap: 0 !important;
        height: auto !important;
    }

    .profile-pic {
        width: 28px !important;
        height: 28px !important;
    }

    .header-stats {
        padding: 2px 6px !important;
        font-size: 10px !important;
        gap: 4px !important;
    }

    .header-stats span {
        font-size: 10px !important;
    }

    .header-links {
        height: auto !important;
    }

    .header-link {
        padding: 0 6px !important;
        height: auto !important;
        font-size: 0.7rem !important;
        border-right: none !important;
    }

    /* --- Icon Bar --- */
    .icons-top-bar {
        padding: 4px 0 !important;
        gap: 0 !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
    }

    .icons-top-bar-item {
        padding: 4px 1px !important;
        border-left: none !important;
    }

    .icon, .icon img, .icon svg {
        width: 44px !important;
        height: 44px !important;
    }

    .icons-top-bar-item span {
        font-size: 10px !important;
        padding: 3px 6px !important;
        border-width: 1.5px !important;
    }

    .sidebar-divider,
    .category-separator-vertical {
        height: 44px !important;
        margin: 0 1px !important;
    }

    /* --- Map --- */
    .main-container {
        height: 250px !important;
        margin: 4px 6px 10px !important;
        max-width: 100% !important;
    }

    .map-container {
        padding: 6px !important;
    }

    /* --- All Requests: keep horizontal scroll on mobile --- */
    #allRequestsSection .all-requests-grid {
        gap: 10px !important;
    }

    .post-header {
        padding: 8px 8px 0 8px !important;
        gap: 6px !important;
    }

    .post-icon-small {
        width: 28px !important;
        height: 28px !important;
    }

    .post-category-name {
        font-size: 11px !important;
    }

    .post-content {
        padding: 0 8px 6px 8px !important;
    }

    .post-content h3 {
        font-size: 11px !important;
    }

    .post-content p {
        font-size: 10px !important;
    }

    .post-location {
        font-size: 10px !important;
    }

    .post-footer span {
        font-size: 10px !important;
    }

    .post-user-pic {
        width: 20px !important;
        height: 20px !important;
    }

    .btn-accept-post,
    .btn-complete-todo {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    /* --- Sections --- */
    .category-section {
        margin: 8px 6px !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }

    .section-title {
        font-size: 1rem !important;
    }

    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .section-header h2 {
        font-size: 1rem !important;
    }

    .filters {
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .filter-dropdown select {
        font-size: 10px !important;
        padding: 5px 8px !important;
        min-width: 90px !important;
    }

    /* --- Scroll containers --- */
    .vertical-scroll-container {
        max-height: 400px !important;
    }

    /* Scroll arrows: smaller on mobile */
    .scroll-arrow {
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
    }

    .scroll-arrow.scroll-left {
        left: -4px !important;
    }

    .scroll-arrow.scroll-right {
        right: -4px !important;
    }

    .scroll-wrapper {
        padding: 0 14px !important;
    }

    /* --- Request Modal: full-screen on mobile --- */
    .request-modal.show {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .request-modal-content {
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        height: 100vh !important;
    }

    .request-modal-header {
        padding: 14px 16px !important;
        border-radius: 0 !important;
    }

    .request-modal-header h2 {
        font-size: 18px !important;
    }

    .request-modal-body {
        padding: 16px !important;
        max-height: calc(100vh - 140px) !important;
        min-height: auto !important;
    }

    .request-modal-footer {
        padding: 12px 16px !important;
        border-radius: 0 !important;
        flex-wrap: wrap !important;
    }

    .btn-submit-request,
    .btn-cancel-request,
    .request-modal-footer .btn-submit-request,
    .request-modal-footer .btn-cancel-request,
    button.btn-submit-request,
    button.btn-cancel-request {
        min-width: 100px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    /* --- Form fields --- */
    .request-form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .request-form-group {
        margin-bottom: 14px !important;
    }

    .request-form-group input,
    .request-form-group select,
    .request-form-group textarea {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    .form-section {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }

    .form-section h3 {
        font-size: 14px !important;
    }

    .form-section-box {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }

    .form-section-box h4 {
        font-size: 14px !important;
    }

    .form-section-box p,
    .form-section-box li {
        font-size: 12px !important;
    }

    .checkbox-label {
        font-size: 12px !important;
        gap: 8px !important;
    }

    /* --- Footer --- */
    .footer {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
}

/* ---- SMALL MOBILE (max-width: 480px) ---- */
@media (max-width: 480px) {
    /* Header: keep single row on small screens too */
    .header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 6px 8px !important;
        gap: 0 !important;
        align-items: center !important;
    }

    /* Icon bar: slightly smaller on small screens */
    .icon, .icon img, .icon svg {
        width: 40px !important;
        height: 40px !important;
    }

    .icons-top-bar-item span {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }

    .icons-top-bar-item {
        padding: 3px 0px !important;
        border-left: none !important;
    }

    .sidebar-divider,
    .category-separator-vertical {
        height: 40px !important;
        margin: 0 1px !important;
    }

    /* Map: shorter */
    .main-container {
        height: 200px !important;
        margin: 2px 4px 8px !important;
    }

    /* All Requests: keep horizontal scroll on small mobile */
    #allRequestsSection .all-requests-grid {
        gap: 8px !important;
    }

    .post-icon-img {
        height: 70px !important;
        padding: 8px !important;
    }

    /* Sections */
    .category-section {
        margin: 6px 4px !important;
        padding: 8px !important;
    }

    /* Filters: stack vertically */
    .filters {
        flex-direction: column !important;
    }

    .filter-dropdown {
        width: 100% !important;
    }

    .filter-dropdown select {
        width: 100% !important;
        min-width: auto !important;
    }

    /* Modal body */
    .request-modal-body {
        padding: 12px !important;
    }

    /* Duration inputs */
    .duration-inputs {
        flex-wrap: wrap !important;
    }

    .duration-input-group input,
    .form-section .duration-input-group input,
    .daily-needs-form .duration-input-group input {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }

    /* Table-based checkbox groups: make text smaller */
    .checkbox-group table td,
    .radio-group table td {
        font-size: 12px !important;
        padding: 2px 4px 2px 0 !important;
    }
}

/* ---- MOBILE: Request Details Modal ---- */
@media (max-width: 768px) {
    .request-details-modal.show {
        padding: 0 !important;
    }

    .request-details-content {
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        height: 100vh !important;
    }

    .request-details-header {
        padding: 14px 16px !important;
        border-radius: 0 !important;
    }

    .request-details-header h2 {
        font-size: 18px !important;
    }

    .request-details-body {
        padding: 16px !important;
    }

    .detail-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    .detail-label {
        min-width: auto !important;
        font-size: 13px !important;
    }

    .detail-value,
    .detail-value * {
        font-size: 14px !important;
    }

    .request-details-footer {
        padding: 12px 16px !important;
        border-radius: 0 !important;
        flex-wrap: wrap !important;
    }

    .btn-accept-request,
    .btn-close-details {
        padding: 10px 20px !important;
        font-size: 13px !important;
        min-width: 100px !important;
    }

    /* --- Todo Section --- */
    .todo-section {
        padding: 16px 0 30px 0 !important;
        margin: 20px 6px 0 6px !important;
        max-width: 100% !important;
    }

    .todo-section h2 {
        font-size: 18px !important;
        margin-left: 12px !important;
        margin-bottom: 16px !important;
    }

    .todo-grid {
        gap: 12px !important;
        padding: 0 6px !important;
        max-width: 100% !important;
    }

    /* --- Rejection/Blacklist Modals --- */
    .rejection-modal-content {
        width: 95% !important;
        max-width: 95% !important;
    }

    /* --- Horizontal scroll containers --- */
    .horizontal-scroll-container {
        gap: 10px !important;
        padding: 8px 4px !important;
    }

    /* --- User profile section in header --- */
    .user-profile {
        flex-shrink: 0 !important;
    }

    .user-profile strong,
    #header-user-name {
        display: none !important;
    }

    /* --- Confirmation buttons on cards --- */
    .confirmation-buttons {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .btn-confirm-task,
    .btn-reject-task {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    /* --- Status badges --- */
    .status-pending,
    .status-confirmed {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}

/* ---- VERY SMALL (max-width: 360px) ---- */
@media (max-width: 360px) {
    .icon, .icon img, .icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    .icons-top-bar-item span {
        font-size: 7px !important;
    }

    .main-container {
        height: 180px !important;
    }

    .post-content h3 {
        font-size: 10px !important;
    }

    .post-content p {
        font-size: 9px !important;
    }

    /* Header: hide username on very small screens */
    #header-user-name {
        display: none !important;
    }
}