/* Global MedanPedia compatibility patch */
body { font-family: "Work Sans", sans-serif; }
.public-navbar { transition: .25s; z-index: 1030; }
.public-navbar .navbar-brand img { max-height: 42px; object-fit: contain; }
.public-navbar .brand-text { margin-left: .5rem; }
.auth-body { background: #f1f3f7; }
.page-simple { min-height: 70vh; }
.card { border: 0; box-shadow: 0 0.125rem 0.5rem rgba(20,27,43,.04); border-radius: .9rem; }
.card-header { background: #fff; border-bottom: 1px solid #eff0f2; border-top-left-radius: .9rem!important; border-top-right-radius: .9rem!important; }
.card-title { font-size: 1rem; font-weight: 600; }
.table > :not(caption) > * > * { vertical-align: middle; }
.table-responsive { border-radius: .75rem; }
.btn-rounded, .rounded-4 { border-radius: .85rem!important; }
.form-control, .form-select { border-radius: .75rem; }
textarea.form-control { min-height: 115px; }
.service-card .service-img { width: 42px; height: 42px; object-fit: contain; }
.service-card .service-name { min-height: 42px; }
.avatar { height: 48px; width: 48px; }
.avatar-title { align-items: center; display:flex; height:100%; justify-content:center; width:100%; color:#fff; }
.admin-tabs a.btn-primary { color:#fff; }
.admin-tabs a.btn-light { color: #545965; }
.admin-tabs a.btn-light:hover { color: var(--bs-primary); }
.otp-row { display:flex; gap:.5rem; }
.otp-row .btn { white-space:nowrap; }
.ticket-thread { max-height: 560px; overflow:auto; }
.ticket-bubble { border-radius: 1rem; padding: 1rem; margin-bottom: .75rem; }
.ticket-bubble.user { background:#f5f6f8; }
.ticket-bubble.admin { background:rgba(var(--bs-primary-rgb),.1); border:1px solid rgba(var(--bs-primary-rgb),.18); }
pre.api-box { white-space:pre-wrap; background:#141b2b; color:#e9eef7; padding:1rem; border-radius:.75rem; }
@media(max-width:575.98px){ .otp-row{display:block}.otp-row .btn{width:100%;margin-top:.5rem}.page-content{padding-left:.75rem;padding-right:.75rem}.card-body{padding:1rem}.table{font-size:.8rem}.public-navbar .brand-text{display:none} }
body[data-sidebar=dark], body[data-sidebar=dark] .vertical-menu, body[data-sidebar=dark][data-sidebar-size=sm] .vertical-menu #sidebar-menu>ul>li:hover>a { background-color: var(--bs-primary); border-color: var(--bs-primary); }
body[data-sidebar=dark] .navbar-brand-box, body[data-sidebar=dark] .vertical-menu::before { background-color: var(--bs-primary); }
body[data-sidebar=dark] #sidebar-menu ul li a, body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a { color: rgba(255,255,255,.78); }
body[data-sidebar=dark] #sidebar-menu ul li a:hover, body[data-sidebar=dark] #sidebar-menu ul li.mm-active>a { color:#fff!important; }
body[data-sidebar=dark] #sidebar-menu ul li a:hover .nav-icon, body[data-sidebar=dark] #sidebar-menu ul li.mm-active>a .nav-icon { fill:#fff!important; }
body[data-sidebar=dark] .menu-title { color:#fff; opacity:1; }
.hamburger-icon span { background-color:#fff; }
.topnav-hamburger-custom .hamburger-icon span { background-color:#141b2b; }
#sidebar-menu ul li.mm-active>a::before { background-color:#fff; }
.btn-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-primary:hover,.btn-check:focus+.btn-primary,.btn-primary:focus,.btn-primary:disabled { background-color: var(--bs-primary-hover); border-color: var(--bs-primary-hover); }
.text-primary { color: var(--bs-primary)!important; }
.bg-primary { background-color: var(--bs-primary)!important; }
.border-primary { border-color: var(--bs-primary)!important; }
.badge.processing { background: var(--bs-primary); color:#fff; }
.badge.success { background:#63ad6f; color:#fff; }
.badge.error { background:#f56e6e; color:#fff; }
.badge.partial { background:#f9c256; color:#141b2b; }
.landing-body .header { min-height: 520px; overflow: hidden; }
.feature-icon { width: 58px; height: 58px; border-radius: 18px; display:flex; align-items:center; justify-content:center; background:rgba(var(--bs-primary-rgb),.12); color:var(--bs-primary); font-size:26px; flex:0 0 auto; }
@media(max-width:991.98px){
  body.sidebar-enable .vertical-menu { display:block!important; z-index:1008; }
  body.sidebar-enable::before { content:""; position:fixed; inset:0; background:rgba(20,27,43,.35); z-index:1003; }
  .vertical-menu { z-index:1008; }
  #page-topbar { z-index:1007; }
}

/* Step 9 API Documentation */
.api-doc-sticky{position:sticky;top:95px;z-index:5}.api-doc-nav .list-group-item{border:0;border-radius:.65rem;margin-bottom:.25rem;color:#545965}.api-doc-nav .list-group-item:hover{background:rgba(var(--bs-primary-rgb),.08);color:var(--bs-primary)}.api-doc-section{scroll-margin-top:100px}.api-doc-code{background:#101828;color:#e5e7eb;border-radius:14px;padding:16px;white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.55;margin:0 0 1rem 0}.api-doc-code code{color:inherit;font-size:inherit}.api-doc-chip{background:rgba(var(--bs-primary-rgb),.10);color:var(--bs-primary);border:1px solid rgba(var(--bs-primary-rgb),.25);border-radius:12px;padding:.55rem .75rem;font-family:monospace;font-weight:700}.api-doc-info-box{border:1px solid #eff0f2;border-radius:14px;padding:14px 16px;background:#fff}.api-doc-table th{white-space:nowrap}.api-doc-table td{vertical-align:top}@media(max-width:991.98px){.api-doc-sticky{position:relative;top:auto}}


/* Step 10 API settings */
.api-doc-chip{display:inline-flex;align-items:center;min-height:38px;padding:.45rem .75rem;border-radius:.75rem;background:rgba(var(--bs-primary-rgb),.09);color:var(--bs-primary);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-weight:700;word-break:break-all}.api-doc-code{background:#111827;color:#e5e7eb;border-radius:14px;padding:14px;white-space:pre-wrap;word-break:break-word}.api-doc-code code{color:inherit}.api-doc-info-box{border:1px solid #eff0f2;border-radius:14px;padding:14px;background:#fff}.api-doc-sticky{position:sticky;top:90px}.api-doc-nav .list-group-item{border:0;padding:.45rem 0;color:#545965}.api-doc-section{scroll-margin-top:100px}.service-text-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}



/* Step 16: Ticket chat kanan-kiri */
.ticket-thread{display:flex;flex-direction:column;gap:.75rem;max-height:620px;overflow:auto;padding:.75rem;background:#f8f9fb;border-radius:18px;border:1px solid #eff0f2}.ticket-bubble{position:relative;width:fit-content;max-width:78%;padding:.85rem 1rem;border-radius:18px;margin:0;box-shadow:0 6px 18px rgba(20,27,43,.04);line-height:1.55}.ticket-bubble.user{align-self:flex-end;background:linear-gradient(135deg,var(--bs-primary),var(--bs-primary-hover));color:#fff;border-bottom-right-radius:6px}.ticket-bubble.user .text-muted,.ticket-bubble.user a{color:#fff!important}.ticket-bubble.admin{align-self:flex-start;background:#fff;border:1px solid rgba(var(--bs-primary-rgb),.16);color:#3f4452;border-bottom-left-radius:6px}.ticket-bubble .fw-semibold{font-size:.78rem;opacity:.9}.ticket-thread:empty:before{content:'Belum ada percakapan';color:#8495ab;text-align:center;padding:2rem}.upgrade-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:rgba(var(--bs-primary-rgb),.12);color:var(--bs-primary);font-size:30px}.upgrade-card{transition:.2s}.upgrade-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,27,43,.08)}.upgrade-disabled{opacity:.78}

/* Step 16: Landing clean lp-* - tidak bergantung app.min.css */
.landing-body{background:#fff;color:#334155;font-family:"Work Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}.lp-navbar{background:rgba(15,23,42,.18);backdrop-filter:blur(16px);transition:.25s}.lp-navbar .nav-link{color:rgba(255,255,255,.86)!important;font-weight:600}.lp-navbar .nav-link:hover{color:#fff!important}.lp-logo{max-width:170px;object-fit:contain}.lp-brand-text{color:#fff}.lp-hero{position:relative;min-height:760px;padding:140px 0 110px;background:radial-gradient(circle at top left,rgba(255,255,255,.28),transparent 28%),linear-gradient(135deg,#111827 0%,var(--bs-primary) 58%,#24c6dc 100%);color:#fff;overflow:hidden}.lp-hero:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-70px;height:150px;background:#fff;border-radius:50% 50% 0 0/45% 45% 0 0}.lp-blob{position:absolute;border-radius:50%;filter:blur(8px);opacity:.25;background:#fff}.lp-blob-1{width:340px;height:340px;right:8%;top:18%}.lp-blob-2{width:220px;height:220px;left:6%;bottom:18%}.min-vh-75{min-height:620px}.lp-badge{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.13);padding:.55rem .9rem;border-radius:999px;font-weight:700}.lp-title{font-size:clamp(2.2rem,5vw,4.9rem);line-height:1.02;font-weight:800;letter-spacing:-.055em}.lp-subtitle{font-size:1.08rem;line-height:1.75;color:rgba(255,255,255,.86);max-width:640px}.lp-contact-mini a{color:#fff;text-decoration:none;font-weight:700}.lp-hero-card{position:relative;z-index:2;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);box-shadow:0 24px 80px rgba(15,23,42,.28);border-radius:34px;padding:34px;backdrop-filter:blur(12px)}.lp-hero-img{max-height:430px;object-fit:contain;filter:drop-shadow(0 25px 40px rgba(15,23,42,.25))}.lp-floating-card{position:absolute;display:flex;align-items:center;gap:.5rem;background:#fff;color:#0f172a;border-radius:18px;padding:.75rem 1rem;box-shadow:0 16px 35px rgba(15,23,42,.18);font-weight:800}.lp-floating-card i{font-size:22px;color:var(--bs-primary)}.lp-float-1{left:-18px;top:20%}.lp-float-2{right:-18px;bottom:18%}.lp-section{padding:90px 0}.lp-soft{background:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%)}.lp-section-label{display:inline-flex;color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.1);border:1px solid rgba(var(--bs-primary-rgb),.17);border-radius:999px;padding:.4rem .75rem;font-weight:800;margin-bottom:.85rem}.lp-section-title{font-size:clamp(1.8rem,3vw,3rem);font-weight:800;line-height:1.12;color:#0f172a;letter-spacing:-.035em}.lp-text{font-size:1rem;color:#64748b;line-height:1.8}.lp-stats{position:relative;z-index:5;margin-top:-84px;padding-bottom:34px}.lp-stat-card{background:#fff;border:1px solid #e8eef7;border-radius:26px;padding:28px;text-align:center;box-shadow:0 20px 55px rgba(15,23,42,.11)}.lp-stat-card i{font-size:34px;color:var(--bs-primary);display:block;margin-bottom:8px}.lp-stat-card strong{display:block;font-size:2rem;color:#0f172a}.lp-stat-card span{color:#64748b;font-weight:700}.lp-image-frame{background:#fff;border-radius:32px;padding:20px;border:1px solid #e8eef7;box-shadow:0 18px 45px rgba(15,23,42,.08)}.lp-image-frame img{max-height:360px;object-fit:contain}.lp-feature-card,.lp-testimonial{background:#fff;border:1px solid #e8eef7;border-radius:28px;padding:28px;box-shadow:0 14px 38px rgba(15,23,42,.05);transition:.22s}.lp-feature-card:hover,.lp-testimonial:hover{transform:translateY(-5px);box-shadow:0 24px 55px rgba(15,23,42,.1)}.lp-feature-icon{width:64px;height:64px;border-radius:22px;background:linear-gradient(135deg,rgba(var(--bs-primary-rgb),.16),rgba(var(--bs-primary-rgb),.05));display:flex;align-items:center;justify-content:center;color:var(--bs-primary);font-size:32px;margin-bottom:18px}.lp-feature-card h3{font-size:1.22rem;color:#0f172a;font-weight:800}.lp-feature-card p,.lp-testimonial p{color:#64748b;line-height:1.7;margin-bottom:0}.lp-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(var(--bs-primary-rgb),.12);color:var(--bs-primary)}.lp-testimonial span{display:block;color:#94a3b8;font-size:.85rem}.lp-accordion .accordion-item{border:0;border-radius:18px!important;margin-bottom:12px;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,.05)}.lp-accordion .accordion-button{font-weight:800;color:#0f172a}.lp-accordion .accordion-button:not(.collapsed){color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.08)}.lp-payments{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.lp-payment-chip{background:#fff;border:1px solid #e8eef7;border-radius:999px;padding:.85rem 1.15rem;font-weight:800;color:#334155;box-shadow:0 10px 24px rgba(15,23,42,.04)}.lp-cta{padding:70px 0;background:#fff}.lp-cta-box{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,var(--bs-primary),#111827);color:#fff;border-radius:34px;padding:38px;box-shadow:0 22px 60px rgba(var(--bs-primary-rgb),.22)}.lp-cta-box h2{font-weight:800;margin-bottom:.4rem}.lp-cta-box p{margin:0;color:rgba(255,255,255,.82)}.lp-footer{padding:28px 0;background:#0f172a;color:#cbd5e1}.lp-footer a{color:#fff;text-decoration:none;font-weight:700}@media(max-width:991.98px){.lp-hero{min-height:auto;padding:120px 0 90px}.min-vh-75{min-height:auto}.lp-floating-card{position:static;margin:.75rem auto 0;justify-content:center;max-width:230px}.lp-stats{margin-top:0;padding-top:40px}.lp-cta-box{display:block;text-align:center}.lp-cta-box .btn{margin-top:18px}.lp-section{padding:65px 0}.lp-title{font-size:2.45rem}}@media(max-width:575.98px){.lp-hero-card{padding:18px;border-radius:24px}.lp-stat-card{padding:22px}.lp-feature-card,.lp-testimonial{padding:22px}.lp-cta-box{padding:26px;border-radius:24px}.lp-navbar{background:rgba(15,23,42,.9)}}

/* Perbaikan Tabel di Layar Mobile (Bisa di-scroll ke samping) */
.table-responsive .table {
    white-space: nowrap;
}
.table-responsive .table td.service-text-clamp {
    white-space: normal; /* Biarkan nama layanan tetap turun ke bawah agar rapi */
    min-width: 250px;
}

/* Sidebar refined logo & profile */
.vertical-menu .sidebar-menu-scroll{padding-bottom:0}
.sidebar-brand-wrap{padding:14px 14px 10px!important;display:flex;align-items:center;justify-content:flex-start;min-height:auto!important;height:auto!important}
.sidebar-brand-link{display:flex;align-items:center;gap:12px;text-decoration:none;width:100%}
.sidebar-logo-shell{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.sidebar-logo-mark{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 10px 24px rgba(13,23,42,.18);overflow:hidden}
.sidebar-logo-mark img{max-width:26px;max-height:26px;object-fit:contain}
.sidebar-brand-copy{display:flex;flex-direction:column;min-width:0}
.sidebar-brand-copy strong{font-size:.92rem;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.sidebar-brand-copy small{font-size:.68rem;line-height:1.3;color:rgba(255,255,255,.72)}
.sidebar-user-card{margin:10px 14px 10px;padding:12px;display:flex;align-items:center;gap:10px;border-radius:16px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.sidebar-user-avatar{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--bs-primary);font-weight:800;font-size:17px;box-shadow:0 7px 18px rgba(10,20,45,.16)}
.sidebar-user-info{min-width:0;display:flex;flex-direction:column;line-height:1.25;flex:1 1 auto}
.sidebar-user-info strong{font-size:.88rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:132px}
.sidebar-user-info span{font-size:.69rem;color:rgba(255,255,255,.68);margin-top:3px}
.sidebar-user-settings{margin-left:auto;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75)!important;background:rgba(255,255,255,.08);transition:.18s;text-decoration:none}
.sidebar-user-settings:hover{color:#fff!important;background:rgba(255,255,255,.18);transform:rotate(18deg)}
#sidebar-menu{padding:2px 10px 18px}
#sidebar-menu .menu-title{height:auto;padding:18px 10px 7px;margin:0;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.52)!important;font-size:.64rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;line-height:1}
#sidebar-menu .menu-title:first-child{padding-top:10px}
#sidebar-menu .menu-title-admin{margin-top:10px;padding-top:17px;border-top:1px solid rgba(255,255,255,.12)}
body[data-sidebar=dark] #sidebar-menu ul li>a{min-height:43px;margin:2px 0;padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.76);font-size:.86rem;font-weight:600;transition:background .18s,color .18s,transform .18s}
body[data-sidebar=dark] #sidebar-menu ul li>a i{width:23px;min-width:23px!important;font-size:20px!important;line-height:1;text-align:center;opacity:.9}
body[data-sidebar=dark] #sidebar-menu ul li>a:hover{background:rgba(255,255,255,.11);color:#fff!important;transform:translateX(2px)}
body[data-sidebar=dark] #sidebar-menu ul li.mm-active>a{background:#fff;color:var(--bs-primary)!important;box-shadow:0 9px 22px rgba(20,27,43,.16)}
body[data-sidebar=dark] #sidebar-menu ul li.mm-active>a i{color:var(--bs-primary)!important;opacity:1}
#sidebar-menu ul li.mm-active>a::before{display:none}
#sidebar-menu .has-arrow:after{right:14px;font-size:15px;opacity:.7}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu{padding:4px 0 6px 45px;margin:0}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a{position:relative;min-height:34px;margin:1px 0;padding:7px 10px 7px 15px;border-radius:9px;color:rgba(255,255,255,.65);font-size:.79rem;font-weight:500;line-height:1.35}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:before{content:"";position:absolute;left:1px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:rgba(255,255,255,.38);transition:.18s}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover{background:rgba(255,255,255,.08);color:#fff!important;transform:none}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li.mm-active>a{background:rgba(255,255,255,.12);color:#fff!important;box-shadow:none}
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li.mm-active>a:before{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.sidebar-footer{margin:8px 14px 14px;padding:13px 12px;border-radius:14px;background:rgba(0,0,0,.08);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.55);font-size:.67rem;line-height:1.5}
.sidebar-footer-brand{color:#fff;font-size:.76rem;font-weight:700;margin-bottom:2px}
@media(max-width:991.98px){.sidebar-user-card{margin-top:8px}.vertical-menu{box-shadow:16px 0 45px rgba(12,22,42,.22)}}

/* =========================================================
   UI 3D ringan + normalisasi mode terang/gelap
   Hanya tampilan internal; tidak mengubah proses bisnis.
   ========================================================= */
body[data-layout-mode]{
  --cz-page:#eef3f9;
  --cz-surface:#ffffff;
  --cz-surface-2:#f7f9fc;
  --cz-border:#e2e9f2;
  --cz-text:#172033;
  --cz-muted:#738096;
  --cz-shadow:0 12px 28px rgba(31,50,81,.08),0 2px 5px rgba(31,50,81,.05);
  --cz-shadow-strong:0 20px 45px rgba(31,50,81,.12),0 5px 12px rgba(31,50,81,.06);
  --cz-inset:inset 0 1px 0 rgba(255,255,255,.88);
  color-scheme:light;
  background:var(--cz-page)!important;
  color:var(--cz-text);
}
body[data-layout-mode=dark]{
  --cz-page:#0c1422;
  --cz-surface:#162235;
  --cz-surface-2:#1b2a40;
  --cz-border:#2a3b55;
  --cz-text:#edf3ff;
  --cz-muted:#a1aec2;
  --cz-shadow:0 14px 32px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.2);
  --cz-shadow-strong:0 22px 50px rgba(0,0,0,.38),0 6px 14px rgba(0,0,0,.23);
  --cz-inset:inset 0 1px 0 rgba(255,255,255,.055);
  color-scheme:dark;
  background:var(--cz-page)!important;
  color:var(--cz-text)!important;
}
body[data-layout-mode] .main-content,
body[data-layout-mode] .page-content{background:transparent!important}
body[data-layout-mode] .page-content{position:relative;isolation:isolate}
body[data-layout-mode] .page-content:before{content:"";position:fixed;z-index:-1;inset:72px 0 0 250px;pointer-events:none;background:radial-gradient(circle at 86% 8%,rgba(var(--bs-primary-rgb),.095),transparent 28%),radial-gradient(circle at 18% 95%,rgba(var(--bs-primary-rgb),.055),transparent 30%)}
body[data-layout-mode=dark] .page-content:before{background:radial-gradient(circle at 86% 8%,rgba(var(--bs-primary-rgb),.16),transparent 28%),radial-gradient(circle at 18% 95%,rgba(92,128,190,.08),transparent 30%)}

/* Permukaan dan kartu */
body[data-layout-mode] .card,
body[data-layout-mode] .modal-content,
body[data-layout-mode] .offcanvas,
body[data-layout-mode] .dropdown-menu,
body[data-layout-mode] .accordion-item,
body[data-layout-mode] .admin-tabs,
body[data-layout-mode] .api-doc-info-box{
  background:var(--cz-surface)!important;
  border:1px solid var(--cz-border)!important;
  box-shadow:var(--cz-shadow)!important;
  color:var(--cz-text)!important;
}
body[data-layout-mode] .card{border-radius:18px;overflow:hidden;box-shadow:var(--cz-shadow),var(--cz-inset)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
@media (hover:hover) and (pointer:fine){
  body[data-layout-mode] .card:not(.admin-tabs):hover{transform:translateY(-2px);box-shadow:var(--cz-shadow-strong),var(--cz-inset)!important;border-color:rgba(var(--bs-primary-rgb),.2)!important}
}
body[data-layout-mode] .card-header,
body[data-layout-mode] .card-footer{background:var(--cz-surface)!important;border-color:var(--cz-border)!important;color:var(--cz-text)!important}
body[data-layout-mode] .page-title,
body[data-layout-mode] h1,body[data-layout-mode] h2,body[data-layout-mode] h3,
body[data-layout-mode] h4,body[data-layout-mode] h5,body[data-layout-mode] h6,
body[data-layout-mode] .card-title,
body[data-layout-mode] .fw-bold,
body[data-layout-mode] .fw-semibold{color:var(--cz-text)}
body[data-layout-mode] .text-muted,
body[data-layout-mode] .card-title-desc,
body[data-layout-mode] small{color:var(--cz-muted)!important}

/* Form, select, filter, search */
body[data-layout-mode] .form-control,
body[data-layout-mode] .form-select,
body[data-layout-mode] .input-group-text,
body[data-layout-mode] .form-check-input,
body[data-layout-mode] .select2-container--default .select2-selection--single,
body[data-layout-mode] .select2-container--default .select2-selection--multiple{
  background-color:var(--cz-surface-2)!important;
  color:var(--cz-text)!important;
  border-color:var(--cz-border)!important;
  box-shadow:inset 0 2px 5px rgba(31,50,81,.035),0 1px 0 rgba(255,255,255,.55)!important;
}
body[data-layout-mode=dark] .form-control,
body[data-layout-mode=dark] .form-select,
body[data-layout-mode=dark] .input-group-text,
body[data-layout-mode=dark] .form-check-input{box-shadow:inset 0 2px 7px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.035)!important}
body[data-layout-mode] .form-control::placeholder{color:var(--cz-muted)!important;opacity:.8}
body[data-layout-mode] .form-control:focus,
body[data-layout-mode] .form-select:focus{background-color:var(--cz-surface)!important;color:var(--cz-text)!important;border-color:rgba(var(--bs-primary-rgb),.58)!important;box-shadow:0 0 0 3px rgba(var(--bs-primary-rgb),.13),inset 0 1px 2px rgba(0,0,0,.025)!important}
body[data-layout-mode=dark] select option{background:#18263a;color:#edf3ff}

/* Tabel */
body[data-layout-mode] .table{color:var(--cz-text)!important;border-color:var(--cz-border)!important}
body[data-layout-mode] .table>:not(caption)>*>*{background:transparent;color:inherit;border-color:var(--cz-border)!important}
body[data-layout-mode] .table thead th,
body[data-layout-mode] .table .table-light{background:var(--cz-surface-2)!important;color:var(--cz-muted)!important}
body[data-layout-mode] .table tbody tr{transition:background .15s ease,transform .15s ease}
body[data-layout-mode] .table-hover>tbody>tr:hover>*{background:rgba(var(--bs-primary-rgb),.055)!important;color:var(--cz-text)!important}
body[data-layout-mode=dark] .table-hover>tbody>tr:hover>*{background:rgba(var(--bs-primary-rgb),.12)!important}
body[data-layout-mode] .table-responsive{border-radius:16px;border:1px solid var(--cz-border);background:var(--cz-surface);box-shadow:0 8px 22px rgba(31,50,81,.045)}

/* Buttons: depth without heavy animation */
body[data-layout-mode] .btn{border-radius:11px;box-shadow:0 5px 12px rgba(31,50,81,.08),inset 0 1px 0 rgba(255,255,255,.34);transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
@media (hover:hover) and (pointer:fine){body[data-layout-mode] .btn:hover{transform:translateY(-1px);box-shadow:0 8px 17px rgba(31,50,81,.13),inset 0 1px 0 rgba(255,255,255,.38)}}
body[data-layout-mode] .btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(31,50,81,.1),inset 0 2px 3px rgba(0,0,0,.08)}
body[data-layout-mode=dark] .btn-light{background:#22334b!important;border-color:#30435f!important;color:#eaf1fc!important}
body[data-layout-mode=dark] .btn-light:hover{background:#293d59!important}

/* Dark-mode anomaly fixes */
body[data-layout-mode=dark] #page-topbar,
body[data-layout-mode=dark] .navbar-header{background:#111c2d!important;border-color:#263750!important}
body[data-layout-mode=dark] .header-item,
body[data-layout-mode=dark] .header-item i{color:#dce7f8!important}
body[data-layout-mode=dark] .dropdown-item{color:#d6e1f1!important}
body[data-layout-mode=dark] .dropdown-item:hover{background:#243750!important;color:#fff!important}
body[data-layout-mode=dark] .alert{background:#1b2a40!important;color:#e8effb!important;border-color:#30445f!important}
body[data-layout-mode=dark] .accordion-button{background:#18263a!important;color:#edf3ff!important;box-shadow:none!important}
body[data-layout-mode=dark] .accordion-button:not(.collapsed){background:#20334d!important;color:#fff!important}
body[data-layout-mode=dark] .accordion-body{background:#162235!important;color:#c9d5e7!important}
body[data-layout-mode=dark] .modal-header,
body[data-layout-mode=dark] .modal-footer{border-color:#2a3b55!important}
body[data-layout-mode=dark] .btn-close{filter:invert(1) grayscale(1)}
body[data-layout-mode=dark] .nav-tabs,
body[data-layout-mode=dark] .border,
body[data-layout-mode=dark] .border-top,
body[data-layout-mode=dark] .border-bottom,
body[data-layout-mode=dark] hr{border-color:#2a3b55!important}
body[data-layout-mode=dark] .nav-link{color:#aebbd0}
body[data-layout-mode=dark] .nav-link.active{color:#fff!important}
body[data-layout-mode=dark] code{color:#ff9cbf}
body[data-layout-mode=dark] pre,
body[data-layout-mode=dark] .api-doc-code{background:#09111e!important;color:#dfe8f5!important;border:1px solid #263850}
body[data-layout-mode=dark] .mobile-bottom-nav{background:#142136!important;border-top:1px solid #2a3b55!important;box-shadow:0 -9px 28px rgba(0,0,0,.3)!important}
body[data-layout-mode=dark] .mobile-bottom-nav .nav-item{color:#95a5bc!important}
body[data-layout-mode=dark] .mobile-bottom-nav .nav-item.active{color:#fff!important;background:rgba(var(--bs-primary-rgb),.22)}

/* Menjaga sidebar konsisten di kedua mode */
body[data-layout-mode=dark][data-sidebar=dark] .vertical-menu,
body[data-layout-mode=dark][data-sidebar=dark] .navbar-brand-box{background-color:var(--bs-primary)!important}

@media(max-width:991.98px){
  body[data-layout-mode] .page-content:before{inset:70px 0 0 0}
  body[data-layout-mode] .card{border-radius:15px}
  body[data-layout-mode] .card:hover{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  body[data-layout-mode] .card,body[data-layout-mode] .btn,body[data-layout-mode] .table tbody tr{transition:none!important;transform:none!important}
}

/* =========================================================
   THEME V2 — default light, dark mode konsisten, UI 3D rapi
   ========================================================= */
html[data-bs-theme="light"],
body[data-layout-mode="light"]{
  color-scheme:light!important;
}
body[data-layout-mode="light"],
body[data-layout-mode="light"] #layout-wrapper,
body[data-layout-mode="light"] .main-content,
body[data-layout-mode="light"] .page-content{
  background:#f3f6fb!important;
  color:#172033!important;
}
body[data-layout-mode="light"] #page-topbar,
body[data-layout-mode="light"] .navbar-header{
  background:#ffffff!important;
  border-bottom:1px solid #e7edf5!important;
  box-shadow:0 5px 18px rgba(31,50,81,.05)!important;
}
body[data-layout-mode="light"] .header-item,
body[data-layout-mode="light"] .header-item i,
body[data-layout-mode="light"] .page-title{color:#263249!important}
body[data-layout-mode="light"] .card,
body[data-layout-mode="light"] .bg-white,
body[data-layout-mode="light"] .list-group-item,
body[data-layout-mode="light"] .dropdown-menu,
body[data-layout-mode="light"] .modal-content,
body[data-layout-mode="light"] .accordion-item{
  background:#fff!important;
  color:#172033!important;
  border-color:#e3eaf3!important;
}
body[data-layout-mode="light"] .card-header,
body[data-layout-mode="light"] .card-footer{
  background:#fff!important;
  border-color:#e7edf5!important;
}
body[data-layout-mode="light"] .text-dark,
body[data-layout-mode="light"] .text-body{color:#172033!important}
body[data-layout-mode="light"] .text-muted{color:#748197!important}

/* Mode gelap: semua permukaan mengikuti satu palet, tidak campur putih-gelap */
html[data-bs-theme="dark"],body[data-layout-mode="dark"]{color-scheme:dark!important}
body[data-layout-mode="dark"],
body[data-layout-mode="dark"] #layout-wrapper,
body[data-layout-mode="dark"] .main-content,
body[data-layout-mode="dark"] .page-content{
  background:#0f1828!important;
  color:#e7eef9!important;
}
body[data-layout-mode="dark"] #page-topbar,
body[data-layout-mode="dark"] .navbar-header{
  background:#162236!important;
  border-bottom:1px solid #293a54!important;
  box-shadow:0 6px 20px rgba(0,0,0,.2)!important;
}
body[data-layout-mode="dark"] .card,
body[data-layout-mode="dark"] .bg-white,
body[data-layout-mode="dark"] .bg-light,
body[data-layout-mode="dark"] .list-group-item,
body[data-layout-mode="dark"] .dropdown-menu,
body[data-layout-mode="dark"] .modal-content,
body[data-layout-mode="dark"] .offcanvas,
body[data-layout-mode="dark"] .accordion-item,
body[data-layout-mode="dark"] .api-doc-info-box,
body[data-layout-mode="dark"] .table-responsive{
  background:#18253a!important;
  color:#e7eef9!important;
  border-color:#2d405d!important;
}
body[data-layout-mode="dark"] .card-header,
body[data-layout-mode="dark"] .card-footer,
body[data-layout-mode="dark"] .table thead th,
body[data-layout-mode="dark"] .table .table-light{
  background:#1d2c43!important;
  color:#b7c4d8!important;
  border-color:#2d405d!important;
}
body[data-layout-mode="dark"] .text-dark,
body[data-layout-mode="dark"] .text-body,
body[data-layout-mode="dark"] .card-title,
body[data-layout-mode="dark"] .fw-bold,
body[data-layout-mode="dark"] .fw-semibold,
body[data-layout-mode="dark"] h1,
body[data-layout-mode="dark"] h2,
body[data-layout-mode="dark"] h3,
body[data-layout-mode="dark"] h4,
body[data-layout-mode="dark"] h5,
body[data-layout-mode="dark"] h6{color:#eef4ff!important}
body[data-layout-mode="dark"] .text-muted,
body[data-layout-mode="dark"] small,
body[data-layout-mode="dark"] .card-title-desc{color:#9dacbf!important}
body[data-layout-mode="dark"] .border,
body[data-layout-mode="dark"] .border-top,
body[data-layout-mode="dark"] .border-bottom,
body[data-layout-mode="dark"] hr{border-color:#2d405d!important}
body[data-layout-mode="dark"] .form-control,
body[data-layout-mode="dark"] .form-select,
body[data-layout-mode="dark"] .input-group-text{
  background:#132033!important;
  color:#eef4ff!important;
  border-color:#30445f!important;
}
body[data-layout-mode="dark"] .form-control::placeholder{color:#8291a8!important}
body[data-layout-mode="dark"] .table>:not(caption)>*>*{color:#dce6f4!important;border-color:#2d405d!important}
body[data-layout-mode="dark"] .table-hover>tbody>tr:hover>*{background:#20314a!important;color:#fff!important}
body[data-layout-mode="dark"] .dropdown-item{color:#dce6f4!important}
body[data-layout-mode="dark"] .dropdown-item:hover{background:#243750!important;color:#fff!important}
body[data-layout-mode="dark"] .btn-light{background:#22334b!important;border-color:#344a68!important;color:#edf3ff!important}
body[data-layout-mode="dark"] .badge.bg-light{background:#263a55!important;color:#e8f0fc!important}

/* Sidebar tetap kontras di mode apa pun */
body[data-sidebar="dark"] #sidebar-menu ul li>a,
body[data-sidebar="dark"] #sidebar-menu ul li>a span,
body[data-sidebar="dark"] #sidebar-menu ul li>a i{
  color:rgba(255,255,255,.82)!important;
}
body[data-sidebar="dark"] #sidebar-menu ul li>a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li>a:hover span,
body[data-sidebar="dark"] #sidebar-menu ul li>a:hover i{color:#fff!important}
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active>a,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active>a span,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active>a i{
  color:var(--bs-primary)!important;
}
body[data-sidebar="dark"] #sidebar-menu ul.sub-menu li>a,
body[data-sidebar="dark"] #sidebar-menu ul.sub-menu li>a span{color:rgba(255,255,255,.68)!important}
body[data-sidebar="dark"] #sidebar-menu ul.sub-menu li.mm-active>a,
body[data-sidebar="dark"] #sidebar-menu ul.sub-menu li.mm-active>a span{color:#fff!important}

/* 3D dipertahankan tetapi lebih natural */
body[data-layout-mode] .card{
  box-shadow:0 10px 24px rgba(29,48,78,.08),0 2px 6px rgba(29,48,78,.04),inset 0 1px 0 rgba(255,255,255,.62)!important;
}
body[data-layout-mode="dark"] .card{
  box-shadow:0 13px 28px rgba(0,0,0,.24),0 3px 8px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body[data-layout-mode] .btn{box-shadow:0 4px 10px rgba(29,48,78,.08),inset 0 1px 0 rgba(255,255,255,.28)!important}
@media (hover:hover) and (pointer:fine){
  body[data-layout-mode] .card:not(.admin-tabs):hover{transform:translateY(-1px)!important}
}


/* Mobile layer priority: sidebar above floating footer */
@media(max-width:991.98px){
  .mobile-bottom-nav{z-index:1020!important}
  body.sidebar-enable::before{z-index:1290!important}
  body.sidebar-enable .vertical-menu,.vertical-menu{z-index:1300!important}
  body.sidebar-enable #page-topbar{z-index:1100!important}
}


/* Sinkronisasi logo database dan preview admin */
.setting-preview-box{position:relative;display:flex;align-items:center;justify-content:center;min-height:118px;max-width:240px;padding:12px;border:1px solid rgba(128,145,170,.22);border-radius:15px;background:linear-gradient(145deg,rgba(248,250,253,.96),rgba(237,242,249,.9));overflow:hidden}
.setting-preview-img{display:block!important;width:auto!important;height:auto!important;max-width:198px!important;max-height:92px!important;object-fit:contain!important;margin:0 auto!important}
.setting-preview-open{position:absolute;right:8px;bottom:8px;padding:4px 8px;border-radius:8px;background:rgba(15,23,42,.75);color:#fff!important;font-size:.68rem;text-decoration:none;backdrop-filter:blur(5px)}
.setting-preview-open:hover{background:var(--bs-primary);color:#fff!important}
.header-profile-user{width:38px!important;height:38px!important;padding:5px!important;object-fit:contain!important;background:#fff!important;border:2px solid rgba(var(--bs-primary-rgb),.28)!important;box-shadow:0 5px 15px rgba(15,23,42,.12)}
[data-bs-theme="dark"] .setting-preview-box,body.dark-mode .setting-preview-box{background:linear-gradient(145deg,#26364b,#1d2b3e);border-color:rgba(255,255,255,.12)}


/* Theme v3: hamburger polos dan sidebar gelap netral */
.topnav-hamburger-custom,
.topnav-hamburger-custom:hover,
.topnav-hamburger-custom:focus,
.topnav-hamburger-custom:active,
.vertical-menu .topnav-hamburger,
.vertical-menu .topnav-hamburger:hover,
.vertical-menu .topnav-hamburger:focus,
.vertical-menu .topnav-hamburger:active{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.topnav-hamburger-custom .hamburger-icon,
.vertical-menu .topnav-hamburger .hamburger-icon{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.topnav-hamburger-custom .hamburger-icon span{
  background:#536174!important;
}
body[data-layout-mode="dark"] .topnav-hamburger-custom .hamburger-icon span{
  background:#dbe5f3!important;
}

/* Saat dark mode, sidebar tidak mengikuti warna utama website */
body[data-layout-mode="dark"][data-sidebar="dark"],
body[data-layout-mode="dark"][data-sidebar="dark"] .vertical-menu,
body[data-layout-mode="dark"][data-sidebar="dark"] .navbar-brand-box,
body[data-layout-mode="dark"][data-sidebar="dark"] .vertical-menu::before{
  background:#0b1220!important;
  border-color:#1f2d43!important;
}
body[data-layout-mode="dark"][data-sidebar="dark"] .sidebar-brand-wrap{
  background:#0b1220!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
body[data-layout-mode="dark"][data-sidebar="dark"] .sidebar-logo-shell{
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:none!important;
}
body[data-layout-mode="dark"][data-sidebar="dark"] .sidebar-user-card{
  background:#121d2e!important;
  border-color:#26364d!important;
  box-shadow:none!important;
}
body[data-layout-mode="dark"][data-sidebar="dark"] .sidebar-user-settings{
  background:#1a293d!important;
}
body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu ul li>a:hover{
  background:#162337!important;
  color:#fff!important;
}
body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu ul li.mm-active>a{
  background:#1c2b41!important;
  color:#fff!important;
  box-shadow:none!important;
}
body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu ul li.mm-active>a span,
body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu ul li.mm-active>a i{
  color:#fff!important;
}
body[data-layout-mode="dark"][data-sidebar="dark"] #sidebar-menu ul.sub-menu li.mm-active>a{
  background:#162337!important;
  color:#fff!important;
}
body[data-layout-mode="dark"][data-sidebar="dark"] .sidebar-footer{
  background:#101a2a!important;
  border-color:#223149!important;
}


/* Header mobile clean v4: tanpa kotak/border, logo selalu terlihat */
#page-topbar,
#page-topbar .navbar-header{
  border:0!important;
  box-shadow:none!important;
}
#page-topbar .header-item,
#page-topbar .header-item:hover,
#page-topbar .header-item:focus,
#page-topbar .header-item:active,
#page-topbar .btn,
#page-topbar .btn:hover,
#page-topbar .btn:focus,
#page-topbar .btn:active{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}
#page-topbar .dropdown,
#page-topbar .d-inline-block{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
#page-topbar .header-profile-user{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:3px!important;
}
.mobile-header-logo{
  width:46px;
  height:46px;
  margin-left:10px;
  margin-right:4px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  box-shadow:none;
  text-decoration:none;
  overflow:hidden;
  flex:0 0 46px;
}
.mobile-header-logo img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}
body[data-layout-mode="dark"] .mobile-header-logo{
  background:#f8fafc!important;
}
body[data-sidebar="dark"] .sidebar-brand-copy strong{
  color:#fff!important;
}
body[data-sidebar="dark"] .sidebar-brand-copy small{
  color:rgba(255,255,255,.84)!important;
  opacity:1!important;
}
@media(max-width:991.98px){
  #page-topbar .navbar-header{
    min-height:64px!important;
    padding-left:0!important;
    padding-right:8px!important;
  }
  #page-topbar .topnav-hamburger-custom{
    margin-left:2px!important;
  }
  #page-topbar .page-title{
    display:none!important;
  }
}

/* =========================================================
   Mode terang: seluruh area konten putih, tanpa background abu-abu
   Sidebar tetap memakai warna brand.
   ========================================================= */
body[data-layout-mode="light"]{
  --cz-page:#ffffff;
  --cz-surface:#ffffff;
  --cz-surface-2:#ffffff;
  --cz-border:#e8edf4;
  background:#ffffff!important;
}
body[data-layout-mode="light"] .main-content,
body[data-layout-mode="light"] .page-content,
body[data-layout-mode="light"] .container-fluid,
body[data-layout-mode="light"] #layout-wrapper,
body[data-layout-mode="light"] .dashboard-page,
body[data-layout-mode="light"] .dashboard-shell,
body[data-layout-mode="light"] .content-wrapper{
  background:#ffffff!important;
}
body[data-layout-mode="light"] .page-content:before{
  display:none!important;
  background:none!important;
}
body[data-layout-mode="light"] #page-topbar,
body[data-layout-mode="light"] .navbar-header{
  background:#ffffff!important;
  border-color:#edf1f6!important;
  box-shadow:0 5px 18px rgba(20,27,43,.035)!important;
}
body[data-layout-mode="light"] .card,
body[data-layout-mode="light"] .card-header,
body[data-layout-mode="light"] .card-footer,
body[data-layout-mode="light"] .modal-content,
body[data-layout-mode="light"] .dropdown-menu,
body[data-layout-mode="light"] .accordion-item,
body[data-layout-mode="light"] .accordion-button,
body[data-layout-mode="light"] .accordion-body,
body[data-layout-mode="light"] .admin-tabs,
body[data-layout-mode="light"] .api-doc-info-box,
body[data-layout-mode="light"] .table-responsive,
body[data-layout-mode="light"] .table,
body[data-layout-mode="light"] .table>:not(caption)>*>*,
body[data-layout-mode="light"] .table thead th,
body[data-layout-mode="light"] .table .table-light,
body[data-layout-mode="light"] .list-group-item,
body[data-layout-mode="light"] .ticket-thread,
body[data-layout-mode="light"] .ticket-bubble.admin{
  background:#ffffff!important;
}
body[data-layout-mode="light"] .form-control,
body[data-layout-mode="light"] .form-select,
body[data-layout-mode="light"] .input-group-text,
body[data-layout-mode="light"] .select2-container--default .select2-selection--single,
body[data-layout-mode="light"] .select2-container--default .select2-selection--multiple{
  background-color:#ffffff!important;
}
body[data-layout-mode="light"] .table-hover>tbody>tr:hover>*{
  background:#fbfdff!important;
}
body[data-layout-mode="light"] .mobile-bottom-nav{
  background:#ffffff!important;
}

/* Stable layout rollback: remove curve/unified shell overrides */
#page-topbar .navbar-header::before,
#page-topbar .navbar-header::after,
.main-content > .page-content::before,
.main-content > .page-content::after{
  content:none!important;
  display:none!important;
}
body[data-layout-mode="light"] #layout-wrapper,
body[data-layout-mode="light"] .main-content,
body[data-layout-mode="light"] .page-content,
body[data-layout-mode="light"] .container-fluid{
  background:#fff!important;
}
body[data-layout-mode="light"] #page-topbar,
body[data-layout-mode="light"] #page-topbar .navbar-header{
  background:#fff!important;
  border:0!important;
  box-shadow:none!important;
}
#page-topbar .page-title{
  color:#1f2a44!important;
  opacity:1!important;
  visibility:visible!important;
}
.main-content > .page-content{
  border-radius:0!important;
  overflow:visible!important;
}


/* ===== Curved shell layout v2: safe and visible ===== */
:root{--cutie-shell-radius:38px;--cutie-topbar-h:72px;}

/* desktop light mode: blue header + white curved content */
@media (min-width: 992px){
  body[data-layout-mode="light"]{
    background:var(--bs-primary)!important;
  }
  body[data-layout-mode="light"] #layout-wrapper,
  body[data-layout-mode="light"] .main-content{
    background:var(--bs-primary)!important;
  }
  body[data-layout-mode="light"] #page-topbar,
  body[data-layout-mode="light"] #page-topbar .navbar-header{
    background:var(--bs-primary)!important;
    box-shadow:none!important;
    min-height:var(--cutie-topbar-h)!important;
    height:var(--cutie-topbar-h)!important;
    border:none!important;
  }

  /* restore visibility of title + icons in header */
  body[data-layout-mode="light"] #page-topbar .d-none.d-sm-block.ms-3.align-self-center{
    display:flex!important;
    align-items:center!important;
  }
  body[data-layout-mode="light"] #page-topbar .page-title{
    display:block!important;
    margin:0!important;
    padding:0!important;
    color:#ffffff!important;
    font-size:1.55rem!important;
    line-height:1.1!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
    background:transparent!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
  body[data-layout-mode="light"] #page-topbar .header-item,
  body[data-layout-mode="light"] #page-topbar .header-item i,
  body[data-layout-mode="light"] #page-topbar .noti-icon i,
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom,
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom .hamburger-icon span{
    color:#ffffff!important;
    background-color:currentColor;
    opacity:1!important;
  }
  body[data-layout-mode="light"] #page-topbar .header-item,
  body[data-layout-mode="light"] #page-topbar .header-item.user,
  body[data-layout-mode="light"] #page-topbar .noti-icon{
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
  }
  body[data-layout-mode="light"] #page-topbar .header-profile-user{
    background:#ffffff!important;
    border:2px solid rgba(255,255,255,.38)!important;
    box-shadow:none!important;
  }

  /* the curved white content shell */
  body[data-layout-mode="light"] .main-content{
    padding-top:0!important;
  }
  body[data-layout-mode="light"] .page-content{
    background:#ffffff!important;
    border-top-left-radius:var(--cutie-shell-radius)!important;
    border-top-right-radius:0!important;
    min-height:calc(100vh - var(--cutie-topbar-h))!important;
    margin-top:0!important;
    padding-top:0!important;
    box-shadow:0 16px 40px rgba(14,24,56,.08)!important;
    overflow:hidden!important;
  }
  body[data-layout-mode="light"] .container-fluid{
    background:#ffffff!important;
    min-height:calc(100vh - var(--cutie-topbar-h))!important;
    padding:20px 24px 28px!important;
  }
  /* add opposite curve at bottom-left of whole shell */
  body[data-layout-mode="light"] .page-content{
    border-bottom-left-radius:var(--cutie-shell-radius)!important;
  }
  /* hide duplicate inner title box only on dashboard-like pages if used */
  body[data-layout-mode="light"] .page-title-box{display:none!important;}
}

/* keep everything white and readable inside shell */
body[data-layout-mode="light"] .page-content,
body[data-layout-mode="light"] .container-fluid,
body[data-layout-mode="light"] .card,
body[data-layout-mode="light"] .admin-tabs,
body[data-layout-mode="light"] .table,
body[data-layout-mode="light"] .table-responsive,
body[data-layout-mode="light"] .modal-content,
body[data-layout-mode="light"] .accordion-item,
body[data-layout-mode="light"] .dropdown-menu{
  background:#ffffff!important;
}

/* mobile: no curve tricks, just keep readable */
@media (max-width: 991.98px){
  body[data-layout-mode="light"] #page-topbar,
  body[data-layout-mode="light"] #page-topbar .navbar-header{
    background:#ffffff!important;
  }
  body[data-layout-mode="light"] #page-topbar .header-item,
  body[data-layout-mode="light"] #page-topbar .header-item i,
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom .hamburger-icon span{
    color:#22304f!important;
  }
  body[data-layout-mode="light"] .page-content,
  body[data-layout-mode="light"] .container-fluid{
    background:#ffffff!important;
    border-radius:0!important;
  }
}

/* dark mode: neutral dark sidebar stays intact */
body[data-layout-mode="dark"] .page-content{
  border-top-left-radius:var(--cutie-shell-radius)!important;
  border-bottom-left-radius:var(--cutie-shell-radius)!important;
  overflow:hidden!important;
}


/* ===== Desktop header polish v3 ===== */
@media (min-width: 992px){
  /* keep desktop topbar clean and aligned */
  body[data-layout-mode="light"] #page-topbar,
  body[data-layout-mode="light"] #page-topbar .navbar-header{
    background:var(--bs-primary)!important;
    box-shadow:none!important;
    border:none!important;
  }
  /* remove empty white placeholder blocks in the blue header */
  body[data-layout-mode="light"] #page-topbar .navbar-header > .d-none.d-sm-block.ms-3.align-self-center:empty,
  body[data-layout-mode="light"] #page-topbar .navbar-header > .d-none.d-sm-block.me-3:empty,
  body[data-layout-mode="light"] #page-topbar .navbar-header > .d-none.d-sm-block:empty,
  body[data-layout-mode="light"] #page-topbar .navbar-header > .ms-3:empty,
  body[data-layout-mode="light"] #page-topbar .navbar-header > .me-3:empty{
    display:none!important;
  }
  /* title must be white and fully visible */
  body[data-layout-mode="light"] #page-topbar .page-title,
  body[data-layout-mode="light"] #page-topbar h4.page-title,
  body[data-layout-mode="light"] #page-topbar .page-title-box h4,
  body[data-layout-mode="light"] #page-topbar .page-title-right,
  body[data-layout-mode="light"] #page-topbar .page-title-sub,
  body[data-layout-mode="light"] #page-topbar .title-desc{
    color:#ffffff!important;
    opacity:1!important;
    visibility:visible!important;
    text-shadow:none!important;
  }
  /* the left arrow / hamburger must be white */
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom,
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom i,
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom svg,
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom .hamburger-icon span,
  body[data-layout-mode="light"] #page-topbar .vertical-menu-btn,
  body[data-layout-mode="light"] #page-topbar .vertical-menu-btn i,
  body[data-layout-mode="light"] #page-topbar .vertical-menu-btn svg,
  body[data-layout-mode="light"] #page-topbar .vertical-menu-btn .hamburger-icon span,
  body[data-layout-mode="light"] #page-topbar .bx-menu-alt-left,
  body[data-layout-mode="light"] #page-topbar .ri-menu-line,
  body[data-layout-mode="light"] #page-topbar .mdi-menu,
  body[data-layout-mode="light"] #page-topbar .mdi-arrow-left,
  body[data-layout-mode="light"] #page-topbar .bx-arrow-back,
  body[data-layout-mode="light"] #page-topbar .fa-arrow-left{
    color:#ffffff!important;
    fill:#ffffff!important;
    stroke:#ffffff!important;
  }
  body[data-layout-mode="light"] #page-topbar .vertical-menu-btn,
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom{
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
  }
  /* top-right logo/avatar should stay visible with white circular background */
  body[data-layout-mode="light"] #page-topbar .header-profile-user,
  body[data-layout-mode="light"] #page-topbar .topbar-user .avatar-title,
  body[data-layout-mode="light"] #page-topbar .app-logo-topbar,
  body[data-layout-mode="light"] #page-topbar .header-logo,
  body[data-layout-mode="light"] #page-topbar .topbar-logo{
    background:#ffffff!important;
    border:2px solid rgba(255,255,255,.45)!important;
    box-shadow:none!important;
    border-radius:999px!important;
  }
  body[data-layout-mode="light"] #page-topbar .header-profile-user img,
  body[data-layout-mode="light"] #page-topbar .app-logo-topbar img,
  body[data-layout-mode="light"] #page-topbar .header-logo img,
  body[data-layout-mode="light"] #page-topbar .topbar-logo img{
    filter:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
  /* dark logo variant inside blue header is not readable: hide it if duplicated, show only image user/logo bubble */
  body[data-layout-mode="light"] #page-topbar .logo-dark,
  body[data-layout-mode="light"] #page-topbar .brand-dark,
  body[data-layout-mode="light"] #page-topbar .header-logo-dark{
    display:none!important;
  }
  /* right header icons white */
  body[data-layout-mode="light"] #page-topbar .header-item,
  body[data-layout-mode="light"] #page-topbar .header-item i,
  body[data-layout-mode="light"] #page-topbar .noti-icon i,
  body[data-layout-mode="light"] #page-topbar .ri-moon-line,
  body[data-layout-mode="light"] #page-topbar .mdi-weather-night,
  body[data-layout-mode="light"] #page-topbar .bx-moon{
    color:#ffffff!important;
  }
  /* avoid blue shell covering title area */
  body[data-layout-mode="light"] .container-fluid{padding-top:18px!important;}
}


/* ===== Header micro-fix: white arrow + plain theme toggle ===== */
@media (min-width: 992px){
  /* left arrow / collapse button pure white */
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom,
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom i,
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom svg,
  body[data-layout-mode="light"] #page-topbar .vertical-menu-btn,
  body[data-layout-mode="light"] #page-topbar .vertical-menu-btn i,
  body[data-layout-mode="light"] #page-topbar .vertical-menu-btn svg,
  body[data-layout-mode="light"] #page-topbar .bx-arrow-back,
  body[data-layout-mode="light"] #page-topbar .bx-menu-alt-left,
  body[data-layout-mode="light"] #page-topbar .ri-arrow-left-line,
  body[data-layout-mode="light"] #page-topbar .ri-menu-line,
  body[data-layout-mode="light"] #page-topbar .mdi-arrow-left,
  body[data-layout-mode="light"] #page-topbar .mdi-menu,
  body[data-layout-mode="light"] #page-topbar .fa-arrow-left,
  body[data-layout-mode="light"] #page-topbar .fa-bars,
  body[data-layout-mode="light"] #page-topbar [class*="arrow"]{
    color:#ffffff!important;
    fill:#ffffff!important;
    stroke:#ffffff!important;
    opacity:1!important;
  }
  body[data-layout-mode="light"] #page-topbar .topnav-hamburger-custom .hamburger-icon span,
  body[data-layout-mode="light"] #page-topbar .vertical-menu-btn .hamburger-icon span{
    background:#ffffff!important;
  }

  /* dark/light toggle without background */
  body[data-layout-mode="light"] #page-topbar .header-item.dark-light,
  body[data-layout-mode="light"] #page-topbar .dark-light,
  body[data-layout-mode="light"] #page-topbar .light-dark-mode,
  body[data-layout-mode="light"] #page-topbar .theme-toggle,
  body[data-layout-mode="light"] #page-topbar .header-item.btn-ghost-secondary,
  body[data-layout-mode="light"] #page-topbar .header-item.rounded-circle{
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
    color:#ffffff!important;
  }
  body[data-layout-mode="light"] #page-topbar .header-item.dark-light i,
  body[data-layout-mode="light"] #page-topbar .dark-light i,
  body[data-layout-mode="light"] #page-topbar .light-dark-mode i,
  body[data-layout-mode="light"] #page-topbar .theme-toggle i,
  body[data-layout-mode="light"] #page-topbar .ri-moon-line,
  body[data-layout-mode="light"] #page-topbar .mdi-weather-night,
  body[data-layout-mode="light"] #page-topbar .bx-moon,
  body[data-layout-mode="light"] #page-topbar .ri-sun-line,
  body[data-layout-mode="light"] #page-topbar .mdi-white-balance-sunny,
  body[data-layout-mode="light"] #page-topbar .bx-sun{
    color:#ffffff!important;
    fill:#ffffff!important;
    stroke:#ffffff!important;
  }
}


/* =========================================================
   FINAL UI FIX 2026-07-14
   1) logo sidebar mobile centered in a white circle
   2) page content starts safely below the fixed header
   3) light/dark toggle remains visible in every theme
   ========================================================= */
.theme-toggle-wrap{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
}
#page-topbar .theme-mode-toggle{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  padding:0!important;
  margin:0 4px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  position:relative!important;
  z-index:2!important;
  overflow:visible!important;
}
#page-topbar .theme-mode-toggle i{
  display:block!important;
  width:auto!important;
  height:auto!important;
  line-height:1!important;
  font-size:22px!important;
  position:relative!important;
  z-index:3!important;
  opacity:1!important;
  visibility:visible!important;
}
body[data-layout-mode="light"] #page-topbar .theme-mode-toggle{
  background:rgba(255,255,255,.18)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 5px 14px rgba(15,30,70,.14)!important;
}
body[data-layout-mode="light"] #page-topbar .theme-mode-toggle i{
  color:#fff!important;
  fill:#fff!important;
  stroke:#fff!important;
}
body[data-layout-mode="dark"] #page-topbar .theme-mode-toggle{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.20)!important;
}
body[data-layout-mode="dark"] #page-topbar .theme-mode-toggle i{
  color:#ffd76a!important;
  fill:#ffd76a!important;
  stroke:#ffd76a!important;
}

/* Fixed topbar must never cover the first content block. */
@media (min-width:992px){
  body .main-content > .page-content{
    padding-top:calc(var(--cutie-topbar-h, 72px) + 18px)!important;
  }
  body .main-content > .page-content > .container-fluid{
    padding-top:22px!important;
  }
}

@media (max-width:991.98px){
  /* Mobile sidebar brand: lower, centered, and clearly visible. */
  .vertical-menu .sidebar-brand-wrap{
    min-height:132px!important;
    padding:26px 16px 14px!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .vertical-menu .sidebar-brand-link{
    width:100%!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    text-align:center!important;
  }
  .vertical-menu .sidebar-logo-shell{
    width:70px!important;
    height:70px!important;
    flex:0 0 70px!important;
    margin:0 auto!important;
    background:#fff!important;
    border:0!important;
    border-radius:50%!important;
    box-shadow:0 10px 26px rgba(10,20,45,.20)!important;
  }
  .vertical-menu .sidebar-logo-mark{
    width:58px!important;
    height:58px!important;
    background:#fff!important;
    border-radius:50%!important;
    box-shadow:none!important;
  }
  .vertical-menu .sidebar-logo-mark img{
    max-width:40px!important;
    max-height:40px!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .vertical-menu .sidebar-brand-copy{
    width:100%!important;
    align-items:center!important;
    text-align:center!important;
  }
  .vertical-menu .sidebar-brand-copy strong,
  .vertical-menu .sidebar-brand-copy small{
    max-width:210px!important;
    text-align:center!important;
  }

  body .main-content > .page-content{
    padding-top:88px!important;
  }
  body .main-content > .page-content > .container-fluid{
    padding-top:14px!important;
  }

  /* On the white mobile header, use a pale circle and dark moon icon. */
  body[data-layout-mode="light"] #page-topbar .theme-mode-toggle{
    background:#eef3f8!important;
    border:1px solid #dce5ef!important;
    box-shadow:0 4px 12px rgba(31,50,81,.10)!important;
  }
  body[data-layout-mode="light"] #page-topbar .theme-mode-toggle i{
    color:#263249!important;
    fill:#263249!important;
    stroke:#263249!important;
  }
  #page-topbar .theme-mode-toggle{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    margin:0 2px!important;
  }
}

/* =========================================================
   PATCH 2026-07-14: ICON TEMA SVG + ACCORDION SIDEBAR STABIL
   ========================================================= */
#page-topbar .theme-mode-toggle .theme-icon{
  width:23px!important;
  height:23px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:inherit!important;
  position:relative!important;
  z-index:4!important;
  pointer-events:none!important;
}
#page-topbar .theme-mode-toggle .theme-icon svg{
  width:23px!important;
  height:23px!important;
  display:block!important;
  overflow:visible!important;
}
#page-topbar .theme-mode-toggle .theme-icon-moon path{
  fill:currentColor!important;
}
#page-topbar .theme-mode-toggle .theme-icon-sun circle{
  fill:currentColor!important;
}
#page-topbar .theme-mode-toggle .theme-icon-sun path{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
}
body[data-layout-mode="light"] #page-topbar .theme-icon-moon{
  display:inline-flex!important;
  color:#fff!important;
}
body[data-layout-mode="light"] #page-topbar .theme-icon-sun{
  display:none!important;
}
body[data-layout-mode="dark"] #page-topbar .theme-icon-moon{
  display:none!important;
}
body[data-layout-mode="dark"] #page-topbar .theme-icon-sun{
  display:inline-flex!important;
  color:#ffd76a!important;
}

/* Sidebar tidak lagi bergantung pada tinggi animasi inline MetisMenu. */
#side-menu > li > a.has-arrow{
  cursor:pointer!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
}
#side-menu > li > ul.sub-menu.mm-collapse{
  display:none!important;
  height:auto!important;
  overflow:visible!important;
}
#side-menu > li > ul.sub-menu.mm-collapse.mm-show{
  display:block!important;
  height:auto!important;
}

@media(max-width:991.98px){
  body[data-layout-mode="light"] #page-topbar .theme-icon-moon{
    color:#263249!important;
  }
  #side-menu > li > a.has-arrow{
    min-height:46px!important;
  }
}


/* =========================================================
   FIX FINAL SIDEBAR MINI DESKTOP — scoped, tanpa mengubah layout normal
   ========================================================= */
@media (min-width:992px){
  /* Batalkan tinggi 1570/1850px dari tema bawaan agar tidak ada scroll kosong. */
  body[data-sidebar-size="sm"]{
    min-height:100vh!important;
    height:auto!important;
  }
  body[data-sidebar-size="sm"] .main-content{
    min-height:100vh!important;
    height:auto!important;
  }

  /* Saat sidebar mini, area di belakang shell harus mengikuti warna konten,
     bukan warna brand. Sidebar dan topbar tetap biru karena punya background sendiri. */
  body[data-layout-mode="light"][data-sidebar-size="sm"],
  body[data-layout-mode="light"][data-sidebar-size="sm"] #layout-wrapper,
  body[data-layout-mode="light"][data-sidebar-size="sm"] .main-content,
  body[data-layout-mode="light"][data-sidebar-size="sm"] .page-content,
  body[data-layout-mode="light"][data-sidebar-size="sm"] .container-fluid{
    background:#fff!important;
  }
  body[data-layout-mode="dark"][data-sidebar-size="sm"],
  body[data-layout-mode="dark"][data-sidebar-size="sm"] #layout-wrapper,
  body[data-layout-mode="dark"][data-sidebar-size="sm"] .main-content,
  body[data-layout-mode="dark"][data-sidebar-size="sm"] .page-content,
  body[data-layout-mode="dark"][data-sidebar-size="sm"] .container-fluid{
    background:#0f1828!important;
  }

  /* Pastikan shell konten minimal memenuhi layar, tetapi tetap tumbuh alami
     bila isi halaman lebih panjang. */
  body[data-sidebar-size="sm"] .page-content,
  body[data-sidebar-size="sm"] .page-content > .container-fluid{
    min-height:calc(100vh - var(--cutie-topbar-h, 72px))!important;
    height:auto!important;
  }

  /* Submenu aktif tidak boleh tertinggal sebagai kotak gelap pada sidebar mini.
     Pada mode mini, submenu hanya muncul ketika item di-hover. */
  body[data-sidebar-size="sm"] #side-menu > li > ul.sub-menu,
  body[data-sidebar-size="sm"] #side-menu > li > ul.sub-menu.mm-collapse,
  body[data-sidebar-size="sm"] #side-menu > li > ul.sub-menu.mm-collapse.mm-show{
    display:none!important;
    height:auto!important;
    overflow:visible!important;
  }
  body[data-sidebar-size="sm"] #side-menu > li:hover > ul.sub-menu{
    display:block!important;
    left:70px!important;
    position:absolute!important;
    width:180px!important;
    height:auto!important;
  }
}


/* =========================================================
   PATCH 2026-07-14: SIDEBAR MINI TANPA JUMP / FLYOUT NYASAR
   ========================================================= */
@media (min-width:992px){
  /* Sidebar mini hanya menampilkan ikon. Submenu tidak dibuat sebagai panel
     absolut karena dapat muncul jauh di bawah saat area SimpleBar ter-scroll. */
  body[data-sidebar-size="sm"] #side-menu > li:hover > ul.sub-menu,
  body[data-sidebar-size="sm"] #side-menu > li > ul.sub-menu,
  body[data-sidebar-size="sm"] #side-menu > li > ul.sub-menu.mm-collapse,
  body[data-sidebar-size="sm"] #side-menu > li > ul.sub-menu.mm-collapse.mm-show{
    display:none!important;
    position:static!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
  }

  /* Hilangkan perluasan label saat hover supaya sidebar mini tidak membuat
     elemen selebar 250px yang dapat mengubah area layout/scroll. */
  body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a{
    width:70px!important;
    min-width:70px!important;
    position:relative!important;
    box-shadow:none!important;
  }
  body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a span.menu-item{
    display:none!important;
  }

  /* Tidak boleh ada overflow horizontal dari flyout sidebar mini. */
  body[data-sidebar-size="sm"] .vertical-menu,
  body[data-sidebar-size="sm"] .sidebar-menu-scroll,
  body[data-sidebar-size="sm"] .sidebar-menu-scroll .simplebar-content-wrapper{
    overflow-x:hidden!important;
  }
}

/* =========================================================
   DESKTOP SHELL — sidebar + header seperti referensi Medanpedia
   Hanya mengubah bentuk/layout, tidak mengubah fungsi menu.
   ========================================================= */
@media (min-width: 992px) {
  :root {
    --cz-sidebar-w: 255px;
    --cz-sidebar-mini-w: 76px;
    --cz-shell-radius: 42px;
    --cz-header-h: 96px;
    --cz-shell-bg: #f4f7fb;
    --cz-sidebar-bg: var(--bs-primary);
  }

  html,
  body,
  #layout-wrapper {
    min-height: 100%;
    background: var(--cz-sidebar-bg) !important;
  }

  body[data-layout-mode="dark"] {
    --cz-shell-bg: #101a2a;
  }

  /* Sidebar biru penuh dari atas sampai bawah. */
  .vertical-menu {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--cz-sidebar-w) !important;
    min-height: 100vh !important;
    background: var(--cz-sidebar-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 1102 !important;
  }
  .vertical-menu::before {
    display: none !important;
  }

  /* Bar logo sidebar seperti contoh: logo/brand kiri, hamburger kanan. */
  .vertical-menu .sidebar-brand-wrap {
    position: relative !important;
    width: 100% !important;
    min-height: var(--cz-header-h) !important;
    height: var(--cz-header-h) !important;
    padding: 0 58px 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .vertical-menu .sidebar-brand-link {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .vertical-menu .sidebar-logo-shell {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .vertical-menu .sidebar-logo-mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .vertical-menu .sidebar-logo-mark img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 5px rgba(13, 28, 72, .16));
  }
  .vertical-menu .sidebar-brand-copy {
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    flex-direction: column !important;
    line-height: 1.12 !important;
  }
  .vertical-menu .sidebar-brand-copy strong {
    max-width: 135px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }
  .vertical-menu .sidebar-brand-copy small {
    max-width: 135px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
  }
  .vertical-menu > .topnav-hamburger {
    position: absolute !important;
    top: 27px !important;
    right: 16px !important;
    z-index: 5 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .vertical-menu > .topnav-hamburger .hamburger-icon span {
    background: #fff !important;
  }

  /* Menu bersih dan rata seperti contoh. */
  .vertical-menu .sidebar-menu-scroll {
    top: var(--cz-header-h) !important;
    height: calc(100vh - var(--cz-header-h)) !important;
    padding: 10px 0 26px !important;
    background: transparent !important;
  }
  .vertical-menu .sidebar-user-card,
  .vertical-menu .sidebar-footer {
    display: none !important;
  }
  .vertical-menu #sidebar-menu {
    padding: 0 !important;
  }
  .vertical-menu #sidebar-menu .menu-title {
    margin: 12px 0 8px !important;
    padding: 0 24px !important;
    color: rgba(255,255,255,.84) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
  }
  .vertical-menu #sidebar-menu > ul > li {
    position: relative !important;
    margin: 1px 0 !important;
  }
  .vertical-menu #sidebar-menu > ul > li > a {
    position: relative !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 12px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.80) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  .vertical-menu #sidebar-menu > ul > li > a i {
    width: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.90) !important;
    font-size: 20px !important;
    text-align: center !important;
  }
  .vertical-menu #sidebar-menu > ul > li > a span.menu-item {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .vertical-menu #sidebar-menu > ul > li.mm-active > a,
  .vertical-menu #sidebar-menu > ul > li > a:hover,
  .vertical-menu #sidebar-menu > ul > li > a:focus {
    background: rgba(255,255,255,.075) !important;
    color: #fff !important;
  }
  .vertical-menu #sidebar-menu > ul > li.mm-active > a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    bottom: 12px !important;
    width: 5px !important;
    border-radius: 0 7px 7px 0 !important;
    background: #fff !important;
  }
  .vertical-menu #sidebar-menu > ul > li > ul.sub-menu {
    margin: 0 !important;
    padding: 1px 0 8px 55px !important;
    background: transparent !important;
  }
  .vertical-menu #sidebar-menu > ul > li > ul.sub-menu > li > a {
    padding: 8px 14px !important;
    color: rgba(255,255,255,.68) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    background: transparent !important;
  }
  .vertical-menu #sidebar-menu > ul > li > ul.sub-menu > li.mm-active > a,
  .vertical-menu #sidebar-menu > ul > li > ul.sub-menu > li > a:hover {
    color: #fff !important;
  }

  /* Header tidak lagi biru penuh; menjadi bagian dari shell konten. */
  #page-topbar {
    top: 0 !important;
    right: 0 !important;
    left: var(--cz-sidebar-w) !important;
    height: var(--cz-header-h) !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 1095 !important;
  }
  #page-topbar .navbar-header {
    width: 100% !important;
    height: var(--cz-header-h) !important;
    min-height: var(--cz-header-h) !important;
    padding: 0 30px 0 38px !important;
    border: 0 !important;
    border-radius: var(--cz-shell-radius) 0 0 0 !important;
    background: var(--cz-shell-bg) !important;
    box-shadow: none !important;
  }
  #page-topbar .navbar-header::before,
  #page-topbar .navbar-header::after {
    display: none !important;
  }
  #page-topbar .navbar-brand-box,
  #page-topbar .topnav-hamburger-custom {
    display: none !important;
  }
  #page-topbar .page-title {
    margin: 0 !important;
    color: #182033 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }
  body[data-layout-mode="dark"] #page-topbar .page-title {
    color: #eef4ff !important;
  }

  /* Tombol kanan mengikuti bentuk ikon sederhana pada contoh. */
  #page-topbar .theme-toggle-wrap,
  #page-topbar .dropdown.d-inline-block {
    display: inline-flex !important;
    align-items: center !important;
  }
  #page-topbar .theme-mode-toggle,
  #page-topbar #page-header-user-dropdown {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    margin: 0 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #page-topbar .theme-mode-toggle {
    color: #526078 !important;
  }
  #page-topbar .theme-mode-toggle:hover,
  #page-topbar #page-header-user-dropdown:hover {
    background: rgba(35,54,92,.07) !important;
  }
  body[data-layout-mode="dark"] #page-topbar .theme-mode-toggle:hover,
  body[data-layout-mode="dark"] #page-topbar #page-header-user-dropdown:hover {
    background: rgba(255,255,255,.08) !important;
  }
  body[data-layout-mode="light"] #page-topbar .theme-icon-moon {
    color: #526078 !important;
  }
  #page-topbar .header-profile-user {
    width: 34px !important;
    height: 34px !important;
    padding: 3px !important;
    border: 2px solid #182033 !important;
    background: #fff !important;
    object-fit: contain !important;
  }
  body[data-layout-mode="dark"] #page-topbar .header-profile-user {
    border-color: #eef4ff !important;
    background: #fff !important;
  }

  /* Konten menyatu dengan header dan tidak menimbulkan scroll kosong. */
  .main-content {
    margin-left: var(--cz-sidebar-w) !important;
    min-height: 100vh !important;
    height: auto !important;
    background: var(--cz-shell-bg) !important;
    border-radius: var(--cz-shell-radius) 0 0 0 !important;
    overflow: visible !important;
  }
  .main-content > .page-content {
    min-height: 100vh !important;
    height: auto !important;
    padding: calc(var(--cz-header-h) + 14px) 26px 34px !important;
    background: var(--cz-shell-bg) !important;
    border-radius: var(--cz-shell-radius) 0 0 0 !important;
  }
  .main-content > .page-content > .container-fluid {
    min-height: calc(100vh - var(--cz-header-h) - 48px) !important;
    height: auto !important;
    padding-top: 0 !important;
    background: transparent !important;
  }
  .main-content > .page-content::before,
  .main-content > .page-content::after,
  body[data-layout-mode] .page-content::before {
    display: none !important;
  }

  /* Mode sidebar mini tetap stabil dan tombol buka kembali muncul di header. */
  body[data-sidebar-size="sm"] {
    --cz-sidebar-w: var(--cz-sidebar-mini-w);
    min-height: 100vh !important;
    height: auto !important;
  }
  body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand-wrap {
    padding: 0 !important;
    justify-content: center !important;
  }
  body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand-link {
    justify-content: center !important;
  }
  body[data-sidebar-size="sm"] .vertical-menu .sidebar-brand-copy,
  body[data-sidebar-size="sm"] .vertical-menu > .topnav-hamburger {
    display: none !important;
  }
  body[data-sidebar-size="sm"] #page-topbar .topnav-hamburger-custom {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin: 0 12px 0 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body[data-sidebar-size="sm"] #page-topbar .topnav-hamburger-custom .hamburger-icon span {
    background: #526078 !important;
  }
  body[data-layout-mode="dark"][data-sidebar-size="sm"] #page-topbar .topnav-hamburger-custom .hamburger-icon span {
    background: #eef4ff !important;
  }
  body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu .menu-title {
    display: none !important;
  }
  body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a {
    width: var(--cz-sidebar-mini-w) !important;
    min-width: var(--cz-sidebar-mini-w) !important;
    padding: 13px 0 !important;
    justify-content: center !important;
  }
  body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a i {
    margin: 0 !important;
  }
  body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a span.menu-item,
  body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > a::after,
  body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li > ul.sub-menu {
    display: none !important;
  }
  body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li.mm-active > a::before {
    top: 11px !important;
    bottom: 11px !important;
  }
}

