/* ============================================================
   DEFAULT SYSTEM ELEMENTS
   ============================================================ */
   .required::after {
    color: #e6674a;
    content: " *";
}

.form-group .control-label {
    padding-right: 0 !important;
    margin-top: .6rem;
}

#report-view { text-align: center; }

.loader {
    display: inline-block;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media print {
  #report-template { visibility: hidden; }
  .content-wrapper { margin-left: -240px; }
  #report-view-card { position: absolute; left: 0; top: 0; }
  .print_button { display: none; }
}


/* ============================================================
   SIDEBAR PREMIUM DARK NAVY STYLE
   ============================================================ */
#sidebar-wrapper {
    background: #071a33 !important;
    border-right: 1px solid rgba(255,255,255,0.08);
}


/* ============================================================
   PREMIUM BRAND LOGO FRAME – NAVY GLASS + GLOW
   ============================================================ */
.brand-logo {
    height: 110px !important;
    background: radial-gradient(circle at top, #004b93 0%, #00203a 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 0 !important;

    border-bottom: 1px solid rgba(255,255,255,0.15);
    border-radius: 0 0 18px 18px;

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    box-shadow: inset 0 0 18px rgba(255,255,255,0.08),
                inset 0 0 28px rgba(0,145,255,0.12),
                0 3px 12px rgba(0,0,0,0.45),
                0 12px 24px rgba(0,0,0,0.45);
}


/* ============================================================
   PREMIUM LOGO STYLE
   ============================================================ */
.brand-logo img {
    max-height: 145px !important;
    width: auto;
    object-fit: contain;

    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.4))
            drop-shadow(0 6px 9px rgba(0,0,0,0.35));

    transition: transform .28s ease, filter .28s ease;
}

.brand-logo img:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.3))
            drop-shadow(0 0 18px rgba(0,170,255,0.75));
}



/* ============================================================
   MENU UTAMA
   ============================================================ */
.sidebar-menu ul li a {
    color: #e8f1ff !important;
    padding: 12px 20px;
    font-size: 14px;
    display: flex !important;
    align-items: center;
    gap: 12px;
    border-left: 3px solid transparent;
    transition: all .25s ease;
}

.sidebar-menu ul li a i {
    font-size: 17px;
    min-width: 22px;
    text-align: center;
    opacity: .85;
    transition: .25s ease;
}

.sidebar-menu ul li a:hover {
    background: #0d2a50 !important;
    border-left: 3px solid #1da1ff;
    color: #ffffff !important;
}

.sidebar-menu ul li.active > a {
    background: #0f2f5c !important;
    border-left: 3px solid #1da1ff;
    color: #ffffff !important;
}


/* ============================================================
   SUBMENU STYLE
   ============================================================ */
.sidebar-submenu {
    background: #0b223f !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.sidebar-submenu li a {
    padding: 8px 22px 8px 38px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: #e4ecff !important;
    line-height: 1.25;
}

.sidebar-submenu li a:hover {
    background: #0d2f56 !important;
    color: #ffffff !important;
}


/* ============================================================
   ARROW DROPDOWN
   ============================================================ */
.sidebar-menu ul li > a .arrow {
    margin-left: auto;
    transition: transform .25s ease;
}

.sidebar-menu ul li.active > a .arrow {
    transform: rotate(-180deg);
}


/* ============================================================
   PREMIUM TOPBAR
   ============================================================ */
.topbar-nav {
    background: linear-gradient(135deg, #001a3c, #003066) !important;
    height: 70px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
}

.topbar-nav .navbar {
    background: transparent !important;
    height: 70px;
    padding: 0 25px;
}

.topbar-nav .toggle-menu i {
    font-size: 22px;
    color: #dfe9ff;
    transition: .25s ease;
}

.topbar-nav .toggle-menu:hover i {
    color: #ffffff;
    transform: scale(1.15);
}

.topbar-nav .right-nav-link .nav-link {
    color: #e9f3ff !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: .25s ease;
}

.topbar-nav .right-nav-link .nav-link:hover {
    color: #ffffff !important;
}

.topbar-nav .dropdown-menu {
    background: #082041;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    border-radius: 10px;
}

.content-wrapper {
    margin-top: 70px !important;
}

#sidebar-wrapper {
    margin-top: 70px !important;
}


