*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f7fb;color:#172033}a{color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;background:#101827;color:#fff;padding:20px;position:fixed;inset:0 auto 0 0;z-index:30}.brand{font-size:21px;font-weight:800;margin-bottom:25px}.sidebar a{display:block;color:#c9d1df;text-decoration:none;padding:11px 13px;border-radius:9px;margin:3px 0}.sidebar a:hover,.sidebar a.active{background:#f97316;color:#fff}.menu-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#718096;margin:20px 12px 7px}.main-content{margin-left:250px;flex:1;min-width:0}.topbar{height:68px;background:#fff;border-bottom:1px solid #e4e8f0;display:flex;justify-content:flex-end;align-items:center;padding:0 25px;position:sticky;top:0;z-index:20}.top-user{display:flex;align-items:center;gap:18px}.top-user span{display:block;font-size:12px;color:#718096}.logout{font-size:13px;color:#dc2626;text-decoration:none}.menu-btn{display:none}.content-wrap{padding:26px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.page-head h1{margin:0 0 5px}.page-head p{margin:0;color:#687386}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.card,.panel{background:#fff;border:1px solid #e8ebf1;border-radius:14px;padding:20px;box-shadow:0 4px 14px rgba(15,23,42,.04)}.card span{color:#718096;font-size:13px}.card strong{display:block;font-size:25px;margin-top:10px}.card.danger strong{color:#dc2626}.card.success strong{color:#059669}.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:18px}.panel{margin-bottom:18px}.panel h2{font-size:17px;margin-top:0}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d6dbe5;border-radius:9px;background:#fff}.btn{display:inline-block;padding:11px 14px;border:0;border-radius:9px;background:#f97316;color:#fff;text-decoration:none;cursor:pointer}.btn.secondary{background:#334155}.btn.full{width:100%;margin-top:15px}.search{display:flex;gap:8px}.search input{min-width:210px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #edf0f5;text-align:left;white-space:nowrap}th{background:#fafbfc;font-size:12px;text-transform:uppercase;color:#687386}.badge{display:inline-block;padding:4px 8px;background:#dcfce7;color:#166534;border-radius:20px;font-size:11px;font-weight:700}.badge.warning{background:#fef3c7;color:#92400e}.action{font-size:13px;color:#f97316;text-decoration:none}.danger-text{color:#dc2626}.alert{padding:12px 15px;border-radius:9px;background:#dcfce7;color:#166534;margin-bottom:16px}.danger-alert{background:#fee2e2;color:#991b1b}.hint{font-size:12px;color:#718096}.quick{display:grid;gap:9px}.quick a{padding:12px;background:#f7f9fc;border-radius:9px;text-decoration:none}.footer{padding:18px 26px;color:#718096;font-size:12px}.login-body{min-height:100vh;display:grid;place-items:center;background:#eef2f7}.login-card{width:min(400px,92vw);background:#fff;padding:30px;border-radius:18px;box-shadow:0 18px 50px rgba(15,23,42,.12)}.login-logo{font-size:26px;font-weight:800}.muted2{color:#718096}.login-card label{display:block;font-size:13px;margin:14px 0 6px}.login-hint{text-align:center;color:#718096;font-size:12px;margin-top:15px}.invoice-body{background:#fff;padding:30px}.invoice{max-width:850px;margin:auto}.invoice-top,.invoice-total{display:flex;justify-content:space-between;align-items:center}.right{text-align:right}.invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:28px 0}.invoice-total{margin-top:24px;font-size:20px}.invoice small{color:#718096}.invoice p{line-height:1.6;color:#475569}@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.main-content{margin-left:0}.menu-btn{display:block;margin-right:auto}.topbar{justify-content:space-between}.content-wrap{padding:16px}.page-head{align-items:stretch;flex-direction:column}.search{width:100%}.search input{min-width:0}.cards,.form-grid{grid-template-columns:1fr}.invoice-grid{grid-template-columns:1fr}}@media print{.no-print{display:none}.invoice-body{padding:0}}.inline-form{display:inline}.btn.small{padding:7px 10px;font-size:12px}.checkline{display:flex;gap:8px;align-items:center;padding:10px 0;font-size:13px;color:#475569}.checkline input{width:auto}.status-connected{color:#166534}.status-failed{color:#991b1b}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}.hidden{display:none!important}.form-grid label{display:block;font-size:12px;font-weight:700;color:#475569;margin-bottom:6px}.field-span-2{grid-column:span 2}@media(max-width:760px){.page-actions{width:100%}.page-actions .btn{flex:1;text-align:center}.field-span-2{grid-column:span 1}}
.submenu{display:grid;gap:2px;margin:-4px 0 8px 12px}.submenu a{font-size:12px;padding:7px 10px;color:#aeb8c9;text-decoration:none;border-radius:7px}.submenu a:hover{background:#1b2638;color:#fff}.password-cell{display:flex;gap:6px;align-items:center;min-width:190px}.password-display{width:118px;padding:7px 8px;font-family:monospace}.link-button{border:0;background:transparent;padding:0;cursor:pointer;font:inherit}.compact-head{margin-top:-6px;margin-bottom:12px;justify-content:flex-end}
.actions-cell{display:flex;align-items:center;gap:8px}.billing-cards .card strong,.history-summary .card strong{font-size:21px}.filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}.filter-grid label,.detail-grid span{display:block;font-size:12px;font-weight:700;color:#64748b;margin-bottom:6px}.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.detail-grid strong{display:block}.customer-head h2{margin-bottom:5px}@media(max-width:900px){.filter-grid,.detail-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.filter-grid,.detail-grid{grid-template-columns:1fr}.actions-cell{min-width:190px;flex-wrap:wrap}}
.bulk-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:12px;background:#f8fafc;border:1px solid #e8ebf1;border-radius:10px}.bulk-check{padding:0;margin:0}.bulk-toolbar .hint{margin-right:auto}.danger-btn{background:#dc2626}.danger-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed}.select-col{width:42px;text-align:center!important}.select-col input{width:auto}@media(max-width:760px){.bulk-toolbar .hint{width:100%;order:3}.bulk-toolbar .danger-btn{margin-left:auto}}

/* xstech-Biling v14 - Tagihan Admin/status summary */
.billing-filter{min-width:min(100%,760px)}
.billing-cards-v14{grid-template-columns:repeat(3,minmax(0,1fr))}
.clickable-card{display:block;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;cursor:pointer}
.clickable-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,23,42,.10);border-color:#cbd5e1}
.clickable-card small{display:block;margin-top:8px;color:#64748b;font-size:11px}
.active-filter-card{outline:2px solid #f97316;outline-offset:1px}
.active-filter-note{margin:-4px 0 18px;padding:10px 13px;border:1px solid #dbeafe;border-radius:9px;background:#eff6ff;color:#1e40af;font-size:13px}
.active-filter-note a{color:#ea580c;font-weight:700}
@media(max-width:1000px){.billing-cards-v14{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.billing-cards-v14{grid-template-columns:1fr}.billing-filter{min-width:0}}

/* xstech-Biling v15 - Histori Pelanggan & role scope */
.history-cards-v15{grid-template-columns:repeat(4,minmax(0,1fr))}
.history-table .history-detail{white-space:normal;min-width:260px;line-height:1.55}
.status-flow{font-size:12px;white-space:nowrap}
.role-scope-note{margin:0;line-height:1.6}
.history-filter{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.history-cards-v15,.history-filter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.history-cards-v15,.history-filter{grid-template-columns:1fr}}
/* xstech-Biling v17 - Backup Database */
.backup-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}.backup-cards .card strong{font-size:20px;word-break:break-word}.backup-note{margin-top:18px;padding:14px 16px;border:1px solid #dbe4f0;background:#f8fafc;border-radius:10px;color:#475569;line-height:1.65}@media(max-width:760px){.backup-cards{grid-template-columns:1fr}}
/* xstech-Biling v20 - PPPoE Queue */
.action-btn{border:0;background:transparent;color:#f97316;padding:0 3px;cursor:pointer;font-size:13px}.action-btn:hover{text-decoration:underline}.table-wrap .inline-form{white-space:nowrap}.pppoe-note{padding:12px 14px;border:1px solid #dbeafe;background:#eff6ff;border-radius:10px;color:#1e3a8a;font-size:13px}

/* xstech-Biling v26 - badge status pelanggan */
.badge.status-aktif{background:#dcfce7;color:#166534}
.badge.status-nonaktif{background:#fee2e2;color:#991b1b}
.badge.status-isolir{background:#e5e7eb;color:#4b5563}

/* xstech-Biling v28 - warna badge status pelanggan (paksa override cache/style lama) */
.badge.status-aktif{background:#dcfce7!important;color:#166534!important;border:1px solid #bbf7d0!important}
.badge.status-nonaktif{background:#fee2e2!important;color:#b91c1c!important;border:1px solid #fecaca!important}
.badge.status-isolir{background:#e5e7eb!important;color:#4b5563!important;border:1px solid #d1d5db!important}

/* xstech-Biling v35 - Monitoring PPPoE */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filters select,.filters input{min-width:210px}
.router-error{font-size:12px;color:#b91c1c;margin-top:5px;max-width:460px;white-space:normal}
@media(max-width:700px){.filters select,.filters input{width:100%;min-width:0}}

/* xstech-Biling v36 - Approve PPPoE dari monitoring */
.btn-sm{padding:5px 9px;font-size:12px;line-height:1.2;margin-left:6px;display:inline-block}

/* xstech-Biling v37 - Monitoring PPPoE on-demand */
.monitor-meta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.monitor-meta .btn{margin-left:auto}
.empty-state{text-align:center;padding:28px 12px;color:#64748b}
.empty-state h2{color:#0f172a;margin-bottom:8px}
.filters label{display:block;font-size:12px;font-weight:700;color:#64748b;margin-bottom:6px}
@media(max-width:700px){.monitor-meta .btn{margin-left:0;width:100%}}

/* xstech-Biling v38 - monitoring cache */

/* xstech-Biling v39 - Dashboard PPPoE cache */
.site-online-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.site-online-card{display:block;padding:16px;border:1px solid #e2e8f0;border-radius:12px;text-decoration:none;background:#fff;color:#0f172a}
.site-online-card:hover{border-color:#fdba74;box-shadow:0 6px 18px rgba(15,23,42,.08)}
.site-online-card span,.site-online-card small{display:block;color:#64748b}
.site-online-card strong{display:block;font-size:28px;margin:6px 0;color:#166534}

/* xstech-Biling v42 - Billing Cycle */
.billing-cycle-note{border-left:4px solid #f97316;line-height:1.65}

/* xstech-Biling v43 - VPN Server blue UI */
.vpn-summary .card{border-top:3px solid #f97316}
.vpn-summary .card.success{border-top-color:#16a34a}
.vpn-info{border-left:4px solid #f97316;background:#111827}
.menu-new{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:5px;background:#22c55e;color:#fff;font-size:9px;font-weight:700}

/* v49 PPPoE dashboard diagram */
.pppoe-dashboard-total{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:14px 16px;margin-bottom:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}
.pppoe-dashboard-total span{font-weight:700}.pppoe-dashboard-total strong{font-size:34px}.pppoe-dashboard-total small{color:#64748b}
.pppoe-site-chart{display:grid;gap:10px}
.pppoe-chart-row{display:grid;grid-template-columns:minmax(120px,220px) 1fr 54px;gap:12px;align-items:center;text-decoration:none;color:inherit;padding:8px 0}
.pppoe-chart-label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pppoe-chart-track{height:18px;background:#e8edf5;border-radius:999px;overflow:hidden;display:block}
.pppoe-chart-bar{height:100%;display:block;background:#2f66eb;border-radius:999px;min-width:6px}
.pppoe-chart-row strong{text-align:right;font-size:18px}
@media(max-width:700px){.pppoe-chart-row{grid-template-columns:100px 1fr 42px}.pppoe-chart-label{font-size:13px}}

/* v50 PPPoE live vs peak */
.pppoe-legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px;color:#64748b;font-size:13px}
.pppoe-legend span{display:flex;align-items:center;gap:7px}
.pppoe-legend i{display:inline-block;width:22px;height:10px;border-radius:999px}
.legend-live{background:#f97316}.legend-peak{background:#bfdbfe}
.pppoe-dual-track{position:relative;height:20px;background:#eef2f7;border-radius:999px;overflow:hidden;display:block}
.pppoe-peak-bar,.pppoe-live-bar{position:absolute;left:0;top:0;height:100%;border-radius:999px;transition:width .35s ease}
.pppoe-peak-bar{background:#bfdbfe;z-index:1}
.pppoe-live-bar{background:#f97316;z-index:2}
.pppoe-chart-values{display:flex;align-items:baseline;justify-content:flex-end;gap:2px;white-space:nowrap}
.pppoe-chart-values small{color:#64748b}
.pppoe-live-row.router-offline{opacity:.55}

/* v55 - PPPoE realtime vs peak: kedua warna selalu terlihat */
.pppoe-dual-track{
  position:relative;
  height:22px;
  background:#eef2f7;
  border-radius:999px;
  overflow:hidden;
  display:block;
}
.pppoe-peak-bar{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  border-radius:999px;
  background:#bfdbfe;
  z-index:1;
  transition:width .35s ease;
}
.pppoe-live-bar{
  position:absolute;
  left:0;
  top:5px;
  height:12px;
  border-radius:999px;
  background:#f97316;
  z-index:2;
  transition:width .35s ease;
  box-shadow:0 0 0 1px rgba(255,255,255,.45);
}
.legend-live{background:#f97316}
.legend-peak{background:#bfdbfe}

/* v59 - Dashboard trafik WAN + CPU MikroTik */
.network-filter-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:16px}
.network-filter-row>div{min-width:180px;flex:1}
.network-filter-row label{display:block;font-size:12px;font-weight:700;color:#64748b;margin-bottom:6px}
.network-filter-row select{width:100%}
.network-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 18px}
.network-metric{padding:14px 16px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}
.network-metric span,.network-metric small{display:block;color:#64748b}.network-metric strong{display:block;font-size:26px;margin:5px 0;color:#0f172a}
.cpu-load-track{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:9px}.cpu-load-track i{display:block;height:100%;width:0;background:#f97316;border-radius:999px;transition:width .35s ease}
.network-error{padding:10px 12px;border:1px solid #fecaca;background:#fef2f2;color:#991b1b;border-radius:10px;margin-bottom:14px}
.network-chart-grid h3{font-size:15px;margin:0 0 10px;color:#334155}
@media(max-width:900px){.network-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.network-metric-grid{grid-template-columns:1fr}.network-filter-row{align-items:stretch}.network-filter-row .btn{width:100%}}

/* v60 update - pengaturan Interface WAN menyatu di Traffic & CPU Server */
.network-page-head{align-items:center;gap:16px;flex-wrap:wrap}
.network-tabs{display:flex;gap:8px;flex-wrap:wrap}
.network-tab-btn.active{cursor:default}
.network-wan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.network-wan-head h2{margin:0 0 5px}
.network-wan-table select{min-width:230px;width:100%}
.network-wan-table td{vertical-align:middle}
.wan-actions{white-space:nowrap}
.wan-row-status{display:inline-block;max-width:260px}
@media(max-width:760px){.network-tabs{width:100%}.network-tabs .btn{flex:1}.network-wan-head .btn{width:100%}}


/* v60 - Monitoring PPPoE: kolom Aksi selalu terlihat dan tombol Approve tidak terpotong */
.pppoe-active-table-wrap{position:relative;overflow-x:auto;overflow-y:visible;padding-bottom:2px}
.pppoe-active-table{min-width:1120px}
.pppoe-active-table .pppoe-action-col{position:sticky;right:0;z-index:3;min-width:132px;width:132px;text-align:center;background:#fff;box-shadow:-7px 0 10px -10px rgba(15,23,42,.45)}
.pppoe-active-table thead .pppoe-action-col{z-index:4;background:#f8fafc}
.pppoe-active-table .pppoe-approve-btn{display:inline-flex;align-items:center;justify-content:center;margin:0!important;min-width:78px;white-space:nowrap}
.pppoe-active-table .pppoe-view-link{display:inline-block;white-space:nowrap}
@media(max-width:700px){
  .pppoe-active-table{min-width:1040px}
  .pppoe-active-table .pppoe-action-col{min-width:116px;width:116px;padding-left:8px;padding-right:8px}
  .pppoe-active-table .pppoe-approve-btn{min-width:72px}
}

.account-settings-panel{max-width:850px}.account-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}.account-summary>div{padding:13px 14px;border:1px solid #e8ebf1;border-radius:10px;background:#fafbfc}.account-summary span{display:block;color:#718096;font-size:12px;margin-bottom:5px}.account-summary strong{font-size:14px}.account-settings-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.account-settings-form label{display:block;font-size:12px;font-weight:700;color:#475569;margin-bottom:6px}.account-settings-form .hint{margin:6px 0 0}.account-save-row{display:flex;justify-content:flex-start;margin-top:2px}@media(max-width:760px){.account-summary,.account-settings-form{grid-template-columns:1fr}.account-settings-form .field-span-2{grid-column:span 1}.account-save-row .btn{width:100%}}

/* WhatsApp Gateway sebagai menu utama terpisah, bukan bagian Transaksi */
.sidebar .menu-separator{height:1px;background:rgba(148,163,184,.18);margin:18px 12px 12px}
.sidebar a.menu-main{font-weight:600;color:#e5e7eb;margin-bottom:10px}

/* v61 - Sidebar dropdown/collapse */
.sidebar{overflow-y:auto;overflow-x:hidden}
.sidebar-nav{padding-bottom:24px}
.sidebar-dashboard{margin-bottom:10px!important}
.nav-group{margin:5px 0}
.nav-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;color:#8ea0bb;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left}
.nav-group-toggle:hover{background:#172235;color:#dbe5f3}
.nav-chevron{font-size:16px;line-height:1;transition:transform .18s ease;color:#718096}
.nav-group.open .nav-chevron{transform:rotate(180deg)}
.nav-group-items{display:none;padding:1px 0 5px 8px}
.nav-group.open .nav-group-items{display:block}
.nav-group-items a{padding:9px 12px;margin:2px 0;font-size:14px}
.nav-group-items a.active{font-weight:600}
@media(max-width:760px){.sidebar{overflow-y:auto}}

/* v61.1 - Native responsive sidebar dropdown fix */
.sidebar{width:260px;padding:18px 14px;scrollbar-width:thin;overscroll-behavior:contain}
.main-content{margin-left:260px}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px}
.sidebar-head .brand{margin-bottom:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-close{display:none;border:0;background:transparent;color:#cbd5e1;font-size:28px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px}
.sidebar-close:hover{background:#1e293b;color:#fff}
.sidebar-backdrop{display:none}

/* details/summary dipakai agar dropdown tetap bekerja tanpa JavaScript */
.nav-group{display:block;margin:5px 0;border:0}
.nav-group>summary{list-style:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:transparent;color:#8ea0bb;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;user-select:none}
.nav-group-toggle:hover,.nav-group[open]>.nav-group-toggle{background:#172235;color:#dbe5f3}
.nav-chevron{font-size:16px;line-height:1;transition:transform .18s ease;color:#94a3b8;flex:0 0 auto}
.nav-group[open]>.nav-group-toggle .nav-chevron{transform:rotate(180deg)}
.nav-group-items{display:grid!important;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .18s ease,opacity .16s ease;padding:0 0 0 8px}
.nav-group-items>*{overflow:hidden}
.nav-group[open]>.nav-group-items{grid-template-rows:1fr;opacity:1;padding-top:2px;padding-bottom:5px}
.nav-group-items a{min-width:0;padding:9px 12px;margin:2px 0;font-size:14px;white-space:normal;line-height:1.25;overflow-wrap:anywhere}
.nav-group-items a.active{font-weight:700}

/* Desktop/tablet medium */
@media (max-width:1100px) and (min-width:761px){
  .sidebar{width:230px;padding-left:10px;padding-right:10px}
  .main-content{margin-left:230px}
  .brand{font-size:19px}
  .nav-group-items a{font-size:13px}
  .content-wrap{padding:20px}
}

/* Mobile / small tablet */
@media(max-width:760px){
  body.sidebar-open{overflow:hidden}
  .sidebar{width:min(86vw,320px);transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 30px rgba(15,23,42,.28);padding-top:14px;z-index:60}
  .sidebar.open{transform:translateX(0)}
  .main-content{margin-left:0}
  .sidebar-close{display:block}
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.46);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:50}
  .sidebar-backdrop.show{opacity:1;visibility:visible}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:1px solid #dbe1ea;border-radius:10px;background:#fff;color:#172033;cursor:pointer;font-size:22px;margin-right:auto}
  .topbar{height:60px;padding:0 14px;gap:10px}
  .top-user{gap:10px;min-width:0}
  .top-user>div{min-width:0;max-width:48vw}
  .top-user strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
  .top-user span{font-size:10px}
  .logout{font-size:12px}
  .content-wrap{padding:14px}
  .page-head{gap:10px;margin-bottom:14px}
  .page-head h1{font-size:26px;line-height:1.15}
  .card,.panel{padding:14px;border-radius:12px}
  .table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
  th,td{padding:10px}
}

@media(max-width:420px){
  .sidebar{width:92vw}
  .brand{font-size:19px}
  .top-user>div{max-width:42vw}
  .content-wrap{padding:12px}
  .page-head h1{font-size:23px}
  .btn{padding:10px 12px}
}
/* Native details visibility: closed groups must stay hidden even with legacy v61 rules above. */
details.nav-group:not([open])>.nav-group-items{display:none!important}
details.nav-group[open]>.nav-group-items{display:block!important;opacity:1;padding:2px 0 5px 8px}

/* xstech-Biling v62 - Tagihan layout refinement */
.billing-page-head{margin-bottom:12px;align-items:flex-start}
.billing-filter-v62{margin-bottom:18px;grid-template-columns:repeat(5,minmax(150px,1fr));align-items:end;padding:16px 18px}
.billing-filter-v62>div{min-width:0}
.billing-filter-v62 input,.billing-filter-v62 select{min-height:42px}
.billing-filter-action{display:flex;align-items:flex-end}
.billing-filter-action .btn{width:100%;min-height:42px;display:flex;align-items:center;justify-content:center}
.billing-cycle-note{padding:13px 16px;line-height:1.55}
.billing-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:260px}
.billing-actions .btn.small,.billing-actions .action{white-space:nowrap}
.billing-actions .action{display:inline-flex;align-items:center;min-height:32px;padding:6px 8px;border-radius:7px;background:#f8fafc}
.billing-actions .action:hover{background:#eff6ff;text-decoration:none}
@media(max-width:1200px){.billing-filter-v62{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.billing-filter-v62{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-actions{min-width:220px}}
@media(max-width:560px){.billing-filter-v62{grid-template-columns:1fr;padding:14px}.billing-filter-action .btn{width:100%}.billing-actions{min-width:190px}.billing-cycle-note{font-size:13px}}

/* v62.2 - Modul Pengeluaran */
.expense-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.expense-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end}
.expense-form-grid label{display:block;font-size:12px;font-weight:700;color:#475569;margin-bottom:6px}
.expense-notes{grid-column:span 2}
.expense-save{display:flex;align-items:flex-end}
.expense-save .btn{width:100%;min-height:42px}
.expense-desc{white-space:normal;min-width:260px;max-width:420px;line-height:1.45}
.expense-cancelled{opacity:.65;background:#fafafa}
.expense-actions{min-width:145px;flex-wrap:wrap}
@media(max-width:1000px){.expense-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.expense-notes{grid-column:span 2}}
@media(max-width:760px){.expense-summary,.expense-form-grid{grid-template-columns:1fr}.expense-notes{grid-column:span 1}.expense-save .btn{width:100%}.expense-desc{min-width:200px}}

/* v62 - Pengeluaran lebih ringkas dan responsif */
.expense-entry-panel{overflow:hidden}
.expense-form-grid>div{min-width:0}
.expense-form-grid input,.expense-form-grid select,.expense-form-grid textarea{width:100%;box-sizing:border-box}
.expense-form-grid input[readonly]{background:#f8fafc;color:#475569}
.expense-table-wrap table{min-width:820px}
.expense-table-wrap th,.expense-table-wrap td{vertical-align:middle}
@media(max-width:1180px){
  .expense-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .expense-notes{grid-column:span 2}
}
@media(max-width:760px){
  .expense-form-grid{grid-template-columns:1fr}
  .expense-notes{grid-column:span 1}
  .expense-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

.expense-history-head{margin-bottom:14px}.expense-history-head h2{margin:0 0 4px}.expense-history-head p{margin:0;color:#64748b;font-size:13px}


/* v62.4 - Setoran Admin & Approval Owner */
.settlement-owner-alert{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.settlement-owner-alert a{font-weight:700}
.settlement-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.settlement-period-form{display:flex;align-items:end;gap:12px;margin-bottom:16px}.settlement-period-form>div{min-width:220px}.settlement-period-form label,.settlement-submit-form label{display:block;font-size:12px;font-weight:700;color:#475569;margin-bottom:6px}
.settlement-submit-form{display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:12px;align-items:end;margin-top:14px}.settlement-submit-form .btn{min-height:42px}
.settlement-table{min-width:1050px}.settlement-actions{display:grid;gap:8px;min-width:180px}.settlement-actions form{display:grid;grid-template-columns:1fr auto;gap:6px}.small-input{min-width:110px;padding:7px 8px!important}.badge.pending{background:#fef3c7;color:#92400e}.badge.approved{background:#dcfce7;color:#166534}.badge.ditolak{background:#fee2e2;color:#991b1b}
@media(max-width:820px){.settlement-cards{grid-template-columns:1fr}.settlement-period-form{align-items:stretch;flex-direction:column}.settlement-period-form>div{min-width:0}.settlement-submit-form{grid-template-columns:1fr}.settlement-submit-form .btn{width:100%}}

/* v62 responsive period picker: desktop uses stable Month + Year controls; mobile keeps native month picker */
.x-responsive-period{width:100%;min-width:180px}
.x-period-desktop{display:grid;grid-template-columns:minmax(145px,1fr) minmax(105px,.65fr);gap:8px;align-items:center}
.x-period-desktop select,.x-period-desktop input{width:100%;min-height:44px}
.x-period-mobile{display:none;width:100%;min-height:44px}
@media(max-width:760px){
  .x-period-desktop{display:none!important}
  .x-period-mobile{display:block!important}
}

/* v62 transaction page toolbar consistency */
.transaction-page-head{align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.transaction-page-head>div:first-child{min-width:0;flex:1}
.transaction-page-actions{margin-left:auto;align-self:flex-start;justify-content:flex-end}
.transaction-page-actions .btn{min-width:126px;text-align:center;white-space:nowrap}
.billing-filter-v62{grid-template-columns:repeat(4,minmax(160px,1fr))}
.billing-filter-submit{align-self:end}
.history-filter-grid{grid-template-columns:repeat(4,minmax(160px,1fr));padding:16px 18px}
.history-filter-grid>div{min-width:0}
.history-filter-grid input,.history-filter-grid select{min-height:42px}
.history-filter-action{display:flex;align-items:flex-end}
.history-filter-action .btn{width:100%;min-height:42px;margin-top:0;display:flex;align-items:center;justify-content:center}
@media(max-width:1100px){.billing-filter-v62,.history-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.transaction-page-head{flex-direction:column;align-items:stretch}.transaction-page-actions{width:100%;margin-left:0}.transaction-page-actions .btn{width:100%}.billing-filter-v62,.history-filter-grid{grid-template-columns:1fr;padding:14px}.history-filter-action .btn{width:100%}}

/* v62.34 - Pagination 15 data */
.xstech-pagination{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin:12px 0 20px;
}
.xstech-pagination-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:110px;
  min-height:38px;
  padding:0 12px;
  border:1px solid #dbe3ee;
  border-radius:9px;
  background:#fff;
  font-size:13px;
  font-weight:600;
  color:#475569;
}
.xstech-pagination .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
@media(max-width:600px){
  .xstech-pagination{
    justify-content:space-between;
    gap:7px;
  }
  .xstech-pagination .btn{
    flex:1;
    min-width:0;
  }
  .xstech-pagination-info{
    min-width:88px;
    padding:0 8px;
  }
}

/* v62.37 - Sidebar non-OWNER tanpa dropdown */
.nav-flat-section{margin-top:12px}
.nav-flat-title{
  padding:10px 12px 6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
}
.nav-flat-section>a{
  display:block;
  margin:2px 6px;
}

/* v62.38 - Sidebar icon system */
.sidebar-nav a{
  display:flex;
  align-items:center;
}
.nav-link-inner{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  width:100%;
}
.nav-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#8fb8e8;
}
.nav-icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
  display:block;
}
.sidebar-nav a.active .nav-icon{
  color:#fff;
}
.nav-flat-section>a:hover .nav-icon,
.nav-group-items>a:hover .nav-icon,
.sidebar-dashboard:hover .nav-icon{
  color:#dbeafe;
}
.sidebar-dashboard .nav-link-inner{
  font-weight:500;
}
@media(max-width:760px){
  .nav-icon,.nav-icon svg{
    width:19px;
    height:19px;
  }
}

/* v62.79 OWNER Dashboard + Notification Center */
.owner-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;text-decoration:none}
.owner-bell .nav-icon{width:20px;height:20px}.owner-bell b{position:absolute;right:-5px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.owner-profit-cards{margin-top:14px}.owner-finance-grid{margin-top:14px}.owner-finance-grid .panel{min-height:330px}.owner-finance-grid canvas{max-height:245px}
.owner-notification-panel{margin-bottom:16px}.notification-list{padding:8px 14px}.notification-row{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:12px 8px;border-bottom:1px solid #eef2f7;text-decoration:none;color:inherit}
.notification-row:last-child{border-bottom:0}.notification-row small{display:block;color:#64748b;margin-top:3px}.notification-row time{font-size:12px;color:#64748b;white-space:nowrap}.notification-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1}.notification-row.unread{background:#eff6ff}.notification-row.unread .notification-dot{background:#f97316}
@media(max-width:760px){.notification-row{grid-template-columns:10px 1fr}.notification-row time{grid-column:2}.owner-finance-grid .panel{min-height:300px}}

/* v62.80 - Dashboard privacy + analytics */
.dashboard-privacy-toggle{display:inline-flex;align-items:center;gap:7px}
.privacy-value{font-variant-numeric:tabular-nums}
.privacy-chart-wrap{position:relative}
.privacy-chart-mask{position:absolute;inset:0;z-index:5;border-radius:14px;background:rgba(248,250,252,.96);backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;border:1px solid #e2e8f0}
.privacy-chart-mask>span{font-size:30px}.privacy-chart-mask>strong{font-size:16px}.privacy-chart-mask>small{color:#64748b}
.privacy-chart-mask.hidden{display:none}
.admin-settlement-analytics{margin-top:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-finance-trend{margin-top:14px;min-height:320px}.admin-finance-trend canvas{max-height:245px}
.customer-status-dashboard{margin-top:14px}.customer-status-current{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}
.customer-status-chart{height:270px}
.customer-status-current .billing-isolir-card{background:#fff7ed;border-color:#fdba74}
@media(max-width:900px){.admin-settlement-analytics,.customer-status-current{grid-template-columns:1fr}.customer-status-chart{height:300px}}


/* v62.85 - Dashboard normal tanpa hide/show */
.owner-finance-trend-only{margin-top:14px;min-height:330px}
.owner-finance-trend-only canvas{max-height:260px}

/* v62.86 - responsive cleanup HP */
@media (max-width:760px){
  .page-head{gap:10px;align-items:flex-start}
  .cards,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important}
  .card{min-width:0}
  .owner-finance-trend-only{min-height:280px}
  .owner-finance-trend-only canvas,
  #customerStatusTrend,
  #adminFinanceTrend{width:100%!important;max-width:100%;max-height:230px}
  .panel{min-width:0;overflow:hidden}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:480px){
  .owner-finance-trend-only{min-height:250px}
  .owner-finance-trend-only canvas,
  #customerStatusTrend,
  #adminFinanceTrend{max-height:205px}
}

/* =========================================================
   xstech-Biling v62.88 - Modern Admin Dashboard Design System
   UI only. No database/data changes.
   ========================================================= */
:root{
  --xs-bg:#f4f7fb;
  --xs-surface:#ffffff;
  --xs-surface-2:#f8fafc;
  --xs-surface-3:#eef3f9;
  --xs-text:#0f172a;
  --xs-muted:#64748b;
  --xs-border:#e2e8f0;
  --xs-primary:#0d6efd;
  --xs-primary-2:#f97316;
  --xs-primary-soft:#eaf3ff;
  --xs-success:#16a34a;
  --xs-success-soft:#e9f9ef;
  --xs-warning:#f59e0b;
  --xs-warning-soft:#fff7e6;
  --xs-danger:#ef4444;
  --xs-danger-soft:#fff0f0;
  --xs-purple:#7c3aed;
  --xs-shadow:0 10px 28px rgba(15,23,42,.06);
  --xs-shadow-hover:0 16px 40px rgba(15,23,42,.10);
  --xs-sidebar:#0b1523;
  --xs-sidebar-2:#101d2e;
  --xs-sidebar-text:#c4d0df;
  --xs-sidebar-muted:#7f91a8;
  --xs-topbar:rgba(255,255,255,.92);
  --xs-chart-grid:rgba(100,116,139,.16);
  --xs-radius:14px;
  --xs-gap:16px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --xs-bg:#07111e;
  --xs-surface:#0d1928;
  --xs-surface-2:#101f31;
  --xs-surface-3:#15263a;
  --xs-text:#edf4ff;
  --xs-muted:#91a4bc;
  --xs-border:#203249;
  --xs-primary:#1683ff;
  --xs-primary-2:#2a8cff;
  --xs-primary-soft:#0e2a49;
  --xs-success:#32d06c;
  --xs-success-soft:#0e3020;
  --xs-warning:#fbbf24;
  --xs-warning-soft:#39280b;
  --xs-danger:#ff5b62;
  --xs-danger-soft:#3b171c;
  --xs-purple:#9b6cff;
  --xs-shadow:0 12px 32px rgba(0,0,0,.24);
  --xs-shadow-hover:0 18px 44px rgba(0,0,0,.34);
  --xs-sidebar:#07111d;
  --xs-sidebar-2:#0a1726;
  --xs-sidebar-text:#d7e2ef;
  --xs-sidebar-muted:#7f93ab;
  --xs-topbar:rgba(7,17,30,.92);
  --xs-chart-grid:rgba(148,163,184,.13);
  color-scheme:dark;
}

html,body{background:var(--xs-bg);color:var(--xs-text)}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  transition:background .2s ease,color .2s ease;
}
.app-shell{background:var(--xs-bg)}
.main-content{background:var(--xs-bg)}
.content-wrap{padding:24px 28px 30px;max-width:1920px;width:100%;margin:0 auto}

/* Sidebar */
.sidebar{
  width:252px;
  background:#111827;
  border-right:1px solid rgba(148,163,184,.10);
  padding:18px 14px;
  box-shadow:10px 0 34px rgba(0,0,0,.08);
}
.main-content{margin-left:252px}
.sidebar-head{padding:0 8px 14px;margin-bottom:8px;border-bottom:1px solid rgba(148,163,184,.12)}
.modern-brand{display:flex;align-items:center;gap:10px;margin:0!important}
.brand-mark{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:#111827;color:#fff;
  font-weight:900;letter-spacing:-1px;box-shadow:0 8px 20px rgba(13,110,253,.28)
}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-copy strong{font-size:19px;letter-spacing:.03em}
.brand-copy small{font-size:11px;color:#d0d9e5;margin-top:5px;letter-spacing:.08em}
.brand-copy em{font-style:normal;color:#4facff;margin-left:4px;font-weight:800}
.sidebar-nav{padding-top:4px}
.sidebar a{
  border-radius:9px;margin:3px 0;padding:10px 11px;
  color:var(--xs-sidebar-text);font-weight:500;font-size:13px;
  transition:.16s ease;
}
.sidebar a:hover{background:rgba(64,125,197,.13);color:#fff;transform:translateX(1px)}
.sidebar a.active{
  background:#111827;color:#fff;
  box-shadow:0 8px 18px rgba(13,110,253,.20)
}
.nav-icon{width:18px;height:18px;opacity:.9}
.nav-flat-title,.nav-group-toggle{
  color:var(--xs-sidebar-muted)!important;
  font-size:10px!important;font-weight:800!important;text-transform:uppercase;
  letter-spacing:.11em;
}
.nav-group-toggle{padding:12px 9px 6px!important}
.nav-group-items{padding-left:5px}
.nav-group-items a{font-size:12.5px}
.nav-chevron{font-size:15px}
.sidebar-close{color:#fff;background:transparent;border:0}

/* Topbar */
.topbar{
  height:64px;
  background:var(--xs-topbar);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--xs-border);
  padding:0 28px;
  justify-content:flex-start;
}
.topbar-spacer{flex:1}
.top-actions{display:flex;align-items:center;gap:8px}
.top-icon-btn{
  width:38px;height:38px;display:inline-grid;place-items:center;padding:0;
  border:1px solid var(--xs-border);border-radius:10px;
  background:var(--xs-surface);color:var(--xs-text);text-decoration:none;
  cursor:pointer;transition:.16s ease;
}
.top-icon-btn:hover{background:var(--xs-surface-2);border-color:#94a3b8;transform:translateY(-1px)}
.owner-bell{position:relative}
.owner-bell .nav-icon{width:18px;height:18px}
.owner-bell b{
  position:absolute;right:-5px;top:-6px;min-width:18px;height:18px;padding:0 4px;
  display:grid;place-items:center;background:var(--xs-danger);color:#fff;border-radius:20px;
  font-size:10px;border:2px solid var(--xs-surface)
}
.modern-top-user{gap:10px;margin-left:6px;padding-left:10px;border-left:1px solid var(--xs-border)}
.user-avatar{
  width:34px;height:34px;border-radius:50%;display:grid!important;place-items:center;
  background:#111827;color:#223248!important;font-weight:800
}
.user-meta strong{font-size:12.5px}
.user-meta span{font-size:10px;color:var(--xs-muted)!important;margin-top:2px}
.logout{font-size:11px;margin-left:4px}

/* Typography / page heads */
.page-head{margin-bottom:18px}
.page-head h1{font-size:28px;letter-spacing:-.025em;color:var(--xs-text)}
.page-head h2{color:var(--xs-text)}
.page-head p,.hint,.muted2{color:var(--xs-muted)}
h1,h2,h3,h4,strong{color:inherit}

/* Cards / panels */
.cards{gap:var(--xs-gap)}
.card,.panel{
  background:var(--xs-surface);
  border:1px solid var(--xs-border);
  border-radius:var(--xs-radius);
  box-shadow:var(--xs-shadow);
}
.card{padding:18px 20px;position:relative;overflow:hidden}
.card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:transparent;border-radius:var(--xs-radius) 0 0 var(--xs-radius)
}
.card.success:before{background:var(--xs-success)}
.card.danger:before{background:var(--xs-danger)}
.card span{color:var(--xs-muted)}
.card strong{font-size:24px;letter-spacing:-.02em}
.card.success strong{color:var(--xs-success)}
.card.danger strong{color:var(--xs-danger)}
.clickable-card{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.clickable-card:hover{transform:translateY(-2px);box-shadow:var(--xs-shadow-hover);border-color:rgba(13,110,253,.45)}
.panel{padding:18px 20px}
.panel h2{font-size:16px;letter-spacing:-.01em}
.quick a,.bulk-toolbar{
  background:var(--xs-surface-2);border-color:var(--xs-border)
}

/* Forms */
input,select,textarea{
  background:var(--xs-surface-2);color:var(--xs-text);border-color:var(--xs-border);
  border-radius:9px;outline:none;transition:.15s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--xs-primary);box-shadow:0 0 0 3px rgba(13,110,253,.12)
}
input::placeholder,textarea::placeholder{color:#8290a3}
.form-grid label,.filter-grid label,.detail-grid span,.checkline{color:var(--xs-muted)}
.btn{
  border-radius:9px;background:#111827;
  box-shadow:0 4px 10px rgba(13,110,253,.15);font-weight:600;
  transition:.15s ease;
}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.secondary{background:var(--xs-surface-3);color:var(--xs-text);border:1px solid var(--xs-border);box-shadow:none}
.danger-btn{background:var(--xs-danger)}
.link-button{color:var(--xs-primary)}

/* Tables */
.table-wrap{
  border-radius:var(--xs-radius);background:var(--xs-surface);
  border:1px solid var(--xs-border);
}
table{background:var(--xs-surface);color:var(--xs-text)}
th{
  background:var(--xs-surface-2)!important;color:var(--xs-muted)!important;
  border-bottom:1px solid var(--xs-border)!important;
  font-size:10.5px;letter-spacing:.035em
}
td{border-bottom:1px solid var(--xs-border)!important}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--xs-surface-2)}
code{background:var(--xs-surface-3);color:var(--xs-text);padding:2px 5px;border-radius:5px}

/* Status badges */
.badge{border-radius:6px;font-size:10px;padding:4px 8px;letter-spacing:.01em}
.status-aktif,.badge.status-aktif,.badge:not(.warning){
  background:var(--xs-success-soft);color:var(--xs-success)
}
.status-nonaktif,.badge.status-nonaktif{background:var(--xs-danger-soft);color:var(--xs-danger)}
.status-isolir,.badge.status-isolir,.badge.warning{background:var(--xs-warning-soft);color:var(--xs-warning)}
.alert{background:var(--xs-success-soft);color:var(--xs-success);border:1px solid color-mix(in srgb,var(--xs-success) 25%,transparent)}
.danger-alert{background:var(--xs-danger-soft);color:var(--xs-danger);border-color:color-mix(in srgb,var(--xs-danger) 25%,transparent)}
.active-filter-note{background:var(--xs-primary-soft);border-color:rgba(13,110,253,.26);color:var(--xs-primary)}

/* Dashboard/chart polish */
.owner-finance-trend-only,.customer-status-dashboard,.admin-finance-trend{overflow:hidden}
canvas{max-width:100%}
.billing-isolir-card{background:var(--xs-warning-soft)!important;border-color:color-mix(in srgb,var(--xs-warning) 35%,var(--xs-border))!important}

/* Appearance drawer */
.appearance-drawer{
  position:fixed;top:0;right:0;width:min(360px,92vw);height:100vh;z-index:90;
  background:var(--xs-surface);border-left:1px solid var(--xs-border);box-shadow:-18px 0 50px rgba(0,0,0,.18);
  padding:20px;transform:translateX(105%);transition:transform .22s ease;color:var(--xs-text);
}
.appearance-drawer.open{transform:translateX(0)}
.appearance-backdrop{
  position:fixed;inset:0;background:rgba(2,8,23,.42);z-index:89;
  opacity:0;visibility:hidden;transition:.2s ease
}
.appearance-backdrop.show{opacity:1;visibility:visible}
.appearance-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--xs-border)}
.appearance-head strong{font-size:17px}.appearance-head small{display:block;color:var(--xs-muted);font-size:11px;margin-top:4px}
.appearance-close{border:0;background:var(--xs-surface-2);color:var(--xs-text);width:32px;height:32px;border-radius:8px;cursor:pointer}
.appearance-section{padding:18px 0;border-bottom:1px solid var(--xs-border)}
.appearance-section>label{display:block;font-size:12px;font-weight:800;margin-bottom:10px;color:var(--xs-text)}
.theme-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.theme-choice{
  text-align:left;border:1px solid var(--xs-border);background:var(--xs-surface-2);color:var(--xs-text);
  border-radius:11px;padding:13px;cursor:pointer;display:grid;grid-template-columns:30px 1fr;column-gap:8px
}
.theme-choice>span{grid-row:1/3;font-size:20px}.theme-choice strong{font-size:12px}.theme-choice small{font-size:10px;color:var(--xs-muted)}
.theme-choice.active{border-color:var(--xs-primary);box-shadow:0 0 0 2px rgba(13,110,253,.10);background:var(--xs-primary-soft)}
.density-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.density-choice button{
  border:1px solid var(--xs-border);background:var(--xs-surface-2);color:var(--xs-text);padding:9px 5px;border-radius:8px;cursor:pointer;font-size:11px
}
.density-choice button.active{border-color:var(--xs-primary);background:var(--xs-primary-soft);color:var(--xs-primary);font-weight:700}
.appearance-note{margin-top:18px;padding:12px;border-radius:10px;background:var(--xs-surface-2);color:var(--xs-muted);font-size:11px;line-height:1.5}

/* Density */
html[data-density="compact"] .card,html[data-density="compact"] .panel{padding:13px 15px}
html[data-density="compact"] th,html[data-density="compact"] td{padding:8px 9px}
html[data-density="compact"] .sidebar a{padding:8px 10px}
html[data-density="relaxed"] .card,html[data-density="relaxed"] .panel{padding:23px 24px}
html[data-density="relaxed"] th,html[data-density="relaxed"] td{padding:14px 13px}

/* Existing notification center */
.notification-row{color:var(--xs-text);border-color:var(--xs-border)}
.notification-row.unread{background:var(--xs-primary-soft)}
.notification-row small,.notification-row time{color:var(--xs-muted)}
.notification-dot{background:#73849a}.notification-row.unread .notification-dot{background:var(--xs-primary)}

/* Login */
.login-body{background:#111827}
.login-card{background:var(--xs-surface);color:var(--xs-text);border:1px solid var(--xs-border);box-shadow:var(--xs-shadow-hover)}

/* Footer */
.footer{color:var(--xs-muted);border-top:1px solid var(--xs-border);background:var(--xs-surface);margin-top:10px}

/* Dark theme hard-coded legacy corrections */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] table,
html[data-theme="dark"] .login-card{background:var(--xs-surface)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--xs-surface-2);color:var(--xs-text)}
html[data-theme="dark"] option{background:#0d1928;color:#eef5ff}
html[data-theme="dark"] .quick a,
html[data-theme="dark"] .bulk-toolbar{background:var(--xs-surface-2)}
html[data-theme="dark"] .active-filter-card{outline-color:var(--xs-primary)}
html[data-theme="dark"] .invoice-body{background:#fff;color:#172033}

/* Responsive */
@media(max-width:1000px){
  .content-wrap{padding:20px}
}
@media(max-width:760px){
  .sidebar{width:min(286px,88vw)}
  .main-content{margin-left:0}
  .topbar{padding:0 14px;height:60px}
  .top-actions{gap:5px}
  .top-icon-btn{width:35px;height:35px}
  .modern-top-user{padding-left:6px}
  .user-meta{display:none}
  .logout{display:none}
  .content-wrap{padding:15px 12px 24px}
  .page-head h1{font-size:23px}
  .card,.panel{border-radius:12px}
  .cards{gap:11px}
  .theme-choice-grid{grid-template-columns:1fr}
  table{font-size:12px}
}
@media(max-width:480px){
  .appearance-drawer{width:94vw}
  .brand-copy strong{font-size:17px}
  .top-actions{gap:4px}
}

/* =========================================================
   v62.89 FULL DASHBOARD REDESIGN
   Reference direction: premium network/SaaS admin dashboard
   ========================================================= */
:root{
  --dash-cyan:#22d3ee;
  --dash-blue:#3b82f6;
  --dash-violet:#8b5cf6;
  --dash-green:#22c55e;
  --dash-orange:#f59e0b;
  --dash-red:#ef4444;
}
html[data-theme="dark"]{
  --xs-bg:#07101b;
  --xs-surface:#0b1726;
  --xs-surface-2:#101e2f;
  --xs-surface-3:#15263a;
  --xs-border:#1c3046;
  --xs-sidebar:#06101b;
  --xs-sidebar-2:#091522;
}
html[data-theme="dark"] body{
  background:
    transparent;
}

/* Premium sidebar geometry */
.sidebar{width:238px;padding:16px 12px}
.main-content{margin-left:238px}
.sidebar-head{height:58px;display:flex;align-items:center}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:#111827;
  box-shadow:0 8px 24px rgba(14,111,255,.32)
}
.brand-copy strong{font-size:17px}
.brand-copy small{font-size:9px}
.sidebar a{padding:9px 10px;border-radius:7px;font-size:12.5px}
.sidebar a.active{
  position:relative;background:#111827;
  box-shadow:0 6px 18px rgba(0,96,255,.18)
}
.sidebar a.active:before{
  content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 4px 4px 0;
  background:#35b9ff;box-shadow:0 0 12px #35b9ff
}
.nav-flat-section{margin-top:14px}
.nav-flat-title,.nav-group-toggle{font-size:9px!important}

/* Slim premium topbar */
.topbar{height:58px;padding:0 24px}
.content-wrap{padding:22px 24px 32px}
.top-icon-btn{width:34px;height:34px;border-radius:8px}
.user-avatar{width:31px;height:31px;font-size:12px}

/* Hero */
.dashboard-hero{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin:0 0 20px;padding:2px 2px 0
}
.dashboard-eyebrow,.panel-kicker,.dashboard-section-head span{
  display:block;color:var(--xs-primary);font-size:9px;font-weight:900;letter-spacing:.16em;margin-bottom:5px
}
.dashboard-hero h1{margin:0;color:var(--xs-text);font-size:25px;line-height:1.1;letter-spacing:-.035em}
.dashboard-hero p{margin:6px 0 0;color:var(--xs-muted);font-size:11px}
.dashboard-hero-actions{display:flex;align-items:center;gap:8px}
.dashboard-live-dot,.dashboard-date,.chart-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--xs-border);
  background:var(--xs-surface);border-radius:7px;color:var(--xs-muted);font-size:10px;font-weight:700
}
.dashboard-live-dot i{width:7px;height:7px;border-radius:50%;background:var(--dash-green);box-shadow:0 0 0 4px rgba(34,197,94,.11)}
.dashboard-section-head{
  display:flex;justify-content:space-between;align-items:flex-end;margin:24px 2px 11px
}
.dashboard-section-head h2{margin:0;font-size:16px;letter-spacing:-.02em}
.dashboard-section-head small{color:var(--xs-muted);font-size:10px}

/* KPI cards - compact like reference */
.billing-dashboard-v62,.owner-profit-cards{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important
}
.billing-dashboard-v62 .card,.owner-profit-cards .card{
  min-height:124px;padding:15px 16px!important;border-radius:10px!important;
  box-shadow:none!important;border:1px solid var(--xs-border)!important;
  background:#111827!important
}
.billing-dashboard-v62 .card:before,.owner-profit-cards .card:before{display:none}
.billing-dashboard-v62 .card:hover,.owner-profit-cards .card:hover{
  border-color:rgba(59,130,246,.48)!important;transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.10)!important
}
.kpi-label{display:flex!important;align-items:center;gap:9px!important;color:var(--xs-muted)!important;font-size:10.5px!important;font-weight:700!important}
.kpi-icon{
  width:27px;height:27px;border-radius:7px;display:grid;place-items:center;
  font-style:normal;font-size:13px;font-weight:900
}
.kpi-bill{background:rgba(59,130,246,.13);color:#4d9aff}
.kpi-income{background:rgba(34,197,94,.13);color:#32d06c}
.kpi-unpaid{background:rgba(239,68,68,.13);color:#ff6269}
.kpi-paid{background:rgba(34,211,238,.13);color:#22d3ee}
.kpi-expense{background:rgba(245,158,11,.13);color:#fbbf24}
.kpi-deposit{background:rgba(139,92,246,.13);color:#a78bfa}
.billing-dashboard-v62 .card>strong,.owner-profit-cards .card>strong{
  margin-top:15px!important;font-size:21px!important;line-height:1!important;color:var(--xs-text)!important
}
.billing-dashboard-v62 .card>small,.owner-profit-cards .card>small{
  margin-top:8px!important;color:var(--xs-muted)!important;font-size:9.5px!important;line-height:1.4
}
.billing-dashboard-v62 .card.success>strong,.owner-profit-cards .card.success>strong{color:var(--xs-text)!important}
.billing-dashboard-v62 .card.danger>strong{color:var(--xs-text)!important}

/* Panels look like reference dashboard widgets */
.owner-finance-trend-only,.customer-status-dashboard,.admin-finance-trend,#pppoeLivePanel{
  margin-top:12px!important;border-radius:10px!important;border:1px solid var(--xs-border)!important;
  box-shadow:none!important;background:#111827!important;
  padding:17px 18px!important
}
.panel-title-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.panel-title-row h2,.customer-status-dashboard h2,#pppoeLivePanel h2{font-size:15px!important;margin:0!important}
.chart-chip{padding:5px 8px;font-size:9px}
.owner-finance-trend-only canvas{height:250px!important}
.customer-status-chart canvas,.admin-finance-trend canvas{height:230px!important}
.hint,.muted2{font-size:10px!important;line-height:1.55}

/* Status cards become mini stat tiles */
.customer-status-current{
  grid-template-columns:repeat(3,1fr)!important;gap:10px!important;margin:14px 0!important
}
.customer-status-current .card{
  min-height:90px!important;padding:13px 14px!important;border-radius:9px!important;box-shadow:none!important
}
.customer-status-current .card strong{font-size:22px!important}
.customer-status-current .card span{font-size:10px}
.customer-status-current .card small{font-size:9px;color:var(--xs-muted)}
.customer-status-current .billing-isolir-card{background:rgba(245,158,11,.07)!important}

/* PPPoE dashboard */
.pppoe-dashboard-total{
  max-width:260px;min-height:96px!important;margin:14px 0!important;
  border-left:0!important;background:#111827!important
}
.pppoe-dashboard-total strong{font-size:27px!important}
.pppoe-site-chart{margin-top:12px;border-top:1px solid var(--xs-border);padding-top:10px}
.pppoe-chart-row{border-radius:7px;padding:8px 9px!important}
.pppoe-chart-row:hover{background:var(--xs-surface-3)}
.pppoe-dual-track{height:9px!important;border-radius:10px!important;background:var(--xs-surface-3)!important}
.pppoe-peak-bar,.pppoe-live-bar{border-radius:10px!important}
.pppoe-chart-label{font-size:10.5px!important}
.pppoe-chart-values{font-size:10px!important}

/* Admin dashboard */
.admin-settlement-analytics{grid-template-columns:repeat(3,1fr)!important;gap:12px!important;margin-top:12px}
.admin-settlement-analytics .card{min-height:105px;padding:14px!important;border-radius:10px;box-shadow:none}
.admin-settlement-analytics .card strong{font-size:18px}

/* Tables and normal pages now visually match dashboard */
.table-wrap{border-radius:10px!important;box-shadow:none!important}
.panel{border-radius:10px;box-shadow:none}
th{height:38px;font-size:9.5px!important;text-transform:uppercase;letter-spacing:.06em!important}
td{font-size:11.5px}
.btn{border-radius:7px;font-size:11px;padding:8px 11px}
input,select,textarea{border-radius:7px;font-size:12px}
.page-head h1{font-size:23px}
.page-head h2{font-size:15px}

/* Dark mode: deeper reference look */
html[data-theme="dark"] .billing-dashboard-v62 .card,
html[data-theme="dark"] .owner-profit-cards .card,
html[data-theme="dark"] .owner-finance-trend-only,
html[data-theme="dark"] .customer-status-dashboard,
html[data-theme="dark"] .admin-finance-trend,
html[data-theme="dark"] #pppoeLivePanel{
  background:#111827!important
}
html[data-theme="dark"] .topbar{background:rgba(7,16,27,.90)}
html[data-theme="dark"] .sidebar{box-shadow:10px 0 40px rgba(0,0,0,.18)}

/* Responsive dashboard */
@media(max-width:1280px){
  .billing-dashboard-v62,.owner-profit-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:980px){
  .billing-dashboard-v62,.owner-profit-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .main-content{margin-left:0}
  .content-wrap{padding:14px 11px 24px}
  .dashboard-hero{align-items:flex-start}
  .dashboard-hero-actions{display:none}
  .dashboard-hero h1{font-size:22px}
  .billing-dashboard-v62,.owner-profit-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .billing-dashboard-v62 .card,.owner-profit-cards .card{min-height:116px;padding:12px!important}
  .billing-dashboard-v62 .card>strong,.owner-profit-cards .card>strong{font-size:17px!important}
  .kpi-icon{width:24px;height:24px}
  .customer-status-current{grid-template-columns:1fr!important}
  .owner-finance-trend-only canvas,.customer-status-chart canvas,.admin-finance-trend canvas{height:220px!important}
}
@media(max-width:420px){
  .billing-dashboard-v62,.owner-profit-cards{grid-template-columns:1fr!important}
  .billing-dashboard-v62 .card,.owner-profit-cards .card{min-height:102px}
}

/* =========================================================
   v62.90 - Full Analytics Dashboard + Technician Foundation
   ========================================================= */
.analytics-layout-v6290{
  display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:12px;margin:14px 0 12px
}
.analytics-secondary-v6290{
  display:grid;grid-template-columns:1.25fr .9fr;gap:12px;margin:0 0 12px
}
.analytics-secondary-v6290.lower{grid-template-columns:1.35fr .75fr}
.analytics-widget{margin:0!important;min-width:0}
.widget-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.widget-head h2{margin:0!important;font-size:14px!important}
.widget-link{font-size:9.5px;color:var(--xs-primary);text-decoration:none;font-weight:700;white-space:nowrap}
.widget-link:hover{text-decoration:underline}
.billing-donut-layout{display:grid;grid-template-columns:minmax(150px,.9fr) 1fr;gap:15px;align-items:center;min-height:245px}
.billing-donut-wrap{height:205px;min-width:0}
.billing-summary-list{display:grid;gap:10px}
.billing-summary-list>div{padding:9px 0;border-bottom:1px solid var(--xs-border)}
.billing-summary-list>div:last-child{border-bottom:0}
.billing-summary-list span{display:flex;align-items:center;gap:7px;color:var(--xs-muted);font-size:9.5px}
.billing-summary-list strong{display:block;font-size:13px;margin:4px 0 2px}
.billing-summary-list small{font-size:8.5px;color:var(--xs-muted)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%}
.dot.success{background:#22c55e}.dot.warning{background:#f59e0b}.dot.primary{background:#3b82f6}
.analytics-chart-box{height:245px}
.analytics-table-wrap{border:0!important;border-radius:7px!important;overflow:auto}
.analytics-table{min-width:600px}
.analytics-table th{font-size:8.8px!important}
.analytics-table td{font-size:10.5px!important;padding:9px 10px!important}
.analytics-table small{font-size:8.5px;color:var(--xs-muted)}
.text-success{color:var(--xs-success)}
.text-warning{color:var(--xs-warning)}
.progress-cell{display:flex;align-items:center;gap:8px;min-width:120px}
.progress-cell>span{display:block;width:70px;height:6px;border-radius:20px;background:var(--xs-surface-3);overflow:hidden}
.progress-cell>span i{display:block;height:100%;border-radius:20px;background:var(--xs-success)}
.progress-cell b{font-size:9px}
.payment-method-layout{display:grid;grid-template-columns:165px 1fr;align-items:center;gap:12px;min-height:235px}
.payment-method-chart{height:165px}
.payment-method-list{display:grid;gap:7px}
.payment-method-list>div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--xs-border)}
.payment-method-list span{font-size:9px;color:var(--xs-muted)}
.payment-method-list strong{font-size:10px}
.technician-dashboard-v6290{margin-top:8px}
.technician-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.technician-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.ticket-foundation-card{margin:0!important}
.ticket-flow-preview{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:18px 0}
.ticket-flow-preview>div{
  flex:1;min-width:82px;padding:10px 8px;border:1px solid var(--xs-border);
  background:var(--xs-surface-2);border-radius:8px;text-align:center
}
.ticket-flow-preview>div b{display:block;color:var(--xs-primary);font-size:15px}
.ticket-flow-preview>div span{display:block;margin-top:4px;font-size:8.5px;color:var(--xs-muted)}
.ticket-flow-preview>i{font-style:normal;color:var(--xs-muted)}
@media(max-width:1280px){
  .analytics-layout-v6290{grid-template-columns:1fr 1fr}
  .site-graph-widget{grid-column:1/-1}
  .analytics-secondary-v6290,.analytics-secondary-v6290.lower{grid-template-columns:1fr}
}
@media(max-width:900px){
  .analytics-layout-v6290{grid-template-columns:1fr}
  .site-graph-widget{grid-column:auto}
  .technician-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .billing-donut-layout{grid-template-columns:1fr;min-height:0}
  .billing-donut-wrap{height:190px}
  .analytics-chart-box{height:220px}
  .payment-method-layout{grid-template-columns:1fr}
  .payment-method-chart{height:190px}
  .technician-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:420px){
  .technician-kpis{grid-template-columns:1fr!important}
}

/* =========================================================
   v62.92 Technician Menu + Ticketing
   ========================================================= */
.ticket-summary-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
.ticket-summary-cards .card{min-height:92px}
.ticket-summary-cards .card strong{font-size:22px}
.ticket-detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-bottom:14px}
.ticket-complaint{margin:16px 0;padding:13px;border:1px solid var(--xs-border);background:var(--xs-surface-2);border-radius:9px}
.ticket-complaint b{font-size:11px}.ticket-complaint p{margin:7px 0 0;font-size:12px;line-height:1.6}
.ticket-inline-form,.ticket-status-form,.ticket-photo-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px}
.ticket-status-form{grid-template-columns:180px minmax(0,1fr) auto}
.ticket-result-form{margin-top:14px}.ticket-result-form label{font-size:11px;font-weight:700}.ticket-result-form button{margin-top:8px}
.ticket-photo-form{grid-template-columns:130px 1fr;align-items:end}
.ticket-photo-form input[name="keterangan"]{grid-column:1/3}
.ticket-photo-form button{grid-column:1/3}
.ticket-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.ticket-photo-card{display:block;text-decoration:none;border:1px solid var(--xs-border);background:var(--xs-surface-2);border-radius:9px;overflow:hidden}
.ticket-photo-card img{width:100%;height:135px;object-fit:cover;display:block;background:var(--xs-surface-3)}
.ticket-photo-card span{display:block;padding:7px 9px 0;font-size:10px;font-weight:800;color:var(--xs-primary)}
.ticket-photo-card small{display:block;padding:3px 9px 9px;color:var(--xs-muted);font-size:9px}
.ticket-timeline{display:grid;gap:0;margin-top:10px}
.ticket-timeline>div{position:relative;display:grid;grid-template-columns:18px 1fr;gap:9px;min-height:62px}
.ticket-timeline>div>i{width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--xs-primary);box-shadow:0 0 0 4px var(--xs-primary-soft)}
.ticket-timeline>div:not(:last-child):before{content:"";position:absolute;left:4px;top:17px;bottom:-3px;width:2px;background:var(--xs-border)}
.ticket-timeline section b{font-size:11px}.ticket-timeline section small{display:block;color:var(--xs-muted);font-size:9px;margin-top:2px}.ticket-timeline section p{font-size:10px;margin:5px 0;color:var(--xs-muted)}
.ticket-table{min-width:1080px}.ticket-complaint-cell{white-space:normal!important;min-width:230px;line-height:1.45}
.ticket-result-cell{white-space:normal!important;min-width:250px;line-height:1.45}
.badge.ticket-baru{background:var(--xs-danger-soft);color:var(--xs-danger)}
.badge.ticket-assign{background:var(--xs-primary-soft);color:var(--xs-primary)}
.badge.ticket-travel{background:rgba(139,92,246,.13);color:#8b5cf6}
.badge.ticket-location{background:rgba(34,211,238,.13);color:#0891b2}
.badge.ticket-process{background:var(--xs-warning-soft);color:var(--xs-warning)}
.badge.ticket-wait{background:rgba(148,163,184,.14);color:var(--xs-muted)}
.badge.ticket-done{background:var(--xs-success-soft);color:var(--xs-success)}
.badge.ticket-closed{background:var(--xs-surface-3);color:var(--xs-muted)}
.technician-job-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.technician-job-card{text-decoration:none;color:inherit;margin:0!important;transition:.16s ease}
.technician-job-card:hover{transform:translateY(-2px);border-color:rgba(59,130,246,.45);box-shadow:var(--xs-shadow-hover)}
.job-card-top{display:flex;justify-content:space-between;gap:10px}.job-card-top h3{margin:0;font-size:15px}
.job-meta{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0;color:var(--xs-muted);font-size:10px}
.technician-job-card p{font-size:11px;line-height:1.55;margin:8px 0}.technician-job-card>small{color:var(--xs-muted);font-size:9px}
.tracking-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px!important}
.tracking-header h2{margin:0;font-size:16px}
.tracking-stepper{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:8px 0 24px;overflow:auto}
.tracking-step{min-width:82px;text-align:center;position:relative;color:var(--xs-muted)}
.tracking-step:not(:last-child):after{content:"";position:absolute;height:2px;background:var(--xs-border);top:14px;left:60%;right:-45%}
.tracking-step i{position:relative;z-index:2;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;margin:auto;background:var(--xs-surface-3);border:1px solid var(--xs-border);font-style:normal;font-size:10px;font-weight:800}
.tracking-step span{display:block;font-size:8px;margin-top:6px;white-space:nowrap}
.tracking-step.done i{background:var(--xs-success);color:#fff;border-color:var(--xs-success)}
.tracking-step.done:not(:last-child):after{background:var(--xs-success)}
.tracking-step.current i{box-shadow:0 0 0 4px var(--xs-success-soft)}
.tracking-full{max-width:800px}
.technician-ticket-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:12px}
.technician-menu-section{border-top:1px solid rgba(148,163,184,.10);padding-top:8px}
@media(max-width:1050px){.ticket-summary-cards{grid-template-columns:repeat(3,1fr)}.ticket-detail-grid{grid-template-columns:1fr}}
@media(max-width:760px){
 .ticket-summary-cards{grid-template-columns:repeat(2,1fr)}
 .technician-job-list{grid-template-columns:1fr}
 .ticket-status-form,.ticket-inline-form,.ticket-photo-form{grid-template-columns:1fr}
 .ticket-photo-form input[name="keterangan"],.ticket-photo-form button{grid-column:auto}
 .ticket-photo-grid{grid-template-columns:1fr 1fr}
 .technician-ticket-kpis{grid-template-columns:1fr!important}
}
@media(max-width:420px){.ticket-summary-cards,.ticket-photo-grid{grid-template-columns:1fr}}

/* =========================================================
   v62.93 - Ticket Site -> Searchable Customer
   ========================================================= */
.ticket-create-panel{overflow:visible!important}
.ticket-create-hint{margin:-2px 0 14px}
.ticket-create-form{overflow:visible}
.ticket-customer-field{position:relative}
.ticket-customer-search{position:relative}
.ticket-customer-search>input{width:100%}
.ticket-customer-results{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:60;
  max-height:320px;overflow:auto;background:var(--xs-surface);
  border:1px solid var(--xs-border);border-radius:9px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);padding:5px
}
.ticket-customer-option{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-align:left;border:0;background:transparent;color:var(--xs-text);
  padding:9px 10px;border-radius:7px;cursor:pointer
}
.ticket-customer-option:hover{background:var(--xs-primary-soft)}
.ticket-customer-option>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ticket-customer-option strong{font-size:10.5px;color:var(--xs-primary)}
.ticket-customer-option b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-customer-option small{font-size:9px;color:var(--xs-muted);white-space:nowrap}
.ticket-customer-empty{padding:14px 10px;color:var(--xs-muted);font-size:10px;text-align:center}
.ticket-selected-customer{
  display:block;margin-top:5px;color:var(--xs-muted);font-size:9px;font-weight:500
}
.ticket-customer-search input:disabled{
  opacity:.68;cursor:not-allowed;background:var(--xs-surface-3)
}
@media(max-width:760px){
  .ticket-customer-results{max-height:260px}
  .ticket-customer-option{align-items:flex-start;flex-direction:column;gap:4px}
}

/* =========================================================
   v62.94 - Ticket Create Form Responsive UI
   ========================================================= */
.ticket-create-panel{
  padding:20px 22px!important;
  overflow:visible!important;
}
.ticket-create-panel .widget-head{
  margin-bottom:6px;
}
.ticket-create-hint{
  margin:0 0 16px!important;
  max-width:980px;
  line-height:1.55;
}
.ticket-create-form{
  width:100%;
  overflow:visible;
}
.ticket-create-grid{
  display:grid;
  grid-template-columns:minmax(180px,.9fr) minmax(280px,1.15fr) minmax(210px,.95fr) minmax(180px,.9fr);
  gap:14px 14px;
  align-items:start;
}
.ticket-field{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0!important;
}
.ticket-field>span{
  display:block;
  font-size:10.5px;
  line-height:1.2;
  font-weight:800;
  color:var(--xs-muted);
}
.ticket-field select,
.ticket-field input,
.ticket-field textarea{
  width:100%;
  min-width:0;
  margin:0!important;
}
.ticket-field select,
.ticket-field input[type="search"]{
  height:42px;
}
.ticket-field-full{
  grid-column:1/-1;
}
.ticket-field-full textarea{
  min-height:112px;
  resize:vertical;
}
.ticket-form-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:-2px;
}
.ticket-form-actions .btn{
  min-width:126px;
  height:40px;
}
.ticket-customer-field{
  position:relative;
  z-index:15;
}
.ticket-customer-search{
  position:relative;
  width:100%;
}
.ticket-selected-customer{
  min-height:16px;
  margin:0!important;
  padding:0 2px;
  font-size:9px!important;
  line-height:1.35;
  color:var(--xs-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ticket-selected-customer b{
  color:var(--xs-success);
}
.ticket-customer-results{
  top:calc(100% + 6px)!important;
  max-height:300px!important;
  z-index:100!important;
}
.ticket-customer-option{
  min-height:48px;
}
.ticket-customer-option small{
  max-width:42%;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:1200px){
  .ticket-create-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ticket-field-full{
    grid-column:1/-1;
  }
}
@media(max-width:760px){
  .ticket-create-panel{
    padding:16px 14px!important;
  }
  .ticket-create-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .ticket-field-full{
    grid-column:auto;
  }
  .ticket-form-actions{
    justify-content:stretch;
  }
  .ticket-form-actions .btn{
    width:100%;
  }
  .ticket-selected-customer{
    white-space:normal;
  }
  .ticket-customer-results{
    position:absolute;
    max-height:250px!important;
  }
}
@media(max-width:420px){
  .ticket-create-panel .widget-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .ticket-create-panel .chart-chip{
    align-self:flex-start;
  }
  .ticket-field select,
  .ticket-field input[type="search"]{
    height:44px;
  }
}

/* v62.95 OLT Manager */
.olt-kpis{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}
.olt-form-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.olt-form-grid label,.olt-mapping-form label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:700;color:var(--xs-muted)}
.olt-form-actions{display:flex;gap:8px;align-items:end}.olt-actions{display:flex;gap:5px;flex-wrap:wrap}.olt-actions form{margin:0}
.olt-readonly-info{margin-top:14px!important}.olt-readonly-info h2{font-size:14px}.olt-readonly-info p{font-size:10px;color:var(--xs-muted)}
.olt-command-chips{display:flex;flex-wrap:wrap;gap:7px}.olt-command-chips code{padding:7px 9px;border:1px solid var(--xs-border);border-radius:7px;background:var(--xs-surface-2);font-size:9px}
.olt-mapping-form{display:grid;grid-template-columns:2fr 1fr .7fr 1.3fr 1.3fr auto;gap:12px;align-items:end}
@media(max-width:1100px){.olt-form-grid{grid-template-columns:repeat(2,1fr)}.olt-mapping-form{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.olt-kpis,.olt-form-grid,.olt-mapping-form{grid-template-columns:1fr}.olt-form-actions .btn{flex:1}.olt-actions{min-width:220px}}

/* v62.96 - Billing due-date filter */
.billing-due-date-filter{min-width:190px}
.billing-date-help{display:block;margin-top:5px;font-size:9px;line-height:1.35;color:var(--xs-muted)}
.billing-date-active{border-left:3px solid var(--xs-primary)}
.billing-filter-v62{align-items:end}
@media(max-width:1100px){
  .billing-filter-v62{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .billing-filter-v62{grid-template-columns:1fr}
  .billing-filter-action{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .billing-filter-action .btn{width:100%}
}
@media(max-width:420px){
  .billing-filter-action{grid-template-columns:1fr}
}

/* =========================================================
   v62.97 - Compact Billing Period + Status Filter
   ========================================================= */
.billing-filter-v62{
  display:grid!important;
  grid-template-columns:minmax(360px,1.45fr) minmax(190px,.9fr) minmax(190px,.9fr) minmax(190px,.9fr);
  gap:14px!important;
  align-items:end!important;
}
.billing-period-filter{min-width:0}
.billing-period-complete{
  display:grid!important;
  grid-template-columns:minmax(135px,.9fr) minmax(140px,1fr) minmax(90px,.65fr);
  gap:8px;
  align-items:center;
}
.billing-period-complete .x-period-month,
.billing-period-complete .x-period-year,
.billing-period-complete .x-period-day{
  width:100%;
  min-width:0;
  height:42px;
}
.billing-period-help{
  display:block;
  margin-top:5px;
  color:var(--xs-muted);
  font-size:9px;
  line-height:1.35;
}
.billing-collection-status select{height:42px}
.billing-filter-v62>div:has(>label:first-child:last-child){min-width:0}
.billing-filter-action{
  grid-column:auto;
  display:flex!important;
  gap:8px;
  align-items:center;
}
.billing-filter-action .btn{
  min-width:130px;
}
.billing-date-active{border-left:3px solid var(--xs-primary)}
.billing-status-active{border-left:3px solid var(--xs-warning)}
/* v62.96 field removed in v62.97 */
.billing-due-date-filter{display:none!important}

@media(max-width:1250px){
  .billing-filter-v62{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .billing-period-filter{grid-column:1/-1}
  .billing-filter-action{grid-column:1/-1}
}
@media(max-width:760px){
  .billing-filter-v62{
    grid-template-columns:1fr;
  }
  .billing-period-filter,.billing-filter-action{grid-column:auto}
  .billing-period-complete{
    grid-template-columns:1fr 1fr;
  }
  .billing-period-complete .x-period-year{
    grid-column:1/-1;
  }
  .billing-filter-action{
    display:grid!important;
    grid-template-columns:1fr 1fr;
  }
  .billing-filter-action .btn{width:100%;min-width:0}
}
@media(max-width:460px){
  .billing-period-complete{
    grid-template-columns:1fr;
  }
  .billing-period-complete .x-period-year{grid-column:auto}
  .billing-filter-action{grid-template-columns:1fr}
}

/* =========================================================
   v62.98 - Billing Filter Alignment & Responsive Polish
   ========================================================= */
.billing-filter-v62{
  display:block!important;
  padding:18px 20px!important;
}
.billing-filter-top{
  display:grid;
  grid-template-columns:minmax(390px,1.45fr) minmax(210px,.9fr) minmax(210px,.9fr) minmax(210px,.9fr);
  gap:14px;
  align-items:start;
}
.billing-filter-bottom{
  display:grid;
  grid-template-columns:minmax(320px,1fr) auto;
  gap:14px;
  align-items:end;
  margin-top:14px;
}
.billing-filter-field{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.billing-filter-field>label{
  margin:0;
  font-size:10.5px;
  line-height:1.2;
  font-weight:800;
  color:var(--xs-muted);
}
.billing-filter-field select,
.billing-filter-field input{
  width:100%;
  min-width:0;
  height:42px;
  margin:0!important;
}
.billing-period-complete{
  display:grid!important;
  grid-template-columns:minmax(135px,.95fr) minmax(145px,1fr) minmax(92px,.62fr);
  gap:8px!important;
  align-items:center;
}
.billing-period-complete .x-period-day,
.billing-period-complete .x-period-month,
.billing-period-complete .x-period-year{
  width:100%;
  min-width:0;
  height:42px;
}
.billing-period-help{
  min-height:24px;
  margin:0!important;
  padding-top:1px;
  font-size:8.8px!important;
  line-height:1.35!important;
  color:var(--xs-muted);
}
.billing-search-field{
  max-width:520px;
}
.billing-filter-action{
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0!important;
}
.billing-filter-action .btn{
  height:42px;
  min-width:135px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0!important;
}
.billing-collection-status{
  align-self:start;
}
.billing-filter-top>.billing-filter-field:not(.billing-period-filter){
  padding-top:0;
}
@media(max-width:1320px){
  .billing-filter-top{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .billing-period-filter{
    grid-column:1/-1;
  }
  .billing-search-field{max-width:none}
}
@media(max-width:900px){
  .billing-filter-bottom{
    grid-template-columns:1fr;
  }
  .billing-filter-action{
    justify-content:flex-start;
  }
}
@media(max-width:760px){
  .billing-filter-v62{
    padding:15px 14px!important;
  }
  .billing-filter-top{
    grid-template-columns:1fr;
    gap:12px;
  }
  .billing-period-filter{grid-column:auto}
  .billing-period-complete{
    grid-template-columns:1fr 1fr;
  }
  .billing-period-complete .x-period-year{
    grid-column:1/-1;
  }
  .billing-filter-bottom{
    grid-template-columns:1fr;
    margin-top:12px;
  }
  .billing-filter-action{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .billing-filter-action .btn{
    width:100%;
    min-width:0;
  }
}
@media(max-width:460px){
  .billing-period-complete{
    grid-template-columns:1fr;
  }
  .billing-period-complete .x-period-year{
    grid-column:auto;
  }
  .billing-filter-action{
    grid-template-columns:1fr;
  }
}

/* v62.98.1 - Filter action buttons: neutral default, blue on hover */
.billing-filter-action .billing-filter-button{
  background:var(--xs-surface-2)!important;
  border:1px solid var(--xs-border)!important;
  color:var(--xs-text)!important;
  box-shadow:none!important;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.billing-filter-action .billing-filter-button:hover,
.billing-filter-action .billing-filter-button:focus-visible{
  background:#1769ff!important;
  border-color:#1769ff!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(23,105,255,.22)!important;
}
.billing-filter-action .billing-filter-button:active{
  transform:translateY(1px);
}

/* v62.100 Persistent WAN per Site */
.network-wan-persist-note{
  margin:0 0 14px!important;
  border-left:3px solid var(--xs-primary);
}


/* v63.4 Master Pelanggan - summary cards + tidy filter layout */
.pelanggan-status-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pelanggan-status-card{display:block;text-decoration:none;color:inherit;position:relative;transition:.15s ease}
.pelanggan-status-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,23,42,.08)}
.pelanggan-status-card.active-filter{outline:2px solid #f97316;outline-offset:-2px}
.pelanggan-status-card small{display:block;margin-top:6px;color:#64748b;font-size:12px}
.pelanggan-status-card.warning-card strong{color:#d97706}
.pelanggan-search-grid{display:grid!important;grid-template-columns:minmax(230px,1.8fr) repeat(4,minmax(150px,1fr)) auto auto;gap:10px;align-items:center;width:100%}
.pelanggan-search-grid>input,.pelanggan-search-grid>select,.pelanggan-search-grid>.btn{margin:0;min-width:0;height:42px}
.pelanggan-filter-btn{min-width:110px}
.pelanggan-table th,.pelanggan-table td{vertical-align:middle}
.pelanggan-table th{white-space:nowrap}
.pelanggan-table td:nth-child(2),.pelanggan-table td:nth-child(3){max-width:220px}
@media(max-width:1250px){
  .pelanggan-search-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pelanggan-search-grid>input:first-of-type{grid-column:span 2}
}
@media(max-width:900px){
  .pelanggan-status-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pelanggan-search-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pelanggan-search-grid>input:first-of-type{grid-column:1/-1}
}
@media(max-width:600px){
  .pelanggan-status-cards,.pelanggan-search-grid{grid-template-columns:1fr}
  .pelanggan-search-grid>input:first-of-type{grid-column:auto}
}


/* =========================================================
   v63.20 - Dark/Light contrast audit + persistent sidebar
   UI only: no business-data/API changes.
   ========================================================= */

/* Global form/control contrast: applies to all pages */
input,select,textarea{
  background:var(--xs-surface-2)!important;
  color:var(--xs-text)!important;
  border-color:var(--xs-border)!important;
}
input::placeholder,textarea::placeholder{color:var(--xs-muted)!important;opacity:.9}
select option{background:var(--xs-surface)!important;color:var(--xs-text)!important}
label,.hint,.muted,.text-muted{color:var(--xs-muted)!important}
.panel,.card,.filters,.table-wrap{background:var(--xs-surface);color:var(--xs-text);border-color:var(--xs-border)}
table{color:var(--xs-text)}
thead th{background:var(--xs-surface-2)!important;color:var(--xs-muted)!important;border-color:var(--xs-border)!important}
tbody td{border-color:var(--xs-border)!important}
tbody tr:hover td{background:var(--xs-surface-2)}
.btn.secondary{
  background:var(--xs-surface-3)!important;
  color:var(--xs-text)!important;
  border-color:var(--xs-border)!important;
}
.btn.secondary:hover{filter:brightness(1.08)}
.badge{border-color:transparent}

/* Pra Pelanggan cards: remove hard-coded white appearance in dark mode */
.pra-site-task-card{
  background:var(--xs-surface-2)!important;
  color:var(--xs-text)!important;
  border:1px solid var(--xs-border)!important;
  box-shadow:none!important;
}
.pra-site-task-head strong{color:var(--xs-text)!important}
.pra-site-task-card label{color:var(--xs-muted)!important}
.pra-site-task-card select{
  background:var(--xs-surface)!important;
  color:var(--xs-text)!important;
  border:1px solid var(--xs-border)!important;
}
.pra-site-task-card .badge{
  background:var(--xs-success-soft)!important;
  color:var(--xs-success)!important;
}
html[data-theme="dark"] .pra-site-task-card{
  background:#0f1d2d!important;
  border-color:#263a52!important;
}
html[data-theme="dark"] .pra-site-task-card select{
  background:#0a1726!important;
  color:#edf4ff!important;
  border-color:#2b4059!important;
}
html[data-theme="dark"] .pra-site-task-card .btn.secondary{
  background:#13273c!important;
  color:#edf4ff!important;
  border-color:#2b4059!important;
}

/* Sidebar readability is deliberately theme-independent */
.sidebar,.sidebar-nav,.nav-group-children{color:var(--xs-sidebar-text)}
.sidebar .nav-group-toggle,.sidebar .nav-flat-title{color:#8fa2ba!important}
.sidebar .nav-group-toggle:hover{color:#fff!important}
.sidebar a{color:#cbd8e7!important}
.sidebar a:hover,.sidebar a.active{color:#fff!important}
.sidebar svg{fill:currentColor}
.nav-group-children{overflow:hidden}


/* v63.21 - Owner Business Control */
.business-control-v6321{margin-top:18px;margin-bottom:18px;padding:20px}
.business-control-head{margin-bottom:15px}
.business-control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.business-kpi{
  display:flex;flex-direction:column;gap:7px;text-decoration:none;
  padding:15px;border:1px solid var(--xs-border);border-radius:12px;
  background:var(--xs-surface-2);color:var(--xs-text);min-width:0;
  transition:.16s ease;
}
.business-kpi:hover{transform:translateY(-1px);box-shadow:var(--xs-shadow-hover)}
.business-kpi span{font-size:12px;font-weight:700;color:var(--xs-muted)}
.business-kpi strong{font-size:22px;line-height:1.1;color:var(--xs-text);overflow-wrap:anywhere}
.business-kpi small{font-size:11px;color:var(--xs-muted);line-height:1.35}
.business-kpi.success{border-left:3px solid var(--xs-success)}
.business-kpi.warning{border-left:3px solid var(--xs-warning)}
.business-kpi.danger{border-left:3px solid var(--xs-danger)}
.business-kpi.info{border-left:3px solid var(--xs-primary)}
.business-control-bottom{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;margin-top:14px}
.business-status-box,.business-alert-box{border:1px solid var(--xs-border);border-radius:12px;background:var(--xs-surface-2);padding:15px;min-width:0}
.widget-head.compact{margin-bottom:10px}
.widget-head.compact h3{margin:2px 0 0;font-size:15px}
.business-status-layout{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center}
.business-status-chart{height:150px;min-width:0}
.business-status-list{display:grid;gap:5px}
.business-status-list a{
  text-decoration:none;color:var(--xs-text);display:flex;align-items:center;justify-content:space-between;
  padding:8px 9px;border-bottom:1px solid var(--xs-border)
}
.business-status-list a:last-child{border-bottom:0}
.business-status-list span{display:flex;align-items:center;gap:7px;color:var(--xs-muted);font-size:12px}
.business-status-list strong{font-size:14px}
.business-alert-list{display:grid;gap:8px}
.business-alert{display:grid;grid-template-columns:24px 1fr 18px;gap:8px;align-items:center;text-decoration:none;color:var(--xs-text);padding:10px;border-radius:9px;border:1px solid var(--xs-border);background:var(--xs-surface)}
.business-alert span{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-weight:900}
.business-alert.warning span{background:var(--xs-warning-soft);color:var(--xs-warning)}
.business-alert.danger span{background:var(--xs-danger-soft);color:var(--xs-danger)}
.business-alert b{font-size:12px}
.business-alert em{font-style:normal;color:var(--xs-muted)}
.business-alert-empty{padding:18px 10px;color:var(--xs-muted);font-size:12px}
@media(max-width:1250px){.business-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.business-control-bottom{grid-template-columns:1fr}.business-status-layout{grid-template-columns:150px 1fr}}
@media(max-width:620px){.business-control-grid{grid-template-columns:1fr}.business-status-layout{grid-template-columns:1fr}.business-status-chart{height:170px}}


/* =========================================================
   v64 GLOBAL DARK MODE LEGACY GUARD
   Keeps legacy utility blocks readable in both themes.
   ========================================================= */
html[data-theme="dark"] .admin-site-check,
html[data-theme="dark"] .site-scope-switch,
html[data-theme="dark"] .expense-detail-box,
html[data-theme="dark"] .expense-detail-history-list,
html[data-theme="dark"] .network-wan-option,
html[data-theme="dark"] .wa-card,
html[data-theme="dark"] .wa-tabs a,
html[data-theme="dark"] .api-cli-cell code{
  background:var(--xs-surface-2)!important;
  color:var(--xs-text)!important;
  border-color:var(--xs-border)!important;
}
html[data-theme="dark"] .network-wan-table .wan-actions{background:var(--xs-surface)!important}
html[data-theme="dark"] .network-wan-table thead th:last-child{background:var(--xs-surface-2)!important}
html[data-theme="dark"] .tagihan-table tbody tr.tagihan-row-isolir td{color:var(--xs-text)!important}
html[data-theme="dark"] .pppoe-active-table tbody tr > td{color:var(--xs-text)!important}
html[data-theme="dark"] .pppoe-active-table .pppoe-badge-online{color:var(--xs-success)!important}
html[data-theme="dark"] .pppoe-active-table .pppoe-badge-offline{color:var(--xs-danger)!important}
html[data-theme="dark"] .pppoe-active-table .pppoe-badge-unknown{color:var(--xs-warning)!important}
html[data-theme="dark"] .site-online-card,
html[data-theme="dark"] .pppoe-dashboard-total,
html[data-theme="dark"] .network-metric,
html[data-theme="dark"] .account-summary>div,
html[data-theme="dark"] .backup-note,
html[data-theme="dark"] .billing-actions .action,
html[data-theme="dark"] .expense-form-grid input[readonly],
html[data-theme="dark"] .owner-bell,
html[data-theme="dark"] .quick a,
html[data-theme="dark"] .bulk-toolbar{
  background:var(--xs-surface-2)!important;
  color:var(--xs-text)!important;
  border-color:var(--xs-border)!important;
}
html[data-theme="dark"] .site-online-card span,
html[data-theme="dark"] .site-online-card small,
html[data-theme="dark"] .pppoe-dashboard-total small,
html[data-theme="dark"] .network-metric span,
html[data-theme="dark"] .network-metric small,
html[data-theme="dark"] .account-summary span,
html[data-theme="dark"] .expense-form-grid label{color:var(--xs-muted)!important}
html[data-theme="dark"] .site-online-card,
html[data-theme="dark"] .network-metric strong,
html[data-theme="dark"] .account-summary strong{color:var(--xs-text)!important}
html[data-theme="dark"] .pppoe-active-table .pppoe-action-col{background:var(--xs-surface)!important}
html[data-theme="dark"] .pppoe-active-table thead .pppoe-action-col{background:var(--xs-surface-2)!important}

/* =========================================================
   xstech-Biling v64 - Orange Identity UI Refresh
   Presentation only: no layout, route, data, or business logic changes.
   ========================================================= */
:root{
  --xs-primary:#f97316;
  --xs-primary-2:#ea580c;
  --xs-primary-soft:#fff1e8;
  --dash-blue:#f97316;
  --dash-cyan:#fb923c;
  --dash-orange:#f59e0b;
}
html[data-theme="dark"]{
  --xs-bg:#090d12;
  --xs-surface:#10161d;
  --xs-surface-2:#151c24;
  --xs-surface-3:#1a222c;
  --xs-text:#ffffff;
  --xs-muted:#c4cbd4;
  --xs-border:#34302d;
  --xs-primary:#ff7a18;
  --xs-primary-2:#e85d04;
  --xs-primary-soft:#321b0c;
  --xs-sidebar:#090d12;
  --xs-sidebar-2:#11151a;
  --xs-sidebar-text:#f2f4f7;
  --xs-sidebar-muted:#f59a4a;
  --xs-topbar:rgba(9,13,18,.94);
  --xs-chart-grid:rgba(255,255,255,.10);
}
html[data-theme="dark"] body{
  background:transparent;
}
.brand-mark{
  background:#111827!important;
  box-shadow:0 8px 24px rgba(249,115,22,.25)!important;
}
.brand-copy em{color:#ff8a1f!important}
.sidebar a:hover{background:rgba(249,115,22,.12);color:#fff}
.sidebar a.active{
  background:#111827!important;
  color:#fff!important;box-shadow:0 7px 20px rgba(249,115,22,.22)!important;
}
.sidebar a.active:before{background:#ff9a3c!important;box-shadow:0 0 12px rgba(255,122,24,.72)!important}
html[data-theme="dark"] .nav-flat-title,
html[data-theme="dark"] .nav-group-toggle,
html[data-theme="dark"] .dashboard-eyebrow,
html[data-theme="dark"] .panel-kicker,
html[data-theme="dark"] .dashboard-section-head span{color:#ff8a1f!important}
html[data-theme="dark"] .billing-dashboard-v62 .card,
html[data-theme="dark"] .owner-profit-cards .card{
  border-color:rgba(249,115,22,.30)!important;
  background:
    transparent,
    #111827!important;
}
html[data-theme="dark"] .billing-dashboard-v62 .card:hover,
html[data-theme="dark"] .owner-profit-cards .card:hover{border-color:rgba(255,122,24,.70)!important}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .business-control-panel{
  border-color:rgba(249,115,22,.20);
}
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .dashboard-hero h1,
html[data-theme="dark"] .card strong,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] th,
html[data-theme="dark"] td{color:#fff}
html[data-theme="dark"] .page-head p,
html[data-theme="dark"] .dashboard-hero p,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .card span{color:#c4cbd4}
html[data-theme="dark"] .top-icon-btn:hover{border-color:rgba(249,115,22,.55);background:#1b160f}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{border-color:#ff7a18!important;box-shadow:0 0 0 3px rgba(249,115,22,.13)!important}
html[data-theme="dark"] .active-filter-card{outline-color:#ff7a18!important}
html[data-theme="dark"] .active-filter-note{background:#28170c!important;border-color:rgba(249,115,22,.32)!important;color:#ffb078!important}
html[data-theme="dark"] .notification-row.unread{background:#24170f!important}
html[data-theme="dark"] .notification-row.unread .notification-dot{background:#ff7a18!important}
html[data-theme="dark"] .cpu-load-track i,
html[data-theme="dark"] .pppoe-live-bar{background:#111827!important}
html[data-theme="dark"] .legend-live{background:#ff7a18!important}
/* Keep semantic status colors (success/warning/danger) intact for operational clarity. */

/* =========================================================
   v64.00.3 - Orange Solid Gradient Dashboard
   Static CSS only. No images, animation, JS, or data changes.
   ========================================================= */
html[data-theme="dark"] .billing-dashboard-v62 .card,
html[data-theme="dark"] .owner-profit-cards .card{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  background:
    transparent,
    #111827!important;
  border-color:rgba(249,115,22,.45)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] .billing-dashboard-v62 .card::before,
html[data-theme="dark"] .owner-profit-cards .card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  left:34%!important;
  right:-19%!important;
  bottom:-54%!important;
  height:96%!important;
  width:auto!important;
  border-radius:48% 52% 0 0 / 68% 70% 0 0!important;
  background:#111827!important;
  transform:rotate(-9deg)!important;
  transform-origin:center!important;
  box-shadow:0 -1px 12px rgba(255,111,0,.22),0 -2px 0 rgba(255,145,52,.18)!important;
  pointer-events:none!important;
  opacity:.95!important;
}
html[data-theme="dark"] .billing-dashboard-v62 .card::after,
html[data-theme="dark"] .owner-profit-cards .card::after{
  content:"";
  position:absolute;
  z-index:0;
  right:-12%;
  bottom:-38%;
  width:62%;
  height:80%;
  border-radius:55% 45% 0 0 / 72% 66% 0 0;
  background:#111827;
  transform:rotate(-13deg);
  pointer-events:none;
}
html[data-theme="dark"] .billing-dashboard-v62 .card > *,
html[data-theme="dark"] .owner-profit-cards .card > *{position:relative;z-index:1}
html[data-theme="dark"] .billing-dashboard-v62 .card:hover,
html[data-theme="dark"] .owner-profit-cards .card:hover{
  border-color:rgba(255,132,35,.86)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.18),0 0 0 1px rgba(249,115,22,.08)!important;
}

/* Business-control tiles: smaller solid accent sweep, semantic border kept. */
html[data-theme="dark"] .business-kpi{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    transparent,
    #111827!important;
  border-top-color:rgba(249,115,22,.20)!important;
  border-right-color:rgba(249,115,22,.20)!important;
  border-bottom-color:rgba(249,115,22,.20)!important;
}
html[data-theme="dark"] .business-kpi::after{
  content:"";
  position:absolute;
  z-index:0;
  right:-17%;
  bottom:-52%;
  width:58%;
  height:85%;
  border-radius:58% 42% 0 0 / 72% 64% 0 0;
  background:#111827;
  transform:rotate(-12deg);
  pointer-events:none;
}
html[data-theme="dark"] .business-kpi > *{position:relative;z-index:1}

/* Main dashboard container panels receive a restrained orange depth instead of flat gray. */
html[data-theme="dark"] .business-control-v6321,
html[data-theme="dark"] .customer-status-dashboard,
html[data-theme="dark"] .owner-finance-trend-only,
html[data-theme="dark"] .admin-finance-trend,
html[data-theme="dark"] #pppoeLivePanel{
  background:
    transparent,
    #111827!important;
  border-color:rgba(249,115,22,.28)!important;
}

/* Orange identity is stronger but remains readable. */
html[data-theme="dark"] .sidebar{
  background:
    transparent,
    #111827!important;
  border-right:1px solid rgba(249,115,22,.24)!important;
}
html[data-theme="dark"] .sidebar a.active{
  background:#111827!important;
  box-shadow:0 8px 24px rgba(234,88,12,.27),inset 0 1px 0 rgba(255,255,255,.14)!important;
}

/* White remains the main reading color; orange is reserved for identity/accent. */
html[data-theme="dark"] .dashboard-hero h1,
html[data-theme="dark"] .billing-dashboard-v62 .card strong,
html[data-theme="dark"] .billing-dashboard-v62 .card small,
html[data-theme="dark"] .business-kpi strong,
html[data-theme="dark"] .business-kpi small{color:#fff!important}
html[data-theme="dark"] .billing-dashboard-v62 .kpi-label,
html[data-theme="dark"] .business-kpi span{color:#e8edf3!important}

@media(max-width:760px){
  html[data-theme="dark"] .billing-dashboard-v62 .card::before,
  html[data-theme="dark"] .owner-profit-cards .card::before{left:45%;bottom:-56%;height:92%}
  html[data-theme="dark"] .business-kpi::after{opacity:.75}
}


/* XSTECH BILING v6.7 - SOLID UI, no gradient */
:root{
 --xs-primary:#f97316!important;
 --xs-primary-strong:#ea580c!important;
 --xs-sidebar:#0f172a!important;
 --xs-sidebar-muted:#fdba74!important;
 --xs-chart-grid:rgba(148,163,184,.16)!important;
}
html[data-theme="dark"]{
 --xs-primary:#f97316!important;
 --xs-primary-strong:#ea580c!important;
 --xs-sidebar:#0b1220!important;
 --xs-sidebar-muted:#fdba74!important;
}
html,body,html[data-theme="dark"] body,.app-shell,.main-content{background:var(--xs-bg)!important;background-image:none!important}
.sidebar{background:var(--xs-sidebar)!important;background-image:none!important}
.brand-mark,.sidebar a.active,.sidebar .nav-group-toggle.active{
 background:#f97316!important;background-image:none!important;box-shadow:none!important
}
.brand-copy em,.nav-flat-title,.nav-group-toggle,.dashboard-eyebrow,.panel-kicker,.dashboard-section-head span,
html[data-theme="dark"] .nav-flat-title,html[data-theme="dark"] .nav-group-toggle,
html[data-theme="dark"] .dashboard-eyebrow,html[data-theme="dark"] .panel-kicker,
html[data-theme="dark"] .dashboard-section-head span{color:#fb923c!important}
.billing-dashboard-v62 .card,.owner-profit-cards .card,.business-kpi,
html[data-theme="dark"] .billing-dashboard-v62 .card,
html[data-theme="dark"] .owner-profit-cards .card,
.panel,.dashboard-panel,.business-control-panel,.analytics-widget,.wa-card,.modal-content{
 background:var(--xs-surface)!important;background-image:none!important;box-shadow:none!important
}
.billing-dashboard-v62 .card,.owner-profit-cards .card,.business-kpi{
 border-color:var(--xs-border)!important
}
.btn,.button,button.btn,.btn.primary,.action-btn{
 background:#f97316!important;background-image:none!important;box-shadow:none!important
}
.btn.secondary,.button.secondary,button.btn.secondary{background:var(--xs-surface-3)!important;background-image:none!important}
.sidebar a:hover{background:#3b1a0a!important}
.sidebar a.active:hover{background:#ea580c!important}
input:focus,select:focus,textarea:focus,html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{
 border-color:#f97316!important;box-shadow:0 0 0 3px rgba(249,115,22,.13)!important
}
.active-filter-card{outline-color:#f97316!important}
.active-filter-note{background:rgba(249,115,22,.08)!important;border-color:rgba(249,115,22,.28)!important;color:#fb923c!important}
.topbar,.table-wrap,table,thead,tbody,tr,th,td,input,select,textarea,.filters,.dropdown-menu{
 background-image:none!important
}
.sidebar svg,.nav-icon,.kpi-icon{display:inline-block!important;opacity:1!important}


/* v6.7 final orange-solid identity */
:root{
  --xs-primary:#f97316!important;
  --xs-primary-strong:#ea580c!important;
  --xs-sidebar:#111827!important;
  --xs-sidebar-muted:#fdba74!important;
}
html[data-theme="dark"]{
  --xs-primary:#f97316!important;
  --xs-primary-strong:#ea580c!important;
  --xs-sidebar:#0b0f14!important;
  --xs-sidebar-muted:#fdba74!important;
}
.brand-mark,
.sidebar a.active,
.sidebar .nav-group-toggle.active,
.btn,.button,button.btn,.btn.primary,.action-btn{
  background:#f97316!important;
  background-image:none!important;
  box-shadow:none!important;
}
.sidebar a.active:hover{background:#ea580c!important}
.brand-copy em,
.nav-flat-title,
.nav-group-toggle,
.dashboard-eyebrow,
.panel-kicker,
.dashboard-section-head span{
  color:#fb923c!important;
}
input:focus,select:focus,textarea:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color:#f97316!important;
  box-shadow:0 0 0 3px rgba(249,115,22,.13)!important;
}
.active-filter-card{outline-color:#f97316!important}
.active-filter-note{
  background:rgba(249,115,22,.08)!important;
  border-color:rgba(249,115,22,.28)!important;
  color:#fb923c!important;
}

/* Light mode visibility refinement: stronger boundaries without affecting dark mode */
html:not([data-theme="dark"]){
  --xs-bg:#f3f5f8;
  --xs-surface:#ffffff;
  --xs-surface-2:#f8fafc;
  --xs-surface-3:#f1f5f9;
  --xs-border:#cbd3dd;
  --xs-chart-grid:rgba(71,85,105,.22);
  --xs-shadow:0 2px 8px rgba(15,23,42,.055);
  --xs-shadow-hover:0 8px 22px rgba(15,23,42,.10);
}
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .dashboard-panel,
html:not([data-theme="dark"]) .business-control-panel,
html:not([data-theme="dark"]) .analytics-widget,
html:not([data-theme="dark"]) .wa-card,
html:not([data-theme="dark"]) .modal-content,
html:not([data-theme="dark"]) .table-wrap{
  border-color:#cbd3dd!important;
  box-shadow:0 2px 8px rgba(15,23,42,.055)!important;
}
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea{
  background:#fff!important;
  border-color:#b8c2ce!important;
}
html:not([data-theme="dark"]) input:hover,
html:not([data-theme="dark"]) select:hover,
html:not([data-theme="dark"]) textarea:hover{border-color:#94a3b8!important}
html:not([data-theme="dark"]) th{
  background:#eef2f6!important;
  border-bottom-color:#bfc9d5!important;
}
html:not([data-theme="dark"]) td{border-bottom-color:#d7dee7!important}
html:not([data-theme="dark"]) table{border-color:#cbd3dd!important}
html:not([data-theme="dark"]) .topbar{border-bottom-color:#cbd3dd!important}
html:not([data-theme="dark"]) .bulk-toolbar,
html:not([data-theme="dark"]) .filters,
html:not([data-theme="dark"]) .quick a,
html:not([data-theme="dark"]) .backup-note,
html:not([data-theme="dark"]) .ticket-photo-card{
  border:1px solid #cbd3dd!important;
}
html:not([data-theme="dark"]) .clickable-card:hover{border-color:#f97316!important}


/* v6.7 UI alignment & containment - global, ringan, tanpa mengubah data */
.content-wrap{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
.page-head,.page-actions,.cards,.panel,.card,.filters,.form-grid,.filter-grid,.grid-2,.grid-3,.grid-4{min-width:0;max-width:100%}
.panel>*,.card>*,.form-grid>*,.filter-grid>*,.page-actions>*{min-width:0;max-width:100%}
input,select,textarea,.search,.search input{max-width:100%}
form.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
form.form-grid>.field-span-2{grid-column:1 / -1}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible}
.table-wrap table{min-width:100%;max-width:none}
img,svg,canvas{max-width:100%}
.card,.business-kpi{position:relative;padding-right:58px!important}
.xs-card-icon{position:absolute;top:13px;right:13px;width:30px;height:30px;display:grid!important;place-items:center;border-radius:8px;background:rgba(249,115,22,.12);color:#f97316!important;line-height:1;pointer-events:none}
.xs-card-icon svg{width:15px;height:15px;fill:currentColor}
.import-framework-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.import-framework-cards .card strong{font-size:17px}
.import-framework-cards .card small{display:block;margin-top:8px;color:var(--xs-muted);line-height:1.5}
.import-flow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.import-flow-grid>div{min-width:0;border:1px solid var(--xs-border);border-radius:9px;padding:13px;background:var(--xs-surface-2)}
.import-flow-grid b,.import-flow-grid span{display:block}.import-flow-grid span{margin-top:5px;color:var(--xs-muted);font-size:12px;line-height:1.5}
@media(max-width:1000px){.import-framework-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){form.form-grid,.import-flow-grid,.import-framework-cards{grid-template-columns:1fr}.card,.business-kpi{padding-right:52px!important}}