/* Mobile tetap berupa off-canvas, tetapi header dibuat lebih bersih. */
@media (max-width: 991.98px) {
  #page-topbar,
  #page-topbar .navbar-header {
    background: #fff !important;
  }
  body[data-layout-mode="dark"] #page-topbar,
  body[data-layout-mode="dark"] #page-topbar .navbar-header {
    background: #111c2d !important;
  }
  #page-topbar .navbar-header {
    border-radius: 0 !important;
    box-shadow: 0 5px 20px rgba(31,50,81,.07) !important;
  }
  #page-topbar .page-title {
    color: #182033 !important;
  }
  body[data-layout-mode="dark"] #page-topbar .page-title {
    color: #eef4ff !important;
  }
}

/* =========================================================
   FINAL DESKTOP HEADER — kartu putih melayang
   Header dipisahkan dari sidebar dan dari bidang konten.
   ========================================================= */
@media (min-width: 992px) {
  :root {
    --cz-float-gap-x: 22px;
    --cz-float-gap-top: 18px;
    --cz-float-header-h: 72px;
    --cz-content-top-space: 112px;
  }

  /* Bidang konten tetap terang dan melengkung di sisi sidebar. */
  .main-content {
    margin-left: var(--cz-sidebar-w) !important;
    min-height: 100vh !important;
    padding: 0 !important;
    border-radius: var(--cz-shell-radius) 0 0 0 !important;
    background: var(--cz-shell-bg) !important;
    overflow: visible !important;
  }

  .main-content > .page-content {
    min-height: 100vh !important;
    padding: var(--cz-content-top-space) 26px 34px !important;
    border-radius: var(--cz-shell-radius) 0 0 0 !important;
    background: var(--cz-shell-bg) !important;
  }

  /* Header berupa kartu terpisah yang melayang di atas konten. */
  #page-topbar {
    position: fixed !important;
    top: var(--cz-float-gap-top) !important;
    left: calc(var(--cz-sidebar-w) + var(--cz-float-gap-x)) !important;
    right: var(--cz-float-gap-x) !important;
    width: auto !important;
    height: var(--cz-float-header-h) !important;
    min-height: var(--cz-float-header-h) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    z-index: 1110 !important;
  }

  #page-topbar .navbar-header {
    width: 100% !important;
    max-width: none !important;
    height: var(--cz-float-header-h) !important;
    min-height: var(--cz-float-header-h) !important;
    margin: 0 !important;
    padding: 0 18px 0 28px !important;
    background: #fff !important;
    border: 1px solid rgba(31, 50, 81, .08) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(31, 50, 81, .12), 0 2px 7px rgba(31, 50, 81, .06) !important;
    overflow: visible !important;
  }

  body[data-layout-mode="dark"] #page-topbar .navbar-header {
    background: #162235 !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.22) !important;
  }

  /* Paksa seluruh lapisan header tidak mengambil warna utama/biru. */
  #page-topbar,
  #page-topbar .navbar-header,
  #page-topbar .navbar-header > .d-flex,
  #page-topbar .navbar-header > div {
    background-color: transparent !important;
    background-image: none !important;
  }
  #page-topbar .navbar-header {
    background-color: #fff !important;
  }
  body[data-layout-mode="dark"] #page-topbar .navbar-header {
    background-color: #162235 !important;
  }

  #page-topbar .page-title {
    color: #172033 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
  }
  body[data-layout-mode="dark"] #page-topbar .page-title {
    color: #edf3ff !important;
  }

  /* Tombol kanan tetap berada di dalam kartu putih. */
  #page-topbar .theme-mode-toggle,
  #page-topbar #page-header-user-dropdown {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    background: #f5f7fb !important;
    border: 1px solid #e2e8f1 !important;
    box-shadow: none !important;
  }
  body[data-layout-mode="dark"] #page-topbar .theme-mode-toggle,
  body[data-layout-mode="dark"] #page-topbar #page-header-user-dropdown {
    background: #1d2d44 !important;
    border-color: #30435f !important;
  }

  /* Saat sidebar mini, posisi kartu mengikuti lebar sidebar tanpa loncat. */
  body[data-sidebar-size="sm"] #page-topbar {
    left: calc(var(--cz-sidebar-mini-w) + var(--cz-float-gap-x)) !important;
  }
  body[data-sidebar-size="sm"] .main-content {
    margin-left: var(--cz-sidebar-mini-w) !important;
  }

  /* Hilangkan bentuk header lama yang menempel ke shell. */
  #page-topbar .navbar-header::before,
  #page-topbar .navbar-header::after {
    display: none !important;
    content: none !important;
  }
}

