/* File: assets/css/glassmorphism.css */
body {
    background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);
    background-attachment: fixed;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2c3e50;
    min-height: 100vh;
    margin: 0;
}

/* Base Glass Card */
.glass-card {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    transition: all 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
    background: rgba(255, 255, 255, 0.5);
}

/* Varian gelap dari glass-card -- dipakai di panel yang memang berisi form bertema gelap (mis. Pengaturan
   Sistem), supaya teks text-white di dalamnya benar-benar kontras (bukan putih di atas panel terang seperti
   .glass-card biasa). */
.glass-card-dark {
    background: rgba(26, 32, 44, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    color: #fff;
}

/* ==========================================================
   SMOOTHING GLOBAL: konsisten membulat di semua komponen umum
   (kartu, modal, tombol, form, tabel) supaya tidak ada sudut
   tajam yang terasa "kasar" di antara halaman.
   ========================================================== */
.card, .modal-content, .form-control, .form-select, .table-responsive,
.dropdown-menu, .alert, .toast, .swal2-popup {
    border-radius: 12px !important;
}
.btn:not(.btn-sm):not(.rounded-pill) { border-radius: 10px; }
.btn-sm { border-radius: 8px; }
.badge { border-radius: 6px; }
table.dataTable, table.dataTable thead th, table.dataTable tbody td {
    border-radius: 0; /* sel & baris di TENGAH grid tetap presisi kotak (wajar utk data table) */
}
.dataTables_wrapper { border-radius: 12px; overflow: hidden; }
/* Bulatkan tabelnya SENDIRI (bukan cuma wrapper luar yang membungkusnya, dan bukan cuma sel
   :first-child/:last-child) dengan radius+clip langsung di elemen <table>. Ini sengaja dipakai
   ketimbang menyasar sel pojok satu-satu, karena DataTables Responsive menyembunyikan kolom yang
   tidak muat pakai display:none (class dtr-hidden) -- sel itu tetap dianggap "last-child" oleh CSS
   walau tidak tampil, jadi kolom yang BENAR-BENAR tampil di ujung kanan tidak pernah kebagian sudut
   bulat. Klip di level tabel kebal terhadap masalah itu karena murni klip geometris kotak tabel,
   tidak peduli sel mana yang sedang disembunyikan. Aman dipakai karena border-collapse tabel di
   sini "separate" (default Bootstrap) -- browser mengabaikan border-radius pada tabel yang
   border-collapse-nya "collapse".
*/
.table, table.dataTable {
    border-radius: 10px;
    overflow: hidden;
    border-spacing: 0;
}
img, .fc-daygrid-day-frame, .legend-swatch { border-radius: 6px; }

/* ==========================================================
   DATATABLES: selaraskan kontrol bawaan (cari, jumlah baris,
   pagination, info, tombol "+" responsive) dengan gaya membulat
   & cerah aplikasi -- tanpa ini kontrol-kontrol itu tampil kotak
   polos khas default Bootstrap, kontras dgn tombol rounded-pill
   bergradasi di halaman lain.
   ========================================================== */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: 10px !important;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    color: #4b5563;
    font-size: .85rem;
}
.dataTables_wrapper .dataTables_paginate .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    border: none;
    color: #34495e;
    font-weight: 600;
    transition: all .2s ease;
}
.dataTables_wrapper .dataTables_paginate .page-link:hover {
    background: rgba(79, 140, 255, .15);
    color: #0d6efd;
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: linear-gradient(135deg, #4f8cff, #8a5cff);
    color: #fff;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background: transparent;
    color: #adb5bd;
}
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable td.dtr-control::before {
    background: linear-gradient(135deg, #4f8cff, #8a5cff) !important;
    box-shadow: none !important;
}

/* Sidebar Transparan */
.admin-wrapper { display: flex; min-height: 100vh; }
.sidebar-glass {
    width: 260px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    color: #2c3e50;
    box-shadow: 4px 0 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.main-content { 
    flex: 1; 
    padding: 2rem; 
    overflow-y: auto; 
}

/* Navigasi Link Sidebar */
.nav-link {
    color: #34495e;
    border-radius: 10px;
    margin-bottom: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    padding: 12px 20px;
}
.nav-link:hover, .nav-link.active {
    background: rgba(255, 255, 255, 0.8);
    color: #0056b3;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Tombol Transparan */
.btn-glass-primary {
    background: rgba(13, 110, 253, 0.2);
    color: #0056b3;
    border: 1px solid rgba(13, 110, 253, 0.3);
    backdrop-filter: blur(5px);
}
.btn-glass-primary:hover {
    background: rgba(13, 110, 253, 0.5);
    color: #fff;
}

/* ==========================================================
   RESPONSIVE: Topbar mobile, sidebar offcanvas, bottom nav
   ========================================================== */

/* Topbar hanya tampil di layar < lg (disembunyikan lewat d-lg-none di HTML) */
.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.mobile-topbar-brand { font-weight: 800; color: #0056b3; font-size: 1.05rem; }
.btn-hamburger, .mobile-topbar-profile {
    background: none; border: none; font-size: 1.3rem; color: #2c3e50;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.btn-hamburger:active, .mobile-topbar-profile:active { background: rgba(0,0,0,0.08); }

/* Sidebar: di layar < lg jadi offcanvas standar Bootstrap (overlay), di >= lg statis mengikuti .admin-wrapper */
.sidebar-glass.offcanvas-lg {
    width: 260px;
}
@media (max-width: 991.98px) {
    .sidebar-glass.offcanvas-lg {
        width: 280px;
        background: rgba(255, 255, 255, 0.92);
    }
}

/* Bottom nav mobile -- grid 5 kolom, Check-In (kolom tengah) dibuat menonjol (FAB) karena paling sering dipakai */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bn-item {
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #6c7a89;
    text-decoration: none;
}
.bn-item i { font-size: 1.15rem; }
.bn-item.active { color: #0d6efd; }

/* Tombol Check-In dibuat menonjol (FAB) & selalu di tengah, karena paling sering dipakai */
.bn-fab {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    padding-bottom: 8px;
}
.bn-fab-icon {
    width: 54px; height: 54px;
    margin-top: -28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 6px 16px rgba(13,110,253,.45);
    border: 3px solid #fff;
    transition: all .2s ease;
}
.bn-fab-label { font-size: 0.65rem; font-weight: 700; color: #0d6efd; }
.bn-fab.active .bn-fab-icon { background: linear-gradient(135deg, #0b5ed7, #0a58ca); box-shadow: 0 6px 20px rgba(11,94,215,.6); }

/* Beri ruang di bawah supaya konten tidak ketutup bottom nav, dan rapikan padding di mobile */
@media (max-width: 991.98px) {
    .main-content { padding: 1rem; padding-bottom: 5.5rem; }
    .glass-card { border-radius: 12px; }
    h2.fw-bolder, h3.fw-bold { font-size: 1.3rem; }
    .display-4 { font-size: 2rem; }
    .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Jangan tampilkan offcanvas backdrop bawaan mengganggu topbar sticky */
@media (max-width: 991.98px) {
    .admin-wrapper { display: block; }
}