/**
 * ==============================================================================
 * SUT ROOM RESERVATION SYSTEM - DEDICATED MOBILE RESPONSIVE STYLESHEET
 * File: public/css/mobile.css
 * Scope: Activated strictly on screens <= 768px (Zero impact on Desktop)
 * Design Principles: Mobile-First, Touch-Friendly, Sticky Columns, Safe Area
 * ==============================================================================
 */

/* ------------------------------------------------------------------------------
   1. APP LAYOUT & SIDEBAR (Streamlined for Mobile)
   ------------------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
    /* Prevent horizontal page bounce on mobile */
    html, body {
        overflow-x: hidden;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .app-layout {
        flex-direction: column !important;
        min-height: 100vh;
        width: 100%;
        overflow-x: hidden;
    }

    /* Convert desktop sidebar to a sleek compact top header banner on mobile */
    .app-sidebar {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
        top: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        z-index: 35 !important;
        padding: 0 !important;
    }

    .sidebar-brand {
        padding: 12px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    .brand-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 8px !important;
    }

    .brand-icon-svg {
        width: 18px !important;
        height: 18px !important;
    }

    .brand-icon-label {
        font-size: 8px !important;
    }

    .brand-text h2 {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        margin: 0 !important;
    }

    .brand-text p {
        font-size: 10.5px !important;
        margin: 0 !important;
    }

    /* Transform vertical sidebar nav into horizontal thumb-friendly tab bar */
    .sidebar-nav {
        padding: 8px 12px !important;
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .sidebar-nav::-webkit-scrollbar {
        display: none !important;
    }

    .sidebar-nav .nav-header {
        display: none !important;
    }

    .sidebar-nav .nav-link-item {
        flex: 1 1 auto !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        justify-content: center !important;
        margin-bottom: 0 !important;
        transform: none !important;
    }

    .sidebar-nav .nav-link-item svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* Compact Mobile Profile Card */
    .sidebar-profile {
        padding: 8px 12px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    .sidebar-profile .profile-chip {
        padding: 6px 10px !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }

    .sidebar-profile .profile-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    .sidebar-profile .profile-details .name {
        font-size: 12.5px !important;
        max-width: 140px !important;
        margin-bottom: 0 !important;
    }

    .sidebar-profile .profile-details .role {
        font-size: 10px !important;
        gap: 3px !important;
    }

    .sidebar-profile .btn-sm {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    /* Main Workspace & Padding */
    .main-content-wrapper {
        padding-bottom: 150px !important; /* Extra room for floating booking bar */
        width: 100% !important;
        min-width: 0 !important;
    }

    .modern-topbar {
        height: auto !important;
        min-height: 48px !important;
        padding: 8px 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        position: relative !important;
    }

    .topbar-left {
        display: none !important; /* Title already visible in sidebar-brand above */
    }

    .topbar-right {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }

    .topbar-right .btn-sm {
        padding: 6px 10px !important;
        font-size: 11.5px !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    .page-body {
        padding: 10px 8px !important; /* Maximize usable table area */
    }

    /* ------------------------------------------------------------------------------
       2. DATE CAROUSEL STRIP (Smooth Horizontal Touch Swipe)
       ------------------------------------------------------------------------------ */
    .booking-days-container {
        padding: 10px 8px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
    }

    .booking-days-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .booking-days-title {
        font-size: 12.5px !important;
        flex-wrap: wrap !important;
        line-height: 1.4 !important;
    }

    .booking-days-legend {
        font-size: 11px !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }

    .day-cards-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 7px !important;
        padding: 4px 2px 8px 2px !important;
        scrollbar-width: none !important;
    }

    .day-cards-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    .day-card-btn {
        flex: 0 0 88px !important;
        min-width: 88px !important;
        max-width: 95px !important;
        scroll-snap-align: start !important;
        padding: 8px 4px !important;
        border-radius: 10px !important;
    }

    .day-card-badge {
        font-size: 9.5px !important;
        padding: 2px 5px !important;
    }

    .day-card-date {
        font-size: 13.5px !important;
        margin: 3px 0 !important;
    }

    .day-card-status-pill {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    .day-card-time-tag {
        font-size: 9px !important;
    }

    /* ------------------------------------------------------------------------------
       3. CATEGORY TABS & SUBTYPE CHIPS (Single-Row Swipeable)
       ------------------------------------------------------------------------------ */
    .category-tab-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .category-tab-bar > div:first-child {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding: 2px 0 6px 0 !important;
        scrollbar-width: none !important;
    }

    .cat-tab-style-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 2px !important;
        width: 100% !important;
    }
    .cat-tab-style-chips::-webkit-scrollbar {
        display: none !important;
    }
    .style-chip-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .category-tab-bar > div:first-child::-webkit-scrollbar {
        display: none !important;
    }

    .cat-tab-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .guidelines-quick-btn {
        align-self: flex-start !important;
        font-size: 11.5px !important;
        padding: 5px 12px !important;
    }

    .subgroup-filter-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding: 4px 0 8px 0 !important;
        margin-bottom: 10px !important;
        scrollbar-width: none !important;
    }

    .subgroup-filter-bar::-webkit-scrollbar {
        display: none !important;
    }

    .subgroup-filter-label {
        font-size: 11px !important;
        white-space: nowrap !important;
        padding: 4px 6px !important;
    }

    .subgroup-chip-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 11.5px !important;
        padding: 5px 10px !important;
        border-radius: 8px !important;
    }

    /* ------------------------------------------------------------------------------
       4. MATRIX SCHEDULE GRID (Sticky Left Room Column & Touch Slots)
       ------------------------------------------------------------------------------ */
    .matrix-table-card {
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        overflow: hidden !important;
    }

    .matrix-card-header {
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .matrix-title-main {
        font-size: 13.5px !important;
        line-height: 1.3 !important;
    }

    .matrix-header-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .matrix-date-display {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    .matrix-refresh-btn {
        font-size: 11.5px !important;
        padding: 4px 10px !important;
    }

    /* Legend Subbar: Horizontal Swipe on Mobile */
    .matrix-legend-subbar {
        padding: 6px 10px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 5px !important;
        scrollbar-width: none !important;
    }

    .matrix-legend-subbar::-webkit-scrollbar {
        display: none !important;
    }

    .matrix-legend-intro {
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }

    .matrix-legend-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }

    .matrix-legend-badge {
        flex: 0 0 auto !important;
        font-size: 10px !important;
        padding: 2px 7px !important;
        white-space: nowrap !important;
    }

    /* Scroll Wrapper with Smooth Touch Swipe */
    .matrix-scroll-wrapper {
        position: relative !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    .matrix-modern-table {
        min-width: 720px !important; /* Guarantees comfortable slot columns */
    }

    .matrix-modern-table th {
        font-size: 10px !important;
        padding: 6px 2px !important;
        min-width: 72px !important;
    }

    /* ★ STICKY ROOM COLUMN ON MOBILE (Crucial for UX) ★ */
    .room-col-header {
        position: sticky !important;
        left: 0 !important;
        z-index: 20 !important;
        background: var(--bg-card) !important;
        width: 95px !important;
        min-width: 90px !important;
        max-width: 100px !important;
        padding: 6px 6px !important;
        box-shadow: 3px 0 8px rgba(0, 0, 0, 0.08) !important;
    }

    .room-col-title {
        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        word-break: break-word !important;
    }

    /* Time Slot Buttons: Thumb-Friendly Touch Targets */
    .matrix-modern-table td {
        padding: 3px 2px !important;
        height: 52px !important;
        min-width: 72px !important;
    }

    .grid-slot-btn {
        min-width: 70px !important;
        height: 48px !important;
        padding: 3px 2px !important;
        border-radius: 6px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .slot-line-status {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .slot-line-sub {
        font-size: 9px !important;
        line-height: 1.1 !important;
        max-width: 68px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .slot-line-time {
        font-size: 8.5px !important;
        line-height: 1 !important;
        opacity: 0.8 !important;
    }

    /* Sub-type group divider row */
    .subtype-group-row td {
        padding: 8px 10px !important;
    }

    .subtype-title-text {
        font-size: 12px !important;
    }

    .subtype-pill-tag {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }

    /* ------------------------------------------------------------------------------
       5. FLOATING BOOKING ACTION BAR (Thumb-Optimized Stacked Card)
       ------------------------------------------------------------------------------ */
    .floating-booking-bar {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: calc(100% - 16px) !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25) !important;
        z-index: 100 !important;
    }

    .floating-bar-info {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .floating-slot-badge-box {
        padding: 3px 8px !important;
        border-radius: 8px !important;
    }

    .floating-slot-badge-box .slot-qty {
        font-size: 13px !important;
        font-weight: 800 !important;
    }

    .floating-slot-badge-box .slot-hrs {
        font-size: 10.5px !important;
    }

    .floating-bar-text {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .floating-bar-title {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .floating-bar-subtitle {
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    .floating-room-chip {
        font-size: 9.5px !important;
        padding: 1px 6px !important;
    }

    /* Full-width Purpose Input Box */
    .floating-purpose-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .floating-purpose-input {
        height: 38px !important;
        font-size: 12.5px !important;
        padding: 0 30px 0 32px !important;
        border-radius: 8px !important;
    }

    /* Actions: Side-by-side Clear and Confirm Buttons */
    .floating-bar-actions {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }

    .btn-clear-selection {
        flex: 0 0 80px !important;
        height: 42px !important;
        font-size: 11.5px !important;
        padding: 0 6px !important;
        border-radius: 8px !important;
        justify-content: center !important;
    }

    .btn-confirm-booking {
        flex: 1 1 auto !important;
        height: 42px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
        justify-content: center !important;
    }

    /* ------------------------------------------------------------------------------
       6. MODALS & POPUPS (Responsive Card / Sheet)
       ------------------------------------------------------------------------------ */
    .modal-dialog,
    .pastel-modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        margin: 12px auto !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .modal-head,
    .pastel-modal-header {
        padding: 12px 16px !important;
        flex-shrink: 0 !important;
    }

    .modal-body,
    .pastel-modal-body {
        padding: 14px 16px !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .modal-foot,
    .pastel-modal-footer {
        padding: 10px 14px !important;
        flex-shrink: 0 !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .modal-foot .btn,
    .pastel-modal-footer .btn {
        flex: 1 1 auto !important;
        justify-content: center !important;
        min-height: 40px !important;
    }

    /* Guidelines modal specific */
    .guidelines-rendered-content img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
    }

    /* ------------------------------------------------------------------------------
       7. MY BOOKINGS & PASS SLIP VIEW
       ------------------------------------------------------------------------------ */
    .my-bookings-container {
        padding: 4px 0 !important;
    }

    .booking-group-card {
        border-radius: 12px !important;
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
    }

    .slip-container {
        padding: 16px 12px !important;
        width: 100% !important;
    }

    .slip-header h2 {
        font-size: 15px !important;
    }

    .slip-barcode-area svg,
    .slip-barcode-area canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}