/* =========================================================
   FINAL SIDEBAR TOP SPACING FIX
   Menghapus jarak bawaan template di antara brand dan menu.
   ========================================================= */
@media (min-width: 992px) {
  .vertical-menu .sidebar-menu-scroll {
    position: absolute !important;
    top: var(--cz-header-h) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--cz-header-h)) !important;
    margin: 0 !important;
    padding: 4px 0 24px !important;
  }

  .vertical-menu .sidebar-menu-scroll .simplebar-wrapper,
  .vertical-menu .sidebar-menu-scroll .simplebar-mask,
  .vertical-menu .sidebar-menu-scroll .simplebar-content-wrapper {
    height: 100% !important;
    margin: 0 !important;
  }

  .vertical-menu .sidebar-menu-scroll .simplebar-content {
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .vertical-menu #sidebar-menu {
    margin: 0 !important;
    padding-top: 0 !important;
  }

  .vertical-menu #sidebar-menu .menu-title:first-child {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }
}

/* =========================================================
   DATABASE THEME COLORS
   Seluruh warna branding mengikuti tabel settings:
   primary_color, primary_hover_color, dan banner_color.
   ========================================================= */

/* Warna utama: sidebar, tombol, link utama, dan komponen aktif. */
.vertical-menu,
body[data-sidebar="dark"] .vertical-menu,
body[data-sidebar="dark"] .navbar-brand-box {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* Teks/logo sidebar otomatis hitam atau putih sesuai terang-gelap warna utama. */
.vertical-menu .sidebar-brand-copy strong,
.vertical-menu .sidebar-brand-copy small,
.vertical-menu .menu-title,
.vertical-menu > .topnav-hamburger .hamburger-icon span,
.vertical-menu #sidebar-menu > ul > li > a,
.vertical-menu #sidebar-menu > ul > li > a i,
.vertical-menu #sidebar-menu > ul > li > ul.sub-menu > li > a {
  color: var(--bs-primary-contrast) !important;
}
.vertical-menu > .topnav-hamburger .hamburger-icon span {
  background-color: var(--bs-primary-contrast) !important;
}
.vertical-menu .sidebar-brand-copy small,
.vertical-menu .menu-title,
.vertical-menu #sidebar-menu > ul > li > a,
.vertical-menu #sidebar-menu > ul > li > ul.sub-menu > li > a {
  opacity: .82;
}
.vertical-menu #sidebar-menu > ul > li > a i {
  opacity: .92;
}

