/* ============================================================
   Kosku — tema kustom di atas Bootstrap 5.3 (CDN)
   File CSS biasa. Edit → simpan → refresh. Tanpa kompilasi.
   ============================================================ */

/* ---------- 1. Palet warna ---------------------------------- */
:root {
    --kosku-primary:       #0d9488;
    --kosku-primary-dark:  #0f766e;
    --kosku-primary-soft:  rgba(13, 148, 136, .12);
    --kosku-sidebar-from:  #0f766e;
    --kosku-sidebar-to:    #115e59;

    --kosku-sidebar-width: 260px;
    --kosku-header-height: 64px;

    /* Menimpa variabel bawaan Bootstrap 5.3 */
    --bs-primary:      #0d9488;
    --bs-primary-rgb:  13, 148, 136;
    --bs-body-bg:      #f1f5f9;
    --bs-body-color:   #1e293b;
    --bs-border-radius:    .625rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: .875rem;
    --bs-link-color:       #0d9488;
    --bs-link-color-rgb:   13, 148, 136;
    --bs-link-hover-color: #0f766e;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 2. Komponen Bootstrap diwarnai ulang ------------- */
.btn-primary {
    --bs-btn-bg: var(--kosku-primary);
    --bs-btn-border-color: var(--kosku-primary);
    --bs-btn-hover-bg: var(--kosku-primary-dark);
    --bs-btn-hover-border-color: var(--kosku-primary-dark);
    --bs-btn-active-bg: var(--kosku-primary-dark);
    --bs-btn-active-border-color: var(--kosku-primary-dark);
    --bs-btn-disabled-bg: var(--kosku-primary);
    --bs-btn-disabled-border-color: var(--kosku-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--kosku-primary);
    --bs-btn-border-color: var(--kosku-primary);
    --bs-btn-hover-bg: var(--kosku-primary);
    --bs-btn-hover-border-color: var(--kosku-primary);
    --bs-btn-active-bg: var(--kosku-primary);
    --bs-btn-active-border-color: var(--kosku-primary);
    --bs-btn-disabled-color: var(--kosku-primary);
    --bs-btn-disabled-border-color: var(--kosku-primary);
}

.btn { font-weight: 500; }

.form-control:focus,
.form-select:focus {
    border-color: #5eead4;
    box-shadow: 0 0 0 .18rem rgba(13, 148, 136, .18);
}

.form-check-input:checked {
    background-color: var(--kosku-primary);
    border-color: var(--kosku-primary);
}

.form-check-input:focus {
    border-color: #5eead4;
    box-shadow: 0 0 0 .18rem rgba(13, 148, 136, .18);
}

.page-link { color: var(--kosku-primary); }

.page-item.active .page-link {
    background-color: var(--kosku-primary);
    border-color: var(--kosku-primary);
}

.progress-bar { background-color: var(--kosku-primary); }

.card {
    border: 0;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
}

.card-header { background-color: #fff; }
.alert { border-radius: var(--bs-border-radius); }

/* ---------- 3. Kerangka layout ------------------------------ */
.app-wrapper { min-height: 100vh; }

.app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--kosku-sidebar-width);
    background: linear-gradient(180deg, var(--kosku-sidebar-from) 0%, var(--kosku-sidebar-to) 100%);
    color: rgba(255, 255, 255, .85);
    overflow-y: auto;
    z-index: 1045;
    transition: transform .25s ease;
}

.app-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--kosku-header-height);
    padding: 0 1.25rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.app-sidebar .sidebar-heading {
    padding: 1.25rem 1.25rem .4rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .1rem .75rem;
    padding: .625rem .875rem;
    border-radius: var(--bs-border-radius);
    color: rgba(255, 255, 255, .82);
    font-size: .925rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.app-sidebar .nav-link i { font-size: 1.1rem; opacity: .9; }

.app-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
}

.app-sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 600;
}

.app-content {
    margin-left: var(--kosku-sidebar-width);
    min-height: 100vh;
    transition: margin-left .25s ease;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--kosku-header-height);
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 1040;
    display: none;
}

/* ---------- 4. Mode mobile (< 992px) ------------------------ */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }   /* sidebar digeser keluar layar */
    .app-content { margin-left: 0; }

    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .app-sidebar { transform: translateX(0); }   /* muncul saat diklik */
    body.sidebar-open .sidebar-backdrop { display: block; }
}

/* ---------- 5. Kartu statistik ------------------------------ */
.stat-card { position: relative; overflow: hidden; height: 100%; }

.stat-card .stat-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 1.35rem;
    flex: 0 0 auto;
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.stat-card .stat-label {
    font-size: .8rem;
    color: #64748b;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .stat-card .card-body { padding: .9rem; gap: .65rem !important; }
    .stat-card .stat-icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 11px; }
    .stat-card .stat-value { font-size: 1.25rem; }
    .stat-card .stat-label,
    .stat-card .card-body .small { font-size: .72rem; line-height: 1.3; }
}

/* ---------- 6. Tabel ---------------------------------------- */
.table-card .table { margin-bottom: 0; }

.table-card .table > thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    white-space: nowrap;
}

.table-card .table > tbody td {
    vertical-align: middle;
    border-color: #f1f5f9;
    padding-top: .8rem;
    padding-bottom: .8rem;
}

/* ---------- 7. Badge lembut & elemen kecil ------------------ */
.badge-soft {
    font-weight: 600;
    padding: .35em .7em;
    border-radius: 999px;
}

.badge-soft-primary   { background-color: rgba(13, 148, 136, .12);  color: #0b7f75; }
.badge-soft-success   { background-color: rgba(22, 163, 74, .12);   color: #148f41; }
.badge-soft-warning   { background-color: rgba(245, 158, 11, .14);  color: #b45309; }
.badge-soft-danger    { background-color: rgba(220, 38, 38, .12);   color: #c22222; }
.badge-soft-info      { background-color: rgba(14, 165, 233, .12);  color: #0c8ecc; }
.badge-soft-secondary { background-color: rgba(100, 116, 139, .12); color: #58657a; }

.stat-icon.bg-soft-primary   { background-color: rgba(13, 148, 136, .12);  color: #0d9488; }
.stat-icon.bg-soft-success   { background-color: rgba(22, 163, 74, .12);   color: #16a34a; }
.stat-icon.bg-soft-warning   { background-color: rgba(245, 158, 11, .14);  color: #f59e0b; }
.stat-icon.bg-soft-danger    { background-color: rgba(220, 38, 38, .12);   color: #dc2626; }
.stat-icon.bg-soft-info      { background-color: rgba(14, 165, 233, .12);  color: #0ea5e9; }
.stat-icon.bg-soft-secondary { background-color: rgba(100, 116, 139, .12); color: #64748b; }

.avatar-circle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--kosku-primary-soft);
    color: #0b7f75;
    font-weight: 600;
    font-size: .85rem;
    flex: 0 0 auto;
}

.empty-state {
    padding: 3.5rem 1rem;
    text-align: center;
    color: #64748b;
}

.empty-state i { font-size: 3rem; opacity: .35; }

.room-tile {
    border: 1px solid #e2e8f0;
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    background: #fff;
    height: 100%;
    transition: box-shadow .15s ease, transform .15s ease;
}

.room-tile:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.min-w-0 { min-width: 0; }

/* ---------- 8. Tampilan cetak ------------------------------- */
@media print {
    .app-sidebar,
    .app-header,
    .no-print { display: none !important; }

    .app-content { margin-left: 0; }
    body { background: #fff; }
}