@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

/* Matches kolutmart (Remix seller/storefront) body font — see app/tailwind.css.
   Theme sets --bs-font-sans-serif to "IBM Plex Sans" inside the vendored
   bootstrap.min.css; overriding on body directly here is simpler/lower-risk
   than patching that vendor file. */
body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

/* Material Symbols Rounded — same convention as kolutmart's Icon.jsx.
   Boilerplate straight from Google's own usage docs. */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.text-meta { font-size:11px !important; font-weight:400; }
.text-meta-normal { font-size:11px !important; }


/* Row lebih compact */
.datatable-compacted tbody td {
    padding: 7px 12px !important;
}
.datatable-compacted thead th {
    padding: 8px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Icon aksi (edit/hapus/lihat, dari Controller::generateAction()) — dikecilin
   + dikasih jarak & hover state biar gak nempel pas tabelnya compact.
   Selector ganda (span.menu-icon DAN .material-symbols-rounded) sengaja
   dipasang berlapis — .menu-icon/.tf-icons sendiri gak punya definisi CSS
   apa-apa di theme ini (bekas class dari template lama), jadi ukuran asli
   ikon murni datang dari .material-symbols-rounded; ditarget langsung di
   sini biar gak gantung ke class yang gak jelas asalnya. */
.datatable-compacted td span.material-symbols-rounded,
.datatable-compacted td .menu-icon {
    font-size: 16px !important;
    vertical-align: middle;
}
.datatable-compacted td a:has(span.material-symbols-rounded) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background-color: #f5f6f8;
    color: #6e7481;
    margin-right: 4px;
    transition: background-color .15s ease, color .15s ease;
}
.datatable-compacted td a:has(span.material-symbols-rounded):last-child {
    margin-right: 0;
}
.datatable-compacted td a:has(span.material-symbols-rounded):hover {
    background-color: #e9ebef;
    color: #333;
}
.datatable-compacted td a:has(.text-danger) {
    background-color: rgba(220, 53, 69, 0.08);
}
.datatable-compacted td a:has(.text-danger):hover {
    background-color: rgba(220, 53, 69, 0.16);
}

.datatable-compacted td a:not(:has(span.material-symbols-rounded)) {
    text-decoration: underline !important;
}

/* Badge Aktif — lebih kecil */
.datatable-compacted .badge-success,
.datatable-compacted .badge {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    letter-spacing: 0 !important;
}
/* Border tipis */
.datatable-compacted.table-bordered td,
.datatable-compacted.table-bordered th {
    border: none !important;
    border-bottom: 1px solid #f0f2f5 !important;
}

/* Hilangkan border luar card */
.datatable-compacted.table-bordered {
    /*border: none !important;*/
}

.datatable-compacted tbody td,
.datatable-compacted > tbody > tr > td {
    /*padding-top: 5px !important;*/
    /*padding-bottom: 5px !important;*/
    font-size: 11px !important;
}

.table-compacted tbody td,
.datatable-compacted tbody td,
.table-scroll-container tbody td {
    /*padding-top: 5px !important;*/
    /*padding-bottom: 5px !important;*/
    /*font-size: 11px !important;*/
}

/* semua text di dalam table juga 11px */
/*.datatable-compacted,*/
/*.table-compacted,*/
/*.table-scroll-container { font-size: 11px !important; }*/

.datatable-compacted tbody td,
.datatable-compacted > tbody > tr > td {
    /*padding-top: 0 !important;*/
    /*padding-bottom: 0 !important;*/
    /*font-size: 11px !important;*/
    /*line-height: 0.5 !important;*/
}

.datatable-compacted tbody tr {
    /*height: auto !important;*/
    /*line-height: 0.5 !important;*/
}

/* ============================================================
   Warna dominan hitam-putih, senada sama storefront kolutmart
   (Remix FE) — pagination-nya di sana pakai navy #01183a buat
   state aktif + abu-abu netral, warna (biru #0351c2) cuma dipake
   buat CTA utama, bukan dominan di seluruh tampilan. Override
   lewat CSS var Bootstrap 5 ini nyebar otomatis ke .btn-primary/
   .text-primary/.bg-primary/link color di seluruh admin tanpa
   perlu ganti tiap file — indigo bawaan theme (#5156be) diganti
   di sini aja. Warna semantik (success/danger/warning) sengaja
   TIDAK disentuh, itu bukan soal branding, itu soal makna status.
   ============================================================ */
:root {
    --bs-primary: #01183a;
    --bs-primary-rgb: 1, 24, 58;
    --bs-link-color: #01183a;
    --bs-link-color-rgb: 1, 24, 58;
    --bs-link-hover-color: #000;
    --bs-link-hover-color-rgb: 0, 0, 0;
}