/* Warna hover dari database, termasuk menu aktif dan submenu. */
.vertical-menu #sidebar-menu > ul > li.mm-active > a,
.vertical-menu #sidebar-menu > ul > li > a:hover,
.vertical-menu #sidebar-menu > ul > li > a:focus,
body[data-sidebar="dark"] #sidebar-menu ul li > a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a {
  background: var(--bs-primary-hover) !important;
  color: var(--bs-primary-hover-contrast) !important;
  opacity: 1 !important;
}
.vertical-menu #sidebar-menu > ul > li.mm-active > a i,
.vertical-menu #sidebar-menu > ul > li > a:hover i,
.vertical-menu #sidebar-menu > ul > li > a:focus i,
.vertical-menu #sidebar-menu > ul > li.mm-active > a span,
.vertical-menu #sidebar-menu > ul > li > a:hover span,
.vertical-menu #sidebar-menu > ul > li > a:focus span {
  color: var(--bs-primary-hover-contrast) !important;
  opacity: 1 !important;
}
.vertical-menu #sidebar-menu > ul > li.mm-active > a::before {
  background: var(--bs-primary-hover-contrast) !important;
}
.vertical-menu #sidebar-menu > ul > li > ul.sub-menu > li.mm-active > a,
.vertical-menu #sidebar-menu > ul > li > ul.sub-menu > li > a:hover,
.vertical-menu #sidebar-menu > ul > li > ul.sub-menu > li > a:focus {
  background: var(--bs-primary-hover) !important;
  color: var(--bs-primary-hover-contrast) !important;
  opacity: 1 !important;
  border-radius: 9px !important;
}
.vertical-menu #sidebar-menu > ul > li > ul.sub-menu > li.mm-active > a::before {
  background: var(--bs-primary-hover-contrast) !important;
}

