/* PandaEats shared responsive layer */

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

body {
    overflow-x: hidden;
}

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

input,
select,
textarea,
button {
    max-width: 100%;
}

* {
    min-width: 0;
}

table {
    max-width: 100%;
}

.table-container,
.orders-table,
.transactions-table,
.users-table,
.restaurants-table,
.riders-table,
.cart-table,
.history-table,
.order-table,
.data-table,
.admin-table,
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.container,
.dashboard-container,
.main-content,
.content,
.page-content,
.admin-content,
.rider-content,
.checkout-container,
.cart-container,
.order-container,
.tracking-container,
.history-container,
.form-container {
    width: min(100%, 1200px);
}

.login-card,
.register-card,
.payment-card,
.summary-card,
.checkout-card,
.cart-summary,
.order-summary,
.details-card,
.info-card {
    max-width: 100%;
}

.btn,
.add-btn,
.submit-btn,
.cancel-btn,
.feedback-btn,
.checkout-btn,
.action-btn,
.login-btn,
.home-btn,
.btn-login,
.btn-register,
.view-menu-link,
button,
input[type="submit"],
input[type="button"] {
    touch-action: manipulation;
}

@media (max-width: 1024px) {
    .container,
    .dashboard-container,
    .main-content,
    .content,
    .page-content,
    .admin-content,
    .rider-content,
    .checkout-container,
    .cart-container,
    .order-container,
    .tracking-container,
    .history-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .dashboard-grid,
    .stats-grid,
    .quick-actions,
    .restaurants-grid,
    .restaurants,
    .menu-grid,
    .food-grid,
    .orders-grid,
    .cards-grid,
    .admin-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }

    .checkout-layout,
    .cart-layout,
    .tracking-layout,
    .payment-layout,
    .dashboard-layout,
    .admin-layout,
    .main-grid,
    .content-grid,
    .details-grid,
    .summary-grid,
    .form-grid,
    .rider-nav-grid {
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        width: 88px !important;
        overflow: hidden !important;
    }

    .sidebar .logo span,
    .sidebar .brand span,
    .sidebar h2,
    .sidebar .admin-name,
    .sidebar .rider-name,
    .sidebar .nav-text,
    .sidebar .menu-text {
        display: none !important;
    }

    .main-content,
    .admin-content,
    .content {
        margin-left: 88px !important;
        width: calc(100% - 88px) !important;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }

    .topbar,
    .navbar,
    .header,
    .admin-header,
    .rider-header,
    .page-header,
    .content-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 12px 16px !important;
    }

    body {
        display: block !important;
    }

    .sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
        overflow: visible !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
        z-index: 20 !important;
    }

    .sidebar .logo span,
    .sidebar .brand span,
    .sidebar h2,
    .sidebar .admin-name,
    .sidebar .rider-name,
    .sidebar .nav-text,
    .sidebar .menu-text {
        display: inline !important;
    }

    .sidebar .logo,
    .sidebar .brand,
    .sidebar-header,
    .admin-profile,
    .rider-profile {
        justify-content: center !important;
        text-align: center !important;
    }

    .nav-menu,
    .sidebar nav,
    .sidebar-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        margin-top: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .nav-menu a,
    .sidebar nav a,
    .sidebar-menu a {
        display: inline-block !important;
        min-width: auto !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
    }

    .main-content,
    .admin-content,
    .content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 18px 14px !important;
    }

    .logo,
    .brand {
        justify-content: center !important;
        flex-wrap: wrap !important;
        text-align: center;
    }

    .logo img,
    .brand img {
        width: 44px !important;
        height: 44px !important;
        object-fit: contain;
    }

    .logo span,
    .brand span {
        font-size: 20px !important;
        line-height: 1.2;
    }

    .user-greeting {
        margin-left: 0 !important;
        white-space: normal;
        text-align: center;
    }

    .nav,
    .navbar-nav,
    .menu,
    .admin-nav,
    .rider-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .nav a,
    .navbar-nav a,
    .menu a,
    .admin-nav a,
    .rider-nav a {
        display: inline-block;
        margin-left: 0 !important;
        text-align: center;
        white-space: nowrap;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        min-width: auto !important;
    }

    .nav::-webkit-scrollbar,
    .nav-menu::-webkit-scrollbar,
    .navbar-nav::-webkit-scrollbar { display: none; }

    .banner,
    .hero,
    .page-hero {
        flex-direction: column !important;
        text-align: center !important;
        min-height: auto !important;
        padding: 34px 18px !important;
    }

    .banner-text,
    .hero-text {
        max-width: 100% !important;
    }

    .banner-text h1,
    .hero h1,
    .page-title,
    h1 {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1.15 !important;
    }

    h2 {
        font-size: clamp(22px, 6vw, 30px) !important;
        line-height: 1.2 !important;
    }

    h3 {
        line-height: 1.25 !important;
    }

    .section-title {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    .dashboard-grid,
    .stats-grid,
    .quick-actions,
    .restaurants-grid,
    .restaurants,
    .menu-grid,
    .food-grid,
    .orders-grid,
    .cards-grid,
    .admin-grid,
    .rider-grid,
    .stats-container,
    .restaurant-grid,
    .rider-stats,
    .order-stats,
    .customer-summary-box,
    .payment-methods,
    .quick-stats,
    .analytics-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .card,
    .restaurant-card,
    .dashboard-card,
    .stat-card,
    .action-card,
    .food-card,
    .order-card,
    .feedback-card {
        max-width: 100% !important;
    }

    .order-item,
    .cart-item,
    .history-item,
    .feedback-card,
    .transaction-item,
    .order-header,
    .food-info,
    .admin-info,
    .rider-info,
    .customer-detail,
    .payment-row,
    .summary-row,
    .filter-row,
    .table-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .order-item img,
    .cart-item img,
    .food-info img,
    .restaurant-card img,
    .food-card img {
        align-self: center;
    }

    .form-container,
    .login-container,
    .register-container,
    .logout-container,
    .login-card,
    .register-card,
    .payment-card,
    .summary-card,
    .checkout-card,
    .cart-summary,
    .order-summary,
    .details-card,
    .modal-content,
    .panel,
    .card-panel {
        width: calc(100% - 28px) !important;
        max-width: 560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 22px !important;
    }

    .form-row,
    .input-row,
    .filters,
    .status-filters,
    .search-row,
    .button-row,
    .form-buttons,
    .action-buttons,
    .card-actions,
    .modal-actions,
    .header-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .btn,
    .add-btn,
    .submit-btn,
    .cancel-btn,
    .feedback-btn,
    .checkout-btn,
    .action-btn,
    .login-btn,
    .home-btn,
    .btn-login,
    .btn-register,
    input[type="submit"],
    input[type="button"] {
        width: 100%;
        min-height: 48px;
    }

    table {
        display: block;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    th,
    td {
        white-space: nowrap;
    }

    .map-container,
    .rider-nav-map-wrap,
    #riderMainNavMap,
    #map,
    .tracking-map {
        min-height: 280px !important;
        height: 280px !important;
    }

    .rider-nav-panel-header,
    .rider-nav-controls {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .rider-nav-controls select,
    .rider-nav-controls button {
        width: 100% !important;
    }

    .modal {
        padding: 12px !important;
        overflow-y: auto !important;
    }

    .modal-content {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
        max-height: none !important;
    }

    .footer {
        flex-direction: column !important;
        text-align: center !important;
        padding: 32px 18px !important;
        gap: 24px !important;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .container,
    .dashboard-container,
    .main-content,
    .content,
    .page-content,
    .admin-content,
    .rider-content,
    .checkout-container,
    .cart-container,
    .order-container,
    .tracking-container,
    .history-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .topbar,
    .navbar,
    .header,
    .admin-header,
    .rider-header {
        padding: 10px 12px !important;
    }

    .nav a,
    .navbar-nav a,
    .menu a,
    .admin-nav a,
    .rider-nav a {
        flex-basis: 100%;
        min-width: 0;
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    .banner,
    .hero,
    .page-hero {
        padding: 28px 14px !important;
        border-radius: 18px !important;
    }

    .banner-logo,
    .hero-logo {
        width: 136px !important;
        height: 136px !important;
    }

    .banner-logo img,
    .hero-logo img {
        width: 104px !important;
        height: 104px !important;
    }

    .form-container,
    .login-container,
    .register-container,
    .logout-container,
    .login-card,
    .register-card,
    .payment-card,
    .summary-card,
    .checkout-card,
    .cart-summary,
    .order-summary,
    .details-card,
    .modal-content,
    .panel,
    .card-panel {
        width: calc(100% - 20px) !important;
        padding: 18px !important;
        border-radius: 16px !important;
    }

    .section-title {
        font-size: 22px !important;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .nav-menu a,
    .sidebar nav a,
    .sidebar-menu a {
        flex-basis: 100% !important;
    }

    .stat-card,
    .dashboard-card,
    .action-card,
    .restaurant-card,
    .food-card,
    .order-card,
    .payment-card,
    .summary-card {
        padding: 16px !important;
    }

    .map-container,
    .rider-nav-map-wrap,
    #riderMainNavMap,
    #map,
    .tracking-map {
        min-height: 230px !important;
        height: 230px !important;
    }
}

@media (max-width: 360px) {
    .logo span,
    .brand span {
        font-size: 18px !important;
    }

    h1 {
        font-size: 26px !important;
    }

    h2 {
        font-size: 21px !important;
    }

    .container,
    .dashboard-container,
    .main-content,
    .content,
    .page-content,
    .admin-content,
    .rider-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .banner,
    .hero,
    .page-hero,
    .login-container,
    .register-container {
        min-height: auto !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    .modal-content {
        margin-top: 12px !important;
    }
}