/*
 * Display Kamar – tambahan khusus layar kecil.
 * Tampilan desktop tetap menggunakan desain awal di displaykamar.php.
 */

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .full-screen {
        display: block !important;
        position: static !important;
        top: auto !important;
        margin: 0 !important;
        width: 100%;
        min-height: 100vh;
        height: auto;
        padding: 0 12px 28px !important;
        transform: none !important;
    }

    /* Header publik tidak diperlukan pada mode layar kamar. */
    body > header { display: none !important; }
    .full-screen > .header {
        display: block !important;
        position: static !important;
        float: none !important;
        clear: both !important;
        width: calc(100% + 24px) !important;
        min-height: 0 !important;
        height: auto !important;
        transform: none !important;
    }

    .full-screen > .header > .col-md-12 {
        float: none !important;
        width: 100% !important;
    }

    .header {
        margin-right: -12px !important;
        margin-left: -12px !important;
        padding: 14px 12px;
        border-radius: 0 0 8px 8px;
    }

    .hospital-logo { max-height: 58px; }
    .hospital-name { font-size: 21px; }
    .hospital-tagline { font-size: 13px; }

    #room-content h2 {
        margin: 20px 0 16px;
        font-size: 21px;
        line-height: 1.3;
    }

    #room-content .col-sm-6 { padding-right: 5px; padding-left: 5px; }
    .panel { margin-bottom: 13px; }
    .panel-heading { padding: 12px; }
    .panel-body { padding: 14px 10px; }
    .panel-title { font-size: 18px !important; }
    .status-label { min-width: 130px; }

    .footer {
        position: static;
        width: auto;
        margin: 14px -12px -28px;
        padding: 12px 10px;
        border-radius: 0;
    }

    .footer p { margin: 3px 0; font-size: 11px; }
    .refresh-btn {
        right: 14px;
        bottom: 16px;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
    }

    .refresh-btn i { margin: 0; font-size: 18px; }
}