/* =====================================================================
   tablet.css — iPad / touch-friendly overrides
   ---------------------------------------------------------------------
   Every rule in this file is gated by either:
     @media (max-width: 1024px)   — iPad-and-below sizes
     @media (hover: none)         — touch devices (no hover capability)
   On a desktop monitor with a mouse, none of these rules match and the
   cascade falls back to the original CSS in style.css / admin.css /
   the inline <style> blocks of each page.

   ROLLBACK: remove the <link rel="stylesheet" href="tablet.css"> tag
   from each HTML page (or comment it out). To revert a SINGLE fix,
   delete just that section block below — every fix is in its own
   labelled section.
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   P0-1: Floor plan resize handle — visible on touch (no hover-to-reveal)
   Files affected: floor-plan.html, edit-floor-plan.html
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none) {
    .tbl-resize-handle {
        opacity: 1 !important;
        width: 22px !important;
        height: 22px !important;
        background-size: 5px 5px !important;
    }
    /* Invisible 44×44 hit area for easier touch targeting */
    .tbl-resize-handle::after {
        content: "";
        position: absolute;
        inset: -11px;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P0-2: Hover-only affordances — make visible on touch
   Files affected: index.html (#reservation-summary), floor-plan.html
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none) {
    /* Customer page: pencil "tap to edit" hint always visible on touch */
    #reservation-summary::after {
        opacity: 1 !important;
    }
    /* Floor-plan card: subtle resting shadow instead of hover-only */
    .fp-card {
        box-shadow: 0 1px 4px rgba(99, 102, 241, 0.06);
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P0-2 (cont.): :active feedback for touch on interactive elements
   Files affected: style.css (.time-slot-btn), floor-plan.html (.fp-chip,
   .fp-action-*), timeline.html (.reservation-block, .tl-chip)
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none) {
    .time-slot-btn:active:not(:disabled) {
        border-color: var(--primary-color, #d4af37);
        background-color: rgba(212, 175, 55, 0.18);
        transform: scale(0.98);
    }
    .fp-chip:active {
        background: #d1d5db;
        transform: scale(0.97);
    }
    .fp-chip-active:active {
        background: #3730a3;
    }
    .reservation-block:active {
        filter: brightness(0.85);
        transform: scale(1.02);
    }
    .tl-chip:active {
        filter: brightness(0.92);
        transform: scale(0.97);
    }
    /* Generic action buttons in floor plan info panel */
    [class*="fp-action-"]:active {
        filter: brightness(0.92);
        transform: scale(0.97);
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P1-3: Floor plan sidebar — narrower on iPad to free up canvas space
   File affected: floor-plan.html (#fp-grid, #fp-today-panel)
   Note: chose "shrink" over auto-hide so the existing toggle button
   stays in sync; user can still manually collapse via the existing
   button if they want full canvas width.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    #fp-grid {
        grid-template-columns: 260px 1fr !important;
        gap: 1rem !important;
    }
    #fp-today-panel {
        width: 260px !important;
    }
}
@media (max-width: 820px) {
    /* iPad portrait: shrink further */
    #fp-grid {
        grid-template-columns: 220px 1fr !important;
        gap: 0.75rem !important;
    }
    #fp-today-panel {
        width: 220px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P1-4: Timeline label column shrinks on iPad
   File affected: timeline.html (.table-label, .time-slot-column)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .table-label {
        width: 88px !important;
        min-width: 88px !important;
        font-size: 0.8125rem !important;
        padding: 0.75rem 0.2rem !important;
    }
    .time-slot-column {
        min-width: 52px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P1-5: Floor plan info panel doesn't overflow on narrow iPad
   File affected: floor-plan.html (#table-info-panel)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    #table-info-panel {
        width: min(380px, 92vw) !important;
        right: -92vw;
    }
    #table-info-panel.open {
        right: 0 !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P1-6: Metrics grid — 3-column step between desktop's 5 and mobile's 2
   File affected: floor-plan.html (#fp-metrics)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1280px) and (min-width: 769px) {
    #fp-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P1-7: Bookings table — hide "Requested At" column on iPad and below
   File affected: bookings.html (the bookings table)
   Targets the 6th column (1=checkbox, 2=time, 3=guests, 4=tables,
   5=guest info, 6=requested at, 7=status, 8=actions).
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    #bookings-tbody tr > *:nth-child(6),
    table thead tr > th:nth-child(6) {
        display: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P2-8: Touch target sizes for chips and small interactive elements
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none) {
    .tl-chip {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.8125rem !important;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
    .fp-chip {
        font-size: 0.8125rem !important;
        padding: 6px 12px !important;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P2-9: Modal close buttons — ensure ≥40×40 hit areas on touch
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none) {
    .fp-modal button[aria-label="Close"],
    .fp-modal .fp-modal-close,
    .panel-header button {
        min-width: 40px;
        min-height: 40px;
        padding: 8px !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P3-10: Customer booking — SMS consent text legibility on touch
   File affected: index.html (.sms-consent in style.css)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sms-consent {
        font-size: 0.875rem !important;
        line-height: 1.4;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P3-11: Customer booking — special requests textarea taller on touch
   File affected: index.html (#special-requests)
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    #special-requests {
        min-height: 5rem;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P3-12: Customer booking — SMS opt-in checkbox bigger tap target
   File affected: index.html (#sms-opt-in)
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none) {
    #sms-opt-in {
        transform: scale(1.25);
        margin-right: 10px !important;
    }
    label[for="sms-opt-in"] {
        padding: 6px 0;
    }
}


/* ─────────────────────────────────────────────────────────────────────
   P4-14: Smoother momentum scrolling for modal/scrollable content on iOS
   ───────────────────────────────────────────────────────────────────── */
@media (hover: none) {
    .fp-modal,
    .panel-body,
    #timeline-container,
    .overflow-x-auto,
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
    }
}