/* Tombol dan tab mengikuti warna utama/hover dari database. */
.btn-primary,
.bg-primary,
.admin-tabs a.btn-primary,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary-contrast) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-check:checked + .btn-primary,
.btn-check:focus + .btn-primary,
.admin-tabs a.btn-primary:hover,
.nav-pills .nav-link.active:hover {
  background-color: var(--bs-primary-hover) !important;
  border-color: var(--bs-primary-hover) !important;
  color: var(--bs-primary-hover-contrast) !important;
}
.text-primary { color: var(--bs-primary) !important; }
.border-primary { border-color: var(--bs-primary) !important; }
a:not(.btn):hover { color: var(--bs-primary-hover); }

/* Warna banner dipakai untuk banner/promo, bukan header putih melayang. */
.dash-banner,
.dashboard-banner,
.promo-banner,
.announcement-banner,
.banner-card,
[data-theme-role="banner"] {
  background-color: color-mix(in srgb, var(--banner) 18%, white) !important;
  border-color: color-mix(in srgb, var(--banner) 48%, transparent) !important;
  color: color-mix(in srgb, var(--banner-contrast) 88%, var(--banner)) !important;
}
.dash-banner a,
.dashboard-banner a,
.promo-banner a,
.announcement-banner a,
.banner-card a,
[data-theme-role="banner"] a {
  color: inherit !important;
}
body[data-layout-mode="dark"] .dash-banner,
body[data-layout-mode="dark"] .dashboard-banner,
body[data-layout-mode="dark"] .promo-banner,
body[data-layout-mode="dark"] .announcement-banner,
body[data-layout-mode="dark"] .banner-card,
body[data-layout-mode="dark"] [data-theme-role="banner"] {
  background-color: color-mix(in srgb, var(--banner) 28%, #162235) !important;
  border-color: color-mix(in srgb, var(--banner) 52%, transparent) !important;
  color: #edf3ff !important;
}

/* =========================================================
   FIX MOBILE HEADER — logo rata tengah secara vertikal
   ========================================================= */
@media (max-width: 991.98px) {
  #page-topbar .navbar-header {
    align-items: stretch !important;
  }

  #page-topbar .navbar-brand-box {
    align-self: stretch !important;
    height: auto !important;
    min-height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #page-topbar .navbar-brand-box > .logo {
    height: 100% !important;
  }

  #page-topbar .navbar-brand-box > .logo > .logo-sm,
  #page-topbar .navbar-brand-box > .logo > .logo-lg {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  #page-topbar .navbar-brand-box img {
    display: block !important;
    margin: 0 auto !important;
    position: static !important;
    transform: translateY(8px) !important;
  }
}