/* ==========================================================================
   Tema Senja (ungu hangat + aksen gradien oranye -> merah muda)
   Aktif bila <body data-layout-mode="dark" data-theme="senja">.
   - Warna dasar tema gelap sudah di-retint ke ungu di theme-senja.css (auto-generated).
   - File ini: palet override per halaman + sentuhan gradien.
   Aturan gradien: cukup di topbar, sidebar, menu aktif, tombol utama, header tabel,
   judul halaman. Sisanya tetap tenang supaya warna status tetap kebaca.
   ========================================================================== */

body[data-theme=senja] {
    --dk-bg: #170e1b;
    --dk-card: #24172b;
    --dk-surface: #2f1e38;
    --dk-border: #382442;
    --dk-input: #2a1b31;
    --dk-disabled: #2f1e38;
    --dk-hold-1: #2a1b32;
    --dk-hold-2: #301f39;
    --dk-border-strong: #472d54;
    --dk-thead: #2f1e38;
    --dk-thead-border: #452c52;
    --dk-thead-text: #f3e1d4;

    --senja-sun: #ff8a5b;
    --senja-rose: #e8577e;
    --senja-grad: linear-gradient(90deg, var(--senja-sun), var(--senja-rose));
    --senja-grad-soft: linear-gradient(90deg, rgba(255, 138, 91, .22), rgba(232, 87, 126, .10));
}

/* Langit senja: ungu tua dengan cahaya oranye samar di kanan atas */
body[data-layout-mode=dark][data-theme=senja] {
    background:
        radial-gradient(1100px 420px at 88% -8%, rgba(255, 138, 91, .12), transparent 60%),
        radial-gradient(900px 380px at 10% -10%, rgba(232, 87, 126, .08), transparent 60%),
        linear-gradient(180deg, #1f1328 0%, #170e1b 50%);
    background-attachment: fixed;
}

html:has(body[data-theme=senja]) {
    background-color: #170e1b;
}

/* Topbar: horizon senja + garis tipis gradien di bawah */
body[data-layout-mode=dark][data-theme=senja] #page-topbar {
    background: linear-gradient(90deg, #24172b 0%, #2c1830 55%, #3b1c34 100%) !important;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, var(--senja-sun) 60%, var(--senja-rose) 100%) 1;
}

/* Sidebar */
body[data-layout-mode=dark][data-theme=senja] .vertical-menu {
    background: linear-gradient(180deg, #2b1a32 0%, #1f1426 100%) !important;
}

body[data-layout-mode=dark][data-theme=senja] .vertical-menu .navbar-brand-box {
    background: transparent !important;
}

body[data-theme=senja]:not([data-sidebar-size=sm]) #sidebar-menu > ul > li > a {
    margin: 2px 10px;
    border-radius: 10px;
}

body[data-theme=senja]:not([data-sidebar-size=sm]) #sidebar-menu ul.sub-menu li a {
    border-radius: 8px;
    margin-right: 10px;
}

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

/* Menu induk yang terbuka */
body[data-theme=senja] #sidebar-menu > ul > li.mm-active > a {
    background: var(--senja-grad-soft) !important;
    color: #ffd7c2 !important;
    box-shadow: inset 3px 0 0 var(--senja-sun);
}

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

/* Submenu induk: cukup teks */
body[data-theme=senja] #sidebar-menu ul.sub-menu li.mm-active > a {
    background-color: transparent !important;
    color: #f4e3d7 !important;
}

/* Halaman yang sedang dibuka */
body[data-theme=senja] #sidebar-menu ul.sub-menu li a.active:not(.has-arrow) {
    background-color: rgba(255, 138, 91, .10) !important;
    color: #ffae8a !important;
}

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

/* Footer: horizon terbalik */
body[data-layout-mode=dark][data-theme=senja] .footer {
    background: linear-gradient(90deg, #3b1c34 0%, #24172b 60%) !important;
}

/* Judul halaman bergradien */
body[data-theme=senja] .page-title-box h4,
body[data-theme=senja] .page-title-box .mb-sm-0 {
    background: linear-gradient(90deg, #ffb38a, #ff7a9c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* Tombol utama */
body[data-theme=senja] .btn-primary {
    background: var(--senja-grad);
    border-color: transparent;
    color: #fff;
}

body[data-theme=senja] .btn-primary:hover,
body[data-theme=senja] .btn-primary:focus {
    background: linear-gradient(90deg, #ff9a70, #f06890);
    border-color: transparent;
    color: #fff;
}

/* Tab & pill aktif */
body[data-theme=senja] .nav-pills .nav-link.active,
body[data-theme=senja] .nav-pills .show > .nav-link {
    background: var(--senja-grad);
    color: #fff;
}

body[data-theme=senja] .nav-tabs .nav-link.active,
body[data-theme=senja] .nav-tabs-custom .nav-link.active {
    border-bottom-color: var(--senja-sun) !important;
    color: #ffd7c2 !important;
}

/* Header tabel */
body[data-layout-mode=dark][data-theme=senja] .go-table-thead,
body[data-layout-mode=dark][data-theme=senja] .table-light {
    background: linear-gradient(90deg, #3a2142 0%, #4a2339 100%) !important;
}

body[data-layout-mode=dark][data-theme=senja] .go-table-thead th,
body[data-layout-mode=dark][data-theme=senja] .table-light th {
    background: transparent !important;
}

/* Fokus input */
body[data-theme=senja] .form-control:focus,
body[data-theme=senja] .form-select:focus {
    border-color: var(--senja-sun) !important;
    box-shadow: 0 0 0 .15rem rgba(255, 138, 91, .2);
}

/* Dropdown item aktif */
body[data-theme=senja] .dropdown-item.active,
body[data-theme=senja] .dropdown-item:active {
    background: var(--senja-grad-soft);
    color: #ffd7c2;
}