html.simponi-loading body #app{visibility:hidden}html.simponi-navigating body #app{visibility:visible}html.simponi-loading .sidebar,html.simponi-loading .topbar,html.simponi-loading .main-content{transition:none!important}
:root{--primary:#0f2747;--secondary:#087fc9;--light-blue:#eaf5fc;--bg:#f4f7fa;--white:#fff;--success:#22a06b;--warning:#f59e0b;--danger:#dc3545;--text:#263238;--muted:#6b7280;--border:#e5e9ef;--sidebar:258px;--topbar:70px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:13px}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:var(--secondary);text-decoration:none}.sidebar{position:fixed;z-index:30;left:0;top:0;bottom:0;width:var(--sidebar);background:var(--primary);color:#fff;transition:none;display:flex;flex-direction:column;overflow:auto}.side-brand{height:82px;display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1)}.brand-mark{width:40px;height:40px;border-radius:8px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:18px;flex:none}.brand-mark.small{width:34px;height:34px}.side-brand strong{font-size:17px;letter-spacing:.5px}.side-brand small{display:block;color:#b8c7d8;font-size:8px;line-height:1.4;margin-top:2px}.sidebar nav{padding:12px 10px;flex:1}.nav-item{width:100%;border:0;background:transparent;color:#d9e4ef;padding:11px 12px;border-radius:6px;display:flex;align-items:center;justify-content:space-between;text-align:left;margin:2px 0;font-size:12px}.nav-item span{display:flex;align-items:center;gap:12px}.nav-item i{width:17px;text-align:center}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.1);color:#fff}.submenu{display:none;padding:2px 0 5px 42px}.nav-group.open .submenu{display:block}.submenu a{display:block;color:#b8c7d8;padding:8px 8px;border-left:1px solid rgba(255,255,255,.14);font-size:11px}.submenu a:hover,.submenu a.active{color:#fff;background:rgba(255,255,255,.06)}.chev{transition:.2s}.nav-group.open .chev{transform:rotate(180deg)}.side-bottom{padding:10px;border-top:1px solid rgba(255,255,255,.1)}.topbar{position:fixed;z-index:20;left:var(--sidebar);right:0;top:0;height:var(--topbar);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:16px;transition:none}.icon-btn{border:0;background:transparent;color:#536273;width:35px;height:35px;border-radius:6px}.icon-btn:hover{background:var(--bg)}.breadcrumb{display:flex;align-items:center;gap:9px;color:#8993a1}.breadcrumb i{font-size:9px}.breadcrumb b{color:var(--text);font-weight:600}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.top-actions label{display:flex;align-items:center;gap:6px;color:#7a8593;font-size:11px}.top-actions select{border:1px solid var(--border);padding:7px 26px 7px 8px;border-radius:5px;background:#fff;color:var(--text)}.notif{position:relative}.notif em{position:absolute;top:1px;right:1px;background:var(--danger);color:#fff;border-radius:20px;font-style:normal;font-size:8px;min-width:14px;height:14px;display:grid;place-items:center}.user-menu{position:relative}.user-menu>button{border:0;background:transparent;display:flex;align-items:center;gap:8px}.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:10px}.avatar.soft{background:var(--light-blue);color:var(--secondary)}.user-label{text-align:left;display:flex;flex-direction:column;line-height:1.3}.user-label small{color:var(--muted);font-size:9px}.user-menu>button>i{font-size:9px;color:#8993a1}.dropdown{display:none;position:absolute;right:0;top:43px;width:170px;background:#fff;border:1px solid var(--border);box-shadow:0 10px 28px rgba(15,39,71,.12);border-radius:7px;padding:5px}.dropdown.show{display:block}.dropdown a,.dropdown button{display:block;width:100%;border:0;background:#fff;text-align:left;padding:9px;color:var(--text);font-size:11px}.dropdown a:hover,.dropdown button:hover{background:var(--bg)}.dropdown i{width:20px}.main-content{margin-left:var(--sidebar);padding-top:var(--topbar);min-height:100vh;transition:none}.page-container{padding:24px}.sidebar-collapsed .sidebar{width:72px}.sidebar-collapsed .side-brand div:last-child,.sidebar-collapsed .nav-text{display:none}
.sidebar-collapsed .side-brand{justify-content:center;padding:12px}
.sidebar-collapsed .nav-item{justify-content:center;padding-left:8px;padding-right:8px}
.sidebar-collapsed .nav-label{justify-content:center}
.sidebar-collapsed .nav-item .chev,.sidebar-collapsed .submenu{display:none}.sidebar-collapsed .topbar{left:72px}.sidebar-collapsed .main-content{margin-left:72px}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.eyebrow{font-size:9px;color:var(--secondary);font-weight:700;letter-spacing:1.2px;margin-bottom:4px}.page-head h1{margin:0;font-size:22px;color:var(--primary)}.page-head p{margin:6px 0 0;color:var(--muted);font-size:11px}.btn{border:1px solid transparent;border-radius:6px;padding:9px 13px;font-weight:600;font-size:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn-primary{background:var(--secondary);color:#fff}.btn-primary:hover{background:#076fae}.btn-secondary{background:#fff;border-color:var(--border);color:#475569}.btn-danger{background:var(--danger);color:#fff}.btn-success{background:var(--success);color:#fff}.btn-warning{background:var(--warning);color:#fff}.btn-block{width:100%;padding:11px}.filter-card,.panel{background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 2px 8px rgba(15,39,71,.025)}.filter-card{padding:15px;display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr 1fr auto;gap:10px;margin-bottom:16px}.filter-card label,.form-grid label{display:block;font-size:10px;color:#697586;font-weight:600;margin-bottom:5px}.filter-card input,.filter-card select,.form-control,.filter-card button{width:100%;height:35px;border:1px solid var(--border);border-radius:5px;background:#fff;padding:0 9px;color:var(--text)}.filter-card button{border:0;height:35px;margin-top:15px}.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}.kpi{background:#fff;border:1px solid var(--border);border-radius:8px;padding:15px;display:flex;gap:12px;align-items:center;box-shadow:0 2px 8px rgba(15,39,71,.025)}.kpi-icon{width:40px;height:40px;border-radius:7px;display:grid;place-items:center;font-size:16px;flex:none}.kpi-icon.blue{background:#eaf5fc;color:#087fc9}.kpi-icon.cyan{background:#e8f8fb;color:#1595a8}.kpi-icon.green{background:#eaf8f1;color:#22a06b}.kpi-icon.orange{background:#fff5e5;color:#f59e0b}.kpi-icon.red{background:#fff0f1;color:#dc3545}.kpi span{display:block;color:#738092;font-size:9px}.kpi strong{display:block;color:var(--primary);font-size:15px;margin:3px 0}.kpi small{color:#8993a1;font-size:9px}.kpi small.up{color:var(--success)}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.panel-head h3{margin:0;font-size:13px;color:var(--primary)}.panel-head span{font-size:9px;color:var(--muted)}.panel-head>a{font-size:10px}.legend{display:flex;gap:7px;align-items:center}.legend i{width:8px;height:8px;border-radius:50%;background:#087fc9}.legend i:nth-of-type(2){background:#22a06b}.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-top:14px}.panel{overflow:hidden}.panel .panel-head{padding:15px 16px 0}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:10px}th{background:#f8fafc;color:#64748b;font-weight:700;text-align:left;white-space:nowrap}th,td{padding:10px 12px;border-bottom:1px solid #edf0f4;vertical-align:middle}tbody tr:hover{background:#fbfdff}.badge{display:inline-flex;padding:4px 7px;border-radius:20px;font-size:8px;font-weight:700;white-space:nowrap}.draft{background:#eef0f3;color:#68717e}.diajukan{background:#eaf5fc;color:#087fc9}.menunggu-validasi{background:#fff5df;color:#b36d00}
.menunggu-persetujuan-tingkat-2{background:#f3e8ff;color:#7c3aed}.disetujui,.selesai{background:#eaf8f1;color:#168052}.ditolak{background:#fff0f1;color:#c52c3c}.melebihi-pagu{background:#c52c3c;color:#fff}.melebihi-rencana{background:#fff5df;color:#b36d00}.di-bawah-rencana{background:#eaf5fc;color:#087fc9}.sesuai-rencana{background:#eaf8f1;color:#168052}.belum-ada-aktivitas{background:#eef0f3;color:#68717e}
.chart-legend-list{display:flex;flex-direction:column;gap:5px;margin-top:10px;padding-top:10px;border-top:1px solid #edf0f4}
.chart-legend-item{display:flex;align-items:flex-start;gap:8px;font-size:10px;color:#42505f;line-height:1.5}
.chart-legend-item i{width:12px;height:12px;border-radius:3px;flex:none;display:inline-block;margin-top:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.chart-legend-item b{color:#1c2b3a;font-weight:700;margin-right:2px}
.deviation-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:10px;color:#5b6675;margin-top:4px}
.deviation-legend span{display:inline-flex;align-items:center;gap:6px}
.deviation-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}.approval-list{padding:0 16px 12px}.approval{display:flex;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid #edf0f4}.approval>div:nth-child(2){flex:1}.approval b{display:block;font-size:10px}.approval small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.modal-backdrop{position:fixed;inset:0;background:rgba(15,39,71,.48);z-index:100;display:grid;place-items:center;padding:20px}.modal{background:#fff;width:min(620px,100%);max-height:90vh;overflow:auto;border-radius:9px;box-shadow:0 20px 60px rgba(0,0,0,.2)}.modal-wide{width:min(900px,100%)}.modal-head{padding:14px 17px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0;font-size:14px;color:var(--primary)}.modal-head button{border:0;background:transparent;font-size:17px;color:#738092}.modal-body{padding:17px;min-width:0}.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-width:0}.form-grid .full{grid-column:1/-1;min-width:0}.form-control{height:36px;width:100%;min-width:0;box-sizing:border-box}textarea.form-control{height:80px;padding:9px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.confirm-box{text-align:center;padding:10px}.confirm-icon{font-size:38px;color:var(--warning);margin-bottom:8px}.toast{position:fixed;right:22px;bottom:22px;z-index:200;background:#fff;border:1px solid var(--border);box-shadow:0 10px 30px rgba(15,39,71,.15);border-left:4px solid var(--success);padding:12px 15px;border-radius:6px;display:flex;gap:9px;align-items:center;font-size:11px}.toast i{color:var(--success)}.progress{height:7px;background:#edf1f5;border-radius:20px;overflow:hidden}.progress>span{display:block;height:100%;background:var(--secondary);border-radius:20px}.login-page{background:var(--bg)}@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.filter-card{grid-template-columns:repeat(3,1fr)}.chart-grid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}}@media(max-width:760px){:root{--sidebar:0px}.sidebar{transform:translateX(-100%);width:258px}.sidebar-collapsed .sidebar{width:258px;transform:translateX(0)}.topbar{left:0;padding:0 12px}.main-content,.sidebar-collapsed .main-content{margin-left:0}.sidebar-collapsed .topbar{left:0}.breadcrumb{display:none}.top-actions label{display:none}.user-label{display:none}.page-container{padding:16px}.kpi-grid{grid-template-columns:1fr 1fr}.filter-card{grid-template-columns:1fr 1fr}.filter-card button{grid-column:span 2}.chart-grid{grid-template-columns:1fr}.chart-panel.large{grid-column:auto}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}
.nav-label{display:flex;align-items:center;gap:12px;min-width:0}
.nav-label>.nav-text{display:block;white-space:nowrap}
.sidebar-collapsed .nav-label{gap:0}
.validation-types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.validation-type{border:1px solid var(--border);background:#fff;border-radius:8px;padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--primary);font-size:11px;font-weight:600;text-align:left;transition:.2s}
.validation-type span{display:flex;align-items:center;gap:9px}
.validation-type span i{color:var(--secondary)}
.validation-type b{min-width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eef2f6;color:#64748b;font-size:10px}
.validation-type:hover,.validation-type.active{border-color:var(--secondary);background:var(--light-blue)}
.validation-type.has-pending b{background:#fff1d8;color:#a15d00}
.validation-total{display:inline-flex;align-items:center;gap:7px;background:#eef1f5;color:#4a5568;border:1px solid #dde2e8;border-radius:20px;padding:8px 12px;font-size:10px;font-weight:700}
.validation-total.is-pending{background:#1e8e3e;color:#fff;border-color:#1a7a35;box-shadow:0 1px 4px rgba(30,142,62,.35)}
.validation-panel{min-height:280px}
.empty-state{text-align:center;padding:55px 20px;color:var(--muted)}
.empty-state i{font-size:30px;color:#b4c0cc;margin-bottom:10px}
.empty-state p{margin:0;font-size:11px}
.validation-note{font-size:9px;color:var(--danger);line-height:1.35;max-width:180px}
.validation-note i{margin-right:5px}
.validation-note.approved{color:var(--success)}
.validation-note.l2-pending{color:#7c3aed}
.muted-note{color:#98a2ae;font-size:9px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.detail-grid>div{padding:12px 14px;border:1px solid var(--border);border-radius:6px;background:#fafbfd}
.detail-grid .full,.detail-rejection{grid-column:1/-1}
.detail-grid small{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
.detail-grid b{font-size:15px;line-height:1.4}
.validator-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:3px 0;font-size:15px}
.validator-level{display:inline-block;min-width:78px;font-size:12px;font-weight:700;color:var(--muted)}
.validator-date{font-size:12px;color:var(--muted)}
.detail-rejection{border:1px solid #f3c6cc!important;background:#fff7f8!important}
.detail-rejection b{color:var(--danger)}
.detail-rejection p{margin:6px 0 0;font-size:10px;line-height:1.5}
.reject-intro{display:flex;gap:12px;padding:11px 12px;background:#fff7f8;border:1px solid #f3c6cc;border-radius:7px;margin-bottom:15px}
.reject-intro>i{font-size:22px;color:var(--danger);margin-top:2px}
.reject-intro b{font-size:12px;color:var(--primary)}
.reject-intro p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.reject-textarea{height:110px!important;padding:10px!important;resize:vertical}
.required{color:var(--danger)}
.reject-counter{display:flex;justify-content:space-between;color:#98a2ae;font-size:9px;margin-top:5px}
.reject-counter #rejectError{color:var(--danger)}
@media(max-width:900px){.validation-types{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
.validation-types{grid-template-columns:1fr}
.detail-grid{grid-template-columns:1fr}
.detail-grid .full,.detail-rejection{grid-column:auto}
.sidebar-collapsed .side-brand div:last-child{display:block}
.sidebar-collapsed .side-brand{justify-content:flex-start;padding:14px 18px}
.sidebar-collapsed .nav-text{display:block}
.sidebar-collapsed .nav-item{justify-content:space-between;padding-left:12px;padding-right:12px}
.sidebar-collapsed .nav-label{justify-content:flex-start;gap:12px}
.sidebar-collapsed .nav-item .chev{display:block}
}
/* === SIDEBAR FIX / ACTIVE MENU === */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:258px;overflow-y:auto;overflow-x:hidden}
.topbar{position:fixed;left:258px;right:0;top:0}
.main-content{margin-left:258px}
.sidebar-collapsed .sidebar{width:72px}
.sidebar-collapsed .topbar{left:72px}
.sidebar-collapsed .main-content{margin-left:72px}
.nav-group.open>.nav-item{background:rgba(255,255,255,.08);color:#fff}
.nav-group.open>.nav-item .chev{transform:rotate(180deg)}
.submenu a.active{color:#fff;background:rgba(255,255,255,.12);font-weight:600;border-left-color:#5ab7ee}
.submenu{max-height:none;overflow:visible}
@media(max-width:760px){
:root{--sidebar:258px}
.sidebar{width:258px;transform:translateX(-100%)}
.sidebar-collapsed .sidebar{width:258px;transform:translateX(0)}
.topbar,.sidebar-collapsed .topbar{left:0}
.main-content,.sidebar-collapsed .main-content{margin-left:0}
body:not(.sidebar-collapsed)::after{display:none}
.sidebar-collapsed::after{content:"";position:fixed;inset:0;background:rgba(15,39,71,.28);z-index:25}
.sidebar{z-index:30}
.topbar{z-index:20}
}
.row-actions{display:flex;align-items:center;gap:5px;white-space:nowrap}.row-actions .btn{padding:6px 8px;font-size:10px}
/* === V6 SIDEBAR / NO FLICKER OVERRIDES === */
html.simponi-loading body{overflow:hidden}
.sidebar{transition:width .18s ease}
.topbar,.main-content{transition:margin-left .18s ease,left .18s ease}
.sidebar-collapsed .sidebar{width:72px}
.sidebar-collapsed .topbar{left:72px}
.sidebar-collapsed .main-content{margin-left:72px}
.sidebar-collapsed .side-brand{justify-content:center;padding:12px}
.sidebar-collapsed .side-brand > div:last-child{display:none}
.sidebar-collapsed .nav-text{display:none}
.sidebar-collapsed .nav-item{justify-content:center;padding-left:8px;padding-right:8px}
.sidebar-collapsed .nav-label{justify-content:center;gap:0}
.sidebar-collapsed .nav-item .chev{display:none}
.sidebar-collapsed .submenu{display:none!important}
.sidebar-collapsed .nav-group.open>.nav-item{background:rgba(255,255,255,.1)}
.sidebar-collapsed .nav-item i{margin:0}
.row-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}
.row-actions .btn{padding:7px 9px;font-size:10px;border:0;box-shadow:0 1px 2px rgba(15,39,71,.08)}
.btn-info{background:#0ea5e9;color:#fff}.btn-info:hover{background:#0284c7}
.budget-change{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.budget-change.up,.budget-direction.up,.budget-preview.up{color:var(--success)}
.budget-change.down,.budget-direction.down,.budget-preview.down{color:var(--danger)}
.budget-direction{display:inline-flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap}
.budget-preview{height:36px;border:1px solid var(--border);border-radius:5px;background:#fafbfd;padding:0 10px;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}
.budget-preview.neutral{color:#64748b}
.budget-form-grid small{font-weight:400;color:#98a2ae}
.budget-kpi{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.budget-kpi{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
html.simponi-loading body{overflow:hidden}
.sidebar{width:258px;transform:translateX(-100%);transition:transform .18s ease}
.sidebar-collapsed .sidebar{width:258px;transform:translateX(0)}
.topbar,.sidebar-collapsed .topbar{left:0}
.main-content,.sidebar-collapsed .main-content{margin-left:0}
.sidebar-collapsed .side-brand{justify-content:flex-start;padding:14px 18px}
.sidebar-collapsed .side-brand > div:last-child{display:block}
.sidebar-collapsed .nav-text{display:block}
.sidebar-collapsed .nav-item{justify-content:space-between;padding-left:12px;padding-right:12px}
.sidebar-collapsed .nav-label{justify-content:flex-start;gap:12px}
.sidebar-collapsed .nav-item .chev{display:block}
.sidebar-collapsed .nav-group.open .submenu{display:block!important}
body.sidebar-collapsed::after{content:"";position:fixed;inset:0;background:rgba(15,39,71,.28);z-index:25}
}
/* === V7 SIDEBAR BOOT / STABLE TOGGLE === */
html.simponi-precollapsed .sidebar{width:72px}
html.simponi-precollapsed .topbar{left:72px}
html.simponi-precollapsed .main-content{margin-left:72px}
html.simponi-precollapsed .side-brand{justify-content:center;padding:12px}
html.simponi-precollapsed .side-brand > div:last-child,html.simponi-precollapsed .nav-text{display:none}
html.simponi-precollapsed .nav-item{justify-content:center;padding-left:8px;padding-right:8px}
html.simponi-precollapsed .nav-label{justify-content:center;gap:0}
html.simponi-precollapsed .nav-item .chev,html.simponi-precollapsed .submenu{display:none!important}
html.simponi-premobile-open .sidebar{width:258px;transform:translateX(0)}
html.simponi-premobile-open .topbar{left:0}
html.simponi-premobile-open .main-content{margin-left:0}
html.simponi-precollapsed .sidebar,html.simponi-precollapsed .topbar,html.simponi-precollapsed .main-content,html.simponi-premobile-open .sidebar,html.simponi-premobile-open .topbar,html.simponi-premobile-open .main-content{transition:none!important}
.file-chip{display:inline-flex;align-items:center;gap:6px;max-width:260px;padding:5px 8px;border:1px solid var(--border);border-radius:5px;background:#f8fafc;color:#475569;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-chip i{color:var(--secondary)}
.nota-dinas-current{padding:8px 10px;border:1px dashed var(--border);border-radius:6px;background:#fafbfd}
.nota-dinas-current small{display:block;color:#7b8794;font-size:9px;margin-top:5px}
.btn-primary,.btn-success,.btn-warning,.btn-danger,.btn-info{border:0!important;box-shadow:0 1px 2px rgba(15,39,71,.08)}
.row-actions .btn{min-height:30px}
@media(max-width:760px){
html.simponi-precollapsed .sidebar{width:258px;transform:translateX(-100%)}
html.simponi-precollapsed .topbar,html.simponi-premobile-open .topbar{left:0}
html.simponi-precollapsed .main-content,html.simponi-premobile-open .main-content{margin-left:0}
html.simponi-premobile-open::after{content:"";position:fixed;inset:0;background:rgba(15,39,71,.28);z-index:25}
}
/* === V8: COMPACT, CONSISTENT TRANSACTION ACTIONS === */
.row-actions{display:flex;align-items:center;gap:4px;white-space:nowrap}
.row-actions .action-btn{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important;border:0!important;border-radius:5px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:10px!important;line-height:1!important;box-shadow:none!important}
.row-actions .action-btn i{margin:0!important;width:auto!important}
.row-actions .action-view{background:#087fc9!important;color:#fff!important}
.row-actions .action-edit{background:#f59e0b!important;color:#fff!important}
.row-actions .action-delete{background:#dc3545!important;color:#fff!important}
.row-actions .action-submit{background:#22a06b!important;color:#fff!important}
.row-actions .action-btn:hover:not(:disabled){filter:brightness(.94);transform:translateY(-1px)}
.row-actions .action-btn.is-disabled,.row-actions .action-btn:disabled{opacity:.32!important;cursor:not-allowed!important;filter:grayscale(.8)!important;transform:none!important}
.file-stack{display:flex;flex-direction:column;gap:4px;max-width:220px}
.file-stack .file-chip{max-width:220px}
.file-help{display:block;color:#7b8794;font-size:9px;margin-top:5px}
.current-file{margin-top:6px}
.attachment-required{padding-top:2px}
/* === V8: SIDEBAR STABLE / NO VISUAL FLICKER === */
html,body{overflow-x:hidden}
.sidebar,.topbar,.main-content{transition:none!important}
.sidebar{will-change:auto}
.sidebar-collapsed .sidebar{width:72px!important}
.sidebar-collapsed .topbar{left:72px!important}
.sidebar-collapsed .main-content{margin-left:72px!important}
html.simponi-precollapsed .sidebar{width:72px!important}
html.simponi-precollapsed .topbar{left:72px!important}
html.simponi-precollapsed .main-content{margin-left:72px!important}
html.simponi-precollapsed .sidebar,.sidebar-collapsed .sidebar{overflow-x:hidden}
@media(max-width:760px){
.sidebar,.sidebar-collapsed .sidebar{width:258px!important}
.sidebar{transform:translateX(-100%)}
.sidebar-collapsed .sidebar,html.simponi-premobile-open .sidebar{transform:translateX(0)}
.topbar,.sidebar-collapsed .topbar,html.simponi-premobile-open .topbar{left:0!important}
.main-content,.sidebar-collapsed .main-content,html.simponi-premobile-open .main-content{margin-left:0!important}
}
/* === V9: PDF VIEWER / NOTA DINAS === */
.pdf-view-mini{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:4px 7px!important;min-height:24px!important;border:0!important;border-radius:5px!important;background:#087fc9!important;color:#fff!important;font-size:9px!important;line-height:1!important;white-space:nowrap!important}
.pdf-view-mini:hover{filter:brightness(.94)}
.pdf-detail-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border:1px solid var(--border);border-radius:6px;background:#f8fafc}
.pdf-viewer-wrap{display:flex;flex-direction:column;gap:10px;min-height:62vh}
.pdf-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:#f8fafc}
.pdf-viewer-head b{display:block;font-size:12px;color:var(--text)}
.pdf-viewer-head small{display:block;margin-top:2px;color:#7b8794;font-size:9px}
.pdf-viewer-frame{width:100%;height:62vh;border:1px solid var(--border);border-radius:6px;background:#fff}
@media(max-width:760px){.pdf-viewer-head{align-items:flex-start;flex-direction:column}.pdf-viewer-frame{height:58vh}}
/* === V10: VALIDATION SPLIT + VALIDATION HISTORY === */
.validation-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(360px,1fr);gap:14px;align-items:start}
.validation-pending-panel,.validation-history-panel{min-width:0;min-height:360px}
.validation-history-filter{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;padding:0 16px 12px;border-bottom:1px solid var(--border);align-items:end}
.validation-history-filter label{display:block;font-size:10px;color:#697586;font-weight:600;margin-bottom:5px}
.validation-history-filter .form-control{height:34px}
.validation-reset-btn{height:34px;padding:0 10px!important;white-space:nowrap}
.validation-history-panel .table-wrap{max-height:520px;overflow:auto}
.validation-history-panel table{min-width:650px}
.validation-history-panel th,.validation-history-panel td{padding:8px 9px}
.validation-history-panel .badge{font-size:8px}
.validation-history-panel .row-actions{justify-content:flex-start}
.validation-history-panel .empty-state{min-height:260px}
.validation-pending-panel .table-wrap{max-height:520px;overflow:auto}
.validation-pending-panel table{min-width:760px}
@media(max-width:1200px){
.validation-split{grid-template-columns:1fr}
.validation-history-panel{min-height:300px}
.validation-history-panel .table-wrap{max-height:360px}
}
@media(max-width:760px){
.validation-history-filter{grid-template-columns:1fr 1fr}
.validation-reset-btn{grid-column:1/-1}
}
.source-check-row{display:flex;gap:10px;margin-top:8px}.source-check-row .permission-check{flex:1}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.permission-check{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:7px;padding:9px 11px;background:#fbfdff;font-size:10px;cursor:pointer}.permission-check input{width:15px;height:15px;accent-color:#087fc9}.permission-actions{display:flex;gap:7px;margin-top:9px}.permission-summary{display:inline-flex;padding:4px 7px;border-radius:12px;background:#eef6fb;color:#087fc9;font-weight:700;font-size:9px}.permission-chip-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}.permission-chip{display:inline-flex;padding:5px 8px;border-radius:12px;background:#eef6fb;color:#087fc9;font-size:9px;font-weight:600}@media(max-width:760px){.permission-grid{grid-template-columns:1fr}}
.account-tree-name{display:flex;align-items:flex-start;gap:7px;min-width:220px}.account-tree-name>span:last-child{display:flex;flex-direction:column;gap:2px}.account-tree-name small{color:#4b5563;font-size:12px;font-weight:500}.account-tree-marker{color:#087fc9;font-size:11px;width:12px}.account-child-row{background:#fcfdff}.grand-total-note{display:block;color:#8a95a3;font-size:8px;margin-top:2px}.breakdown-list{border:1px solid var(--border);border-radius:6px;overflow:hidden}.breakdown-item{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-bottom:1px solid #edf0f4;background:#fff;font-size:10px}.breakdown-item:last-child{border-bottom:0}.info-box{padding:10px 12px;background:#f5f9fc;border:1px solid #dcecf7;border-radius:6px;color:#617080;font-size:10px}.info-box i{color:#087fc9;margin-right:5px}
/* V15: account hierarchy, budget balance, compact numeric fields */
.account-tree-toggle{border:0;background:transparent;color:#087fc9;width:16px;height:18px;padding:0;display:inline-grid;place-items:center;cursor:pointer}.account-tree-toggle:hover{color:#075f97}.account-tree-marker{display:inline-grid;place-items:center;width:16px;color:#087fc9}.account-subtotal-row td{background:#f8fbfd;border-top:1px dashed #b9d8ea;border-bottom:1px solid #dcecf7;padding:9px 10px;color:#12385a}.account-subtotal-row td:first-child{padding-left:18px}.account-subtotal-row strong{font-size:10px;color:#0b4773}.account-subtotal-row small{display:block;margin-top:2px;color:#7a8796;font-size:8px;font-weight:400}.account-subtotal-row td:nth-child(4),.account-subtotal-row td:nth-child(5){text-align:right}.account-subtotal-row td:nth-child(4) strong,.account-subtotal-row td:nth-child(5) strong{font-size:11px}.account-grand-total{display:flex;justify-content:space-between;align-items:center;margin:0 16px 16px;padding:12px 14px;background:#f7fbfe;border:1px solid #dcecf7;border-radius:7px}.account-grand-total span{display:block;font-size:11px;font-weight:700;color:var(--primary)}.account-grand-total small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.account-grand-total strong{font-size:15px;color:var(--primary)}.budget-balance{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid #d9eaf5;background:#f7fbfe;border-radius:6px}.budget-balance>div{display:flex;flex-direction:column;gap:2px}.budget-balance small{font-size:9px;color:#718096;font-weight:600}.budget-balance strong{font-size:14px;color:#087fc9}.budget-balance>span{font-size:9px;color:#7a8796;text-align:right}.budget-balance.empty{justify-content:flex-start;color:#7a8796}.budget-balance.empty i{color:#087fc9}.numeric-input{text-align:right;font-variant-numeric:tabular-nums}.account-row.account-child-row td:first-child{border-left:0}.account-row td{transition:background .1s}.modal-backdrop{cursor:default}.modal{cursor:default}
.account-no,.account-no-head{width:34px;text-align:center;color:#6b7f89;font-weight:700;font-variant-numeric:tabular-nums}.account-no-head{font-size:9px}.account-subtotal-row td{background:#eaf5f3;border-top:2px solid #9edfd1;border-bottom:1px solid #c9e7e1;padding:10px}.account-subtotal-row td:nth-child(6){text-align:right}.account-subtotal-row strong{color:#0b4f6c;font-size:11px}.account-subtotal-row small{display:block;color:#68818b;font-size:8px;margin-top:2px}
/* --- Tambahan hasil migrasi PHP: flash message & util kecil --- */
.page-flash{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:10px;font-weight:600;font-size:14px;position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:210;max-width:min(620px,92vw);box-shadow:0 12px 32px rgba(15,39,71,.18);animation:flashIn .25s ease}
.page-flash.flash-success{background:#e7f8f0;color:#0f7a4d;border:1px solid #b7ecd4}
.page-flash.flash-error{background:#fdeceb;color:#b23122;border:1px solid #f5c6c0}
@keyframes flashIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:640px){.page-flash{top:10px;font-size:12px;padding:11px 14px}}
.empty-cell{text-align:center;color:#8a97a3;padding:24px !important}
.row-hidden{display:none}
a.action-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
a.action-btn.is-disabled{pointer-events:none;opacity:.4}
button.action-btn:disabled{opacity:.4;cursor:not-allowed}
.login-hint{text-align:center}
.context-controls{display:flex;align-items:center;gap:14px}
.context-field{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;white-space:nowrap}
.context-field select{width:auto!important;min-width:88px}
.brand-mark-logo{background:#fff;padding:4px;overflow:hidden}
.brand-mark-logo img{width:100%;height:100%;object-fit:contain}
.pdf-modal .modal-body{padding:14px}
.pdf-modal-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:11px;color:#556}
.pdf-modal-frame-wrap{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#525659}
.pdf-modal-frame-wrap iframe{width:100%;height:70vh;border:0;display:block;background:#fff}
.current-logo-preview{display:flex;align-items:center;gap:12px;margin-top:8px}
.current-logo-preview img{width:56px;height:56px;object-fit:contain;border:1px solid var(--border);border-radius:6px;background:#fff;padding:4px}
@media(max-width:760px){.context-controls{display:none}}
/* =====================================================================
V16 — Penyesuaian dengan rancangan frontend awal (screenshot)
Form transaksi berbentuk MODAL, KPI Perubahan Anggaran, pohon Kode
Rekening yang bisa expand/collapse, dan panel Restore Backup.
===================================================================== */
/* --- Modal form transaksi --------------------------------------------- */
.modal-form{width:min(920px,100%)}
.modal-form .modal-head h3{font-size:15px;font-weight:700}
.modal-form .modal-body{padding:18px 20px 20px}
.modal-form .form-grid{gap:14px 18px}
.modal-form label{display:block;font-size:11px;color:#5b6675;font-weight:500;margin-bottom:6px}
.modal-form .form-control{height:38px;border:1px solid #d8dfe7;border-radius:6px;font-size:12px;color:#1f2937}
.modal-form textarea.form-control{height:96px;padding:10px 11px;line-height:1.5}
.modal-form .form-control:focus{outline:0;border-color:var(--secondary);box-shadow:0 0 0 3px rgba(8,127,201,.12)}
.modal-form .form-control::placeholder{color:#9aa6b4}
.modal-form .modal-actions{margin-top:20px;padding-top:0}
.modal-form .modal-actions .btn{padding:10px 18px;font-size:12px;border-radius:6px}
.modal-form .half{grid-column:span 1}
.modal-form .field-note{display:block;margin-top:5px;color:#8b96a4;font-size:9px}
.field-note i{margin-right:4px}
.modal-form .required{color:var(--danger);font-weight:700}
.modal-open{overflow:hidden}
.modal-backdrop.is-static{cursor:default}
/* Kotak "Sisa Anggaran" di dalam form modal */
.modal-form .budget-balance{padding:12px 14px;border-radius:7px;background:#f5fafd;border-color:#dbebf5}
.modal-form .budget-balance small{font-size:10px;color:#64748b;font-weight:500}
.modal-form .budget-balance strong{font-size:17px;font-weight:700;color:#0b76bd;letter-spacing:.2px}
.modal-form .budget-balance>span{font-size:10px;color:#8b96a4;line-height:1.5}
/* v21 — kotak sisa Rencana Belanja pada form Surat Pesanan: sama seperti
.budget-balance, tapi berubah merah begitu Total PO melebihi sisanya. */
.budget-balance.over-budget{background:#fdeceb;border-color:#f5c6c0;flex-wrap:wrap}
.budget-balance.over-budget strong{color:var(--danger)}
.budget-balance .rb-warning{flex-basis:100%;margin-top:6px;font-size:10px;font-weight:600;color:var(--danger);display:flex;align-items:center;gap:6px}
.text-danger{color:var(--danger)}
/* --- Filter card sederhana (pencarian + tombol filter) ---------------- */
.filter-card.filter-simple{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.filter-card.filter-simple .btn{height:35px;margin-top:0}
.filter-card .filter-toggle-extra{display:none}
.filter-card.show-extra .filter-toggle-extra{display:block}
.filter-card.filter-simple.show-extra{grid-template-columns:minmax(0,1.4fr) 1fr 1fr auto}
/* --- KPI Perubahan Anggaran ------------------------------------------- */
.kpi-grid.kpi-perubahan{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi-grid.kpi-perubahan .kpi{padding:16px 18px;gap:14px;border-radius:9px}
.kpi-grid.kpi-perubahan .kpi-icon{width:44px;height:44px;border-radius:9px;font-size:17px}
.kpi-grid.kpi-perubahan .kpi span{font-size:10px;color:#77848f}
.kpi-grid.kpi-perubahan .kpi strong{font-size:19px;margin:5px 0 3px;font-weight:700}
.kpi-grid.kpi-perubahan .kpi small{font-size:9px;color:#95a0ab}
@media(max-width:1400px){.kpi-grid.kpi-perubahan{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.kpi-grid.kpi-perubahan{grid-template-columns:1fr 1fr}}
/* Arah perubahan pada tabel histori */
.arah-pill{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:10px;white-space:nowrap}
.arah-pill.up{color:#16a34a}
.arah-pill.down{color:#dc2626}
.arah-pill.flat{color:#8b96a4}
.change-cell{font-weight:700;white-space:nowrap}
.change-cell.up{color:#16a34a}
.change-cell.down{color:#dc2626}
.doc-pdf-btn{display:inline-flex!important;align-items:center;gap:6px;padding:6px 10px!important;min-height:26px!important;border:0!important;border-radius:5px!important;background:#087fc9!important;color:#fff!important;font-size:9px!important;font-weight:600!important;white-space:nowrap}
.doc-pdf-btn:hover{filter:brightness(.94)}
/* --- Kode Rekening: pohon expand / collapse --------------------------- */
/* Baris tabel ini bisa memuat 1-3 baris teks pada kolom "Kode Rekening /
Kegiatan" (kode+nama, lalu opsional Group Uraian & Volume x Satuan),
sedangkan kolom lain (Jenis Belanja, Sumber Pagu, dst) cuma satu baris —
dulu seluruh sel memakai vertical-align:middle (aturan umum table di atas)
sehingga teks multi-baris itu numpuk/tampak berantakan dibanding sel
sebelahnya yang rata tengah. Tabel ini dikunci rata ATAS + padding vertikal
lebih longgar supaya rapi berapa pun jumlah barisnya. */
table.tree-table th,table.tree-table td{vertical-align:top;padding-top:12px;padding-bottom:12px}
table.tree-table th.col-no{width:46px;text-align:left}
table.tree-table td.col-no{color:#6b7f89;font-weight:600;font-variant-numeric:tabular-nums}
.tree-cell{display:flex;align-items:flex-start;gap:8px;min-width:230px}
.tree-cell .tree-toggle{border:0;background:transparent;color:#0b76bd;width:18px;height:18px;padding:0;display:inline-grid;place-items:center;font-size:11px;flex:none;cursor:pointer;margin-top:1px}
.tree-cell .tree-toggle:hover{color:#075f97}
.tree-cell .tree-branch{display:inline-grid;place-items:center;width:18px;flex:none;color:#7fb4d6;font-size:11px;line-height:1;margin-top:2px}
.tree-cell .tree-label{display:flex;flex-direction:column;gap:4px;min-width:0;line-height:1.4}
.tree-cell .tree-label b{font-size:11px;color:#1e293b;font-weight:700;word-break:break-word}
.tree-cell .tree-label small{color:#4b5563;font-size:12px;font-weight:500;word-break:break-word}
.lra-child td:first-child{padding-left:26px;color:#556074}
tr.tree-child > td{background:#fdfefe}
tr.tree-child.is-hidden,tr.tree-subtotal.is-hidden{display:none}
tr.tree-subtotal > td{background:#eaf7f3;border-top:2px solid #9ddfd0;border-bottom:1px solid #c9e7e1;padding:11px 12px;vertical-align:middle}
tr.tree-subtotal .subtotal-label b{display:block;font-size:11px;color:#0b5c53;font-weight:700}
tr.tree-subtotal .subtotal-label small{display:block;margin-top:2px;color:#5f8a83;font-size:9px;font-weight:400}
tr.tree-subtotal .subtotal-value{font-size:12px;font-weight:700;color:#0b5c53;white-space:nowrap}
.account-grand-total{margin:14px 16px 16px;padding:14px 16px;border-radius:8px}
.account-grand-total strong{font-size:17px;font-weight:700}
.account-grand-total small{font-size:9px}
.badge.pagu-blud{background:#eaf5fc;color:#0b76bd}
.badge.pagu-apbd{background:#f1f0fb;color:#6d5fc7}
/* --- Backup & Restore -------------------------------------------------- */
.backup-actions{display:flex;gap:8px;flex-wrap:wrap}
.restore-panel{margin-bottom:16px}
.restore-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:16px}
.restore-box{border:1px solid var(--border);border-radius:8px;padding:14px 15px;background:#fbfdff}
.restore-box h4{margin:0 0 4px;font-size:12px;color:var(--primary)}
.restore-box p{margin:0 0 12px;font-size:10px;color:var(--muted);line-height:1.55}
.restore-box .form-control{margin-bottom:10px}
.restore-warning{display:flex;gap:11px;align-items:flex-start;margin:0 16px 16px;padding:12px 14px;border:1px solid #f6dfae;background:#fffaf0;border-radius:8px;color:#8a6100;font-size:10px;line-height:1.6}
.restore-warning i{font-size:15px;margin-top:1px}
.badge.restore{background:#f1f0fb;color:#6d5fc7}
.badge.backup{background:#eaf5fc;color:#0b76bd}
@media(max-width:900px){.restore-grid{grid-template-columns:1fr}}
[hidden]{display:none!important}
/* =====================================================================
V17 — Pagination tabel, filter rentang tanggal, export/import,
dan tombol cetak/PDF Surat Pesanan.
===================================================================== */
/* --- Pagination ------------------------------------------------------- */
.table-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--border);background:#fcfdfe}
.table-pagination .pg-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.table-pagination label{display:flex!important;align-items:center;gap:6px;margin:0;font-size:10px;color:#697586;font-weight:600}
.table-pagination select.pg-size{height:28px;padding:0 6px;border:1px solid var(--border);border-radius:5px;background:#fff;color:var(--text);font-size:10px}
.table-pagination .pg-info{font-size:10px;color:#8b96a4}
.table-pagination .pg-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pg-btn{min-width:28px;height:28px;padding:0 8px;border:1px solid var(--border);border-radius:5px;background:#fff;color:#475569;font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.pg-btn:hover:not(.is-disabled):not(.is-active){background:var(--light-blue);border-color:#bfdff3;color:#0b76bd}
.pg-btn.is-active{background:var(--secondary);border-color:var(--secondary);color:#fff}
.pg-btn.is-disabled{opacity:.4;pointer-events:none}
.pg-gap{padding:0 2px;color:#a8b2bd;font-size:10px}
.table-pagination.is-single .pg-pages{display:none}
@media(max-width:760px){.table-pagination{justify-content:center}.table-pagination .pg-left{justify-content:center}}
/* --- Filter rentang tanggal (Histori Validasi) ------------------------ */
.range-filter{display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:end;padding:0 16px 13px;border-bottom:1px solid var(--border);margin-bottom:2px}
.range-filter label{display:block;font-size:10px;color:#697586;font-weight:600;margin-bottom:5px}
.range-filter .form-control{height:34px;font-size:11px}
.range-filter .btn{height:34px;padding:0 12px;white-space:nowrap}
.range-empty{display:none;text-align:center;padding:42px 20px;color:var(--muted)}
.range-empty i{font-size:26px;color:#b4c0cc;margin-bottom:9px;display:block}
.range-empty p{margin:0;font-size:11px}
@media(max-width:760px){.range-filter{grid-template-columns:1fr 1fr}.range-filter .btn{grid-column:1/-1}}
/* --- Export / Import master data -------------------------------------- */
.head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* v28 — permintaan user: seluruh isi toolbar (kolom filter/pencarian +
tombol aksi seperti Reset/Export Excel/Tambah Data) digabung jadi SATU
kartu putih bergaris tepi, bukan dua kotak terpisah dengan tombol
"mengambang" sendiri di luar. Sekarang bingkai/latar/bayangan dipindah
ke .list-toolbar itu sendiri, sedangkan .filter-card di dalamnya dibuat
polos (tanpa bingkai/padding sendiri) supaya menyatu rapi dengan tombol
di sebelahnya dalam satu kotak yang sama. */
.list-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:flex-end;margin-bottom:16px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 2px 8px rgba(15,39,71,.025);padding:15px}
.list-toolbar>.filter-card{flex:1 1 0%;min-width:0;margin-bottom:0;background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.list-toolbar>.head-actions,.list-toolbar>.validation-total,.list-toolbar>.backup-actions{flex:none}
@media(max-width:760px){.list-toolbar{justify-content:flex-start}.list-toolbar>.head-actions{width:100%}.list-toolbar>.head-actions .btn{flex:1}}
.import-file-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:0}
.import-file-row .form-control{flex:1 1 200px;margin-bottom:0}
.import-file-row .head-actions{flex:none}
.import-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:16px}
.import-box{border:1px solid var(--border);border-radius:8px;padding:14px 15px;background:#fbfdff}
.import-box h4{margin:0 0 4px;font-size:12px;color:var(--primary)}
.import-box p{margin:0 0 12px;font-size:10px;color:var(--muted);line-height:1.6}
.import-box .form-control{margin-bottom:10px}
.import-note{margin:0 16px 16px;padding:12px 14px;border:1px solid #dcecf7;background:#f7fbfe;border-radius:8px;font-size:10px;color:#5a6b7a;line-height:1.7}
.import-note code{background:#eaf2f8;padding:1px 5px;border-radius:3px;color:#0b5c8a;font-size:9px}
.import-result{margin:0 16px 16px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.import-result-head{padding:10px 13px;background:#f8fafc;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;color:var(--primary)}
.import-result ul{margin:0;padding:10px 13px 12px 30px;font-size:10px;color:#5a6b7a;line-height:1.8}
.import-result li.err{color:#b23122}
@media(max-width:900px){.import-grid{grid-template-columns:1fr}}
/* --- Kolom kombinasi (dropdown bergaya seragam tapi tetap bisa diketik
manual bila pilihan belum ada di daftar) — dipakai pada Nama Penyedia
& Satuan (Surat Pesanan). Memakai +