/* ==========================================================================
   Tema Bento: kotak-kotak bulat datar, gaya presentasi produk modern.
   Aktif bila <body data-soft="1" data-theme="bento" data-sidebar="dark">.
   Ciri khas: sidebar hitam beraksen lime, tombol utama hitam, judul & angka
   besar rapat (Bricolage Grotesque), tanpa bayangan.
   ========================================================================== */

body[data-theme=bento] {
    --bento-ink: #16161f;
    --bento-lime: #c6f36b;
    --bento-violet: #6a5cff;

    --s-bg: #eceef2;
    --s-ink: #3a3b45;
    --s-heading: var(--bento-ink);
    --s-muted: #8b8d98;
    --s-border: #eef0f3;
    --s-surface: #ffffff;
    --s-chrome: #ffffff;
    --s-pop: #ffffff;
    --s-input: #f4f5f7;
    --s-input-border: transparent;
    --s-thead: #f7f8fa;
    /* Aksen (link, fokus, checkbox) = ungu; tombol utama = hitam */
    --s-primary: var(--bento-violet);
    --s-primary-rgb: 106, 92, 255;
    --s-primary-hover: #5a4cf0;
    --s-btn-primary-bg: var(--bento-ink);
    --s-hover: rgba(22, 22, 31, .05);
    --s-active-bg: var(--bento-lime);
    --s-active-fg: var(--bento-ink);
    --s-side-fg: #a9a9bb;
    --s-radius: 22px;
    --s-radius-sm: 12px;
    --s-btn-radius: 999px;
    --s-shadow: none;
    --s-card-border: transparent;
    --s-font: "Manrope", "Be Vietnam", sans-serif;
    --s-font-head: "Bricolage Grotesque", "Manrope", sans-serif;
    --float-gap: 14px;
}

html:has(body[data-theme=bento]) {
    background-color: #eceef2;
}

/* Sidebar hitam */
body[data-theme=bento] .vertical-menu {
    background: var(--bento-ink) !important;
}

body[data-theme=bento] #sidebar-menu ul li a:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}

body[data-theme=bento] #sidebar-menu .menu-title {
    color: #6e6e80;
}

body[data-theme=bento] #sidebar-menu > ul > li.mm-active > a {
    font-weight: 800;
}

body[data-theme=bento] #sidebar-menu > ul > li.mm-active > a .nav-icon,
body[data-theme=bento] #sidebar-menu > ul > li.mm-active > a i {
    color: var(--bento-ink) !important;
}

body[data-theme=bento] #sidebar-menu ul.sub-menu li.mm-active > a {
    color: #fff !important;
}

body[data-theme=bento] #sidebar-menu ul.sub-menu li a.active:not(.has-arrow) {
    background-color: rgba(198, 243, 107, .12) !important;
    color: var(--bento-lime) !important;
}

body[data-theme=bento] #sidebar-menu ul.sub-menu li.mm-active > a::before,
body[data-theme=bento] #sidebar-menu ul.sub-menu li a.active::before {
    background-color: var(--bento-lime) !important;
    border-color: var(--bento-lime) !important;
}

/* Judul besar & rapat */
body[data-theme=bento] .page-title-box h4,
body[data-theme=bento] .page-title-box .mb-sm-0 {
    font-weight: 800;
    font-size: 24px !important;
    letter-spacing: -.03em;
}

body[data-theme=bento] h1, body[data-theme=bento] h2, body[data-theme=bento] h3,
body[data-theme=bento] h4, body[data-theme=bento] h5,
body[data-theme=bento] .h1, body[data-theme=bento] .h2, body[data-theme=bento] .h3,
body[data-theme=bento] .h4, body[data-theme=bento] .h5 {
    letter-spacing: -.02em;
}

/* Kolom cari topbar */
body[data-theme=bento] .app-search .form-control {
    background-color: #f1f2f5;
    border-radius: 999px;
}

/* Card header datar */
body[data-theme=bento] .card-header {
    border-bottom: 1px solid var(--s-border);
}

/* Tombol utama hitam; hover = lime */
body[data-theme=bento] .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: var(--bento-ink);
    --bs-btn-active-color: var(--bento-ink);
    font-weight: 700;
}

body[data-theme=bento] .btn-primary:hover,
body[data-theme=bento] .btn-primary:focus-visible {
    background: var(--bento-lime);
    color: var(--bento-ink);
    filter: none;
}

body[data-theme=bento] .nav-pills .nav-link.active,
body[data-theme=bento] .page-item.active .page-link {
    color: #fff;
}

/* Badge dengan titik warna di depan */
body[data-theme=bento] .badge {
    font-weight: 700;
}

/* Header tabel: teks kecil abu */
body[data-theme=bento] .table-light th,
body[data-theme=bento] .go-table-thead th {
    font-weight: 600;
    font-size: 12.5px;
}

/* Checkbox hitam */
body[data-theme=bento] .form-check-input:checked {
    background-color: var(--bento-ink);
    border-color: var(--bento-ink);
}

/* Dropdown & modal tanpa garis */
body[data-theme=bento] .dropdown-menu,
body[data-theme=bento] .modal-content {
    border: none;
}