:root {
  --mh-navy-950:#071a2f;--mh-navy-900:#0b2440;--mh-navy-800:#103354;
  --mh-blue:#1479c9;--mh-cyan:#15b8d6;--mh-aqua:#67e8f9;
  --mh-bg:#f3f7fb;--mh-card:#fff;--mh-text:#172b3d;--mh-muted:#64748b;
  --mh-line:#dce7f0;--mh-success:#0f9f6e;--mh-warning:#d8890b;--mh-danger:#dc3f50;
  --mh-radius:18px;--mh-shadow:0 12px 32px rgba(15,46,74,.09);
}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}
body{background:var(--mh-bg);color:var(--mh-text);font-family:"Segoe UI",Inter,Arial,sans-serif;font-size:14px;line-height:1.55}
a{color:var(--mh-blue)}a:hover{color:#0b5d9e;text-decoration:none}
button,input,select,textarea{font:inherit}.text-muted{color:var(--mh-muted)!important}

/* Login */
.mh-auth-page{margin:0;min-height:100vh;background:var(--mh-navy-950)}
.mh-auth-shell{display:grid;grid-template-columns:minmax(360px,1.08fr) minmax(420px,.92fr);min-height:100vh}
.mh-auth-brand{position:relative;display:flex;align-items:center;padding:clamp(45px,7vw,110px);overflow:hidden;color:#fff;background:linear-gradient(145deg,rgba(5,27,49,.96),rgba(11,69,108,.92)),url('../img/logo.png') center/360px no-repeat}
.mh-auth-brand:before,.mh-auth-brand:after{content:"";position:absolute;border-radius:50%;filter:blur(1px);opacity:.35}
.mh-auth-brand:before{width:420px;height:420px;right:-160px;top:-100px;background:radial-gradient(circle,var(--mh-cyan),transparent 65%)}
.mh-auth-brand:after{width:320px;height:320px;left:-110px;bottom:-120px;background:radial-gradient(circle,#2563eb,transparent 66%)}
.mh-auth-brand__content{position:relative;z-index:1;max-width:650px}.mh-auth-logo{width:min(310px,72%);max-height:100px;object-fit:contain;object-position:left center;margin:25px 0 34px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.mh-auth-kicker{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:rgba(255,255,255,.09);font-size:12px;font-weight:800;letter-spacing:.08em}
.mh-auth-brand h1{font-size:clamp(35px,4.5vw,62px);line-height:1.06;letter-spacing:-.04em;margin:0 0 22px;font-weight:800}.mh-auth-brand p{font-size:17px;max-width:570px;color:#d8edf8;margin:0 0 31px}
.mh-auth-features{display:flex;flex-wrap:wrap;gap:10px}.mh-auth-features span{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.08);color:#e7f8ff;font-size:13px}
.mh-auth-panel{display:flex;align-items:center;justify-content:center;padding:clamp(25px,5vw,80px);background:radial-gradient(circle at 90% 5%,#d9f7fd,transparent 34%),linear-gradient(135deg,#f8fbfd,#eaf3f8)}
.mh-auth-card{width:100%;max-width:490px;padding:clamp(25px,4vw,44px);background:#fff;border:1px solid rgba(206,224,236,.9);border-radius:28px;box-shadow:0 28px 70px rgba(8,38,62,.15)}
.mh-auth-card__head{display:flex;gap:16px;align-items:flex-start;margin-bottom:28px}.mh-auth-mark{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:0 0 52px;border-radius:16px;color:#fff;font-size:21px;background:linear-gradient(135deg,var(--mh-blue),var(--mh-cyan));box-shadow:0 10px 22px rgba(20,121,201,.25)}
.mh-eyebrow{display:block;color:var(--mh-blue);font-size:11px;font-weight:800;letter-spacing:.12em;margin-bottom:4px}.mh-auth-card h2{font-size:28px;line-height:1.15;margin:0 0 5px;font-weight:800;color:var(--mh-navy-950)}.mh-auth-card__head p{margin:0;color:var(--mh-muted)}
.mh-auth-form{display:grid;gap:18px}.mh-field label{display:block;color:#334155;font-size:13px;font-weight:700;margin:0 0 7px}.mh-input-icon{position:relative}.mh-input-icon>i{position:absolute;z-index:2;left:15px;top:50%;transform:translateY(-50%);color:#7890a3}.mh-input-icon input{width:100%;height:50px;padding:0 48px 0 43px;border:1px solid #d7e3ec;border-radius:13px;background:#fafdff;outline:0;transition:.2s}.mh-input-icon input:focus{border-color:var(--mh-cyan);background:#fff;box-shadow:0 0 0 4px rgba(21,184,214,.12)}
.mh-password-toggle{position:absolute;right:5px;top:5px;width:40px;height:40px;border:0;border-radius:9px;background:transparent;color:#6f8799}.mh-password-toggle:hover{background:#eaf5fa;color:var(--mh-blue)}
.mh-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 17px;border:0;border-radius:11px;font-weight:700;transition:.18s;cursor:pointer}.mh-btn-primary{color:#fff;background:linear-gradient(135deg,var(--mh-blue),#0b8fb5);box-shadow:0 8px 20px rgba(20,121,201,.22)}.mh-btn-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 25px rgba(20,121,201,.29)}.mh-btn-block{width:100%;min-height:50px}
.mh-auth-error,.mh-auth-notice,.mh-auth-help{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:11px;margin-bottom:18px;font-size:13px}.mh-auth-error{background:#fff0f1;color:#a92736;border:1px solid #ffd1d6}.mh-auth-notice,.mh-auth-help{background:#edf8fd;color:#176386;border:1px solid #ccebf7}.mh-auth-help{margin:18px 0 0}
.mh-auth-switch{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:24px;padding:16px 0;border-top:1px solid var(--mh-line);font-size:13px}.mh-auth-switch span{color:var(--mh-muted)}.mh-auth-switch a{font-weight:700}.mh-auth-footer{display:flex;justify-content:space-between;gap:15px;color:#8092a1;font-size:11px}.mh-auth-footer a{color:#64798b}

/* App shell */
.mh-app{min-height:100vh;background:var(--mh-bg)}.mh-topbar{position:fixed;z-index:1040;left:268px;right:0;top:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 27px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--mh-line);backdrop-filter:blur(16px)}
.mh-topbar__left,.mh-topbar__right,.mh-user{display:flex;align-items:center;gap:13px}.mh-menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--mh-line);border-radius:12px;background:#fff;color:var(--mh-navy-900)}.mh-topbar__title{font-size:17px;font-weight:800;color:var(--mh-navy-950)}.mh-topbar__date{color:var(--mh-muted);font-size:12px}.mh-user{text-align:right}.mh-user__avatar{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--mh-blue),var(--mh-cyan))}.mh-user__name{display:block;font-weight:750;color:var(--mh-navy-950);line-height:1.2}.mh-user__role{display:block;color:var(--mh-muted);font-size:11px}.mh-topbar__logout{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;color:#b92b3b;background:#fff1f2}.mh-topbar__logout:hover{color:#fff;background:var(--mh-danger)}
.mh-sidebar{position:fixed;z-index:1050;left:0;top:0;bottom:0;width:268px;display:flex;flex-direction:column;color:#d9e8f2;background:linear-gradient(180deg,var(--mh-navy-950),#0c2f4b 62%,#0b3d58);box-shadow:12px 0 35px rgba(6,26,45,.13);overflow:hidden}.mh-sidebar__brand{display:flex;align-items:center;gap:12px;height:82px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.08)}.mh-sidebar__brand img{width:46px;height:46px;border-radius:14px;object-fit:contain;background:#fff;padding:4px}.mh-sidebar__brand strong{display:block;color:#fff;font-size:16px}.mh-sidebar__brand span{display:block;color:#8fc6da;font-size:10px;letter-spacing:.12em;font-weight:700}.mh-sidebar__scroll{flex:1;overflow-y:auto;padding:16px 13px 22px}.mh-sidebar__label{padding:11px 11px 7px;color:#6ea4bb;font-size:10px;font-weight:800;letter-spacing:.13em}.mh-nav{list-style:none;padding:0;margin:0}.mh-nav li{margin:3px 0}.mh-nav a,.mh-nav-group__toggle{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:45px;padding:10px 12px;border:0;border-radius:12px;color:#bed5e2;background:transparent;text-align:left;font-weight:650}.mh-nav a i,.mh-nav-group__toggle i:first-child{width:22px;text-align:center;font-size:17px;color:#75bfd7}.mh-nav a:hover,.mh-nav a.active,.mh-nav-group__toggle:hover{color:#fff;background:rgba(255,255,255,.09)}.mh-nav a.active:before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:4px;background:var(--mh-aqua)}.mh-nav-group__toggle .fa-angle-down{margin-left:auto;transition:.2s}.mh-nav-group.open .mh-nav-group__toggle .fa-angle-down{transform:rotate(180deg)}.mh-nav-sub{display:none;list-style:none;padding:3px 0 4px 34px;margin:0}.mh-nav-group.open .mh-nav-sub{display:block}.mh-nav-sub a{min-height:37px;padding:8px 11px;font-size:12px;font-weight:600}.mh-sidebar__footer{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);color:#77a9bd;font-size:10px}.mh-sidebar-overlay{display:none}
.mh-main{margin-left:268px;padding:96px 26px 95px;min-height:100vh}.mh-content{max-width:1500px;margin:0 auto}.mh-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}.mh-page-head h1{margin:0 0 3px;color:var(--mh-navy-950);font-size:26px;font-weight:800;letter-spacing:-.02em}.mh-page-head p{margin:0;color:var(--mh-muted)}.mh-breadcrumb-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#e4f4fa;color:#176887;font-size:11px;font-weight:700}

/* Dashboard */
.mh-grid{display:grid;gap:17px}.mh-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.mh-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.mh-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.mh-metric{position:relative;overflow:hidden;padding:20px;background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow)}.mh-metric:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-28px;top:-30px;background:var(--metric-soft,#e6f5fb)}.mh-metric__top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start}.mh-metric__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:var(--metric-soft,#e7f5fb);color:var(--metric-color,var(--mh-blue));font-size:18px}.mh-metric__label{color:var(--mh-muted);font-size:12px;font-weight:700}.mh-metric__value{position:relative;z-index:1;margin:16px 0 3px;color:var(--mh-navy-950);font-size:28px;font-weight:850;letter-spacing:-.03em}.mh-metric__note{position:relative;z-index:1;color:var(--mh-muted);font-size:11px}.mh-tone-green{--metric-color:#0c9065;--metric-soft:#e3f7ef}.mh-tone-amber{--metric-color:#c57905;--metric-soft:#fff2d9}.mh-tone-red{--metric-color:#ce3547;--metric-soft:#ffeaed}.mh-tone-blue{--metric-color:#1977bd;--metric-soft:#e6f3fb}.mh-tone-violet{--metric-color:#7652c7;--metric-soft:#efeaff}
.mh-card{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);overflow:hidden}.mh-card__head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 20px;border-bottom:1px solid #e9f0f5}.mh-card__title{margin:0;color:var(--mh-navy-950);font-size:15px;font-weight:800}.mh-card__subtitle{color:var(--mh-muted);font-size:11px}.mh-card__body{padding:20px}.mh-section{margin-top:18px}.mh-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.mh-action{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--mh-line);border-radius:14px;background:#fbfdff;color:var(--mh-text);transition:.18s}.mh-action:hover{transform:translateY(-2px);border-color:#b9ddea;box-shadow:0 9px 20px rgba(22,88,119,.09)}.mh-action i{display:flex;align-items:center;justify-content:center;width:39px;height:39px;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--mh-blue),var(--mh-cyan))}.mh-action strong{display:block;font-size:13px}.mh-action span{display:block;color:var(--mh-muted);font-size:10px}
.mh-stat-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:11px 0;border-bottom:1px solid #edf2f6}.mh-stat-row:last-child{border-bottom:0}.mh-stat-row__label{color:var(--mh-muted);font-size:12px}.mh-stat-row__value{font-weight:800;color:var(--mh-navy-950)}.mh-progress{height:9px;border-radius:999px;background:#eaf0f4;overflow:hidden}.mh-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mh-blue),var(--mh-cyan))}.mh-empty{padding:28px;text-align:center;color:var(--mh-muted)}.mh-empty i{display:block;font-size:28px;color:#9cc9d8;margin-bottom:9px}

/* Compatibility styling for all legacy pages */
.panel{border:1px solid var(--mh-line);border-radius:var(--mh-radius);box-shadow:var(--mh-shadow);overflow:hidden}.panel-heading{padding:15px 18px!important;border:0!important;font-size:14px}.panel-body{padding:18px}.panel-primary>.panel-heading,.panel-info>.panel-heading{color:#fff;background:linear-gradient(135deg,var(--mh-navy-800),var(--mh-blue))}.panel-success>.panel-heading{color:#fff;background:linear-gradient(135deg,#087c5a,#15a57b)}.panel-warning>.panel-heading{color:#3c2b08;background:#ffe4a9}.panel-danger>.panel-heading{color:#fff;background:linear-gradient(135deg,#b72d3d,#e85665)}
.btn{border-radius:9px;border:0;font-weight:650;transition:.15s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--mh-blue)}.btn-success{background:var(--mh-success)}.btn-danger{background:var(--mh-danger)}.btn-info{background:var(--mh-cyan)}.btn-default{color:#445b6c;background:#edf3f7;border:1px solid #d9e4eb}.btn-sm{border-radius:8px}.label{display:inline-block;padding:5px 9px;border-radius:999px;font-size:10px}.label-primary,.label-success{background:var(--mh-success)}.label-danger{background:var(--mh-danger)}.label-warning{background:var(--mh-warning)}
.form-control{height:43px;border:1px solid #cedce6;border-radius:10px;box-shadow:none;background:#fbfdff}.form-control:focus{border-color:var(--mh-cyan);box-shadow:0 0 0 3px rgba(21,184,214,.12)}textarea.form-control{height:auto;min-height:100px}.form-group label{color:#334b5d;font-size:12px;font-weight:750}.help-block,.form-text{color:var(--mh-muted)}
.table-responsive{border:0;border-radius:13px}.table{margin-bottom:0;background:#fff}.table>thead>tr>th{padding:12px 11px;color:#496072;background:#eef5f8;border-bottom:1px solid #dce8ee;font-size:11px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.table>tbody>tr>td{padding:12px 11px;border-top:1px solid #edf2f5;vertical-align:middle}.table-hover>tbody>tr:hover{background:#f4fafc}.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{border:1px solid #cedce6;border-radius:8px;padding:6px;background:#fff}.pagination>li>a,.pagination>li>span{border:0;border-radius:7px!important;margin:0 2px;color:var(--mh-blue)}.pagination>.active>a{background:var(--mh-blue)}
.mh-alert{border:0;border-radius:12px;box-shadow:0 7px 20px rgba(16,53,78,.06)}.alert{border-radius:12px}.well{border:1px solid var(--mh-line);border-radius:14px;background:#f9fcfd;box-shadow:none}

/* Mobile bottom navigation */
.mh-mobile-nav{display:none}.mh-mobile-nav a{position:relative;display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#d6e2ea!important;font-size:9px;font-weight:700}.mh-mobile-nav a i{font-size:17px}.mh-mobile-nav a.active{color:#fff!important}.mh-mobile-nav a.active:before{content:"";position:absolute;top:-1px;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--mh-cyan)}

.mh-mobile-nav__primary i{display:flex!important;align-items:center;justify-content:center;width:23px;height:23px;margin-top:-7px;border:2px solid #102d40;border-radius:50%;font-size:12px!important;color:var(--mh-navy-900)!important;background:#fff!important;box-shadow:0 5px 14px rgba(0,0,0,.26)}
.mh-mobile-report-fab{display:none}

/* Footer */
.mh-footer-simple{margin-top:28px;padding:18px 0;color:#7a8e9d;font-size:11px;text-align:center;border-top:1px solid var(--mh-line)}

@media(max-width:1199px){.mh-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.mh-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991px){
  .mh-auth-shell{grid-template-columns:1fr}.mh-auth-brand{min-height:330px;padding:45px}.mh-auth-brand h1{font-size:39px}.mh-auth-panel{padding:30px 18px}
  .mh-sidebar{transform:translateX(-105%);transition:transform .22s}.mh-sidebar.open{transform:translateX(0)}.mh-sidebar-overlay{position:fixed;inset:0;z-index:1045;background:rgba(4,20,34,.53);backdrop-filter:blur(2px)}.mh-sidebar-overlay.show{display:block}.mh-topbar{left:0;height:64px;padding:0 15px}.mh-menu-toggle{display:inline-flex;align-items:center;justify-content:center}.mh-topbar__date{display:none}.mh-main{margin-left:0;padding:84px 16px 100px}.mh-mobile-nav{position:fixed;z-index:1035;left:0;right:0;bottom:0;height:68px;display:flex;padding:0 6px calc(env(safe-area-inset-bottom) / 2);background:#102d40!important;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -8px 28px rgba(4,20,34,.35);backdrop-filter:blur(14px)}.mh-mobile-report-fab{position:fixed;z-index:1036;right:16px;bottom:82px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:3px solid #fff;border-radius:50%;color:#fff!important;background:linear-gradient(135deg,#f59e0b,#e05252);box-shadow:0 8px 22px rgba(7,26,47,.32);text-decoration:none!important;transition:transform .18s,box-shadow .18s}.mh-mobile-report-fab i{font-size:19px}.mh-mobile-report-fab:active{transform:scale(.94)}.mh-mobile-report-fab.active{background:linear-gradient(135deg,var(--mh-blue),var(--mh-cyan));box-shadow:0 0 0 5px rgba(21,184,214,.18),0 8px 22px rgba(7,26,47,.32)}
}
@media(max-width:767px){
  .mh-auth-brand{min-height:270px;padding:31px 23px}.mh-auth-logo{margin:18px 0 22px;max-height:70px}.mh-auth-brand h1{font-size:31px}.mh-auth-brand p{font-size:14px;margin-bottom:18px}.mh-auth-features span:nth-child(n+3){display:none}.mh-auth-card{padding:25px 20px;border-radius:22px}.mh-auth-card h2{font-size:24px}.mh-auth-footer{flex-direction:column;gap:4px}
  .mh-topbar__title{font-size:14px}.mh-user__meta{display:none}.mh-page-head{align-items:flex-start;flex-direction:column}.mh-page-head h1{font-size:22px}.mh-grid-4,.mh-grid-3,.mh-grid-2{grid-template-columns:1fr}.mh-actions{grid-template-columns:1fr 1fr}.mh-metric{padding:17px}.mh-metric__value{font-size:24px}.mh-card__head,.mh-card__body{padding:15px}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.btn{margin-bottom:3px}.panel-body{padding:14px}
}
@media(max-width:420px){.mh-actions{grid-template-columns:1fr}.mh-mobile-nav a{font-size:8px}.mh-auth-card__head{gap:12px}.mh-auth-mark{width:45px;height:45px;flex-basis:45px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}





/* =========================================
   PEMBAYARAN TAGIHAN - COMPACT
   ========================================= */

.tagih-bayar-compact .panel-body {
    padding: 12px 18px;
}

.tagih-bayar-compact .table {
    margin-bottom: 10px;
}

.tagih-bayar-compact .table > tbody > tr > td {
    padding: 9px 10px;
    vertical-align: middle;
    line-height: 1.35;
}

.tagih-bayar-compact .form-group {
    margin-bottom: 12px;
}

.tagih-bayar-compact .form-group label {
    margin-bottom: 5px;
}

.tagih-bayar-compact .form-control {
    min-height: 38px;
    padding: 7px 12px;
}

.tagih-bayar-compact small.text-muted {
    display: block;
    margin-top: 4px;
    line-height: 1.3;
}


/* MOBILE */
@media (max-width: 767px) {

    .tagih-bayar-compact .panel-body {
        padding: 8px 10px;
    }

    .tagih-bayar-compact .table > tbody > tr > td {
        padding: 7px 6px;
        line-height: 1.25;
        font-size: 13px;
    }

    .tagih-bayar-compact .table > tbody > tr > td:first-child {
        width: 43%;
    }

    .tagih-bayar-compact .form-group {
        margin-bottom: 9px;
    }

    .tagih-bayar-compact .form-group label {
        margin-bottom: 4px;
        font-size: 13px;
    }

    .tagih-bayar-compact .form-control {
        min-height: 36px;
        height: 36px;
        padding: 6px 10px;
        font-size: 13px;
    }

    .tagih-bayar-compact small.text-muted {
        font-size: 11px;
        margin-top: 3px;
    }
}