/* ==========================================================================
   Tema terang lembut (clay, bento, aurora): aturan bersama.
   Aktif bila <body data-layout-mode="light" data-soft="1" data-float="1" data-theme=...>.
   Semua warna/bentuk diambil dari variabel --s-*; nilainya diisi per tema di
   theme-<nama>-layout.css. Layout melayang (posisi sidebar/topbar/footer) dari
   theme-float-layout.css.
   ========================================================================== */

body[data-soft] {
    /* Nilai default; ditimpa per tema */
    --s-bg: #f4f5f8;
    --s-ink: #495057;
    --s-heading: #2b3440;
    --s-muted: #8a94a6;
    --s-border: #e9ebf0;
    --s-surface: #ffffff;
    --s-chrome: #ffffff;
    --s-pop: #ffffff;
    --s-input: #ffffff;
    --s-input-border: #e2e5eb;
    --s-input-shadow: none;
    --s-thead: #f6f7f9;
    --s-primary: #3980c0;
    --s-primary-rgb: 57, 128, 192;
    --s-primary-hover: #306da3;
    --s-on-primary: #ffffff;
    --s-btn-primary-bg: var(--s-primary);
    --s-btn-shadow: none;
    --s-hover: rgba(0, 0, 0, .04);
    --s-active-bg: rgba(var(--s-primary-rgb), .12);
    --s-active-fg: var(--s-primary);
    --s-active-shadow: none;
    --s-side-fg: #6b7385;
    --s-radius: 16px;
    --s-radius-sm: 10px;
    --s-btn-radius: 10px;
    --s-shadow: 0 2px 10px rgba(30, 40, 70, .06);
    --s-card-border: transparent;
    --s-font: "Be Vietnam", sans-serif;
    --s-font-head: var(--s-font);

    /* Bootstrap 5.2: warna utama & link ikut tema */
    --bs-primary: var(--s-primary);
    --bs-primary-rgb: var(--s-primary-rgb);
    --bs-link-color: var(--s-primary);
    --bs-link-hover-color: var(--s-primary-hover);
    --bs-body-color: var(--s-ink);
    --bs-border-color: var(--s-border);

    /* Layout melayang */
    --float-gap: 14px;
    --float-radius: var(--s-radius);
    --float-border: var(--s-card-border);
    --float-shadow: var(--s-shadow);

    background: var(--s-bg);
    color: var(--s-ink);
    font-family: var(--s-font);
}

body[data-soft] .h1, body[data-soft] .h2, body[data-soft] .h3,
body[data-soft] .h4, body[data-soft] .h5, body[data-soft] .h6,
body[data-soft] h1, body[data-soft] h2, body[data-soft] h3,
body[data-soft] h4, body[data-soft] h5, body[data-soft] h6 {
    font-family: var(--s-font-head);
    color: var(--s-heading);
}

body[data-soft] .text-muted {
    color: var(--s-muted) !important;
}

/* --------------------------------------------------------------------------
   Sidebar, topbar, footer
   -------------------------------------------------------------------------- */
body[data-soft] .vertical-menu,
body[data-soft] #page-topbar,
body[data-soft] .footer {
    background: var(--s-chrome) !important;
    border-color: var(--float-border) !important;
}

body[data-soft] .vertical-menu .navbar-brand-box,
body[data-soft] .navbar-brand-box {
    background: transparent !important;
    box-shadow: none;
}

body[data-soft] #sidebar-menu ul li a {
    font-family: var(--s-font);
    color: var(--s-side-fg);
}

body[data-soft] #sidebar-menu ul li a .nav-icon,
body[data-soft] #sidebar-menu ul li a i {
    color: inherit;
}

body[data-soft] #sidebar-menu .menu-title {
    color: var(--s-muted);
}

body[data-soft]:not([data-sidebar-size=sm]) #sidebar-menu > ul > li > a {
    border-radius: var(--s-radius-sm);
}

body[data-soft] #sidebar-menu ul li a:hover {
    background-color: var(--s-hover);
}

/* Menu induk yang terbuka */
body[data-soft] #sidebar-menu > ul > li.mm-active > a {
    background: var(--s-active-bg) !important;
    color: var(--s-active-fg) !important;
    box-shadow: var(--s-active-shadow);
    font-weight: 600;
}

/* Submenu induk: cukup teks */
body[data-soft] #sidebar-menu ul.sub-menu li.mm-active > a {
    background-color: transparent !important;
    color: var(--s-heading) !important;
}

/* Halaman yang sedang dibuka */
body[data-soft] #sidebar-menu ul.sub-menu li a.active:not(.has-arrow) {
    background-color: var(--s-hover) !important;
    color: var(--s-primary) !important;
}

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

/* --------------------------------------------------------------------------
   Card & panel
   -------------------------------------------------------------------------- */
body[data-soft] .card {
    background-color: var(--s-surface);
    border: 1px solid var(--s-card-border);
    border-radius: var(--s-radius);
    box-shadow: var(--s-shadow);
}

body[data-soft] .card-header,
body[data-soft] .card-footer {
    background-color: transparent;
    border-color: var(--s-border);
}

body[data-soft] .card-header:first-child {
    border-radius: var(--s-radius) var(--s-radius) 0 0;
}

