@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
@import url('https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.min.css');

:root{
  --rz-bg:#f5f7fb;
  --rz-surface:#ffffff;
  --rz-surface-2:#f8fafc;
  --rz-navy:#0f172a;
  --rz-navy-2:#172033;
  --rz-muted:#64748b;
  --rz-border:#e2e8f0;
  --rz-primary:#2563eb;
  --rz-primary-2:#4f46e5;
  --rz-primary-soft:#eef4ff;
  --rz-success:#059669;
  --rz-warning:#d97706;
  --rz-danger:#dc2626;
  --rz-sidebar:286px;
  --rz-radius:18px;
  --rz-shadow:0 10px 30px rgba(15,23,42,.07);
  --rz-shadow-lg:0 24px 70px rgba(15,23,42,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 10% -10%,rgba(37,99,235,.07),transparent 27rem),
    linear-gradient(180deg,#fbfcff 0%,var(--rz-bg) 42%,#f7f8fb 100%);
  color:var(--rz-navy);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:14px;
}
a{color:var(--rz-primary);text-decoration:none}
a:hover{color:#1d4ed8}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.025em;color:var(--rz-navy)}

/* ===== APP SHELL ===== */
.rz-mobilebar{
  display:none;
  position:sticky;
  top:0;
  z-index:1035;
  height:68px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rz-border);
  padding:0 16px;
  align-items:center;
  justify-content:space-between;
}
.rz-mobilebar-logo{width:162px;max-height:44px}
.rz-menu-button{
  width:44px;height:44px;border:1px solid var(--rz-border);border-radius:13px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;color:var(--rz-navy);
  box-shadow:0 5px 14px rgba(15,23,42,.06)
}
.rz-menu-button:active{transform:scale(.97)}

.rz-sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--rz-sidebar);z-index:1040;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0d1629 0%,#121c31 46%,#0b1324 100%);
  color:#fff;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:14px 0 44px rgba(15,23,42,.12);
}
.rz-sidebar-brand{
  min-height:86px;display:flex;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08)
}
.rz-sidebar-brand img{width:205px;height:auto;filter:brightness(0) invert(1);opacity:.98}
.rz-sidebar-scroll{flex:1;overflow:auto;padding:18px 14px 24px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.rz-sidebar-section{margin:18px 10px 8px;color:#8290a9;font-size:.69rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.rz-sidebar-link,.rz-sidebar-toggle{
  width:100%;display:flex;align-items:center;gap:11px;border:0;background:transparent;color:#cbd5e1;
  padding:10px 12px;border-radius:12px;font-weight:500;text-align:left;transition:.18s ease;margin:2px 0
}
.rz-sidebar-link i,.rz-sidebar-toggle i{font-size:1.05rem;width:22px;text-align:center;color:#94a3b8}
.rz-sidebar-link:hover,.rz-sidebar-toggle:hover{background:rgba(255,255,255,.07);color:#fff}
.rz-sidebar-link:hover i,.rz-sidebar-toggle:hover i{color:#fff}
.rz-sidebar-link.active{background:linear-gradient(135deg,rgba(37,99,235,.92),rgba(79,70,229,.92));color:#fff;box-shadow:0 10px 24px rgba(37,99,235,.22)}
.rz-sidebar-link.active i{color:#fff}
.rz-sidebar-toggle .rz-chevron{margin-left:auto;width:auto;font-size:.75rem;transition:.18s ease}
.rz-sidebar-group.is-open .rz-sidebar-toggle{color:#fff;background:rgba(255,255,255,.05)}
.rz-sidebar-group.is-open .rz-chevron{transform:rotate(180deg)}
.rz-sidebar-submenu{display:none;padding:4px 0 6px 34px}
.rz-sidebar-group.is-open .rz-sidebar-submenu{display:block}
.rz-sidebar-submenu .rz-sidebar-link{font-size:.82rem;padding:8px 11px;color:#aebbd0}
.rz-sidebar-submenu .rz-sidebar-link.active{color:#fff}
.rz-sidebar-footer{padding:14px;border-top:1px solid rgba(255,255,255,.08)}
.rz-user-card{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:rgba(255,255,255,.06)}
.rz-user-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#7c3aed);font-weight:800;color:#fff}
.rz-user-meta{min-width:0;flex:1}
.rz-user-name{font-size:.82rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-user-role{font-size:.69rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-logout{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fda4af;background:rgba(239,68,68,.08)}
.rz-logout:hover{color:#fff;background:rgba(239,68,68,.2)}
.rz-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(2px);z-index:1038}

@media(min-width:992px){
  body.rz-has-sidebar{padding-left:var(--rz-sidebar)}
}
@media(max-width:991.98px){
  body.rz-has-sidebar{padding-left:0;padding-top:0}
  .rz-mobilebar{display:flex}
  .rz-sidebar{transform:translateX(-102%);transition:transform .24s ease;width:min(88vw,310px)}
  body.rz-menu-open .rz-sidebar{transform:translateX(0)}
  body.rz-menu-open .rz-sidebar-overlay{display:block}
  body.rz-menu-open{overflow:hidden}
}

/* ===== CONTENT ===== */
.container,.container-fluid{--bs-gutter-x:1.6rem}
body.rz-has-sidebar>.container,body.rz-has-sidebar>.container-fluid{max-width:1440px}
.rz-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.rz-page-head h1{font-size:clamp(1.55rem,2vw,2.05rem);margin:0}
.rz-page-head p{margin:.45rem 0 0;color:var(--rz-muted);max-width:760px;line-height:1.7}
.rz-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rz-primary);margin-bottom:7px}
.rz-page-help{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:#f8fbff;border:1px solid #dbeafe;color:#475569;font-size:.82rem;line-height:1.6}
.rz-page-help i{color:var(--rz-primary);font-size:1rem;margin-top:1px}

.card,.rz-card{background:var(--rz-surface);border:1px solid var(--rz-border)!important;border-radius:var(--rz-radius)!important;box-shadow:var(--rz-shadow);overflow:hidden}
.card-header{background:#fff!important;border-bottom:1px solid var(--rz-border)!important;padding:1rem 1.2rem;font-weight:700}
.card-body{padding:1.25rem}
.rz-soft-card{background:linear-gradient(145deg,#fff,#f9fbff);border:1px solid #e6ebf2;border-radius:18px;padding:18px}

.rz-hero{
  position:relative;overflow:hidden;border-radius:24px;padding:28px;color:#fff;
  background:linear-gradient(125deg,#111c35 0%,#1d3b78 56%,#3b55d9 100%);
  box-shadow:0 22px 60px rgba(30,58,138,.2)
}
.rz-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-120px;background:rgba(255,255,255,.09)}
.rz-hero:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:110px;bottom:-140px;background:rgba(96,165,250,.14)}
.rz-hero>*{position:relative;z-index:1}
.rz-hero h1,.rz-hero h2,.rz-hero h3,.rz-hero p{color:#fff}
.rz-hero-sub{color:#cbd5e1!important;max-width:720px;line-height:1.7}
.rz-hero-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);font-size:.72rem;font-weight:600;color:#e2e8f0}

.rz-stat{position:relative;height:100%;overflow:hidden}
.rz-stat .card-body{display:flex;align-items:center;gap:14px;padding:1.2rem}
.rz-stat-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--rz-primary-soft);color:var(--rz-primary);font-size:1.22rem;flex:0 0 auto}
.rz-stat-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.055em;color:var(--rz-muted)}
.rz-stat-value{font-size:1.65rem;font-weight:800;letter-spacing:-.04em;margin-top:.18rem;color:var(--rz-navy)}
.rz-stat-note{font-size:.72rem;color:#94a3b8;margin-top:.15rem}

.rz-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rz-feature-card{display:flex;align-items:flex-start;gap:13px;padding:17px;border:1px solid var(--rz-border);border-radius:17px;background:#fff;transition:.18s ease;height:100%}
.rz-feature-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.07);border-color:#cbd5e1}
.rz-feature-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eef4ff;color:var(--rz-primary);font-size:1.08rem;flex:0 0 auto}
.rz-feature-card h3{font-size:.91rem;margin:0 0 5px}
.rz-feature-card p{font-size:.76rem;color:var(--rz-muted);line-height:1.55;margin:0}
.rz-feature-card .rz-go{display:inline-block;margin-top:8px;font-size:.74rem;font-weight:600}

/* ===== FORMS / BUTTONS ===== */
.form-label{font-weight:600;color:#334155;font-size:.82rem}
.form-control,.form-select{border-radius:12px;border-color:#cbd5e1;min-height:46px;font-size:.88rem;background-color:#fff}
textarea.form-control{min-height:100px}
.form-control:focus,.form-select:focus{border-color:#7aa8ff;box-shadow:0 0 0 .2rem rgba(37,99,235,.1)}
.form-text{font-size:.72rem;color:#94a3b8}
.btn{border-radius:11px;font-weight:600;font-size:.83rem;padding:.62rem .92rem}
.btn-sm{padding:.42rem .7rem;font-size:.75rem}
.btn-primary{background:linear-gradient(135deg,var(--rz-primary),var(--rz-primary-2));border-color:transparent;box-shadow:0 6px 16px rgba(37,99,235,.16)}
.btn-primary:hover{background:linear-gradient(135deg,#1d4ed8,#4338ca);border-color:transparent}
.btn-outline-primary{border-color:#bfdbfe;color:#1d4ed8}
.btn-outline-primary:hover{background:#eff6ff;color:#1d4ed8;border-color:#93c5fd}
.badge{border-radius:999px;padding:.43rem .65rem;font-weight:600;font-size:.68rem}
.alert{border-radius:14px;border-width:1px;font-size:.84rem}

/* ===== TABLE / DATATABLE ===== */
.table-responsive{border-radius:16px}
.table{margin-bottom:0;font-size:.82rem}
.table thead th{font-size:.68rem;text-transform:uppercase;letter-spacing:.055em;color:#64748b;background:#f8fafc!important;border-bottom:1px solid var(--rz-border);padding:.9rem .95rem;white-space:nowrap}
.table tbody td{padding:.9rem .95rem;vertical-align:middle;border-color:#eef2f7}
.table tbody tr:hover>*{background:#fbfdff}
div.dt-container{padding:0 1rem 1rem;font-size:.78rem}
div.dt-container .dt-layout-row:first-child{padding-top:1rem}
div.dt-container .dt-search input,div.dt-container .dt-length select{border:1px solid #cbd5e1;border-radius:10px;padding:.4rem .6rem;background:#fff}
div.dt-container .dt-paging .dt-paging-button{border-radius:9px!important}

/* ===== EXISTING V8 COMPAT ===== */
.rz-business-card .rz-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rz-business-card .rz-meta-label{font-size:.72rem;color:var(--rz-muted)}
.rz-business-card .rz-meta-value{font-weight:700;margin-top:.2rem}
.rz-qr-box{width:148px;min-width:148px;padding:10px;border:1px solid var(--rz-border);border-radius:16px;background:#fff;text-align:center}
.rz-qr-canvas{display:flex;align-items:center;justify-content:center;min-height:124px}
.rz-qr-code-label{font-size:.72rem;color:var(--rz-muted);font-weight:700;margin-top:.4rem}
.rz-report-hero{background:linear-gradient(135deg,#111c35,#1e3a8a);color:#fff;border-radius:24px;padding:28px;box-shadow:0 20px 45px rgba(30,58,138,.18)}
.rz-report-hero h1,.rz-report-hero p{color:#fff}
.rz-chart{display:grid;grid-template-columns:repeat(14,minmax(24px,1fr));gap:10px;align-items:end;height:220px}
.rz-bar-wrap{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.rz-bar{width:100%;max-width:55px;background:linear-gradient(180deg,#93c5fd,#2563eb);border-radius:10px 10px 4px 4px;min-height:4px}
.rz-bar-value{font-size:.66rem;font-weight:700;margin-bottom:5px}.rz-bar-label{font-size:.62rem;color:var(--rz-muted);margin-top:6px}
.rz-wa{display:inline-flex;gap:7px;align-items:center}.rz-wa:before{content:"WA";font-size:.61rem;font-weight:800;background:#dcfce7;color:#15803d;border-radius:999px;padding:3px 6px}
.rz-empty{text-align:center;padding:42px 18px;color:var(--rz-muted)}
.rz-commission-pending{color:#92400e;background:#fffbeb}.rz-commission-approved{color:#1d4ed8;background:#eff6ff}.rz-commission-paid{color:#166534;background:#f0fdf4}.rz-commission-cancelled{color:#991b1b;background:#fef2f2}

/* ===== VOUCHER / CREDIT ===== */
.rz-voucher-card{position:relative;overflow:hidden;border:1px solid #e2e8f0;border-radius:20px;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:0 10px 28px rgba(15,23,42,.06)}
.rz-voucher-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#2563eb,#7c3aed)}
.rz-voucher-offer{font-size:1.4rem;font-weight:800;letter-spacing:-.035em;color:#0f172a}
.rz-voucher-code{display:inline-block;padding:.62rem .85rem;border:1px dashed #94a3b8;border-radius:12px;background:#f8fafc;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;letter-spacing:.08em;color:#0f172a}
.rz-voucher-status{display:inline-flex;font-size:.66rem;font-weight:700;letter-spacing:.045em;padding:.43rem .67rem;border-radius:999px}
.rz-voucher-status.unused,.rz-voucher-status.pending{background:#eff6ff;color:#1d4ed8}.rz-voucher-status.redeemed,.rz-voucher-status.active,.rz-voucher-status.paid{background:#ecfdf5;color:#047857}.rz-voucher-status.expired,.rz-voucher-status.inactive{background:#f1f5f9;color:#64748b}.rz-voucher-status.cancelled,.rz-voucher-status.suspended{background:#fef2f2;color:#991b1b}
.rz-voucher-preview{border-radius:24px;background:linear-gradient(135deg,#172554,#1e3a8a 60%,#2563eb);color:#fff;padding:28px;box-shadow:0 24px 60px rgba(30,58,138,.18)}
.rz-voucher-preview h1,.rz-voucher-preview h2,.rz-voucher-preview p{color:#fff}
.rz-voucher-ticket{position:relative;background:#fff;color:#0f172a;border-radius:20px;padding:26px;margin-top:20px}
.rz-voucher-ticket:before,.rz-voucher-ticket:after{content:"";position:absolute;top:50%;width:28px;height:28px;background:#1e3a8a;border-radius:50%;transform:translateY(-50%)}
.rz-voucher-ticket:before{left:-14px}.rz-voucher-ticket:after{right:-14px}
.rz-metric{border:1px solid #e2e8f0;border-radius:16px;background:#fff;padding:1.05rem}
.rz-metric-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:#64748b}.rz-metric-value{font-size:1.65rem;font-weight:800;letter-spacing:-.04em;margin-top:.25rem}
.rz-credit-balance{border-radius:24px;padding:26px;background:linear-gradient(135deg,#101a32,#1d4ed8 60%,#5b4be8);color:#fff;box-shadow:0 20px 55px rgba(37,99,235,.2)}
.rz-credit-balance .label{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:#bfdbfe;font-weight:600}.rz-credit-balance .value{font-size:2.35rem;font-weight:800;letter-spacing:-.05em;margin:.3rem 0}.rz-credit-balance .note{font-size:.76rem;color:#dbeafe}
.rz-partner-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:.68rem;font-weight:700}
.rz-partner-badge i{font-size:.8rem}

/* ===== LOGIN ===== */
.rz-auth-page{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 10% 0%,#dbeafe,transparent 38rem),linear-gradient(160deg,#f8fafc,#eef2ff)}
.rz-auth-card{width:min(100%,480px);border:1px solid var(--rz-border);border-radius:24px;background:#fff;box-shadow:var(--rz-shadow-lg);padding:30px}
.rz-auth-logo{width:210px;margin-bottom:22px}

@media(max-width:1199px){.rz-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rz-business-card .rz-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767.98px){
  .rz-page-head{flex-direction:column}.rz-page-head>.d-flex{width:100%}.rz-page-head>.d-flex .btn{flex:1}
  .rz-feature-grid{grid-template-columns:1fr}.rz-hero{padding:22px}.rz-hero h1{font-size:1.5rem}
  .rz-chart{overflow-x:auto;grid-template-columns:repeat(14,44px);padding-bottom:8px}.container{padding-left:14px;padding-right:14px}.card-body{padding:1rem}
  .rz-credit-balance .value{font-size:2rem}
}
@media(max-width:575.98px){.rz-business-card .rz-meta{grid-template-columns:1fr 1fr}.rz-qr-box{width:132px;min-width:132px}.rz-business-main{flex-direction:column!important}.btn{font-size:.8rem}.rz-auth-card{padding:22px}}


/* =========================================================
   RIZZO - MOBILE DASHBOARD FIX
   Tambahkan paling bawah dashboard-v8.css
   ========================================================= */

@media (max-width: 991.98px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        margin: 0;
    }

    /* =========================
       NAVBAR / HEADER MOBILE
       ========================= */

    .navbar {
        width: 100%;
        padding: 10px 15px;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        position: sticky;
        top: 0;
        z-index: 1050;
    }

    .navbar .container,
    .navbar .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

    .navbar-brand img {
        max-height: 42px;
        width: auto;
    }

    .navbar-toggler {
        display: block;
        margin-left: auto;
    }

    .navbar-collapse {
        width: 100%;
        background: #fff;
        margin-top: 12px;
        padding: 12px;
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    }

    .navbar-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        display: block;
        width: 100%;
        padding: 11px 13px;
        border-radius: 10px;
        text-decoration: none;
        color: #334155;
        font-weight: 600;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background: #eff6ff;
        color: #2563eb;
    }


    /* =========================
       SIDEBAR DESKTOP
       ========================= */

    .sidebar,
    .rz-sidebar,
    .dashboard-sidebar,
    .app-sidebar {
        display: none !important;
    }


    /* =========================
       MAIN CONTENT
       ========================= */

    .main-content,
    .dashboard-main,
    .app-main,
    .content-wrapper,
    .rz-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .container,
    .container-fluid {
        max-width: 100%;
    }


    /* =========================
       DASHBOARD HEADER
       ========================= */

    .rz-page-head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .rz-page-head > div {
        width: 100%;
    }

    .rz-page-head h1 {
        font-size: 28px;
        line-height: 1.15;
    }


    /* =========================
       BUTTON
       ========================= */

    .btn {
        border-radius: 10px;
    }


    /* =========================
       CARD / STATS
       ========================= */

    .card {
        width: 100%;
        border-radius: 16px;
    }

    .row {
        --bs-gutter-x: 14px;
    }


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

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* =========================
       FORM
       ========================= */

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }
}


/* HP kecil */
@media (max-width: 575.98px) {

    .container,
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .rz-page-head h1 {
        font-size: 25px;
    }

    .card-body {
        padding: 16px;
    }

    .btn {
        min-height: 42px;
    }
}



@media (max-width: 991.98px) {

    .rz-sidebar {
        display: flex !important;
        transform: translateX(-102%);
        transition: transform .24s ease;
        width: min(88vw, 310px);
    }

    body.rz-menu-open .rz-sidebar {
        transform: translateX(0);
    }

    .rz-sidebar-overlay {
        display: none;
    }

    body.rz-menu-open .rz-sidebar-overlay {
        display: block;
    }
}