/* Tab SUB MENU */
                /* Tab yang tidak aktif: putih + teks hitam */
                #menuRuangTab .nav-item .btn:not(.active) {
                    background-color: #ffffff !important;
                    color: #4d4b4bff !important;
                }

                /* Wrapper nav tab menghasilkan dasar yang bersih */
                #menuRuangTab {
                    border-bottom: none;
                    gap: 3px;
                }

                /* Style dasar semua button tab */
                #menuRuangTab .nav-item .btn {
                    transition: all 0.25s ease-in-out;
                }
/* Akhir SUB MENU */
                        
/* Card dibawah Inputan */
                            #detailBooking {
                                padding: 8px 12px;
                                font-weight: 500;
                                font-size: 14px;
                                display: flex;
                                gap: 20px;
                            }
/* Akhir Card dibawah Inputan */


/* Gambar Ruangan */
    .preview-box {
        border: 1px solid #dcdcdc;
        padding: 10px 15px;
        border-radius: 8px;
        background: #f8f9fa;
        font-size: 15px;
        font-weight: 600;
    }

    .ruang-card {
        min-height: 300px;
        border-radius: 12px;
        overflow: hidden;
        transition: .3s ease;
    }

    .ruang-card.available:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    }

    .ruang-image {
        width: 100%;
        height: 170px !important;
        background-size: cover;
        background-position: center;
        border-radius: 10px 10px 0 0;
    }

      .ruang-image.ruang1.warna {
        background-image: url('../images/room/kihajar_available.jpg');
    }

     .ruang-image.ruang1.abu {
        background-image: url('../images/room/kihajar_unavailable.jpg');
        filter: grayscale(100%);
    }

    .ruang-image.ruang2.warna {
        background-image: url('../images/room/kartini_available.jpg');
    }

     .ruang-image.ruang2.abu {
        background-image: url('../images/room/kartini_unavailable.jpg');
        filter: grayscale(100%);
    }

      .ruang-image.ruang3.warna {
        background-image: url('../images/room/soedirman_available.jpg');
    }

     .ruang-image.ruang3.abu {
        background-image: url('../images/room/soedirman_unavailable.jpg');
        filter: grayscale(100%);
    }

    .ruang-image.ruang4.warna {
        background-image: url('../images/room/sekretariat_available.jpg');
    }

      .ruang-image.ruang4.abu {
        background-image: url('../images/room/sekretariat_unavailable.jpg');
        filter: grayscale(100%);
    }

    .input-error {
        border: 1.5px solid #dc3545 !important;
    }

    /* TAB STYLE CUSTOM PRIMARY */
    .nav-tabs .nav-link {
        font-weight: 600;
        border-radius: 8px 8px 0 0;
        padding: 10px 18px;
        transition: 0.25s ease-in-out;
        background: #e9ecef;
        color: #495057;
    }

    .nav-tabs .nav-link:hover {
        background: #dfe3e6;
        color: #212529;
    }

    .nav-tabs .nav-link.active {
        color: #fff !important;
    }

    .nav-tabs {
        border-bottom: 0 !important;
    }

    .tab-pane {
        animation: fadeIn .35s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
/* Akhir Gambar Ruangan */
/* ================= AUTOCOMPLETE NAMA DI MODAL ================= */

/* wrapper wajib relative */
.dropdown-wrapper {
    position: relative;
}

/* dropdown utama */
.dropdown-list,
#autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    max-height: 220px;
    overflow-y: auto;

    background: #fff;
    border: 1px solid #d4d4d4;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: 4px;

    z-index: 1055; /* di atas Bootstrap modal */
    display: none;
    color: #000;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* item dropdown */
.dropdown-item-custom {
    padding: 12px 14px;
    cursor: pointer;
    font-size: 14px;
    color: #000;

    border-bottom: 1px solid #eee;
    transition: background-color 0.15s ease;
}

.dropdown-item-custom:last-child {
    border-bottom: none;
}

.dropdown-item-custom:hover {
    background-color: #f1f3f5;
}

/* error sejajar input */
#errdate,
#errstart_time,
#errend_time {
    position: absolute;
    bottom: -18px;
    left: 20px;
    font-size: 10px;
}

/* ================= MOBILE OPTIMIZATION ================= */
@media (max-width: 576px) {

    #autocomplete-list {
        max-height: 45vh; /* adaptif tinggi layar */
        font-size: 15px;
    }

    .dropdown-item-custom {
        padding: 16px 16px; /* nyaman untuk jari */
        font-size: 15px;
    }

    /* hindari ketutup keyboard */
    .modal-body {
        padding-bottom: 80px;
    }
}

/* ================= AKHIR AUTOCOMPLETE ================= */