/* ──────────────────────────────────────────────────────────────
   NAVBAR / HEADER TWEAKS
   ────────────────────────────────────────────────────────────── */
header .navbar {
    padding: .25rem .5rem;
}

.navbar-brand {
    font-weight: 600;
    max-width: calc(100% - 3.25rem); /* sisakan ruang toggler */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .navbar-brand {
        max-width: none;
    }
}

.navbar-light .navbar-toggler,
.navbar .navbar-toggler {
    border: none;
}

    .navbar-light .navbar-toggler:focus,
    .navbar .navbar-toggler:focus {
        box-shadow: none;
    }

.navbar .navbar-nav:last-child .nav-link {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .navbar .nav-link {
        padding: .5rem .75rem;
    }

    .navbar-nav .nav-item + .nav-item {
        border-top: 1px solid rgba(0, 0, 0, .05);
    }
}

/* ──────────────────────────────────────────────────────────────
   LEGEND (bisa dipakai di halaman lain juga)
   ────────────────────────────────────────────────────────────── */
.hk-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
    margin-top: .25rem;
}

.hk-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    color: #6c757d;
    font-size: .95rem;
}

.hk-legend .badge {
    line-height: 1;
}

@media (max-width: 576px) {
    .hk-legend {
        gap: .35rem .75rem;
    }

    .hk-legend-item {
        font-size: .9rem;
    }
}

/* ──────────────────────────────────────────────────────────────
   GRID VARS (Dashboard Reservasi)
   ────────────────────────────────────────────────────────────── */
:root {
    --col-no-w: 70px; /* lebar kolom No Kamar */
    --col-jenis-w: 190px; /* lebar kolom Jenis Kamar */
    --col-day-w: 42px; /* lebar tiap kolom tanggal */
    --row-h: 20px; /* tinggi baris */
}

/* ──────────────────────────────────────────────────────────────
   GRID WRAPPER: area yang melakukan scroll
   ────────────────────────────────────────────────────────────── */
.grid-wrap {
    max-height: 80vh;
    min-height: 320px;
    overflow: auto; /* scroll vertikal & horizontal */
    background: #fff;
    border: 1px solid #eee;
    border-radius: .25rem;
    margin: 0 -8px 8px -8px; /* kiri kanan dipersempit */
    position: relative;
}

/* ──────────────────────────────────────────────────────────────
   TABEL GRID
   ────────────────────────────────────────────────────────────── */
table.table.grid {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    font-size: 11px;
    /* minimal agar 30 hari muat */
    min-width: calc(var(--col-no-w) + var(--col-jenis-w) + (30 * var(--col-day-w)));
}

    table.table.grid th,
    table.table.grid td {
        padding: 1px 3px;
        white-space: nowrap;
        border: 1px solid #444 !important; /* border lebih gelap & jelas */
        background-clip: padding-box;
        background-color: #fff;
    }

/* lebar kolom via <colgroup> */
.grid col.col-no {
    width: var(--col-no-w);
}

.grid col.col-jenis {
    width: var(--col-jenis-w);
}

.grid col.col-day {
    width: var(--col-day-w);
}

/* header tanggal sticky di atas */
.grid thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #333 !important;
}

    .grid thead th.day-head {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2px 2px;
    }

/* sel harian */
.grid td.slot-cell {
    padding: 0 !important;
    position: relative;
    height: var(--row-h);
    line-height: 0;
}

.slot {
    position: absolute;
    inset: 0;
    display: block;
}

/* ──────────────────────────────────────────────────────────────
   STICKY: 2 kolom kiri
   ────────────────────────────────────────────────────────────── */

/* semua cell yang sticky di body */
.grid tbody td.sticky-col {
    position: sticky;
    background: #fff;
}

/* header yang sticky sekaligus kolom kiri */
.grid thead th.sticky-col {
    position: sticky;
    top: 0;
    background: #fff;
}

/* kolom 1: No Kamar */
.sticky-1 {
    left: 0;
    min-width: var(--col-no-w);
    max-width: var(--col-no-w);
    z-index: 30;
    /* garis vertikal selalu tampak */
    border-right: 1px solid #444 !important;
    box-shadow: 1px 0 0 #444;
}

/* kolom 2: Jenis Kamar */
.sticky-2 {
    left: var(--col-no-w); /* tepat setelah kolom 1 */
    min-width: var(--col-jenis-w);
    max-width: var(--col-jenis-w);
    z-index: 29;
    /* garis kiri & kanan agar tidak hilang saat slide */
    border-left: 1px solid #444 !important;
    border-right: 1px solid #444 !important;
    box-shadow: 1px 0 0 #444;
}

/* header-nya di atas semua */
.grid thead th.sticky-1 {
    z-index: 40;
}

.grid thead th.sticky-2 {
    z-index: 39;
}

/* ──────────────────────────────────────────────────────────────
   WARNA STATUS
   ────────────────────────────────────────────────────────────── */
.bg-danger {
    background-color: #dc3545 !important;
}

.bg-primary {
    background-color: #007bff !important;
}

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-success {
    background-color: #28a745 !important;
}

.bg-purple {
    background-color: #6f42c1 !important;
}

.bg-secondary {
    background-color: #6c757d !important;
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE (HP)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    :root {
        --col-no-w: 64px;
        --col-jenis-w: 170px;
        --col-day-w: 40px;
        --row-h: 18px;
    }

    table.table.grid {
        font-size: 10px;
    }

    .grid-wrap {
        max-height: 76vh;
    }
}

@media (max-width: 576px) {
    :root {
        --col-no-w: 60px;
        --col-jenis-w: 160px;
        --col-day-w: 36px;
        --row-h: 16px;
    }

    table.table.grid {
        font-size: 9px;
    }
}