/* assets/css/style.css */

body {
    font-family: 'Poppins', 'Inter', sans-serif;
    background-color: #f8f9fa;
}

/* ... (Kode CSS Login Anda tetap sama) ... */
.login { min-height: 100vh; }
.bg-image { background-image: url('https://placehold.co/1000x1200/01215A/FFFFFF?text=Welcome+To+[IRIS]&font=poppins'); background-size: cover; background-position: center; border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; }
.login-heading { font-weight: 600; color: #01215A; }
.btn-login { font-size: 0.9rem; letter-spacing: 0.05rem; padding: 0.75rem 1rem; background-color: #0D6EFD; border-color: #0D6EFD; transition: all 0.3s ease; }
.btn-login:hover { background-color: #0b5ed7; border-color: #0a58ca; }
.form-control:focus { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: #0D6EFD; }


/* Styling untuk Navbar Baru */
.navbar {
    background-color: #01215A !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    /* z-index: 1030; -- Biarkan Bootstrap default atau sesuaikan jika perlu, biasanya sudah cukup */
}
.navbar-brand-text { font-weight: bold; font-size: 1.5rem; color: #FFFFFF !important; padding: 0.5rem 0.75rem; border-radius: .25rem; transition: color 0.2s ease-in-out; }
.navbar-brand-text:hover, .navbar-brand-text:focus { color: #CCCCCC !important; background-color: transparent !important; }
.navbar .nav-link { color: #FFFFFF !important; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: .25rem; transition: color 0.2s ease-in-out; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #CCCCCC !important; background-color: transparent !important; }
.navbar .nav-link small.text-muted { color: #FFFFFF !important; opacity: 0.85; }
.navbar-toggler { border-color: rgba(255, 255, 255, 0.5); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
.navbar .dropdown-menu[aria-labelledby="userDropdownMenuLink"] { background-color: #01215A; border: 1px solid rgba(255, 255, 255, 0.15); }
.navbar .dropdown-menu[aria-labelledby="userDropdownMenuLink"] .dropdown-item { color: #E0E0E0; }
.navbar .dropdown-menu[aria-labelledby="userDropdownMenuLink"] .dropdown-item:hover,
.navbar .dropdown-menu[aria-labelledby="userDropdownMenuLink"] .dropdown-item:focus { color: #FFFFFF; background-color: #003380; }
.navbar .dropdown-menu[aria-labelledby="userDropdownMenuLink"] .dropdown-divider { border-top-color: rgba(255, 255, 255, 0.15); }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] { background-color: #01215A; border: 1px solid rgba(255, 255, 255, 0.15); min-width: 350px; max-height: 400px; overflow-y: auto; padding-top: 0; padding-bottom: 0; }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] > li:first-child .dropdown-header { background-color: #003380; color: #FFFFFF !important; padding-top: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .dropdown-header { color: #E0E0E0; }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .dropdown-item { color: #FFFFFF !important; white-space: normal; display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .dropdown-item strong { color: #FFFFFF !important; }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .dropdown-item small.text-muted { color: #adb5bd !important; display: block; }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .dropdown-item:hover,
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .dropdown-item:focus { background-color: #003380; color: #FFFFFF !important; }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .btn-outline-success { color: #198754 !important; background-color: transparent !important; border-color: #198754 !important; padding: 0.25rem 0.5rem; font-size: 0.8rem; display: inline-flex; align-items: center; white-space: nowrap; }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .btn-outline-success i.fab.fa-whatsapp { color: #198754 !important; margin-right: 0.35rem; }
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .btn-outline-success:hover,
.navbar .dropdown-menu[aria-labelledby="birthdayNotificationDropdownCombined"] .btn-outline-success:hover i.fab.fa-whatsapp { color: #FFFFFF !important; background-color: #198754 !important; border-color: #198754 !important; }
.notification-badge { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: red; color: white; font-size: 0.75rem; font-weight: bold; display: flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; }


/* Styling untuk Sidebar Desktop (#sidebarDesktop) */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* z-index sidebar desktop bisa lebih rendah jika tidak ada overlap interaktif */
    padding-top: 56px; /* Tinggi navbar Anda, sesuaikan jika perlu */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    background-color: #343a40 !important;
    color: #FFFFFF;
    box-sizing: border-box;
    width: /* Lebar sidebar desktop Anda, misal: */ 250px; /* Sesuaikan dengan col-md-3 col-lg-2 Anda */
}

/* Styling untuk Offcanvas Mobile (#sidebarMenu) */
.offcanvas-start { /* Ini akan menargetkan #sidebarMenu Anda */
    /* position, top, bottom, left sudah diatur oleh Bootstrap .offcanvas */
    /* PERBAIKAN UTAMA: Tingkatkan z-index agar di atas backdrop (1040) dan navbar (1030) */
    z-index: 1050; /* Bootstrap default untuk .offcanvas adalah 1045, ini sedikit lebih tinggi untuk aman */
    background-color: #343a40 !important; /* Sama dengan sidebar desktop */
    color: #FFFFFF;
    /* padding-top: 0; -- Biarkan .offcanvas-header yang mengatur padding internal atas */
    /* box-shadow sudah diatur oleh Bootstrap .offcanvas */
    box-sizing: border-box;
    width: 280px; /* Lebar offcanvas mobile, sesuaikan jika perlu */
}

.offcanvas-start .offcanvas-header {
    background-color: #212529; /* Warna header offcanvas sedikit lebih gelap */
    border-bottom: 1px solid rgba(255,255,255,0.1);
    /* padding sudah diatur Bootstrap, sesuaikan jika perlu */
}
.offcanvas-start .btn-close-white {
    filter: brightness(0) invert(1); /* Agar tombol close terlihat jelas di background gelap */
}


.sidebar-sticky {
    position: relative; /* Seharusnya sticky, bukan relative jika ingin scroll di dalam sidebar */
    /* top: 0; -- tidak perlu jika position:sticky dan ada parent dengan tinggi terbatas */
    height: calc(100vh - 56px); /* Untuk sidebar desktop, dikurangi tinggi navbar */
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Ubah ke auto agar scrollbar muncul jika konten melebihi tinggi */
    box-sizing: border-box;
}
/* Untuk offcanvas, .offcanvas-body yang menangani scroll */
.offcanvas-body {
    overflow-y: auto; /* Pastikan body offcanvas bisa scroll */
}


.sidebar .nav.flex-column,
.offcanvas-body .nav.flex-column { /* Menargetkan ul di dalam offcanvas body juga */
    box-sizing: border-box;
    width: 100%;
}

.sidebar .nav-item,
.offcanvas-body .nav-item {
    box-sizing: border-box;
    width: 100%;
}

/* Styling umum untuk nav-link di sidebar dan offcanvas */
.sidebar .nav-link,
.offcanvas-body .nav-link {
    color: #adb5bd;
    padding: .75rem 1rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    width: 100%;
    border-left: 3px solid transparent; /* Persiapan untuk border active */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-left-color 0.2s ease-in-out;
}
.sidebar .nav-link .fas,
.sidebar .nav-link .far,
.sidebar .nav-link .fab,
.offcanvas-body .nav-link .fas,
.offcanvas-body .nav-link .far,
.offcanvas-body .nav-link .fab {
    margin-right: 10px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Hover dan Active state untuk nav-link utama */
.sidebar .nav > .nav-item > .nav-link:hover,
.sidebar .nav > .nav-item > .nav-link.active,
.offcanvas-body .nav > .nav-item > .nav-link:hover, /* Targetkan .nav-item langsung di .offcanvas-body */
.offcanvas-body .nav > .nav-item > .nav-link.active {
    color: #FFFFFF;
    background-color: #495057;
    border-left-color: #0D6EFD; /* Menggunakan border-left-color */
    /* padding-left: calc(1rem - 3px); -- Tidak perlu jika border tidak menambah lebar signifikan */
}

/* Styling untuk ikon dropdown chevron */
.sidebar .nav-link .fa-chevron-down,
.offcanvas-body .nav-link .fa-chevron-down {
    margin-left: auto; /* Pindahkan ikon chevron ke paling kanan */
    transition: transform 0.2s ease-in-out;
    font-size: 0.8em; /* Sedikit lebih kecil agar tidak terlalu dominan */
}
.sidebar .nav-link[aria-expanded="true"] .fa-chevron-down,
.offcanvas-body .nav-link[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg); /* Bootstrap 5 biasanya memutar 180 derajat untuk collapse */
}


.sidebar .nav-group-title,
.offcanvas-body .nav-group-title {
    padding: .75rem 1rem .25rem 1rem;
    font-size: .8rem;
    font-weight: bold;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 0.5rem;
}

/* Submenu di sidebar dan offcanvas */
.sidebar ul.collapse,
.offcanvas-body ul.collapse {
    padding-left: 0; /* Hapus padding default dari ul */
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
    background-color: rgba(0,0,0,0.1); /* Sedikit bedakan background submenu */
    box-sizing: border-box;
}

.sidebar ul.collapse .nav-link,
.offcanvas-body ul.collapse .nav-link {
    /*padding-left: 2.5rem;  Indentasi untuk submenu items, sesuaikan dengan ikon + padding parent */
    /*font-size: 0.9rem;  Sedikit lebih kecil */
    border-left: 3px solid transparent !important; /* Override border dari parent */
}

.sidebar ul.collapse .nav-link:hover,
.sidebar ul.collapse .nav-link.active,
.offcanvas-body ul.collapse .nav-link:hover,
.offcanvas-body ul.collapse .nav-link.active {
    color: #FFFFFF;
    background-color: #5a6268; /* Warna hover/active submenu */
    /* border-left: none; -- Sudah di-override di atas */
}


.main-content {
    padding: 20px;
    padding-top: calc(56px + 20px); /* Tinggi navbar + padding atas konten */
    transition: margin-left .3s ease-in-out;
}

/* Penyesuaian untuk desktop: main-content mendapat margin dari sidebar */
@media (min-width: 768px) {
    .main-content {
        margin-left: 250px; /* Lebar .sidebar Anda */
    }
    .offcanvas-start.d-md-none { /* Pastikan offcanvas mobile benar-benar hilang di desktop */
        display: none !important;
    }
}


/* Penyesuaian untuk mobile: sidebar desktop hilang, main-content full width */
@media (max-width: 767.98px) {
    .sidebar#sidebarDesktop {
        display: none !important;
    }
    .main-content {
        margin-left: 0;
        padding-top: calc(56px + 15px); /* Tinggi navbar + padding atas konten mobile */
    }
    /* .offcanvas-start sudah di-style di atas, tidak perlu padding-top:0 di sini jika sudah benar */
    .offcanvas-body .nav-link {
        padding: .65rem 1rem; /* Padding spesifik untuk link di offcanvas body jika perlu */
    }
}


/* ... (Kode CSS Dashboard Card, Icon Circle, Btn Action, Chart Container Anda tetap sama) ... */
.dashboard-card { border: none; border-radius: 0.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); transition: transform .2s ease-in-out, box-shadow .2s ease-in-out; }
.dashboard-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.dashboard-card .card-body { padding: 1.5rem; }
.dashboard-card .card-title { font-weight: 600; color: #495057; }
.dashboard-card .display-4 { font-weight: 700; }
.icon-circle { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); color: #0D6EFD; }
.bg-success-soft { background-color: rgba(25, 135, 84, 0.1); color: #198754; }
.bg-warning-soft { background-color: rgba(255, 193, 7, 0.1); color: #FFC107; }
.bg-danger-soft { background-color: rgba(220, 53, 69, 0.1); color: #DC3545; }
.bg-info-soft { background-color: rgba(13, 202, 240, 0.1); color: #0DCAF0; }
.btn-action { margin-right: 5px; padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.chart-container { position: relative; height: 300px; width: 100%; }

/* Perbaikan Final untuk Modal Scroll yang Panjang */
.modal-dialog-scrollable .modal-body {
    /* * Batasi tinggi maksimal dari area konten modal menjadi 65% dari tinggi layar.
     * Angka 65vh ini bisa Anda sesuaikan (misal: 60vh atau 70vh) jika dirasa kurang pas.
     */
    max-height: 65vh;
    overflow-y: auto;
}

/* Styling untuk Swimlane */
/*.kanban-board {
    display: flex;
    flex-direction: column; /* Swimlanes disusun vertikal */
    gap: 2rem;
}

.kanban-swimlane {
    width: 100%;
}*/

.kanban-swimlane-row {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 1rem;
    overflow-x: auto; /* Memungkinkan scroll horizontal jika kolom terlalu banyak */
    align-items: flex-start;
}

.swimlane-title {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #0d6efd;
    padding-bottom: 0.5rem;
}

/* Menghilangkan garis bawah pada judul kartu Kanban */
.kanban-card .card-title,
.kanban-card .card-title:hover,
.kanban-card .card-title:focus {
    text-decoration: none;
}

/* Perbaikan untuk tabel agar lebar kolom dihormati secara instan */
#tabelPelanggan { /* ID tabel di semua_lab.php dan lab_cibubur.php */
    table-layout: fixed; /* Penting: Memaksa browser menghormati lebar kolom */
    width: 100%; /* Pastikan tabel mengisi lebar penuh */
}

/* Styling untuk pembatasan lebar kolom di tabel */
#tabelPelanggan th,
#tabelPelanggan td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pastikan div di dalam td memiliki lebar yang sesuai */
#tabelPelanggan td > div {
    width: 100%; /* Pastikan div mengisi lebar sel */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Perbaikan untuk filter tag Select2 di halaman manajemen pelanggan */
.form-select-sm + .select2-container--bootstrap-5 {
    width: 100% !important; /* Pastikan Select2 mengambil lebar penuh kolomnya */
}

/* Pastikan elemen Select2 tidak menyebabkan overflow horizontal */
.select2-container {
    box-sizing: border-box;
}

.select2-selection--multiple {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.color-swatch {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 2px transparent;
    transition: all 0.2s ease-in-out;
}
.color-swatch:hover {
    transform: scale(1.1);
}
input[type="radio"]:checked + .color-swatch {
    box-shadow: 0 0 0 3px #000;
}