/* .btn-primary's own bg/border/hover/active are baked-in hex values inside
   the class itself (Bootstrap's per-component --bs-btn-* vars, pre-compiled
   at build time) — they don't read from --bs-primary above at all, so that
   override alone does nothing here. Re-set the same var names directly. */
.btn-primary {
    --bs-btn-bg: #01183a;
    --bs-btn-border-color: #01183a;
    --bs-btn-hover-bg: #0a2550;
    --bs-btn-hover-border-color: #0a2550;
    --bs-btn-active-bg: #010f28;
    --bs-btn-active-border-color: #010f28;
    --bs-btn-focus-shadow-rgb: 1, 24, 58;
    --bs-btn-disabled-bg: #01183a;
    --bs-btn-disabled-border-color: #01183a;
}

/* ============================================================
   Utility font-size kecil buat konten admin — dipasang langsung
   ke .page-content (wrapper isi halaman di semua layout, di luar
   sidebar/topbar), plus navbar (#page-topbar) & footer di luar
   .page-content, biar otomatis kepake di SEMUA halaman tanpa perlu
   nambahin class manual satu-satu. .font-main sendiri tetap
   dibiarin sebagai class lepas buat dipasang manual di tempat lain.

   Plain `.page-content { font-size: 11px }` doang gak cukup — banyak
   elemen Bootstrap (.form-control, .form-select, .btn, .badge, dst)
   punya font-size sendiri yang explicit di definisi classnya
   (bukan warisan/inherited), jadi menang lawan cascade dari parent.
   Makanya ditarget langsung tiap elemennya di bawah ini. */
.font-main {
    font-size: 11px !important;
}
.page-content,
#page-topbar,
.footer {
    font-size: 11px;
}
.page-content .form-control,
.page-content .form-select,
.page-content .btn,
.page-content .input-group-text,
.page-content label,
.page-content input,
.page-content select,
.page-content textarea,
#page-topbar .btn,
#page-topbar .dropdown-item,
.footer a {
    font-size: 11px !important;
}

/* ============================================================
   Pagination DataTables — bentuk & warnanya disamain ke gaya
   storefront (Pagination.jsx): bulat, aktif = navy solid + teks
   putih, non-aktif = abu netral, no border, no warna indigo bawaan.
   Prev/next teks "Previous"/"Next" diganti icon chevron lewat
   language.paginate default di layouts/table.blade.php — makanya
   di sini padding-nya disamain kotak kayak nomor halaman, gak perlu
   lagi lebar ekstra buat nampung teks.
   ============================================================ */
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    justify-content: flex-end;
}
.dataTables_wrapper .dataTables_paginate .pagination {
    gap: 4px;
    margin: 0;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    border: none !important;
    background: transparent !important;
    color: rgba(0, 0, 0, .55);
    font-weight: 700;
    font-size: 12px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    padding: 0;
    line-height: 1;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
    background: #f2f2f2 !important;
    color: #000;
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: #01183a !important;
    color: #fff;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    opacity: .35;
    background: transparent !important;
    pointer-events: none;
}
.dataTables_wrapper .dataTables_info {
    font-size: 11px;
    color: rgba(0, 0, 0, .55);
    padding-top: 8px !important;
}

/* ============================================================
   Dark mode — semua warna di atas (chip icon aksi, border tabel,
   pagination, dsb) di-hardcode buat light mode, jadi perlu override
   eksplisit di sini biar gak keliatan aneh (misal chip abu-abu muda
   nempel ke background gelap). Toggle-nya sendiri (tombol matahari/
   bulan di navbar) udah jalan dari themenya duluan — ini cuma nge-tune
   elemen custom yang saya tambahin sendiri.
   ============================================================ */
/* ============================================================
   Dark mode — palet navy, senada sama storefront kolutmart, bukan
   abu-abu generik bawaan theme (--bs-body-bg dkk itu default-nya
   abu-kehijauan #313533/#2c302e, gak ada hubungannya sama brand).
   Override var Bootstrap + var kustom theme ini (--bs-header-bg,
   --bs-sidebar-bg, dst) ke satu keluarga warna navy-gelap.

   !important WAJIB di tiap var di sini — theme aslinya punya rule
   tersembunyi yang specificity-nya lebih tinggi dari plain
   [data-bs-theme=dark] biasa, contoh:
   ":root [data-topbar=dark], [data-bs-theme=light] [data-topbar=dark]"
   dan ":root [data-sidebar=dark], [data-bs-theme=light] [data-sidebar=dark]"
   (keduanya 2 attribute-selector = lebih spesifik), yang nge-set ulang
   --bs-header-bg/--bs-sidebar-dark-bg ke abu-abu lama SETELAH rule ini,
   terlepas dari urutan file. Tanpa !important, itu selalu menang.
   ============================================================ */
