/* =============================================================
   Dark Lilac Theme Overrides
   Basis: UI-STANDARD.md (Dark Navy Theme)

   Seluruh palet navy diganti ke keluarga lilac #A47DAB (H=291).
   Latar diturunkan dari warna navy standar dengan hue dirotasi ke 291
   dan saturasi diredam ~40% supaya aksen lilac tetap menonjol.

     navbar        #1e293b -> #312334
     logo header   #0f172a -> #221424
     sidebar       #1a2540 -> #362239
     label section #475569 -> #614F64
     teks muted    #64748b -> #806C84
     ikon navbar   #94a3b8 -> #AE9AB1
     teks terang   #e2e8f0 -> #EAE5EB
     aksen         #3b82f6 -> #A47DAB
   ============================================================= */

/* Navbar */
.main-header {
    background: #312334 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Logo / brand area */
.logo-header {
    background: #221424 !important;
}

/* Sidebar */
.sidebar.dark-bg {
    background: #362239 !important;
}

/* Sidebar section labels */
.sidebar .nav .nav-section .text-section {
    color: #614F64 !important;
    font-size: 10px !important;
    letter-spacing: 1.2px !important;
    margin-top: 24px !important;
    padding: 2px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px !important;
}

/* Sidebar active left bar -> lilac */
.sidebar .nav > .nav-item.active > a:before,
.sidebar .nav > .nav-item.active:hover > a:before,
.sidebar .nav > .nav-item a[data-bs-toggle="collapse"][aria-expanded="true"]:before,
.sidebar .nav.nav-primary > .nav-item a[data-bs-toggle="collapse"][aria-expanded="true"]:before,
.sidebar .nav.nav-primary > .nav-item.active a:before {
    background: #A47DAB !important;
}

/* Sidebar active item fill */
.sidebar .nav > .nav-item.active > a {
    background: rgba(164, 125, 171, 0.14) !important;
    color: #EAE5EB !important;
}

/* Sidebar hover */
.sidebar .nav > .nav-item:hover > a {
    background: rgba(164, 125, 171, 0.07) !important;
}

/* Sidebar active icon */
.sidebar .nav > .nav-item.active > a i {
    color: #A47DAB !important;
}

/* Navbar icon links.

   Selector sengaja dibuat 5 class (.navbar.navbar-header .navbar-nav ...)
   karena tema bawaan memaksa latar merah dengan !important pada:
       custom.css:4310  .navbar .navbar-nav .nav-item .nav-link { background:#dd0202 !important }
       custom.css:4327  ...:hover, ...:focus                     { background:#dd0202 !important }
       custom.css:7817  (@media max-width:991px) idem            { background:#ff3030 !important }
   Selector lama (.navbar-header .nav-item .nav-link, 3 class) kalah
   spesifisitas, sehingga bel notifikasi dan tombol user tetap merah. */
.navbar.navbar-header .navbar-nav .nav-item .nav-link {
    color: #AE9AB1 !important;
    transition: color 0.15s, background 0.15s;
    background: transparent !important;
}

.navbar.navbar-header .navbar-nav .nav-item .nav-link:hover,
.navbar.navbar-header .navbar-nav .nav-item .nav-link:focus,
.navbar.navbar-header .navbar-nav .nav-item.active .nav-link {
    color: #EAE5EB !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

/* User dropdown link - remove forced circle constraint */
.navbar-header #userDropdown.nav-link {
    width: auto !important;
    height: auto !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    justify-content: flex-start !important;
}

.navbar-header #userDropdown.nav-link:hover,
.navbar-header #userDropdown.nav-link:focus {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* User avatar circle */
.nav-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(164, 125, 171, 0.2);
    color: #d8bfdd;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
    border: 1px solid rgba(164, 125, 171, 0.3);
}

/* Username */
.nav-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #EAE5EB;
    line-height: 1.2;
}

/* Role label */
.nav-user-role {
    font-size: 10px;
    color: #806C84;
    text-transform: capitalize;
    line-height: 1.2;
}

/* Caret color */
.navbar-header .dropdown-toggle::after {
    border-top-color: #806C84;
}

/* Helper .nav-user-toggle dan .nav-user-meta dihapus pada Fase 2 migrasi BS5.
   Keduanya dulu menggantikan utility .gap-2 dan .lh-sm yang tidak ada di
   Bootstrap 4; sejak BS5 terpasang, navbar memakai utility bawaan. */

/* -------------------------------------------------------------
   Dashboard KPI Cards
   ------------------------------------------------------------- */
