/* =========================================================
    RESPONSIVE DESIGN KHUSUS MOBILE & TABLET
    Memisahkan seluruh kode layout khusus layar kecil
========================================================= */

/* =========================================================
   TABLET LAYOUT (Max Width: 1024px)
========================================================= */
@media (max-width: 1024px) {
    /* --- Struktur Utama --- */

    /* --- SBAR Handover --- */
    .sbar-container {
        flex-direction: column;
    }

    .sbar-list-panel {
        width: 100%;
        max-height: 250px;
    }

    .sbar-ws-body {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   TABLET PORTRAIT & MOBILE LARGE (Max Width: 1200px)
   Digunakan untuk elemen grid yang terlalu sesak
========================================================= */
@media (max-width: 1200px) {
    /* --- SBAR Riwayat --- */
    .sbar-history-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 40px !important;
    }

    .history-column {
        min-height: 500px;
    }
}

/* =========================================================
   MOBILE LAYOUT (Max Width: 768px)
========================================================= */
@media (max-width: 1024px) {
    /* --- Struktur Utama & Sidebar (Drawer) --- */
    .sidebar {
        position: fixed !important;
        left: 0 !important;
        transform: translateX(-100%);
        top: 0;
        bottom: 0;
        z-index: 1000;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        width: var(--sidebar-width) !important;
    }

    .sidebar.open {
        transform: translateX(0) !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100vw !important;
    }

    .topbar {
        left: 0 !important;
        width: 100% !important;
    }

    /* --- Header & Title --- */
    .header-title-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .header-user-profile {
        gap: 10px;
    }

    .user-info {
        display: none; /* Sembunyikan nama user di topbar HP agar tidak sesak */
    }

    /* --- Grid Bed Maps --- */
    #bedMapGrid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }

    .bed-box {
        min-height: 140px;
    }

    .bed-box-header {
        font-size: 0.8rem;
    }

    /* --- Modal & Popover (Bottom Sheet Style) --- */
    #bedPopoverForm, .modal-content, .flyout-panel {
        width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        top: auto !important;
        border-radius: 12px;
    }

    #bedPopoverForm.hidden-left,
    #bedPopoverForm.hidden-right {
        transform: translateY(100%) !important;
    }

    #bedPopoverForm.show-flyout {
        transform: translateY(0) !important;
    }

    /* --- Table Responsiveness --- */
    .table-container, .modern-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px; /* Lebarkan tabel ke ujung layar */
        padding: 0 10px;
    }

    .modern-table {
        min-width: 600px; /* Paksa tabel tetap lebar agar bisa di-scroll */
    }

    /* --- Action Panel Khusus Mobile --- */
    .panel-header {
        padding: 15px;
    }
    
    .panel-header h3 {
        font-size: 1.1rem;
    }
}

/* =========================================================
   VERY SMALL MOBILE (Max Width: 480px)
========================================================= */
@media (max-width: 480px) {
    #bedMapGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 1024px) {
    .roster-stat-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .stat-slide-row {
        grid-template-columns: 1fr 1fr;
        height: 165px;
    }
    .builder-stats-wrapper {
        height: 165px;
    }
}

@media (max-width: 600px) {
    .stat-slide-row {
        grid-template-columns: 1fr;
        height: 315px;
    }
    .builder-stats-wrapper {
        height: 315px;
    }
}
@media (max-width: 768px) {
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    .sidebar-overlay.show {
        display: block;
    }
}

/* Display mobile hamburger button on mobile/tablet, hide original */
.mobile-only {
    display: none !important;
}

@media (max-width: 1024px) {
    .mobile-only {
        display: inline-block !important;
    }
    .sidebar-header .btn-hamburger {
        display: none !important;
    }
    .header-left {
        gap: 15px !important;
    }
}

/* =========================================================
   PROPORTIONAL FONT SCALING (Root Element)
========================================================= */
@media (max-width: 1024px) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    /* Penyesuaian khusus jika masih terasa besar */
    .page-header-title {
        font-size: 1.3rem; /* Lebih diperkecil khusus untuk judul di HP */
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
}