body[data-soft] .page-title-box h4,
body[data-soft] .page-title-box .mb-sm-0 {
    font-family: var(--s-font-head);
    color: var(--s-heading);
}

body[data-soft] .dropdown-menu,
body[data-soft] .modal-content,
body[data-soft] .offcanvas,
body[data-soft] .swal2-popup {
    background-color: var(--s-pop);
    border: 1px solid var(--s-border);
    border-radius: var(--s-radius-sm);
    box-shadow: 0 12px 32px rgba(30, 30, 60, .14);
}

body[data-soft] .modal-content,
body[data-soft] .swal2-popup {
    border-radius: var(--s-radius);
}

body[data-soft] .dropdown-item {
    border-radius: 8px;
}

body[data-soft] .dropdown-menu {
    padding: 6px;
}

body[data-soft] .dropdown-item:hover,
body[data-soft] .dropdown-item:focus {
    background-color: var(--s-hover);
}

/* --------------------------------------------------------------------------
   Tombol
   -------------------------------------------------------------------------- */
body[data-soft] .btn {
    border-radius: var(--s-btn-radius);
}

body[data-soft] .btn-primary {
    --bs-btn-color: var(--s-on-primary);
    --bs-btn-bg: var(--s-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--s-on-primary);
    --bs-btn-hover-bg: var(--s-primary-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--s-on-primary);
    --bs-btn-active-bg: var(--s-primary-hover);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--s-on-primary);
    --bs-btn-disabled-bg: var(--s-primary);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--s-primary-rgb);
    background: var(--s-btn-primary-bg);
    box-shadow: var(--s-btn-shadow);
}

body[data-soft] .btn-primary:hover,
body[data-soft] .btn-primary:focus {
    background: var(--s-btn-primary-bg);
    filter: brightness(.95);
}

body[data-soft] .btn-outline-primary {
    --bs-btn-color: var(--s-primary);
    --bs-btn-border-color: var(--s-primary);
    --bs-btn-hover-bg: var(--s-primary);
    --bs-btn-hover-border-color: var(--s-primary);
    --bs-btn-hover-color: var(--s-on-primary);
    --bs-btn-active-bg: var(--s-primary);
    --bs-btn-active-border-color: var(--s-primary);
    --bs-btn-active-color: var(--s-on-primary);
}

body[data-soft] .badge {
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
body[data-soft] .form-control,
body[data-soft] .form-select,
body[data-soft] .input-group-text,
body[data-soft] .choices__inner,
body[data-soft] .select2-container--default .select2-selection--single,
body[data-soft] .select2-container--default .select2-selection--multiple {
    background-color: var(--s-input);
    border-color: var(--s-input-border);
    border-radius: var(--s-radius-sm);
}

body[data-soft] .form-control,
body[data-soft] .form-select,
body[data-soft] .choices__inner {
    box-shadow: var(--s-input-shadow);
}

/* Input group: hanya sudut terluar yang membulat */
body[data-soft] .input-group > :not(:first-child):not(.dropdown-menu) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body[data-soft] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body[data-soft] .form-control:focus,
body[data-soft] .form-select:focus {
    border-color: var(--s-primary) !important;
    box-shadow: var(--s-input-shadow), 0 0 0 .2rem rgba(var(--s-primary-rgb), .18);
}

body[data-soft] .form-check-input:checked {
    background-color: var(--s-primary);
    border-color: var(--s-primary);
}

body[data-soft] .form-check-input:focus {
    border-color: var(--s-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--s-primary-rgb), .18);
}

/* --------------------------------------------------------------------------
   Tabel
   -------------------------------------------------------------------------- */
body[data-soft] .table {
    --bs-table-border-color: var(--s-border);
    --bs-table-hover-bg: var(--s-hover);
    border-color: var(--s-border);
}

body[data-soft] .table > :not(caption) > * > * {
    border-color: var(--s-border);
}

body[data-soft] .table-light,
body[data-soft] .go-table-thead {
    --bs-table-bg: var(--s-thead);
    --bs-table-color: var(--s-muted);
    --bs-table-border-color: var(--s-border);
    color: var(--s-muted);
}

/* --------------------------------------------------------------------------
   Navigasi: tab, pill, pagination
   -------------------------------------------------------------------------- */
body[data-soft] .nav-pills .nav-link {
    border-radius: var(--s-btn-radius);
}

body[data-soft] .nav-pills .nav-link.active,
body[data-soft] .nav-pills .show > .nav-link {
    background: var(--s-btn-primary-bg);
    color: var(--s-on-primary);
}

body[data-soft] .nav-tabs .nav-link.active,
body[data-soft] .nav-tabs-custom .nav-link.active {
    color: var(--s-primary) !important;
    border-bottom-color: var(--s-primary) !important;
}

body[data-soft] .nav-tabs-custom .nav-item .nav-link::after {
    background: var(--s-primary);
}

body[data-soft] .page-item.active .page-link {
    background: var(--s-btn-primary-bg);
    border-color: transparent;
    color: var(--s-on-primary);
}

body[data-soft] .page-link {
    border-radius: 8px;
    margin: 0 2px;
    border-color: var(--s-border);
}

/* Tombol tema di topbar (topbar.blade.php) */
body[data-soft] .theme-menu .dropdown-item.active {
    background-color: rgba(var(--s-primary-rgb), .12);
    color: var(--s-primary);
}