/*
 * Theme One & Theme Two (dari panel hypemusic).
 * Kedua tema memakai isi halaman yang sama; file ini mengubah tampilan komponen
 * Bootstrap (card, tabel, tombol, form) dan menyediakan kerangka tiap tema.
 * Warna tiap tema diatur lewat variabel di body.t-one / body.t-two.
 */
body.themed {
    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
    --gray-400: #9ca3af; --gray-500: #6b7280; --gray-700: #374151; --gray-800: #1f2937;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--page-bg); color: var(--gray-700); margin: 0; font-size: .95rem;
}
body.t-one {
    --accent: #7e22ce; --accent-soft: #faf5ff; --accent-ring: rgba(126, 34, 206, .15);
    --btn: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --btn-solid: #764ba2;
    --page-bg: #f9fafb; --input-border: 1px solid #d1d5db;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .05); --card-border: 1px solid #f3f4f6;
}
body.t-two {
    --accent: #1e3a8a; --accent-soft: #eff6ff; --accent-ring: rgba(30, 58, 138, .1);
    --btn: #1e3a8a; --btn-solid: #1e3a8a;
    --page-bg: #f8fafc; --input-border: 2px solid #e5e7eb;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, .1); --card-border: 0;
}
.themed h1, .themed h2, .themed h3, .themed .t-title { font-family: 'Poppins', 'Inter', system-ui, sans-serif; }
.themed a { color: var(--accent); }
.themed a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Komponen ---------- */
.themed .card { border: var(--card-border); border-radius: 16px; box-shadow: var(--card-shadow); margin-bottom: 1.5rem; overflow: hidden; background: #fff; }
.themed .card-header { background: #fff; border-bottom: 1px solid var(--gray-100); padding: 1rem 1.5rem; }
.themed .card-header::after { display: none; }
.themed .card-title { float: none; margin: 0; font-family: 'Poppins', 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: var(--gray-800); }
.themed .card-body { padding: 1.5rem; }
.themed .card-body.p-0 { padding: 0; }
.themed .card-footer { background: var(--gray-50); border-top: 1px solid var(--gray-100); padding: 1rem 1.5rem; }
.themed .card-outline.card-primary { border-top: 3px solid var(--btn-solid); }

.themed .table { color: var(--gray-700); margin-bottom: 0; }
.themed .table thead th { background: var(--gray-50); border: 0; border-bottom: 1px solid var(--gray-200); color: var(--gray-500); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; padding: .75rem 1rem; }
.themed .table td { border-top: 1px solid var(--gray-100); padding: .85rem 1rem; }
.themed .table-sm td, .themed .table-sm thead th { padding: .55rem 1rem; }
.themed .table-hover tbody tr:hover { background: var(--gray-50); }
.themed .table-active, .themed .table-active > td { background: var(--accent-soft); }

.themed .btn { border-radius: 12px; font-weight: 500; padding: .5rem 1rem; transition: all .2s ease; }
.themed .btn-sm { border-radius: 8px; padding: .3rem .65rem; }
.themed .btn-primary, .themed .btn-primary:hover, .themed .btn-primary:focus, .themed .btn-primary:not(:disabled):not(.disabled):active { background: var(--btn); border-color: transparent; color: #fff; }
.themed .btn-primary:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15); }
.themed .btn-primary:disabled { opacity: .5; box-shadow: none; }
.themed .btn-light { background: var(--gray-100); border-color: var(--gray-100); color: var(--gray-700); }
.themed .btn-light:hover { background: var(--gray-200); border-color: var(--gray-200); }
.themed .btn-dark { background: var(--gray-800); border-color: var(--gray-800); }
.themed .btn-link { color: var(--accent); }

.themed .form-control, .themed .custom-select { border: var(--input-border); border-radius: 8px; color: var(--gray-800); height: calc(2.4rem + 2px); }
.themed textarea.form-control { height: auto; }
.themed .form-control-sm { height: calc(1.9rem + 2px); }
.themed .form-control:focus { border-color: var(--btn-solid); box-shadow: 0 0 0 3px var(--accent-ring); }
.themed label { font-weight: 500; color: var(--gray-700); font-size: .875rem; }
.themed .input-group-text { background: var(--gray-50); border: var(--input-border); border-radius: 8px; color: var(--gray-500); }
.themed .input-group > .form-control:not(:last-child), .themed .input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.themed .input-group > .form-control:not(:first-child), .themed .input-group-append .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.themed .custom-control-input:checked ~ .custom-control-label::before { background: var(--btn-solid); border-color: var(--btn-solid); }
.themed .select2-container--bootstrap4 .select2-selection { border: var(--input-border); border-radius: 8px; min-height: calc(2.4rem + 2px); }
.themed .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { line-height: calc(2.4rem - 2px); }
.themed .select2-container--bootstrap4 .select2-results__option--highlighted { background: var(--btn-solid); }

.themed .badge { border-radius: 9999px; font-weight: 500; padding: .35em .75em; }
.themed .badge-primary { background: var(--btn-solid); color: #fff; }
.themed .badge-success { background: #dcfce7; color: #166534; }
.themed .badge-warning { background: #fef3c7; color: #92400e; }
.themed .badge-danger { background: #fee2e2; color: #991b1b; }
.themed .badge-info { background: #dbeafe; color: #1e40af; }
.themed .badge-secondary { background: var(--gray-100); color: var(--gray-700); }
.themed .badge-dark { background: var(--gray-800); color: #fff; }
.themed .badge-light { background: #fff; color: var(--gray-700); }

.themed .alert { border-radius: 12px; border-width: 1px; }
.themed .alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.themed .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.themed .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.themed .alert-light { background: #fff; border-color: var(--gray-200); color: var(--gray-700); }
.themed .alert a { color: inherit; text-decoration: underline; }

.themed .page-link { border-radius: 8px; margin: 0 2px; border-color: var(--gray-200); color: var(--gray-700); }
.themed .page-item.active .page-link { background: var(--btn-solid); border-color: var(--btn-solid); color: #fff; }
.themed .list-group-item { border-color: var(--gray-100); }
.themed code { color: var(--accent); }
.themed .cover-thumb { border-radius: 10px; }
.themed .cover-large { border-radius: 16px; }

/* Kotak statistik dashboard: kartu putih dengan ikon berwarna, seperti kartu di tema hypemusic */
.themed .small-box, .themed .info-box { background: #fff !important; color: var(--gray-800) !important; border: var(--card-border); border-radius: 16px; box-shadow: var(--card-shadow); transition: all .3s ease; overflow: hidden; }
.themed .small-box:hover, .themed .info-box:hover { transform: translateY(-3px); box-shadow: 0 12px 20px -8px rgba(0, 0, 0, .15); }
.themed .small-box .inner { padding: 1.25rem 1.5rem; }
.themed .small-box .inner h3 { font-size: 1.9rem; font-weight: 700; color: var(--gray-800); }
.themed .small-box .inner p { color: var(--gray-500); margin: 0; }
.themed .small-box .icon > i { font-size: 34px; top: 22px; right: 22px; opacity: 1; color: var(--btn-solid); }
.themed .small-box.bg-warning .icon > i { color: #f59e0b; }
.themed .small-box.bg-info .icon > i { color: #3b82f6; }
.themed .small-box.bg-success .icon > i { color: #22c55e; }
.themed .small-box.bg-secondary .icon > i { color: var(--gray-400); }
.themed .small-box:hover .icon > i { transform: none; }
.themed .small-box > .small-box-footer { background: var(--gray-50) !important; color: var(--gray-500) !important; text-align: left; padding: .6rem 1.5rem; font-size: .8rem; }
.themed .small-box.bg-dmd { background: var(--btn) !important; }
.themed .small-box.bg-dmd .inner h3, .themed .small-box.bg-dmd .inner p { color: #fff; }
.themed .small-box.bg-dmd .icon > i { color: rgba(255, 255, 255, .35); }
.themed .info-box { padding: 1rem 1.25rem; min-height: 0; align-items: center; }
.themed .info-box .info-box-icon { width: 48px; height: 48px; border-radius: 12px; font-size: 1.2rem; color: #fff; }
.themed .info-box .info-box-icon.bg-dmd-2, .themed .bg-dmd-2 { background: var(--btn) !important; color: #fff; }
.themed .info-box .info-box-text { color: var(--gray-500); font-size: .85rem; }
.themed .info-box .info-box-number { font-size: 1.15rem; font-weight: 700; color: var(--gray-800); }

/* ---------- Kerangka bersama ---------- */
.t-logo { width: 40px; height: 40px; border-radius: 12px; background: var(--btn); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.t-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none !important; }
.t-brand strong { font-family: 'Poppins', 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--gray-800); display: block; line-height: 1.2; }
.t-brand small { color: var(--gray-500); font-size: .75rem; }
.t-avatar { width: 40px; height: 40px; border-radius: 9999px; background: var(--btn); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.t-page-head { background: #fff; border-bottom: 1px solid var(--gray-200); }
.t-page-head h2 { font-size: 1.5rem; font-weight: 700; color: var(--gray-800); margin: 0; }
.t-page-head p { margin: 0; font-size: .875rem; color: var(--gray-500); }
.t-icon-btn { background: none; border: 0; padding: .5rem .65rem; border-radius: 8px; color: var(--gray-500); font-size: 1.1rem; cursor: pointer; }
.t-icon-btn:hover { background: var(--gray-50); color: var(--gray-800); }
.t-pop { display: none; position: absolute; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); overflow: hidden; z-index: 60; min-width: 14rem; animation: tPop .2s ease-out; }
.t-pop.show { display: block; }
.t-pop a, .t-pop button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem 1rem; font-size: .875rem; color: var(--gray-700); background: none; border: 0; text-align: left; text-decoration: none !important; }
.t-pop a:hover, .t-pop button:hover { background: var(--gray-50); color: var(--gray-800); }
.t-pop a.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.t-pop .danger { color: #dc2626; }
.t-pop .danger:hover { background: #fef2f2; color: #dc2626; }
.t-pop i { width: 1.1rem; text-align: center; }
.t-count { background: #fef3c7; color: #92400e; border-radius: 9999px; font-size: .7rem; font-weight: 600; padding: .1rem .5rem; margin-left: auto; }
@keyframes tPop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Theme One: sidebar putih ---------- */
.t1 { display: flex; height: 100vh; overflow: hidden; }
.t1-sidebar { width: 16rem; background: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); display: flex; flex-direction: column; flex-shrink: 0; transition: transform .3s ease; z-index: 50; }
.t1-sidebar .t1-top { padding: 1.5rem; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
.t1-nav { flex: 1; padding: 1rem; overflow-y: auto; }
.t1-nav .t1-group { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); padding: 1rem 1rem .35rem; }
.t1-nav a { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: 12px; color: var(--gray-700); text-decoration: none !important; margin-bottom: .2rem; transition: background .15s; }
.t1-nav a:hover { background: var(--gray-50); color: var(--gray-800); }
.t1-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.t1-nav a i { width: 1.25rem; text-align: center; }
.t1-user { padding: 1rem; border-top: 1px solid var(--gray-200); position: relative; }
.t1-user > button { display: flex; align-items: center; gap: .75rem; width: 100%; background: none; border: 0; padding: 0; text-align: left; }
.t1-user .name { font-size: .875rem; font-weight: 500; color: var(--gray-800); margin: 0; }
.t1-user .role { font-size: .75rem; color: var(--gray-500); margin: 0; }
.t1-user .t-pop { bottom: 100%; left: 1rem; right: 1rem; margin-bottom: .5rem; }
.t1-main { flex: 1; overflow-y: auto; min-width: 0; }
.t1-head { position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.t1-head > div { padding: 1rem 5%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.t1-content { padding: 1.5rem 5%; }
.t1-mobile-btn, .t1-close { display: none; }
.t1-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 40; }
@media (max-width: 1023px) {
    .t1-sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); }
    .t1-sidebar.open { transform: translateX(0); }
    .t1-overlay.active { display: block; }
    .t1-mobile-btn, .t1-close { display: inline-block; }
    .t1-head p { display: none; }
    .t1-head h2 { font-size: 1.15rem; }
}

/* ---------- Theme Two: menu atas ---------- */
.t2-nav { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); position: sticky; top: 0; z-index: 50; }
.t2-container { width: 90%; margin: 0 auto; }
.t2-nav .t2-container { display: flex; align-items: center; justify-content: space-between; height: 4rem; gap: 1rem; }
.t2-menu { display: flex; align-items: center; gap: .25rem; }
.t2-item { position: relative; }
.t2-item > a, .t2-item > button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 8px; border: 0; background: none; color: var(--gray-700); font-size: .875rem; font-weight: 500; white-space: nowrap; text-decoration: none !important; transition: all .3s ease; }
.t2-item > a:hover, .t2-item > button:hover, .t2-item > .active { background: #1e3a8a; color: #fff; }
.t2-item .t-pop { left: 0; top: 100%; margin-top: .5rem; }
.t2-right { display: flex; align-items: center; gap: .75rem; }
.t2-right .t2-item .t-pop { left: auto; right: 0; }
.t2-balance { font-size: .8rem; color: var(--gray-500); white-space: nowrap; }
.t2-balance strong { color: var(--gray-800); }
.t2-userbtn { display: flex; align-items: center; gap: .5rem; background: none; border: 0; padding: .25rem; border-radius: 9999px; }
.t2-userbtn .t-avatar { width: 36px; height: 36px; font-size: .85rem; }
.t2-head .t2-container { padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.t2-content { padding: 2rem 0; }
.t2-burger { display: none; }
.t2-mobile { display: none; background: #fff; border-top: 1px solid var(--gray-200); padding: .5rem 5% 1rem; max-height: calc(100vh - 4rem); overflow-y: auto; }
.t2-mobile.show { display: block; }
.t2-mobile .t2-group { font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-400); padding: .75rem 1rem .25rem; }
.t2-mobile a { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: 8px; color: var(--gray-700); text-decoration: none !important; }
.t2-mobile a.active, .t2-mobile a:hover { background: #1e3a8a; color: #fff; }
/* Logo Theme Two: lebih besar dan menjorok ke pita judul di bawah header. Kotak mengikuti bentuk logo (tinggi tetap,
   lebar menyesuaikan) supaya logo melebar tidak mengecil. Latar putih + bayangan agar logo transparan terbaca di atas pita. */
.t-two .t2-nav .t-brand > img, .t-two .t2-nav .t-brand > .t-logo { position: relative; z-index: 2; transform: translateY(22px); background: #fff; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.t-two .t2-nav .t-brand > .t-logo-img, .t-two .t2-nav .t-brand > .t-logo-wide { width: auto; height: 88px; min-width: 88px; max-width: 260px; padding: 4px 8px; object-fit: contain; }
.t-two .t2-nav .t-brand > .t-logo { width: 88px; height: 88px; background: var(--btn); font-size: 2rem; }
.t-two .t2-head .t2-container { padding-top: 2.75rem; }
@media (max-width: 575px) {
    .t-two .t2-nav .t-brand > .t-logo-img, .t-two .t2-nav .t-brand > .t-logo-wide { height: 64px; min-width: 64px; max-width: 170px; padding: 3px 6px; }
    .t-two .t2-nav .t-brand > .t-logo { width: 64px; height: 64px; font-size: 1.5rem; }
    .t-two .t2-nav .t-brand > img, .t-two .t2-nav .t-brand > .t-logo { transform: translateY(14px); }
    .t-two .t2-head .t2-container { padding-top: 1.75rem; }
}
@media (max-width: 1099px) {
    .t2-menu, .t2-balance { display: none; }
    .t2-burger { display: inline-block; }
    .t2-container { width: 94%; }
}

/* ---------- Halaman masuk dua kolom ---------- */
.t-auth { display: flex; min-height: 100vh; background: #f9fafb; }
.t-auth-side { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 3rem; background: url('img/login.jpg') center / cover no-repeat; color: #fff; text-align: center; }
.t-auth-side::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.t-auth-side > div { position: relative; max-width: 28rem; }
.t-auth-side h1 { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; color: #fff; }
.t-auth-side p { font-size: 1.15rem; opacity: .9; }
.t-auth-form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.t-auth-form > div { width: 100%; max-width: 26rem; }
.t-auth-form h2 { font-size: 1.75rem; font-weight: 700; color: var(--gray-800); margin: 1.25rem 0 .25rem; }
.t-auth-form .sub { color: var(--gray-500); margin-bottom: 1.5rem; }
.t-auth-form .form-control { height: calc(2.9rem + 2px); border-radius: 12px; }
.t-auth-form .input-group-text { border-radius: 12px; }
.t-auth-form .btn { padding: .75rem 1rem; }
.t-auth-form .btn-primary { font-weight: 600; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15); }
@media (max-width: 1023px) { .t-auth-side { display: none; } }
/* Logo halaman masuk: lebih besar, lebar mengikuti bentuk logo supaya logo melebar tidak mengecil. */
.t-auth-form .t-brand > .t-logo-img, .t-auth-form .t-brand > .t-logo-wide { width: auto; height: 80px; min-width: 80px; max-width: 260px; border-radius: 0; object-fit: contain; }
.t-auth-form .t-brand > .t-logo { width: 72px; height: 72px; border-radius: 18px; font-size: 1.75rem; }
@media (max-width: 575px) { .t-auth-form .t-brand > .t-logo-img, .t-auth-form .t-brand > .t-logo-wide { height: 64px; min-width: 64px; max-width: 200px; } }
.t-auth-form .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.t-auth-form .input-group-append .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; background: #fff; }
.themed a.btn, .themed a.btn:hover { text-decoration: none; }
.themed a.btn-dark, .themed a.btn-dark:hover, .themed a.btn-primary, .themed a.btn-primary:hover { color: #fff; }
.themed a.btn-light, .themed a.btn-light:hover { color: var(--gray-700); }

/* ---------- Logo unggahan (Pengaturan > Tampilan) ---------- */
.t-logo-img { width: 40px; height: 40px; border-radius: 12px; object-fit: contain; flex-shrink: 0; }
.t-logo-wide { height: 40px; max-width: 180px; object-fit: contain; object-position: left center; }

/* ---------- Submenu admin ---------- */
.t1-sub { margin-bottom: .2rem; }
.t1-sub > summary { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-radius: 12px; color: var(--gray-700); cursor: pointer; list-style: none; transition: background .15s; user-select: none; }
.t1-sub > summary::-webkit-details-marker { display: none; }
.t1-sub > summary:hover { background: var(--gray-50); color: var(--gray-800); }
.t1-sub > summary.active { color: var(--accent); font-weight: 500; }
.t1-sub > summary > i:first-child { width: 1.25rem; text-align: center; }
.t1-sub .t1-caret { font-size: .65rem; color: var(--gray-400); margin-left: .25rem; transition: transform .2s; }
.t1-sub > summary .t-count + .t1-caret { margin-left: .4rem; }
.t1-sub > summary > span:not(.t-count) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t1-sub[open] .t1-caret { transform: rotate(90deg); }
.t1-sub > a { padding-left: 2.25rem; font-size: .9rem; }
.t1-sub[open] > summary .t-count { display: none; }
/* Grup dibagi ke 3 kolom di Blade (seimbang menurut jumlah item). Tinggi dibatasi layar karena navbar sticky:
   bagian bawah dropdown tidak bisa dicapai dengan scroll halaman, jadi dropdown sendiri yang di-scroll. */
.t-pop.t2-mega.show { display: grid; grid-template-columns: repeat(3, minmax(13rem, 1fr)); align-items: start; gap: 0 .5rem; padding: .5rem; min-width: 42rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
.t2-right .t-pop.t2-mega, .t2-menu .t2-item:last-child .t-pop.t2-mega { left: auto; right: 0; }
.t2-col { padding-bottom: .5rem; }
.t2-sub { display: flex; align-items: center; gap: .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-400); padding: .75rem 1rem .3rem; }
.t2-sub i { width: 1.1rem; text-align: center; }
.t-pop.t2-mega a { border-radius: 8px; padding: .55rem 1rem; }