.kpi-primary { border: none; border-left: 4px solid #A47DAB; }
.kpi-success { border: none; border-left: 4px solid #198754; }
.kpi-info    { border: none; border-left: 4px solid #0dcaf0; }
.kpi-warning { border: none; border-left: 4px solid #ffc107; }

.tab-nav-wrap {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 4px;
}

.tab-nav-wrap .nav-link.active {
    background-color: #f0e6f2;
    color: #6d4f73;
    box-shadow: 0 1px 4px rgba(164, 125, 171, 0.18);
}

/* -------------------------------------------------------------
   Kepala tabel gelap

   Dipasang pada <thead>, mis. <thead class="table-head-dark">.
   Warnanya mengikuti navbar (#312334) supaya kepala tabel terbaca
   sebagai bagian tema, bukan abu-abu bawaan Bootstrap.

   Garis batas perlu !important karena custom.css baris 4076 mengunci
       .table td, .table th { border-color: #ebedf2 !important }
   sehingga garis terang bawaan tetap tergambar di atas latar gelap.
   ------------------------------------------------------------- */
.table > thead.table-head-dark > tr > th,
.table > thead.table-head-dark > tr > td {
    background-color: #312334;
    color: #EAE5EB;
    border-color: rgba(255, 255, 255, 0.12) !important;
    font-weight: 600;
}

/* Panah urut DataTables mewarisi warna teks kepala, tapi opasitas
   bawaannya (.125 untuk kolom belum terurut) terlalu redup di atas
   latar gelap. */
table.dataTable > thead.table-head-dark > tr > th.sorting:before,
table.dataTable > thead.table-head-dark > tr > th.sorting:after,
table.dataTable > thead.table-head-dark > tr > th.sorting_asc:before,
table.dataTable > thead.table-head-dark > tr > th.sorting_asc:after,
table.dataTable > thead.table-head-dark > tr > th.sorting_desc:before,
table.dataTable > thead.table-head-dark > tr > th.sorting_desc:after {
    opacity: 0.4;
}

table.dataTable > thead.table-head-dark > tr > th.sorting_asc:before,
table.dataTable > thead.table-head-dark > tr > th.sorting_desc:after {
    opacity: 1;
}

/* -------------------------------------------------------------
   Penyesuaian spesifisitas untuk template ini.

   Tema bawaan (baris ~565 dan ~650-661) memakai selector yang LEBIH
   spesifik daripada yang ada di UI-STANDARD.md, mis.
       .sidebar .nav.nav-primary > .nav-item.active a i   (0,5,2)
   vs selector standar
       .sidebar .nav > .nav-item.active > a i             (0,4,2)
   sehingga warna merah #ff3030 bawaan tetap menang meski override
   di atas sudah memakai !important.

   Blok di bawah menyamakan spesifisitasnya.
   ------------------------------------------------------------- */

/* Ikon item aktif */
.sidebar .nav.nav-primary > .nav-item.active a i,
.sidebar .nav > .nav-item.active a i {
    color: #A47DAB !important;
}

/* Fill item aktif */
.sidebar .nav.nav-primary > .nav-item.active > a,
.sidebar .nav.nav-primary > .nav-item.active > a:hover {
    background: rgba(164, 125, 171, 0.14) !important;
    color: #EAE5EB !important;
}

/* Hover item */
.sidebar .nav.nav-primary > .nav-item:hover > a {
    background: rgba(164, 125, 171, 0.07) !important;
}

/* Bar kiri item aktif - semua varian selector bawaan */
.sidebar .nav > .nav-item.active > a:before,
.sidebar .nav > .nav-item.active:hover > a:before,
.sidebar .nav.nav-primary > .nav-item.active a:before,
.sidebar .nav.nav-primary > .nav-item a[data-bs-toggle="collapse"][aria-expanded="true"]:before {
    background: #A47DAB !important;
}

/* Submenu aktif */
.sidebar .nav .nav-collapse li.active > a,
.sidebar .nav .nav-collapse li a:hover {
    color: #A47DAB !important;
}

/* Ikon & teks saat hover */
.sidebar .nav.nav-primary > .nav-item a:hover i,
.sidebar .nav.nav-primary > .nav-item a:focus i,
.sidebar .nav.nav-primary > .nav-item a[data-bs-toggle="collapse"][aria-expanded="true"] i {
    color: #A47DAB !important;
}

/* Panah menu yang sedang terbuka.

   custom.css baris 599 memutar caret lewat selector BS4
   a[data-toggle="collapse"][aria-expanded="true"] — mati sejak migrasi, jadi
   caret hanya ikut berputar lewat .nav-item.active. Menu yang dibuka manual
   (bukan menu halaman yang sedang dilihat) karena itu tetap menunjuk ke bawah
   walau panelnya sudah terbuka. Selector BS5-nya ditambahkan di sini. */
.sidebar .nav > .nav-item a[data-bs-toggle="collapse"][aria-expanded="true"] .caret {
    transform: rotate(-180deg);
}

/* -------------------------------------------------------------
   PROJECT-STANDARD.md  §18 - .main-header Flexbox Fix
   sekaligus §19.3 (position:fixed tanpa top:0) dan
   §19.4 (padding navbar menambah tinggi tak terduga)

   Kondisi sebelum perbaikan pada template ini:
     .main-header   tinggi 70px  (navbar BS4 punya padding .5rem)
     .logo-header   tinggi 62px  -> tidak sejajar, beda 8px
     .content       mulai di 62px -> 8px konten tertutup header

   Setelah perbaikan: header dikunci 62px dan kedua anaknya
   di-stretch, sehingga cocok dengan offset 62px yang sudah
   dipakai .sidebar dan .content pada template ini.

   Catatan: .wrapper TIDAK diberi padding-top seperti contoh di
   standar, karena template ini sudah meng-offset .content dan
   .sidebar sebesar 62px. Menambahkannya akan dobel.
   ------------------------------------------------------------- */

.main-header {
    height: 62px;
    min-height: 62px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    display: flex;
    align-items: stretch;
}

.logo-header {
    flex: 0 0 250px;
    float: none;
}

.main-header .navbar-header {
    flex: 1;
    min-width: 0;
    padding: 0px 15px;
    /* variabel BS5 - tidak berefek di BS4, disiapkan untuk migrasi nanti */
    --bs-navbar-padding-y: 0;
    --bs-navbar-padding-x: 0;
}

@media (max-width: 991px) {
    .logo-header {
        flex: 0 0 100%;
    }

    .main-header .navbar-header {
        flex: none;
    }
}

/* -------------------------------------------------------------
   Samakan .form-select dengan .form-control

   Tema Stylexpo mengecilkan .form-control (font 14px, tinggi 35px)
   tapi tidak menyentuh .form-select yang baru dipakai sejak migrasi
   BS5, sehingga select tampak 3px lebih tinggi dan fontnya lebih
   besar daripada input di baris yang sama.
   Padding kanan dibiarkan lebar supaya tidak menutupi panah dropdown.
   ------------------------------------------------------------- */
.form-select {
    font-size: 14px;
    line-height: 21px;
}

/* -------------------------------------------------------------
   Halaman login

   Kelas .login-page, .login-card, .login-logo, dan seterusnya sudah
   dipakai di auth/login.blade.php tapi tidak pernah didefinisikan di
   mana pun — halaman login selama ini hanya memakai gaya bawaan
   Bootstrap di atas latar putih. Blok ini yang mengisinya, memakai
   palet lilac yang sama dengan navbar dan sidebar.
   ------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
    background: linear-gradient(140deg, #221424 0%, #362239 55%, #4A3350 100%);
    position: relative;
}

/* Cahaya lilac samar di belakang kartu supaya latarnya tidak rata mati. */
.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(60% 45% at 50% 18%, rgba(164, 125, 171, .28), transparent 70%),
        radial-gradient(45% 35% at 85% 90%, rgba(164, 125, 171, .16), transparent 70%);
    pointer-events: none;
}

/* Pembungkus yang memusatkan kartu; menggantikan style="height:100vh"
   pada .row di view. */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    position: relative;
    z-index: 1;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
}

.login-card-header {
    background: #312334;
    border-bottom: 0;
    text-align: center;
    padding: 30px 26px 24px;
}

.login-logo {
    max-width: 165px;
    height: auto;
    margin-bottom: 16px;
}

/* Bukan .card-title: tema mengunci .card-title ke 20px (PROJECT-STANDARD
   Sec. 9), yang terlalu besar untuk kepala kartu sekecil ini. */
.login-title {
    font-size: 1rem;
    font-weight: 700;
    color: #EAE5EB;
    line-height: 1.3;
}

.login-company {
    font-size: .75rem;
    letter-spacing: .04em;
    color: #AE9AB1;
    margin-top: 2px;
}

.login-card .card-body {
    padding: 26px 28px 30px;
}

.login-card .form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: #4b3a4f;
}

.login-card .form-control:focus {
    border-color: #A47DAB;
    box-shadow: 0 0 0 .2rem rgba(164, 125, 171, .2);
}

/* Tombol mata pada input sandi: ikut jadi bagian input-group, bukan
   kotak abu-abu yang menonjol. */
.login-card .input-group-text {
    background: #fff;
    border-left: 0;
    color: #806C84;
    cursor: pointer;
}

.login-card .input-group .form-control {
    border-right: 0;
}

.login-card .input-group:focus-within .input-group-text {
    border-color: #A47DAB;
    box-shadow: 0 0 0 .2rem rgba(164, 125, 171, .2);
    clip-path: inset(-4px -4px -4px 0);
}

.btn-login {
    background: #A47DAB;
    border-color: #A47DAB;
    color: #fff;
    font-weight: 600;
    padding: .6rem 1rem;
}

.btn-login:hover,
.btn-login:focus {
    background: #8E6595;
    border-color: #8E6595;
    color: #fff;
}

.btn-login:focus {
    box-shadow: 0 0 0 .2rem rgba(164, 125, 171, .35);
}

/* Catatan reCAPTCHA di bawah tombol. */
.login-note {
    font-size: .6875rem;
    color: #806C84;
    text-align: center;
    margin-top: 14px;
    margin-bottom: 0;
}