/* ============================================
   TABLE & GRID STYLES
   ============================================ */

/* Tables - Horizontal scroll on mobile */
@media (max-width: 1199px) {
    .overflow-x-auto,
    #ordersTableContainer,
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        display: table;
        min-width: 600px; /* Minimum width for table */
    }

    /* Table cells - Better spacing on mobile */
    table th,
    table td {
        padding: 0.75rem 0.5rem !important;
        font-size: var(--text-sm) !important;
    }

    /* Hide less important columns on very small screens */
    @media (max-width: 640px) {
        /* Hide time column (6th) and keep status (5th) visible */
        table th:nth-child(6),
        table td:nth-child(6) {
            display: none;
        }

        /* Ensure essential columns are visible */
        table th:nth-child(1),
        table td:nth-child(1),
        table th:nth-child(2),
        table td:nth-child(2),
        table th:nth-child(3),
        table td:nth-child(3),
        table th:nth-child(4),
        table td:nth-child(4),
        table th:nth-child(5),
        table td:nth-child(5),
        table th:nth-child(7),
        table td:nth-child(7) {
            display: table-cell;
        }
    }
}

/* Tablet specific (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Better table spacing on tablet */
    table th,
    table td {
        padding: 0.875rem 0.75rem !important;
    }
}

/* Restaurant Layout Surface */
.restaurant-layout-surface {
    position: relative;
    border-radius: var(--radius-xl);
    background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.95), rgba(248, 249, 253, 0.95)),
                linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
                repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.1) 0px, rgba(148, 163, 184, 0.1) 1px, transparent 1px, transparent 32px),
                repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.1) 0px, rgba(148, 163, 184, 0.1) 1px, transparent 1px, transparent 32px);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Mobile layout surface adjustments */
@media (max-width: 640px) {
    .restaurant-layout-surface {
        height: min(500px, 70vh) !important;
        min-height: 400px !important;
        max-height: 600px !important;
    }

    /* Smaller table elements on mobile */
    .table-element {
        min-width: 40px !important;
        min-height: 40px !important;
        font-size: 0.625rem !important; /* 10px */
        border-width: 1.5px !important;
    }

    .table-element .table-body {
        font-size: 0.625rem !important;
        padding: 0.25rem !important;
    }

    .table-element .table-body > div:first-child {
        font-size: 0.625rem !important;
        font-weight: 600 !important;
    }

    .table-element .table-info-seats {
        font-size: 0.5rem !important; /* 8px */
    }

    /* Smaller resize handles on mobile */
    .resize-handle {
        width: 8px !important;
        height: 8px !important;
        opacity: 0.7 !important; /* More visible on mobile */
    }

    /* Smaller seat markers */
    .table-seat-marker {
        width: 10px !important;
        height: 10px !important;
    }

    /* Better touch targets */
    .table-element {
        touch-action: none; /* Prevent scrolling when dragging */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Larger resize handles for touch */
    .resize-handle {
        min-width: 20px !important;
        min-height: 20px !important;
        cursor: grab !important;
    }

    .resize-handle:active {
        cursor: grabbing !important;
    }

    /* Table status filter - Stack on mobile */
    #tables-section .flex.items-center.space-x-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    /* Table status grid - Better mobile spacing */
    #tableStatusGrid {
        gap: 0.75rem !important;
    }

    /* Reservations list - Mobile friendly */
    #tableStatusReservations {
        gap: 0.75rem !important;
    }

    /* Table layout container - Better mobile spacing */
    #tables-section .flex.flex-col.xl\\:flex-row {
        gap: 1rem !important;
    }

    /* Sidebar on mobile/tablet - Full width and visible */
    #tables-section .sidebar-clean {
        display: block !important; /* Override the global hide */
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure the flex container shows sidebar on tablet */
    #tables-section .flex.flex-col.xl\\:flex-row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* On xl screens, make it horizontal */
    @media (min-width: 1280px) {
        #tables-section .flex.flex-col.xl\\:flex-row {
            flex-direction: row !important;
        }
    }

    /* Layout card - Reduced padding */
    #tables-section .holded-card.p-6 {
        padding: 1rem !important;
    }

    /* Prevent layout overflow */
    #restaurantLayout {
        touch-action: pan-x pan-y; /* Allow panning but prevent zoom */
        -webkit-overflow-scrolling: touch;
    }

    /* Zoom container */
    .layout-zoom-container {
        position: relative;
        width: 100%;
        height: 100%;
        transform-origin: center center;
    }

    /* Ensure layout can show zoomed content */
    #restaurantLayout {
        overflow: auto !important;
    }

    /* Table elements - Ensure they're visible and properly sized */
    #restaurantLayout .table-element {
        cursor: grab !important;
    }

    #restaurantLayout .table-element:active {
        cursor: grabbing !important;
    }

    @media (min-width: 640px) {
        #specialDaysCalendar {
            gap: 0.25rem !important;
        }
    }

    /* Prevent calendar container from causing overflow */
    #specialDaysContent .holded-card {
        overflow-x: visible !important;
    }
}

@media (min-width: 641px) and (max-width: 1199px) {
    .restaurant-layout-surface {
        height: min(600px, 75vh) !important;
        min-height: 500px !important;
        max-height: 800px !important;
    }

    /* Medium-sized table elements on tablet */
    .table-element {
        font-size: 0.75rem !important; /* 12px */
    }

    .table-element .table-body {
        font-size: 0.75rem !important;
    }

    .table-element .table-info-seats {
        font-size: 0.625rem !important; /* 10px */
    }
}