/* ============================================================
   DASHBOARD PREMIUM STYLE
   ============================================================ */
.page-title-box {
    background: linear-gradient(135deg, #1bc186, #0da86c);
    padding: 20px 28px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-bottom: 25px;
}

.page-title-box h4 {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff !important;
}


/* INFO CARD */
.info-card {
    border-radius: 16px;
    padding: 22px;
    color: #ffffff;
    box-shadow: 0 8px 28px rgba(0,0,0,0.22);
    transition: transform .25s ease, box-shadow .25s ease;
    border: none !important;
}

.info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.30);
}

.info-card .icon i {
    font-size: 38px;
    transition: 0.3s;
}

.card-purple { background: linear-gradient(135deg, #b214ff, #7b00c8); }
.card-blue   { background: linear-gradient(135deg, #4cb8ff, #197ad9); }
.card-red    { background: linear-gradient(135deg, #ff4747, #d01818); }
.card-green  { background: linear-gradient(135deg, #28d17c, #0e9f54); }


/* BOX WRAPPER */
.dashboard-box {
    background: #ffffff;
    border-radius: 14px;
    margin-top: 25px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
}

.dashboard-box .box-title {
    padding: 18px 26px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: 16px;
    font-weight: 600;
    color: #062445;
}

.dashboard-box .box-body {
    padding: 22px 26px;
}


/* CHART CONTAINER */
.chart-container {
    padding: 15px 10px;
}


/* ============================================================
   RESPONSIVE IMPROVEMENTS
   ============================================================ */
@media (max-width: 991.98px) {
    .content-wrapper {
        margin-left: 0 !important;
        padding: 10px;
    }

    #sidebar-wrapper {
        position: fixed;
        z-index: 999;
        width: 250px;
        transform: translateX(-250px);
        transition: .3s ease;
    }

    #sidebar-wrapper.active {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .card.body {
        padding: 12px !important;
    }
    canvas {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    .card { margin-bottom: 12px; }
}

/* ======================================================
   PREMIUM THEME : ACCOUNT TYPE TABLE
   ====================================================== */

/* CARD */
.card.bg-dark{
    background: linear-gradient(135deg,#041a36,#062b4f) !important;
    border-radius:16px;
    padding:10px;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.card{
    border-radius:12px !important;
}

/* HEADER */
.card-header h5{
    font-size:18px;
    font-weight:600;
    letter-spacing:.5px;
}

/* BUTTON TAMBAH */
.btn-dark{
    background:#062b4f;
    border:1px solid #0d5fa8;
    border-radius:10px;
    padding:7px 14px;
    transition:.2s ease;
}

.btn-dark:hover{
    background:#0b4690;
}

/* ======================================================
   TABLE STYLE
   ====================================================== */

#typeTable{
    border-radius:14px;
    overflow:hidden;
}

/* HEAD */
#typeTable thead tr{
    background:linear-gradient(135deg,#05264d,#001a35);
}

#typeTable thead th{
    color:#fff;
    border:none !important;
    text-transform:uppercase;
    letter-spacing:.8px;
}

/* BODY */
#typeTable tbody tr{
    background:#fff;
    transition:.15s ease;
}

#typeTable tbody tr:nth-child(even){
    background:#f7fbff;
}

#typeTable tbody tr:hover{
    background:#eaf4ff;
}

#typeTable td{
    vertical-align:middle;
}

/* TEXT */
#typeTable td:nth-child(3){
    font-weight:600;
    letter-spacing:.4px;
}

/* ======================================================
   ACTION BUTTONS
   ====================================================== */

.btn-warning{
    background:#ffc107;
    border:none;
    border-radius:8px;
    padding:4px 10px;
    color:#000;
}

.btn-danger{
    background:#dc3545;
    border:none;
    border-radius:8px;
    padding:4px 10px;
}

.btn-warning i,
.btn-danger i{
    margin-right:3px;
}

/* ======================================================
   MODAL STYLE
   ====================================================== */

.modal-content{
    border-radius:16px !important;
    overflow:hidden;
}

.modal-header{
    background:linear-gradient(135deg,#041a36,#083d77);
}

.modal-header h5{
    font-weight:600;
}

.modal-body label{
    color:#04325d;
}

/* ============================================================
   COLOR REFINEMENT — tanpa mengubah struktur CSS Anda
   ============================================================ */

/* ==============================
   ACCENT COLOR ADJUSTMENT
============================== */

/* Sidebar hover & active accent */
.sidebar-menu ul li a:hover,
.sidebar-menu ul li.active > a{
    border-left-color:#49c3ff !important;
}

/* Dropdown arrow active */
.sidebar-menu ul li.active > a .arrow{
    color:#49c3ff;
}

/* Topbar highlight */
.topbar-nav{
    background:linear-gradient(135deg,#001a3c,#004a99) !important;
}

/* Button hover refinement */
.btn-dark{
    background:linear-gradient(135deg,#062b4f,#083f73);
    border-color:#248dff;
}

.btn-dark:hover{
    background:linear-gradient(135deg,#0b4690,#0d5fa8);
}

/* Table head glow */
#typeTable thead tr{
    background:linear-gradient(135deg,#041f42,#011b35);
}

/* Row hover shimmer */
#typeTable tbody tr:hover{
    background:linear-gradient(135deg,#eaf4ff,#f2f8ff);
}

/* Action buttons */
.btn-warning{
    background:linear-gradient(135deg,#ffcc33,#ffb300);
    color:#1b1400;
}

.btn-danger{
    background:linear-gradient(135deg,#ff3c3c,#c40014);
}

/* Button shadow */
.btn-warning,
.btn-danger,
.btn-dark{
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.btn-warning:hover,
.btn-danger:hover,
.btn-dark:hover{
    transform:translateY(-1px);
}

/* Card glass tuning */
.card.bg-dark{
    background:linear-gradient(135deg,#031b38,#08386a) !important;
}

/* Modal header tone */
.modal-header{
    background:linear-gradient(135deg,#051c3f,#0b4a8c);
}

/* Accent hover on modal button */
.modal-footer .btn-dark:hover{
    background:linear-gradient(135deg,#0b4690,#258dff);
}

/* Sidebar submenu highlight */
.sidebar-submenu li a:hover{
    background:#103b6b !important;
}

/* Info cards glow */
.info-card{
    box-shadow:
        0 8px 28px rgba(0,0,0,0.22),
        inset 0 0 22px rgba(0,115,255,.15);
}

/* Dashboard box soft glow */
.dashboard-box{
    box-shadow:
        0 6px 22px rgba(0,0,0,0.12),
        inset 0 0 12px rgba(0,95,255,0.08);
}

/* Logo inner glow boost */
.brand-logo{
    box-shadow:
        inset 0 0 22px rgba(255,255,255,0.10),
        inset 0 0 36px rgba(0,145,255,0.15),
        0 3px 12px rgba(0,0,0,0.45),
        0 12px 24px rgba(0,0,0,0.45);
}

/* Smooth hover polish */
a,
button,
.sidebar-menu ul li a,
.sidebar-submenu li a{
    transition:all .25s ease;
}

/* ======================================================
   ULTRA PREMIUM COLOR POLISH EXTENSION
   === Tambahkan di bagian PALING BAWAH custom.css ===
   (Tidak overwrite struktur, hanya layer warna + efek)
   ====================================================== */

   :root {
    --navy-dark:#041a36;
    --navy-deep:#062b4f;
    --navy-glass:#084f91;
    --blue-accent:#1da1ff;
    --soft-white:#f5f9ff;
    --text-navy:#062445;
}

/* ======================
   CARD ENHANCEMENT
   ====================== */
.card.bg-dark{
    background: linear-gradient(145deg, var(--navy-dark), var(--navy-deep)) !important;
    box-shadow:
        0 10px 24px rgba(0,0,0,.25),
        inset 0 0 18px rgba(41,162,255,.06);
}

.card{
    background:#fff;
}

/* ======================
   HEADER POLISH
   ====================== */
.card-header{
    background:linear-gradient(145deg,#062b4f,#001835);
    border-radius:14px 14px 0 0;
    padding:14px 20px;
}

.card-header h5{
    color:#eaf3ff!important;
    letter-spacing:.7px;
}

/* ======================
   BUTTON PREMIUM FEEL
   ====================== */
.btn-dark{
    background:linear-gradient(145deg,#062b4f,#084b8a)!important;
    border:1px solid rgba(29,161,255,.55);
    box-shadow:0 4px 10px rgba(0,0,0,.25);
}

.btn-dark:hover{
    background:linear-gradient(145deg,#084b8a,#146fc2)!important;
    box-shadow:
        0 6px 16px rgba(0,0,0,.35),
        inset 0 0 10px rgba(29,161,255,.2);
}

/* ======================
   TABLE ULTRA PREMIUM
   ====================== */
#typeTable{
    border-radius:16px;
    box-shadow:0 4px 14px rgba(0,0,0,.12);
}

/* HEAD */
#typeTable thead tr{
    background:linear-gradient(145deg,#041a36,#073a6b);
}

#typeTable thead th{
    color:#eef6ff!important;
}

/* BODY */
#typeTable tbody tr{
    background:#ffffff;
}

#typeTable tbody tr:nth-child(even){
    background:#f2f7ff;
}

#typeTable tbody tr:hover{
    background:linear-gradient(145deg,#e6f2ff,#ffffff);
}

#typeTable td{
    color:#062445;
}

#typeTable td:nth-child(3){
    color:#043872;
}

/* ======================
   ACTION BUTTON GLOW
   ====================== */
.btn-warning{
    background:linear-gradient(145deg,#ffc107,#ffd454);
    box-shadow:0 3px 8px rgba(0,0,0,.15);
}

.btn-warning:hover{
    background:linear-gradient(145deg,#ffd454,#ffeaa0);
}

.btn-danger{
    background:linear-gradient(145deg,#d01818,#ff4b4b);
    box-shadow:0 3px 8px rgba(0,0,0,.15);
}

.btn-danger:hover{
    background:linear-gradient(145deg,#ff4b4b,#ff7c7c);
}

/* ======================
   MODAL ULTRA STYLE
   ====================== */
.modal-content{
    background:#f8fbff;
    box-shadow:0 12px 32px rgba(0,0,0,.25);
}

.modal-header{
    background:linear-gradient(145deg,#041a36,#09508e)!important;
}

.modal-header h5{
    letter-spacing:.75px;
}

.modal-body label{
    color:#062445!important;
}

/* ======================
   SIDEBAR GLOW DETAIL
   ====================== */
#sidebar-wrapper{
    box-shadow:
        inset -4px 0 12px rgba(0,0,0,.45),
        6px 0 16px rgba(0,0,0,.30);
}

.sidebar-menu ul li.active>a{
    box-shadow:inset 3px 0 #1da1ff,
               inset 0 0 12px rgba(29,161,255,.15);
}

/* ======================
   TOPBAR ULTRA GLOSS
   ====================== */
.topbar-nav{
    background:linear-gradient(145deg,#001533,#00418a)!important;
    box-shadow:
        0 4px 14px rgba(0,0,0,.45),
        inset 0 0 18px rgba(41,162,255,.12);
}

/* ======================
   PAGE DEPTH FEELING
   ====================== */
.content-wrapper{
    background:linear-gradient(180deg,#f8fbff,#ffffff);
}
/* ======================================================
   GLOBAL WHITE PAGE TITLES
   ====================================================== */

/* Semua judul halaman */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff !important;
}

/* Judul section / card header */
.card-header,
.page-title-box,
.dashboard-box .box-title,
.section-title {
    color: #ffffff !important;
}

/* Khusus span atau text di judul */
.card-header *,
.page-title-box *,
.dashboard-box .box-title *,
.section-title * {
    color: #ffffff !important;
}

/* Header daftar / label halaman */
.page-title,
.page-title h1,
.page-title h2,
.page-title h3,
.page-title h4,
.page-title h5 {
    color: #ffffff !important;
}

/* Keterangan kecil di header */
.page-title small,
.subtitle,
.header-subtitle {
    color: rgba(255,255,255,0.85) !important;
}

/* Teks tabel pada judul halaman (seperti "Daftar Transaksi Pembayaran") */
.table-title,
.list-title,
.panel-title {
    color: #ffffff !important;
}

/* NON-AFFECT sidebar/menu */
.sidebar-menu h1,
.sidebar-menu h2,
.sidebar-menu h3,
.sidebar-menu h4,
.sidebar-menu h5,
.sidebar-menu h6 {
    color: inherit !important;
}

/* ======================================================
   FIX SIDEBAR > TOPBAR LAYER
   SIDEBAR TAMPIL DI ATAS TOPBAR
   ====================================================== */

/* Sidebar always above topbar */
#sidebar-wrapper{
    position: fixed !important;
    top: 0 !important;
    left: 0;
    height: 100vh;
    z-index: 1300 !important; /* lebih tinggi dari topbar */
}

/* Topbar tetap di bawah sidebar */
.topbar-nav{
    z-index: 1200 !important;
}

/* Konten geser supaya tidak ketiban sidebar */
.content-wrapper{
    margin-left: 250px !important;
}

/* HEADER LOGO FRAME menempel rapi di atas */
.brand-logo{
    margin-top: 0 !important;
}

/* Mobile behavior tetap slide */
@media (max-width: 991.98px){

    .content-wrapper{
        margin-left: 0 !important;
    }

    #sidebar-wrapper{
        transform: translateX(-100%);
        transition: .3s ease;
    }

    #sidebar-wrapper.active{
        transform: translateX(0);
    }

}

/* ============================================================
   FIX MOBILE SIDEBAR TOGGLE & LAYERING
   ============================================================ */

/* SIDEBAR BASE */
#sidebar-wrapper{
    position: fixed;
    top: 70px; /* pas di bawah topbar */
    left: 0;
    width: 250px;
    height: 100vh;
    z-index: 1500;
    overflow-y: auto;
}

/* TOPBAR LAYER */
.topbar-nav{
    z-index:1600 !important;
}

/* CONTENT SHIFT DESKTOP */
@media(min-width:992px){
    .content-wrapper{
        margin-left:250px;
    }

    #sidebar-wrapper{
        transform: translateX(0) !important;
    }
}

/* ============================================================
   MOBILE BEHAVIOR
   ============================================================ */

@media(max-width:991.98px){

    /* Sidebar default hidden */
    #sidebar-wrapper{
        transform:translateX(-100%);
        transition:.3s ease-in-out;
    }

    /* Saat toggle aktif → tampil */
    #sidebar-wrapper.active{
        transform:translateX(0);
        box-shadow:20px 0 40px rgba(0,0,0,.35);
    }

    /* CONTENT TIDAK KEGESER */
    .content-wrapper{
        margin-left:0 !important;
    }

    /* BODY LOCK */
    body.sidebar-open{
        overflow:hidden;
    }

    /* OVERLAY BACKDROP */
    body.sidebar-open::after{
        content:"";
        position:fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        background:rgba(0,0,0,.35);
        z-index:1400;
    }
}
/* MOBILE SIDEBAR FIX */
@media (max-width: 991.98px){

    #sidebar-wrapper{
        position: fixed;
        top: 70px;
        left: 0;
        height: calc(100vh - 70px);
        width: 250px;

        transform: translateX(-100%);
        transition: .35s ease;

        z-index: 1300;
    }

    #sidebar-wrapper.active{
        transform: translateX(0);
        box-shadow: 8px 0 24px rgba(0,0,0,.4);
    }

}