/* BoardSpot — shared mobile / responsive helpers */

html {
    -webkit-text-size-adjust: 100%;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .dashboard-wrapper,
    .portal-wrapper,
    .reports-wrapper,
    .bills-wrapper,
    .payments-wrapper,
    .reservations-wrapper,
    .profile-wrapper,
    .admin-wrapper,
    .users-wrapper,
    .rooms-wrapper,
    .logs-wrapper,
    .admin-content,
    .manage-wrapper,
    .manage-room-wrapper,
    .boarding-house-wrapper,
    .pricing-wrapper,
    .tenant-wrapper,
    .tenants-wrapper,
    .sales-wrapper {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    .stats-grid,
    .action-grid,
    .features-grid,
    .period-grid,
    .forms-grid,
    .layout-two-col,
    .two-columns,
    .rooms-grid,
    .hotel-listing-grid,
    .status-cards,
    .room-card-grid,
    .quick-stats,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .welcome-banner,
    .welcome-header,
    .page-header,
    .page-actions,
    .card-header,
    .toolbar,
    .filter-tabs,
    .welcome-actions,
    .quick-actions,
    .print-actions,
    .profile-actions,
    .dashboard-actions,
    .search-filter-bar,
    .filters-row,
    .rooms-header,
    .form-header {
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .welcome-actions .action-btn,
    .welcome-actions .action-btn-secondary,
    .toolbar .filter-btn,
    .filter-tabs .filter-btn,
    .dashboard-actions a,
    .btn-group,
    .page-actions .btn-back {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .table-container,
    .rooms-table-container,
    .admin-table-wrap,
    .overflow-x-auto,
    .dashboard-card,
    .table-responsive,
    .table-card {
        overflow: visible !important;
        -webkit-overflow-scrolling: auto;
        max-width: 100%;
    }

    /* Kill forced desktop table widths */
    .users-table,
    .reservations-table,
    .rooms-table,
    .logs-table,
    .room-table,
    .data-table,
    .admin-table,
    .portal-table,
    .bills-table,
    .payments-table,
    .pricing-table,
    .tenant-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    table.data-table,
    table.portal-table,
    table.reservations-table,
    table.bills-table,
    table.payments-table,
    table.rooms-table,
    table.users-table,
    table.logs-table,
    table.room-table,
    table.admin-table,
    table.pricing-table,
    table.tenant-table,
    .table-container > table,
    .rooms-table-container > table,
    .admin-table-wrap > table,
    .dashboard-main table:not(.no-stack),
    .admin-content table:not(.no-stack),
    .admin-main table:not(.no-stack) {
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    table.data-table thead,
    table.portal-table thead,
    table.reservations-table thead,
    table.bills-table thead,
    table.payments-table thead,
    table.rooms-table thead,
    table.users-table thead,
    table.logs-table thead,
    table.room-table thead,
    table.admin-table thead,
    table.pricing-table thead,
    table.tenant-table thead,
    .table-container > table thead,
    .rooms-table-container > table thead,
    .admin-table-wrap > table thead,
    .dashboard-main table:not(.no-stack) thead,
    .admin-content table:not(.no-stack) thead,
    .admin-main table:not(.no-stack) thead {
        display: none !important;
    }

    table.data-table tbody,
    table.portal-table tbody,
    table.reservations-table tbody,
    table.bills-table tbody,
    table.payments-table tbody,
    table.rooms-table tbody,
    table.users-table tbody,
    table.logs-table tbody,
    table.room-table tbody,
    table.admin-table tbody,
    table.pricing-table tbody,
    table.tenant-table tbody,
    .table-container > table tbody,
    .rooms-table-container > table tbody,
    .admin-table-wrap > table tbody,
    .dashboard-main table:not(.no-stack) tbody,
    .admin-content table:not(.no-stack) tbody,
    .admin-main table:not(.no-stack) tbody {
        display: block !important;
        width: 100% !important;
    }

    table.data-table tr,
    table.portal-table tr,
    table.reservations-table tr,
    table.bills-table tr,
    table.payments-table tr,
    table.rooms-table tr,
    table.users-table tr,
    table.logs-table tr,
    table.room-table tr,
    table.admin-table tr,
    table.pricing-table tr,
    table.tenant-table tr,
    .table-container > table tr,
    .rooms-table-container > table tr,
    .admin-table-wrap > table tr,
    .dashboard-main table:not(.no-stack) tr,
    .admin-content table:not(.no-stack) tr,
    .admin-main table:not(.no-stack) tr {
        display: block !important;
        width: 100% !important;
        background: #fff;
        border: 1px solid #d0dbe8 !important;
        border-radius: 14px;
        margin: 0 0 12px !important;
        padding: 10px 12px;
        box-shadow: 0 6px 18px rgba(2, 8, 23, 0.05);
        box-sizing: border-box;
    }

    table.data-table td,
    table.portal-table td,
    table.reservations-table td,
    table.bills-table td,
    table.payments-table td,
    table.rooms-table td,
    table.users-table td,
    table.logs-table td,
    table.room-table td,
    table.admin-table td,
    table.pricing-table td,
    table.tenant-table td,
    .table-container > table td,
    .rooms-table-container > table td,
    .admin-table-wrap > table td,
    .dashboard-main table:not(.no-stack) td,
    .admin-content table:not(.no-stack) td,
    .admin-main table:not(.no-stack) td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px solid #e8eef5 !important;
        text-align: right !important;
        white-space: normal !important;
        min-width: 0 !important;
        width: 100% !important;
        word-break: break-word;
        box-sizing: border-box;
        color: #0f172a !important;
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
    }

    table.data-table td:last-child,
    table.portal-table td:last-child,
    table.reservations-table td:last-child,
    table.bills-table td:last-child,
    table.payments-table td:last-child,
    table.rooms-table td:last-child,
    table.users-table td:last-child,
    table.logs-table td:last-child,
    table.room-table td:last-child,
    table.admin-table td:last-child,
    table.pricing-table td:last-child,
    table.tenant-table td:last-child,
    .table-container > table td:last-child,
    .rooms-table-container > table td:last-child,
    .admin-table-wrap > table td:last-child,
    .dashboard-main table:not(.no-stack) td:last-child,
    .admin-content table:not(.no-stack) td:last-child,
    .admin-main table:not(.no-stack) td:last-child {
        border-bottom: none !important;
        padding-top: 10px !important;
    }

    /* Clear, high-contrast row labels */
    table.data-table td::before,
    table.portal-table td::before,
    table.reservations-table td::before,
    table.bills-table td::before,
    table.payments-table td::before,
    table.rooms-table td::before,
    table.users-table td::before,
    table.logs-table td::before,
    table.room-table td::before,
    table.admin-table td::before,
    table.pricing-table td::before,
    table.tenant-table td::before,
    .table-container > table td::before,
    .rooms-table-container > table td::before,
    .admin-table-wrap > table td::before,
    .dashboard-main table:not(.no-stack) td::before,
    .admin-content table:not(.no-stack) td::before,
    .admin-main table:not(.no-stack) td::before {
        content: attr(data-label);
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #0f172a !important;
        text-align: left;
        flex: 0 0 38%;
        max-width: 38%;
        opacity: 1 !important;
    }

    /* Action / form cells */
    .dashboard-main table td:has(form),
    .dashboard-main table td:has(.action-btn),
    .dashboard-main table td:has(.btn),
    .dashboard-main table td:has(.btn-icon),
    .admin-content table td:has(form),
    .admin-content table td:has(.action-btn),
    .admin-content table td:has(.btn),
    .admin-main table td:has(form),
    .admin-main table td:has(.action-btn),
    .admin-main table td:has(.btn),
    .admin-main table td:has(.btn-icon),
    table td[data-label="Actions"],
    table td[data-label="Action"] {
        flex-wrap: wrap;
        align-items: center;
    }

    .dashboard-main table td form,
    .admin-content table td form,
    .admin-main table td form,
    .dashboard-main table td .action-buttons,
    .admin-content table td .action-buttons,
    .admin-main table td .action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        width: auto;
        max-width: 62%;
        margin-left: auto;
    }

    .dashboard-main table td .action-btn,
    .dashboard-main table td .btn,
    .dashboard-main table td .btn-icon,
    .admin-content table td .action-btn,
    .admin-content table td .btn,
    .admin-main table td .action-btn,
    .admin-main table td .btn,
    .admin-main table td .btn-icon,
    .dashboard-main table td button,
    .admin-content table td button,
    .admin-main table td button {
        white-space: nowrap;
    }

    .room-preview,
    .room-preview img,
    .rooms-table img,
    .room-thumb,
    .room-thumb img {
        max-width: 96px !important;
        width: auto !important;
        height: auto !important;
        max-height: 72px !important;
        border-radius: 10px;
        object-fit: cover;
    }

    .property-hero,
    .property-main,
    .page-actions {
        grid-template-columns: 1fr !important;
    }

    .admin-main,
    .dashboard-main,
    .admin-content {
        min-width: 0;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    body.admin-page {
        overflow-x: hidden;
    }

    .booking-columns,
    .cash-layout,
    .gcash-layout,
    .profile-grid,
    .owner-form .form-row,
    .form-grid,
    .edit-user-card .form-row {
        grid-template-columns: 1fr !important;
    }

    .main-container,
    .cash-page,
    .gcash-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .navbar-modern {
        border-radius: 16px !important;
        padding: 0.6rem 1rem !important;
    }

    .lists-card .list-item,
    .list-item {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .list-item-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    /* Admin Manage Users — force stack two-column owner panels */
    .pending-owner-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .pending-owners-card,
    .create-owner-card,
    .owner-form,
    .form-row,
    .form-row input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .pending-owner-item {
        grid-template-columns: 1fr !important;
    }

    .users-wrapper {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Owner Tenants — label on top for readable mobile cards */
    table.tenant-table td {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        text-align: left !important;
    }

    table.tenant-table td::before {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
        color: #0f172a !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
    }

    table.tenant-table td[data-label="Actions"] .action-buttons,
    table.tenant-table td .action-buttons {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }

    /* Owner Verify Payments — same readable card stack */
    table.payments-table td {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        text-align: left !important;
    }

    table.payments-table td::before {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
        color: #0f172a !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
    }

    table.payments-table td[data-label="Actions"] .action-buttons,
    table.payments-table td .action-buttons {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }

    /* Owner forms */
    .manage-wrapper form input,
    .manage-wrapper form select,
    .manage-wrapper form textarea,
    .pricing-wrapper form input,
    .profile-wrapper form input,
    .profile-wrapper form textarea,
    .tenant-wrapper form input,
    .tenant-wrapper form select {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Guest booking / checkout / payments */
    .booking-columns,
    .booking-info-panel .reservation-summary .panel-group,
    .payment-methods,
    .methods-grid,
    .summary-grid,
    .checkout-grid {
        grid-template-columns: 1fr !important;
    }

    .booking-info-panel h2 {
        font-size: 1.55rem !important;
    }

    .main-container,
    .rooms-wrapper {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .navbar-modern {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .welcome-banner h1,
    .welcome-banner h2,
    .page-header h1 {
        font-size: 1.35rem !important;
    }

    .stat-card {
        padding: 14px !important;
    }

    table.data-table td::before,
    table.rooms-table td::before,
    table.reservations-table td::before,
    table.payments-table td::before,
    table.pricing-table td::before,
    table.tenant-table td::before,
    table.data-table td,
    table.rooms-table td,
    .table-container > table td,
    .rooms-table-container > table td {
        font-size: 0.88rem !important;
    }
}