/* Desktop layout surface - Even taller */
@media (min-width: 1200px) {
    .restaurant-layout-surface {
        height: min(700px, 80vh) !important;
        min-height: 600px !important;
        max-height: 900px !important;
    }
}

.restaurant-layout-surface.has-tables {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 10px 25px -18px rgba(15, 23, 42, 0.45);
}

.restaurant-layout-surface.has-tables .layout-empty-state {
    opacity: 0;
    visibility: hidden;
}

.table-seat-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.table-seat-marker {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(135deg, #8b5a2b 0%, #6b4423 50%, #5a3a1e 100%);
    border: 2px solid #3d2817;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
}

.table-seat-marker::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 6px;
    background: linear-gradient(to bottom, #8b5a2b 0%, #6b4423 100%);
    border-radius: 3px 3px 0 0;
    border: 2px solid #3d2817;
    border-bottom: none;
    top: -8px;
    left: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.table-seat-marker::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 2px;
    background: #4a2f1a;
    border-radius: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}

.table-element:hover .table-seat-marker {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #9d6a3b 0%, #7b5433 50%, #6a4a2e 100%);
}

.table-info-seats {
    font-size: 0.7rem;
    color: var(--text-medium);
}

.reservation-row {
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.reservation-row--highlight {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
    transform: translateY(-2px);
    background: rgba(59, 130, 246, 0.08) !important;
}

/* Special Days Calendar - MUST maintain 7 columns even on mobile */
@media (max-width: 1199px) {
    #specialDaysCalendar {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 0.0625rem !important; /* 1px gap on mobile by default */
        max-width: 100% !important;
    }

    #specialDaysCalendar > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 !important;
    }

    /* Mobile: Smaller calendar cells */
    @media (max-width: 640px) {
        #specialDaysCalendar {
            gap: 0.0625rem !important; /* 1px gap on mobile */
        }

        #specialDaysCalendar > * {
            min-height: 0 !important;
            max-height: none !important;
        }
    }

    /* Tablet/Medium screens: Slightly larger but still compact */
    @media (min-width: 641px) and (max-width: 1199px) {
        #specialDaysCalendar {
            gap: 0.125rem !important; /* 2px gap on tablet */
            max-width: 600px !important; /* Limit max width on tablet */
            margin: 0 auto !important; /* Center the calendar */
        }
    }

    /* Desktop: Full size */
    @media (min-width: 1200px) {
        #specialDaysCalendar {
            gap: 0.25rem !important; /* 4px gap on desktop */
            max-width: 100% !important;
        }
    }
}

/* Only fix specific problematic grids - don't break responsive grids */
@media (max-width: 1199px) {
    /* The calendar MUST maintain 7 columns */
    #specialDaysCalendar {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    /* Ensure time filter grid stays 2 columns */
    #reservationsFiltersPanel .grid.grid-cols-2,
    #reservationsFiltersPanel .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Ensure custom date range grid stays 2 columns */
    #customDateRange .grid.grid-cols-2,
    #customDateRange .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Ensure filters container wraps properly and doesn't break layout */
    #reservationsFiltersPanel {
        overflow: visible !important;
        max-width: 100% !important;
    }

    #reservationsFiltersPanel .flex.flex-wrap {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    /* Remove excessive white space below calendar */
    #reservationsCalendarView {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #reservationsCalendar {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Ensure calendar container doesn't have excessive height */
    #calendarDays {
        min-height: auto !important;
    }

    /* Remove bottom spacing from space-y-6 when calendar is the last visible child */
    [data-loading-container="reservations"] > #reservationsCalendarView:last-child:not(.hidden) {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Override space-y-6 spacing for calendar view to reduce white space */
    [data-loading-container="reservations"].space-y-6 > #reservationsCalendarView {
        margin-bottom: 0 !important;
    }

    /* Remove any min-height that might cause extra space in calendar */
    #reservationsCalendarView > div,
    #reservationsCalendar > div {
        min-height: auto !important;
    }

    /* Remove fixed min-height from week grid row to prevent excessive white space */
    .week-grid-row {
        min-height: auto !important;
        height: auto !important;
    }

    /* Make day columns fit content instead of fixed height */
    .week-grid-row .day-column {
        min-height: auto !important;
        height: auto !important;
    }

    /* Ensure reservation containers don't have excessive height */
    .week-grid-row .day-column > div[data-week-scroll] {
        max-height: none !important;
        min-height: auto !important;
    }

    /* Ensure calendarDays container wraps content properly */
    #calendarDays {
        min-width: auto !important;
        width: 100% !important;
        display: block !important;
    }

    /* Month view calendar grid - wrap content */
    .month-calendar-grid {
        min-height: auto !important;
        height: auto !important;
    }

    /* Ensure calendar container wraps around current view */
    #reservationsCalendar > div.flex.flex-col {
        min-height: auto !important;
        height: auto !important;
    }

    /* Calendar wrapper should fit content */
    #reservationsCalendar > div > div.w-full.overflow-x-auto {
        min-height: auto !important;
        height: auto !important;
    }
}

/* Tablet specific (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Allow 2 columns for stats on tablet */
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}