[data-bs-theme=dark] {
    --bs-body-bg: #070d1a !important;
    --bs-body-bg-rgb: 7, 13, 26 !important;
    --bs-body-color: #c3cbdc !important;
    --bs-secondary-bg: #0d1526 !important;
    --bs-secondary-bg-rgb: 13, 21, 38 !important;
    --bs-tertiary-bg: #111d33 !important;
    --bs-tertiary-bg-rgb: 17, 29, 51 !important;
    --bs-border-color: #1c2841 !important;
    --bs-emphasis-color: #f5f7fb !important;

    --bs-header-bg: #0a1120 !important;
    --bs-header-item-color: #c3cbdc !important;
    --bs-sidebar-bg: #0a1120 !important;
    --bs-sidebar-border-color: #1c2841 !important;
    --bs-sidebar-menu-item-color: #8b95ae !important;
    --bs-sidebar-menu-item-hover-color: #4d8eff !important;
    --bs-sidebar-menu-item-active-color: #4d8eff !important;
    --bs-sidebar-menu-item-active-bg-color: #101c33 !important;
    --bs-sidebar-dark-bg: #0a1120 !important;
    --bs-sidebar-dark-menu-item-color: #8b95ae !important;
    --bs-sidebar-dark-menu-item-hover-color: #4d8eff !important;
    --bs-sidebar-dark-menu-item-active-color: #4d8eff !important;
    --bs-search-border-color: #1c2841 !important;
    --bs-topbar-search-bg: #0d1526 !important;
    --bs-footer-bg: #0a1120 !important;
    --bs-footer-color: #8b95ae !important;
    --bs-footer-border-color: #1c2841 !important;
    --bs-input-bg: #0d1526 !important;
    --bs-boxed-body-bg: #0d1526 !important;

    /* Aksen interaktif (tombol/link/pagination aktif) dibikin lebih terang
       daripada navy gelap #01183a yang dipake di light mode — biar gak
       nyaris ilang kontras-nya di atas background yang udah gelap. */
    --bs-primary: #4d8eff !important;
    --bs-primary-rgb: 77, 142, 255 !important;
    --bs-link-color: #4d8eff !important;
    --bs-link-color-rgb: 77, 142, 255 !important;
    --bs-link-hover-color: #7babff !important;
    --bs-link-hover-color-rgb: 123, 171, 255 !important;
}
[data-bs-theme=dark] .btn-primary {
    --bs-btn-bg: #4d8eff;
    --bs-btn-border-color: #4d8eff;
    --bs-btn-hover-bg: #316fe0;
    --bs-btn-hover-border-color: #316fe0;
    --bs-btn-active-bg: #2a5fc4;
    --bs-btn-active-border-color: #2a5fc4;
    --bs-btn-disabled-bg: #4d8eff;
    --bs-btn-disabled-border-color: #4d8eff;
}
[data-bs-theme=dark] .card {
    background-color: #0d1526;
    border-color: #1c2841;
}
[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: #4d8eff !important;
}
/* .navbar-brand-box (logo box) hardcode background-color LITERAL #313533 di
   bawah body[data-topbar=dark]/body[data-sidebar=dark] — gak baca var sama
   sekali, jadi harus di-override langsung di sini, bukan lewat variable. */
body[data-bs-theme=dark] .navbar-brand-box {
    background-color: #0a1120 !important;
    box-shadow: none !important;
}

body[data-bs-theme=dark] .datatable-compacted td a:has(span.material-symbols-rounded) {
    background-color: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .6);
}
body[data-bs-theme=dark] .datatable-compacted td a:has(span.material-symbols-rounded):hover {
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
}
body[data-bs-theme=dark] .datatable-compacted td a:has(.text-danger) {
    background-color: rgba(220, 53, 69, .15);
}
body[data-bs-theme=dark] .datatable-compacted td a:has(.text-danger):hover {
    background-color: rgba(220, 53, 69, .25);
}
body[data-bs-theme=dark] .datatable-compacted.table-bordered td,
body[data-bs-theme=dark] .datatable-compacted.table-bordered th {
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
body[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .page-item .page-link {
    color: rgba(255, 255, 255, .6);
}
body[data-bs-theme=dark] .dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff;
}
body[data-bs-theme=dark] .dataTables_wrapper .dataTables_info {
    color: rgba(255, 255, 255, .55);
}

/* Navbar dark/light toggle icon (bulan/matahari) — kedua-duanya kekonfirmasi
   nongol bareng di light mode walau rule aslinya (.layout-mode-light{display:
   none}) udah benar di file yang di-serve. !important di sini maksa hasilnya
   biar bener terlepas dari penyebab pastinya. */
.layout-mode-light { display: none !important; }
body[data-bs-theme=dark] .layout-mode-dark { display: none !important; }
body[data-bs-theme=dark] .layout-mode-light { display: inline-block !important; }