:root{
 --green-950:#0b2f24;--green-900:#103e2e;--green-800:#16533c;--green-700:#1b6a49;
 --green-600:#218154;--green-100:#e8f5ee;--bg:#f4f7f5;--surface:#fff;
 --text:#1c2922;--muted:#718078;--line:#dfe8e2;--danger:#b63c45;--warning:#a66d0a;
 --blue:#2879b8;--shadow:0 8px 30px rgba(20,54,39,.07);--radius:16px;--sidebar:286px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.45}
button,input,select,textarea{font:inherit}a{color:inherit}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:linear-gradient(180deg,var(--green-950),var(--green-900));color:#fff;overflow-y:auto;z-index:50;padding:18px 14px 28px;transition:.25s ease;box-shadow:12px 0 30px rgba(0,0,0,.08)}
.brand{display:flex;align-items:center;gap:12px;padding:7px 8px 19px;border-bottom:1px solid rgba(255,255,255,.11);margin-bottom:8px}
.brand-icon{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.13);display:grid;place-items:center;font-size:22px}
.brand strong{display:block;font-size:18px;letter-spacing:.2px}.brand small{display:block;font-size:11px;font-weight:400;opacity:.7;margin-top:2px}
.nav-group{font-size:10px;text-transform:uppercase;letter-spacing:1.15px;opacity:.58;padding:18px 11px 7px;font-weight:700}
.nav-link{display:flex;align-items:center;gap:10px;color:#eff9f3;text-decoration:none;padding:10px 11px;border-radius:10px;margin:2px 0;font-size:13px;transition:.18s}
.nav-link:hover{background:rgba(255,255,255,.11);transform:translateX(2px)}.nav-link.active{background:rgba(255,255,255,.15);box-shadow:inset 3px 0 #8bd2a9}
.nav-icon{width:22px;text-align:center;opacity:.9}.app-main{margin-left:var(--sidebar);min-height:100vh}
.topbar{height:70px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 28px;position:sticky;top:0;z-index:40}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}.topbar-title strong{font-size:15px}.topbar-title span{font-size:11px;color:var(--muted);display:block;margin-top:1px}
.menu-toggle{display:none;border:1px solid var(--line);background:#fff;width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:19px}.topbar-badge{font-size:11px;background:var(--green-100);color:var(--green-800);padding:7px 10px;border-radius:999px;font-weight:700}
.content{padding:26px;max-width:1700px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}.page-head h1,h1{margin:0 0 4px;font-size:25px;letter-spacing:-.4px}.page-sub{color:var(--muted);font-size:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:19px;margin-bottom:18px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px}.kpi{position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:var(--green-100);right:-20px;top:-20px}.kpi span{color:var(--muted);font-size:12px}.kpi b{display:block;font-size:30px;color:var(--green-700);margin:5px 0}.kpi a{font-size:12px;color:var(--green-700);font-weight:700;text-decoration:none}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:15px}.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;padding:9px 12px;text-decoration:none;cursor:pointer;background:var(--green-700);color:#fff;font-size:12px;font-weight:650;transition:.18s;white-space:nowrap}.btn:hover{filter:brightness(.94);transform:translateY(-1px)}.btn.blue{background:var(--blue)}.btn.gold{background:var(--warning)}.btn.red{background:var(--danger)}.btn.gray{background:#647269}.btn.light{background:#edf3ef;color:#304239}
.search-card{padding:12px 14px}.search-wrap{display:flex;gap:9px}.search-wrap input{flex:1}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid #ccd9d1;border-radius:9px;background:#fff;color:var(--text);outline:none;transition:.15s}input:focus,select:focus,textarea:focus{border-color:#62a982;box-shadow:0 0 0 3px rgba(56,145,94,.10)}
label{display:block;font-size:12px;font-weight:700;margin:12px 0 5px;color:#34463c}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.form-actions{display:flex;gap:8px;margin-top:20px;padding-top:15px;border-top:1px solid var(--line)}
.table-wrap{overflow:auto;padding:0}.table-wrap table{min-width:850px}table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}th,td{padding:11px 12px;border-bottom:1px solid #e8eeea;text-align:left;vertical-align:middle;font-size:12px}th{position:sticky;top:0;background:#f7faf8;color:#4c5d53;font-size:11px;text-transform:uppercase;letter-spacing:.35px;z-index:1}tbody tr:hover{background:#fafcfb}tbody tr:last-child td{border-bottom:0}.actions{display:flex;gap:5px;white-space:nowrap}.actions .btn{padding:7px 9px}
.notice{padding:12px 14px;border-radius:10px;background:#fff7dc;border:1px solid #ead58c;margin-bottom:14px;font-size:12px}.notice.ok{background:#eaf7ef;border-color:#b7dec5;color:#245e3a}.notice.bad{background:#fdecef;border-color:#edbdc3;color:#8f2932}.muted{color:var(--muted)}
.detail-table th{width:28%;position:static;background:#f8faf9;text-transform:none}.empty{text-align:center;padding:35px;color:var(--muted)}
.overlay{display:none;position:fixed;inset:0;background:rgba(5,25,17,.4);z-index:45}
@media(max-width:1050px){:root{--sidebar:260px}.content{padding:20px}.form-grid{grid-template-columns:1fr}}
@media(max-width:820px){.sidebar{transform:translateX(-105%);width:280px}.sidebar.open{transform:translateX(0)}.overlay.show{display:block}.app-main{margin-left:0}.menu-toggle{display:grid;place-items:center}.topbar{padding:0 16px}.content{padding:16px}.topbar-badge{display:none}.page-head h1,h1{font-size:22px}}
@media(max-width:560px){.content{padding:12px}.card{border-radius:13px;padding:14px}.grid{grid-template-columns:1fr 1fr;gap:10px}.kpi b{font-size:25px}.toolbar,.page-head{align-items:stretch}.toolbar-actions,.toolbar-actions .btn{width:100%}.search-wrap{flex-direction:column}.actions .btn{font-size:0;width:34px;height:34px;padding:0}.actions .btn:first-letter{font-size:14px}.form-actions{flex-direction:column}.form-actions .btn{width:100%}.topbar-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}}
@media print{.sidebar,.topbar,.no-print,.btn{display:none!important}.app-main{margin:0}.content{padding:0}.card{box-shadow:none;border:0}}

body.modal-open{overflow:hidden}.app-modal-backdrop{position:fixed;inset:0;background:rgba(5,24,16,.58);z-index:1000;display:none;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(3px)}.app-modal-backdrop.show{display:flex}.app-modal-dialog{width:min(980px,96vw);max-height:92vh;background:#fff;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.28);overflow:hidden;animation:modalIn .18s ease}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;border-bottom:1px solid var(--line);background:#fbfdfc}.modal-head h2{margin:0;font-size:20px}.modal-head small{color:var(--muted)}.modal-x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#46544c;font-size:25px;line-height:1;cursor:pointer;display:grid;place-items:center}.modal-x:hover{background:#f1f5f2;color:#a52e38}.modal-body{padding:18px 20px;max-height:calc(92vh - 138px);overflow:auto}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line);background:#fbfdfc}.modal-loading{padding:55px;text-align:center;color:var(--muted)}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@media(max-width:650px){.app-modal-backdrop{padding:8px;align-items:flex-end}.app-modal-dialog{width:100%;max-height:95vh;border-radius:17px 17px 0 0}.modal-body{padding:14px;max-height:calc(95vh - 132px)}.modal-head,.modal-foot{padding:13px 14px}.modal-foot .btn{flex:1}}
@media print{body.modal-open .sidebar,body.modal-open .app-main{display:none!important}.app-modal-backdrop{position:static;display:block!important;background:none;padding:0}.app-modal-dialog{box-shadow:none;max-height:none;width:100%}.modal-head .modal-x,.modal-foot{display:none!important}.modal-body{max-height:none;overflow:visible}}

/* Sidebar dropdown menu */
.nav-dropdown-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;color:#eff9f3;padding:11px;border-radius:10px;margin-top:7px;cursor:pointer;font-size:12px;font-weight:700;text-align:left;transition:.18s}
.nav-dropdown-toggle:hover,.nav-dropdown-toggle.open{background:rgba(255,255,255,.09)}
.nav-dropdown-title{display:flex;align-items:center;gap:10px;min-width:0}
.nav-chevron{font-size:16px;transition:transform .22s ease;opacity:.72}.nav-dropdown-toggle.open .nav-chevron{transform:rotate(180deg)}
.nav-submenu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease,opacity .2s ease;opacity:.2}
.nav-submenu.open{grid-template-rows:1fr;opacity:1}.nav-submenu>.nav-child{overflow:hidden}
.nav-child{margin-left:10px!important;padding-left:15px!important;border-left:1px solid rgba(255,255,255,.13);border-radius:0 9px 9px 0!important;font-size:12px!important}
.nav-child.active{border-left:3px solid #8bd2a9!important;background:rgba(255,255,255,.14)!important}
@media(max-width:820px){.nav-dropdown-toggle{padding:12px 11px}.nav-child{padding-top:11px!important;padding-bottom:11px!important}}

/* Dropdown FIX v2 - robust accordion */
.nav-dropdown-toggle{appearance:none;-webkit-appearance:none;outline:none}
.nav-dropdown-toggle:focus-visible{box-shadow:0 0 0 2px rgba(139,210,169,.55)}
.nav-submenu{display:block!important;max-height:0!important;overflow:hidden!important;opacity:0!important;transition:max-height .28s ease,opacity .18s ease!important}
.nav-submenu.open{opacity:1!important}
.nav-chevron{display:inline-block;transition:transform .22s ease}.nav-dropdown-toggle.open .nav-chevron{transform:rotate(180deg)}
.nav-child{display:flex!important}

/* DROPDOWN FIX V3: submenu benar-benar tersembunyi saat tertutup */
.nav-submenu{
  display:none !important;
  max-height:none !important;
  overflow:hidden !important;
  opacity:0 !important;
}
.nav-submenu.open{
  display:block !important;
  opacity:1 !important;
}

/* Menu icon alignment */
.nav-icon{width:24px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1}
.nav-child .nav-icon{font-size:14px}.nav-dropdown-title{flex:1}.nav-link{min-height:42px}

.wilayah-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;background:#f2f8f4;border:1px solid #d7e9dc;border-radius:12px;padding:13px 14px;margin-bottom:14px}.wilayah-chain label{color:var(--green-800);margin-top:0}@media(max-width:760px){.wilayah-chain{grid-template-columns:1fr}}

/* Nomor urut semua list */
.col-no{width:64px;min-width:64px;text-align:center!important;font-weight:700;white-space:nowrap}

/* V12 - daftar relasi tetap terlihat, hanya primary key disembunyikan */
.table-wrap table th,.table-wrap table td{vertical-align:middle}
.table-wrap table th{white-space:nowrap}

/* V13 grouped Wilayah Kerja UPTD */
.table-wrap td{line-height:1.5}

/* V15 - editor grup Wilayah Kerja UPTD */
.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
.check-item{display:flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid #dfe8e3;border-radius:10px;background:#fff}
.actions{white-space:nowrap}.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
@media(max-width:900px){.check-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.check-grid{grid-template-columns:1fr}}

/* V17 - Wilayah pada form Instansi */
.wilayah-instansi-box{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;margin-bottom:14px;border:1px solid #dfe8e3;border-radius:12px;background:#f8fbf9}
@media(max-width:700px){.wilayah-instansi-box{grid-template-columns:1fr}}

@media(max-width:700px){.wilayah-filter-grid{grid-template-columns:1fr}}

/* V23 - Kecamatan otomatis berdasarkan Kabupaten/Kota UPTD */
.auto-wilayah-info{margin:12px 0 16px;padding:11px 14px;border:1px solid #dfe8e3;border-radius:10px;background:#f8fbf9}
.empty-state{padding:16px;border:1px dashed #cbd8d1;border-radius:10px;color:#66756d;margin-bottom:14px}

/* V24 - Tampilan kolom checklist wilayah kerja */
.wilayah-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 18px}
.wilayah-check-grid .check-item{position:relative;display:grid;grid-template-columns:34px 24px minmax(0,1fr);align-items:center;gap:10px;min-height:52px;padding:9px 12px;border:1px solid #dbe5df;border-radius:12px;background:#fff;cursor:pointer;transition:.15s ease;box-sizing:border-box}
.wilayah-check-grid .check-item:hover{border-color:#a9c8b7;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.wilayah-check-grid .check-item.is-checked{border-color:#79aa8e;background:#f3faf6}
.wilayah-check-grid .check-no{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#eef3f0;font-size:12px;font-weight:700}
.wilayah-check-grid input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.wilayah-check-grid .check-box-ui{width:20px;height:20px;border:2px solid #9aaba2;border-radius:5px;display:block;position:relative;box-sizing:border-box;background:#fff}
.wilayah-check-grid input:checked + .check-box-ui{border-color:#347a54;background:#347a54}
.wilayah-check-grid input:checked + .check-box-ui:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.wilayah-check-grid .check-name{font-weight:600;line-height:1.25;overflow-wrap:anywhere}
@media(max-width:1100px){.wilayah-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.wilayah-check-grid{grid-template-columns:1fr}.wilayah-check-grid .check-item{grid-template-columns:34px 24px minmax(0,1fr)}}

/* V25 - Checklist wilayah lebih pendek/compact */
.wilayah-check-grid{
  grid-template-columns:repeat(4,minmax(150px,220px)) !important;
  justify-content:start !important;
  gap:8px !important;
}
.wilayah-check-grid .check-item{
  grid-template-columns:28px 20px minmax(0,1fr) !important;
  min-height:42px !important;
  padding:6px 9px !important;
  gap:7px !important;
}
.wilayah-check-grid .check-no{
  width:26px !important;
  height:26px !important;
}
.wilayah-check-grid .check-box-ui{
  width:18px !important;
  height:18px !important;
}
.wilayah-check-grid .check-name{
  font-size:13px !important;
}
@media(max-width:1100px){
  .wilayah-check-grid{grid-template-columns:repeat(3,minmax(150px,210px)) !important}
}
@media(max-width:760px){
  .wilayah-check-grid{grid-template-columns:repeat(2,minmax(140px,1fr)) !important}
}
@media(max-width:480px){
  .wilayah-check-grid{grid-template-columns:1fr !important}
}

/* V26 - Responsive penuh Edit Wilayah Kerja */
.wilayah-check-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(165px,220px)) !important;
  justify-content:start !important;
  width:100% !important;
  max-width:100% !important;
  gap:8px !important;
  box-sizing:border-box !important;
}
.wilayah-check-grid .check-item{
  width:100% !important;
  max-width:220px !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
.wilayah-check-grid .check-name{
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
@media(max-width:900px){
  .wilayah-check-grid{
    grid-template-columns:repeat(auto-fit,minmax(155px,1fr)) !important;
  }
  .wilayah-check-grid .check-item{max-width:none !important}
}
@media(max-width:600px){
  .auto-wilayah-info{font-size:13px !important;padding:9px 10px !important}
  .wilayah-check-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .wilayah-check-grid .check-item{
    grid-template-columns:25px 18px minmax(0,1fr) !important;
    padding:6px 7px !important;
    gap:5px !important;
  }
  .wilayah-check-grid .check-no{width:24px !important;height:24px !important;font-size:11px !important}
  .wilayah-check-grid .check-name{font-size:12px !important}
  .form-actions{display:flex !important;flex-wrap:wrap !important;gap:8px !important}
}
@media(max-width:380px){
  .wilayah-check-grid{grid-template-columns:1fr !important}
  .wilayah-check-grid .check-item{max-width:none !important}
  .form-actions .btn{width:100% !important;text-align:center !important;justify-content:center !important}
}

/* V27 - Daftar UPTD */
.uptd-table .col-no{width:54px;text-align:center}
.uptd-table .col-alamat{min-width:180px;max-width:300px;white-space:normal}
.uptd-table .actions{white-space:nowrap}
@media(max-width:800px){.uptd-table{min-width:980px}}

/* V28 - Responsive global SIDAT-MAPPAH */
html,body{max-width:100%;overflow-x:hidden}
*{box-sizing:border-box}
img,svg{max-width:100%;height:auto}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;max-width:100%}
.actions{display:flex;flex-wrap:wrap;gap:5px}
.actions .btn{white-space:nowrap}

/* Modal Lihat/Edit/Tambah */
.app-modal-backdrop{padding:20px !important;overflow:auto !important}
.app-modal-dialog{width:min(920px,calc(100vw - 40px)) !important;max-width:920px !important;max-height:calc(100vh - 40px) !important;margin:auto !important;overflow:hidden !important}
#appModalContent{max-width:100% !important;max-height:calc(100vh - 40px) !important;overflow:auto !important}
#appModalContent .table-wrap,#appModalContent table{max-width:100% !important}
#appModalContent table{table-layout:auto}
#appModalContent td,#appModalContent th{overflow-wrap:anywhere;word-break:normal}
#appModalContent .form-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
#appModalContent input,#appModalContent select,#appModalContent textarea{max-width:100%;width:100%}
.modal-header,.modal-footer,.form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.modal-header{justify-content:space-between}
.modal-footer,.form-actions{justify-content:flex-end}

/* Laptop/tablet */
@media(max-width:1024px){
  .main-content,.content,.page-content{max-width:100% !important}
  .card{max-width:100% !important}
  .data-table{min-width:760px}
  .app-modal-dialog{width:calc(100vw - 28px) !important;max-height:calc(100vh - 28px) !important}
  #appModalContent{max-height:calc(100vh - 28px) !important}
}

/* Tablet/HP */
@media(max-width:768px){
  .app-modal-backdrop{padding:8px !important;align-items:flex-start !important}
  .app-modal-dialog{width:calc(100vw - 16px) !important;max-width:none !important;max-height:calc(100vh - 16px) !important;border-radius:12px !important}
  #appModalContent{max-height:calc(100vh - 16px) !important}
  #appModalContent .form-grid{grid-template-columns:1fr !important}
  #appModalContent table{font-size:12px}
  #appModalContent th,#appModalContent td{padding:8px !important}
  .modal-header,.modal-footer{padding-left:12px !important;padding-right:12px !important}
  .data-table{min-width:680px}
  .btn{min-height:36px}
}

/* HP kecil */
@media(max-width:480px){
  .app-modal-backdrop{padding:0 !important}
  .app-modal-dialog{width:100vw !important;height:100vh !important;max-height:100vh !important;border-radius:0 !important}
  #appModalContent{height:100vh !important;max-height:100vh !important}
  .modal-header{position:sticky;top:0;z-index:5;background:#fff}
  .modal-footer,.form-actions{position:sticky;bottom:0;z-index:5;background:#fff;padding:10px !important}
  .modal-footer .btn,.form-actions .btn{flex:1 1 auto;text-align:center;justify-content:center}
  #appModalContent table{font-size:11px}
  #appModalContent th,#appModalContent td{padding:7px 6px !important}
  .data-table{min-width:620px}
}

/* V29 - Perbaikan nyata popup detail/edit semua data */
#appModalContent .detail-table{
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed !important;
}
#appModalContent .detail-table th{
  width:32% !important;
  min-width:0 !important;
  white-space:normal !important;
}
#appModalContent .detail-table td{
  width:68% !important;
  min-width:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
#appModalContent .detail-table th,
#appModalContent .detail-table td{
  padding:10px 12px !important;
}
#appModalContent .modal-body > .table-wrap{
  overflow-x:hidden !important;
}
#appModalContent .modal-head,
#appModalContent .modal-foot{
  width:100% !important;
}
.app-modal-dialog{
  height:auto !important;
}
@media(max-width:600px){
  #appModalContent .detail-table,
  #appModalContent .detail-table tbody,
  #appModalContent .detail-table tr,
  #appModalContent .detail-table th,
  #appModalContent .detail-table td{
    display:block !important;
    width:100% !important;
  }
  #appModalContent .detail-table tr{
    padding:8px 0 !important;
    border-bottom:1px solid #e8eeea !important;
  }
  #appModalContent .detail-table th{
    border:0 !important;
    padding:3px 10px !important;
    font-size:11px !important;
  }
  #appModalContent .detail-table td{
    border:0 !important;
    padding:3px 10px 7px !important;
    font-size:13px !important;
  }
}
@media(max-width:480px){
  .app-modal-dialog{height:auto !important;min-height:0 !important;max-height:100vh !important}
  #appModalContent{height:auto !important;min-height:0 !important;max-height:100vh !important}
}

/* V31 - Pembeda warna tombol aksi global */
.btn-view{
  background:#1976d2 !important;
  border-color:#1976d2 !important;
  color:#fff !important;
}
.btn-view:hover{
  background:#125ea9 !important;
  border-color:#125ea9 !important;
}
.btn-edit{
  background:#f0a51a !important;
  border-color:#f0a51a !important;
  color:#fff !important;
}
.btn-edit:hover{
  background:#cf8708 !important;
  border-color:#cf8708 !important;
}
.btn-delete{
  background:#d64545 !important;
  border-color:#d64545 !important;
  color:#fff !important;
}
.btn-delete:hover{
  background:#b83232 !important;
  border-color:#b83232 !important;
}
.actions .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  font-weight:600 !important;
}

/* V32 - Pembeda warna tombol Tambah */
.btn-add,
a.btn-add,
button.btn-add{
  background:#198754 !important;
  border-color:#198754 !important;
  color:#fff !important;
}
.btn-add:hover,
a.btn-add:hover,
button.btn-add:hover{
  background:#146c43 !important;
  border-color:#146c43 !important;
  color:#fff !important;
}

/* V33 - Standar warna tombol SEMUA DATA aplikasi */
.btn-add,.btn-tambah,.btn-primary,
a.btn-add,a.btn-tambah,a.btn-primary,
button.btn-add,button.btn-tambah,button.btn-primary{
  background:#198754 !important;border-color:#198754 !important;color:#fff !important;
}
.btn-add:hover,.btn-tambah:hover,.btn-primary:hover,
a.btn-add:hover,a.btn-tambah:hover,a.btn-primary:hover,
button.btn-add:hover,button.btn-tambah:hover,button.btn-primary:hover{
  background:#146c43 !important;border-color:#146c43 !important;color:#fff !important;
}
.btn-view,.btn-lihat{
  background:#1976d2 !important;border-color:#1976d2 !important;color:#fff !important;
}
.btn-view:hover,.btn-lihat:hover{
  background:#125ea9 !important;border-color:#125ea9 !important;color:#fff !important;
}
.btn-edit{
  background:#f0a51a !important;border-color:#f0a51a !important;color:#fff !important;
}
.btn-edit:hover{
  background:#cf8708 !important;border-color:#cf8708 !important;color:#fff !important;
}
.btn-delete,.btn-hapus,.btn-danger{
  background:#d64545 !important;border-color:#d64545 !important;color:#fff !important;
}
.btn-delete:hover,.btn-hapus:hover,.btn-danger:hover{
  background:#b83232 !important;border-color:#b83232 !important;color:#fff !important;
}

/* V34 - Armada ownership dynamic fields */
.armada-owner{transition:opacity .18s ease;}

.form-grid>.perusahaan-wilayah-inline{display:contents!important;}

/* V36 - alamat lengkap perusahaan */
.alamat-lengkap{min-width:280px;white-space:normal;line-height:1.45;}

/* V38 - Standar tampilan CRUD semua data */
.actions{display:flex!important;gap:6px!important;align-items:center!important;flex-wrap:wrap!important;}
.actions .btn,.btn-add,.btn-view,.btn-edit,.btn-delete{
  min-height:34px!important;padding:7px 11px!important;border-radius:8px!important;
  text-decoration:none!important;line-height:1.15!important;white-space:nowrap!important;
  box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.actions .btn:hover,.btn-add:hover,.btn-view:hover,.btn-edit:hover,.btn-delete:hover{
  transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.14);
}
.modal-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;padding:16px 18px!important;}
.modal-head h2,.modal-head h3{margin:0!important;line-height:1.25!important;}
.modal-body{padding:18px!important;}
.modal-foot{display:flex!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;padding:14px 18px!important;}
.modal-foot .btn{min-width:105px!important;border-radius:8px!important;}
.detail-table th{font-weight:700!important;}
.detail-table th,.detail-table td{vertical-align:top!important;padding:10px 12px!important;}
@media(max-width:600px){
 .actions{gap:5px!important}
 .actions .btn{padding:7px 9px!important;font-size:12px!important}
 .modal-head,.modal-body,.modal-foot{padding-left:12px!important;padding-right:12px!important}
 .modal-foot .btn{flex:1 1 120px!important}
}

/* V39 - popup hapus minimal */
.delete-warning{padding:16px;border-radius:10px;background:#fff7f7;border:1px solid #f1d1d1;font-weight:600;line-height:1.5;}

/* V40 - Semua CRUD menggunakan pola popup konsisten */
.app-modal-dialog{width:min(760px,calc(100vw - 28px));max-width:100%;margin:auto;}
@media(max-width:600px){
 .app-modal-dialog{width:100%!important;max-width:100%!important;border-radius:12px!important;}
}

.nav-section-label{padding:18px 18px 7px;font-size:11px;font-weight:800;letter-spacing:.09em;opacity:.7;}

/* V45 - Ikon sidebar konsisten */
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;min-width:24px;height:24px;font-size:17px;line-height:1;text-align:center}
.nav-child .nav-icon{font-size:15px}
.brand-icon{display:flex;align-items:center;justify-content:center}

/* V46 - susunan heading menu sesuai permintaan */
.nav-dropdown-title{font-weight:700}
.nav-section-label{font-weight:800}

/* V47 - Pemisah warna antar kelompok menu */
.nav-dropdown-toggle{
  position:relative;
  border-left:4px solid transparent;
}
.nav-dropdown-toggle.group-instansi{
  border-left-color:#2563eb;
  background:rgba(37,99,235,.10);
}
.nav-dropdown-toggle.group-perusahaan{
  border-left-color:#f59e0b;
  background:rgba(245,158,11,.10);
}
.nav-dropdown-toggle.group-timbulan{
  border-left-color:#8b5cf6;
  background:rgba(139,92,246,.10);
}
.nav-dropdown-toggle.group-operasional{
  border-left-color:#06b6d4;
  background:rgba(6,182,212,.10);
}
.nav-dropdown-toggle.group-mou{
  border-left-color:#ec4899;
  background:rgba(236,72,153,.10);
}
.nav-dropdown-toggle.group-system{
  border-left-color:#64748b;
  background:rgba(100,116,139,.10);
}
.nav-dropdown-toggle.group-wilayah{
  border-left-color:#22c55e;
  background:rgba(34,197,94,.10);
}
.nav-dropdown-toggle.group-persampahan{
  border-left-color:#16a34a;
  background:rgba(22,163,74,.10);
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.open{
  filter:brightness(1.08);
}
.nav-submenu{
  border-left:1px solid rgba(255,255,255,.12);
  margin-left:18px;
}
.nav-section-label{
  margin:14px 12px 6px;
  padding:9px 10px;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  border-radius:7px;
}

/* V48 - MASTER DATA menjadi dropdown */
.master-data-toggle{
  margin-top:14px;
  border-left-color:#10b981;
  background:rgba(16,185,129,.14);
  font-weight:800;
}
.master-data-panel{display:none}
.master-data-panel.open{display:block}
.master-data-panel .nav-dropdown-toggle{margin-left:10px;width:calc(100% - 10px)}
.master-data-panel .nav-submenu{margin-left:28px}

/* V49 - List Armada: label relasi, bukan ID */
.armada-table th,.armada-table td{vertical-align:middle}
.armada-table .actions{white-space:nowrap}
@media(max-width:768px){.armada-table{min-width:980px}}

/* V53 - Sticky/split header pada semua list data saat scroll ke bawah.
   Area tabel menjadi panel scroll sendiri; kepala tabel tetap terlihat. */
.table-wrap{
  position:relative;
  max-height:calc(100vh - 245px);
  min-height:260px;
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid rgba(0,0,0,.10);
  border-radius:10px;
  background:#fff;
}
.table-wrap table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}
.table-wrap thead th{
  position:sticky;
  top:0;
  z-index:12;
  background:#f5f7fa;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}
.table-wrap tbody tr:first-child td{
  border-top:0;
}
@media(max-width:768px){
  .table-wrap{
    max-height:calc(100vh - 210px);
    min-height:220px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* V54 - Berlaku untuk SEMUA tabel/list data aplikasi */
.table-wrap,
.table-responsive,
.table-container,
.data-table-wrap{
  position:relative;
  max-height:calc(100vh - 245px);
  min-height:260px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.table-wrap thead th,
.table-responsive thead th,
.table-container thead th,
.data-table-wrap thead th,
.global-data-table thead th{
  position:sticky;
  top:0;
  z-index:20;
  background:#f5f7fa;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}
@media(max-width:768px){
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 210px);
    min-height:220px;
  }
}

/* V55 - Split bawah semua list: Export & Cetak tetap terlihat */
.list-bottom-split{
  position:sticky;
  bottom:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:10px;
  background:#fff;
  box-shadow:0 -2px 8px rgba(0,0,0,.08);
}
.list-bottom-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.list-bottom-info{font-weight:600;color:#58616d}
.btn-export{background:#198754!important;color:#fff!important}
.btn-print{background:#0d6efd!important;color:#fff!important}
@media(max-width:768px){
 .list-bottom-split{padding:8px;gap:8px}
 .list-bottom-info{display:none}
 .list-bottom-actions{width:100%}
 .list-bottom-actions .btn{flex:1;text-align:center}
}
@media print{
 .list-bottom-split,.actions,th:last-child{display:none!important}
 .table-wrap,.table-responsive,.table-container,.data-table-wrap{max-height:none!important;overflow:visible!important;border:0!important}
}

/* V56 - Export & Cetak di sisi kiri split bawah */
.list-bottom-split{
  justify-content:flex-start !important;
}
.list-bottom-info{
  display:none !important;
}
.list-bottom-actions{
  justify-content:flex-start !important;
  margin-right:auto;
}
@media(max-width:768px){
  .list-bottom-actions{
    width:auto !important;
  }
  .list-bottom-actions .btn{
    flex:0 0 auto !important;
  }
}

/* V61 - Footer pembatas + responsif lintas ukuran layar */
html,body{min-height:100%}
body{min-height:100vh;overflow-x:hidden}
*{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}

/* Konten utama tidak melewati layar */
main,.main,.content,.main-content,.page-content,.container,.container-fluid{
  max-width:100%;
  min-width:0;
}
.card,.panel,.box,.table-wrap,.table-responsive,.table-container,.data-table-wrap{
  max-width:100%;
  min-width:0;
}

/* Footer sebagai pembatas akhir tampilan */
.app-footer{
  width:100%;
  margin-top:18px;
  border-top:3px solid #198754;
  background:#f5f7fa;
  color:#4b5563;
  flex-shrink:0;
}
.app-footer-inner{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.app-footer-brand{font-weight:700;color:#198754;white-space:nowrap}
.app-footer-text{text-align:right;font-size:13px}

/* Desktop lebar */
@media(min-width:1440px){
  .app-footer-inner{padding-left:28px;padding-right:28px}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 270px);
  }
}

/* Laptop / desktop standar */
@media(min-width:1024px) and (max-width:1439px){
  .app-footer-inner{padding:11px 18px}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 255px);
  }
}

/* Tablet */
@media(min-width:769px) and (max-width:1023px){
  .app-footer-inner{padding:10px 16px}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 235px);
    overflow:auto;
  }
  .actions{white-space:nowrap}
}

/* HP */
@media(max-width:768px){
  body{font-size:14px}
  .app-footer-inner{
    padding:10px 12px;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
  }
  .app-footer-text{text-align:left;font-size:11px;line-height:1.4}
  .app-footer-brand{font-size:13px}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    width:100%;
    max-height:calc(100vh - 220px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .btn{max-width:100%}
  input,select,textarea{max-width:100%;font-size:16px}
  .modal-dialog,.app-modal-dialog{max-width:calc(100vw - 20px)!important;margin:10px!important}
}

/* HP kecil */
@media(max-width:480px){
  body{font-size:13px}
  .app-footer-inner{padding:8px 10px}
  .list-bottom-split{padding:7px!important}
  .list-bottom-actions{gap:6px!important}
  .list-bottom-actions .btn{padding:7px 9px!important;font-size:12px}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 205px);
  }
}

/* Landscape HP / layar pendek */
@media(max-height:600px) and (orientation:landscape){
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 150px);
  }
  .app-footer-inner{padding-top:6px;padding-bottom:6px}
}

/* Print: footer aplikasi tidak mengganggu hasil cetak data */
@media print{
  .app-footer,.list-bottom-split{display:none!important}
}

/* V62 - Footer modern, rapi, elegan */
.app-footer{
  position:relative;
  overflow:hidden;
  margin-top:22px;
  border-top:0!important;
  background:linear-gradient(135deg,#f8fbf9 0%,#eef7f1 55%,#f7faf8 100%);
  color:#405047;
  box-shadow:0 -6px 24px rgba(26,78,48,.07);
}
.app-footer-accent{
  height:4px;
  width:100%;
  background:linear-gradient(90deg,#198754,#2eaa66,#86c99f);
}
.app-footer-inner{
  min-height:72px;
  padding:13px 24px!important;
}
.app-footer-identity{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.app-footer-logo{
  width:42px;height:42px;
  flex:0 0 42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:#198754;
  color:#fff;
  font-size:23px;
  box-shadow:0 5px 14px rgba(25,135,84,.20);
}
.app-footer-brand{
  font-size:15px;
  line-height:1.2;
  letter-spacing:.4px;
  font-weight:800;
  color:#176b45;
}
.app-footer-subtitle{
  margin-top:3px;
  font-size:12px;
  color:#68776e;
  line-height:1.35;
}
.app-footer-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  font-size:12px;
  color:#647169;
  white-space:nowrap;
}
.footer-agency{
  padding:6px 10px;
  border:1px solid rgba(25,135,84,.16);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#28704d;
  font-weight:600;
}
.footer-dot{color:#9aaba0}
@media(max-width:768px){
  .app-footer{margin-top:14px}
  .app-footer-inner{
    min-height:auto;
    padding:11px 12px!important;
    gap:10px!important;
  }
  .app-footer-logo{width:36px;height:36px;flex-basis:36px;font-size:20px;border-radius:10px}
  .app-footer-brand{font-size:13px}
  .app-footer-subtitle{font-size:10.5px}
  .app-footer-meta{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:6px;
    font-size:10.5px;
  }
  .footer-agency{padding:4px 8px}
}
@media(max-width:480px){
  .footer-dot{display:none}
  .footer-year{width:100%;padding-left:2px}
}

/* V63 - Footer tidak menutup sidebar/menu */
.app-footer{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:1 !important;
}

/* Desktop: footer mengikuti area konten, bukan menimpa sidebar */
@media(min-width:769px){
  .app-footer{
    width:auto !important;
    margin-left:260px !important;
  }
}

/* Tablet/HP: sidebar/menu biasanya berubah menjadi overlay,
   footer kembali selebar layar tanpa menutup menu */
@media(max-width:768px){
  .app-footer{
    width:100% !important;
    margin-left:0 !important;
  }
}

/* Pastikan menu/sidebar selalu berada di atas footer */
.sidebar,.side-menu,.app-sidebar,aside,.nav-sidebar{
  z-index:1000;
}

/* V64 - Footer menjadi pembatas bawah seluruh aplikasi */
:root{--sidat-footer-h:72px}

/* Footer penuh dari kiri ke kanan */
.app-footer{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:var(--sidat-footer-h);
  margin:0 !important;
  z-index:1200 !important;
  background:linear-gradient(135deg,#f8fbf9 0%,#eef7f1 55%,#f7faf8 100%);
  box-shadow:0 -5px 18px rgba(26,78,48,.10);
}
.app-footer-inner{
  height:calc(var(--sidat-footer-h) - 4px);
  max-width:none !important;
  padding:10px 22px !important;
}

/* Sidebar berhenti tepat di atas footer */
.sidebar,.side-menu,.app-sidebar,aside,.nav-sidebar{
  bottom:var(--sidat-footer-h) !important;
  height:calc(100vh - var(--sidat-footer-h)) !important;
  max-height:calc(100vh - var(--sidat-footer-h)) !important;
  overflow-y:auto;
  z-index:1000;
}

/* Sisakan ruang footer agar konten tidak tertutup */
body{padding-bottom:var(--sidat-footer-h) !important}

/* Area tabel berhenti sebelum footer */
.table-wrap,.table-responsive,.table-container,.data-table-wrap{
  max-height:calc(100vh - 285px) !important;
}

/* Footer di atas seluruh lebar layar, isi identitas tetap rapi */
.app-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
@media(max-width:1023px){
  :root{--sidat-footer-h:68px}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 265px) !important;
  }
}
@media(max-width:768px){
  :root{--sidat-footer-h:76px}
  .app-footer-inner{
    padding:8px 12px !important;
    flex-direction:row !important;
    align-items:center !important;
  }
  .app-footer-subtitle{display:none}
  .app-footer-meta{width:auto !important;justify-content:flex-end !important}
  .sidebar,.side-menu,.app-sidebar,aside,.nav-sidebar{
    max-height:calc(100vh - var(--sidat-footer-h)) !important;
  }
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 245px) !important;
  }
}
@media(max-width:480px){
  :root{--sidat-footer-h:66px}
  .app-footer-logo{width:32px;height:32px;flex-basis:32px;font-size:18px}
  .app-footer-brand{font-size:12px}
  .footer-agency{font-size:9px;padding:3px 6px}
  .footer-dot,.footer-year{display:none}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 220px) !important;
  }
}
@media print{
  body{padding-bottom:0!important}
  .app-footer{display:none!important}
}

/* V65 - Polesan visual & responsive final */
:root{
  --sidat-green:#0f6b4d;
  --sidat-green-dark:#084c38;
  --sidat-soft:#f4f8f6;
  --sidat-border:#dfe9e4;
  --sidat-shadow:0 8px 24px rgba(20,70,50,.08);
}
body{
  background:#f5f8f7;
  color:#26352e;
  line-height:1.45;
}
.card,.panel,.box,.table-wrap,.table-responsive,.table-container,.data-table-wrap{
  border-radius:12px;
  border-color:var(--sidat-border);
}
.table-wrap,.table-responsive,.table-container,.data-table-wrap{
  background:#fff;
  box-shadow:var(--sidat-shadow);
}
table{border-collapse:separate;border-spacing:0;width:100%}
thead th{
  background:#f1f6f3!important;
  color:#34483e;
  font-weight:700;
  letter-spacing:.01em;
}
tbody tr:hover td{background:#f8fbf9}
th,td{vertical-align:middle}
.btn{
  border-radius:7px!important;
  font-weight:600;
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.10)}
input,select,textarea{
  border-radius:8px!important;
  border-color:#d7e2dc!important;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:#59a984!important;
  box-shadow:0 0 0 3px rgba(25,135,84,.10);
}
.app-footer{
  border-top:0!important;
  background:linear-gradient(110deg,#083f31 0%,#0b6045 55%,#118257 100%)!important;
  color:#fff!important;
  box-shadow:0 -5px 22px rgba(4,54,39,.16)!important;
}
.app-footer-accent{
  height:3px!important;
  background:linear-gradient(90deg,#66d39d,#d8f3e5,#66d39d)!important;
}
.app-footer-logo{
  background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:none!important;
}
.app-footer-brand{color:#fff!important;letter-spacing:.55px}
.app-footer-subtitle{color:rgba(255,255,255,.78)!important}
.app-footer-meta{color:rgba(255,255,255,.78)!important}
.footer-agency{
  color:#fff!important;
  background:rgba(255,255,255,.11)!important;
  border-color:rgba(255,255,255,.18)!important;
}
.footer-dot{color:rgba(255,255,255,.48)!important}
.footer-year{color:rgba(255,255,255,.74)!important}

/* layar sangat lebar */
@media(min-width:1600px){
  body{font-size:14px}
  .app-footer-inner{padding-left:28px!important;padding-right:28px!important}
}
/* laptop kecil/tablet landscape */
@media(max-width:1200px){
  th,td{font-size:12px}
  .btn{padding-left:9px!important;padding-right:9px!important}
}
/* tablet dan HP */
@media(max-width:768px){
  body{font-size:13px}
  .app-footer-inner{gap:8px!important}
  .app-footer-meta{max-width:55%}
  .footer-agency{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  table{min-width:760px}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    border-radius:9px;
    overflow:auto!important;
  }
  .actions{white-space:nowrap}
}
/* HP kecil */
@media(max-width:480px){
  .app-footer-meta{max-width:52%}
  .app-footer-brand{font-size:11px!important}
  .footer-agency{font-size:8.5px!important}
  .btn{min-height:32px}
  .modal-body{padding:12px!important}
}
/* akses sentuh */
@media(hover:none) and (pointer:coarse){
  .btn{min-height:36px}
  input,select,textarea{min-height:40px}
}

/* V66 - Export/Cetak global untuk seluruh halaman data */
.sidat-global-tools{
  display:none;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  padding:8px 14px;
  margin:8px 0 calc(var(--sidat-footer-h) + 4px) 0;
  background:#fff;
  border-top:1px solid #dfe9e4;
  box-shadow:0 -3px 12px rgba(20,70,50,.05);
}
.sidat-global-tools .list-bottom-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.sidat-global-tools .btn-export{background:#198754!important;color:#fff!important}
.sidat-global-tools .btn-print{background:#0d6efd!important;color:#fff!important}
@media(max-width:768px){
  .sidat-global-tools{padding:7px 10px}
  .sidat-global-tools .btn{font-size:12px;padding:7px 10px!important}
}

/* V67 - FIX NYATA: toolbar selalu tampil di atas footer, tidak bergantung deteksi JS */
.sidat-global-tools{
  display:flex !important;
  position:fixed !important;
  left:var(--sidebar) !important;
  right:0 !important;
  bottom:var(--sidat-footer-h) !important;
  width:auto !important;
  height:50px;
  margin:0 !important;
  padding:7px 16px !important;
  z-index:1190 !important;
  border:0 !important;
  border-top:1px solid #dbe7e1 !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:0 -4px 14px rgba(20,70,50,.08) !important;
}
.sidat-global-tools .list-bottom-actions{
  display:flex !important;
  width:auto !important;
  gap:8px !important;
  margin:0 !important;
}
.sidat-global-tools .btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:92px;
  height:34px;
}
/* Konten/tabel diberi ruang agar bar tidak menutup baris terakhir */
body{padding-bottom:calc(var(--sidat-footer-h) + 50px) !important}
.table-wrap,.table-responsive,.table-container,.data-table-wrap{
  max-height:calc(100vh - 335px) !important;
}
@media(max-width:820px){
  .sidat-global-tools{
    left:0 !important;
    padding:7px 10px !important;
  }
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 310px) !important;
  }
}
@media(max-width:480px){
  .sidat-global-tools{height:48px}
  .sidat-global-tools .btn{min-width:84px;height:32px;font-size:11px!important}
  body{padding-bottom:calc(var(--sidat-footer-h) + 48px) !important}
}
@media print{
  .sidat-global-tools{display:none!important}
}

/* V68 - Sistem Cetak Global */
#sidatGlobalPrint{
  background:#0d6efd!important;
  color:#fff!important;
  border-color:#0d6efd!important;
}
#sidatGlobalPrint:hover{filter:brightness(.95)}

/* V69 toolbar global: dirender dari header, tidak bergantung footer halaman */
#sidatGlobalTableTools.sidat-global-tools{
 display:flex!important;visibility:visible!important;opacity:1!important;
 position:fixed!important;left:260px!important;right:0!important;
 bottom:var(--sidat-footer-h)!important;width:auto!important;height:50px!important;
 z-index:2147483000!important;margin:0!important;padding:7px 16px!important;
 background:#fff!important;border-top:1px solid #dbe7e1!important;
}
#sidatGlobalTableTools .list-bottom-actions{display:flex!important;gap:8px!important}
#sidatGlobalExport,#sidatGlobalPrint{display:inline-flex!important;visibility:visible!important;opacity:1!important}
@media(max-width:820px){#sidatGlobalTableTools.sidat-global-tools{left:0!important}}
@media print{#sidatGlobalTableTools{display:none!important}}

/* V70 - Layout final: tabel mengisi ruang sampai toolbar */
:root{
  --sidat-toolbar-h:50px;
  --sidat-footer-h:56px;
}

/* Area utama menyediakan ruang hanya untuk toolbar + footer */
body{
  padding-bottom:calc(var(--sidat-toolbar-h) + var(--sidat-footer-h)) !important;
}

/* Panel tabel memanfaatkan tinggi layar secara maksimal */
.table-wrap,.table-responsive,.table-container,.data-table-wrap{
  max-height:calc(100vh - 245px) !important;
  min-height:0 !important;
  margin-bottom:0 !important;
  overflow:auto !important;
}

/* Toolbar menempel tepat di atas footer */
#sidatGlobalTableTools.sidat-global-tools{
  height:var(--sidat-toolbar-h)!important;
  bottom:var(--sidat-footer-h)!important;
  padding:7px 16px!important;
  border-top:1px solid #dce7e1!important;
  box-shadow:0 -2px 8px rgba(20,70,50,.05)!important;
}

/* Footer lebih ringkas agar ruang data lebih luas */
.app-footer{
  height:var(--sidat-footer-h)!important;
}
.app-footer-inner{
  height:calc(var(--sidat-footer-h) - 3px)!important;
  min-height:0!important;
  padding:7px 20px!important;
}
.app-footer-logo{
  width:34px!important;height:34px!important;flex-basis:34px!important;
  font-size:19px!important;border-radius:9px!important;
}
.app-footer-brand{font-size:12px!important}
.app-footer-subtitle{font-size:9.5px!important}

/* Sidebar berhenti tepat di atas footer */
.sidebar,.side-menu,.app-sidebar,aside,.nav-sidebar{
  bottom:var(--sidat-footer-h)!important;
  height:calc(100vh - var(--sidat-footer-h))!important;
  max-height:calc(100vh - var(--sidat-footer-h))!important;
}

/* Laptop */
@media(max-width:1366px){
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 230px)!important;
  }
}

/* Tablet */
@media(max-width:1024px){
  :root{--sidat-toolbar-h:48px;--sidat-footer-h:54px}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 215px)!important;
  }
}

/* HP */
@media(max-width:820px){
  :root{--sidat-toolbar-h:48px;--sidat-footer-h:54px}
  #sidatGlobalTableTools.sidat-global-tools{
    left:0!important;
    padding:7px 10px!important;
  }
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 205px)!important;
  }
  .app-footer-inner{padding:6px 10px!important}
  .app-footer-subtitle{display:none!important}
}

/* HP kecil */
@media(max-width:480px){
  :root{--sidat-toolbar-h:46px;--sidat-footer-h:50px}
  #sidatGlobalTableTools .btn{
    height:31px!important;
    min-width:82px!important;
    padding:5px 8px!important;
    font-size:11px!important;
  }
  .app-footer-logo{width:30px!important;height:30px!important;flex-basis:30px!important}
  .footer-agency{font-size:8px!important}
  .table-wrap,.table-responsive,.table-container,.data-table-wrap{
    max-height:calc(100vh - 190px)!important;
  }
}

/* V71 - Export/Cetak menjadi FOOTER LIST DATA saja */
#sidatGlobalTableTools{display:none!important}
.sidat-list-data-footer{
  position:relative!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;
  min-height:48px;
  margin:0!important;
  padding:7px 12px!important;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;
  border-top:1px solid #dce7e1;
  border-radius:0 0 10px 10px;
  box-shadow:0 5px 14px rgba(20,70,50,.06);
}
.sidat-list-footer-left{display:flex;align-items:center;gap:8px}
.sidat-list-footer-right{font-size:11px;color:#738079;white-space:nowrap}
.sidat-list-data-footer .btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:88px;
  height:33px;
}
.sidat-list-data-footer .btn-export{background:#198754!important;color:#fff!important}
.sidat-list-data-footer .btn-print{background:#0d6efd!important;color:#fff!important}

/* Hapus ruang ekstra toolbar global V70 */
body{padding-bottom:var(--sidat-footer-h)!important}
.table-wrap,.table-responsive,.table-container,.data-table-wrap{
  margin-bottom:0!important;
}

/* List footer mengikuti layar kecil */
@media(max-width:768px){
  .sidat-list-data-footer{padding:7px 9px!important}
  .sidat-list-footer-right{display:none}
  .sidat-list-data-footer .btn{min-width:82px;font-size:11px!important}
}
@media print{.sidat-list-data-footer{display:none!important}}

/* V72 - Footer List Data responsif mengikuti lebar/tampilan list */
.sidat-list-data-footer{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  margin:0!important;
  padding:7px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  overflow:hidden!important;
  border-radius:0 0 10px 10px!important;
}
.sidat-list-footer-left{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  min-width:0!important;
}
.sidat-list-footer-right{
  min-width:0!important;
  max-width:45%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-align:right!important;
}
.sidat-list-data-footer .btn{
  flex:0 0 auto!important;
  min-width:84px!important;
  height:32px!important;
  padding:6px 10px!important;
  font-size:11px!important;
}

/* Footer list mengikuti kontainer tabel/list, tidak layar/browser */
.table-wrap + .sidat-list-data-footer,
.table-responsive + .sidat-list-data-footer,
.table-container + .sidat-list-data-footer,
.data-table-wrap + .sidat-list-data-footer{
  width:100%!important;
}

/* Laptop / tablet */
@media(max-width:1024px){
  .sidat-list-data-footer{padding:6px 9px!important}
  .sidat-list-footer-right{max-width:38%!important;font-size:10px!important}
}

/* Tablet / HP */
@media(max-width:768px){
  .sidat-list-data-footer{
    min-height:44px!important;
    padding:6px 8px!important;
    gap:6px!important;
  }
  .sidat-list-footer-left{
    width:100%!important;
    gap:6px!important;
  }
  .sidat-list-footer-right{display:none!important}
  .sidat-list-data-footer .btn{
    min-width:78px!important;
    height:31px!important;
    padding:5px 8px!important;
    font-size:10.5px!important;
  }
}

/* HP kecil: tombol membagi ruang list secara proporsional */
@media(max-width:480px){
  .sidat-list-footer-left{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
  }
  .sidat-list-data-footer .btn{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
}

/* layar sangat sempit */
@media(max-width:340px){
  .sidat-list-footer-left{grid-template-columns:1fr!important}
}

/* landscape HP: tetap satu baris agar area list lebih tinggi */
@media(max-height:500px) and (orientation:landscape){
  .sidat-list-data-footer{min-height:40px!important;padding:4px 8px!important}
  .sidat-list-footer-left{display:flex!important;width:auto!important}
  .sidat-list-data-footer .btn{width:auto!important;height:29px!important}
}

/* V73 - FIX footer list tidak tertutup / menutup sidebar
   Footer list mengikuti area KONTEN di sebelah sidebar pada desktop. */
.sidat-list-data-footer{
  position:relative!important;
  z-index:20!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* Sidebar tetap memiliki layer sendiri dan tidak dapat ditimpa footer list */
.sidebar,.side-menu,.app-sidebar,aside,.nav-sidebar{
  z-index:1000!important;
}

/* Desktop: footer list berada di flow konten, bukan fixed ke viewport */
@media(min-width:821px){
  .sidat-list-data-footer{
    position:relative!important;
    transform:none!important;
    inset:auto!important;
  }
}

/* Tablet/HP: footer tetap mengikuti lebar list setelah sidebar berubah layout */
@media(max-width:820px){
  .sidat-list-data-footer{
    position:relative!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
  }
}

/* Hilangkan aturan toolbar lama yang bisa memaksa posisi ke area sidebar */
.sidat-list-data-footer.list-bottom-split,
#sidatListDataFooter{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* V74 ROOT FIX:
   Footer list berada sebelum footer.php, sehingga tetap DI DALAM .content/.app-main.
   Tidak perlu offset sidebar sama sekali. */
#sidatListDataFooter{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  z-index:2!important;
}
.app-main .content #sidatListDataFooter,
.content #sidatListDataFooter{
  margin-left:0!important;
  margin-right:0!important;
}
.sidebar{z-index:1000!important}
@media(max-width:820px){
  #sidatListDataFooter{width:100%!important;max-width:100%!important}
}

/* V75 - Header + Login kanan atas */
.topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
.topbar-left{min-width:0!important}
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:0 0 auto}
.header-login-btn{
 display:inline-flex;align-items:center;justify-content:center;gap:6px;
 height:34px;padding:0 13px;border-radius:9px;text-decoration:none!important;
 background:#176b4b;color:#fff!important;font-weight:700;font-size:12px;
 border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 7px rgba(16,62,46,.16);
 transition:.18s ease;white-space:nowrap
}
.header-login-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.header-login-icon{font-size:14px;line-height:1}
.login-placeholder-card{max-width:520px;margin:32px auto;text-align:center;padding:32px!important}
.login-placeholder-icon{font-size:42px;margin-bottom:8px}
@media(max-width:820px){
 .topbar{gap:8px!important}
 .topbar-actions{gap:6px}
 .topbar-badge{display:none!important}
 .header-login-btn{height:32px;padding:0 10px}
}
@media(max-width:480px){
 .topbar-title span{display:none!important}
 .header-login-btn{width:34px;padding:0!important}
 .header-login-text{display:none}
}
@media print{.header-login-btn{display:none!important}}

/* V76 - Header sesuai sketsa pengguna */
.topbar{
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 min-height:72px!important;
 padding:10px 18px!important;
}
.topbar-left{
 display:flex!important;
 align-items:center!important;
 min-width:0!important;
 flex:1 1 auto!important;
}
.topbar-title{
 display:flex!important;
 flex-direction:column!important;
 align-items:flex-start!important;
 justify-content:center!important;
 min-width:0!important;
}
.topbar-title strong{
 font-size:16px!important;
 line-height:1.2!important;
 white-space:nowrap!important;
}
.topbar-title span{
 display:block!important;
 margin-top:3px!important;
 font-size:11px!important;
 line-height:1.25!important;
 white-space:normal!important;
}
.topbar-actions{
 margin-left:auto!important;
 flex:0 0 auto!important;
 align-self:flex-start!important;
 padding-top:2px!important;
}
.header-login-btn{
 margin-left:auto!important;
 min-width:82px!important;
 height:34px!important;
}

/* tidak tampilkan badge database pada header V76 */
.topbar-badge{display:none!important}

@media(max-width:820px){
 .topbar{min-height:64px!important;padding:8px 10px!important}
 .topbar-title strong{font-size:14px!important}
 .topbar-title span{font-size:10px!important}
 .header-login-btn{min-width:72px!important}
}
@media(max-width:480px){
 .topbar{min-height:56px!important}
 .topbar-title strong{font-size:13px!important}
 .topbar-title span{display:none!important}
 .header-login-btn{min-width:34px!important;width:34px!important}
}


/* V81 - COLLAPSE SIDEBAR FINAL / CLEAN
   Satu aturan saja: rail ikon menyatu dengan tombol ☰ pada header. */
:root{
  --sidat-rail-w:64px;
  --sidat-header-h:72px;
}

@media(min-width:821px){
  #sidebar{
    transition:width .20s ease,transform .20s ease!important;
  }
  .app-main{
    transition:margin-left .20s ease,width .20s ease!important;
  }

  /* tombol header normal */
  .menu-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    margin:0 10px 0 0!important;
    padding:0!important;
    border-radius:8px!important;
    cursor:pointer!important;
  }

  /* ===== MODE COLLAPSE ===== */
  body.sidebar-collapsed #sidebar{
    top:var(--sidat-header-h)!important;
    bottom:var(--sidat-footer-h)!important;
    left:0!important;
    width:var(--sidat-rail-w)!important;
    min-width:var(--sidat-rail-w)!important;
    max-width:var(--sidat-rail-w)!important;
    height:auto!important;
    max-height:none!important;
    padding:6px 7px!important;
    margin:0!important;
    transform:none!important;
    opacity:1!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    pointer-events:auto!important;
    background:linear-gradient(180deg,var(--green-950),var(--green-900))!important;
    border-right:1px solid rgba(255,255,255,.10)!important;
    box-shadow:6px 0 18px rgba(0,0,0,.07)!important;
    z-index:1000!important;
  }

  /* brand tidak ditumpuk di rail */
  body.sidebar-collapsed #sidebar .brand{
    display:none!important;
  }

  /* Dashboard */
  body.sidebar-collapsed #sidebar > .nav-link,
  body.sidebar-collapsed #sidebar .nav-submenu .nav-link{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:44px!important;
    min-height:44px!important;
    margin:4px auto!important;
    padding:0!important;
    gap:0!important;
    justify-content:center!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    font-size:0!important;
    transform:none!important;
  }

  /* ikon menu asli aplikasi adalah .nav-icon */
  body.sidebar-collapsed #sidebar .nav-icon{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1!important;
    opacity:1!important;
  }

  /* Tombol kelompok: font-size 0 menyembunyikan text-node,
     nav-icon dikembalikan ke 18px */
  body.sidebar-collapsed #sidebar .nav-dropdown-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:44px!important;
    min-height:44px!important;
    margin:4px auto!important;
    padding:0!important;
    gap:0!important;
    overflow:hidden!important;
    border-radius:10px!important;
    font-size:0!important;
  }
  body.sidebar-collapsed #sidebar .nav-dropdown-title{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    gap:0!important;
    font-size:0!important;
  }
  body.sidebar-collapsed #sidebar .nav-chevron{
    display:none!important;
  }

  /* submenu tidak ditampilkan saat rail ikon */
  body.sidebar-collapsed #sidebar .nav-submenu,
  body.sidebar-collapsed #sidebar .master-data-panel{
    display:none!important;
  }

  /* Header + konten tepat setelah rail */
  body.sidebar-collapsed .app-main{
    margin-left:var(--sidat-rail-w)!important;
    width:calc(100% - var(--sidat-rail-w))!important;
    max-width:calc(100% - var(--sidat-rail-w))!important;
  }

  /* Tombol ☰ menjadi kepala rail dan benar-benar sejajar */
  body.sidebar-collapsed .menu-toggle{
    position:fixed!important;
    top:0!important;
    left:0!important;
    width:var(--sidat-rail-w)!important;
    height:var(--sidat-header-h)!important;
    flex-basis:var(--sidat-rail-w)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    border-right:1px solid rgba(255,255,255,.10)!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    background:var(--green-950)!important;
    color:#fff!important;
    box-shadow:none!important;
    z-index:2200!important;
    font-size:20px!important;
  }

  body.sidebar-collapsed .topbar{
    min-height:var(--sidat-header-h)!important;
    height:var(--sidat-header-h)!important;
  }

  /* Jangan sisakan ruang hamburger kedua di topbar */
  body.sidebar-collapsed .topbar-left{
    padding-left:0!important;
  }
}

/* Tablet/HP tetap drawer penuh, tidak memakai rail */
@media(max-width:820px){
  .menu-toggle{
    position:static!important;
    display:inline-flex!important;
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    margin-right:8px!important;
    border-radius:8px!important;
  }
  body.sidebar-collapsed .app-main{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
  }
}

@media print{
  .menu-toggle{display:none!important}
}

/* V82 - Identitas SIDAT-MAPPAH dipusatkan di HEADER */
.sidat-header-identity{
 display:flex!important;
 flex-direction:column!important;
 align-items:flex-start!important;
 justify-content:center!important;
 min-width:0!important;
 line-height:1.15!important;
}
.sidat-header-identity strong{
 display:block!important;
 font-size:16px!important;
 font-weight:800!important;
 color:#173b30!important;
 letter-spacing:.1px!important;
}
.sidat-header-identity span{
 display:block!important;
 margin-top:3px!important;
 font-size:10.5px!important;
 color:#5f746c!important;
 white-space:normal!important;
}
.sidat-header-identity small{
 display:block!important;
 margin-top:2px!important;
 font-size:9.5px!important;
 font-weight:700!important;
 color:#18704f!important;
}
/* Sidebar tidak mengulang identitas saat collapse; identitas utama ada di header */
body.sidebar-collapsed #sidebar .brand{display:none!important}

@media(max-width:820px){
 .sidat-header-identity strong{font-size:14px!important}
 .sidat-header-identity span{font-size:9.5px!important}
 .sidat-header-identity small{font-size:9px!important}
}
@media(max-width:560px){
 .sidat-header-identity span{
   max-width:230px!important;
   overflow:hidden!important;
   text-overflow:ellipsis!important;
   white-space:nowrap!important;
 }
}
@media(max-width:420px){
 .sidat-header-identity span{display:none!important}
 .sidat-header-identity small{font-size:8.5px!important}
}


/* V83 - HEADER FULL WIDTH SESUAI SKETSA
   Header melintang penuh. Sidebar dimulai DI BAWAH header. */
:root{
  --sidat-header-h:86px;
  --sidat-sidebar-w:260px;
  --sidat-rail-w:64px;
}

@media(min-width:821px){
  /* Header full viewport */
  .topbar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:var(--sidat-header-h)!important;
    min-height:var(--sidat-header-h)!important;
    z-index:2100!important;
    padding:10px 18px!important;
    box-sizing:border-box!important;
  }

  /* Tombol collapse berada di header full-width, bukan kepala rail */
  .menu-toggle,
  body.sidebar-collapsed .menu-toggle{
    position:static!important;
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    margin-right:10px!important;
    border-radius:8px!important;
  }

  /* Sidebar full dimulai di bawah header */
  #sidebar{
    top:var(--sidat-header-h)!important;
    bottom:var(--sidat-footer-h)!important;
    height:auto!important;
    max-height:none!important;
  }

  /* Konten juga dimulai di bawah header */
  .app-main{
    padding-top:var(--sidat-header-h)!important;
  }

  /* Full sidebar */
  body:not(.sidebar-collapsed) .app-main{
    margin-left:var(--sidat-sidebar-w)!important;
    width:calc(100% - var(--sidat-sidebar-w))!important;
    max-width:calc(100% - var(--sidat-sidebar-w))!important;
  }

  /* Collapse icon rail tetap dimulai di bawah header */
  body.sidebar-collapsed #sidebar{
    top:var(--sidat-header-h)!important;
    width:var(--sidat-rail-w)!important;
    min-width:var(--sidat-rail-w)!important;
    max-width:var(--sidat-rail-w)!important;
  }
  body.sidebar-collapsed .app-main{
    margin-left:var(--sidat-rail-w)!important;
    width:calc(100% - var(--sidat-rail-w))!important;
    max-width:calc(100% - var(--sidat-rail-w))!important;
  }

  /* Header identity tetap di area header dan login paling kanan */
  .topbar-left{flex:1 1 auto!important}
  .topbar-actions{margin-left:auto!important}
}

/* Mobile: header tetap full-width, sidebar drawer di bawah/atas sesuai sistem mobile */
@media(max-width:820px){
  .topbar{
    position:sticky!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:2100!important;
  }
  .app-main{margin-left:0!important;width:100%!important}
}

/* V84 - Sidebar tanpa identitas/logo.
   Identitas SIDAT-MAPPAH hanya berada di header full-width. */
#sidebar .brand,
#sidebar .brand-icon{
 display:none!important;
}
@media(min-width:821px){
 #sidebar{
   padding-top:8px!important;
 }
}

/* V85 - Logo Kabupaten Bekasi di bagian atas sidebar, di bawah header */
.sidebar-kab-logo{
 width:100%!important;
 min-height:94px!important;
 display:flex!important;
 flex-direction:column!important;
 align-items:center!important;
 justify-content:center!important;
 gap:5px!important;
 padding:10px 8px!important;
 margin:0 0 8px!important;
 box-sizing:border-box!important;
 border-bottom:1px solid rgba(255,255,255,.12)!important;
 text-align:center!important;
 overflow:hidden!important;
}
.sidebar-kab-logo img{
 display:block!important;
 width:auto!important;
 height:68px!important;
 max-width:92px!important;
 object-fit:contain!important;
}
.sidebar-kab-logo-mark{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 width:54px!important;
 height:54px!important;
 font-size:34px!important;
 line-height:1!important;
}
.sidebar-kab-logo-caption{
 display:block!important;
 font-size:10px!important;
 font-weight:700!important;
 line-height:1.15!important;
 color:rgba(255,255,255,.88)!important;
}

/* Collapse: cukup tampilkan lambang/logo, caption hilang */
@media(min-width:821px){
 body.sidebar-collapsed .sidebar-kab-logo{
   min-height:68px!important;
   height:68px!important;
   padding:7px 0!important;
   margin-bottom:5px!important;
 }
 body.sidebar-collapsed .sidebar-kab-logo img{
   height:46px!important;
   max-width:48px!important;
 }
 body.sidebar-collapsed .sidebar-kab-logo-mark{
   width:44px!important;height:44px!important;font-size:27px!important;
 }
 body.sidebar-collapsed .sidebar-kab-logo-caption{display:none!important}
}

/* V86 - Logo Kabupaten Bekasi transparan terpasang di aplikasi */
.sidebar-kab-logo{
 background:transparent!important;
 border:0!important;
 border-bottom:1px solid rgba(255,255,255,.12)!important;
 min-height:110px!important;
 padding:10px 6px 12px!important;
}
.sidebar-kab-logo img{
 display:block!important;
 width:auto!important;
 height:86px!important;
 max-width:112px!important;
 max-height:86px!important;
 object-fit:contain!important;
 margin:0 auto!important;
 background:transparent!important;
}
.sidebar-kab-logo-placeholder,
.sidebar-kab-logo-mark,
.sidebar-kab-logo-caption{display:none!important}

@media(min-width:821px){
 body.sidebar-collapsed .sidebar-kab-logo{
   min-height:66px!important;
   height:66px!important;
   padding:7px 0!important;
 }
 body.sidebar-collapsed .sidebar-kab-logo img{
   width:auto!important;
   height:48px!important;
   max-width:50px!important;
   max-height:48px!important;
 }
}


/* V107 - Logo Kabupaten Bekasi dipindahkan ke header */
.sidebar-kab-logo{display:none!important}
.topbar-left{display:flex;align-items:center;min-width:0}
.topbar-kab-logo{
  flex:0 0 auto;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:14px;
}
.topbar-kab-logo img{
  display:block;
  max-width:58px;
  max-height:58px;
  width:auto;
  height:auto;
  object-fit:contain;
}
.sidebar{padding-top:14px}
@media (max-width:820px){
  .topbar-kab-logo{width:46px;height:46px;margin-right:8px}
  .topbar-kab-logo img{max-width:42px;max-height:42px}
  .sidat-header-identity span{white-space:normal}
}
@media (max-width:520px){
  .topbar-kab-logo{width:38px;height:38px;margin-right:6px}
  .topbar-kab-logo img{max-width:36px;max-height:36px}
}


/* V111 - Ruang antara sidebar dan area data */
@media (min-width:821px){
  body:not(.sidebar-collapsed) .app-main{
    padding-left:18px;
  }
  body:not(.sidebar-collapsed) .main-content,
  body:not(.sidebar-collapsed) main{
    border-left:1px solid rgba(16,62,46,.08);
  }
}
@media (max-width:820px){
  .app-main{padding-left:0}
}


/* =========================================================
   V112 - RESPONSIVE ELEGANT UI FINAL OVERRIDE
   ========================================================= */
:root{
 --ui-bg:#f4f7f6;
 --ui-surface:#ffffff;
 --ui-surface-soft:#f8fbfa;
 --ui-text:#17312a;
 --ui-muted:#687d76;
 --ui-border:#dce7e2;
 --ui-shadow:0 8px 28px rgba(18,62,48,.08);
 --ui-shadow-soft:0 3px 12px rgba(18,62,48,.06);
 --ui-radius:14px;
 --ui-radius-sm:10px;
 --ui-content-gap:22px;
}

/* global clarity */
html{font-size:16px;scroll-behavior:smooth}
body{
 background:var(--ui-bg)!important;
 color:var(--ui-text)!important;
 font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif!important;
 line-height:1.45!important;
 -webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility;
}
*,*:before,*:after{box-sizing:border-box}
img,svg{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
a,button{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}

/* header */
.topbar{
 background:rgba(255,255,255,.97)!important;
 border-bottom:1px solid var(--ui-border)!important;
 box-shadow:0 3px 16px rgba(18,62,48,.07)!important;
 backdrop-filter:blur(10px);
}
.topbar-left{gap:2px!important;min-width:0!important}
.topbar-kab-logo{
 width:66px!important;height:66px!important;margin-right:12px!important;
 padding:4px!important;flex:0 0 66px!important;
}
.topbar-kab-logo img{
 max-width:58px!important;max-height:58px!important;
 filter:drop-shadow(0 2px 3px rgba(0,0,0,.10));
}
.menu-toggle{
 border:1px solid var(--ui-border)!important;
 background:#fff!important;color:#174c3b!important;
 box-shadow:var(--ui-shadow-soft)!important;
}
.menu-toggle:hover{background:#edf7f3!important;transform:translateY(-1px)}
.sidat-header-identity{max-width:min(720px,60vw)!important}
.sidat-header-identity strong{
 font-size:18px!important;line-height:1.1!important;letter-spacing:.2px!important;color:#123d2f!important
}
.sidat-header-identity span{
 font-size:11.5px!important;line-height:1.3!important;margin-top:4px!important;color:#60746d!important
}
.sidat-header-identity small{
 font-size:10.5px!important;line-height:1.25!important;margin-top:2px!important;color:#16805a!important
}
.topbar-actions .btn,.topbar-actions a{
 min-height:38px!important;border-radius:10px!important;padding:8px 14px!important;
 box-shadow:0 3px 10px rgba(16,104,75,.12)!important;font-weight:700!important
}

/* sidebar */
#sidebar{
 background:linear-gradient(180deg,#073d2f 0%,#0a4b39 55%,#083c2f 100%)!important;
 border-right:1px solid rgba(255,255,255,.08)!important;
 box-shadow:8px 0 24px rgba(12,49,38,.08)!important;
 padding:12px 10px 18px!important;
 scrollbar-width:thin;
 scrollbar-color:rgba(255,255,255,.25) transparent;
}
#sidebar::-webkit-scrollbar{width:6px}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
#sidebar .nav-link,#sidebar .nav-dropdown-toggle{
 min-height:42px!important;border-radius:10px!important;margin:3px 0!important;
 padding:9px 11px!important;font-size:12px!important;line-height:1.25!important;
 letter-spacing:0!important;
}
#sidebar .nav-link{color:rgba(255,255,255,.91)!important}
#sidebar .nav-link:hover,#sidebar .nav-dropdown-toggle:hover{
 background:rgba(255,255,255,.10)!important;transform:translateX(2px)
}
#sidebar .nav-link.active{
 background:rgba(255,255,255,.15)!important;
 box-shadow:inset 3px 0 0 #5de0ad!important;color:#fff!important;font-weight:750!important
}
#sidebar .nav-dropdown-title{min-width:0!important}
#sidebar .nav-icon{
 width:24px!important;min-width:24px!important;font-size:15px!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important
}
#sidebar .nav-chevron{opacity:.8!important;font-size:12px!important}
#sidebar .nav-child{
 padding-left:34px!important;font-size:11.5px!important;color:rgba(255,255,255,.84)!important
}
#sidebar .nav-submenu{padding:1px 0 5px!important}
#sidebar .master-data-panel{padding:2px 0!important}

/* content spacing */
.main-content,main,.content{
 min-width:0;
}
.page-head{
 display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
 gap:16px!important;margin:0 0 14px!important;flex-wrap:wrap!important;
}
.page-head h1,h1{
 color:#17352c!important;font-size:24px!important;line-height:1.18!important;
 letter-spacing:-.35px!important;margin:0!important;font-weight:800!important
}
.page-head small,.page-head .muted{color:var(--ui-muted)!important}
body:not(.sidebar-collapsed) .app-main{padding-left:var(--ui-content-gap)!important}
.app-main{background:var(--ui-bg)!important}
.app-main>.main-content,.app-main>main{
 padding-right:20px!important;padding-bottom:28px!important;
}

/* cards / search */
.card{
 background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;
 border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow-soft)!important
}
.search-card{
 padding:10px!important;margin-bottom:14px!important;
 display:flex!important;align-items:center!important;gap:8px!important
}
.search-card input{
 min-height:42px!important;border:1px solid #d6e3de!important;border-radius:10px!important;
 padding:9px 12px!important;background:#fff!important;color:var(--ui-text)!important
}
.search-card input:focus,input:focus,select:focus,textarea:focus{
 outline:none!important;border-color:#4aa783!important;
 box-shadow:0 0 0 3px rgba(35,139,99,.12)!important
}

/* buttons */
.btn,button.btn,a.btn{
 min-height:36px!important;border-radius:9px!important;padding:7px 11px!important;
 font-weight:700!important;font-size:12px!important;line-height:1.15!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
 border:1px solid transparent!important;white-space:nowrap!important
}
.btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.actions{display:flex!important;align-items:center!important;gap:5px!important;flex-wrap:nowrap!important}
.actions .btn{min-width:auto!important}

/* tables */
.table-wrap{
 overflow:auto!important;max-width:100%!important;
 border-radius:var(--ui-radius)!important;
 scrollbar-width:thin;scrollbar-color:#b7c9c2 transparent;
}
.global-data-table,.detail-table,.table-wrap table{
 width:100%!important;border-collapse:separate!important;border-spacing:0!important;
 background:#fff!important;font-size:12px!important;color:#243b34!important
}
.global-data-table thead th,.table-wrap table thead th{
 position:sticky!important;top:0!important;z-index:3!important;
 background:#edf4f1!important;color:#3b554c!important;
 font-size:10.5px!important;text-transform:uppercase!important;letter-spacing:.25px!important;
 font-weight:800!important;padding:11px 12px!important;border-bottom:1px solid #d6e3de!important;
 white-space:nowrap!important
}
.global-data-table tbody td,.table-wrap table tbody td{
 padding:10px 12px!important;border-bottom:1px solid #e7eeeb!important;
 vertical-align:middle!important;line-height:1.35!important
}
.global-data-table tbody tr:nth-child(even){background:#fbfdfc!important}
.global-data-table tbody tr:hover{background:#f2f8f5!important}
.global-data-table .col-no{width:52px!important;text-align:center!important;font-weight:700!important}
.global-data-table td:not(.actions){max-width:340px}
.detail-table th{
 width:34%!important;min-width:180px!important;background:#f5f9f7!important;
 color:#405a51!important;font-weight:750!important;text-align:left!important
}
.detail-table th,.detail-table td{padding:11px 14px!important;border-bottom:1px solid #e7eeeb!important}

/* forms */
.form-grid{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:14px 16px!important
}
.form-grid label,.modal-body label{
 color:#334e45!important;font-size:12px!important;font-weight:750!important
}
.form-grid input,.form-grid select,.form-grid textarea,
.modal-body input,.modal-body select,.modal-body textarea{
 width:100%!important;min-height:42px!important;border:1px solid #d5e2dd!important;
 border-radius:9px!important;background:#fff!important;padding:9px 11px!important;color:#243b34!important
}
textarea{min-height:90px!important;resize:vertical!important}

/* modal */
.app-modal-backdrop{
 padding:22px!important;background:rgba(9,32,25,.52)!important;backdrop-filter:blur(3px)
}
.app-modal-dialog{
 width:min(920px,96vw)!important;max-height:90vh!important;border-radius:16px!important;
 overflow:auto!important;background:#fff!important;box-shadow:0 22px 70px rgba(0,0,0,.22)!important
}
.modal-head{
 position:sticky!important;top:0!important;z-index:8!important;
 background:#fff!important;border-bottom:1px solid var(--ui-border)!important;
 padding:15px 18px!important
}
.modal-head h2{font-size:19px!important;color:#173b30!important;margin:0!important}
.modal-body{padding:18px!important}
.modal-x{
 width:36px!important;height:36px!important;border-radius:9px!important;
 background:#f3f6f5!important;color:#52665f!important
}

/* footer */
.app-footer{
 border-top:1px solid rgba(255,255,255,.12)!important;
 box-shadow:0 -4px 16px rgba(11,54,41,.08)!important
}
.app-footer-inner{padding-left:16px!important;padding-right:16px!important}
.app-footer-logo{flex:0 0 auto}

/* desktop */
@media(min-width:821px){
 :root{--sidat-sidebar-w:270px}
 body:not(.sidebar-collapsed) .app-main{
   margin-left:var(--sidat-sidebar-w)!important;
   width:calc(100% - var(--sidat-sidebar-w))!important;
   max-width:calc(100% - var(--sidat-sidebar-w))!important;
 }
 #sidebar{width:var(--sidat-sidebar-w)!important;min-width:var(--sidat-sidebar-w)!important}
 .app-main>.main-content,.app-main>main{padding-top:18px!important}
}

/* tablet */
@media(max-width:1024px){
 :root{--ui-content-gap:16px}
 .page-head h1,h1{font-size:21px!important}
 .global-data-table,.table-wrap table{font-size:11.5px!important}
 .global-data-table thead th,.table-wrap table thead th{padding:10px!important}
 .global-data-table tbody td,.table-wrap table tbody td{padding:9px 10px!important}
 .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* phone/tablet drawer */
@media(max-width:820px){
 :root{--sidat-header-h:72px}
 .topbar{
   min-height:72px!important;height:auto!important;padding:8px 10px!important;gap:6px!important
 }
 .topbar-kab-logo{width:48px!important;height:48px!important;flex-basis:48px!important;margin-right:5px!important}
 .topbar-kab-logo img{max-width:44px!important;max-height:44px!important}
 .menu-toggle{width:38px!important;height:38px!important;flex-basis:38px!important;margin-right:6px!important}
 .sidat-header-identity{max-width:calc(100vw - 185px)!important}
 .sidat-header-identity strong{font-size:14px!important}
 .sidat-header-identity span{font-size:9.5px!important;line-height:1.2!important}
 .sidat-header-identity small{font-size:9px!important}
 .topbar-actions .btn,.topbar-actions a{min-height:34px!important;padding:6px 9px!important;font-size:11px!important}
 #sidebar{
   width:min(82vw,300px)!important;max-width:300px!important;padding:10px!important;
   box-shadow:12px 0 36px rgba(0,0,0,.20)!important
 }
 .app-main{padding-left:0!important;margin-left:0!important;width:100%!important;max-width:100%!important}
 .app-main>.main-content,.app-main>main{padding:14px 12px 24px!important}
 .page-head{align-items:flex-start!important;margin-bottom:12px!important}
 .page-head h1,h1{font-size:20px!important}
 .search-card{padding:8px!important}
 .table-wrap{border-radius:11px!important}
 .global-data-table,.table-wrap table{min-width:760px!important}
 .form-grid{grid-template-columns:1fr!important}
 .app-modal-backdrop{padding:10px!important}
 .app-modal-dialog{width:100%!important;max-height:94vh!important;border-radius:13px!important}
 .modal-head{padding:12px 14px!important}
 .modal-body{padding:14px!important}
 .app-footer-inner{gap:8px!important}
 .app-footer-subtitle{display:none!important}
}

/* small phone */
@media(max-width:560px){
 .topbar-kab-logo{width:40px!important;height:40px!important;flex-basis:40px!important}
 .topbar-kab-logo img{max-width:38px!important;max-height:38px!important}
 .sidat-header-identity{max-width:calc(100vw - 155px)!important}
 .sidat-header-identity span{display:none!important}
 .sidat-header-identity strong{font-size:13px!important}
 .sidat-header-identity small{font-size:8.5px!important}
 .topbar-actions .btn,.topbar-actions a{padding:6px 8px!important;font-size:10px!important}
 .page-head h1,h1{font-size:18px!important}
 .page-head .btn{width:100%!important}
 .search-card{flex-wrap:wrap!important}
 .search-card input{flex:1 1 100%!important}
 .search-card .btn,.search-card button{flex:1 1 auto!important}
 .actions .btn{font-size:11px!important;padding:6px 8px!important}
 .app-footer-meta{font-size:9px!important}
}

/* print remains clean */
@media print{
 body{background:#fff!important}
 #sidebar,.topbar,.app-footer,.search-card,.actions,.page-head .btn{display:none!important}
 .app-main{margin:0!important;padding:0!important;width:100%!important;max-width:100%!important}
 .card,.table-wrap{box-shadow:none!important;border:0!important}
}

/* V114 - Sidebar bertingkat untuk Timbulan Aktual & Master Data */
#sidebar .nav-submenu .nav-dropdown-toggle{margin-left:12px!important;width:calc(100% - 12px)!important}
#sidebar .nav-submenu .nav-submenu .nav-child{padding-left:46px!important}
#sidebar .nav-submenu .nav-submenu{margin-left:6px!important;border-left:1px solid rgba(255,255,255,.10)!important}

/* V115 - Konsistensi ikon seluruh menu */
#sidebar .nav-icon{
  width:26px!important;min-width:26px!important;height:26px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:15px!important;line-height:1!important;text-align:center!important;
  flex:0 0 26px!important;
}
#sidebar .nav-link,#sidebar .nav-dropdown-title{
  display:flex!important;align-items:center!important;gap:7px!important;
}
#sidebar .nav-dropdown-title{min-width:0!important;flex:1 1 auto!important}
#sidebar .nav-child .nav-icon{font-size:14px!important}
#sidebar .nav-submenu .nav-submenu .nav-icon{font-size:13px!important}

/* V116 ROOT FIX - submenu bertingkat harus mengikuti state .open */
#sidebar .nav-submenu{display:none!important}
#sidebar .nav-submenu.open{display:block!important}
#sidebar .nav-submenu.open > .nav-submenu.open{display:block!important}
#sidebar .nav-submenu > .nav-dropdown-toggle{display:flex!important}

/* V117 - Batas list + pagination */
.sidat-list-limit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin-top:10px;background:#fff;border:1px solid var(--ui-border,#dce7e2);border-radius:10px;font-size:12px}
.sidat-list-limit label{font-weight:700}
.sidat-list-limit select{height:34px;min-width:68px;padding:0 8px;border:1px solid #cfdcd6;border-radius:8px;background:#fff}
.sidat-page-info{margin-left:6px;color:#687d76}
.sidat-pagination{display:flex;gap:5px;margin-left:auto}
.sidat-page-btn{min-width:34px;height:34px;border:1px solid #d5e2dc;border-radius:8px;background:#fff;color:#23483b;cursor:pointer;font-weight:700}
.sidat-page-btn.active{background:#176b4b;color:#fff;border-color:#176b4b}
.sidat-page-btn:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:560px){.sidat-page-info{width:100%;margin-left:0}.sidat-pagination{margin-left:0;width:100%;overflow-x:auto}.sidat-page-btn{flex:0 0 34px}}
@media print{.sidat-list-limit{display:none!important}}

/* V118 - Cetak & Export universal */
.sidat-universal-toolbar{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.sidat-universal-export{background:#176b4b!important;color:#fff!important;border-color:#176b4b!important}
@media(max-width:560px){.sidat-universal-toolbar{justify-content:stretch}.sidat-universal-toolbar .btn{flex:1 1 120px}}
@media print{.sidat-universal-toolbar{display:none!important}}

/* =========================================================
   V119 - FINAL RESPONSIVE NORMALIZATION
   Override terakhir untuk seluruh halaman SIDAT-MAPPAH
   ========================================================= */
html,body{width:100%;max-width:100%;overflow-x:hidden}
*,*:before,*:after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}
.app-main,.main-content,.content,.page-content,main{min-width:0;max-width:100%}
.card,.page-head,.grid,.form-grid{min-width:0;max-width:100%}

/* tabel: container mengikuti layar, tabel boleh scroll horizontal */
.table-wrap,.table-responsive,.table-container,.data-table-wrap{
 width:100%!important;max-width:100%!important;overflow-x:auto!important;
 -webkit-overflow-scrolling:touch;
}
.table-wrap table,.table-responsive table,.table-container table,.data-table-wrap table{
 width:100%;max-width:none;
}
td,th{overflow-wrap:anywhere}
.actions{white-space:nowrap!important}
.actions .btn{display:inline-flex!important;margin:2px!important}

/* form dan kontrol tidak boleh keluar layar */
input,select,textarea,button{max-width:100%}
.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.form-grid>*{min-width:0}
.form-actions,.modal-footer,.page-head{flex-wrap:wrap!important}

/* modal */
.app-modal-dialog,.modal-dialog,.modal-content{
 max-width:calc(100vw - 24px)!important;
}
#appModalContent{max-width:100%!important;overflow-x:auto!important}

/* pagination + export/cetak */
.sidat-list-limit,.sidat-list-data-footer,.sidat-universal-toolbar{
 width:100%!important;max-width:100%!important;
}
.sidat-pagination{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* tablet */
@media(max-width:1024px){
 .page-head{gap:10px}
 .page-head h1,h1{font-size:20px!important;line-height:1.25}
 .card{padding-left:12px!important;padding-right:12px!important}
 .table-wrap table,.global-data-table{font-size:11.5px!important}
}

/* tablet portrait / HP */
@media(max-width:820px){
 body{font-size:14px}
 .app-main,.main-content,.content,.page-content,main{
   width:100%!important;max-width:100%!important;margin-left:0!important;padding-left:12px!important;padding-right:12px!important;
 }
 .form-grid{grid-template-columns:1fr!important}
 .page-head{display:flex!important;align-items:flex-start!important}
 .page-head>*,.page-head .btn{max-width:100%}
 .table-wrap,.table-responsive,.table-container,.data-table-wrap{max-height:none!important}
 .table-wrap table,.table-responsive table,.global-data-table{
   min-width:720px!important;
 }
 .app-modal-dialog,.modal-dialog,.modal-content{
   width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;
   max-height:94vh!important;margin:3vh auto!important;
 }
 .modal-header,.modal-body,.modal-footer{padding-left:12px!important;padding-right:12px!important}
 .sidat-list-data-footer{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important}
}

/* HP */
@media(max-width:560px){
 .app-main,.main-content,.content,.page-content,main{padding-left:9px!important;padding-right:9px!important}
 .page-head{flex-direction:column!important;align-items:stretch!important}
 .page-head h1,h1{font-size:18px!important}
 .page-head .btn,.form-actions .btn{min-height:40px}
 .form-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%}
 .form-actions .btn{width:100%!important;justify-content:center!important}
 .search-card{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
 .search-card input,.search-card select{flex:1 1 180px!important;width:auto!important}
 .search-card .btn{flex:0 0 auto!important}
 .sidat-list-limit{align-items:center!important;padding:9px!important}
 .sidat-list-limit label,.sidat-list-limit>span:not(.sidat-page-info){font-size:11px}
 .sidat-page-info{width:100%!important;margin:2px 0 0!important}
 .sidat-pagination{width:100%!important;margin-left:0!important;padding-bottom:2px}
 .sidat-list-data-footer{flex-direction:column!important;align-items:stretch!important}
 .sidat-list-footer-left{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
 .sidat-list-footer-left .btn{width:100%!important;justify-content:center!important}
 .sidat-list-footer-right{max-width:100%!important;width:100%!important;text-align:center!important}
 .sidat-universal-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important}
 .sidat-universal-toolbar .btn{width:100%!important;justify-content:center!important}
 .app-footer-inner{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:3px!important}
 .app-footer-brand{white-space:normal!important}
 .app-footer-text{text-align:center!important}
}

/* HP sangat kecil */
@media(max-width:380px){
 .app-main,.main-content,.content,.page-content,main{padding-left:6px!important;padding-right:6px!important}
 .form-actions{grid-template-columns:1fr!important}
 .sidat-list-footer-left,.sidat-universal-toolbar{grid-template-columns:1fr!important}
 .btn{font-size:11px!important}
}

/* V121 - Pagination selalu satu baris */
.sidat-list-limit{
 display:flex!important;
 flex-direction:row!important;
 align-items:center!important;
 flex-wrap:nowrap!important;
 gap:8px!important;
 overflow-x:auto!important;
 -webkit-overflow-scrolling:touch;
 white-space:nowrap!important;
}
.sidat-list-limit label,
.sidat-list-limit select,
.sidat-list-limit > span,
.sidat-page-info,
.sidat-pagination{
 flex:0 0 auto!important;
 width:auto!important;
 margin:0!important;
 white-space:nowrap!important;
}
.sidat-page-info{margin-left:8px!important}
.sidat-pagination{
 display:flex!important;
 flex-direction:row!important;
 gap:5px!important;
 margin-left:auto!important;
 overflow:visible!important;
}
.sidat-page-btn{flex:0 0 34px!important}
@media(max-width:560px){
 .sidat-list-limit{
   flex-wrap:nowrap!important;
   overflow-x:auto!important;
   padding:8px!important;
 }
 .sidat-page-info{width:auto!important;margin-left:8px!important}
 .sidat-pagination{width:auto!important;margin-left:auto!important;overflow:visible!important}
}

/* =========================================================
   V122 - PERBAIKAN POPUP TAMBAH / EDIT
   Footer aplikasi tidak menutupi tombol Simpan/Kembali.
   Hanya isi form yang scroll; kepala dan tombol tetap terlihat.
   ========================================================= */
.app-modal-backdrop{
 position:fixed!important;
 inset:0!important;
 z-index:10000!important;
 padding:18px!important;
 display:none;
 align-items:center!important;
 justify-content:center!important;
 overflow:hidden!important;
}
.app-modal-backdrop.show{display:flex!important}
.app-modal-dialog{
 width:min(920px,calc(100vw - 36px))!important;
 height:auto!important;
 max-height:calc(100dvh - 36px)!important;
 margin:0 auto!important;
 overflow:hidden!important;
 display:flex!important;
 flex-direction:column!important;
 border-radius:15px!important;
 background:#fff!important;
}
#appModalContent{
 width:100%!important;
 max-width:100%!important;
 max-height:calc(100dvh - 36px)!important;
 overflow:hidden!important;
 display:flex!important;
 flex-direction:column!important;
}
#appModalContent > .modal-head{
 flex:0 0 auto!important;
 position:relative!important;
 top:auto!important;
 padding:14px 18px 11px!important;
 background:#fff!important;
 border-bottom:1px solid #e3ebe7!important;
}
#appModalContent > form{
 min-height:0!important;
 flex:1 1 auto!important;
 display:flex!important;
 flex-direction:column!important;
 overflow:hidden!important;
}
#appModalContent .modal-body{
 min-height:0!important;
 flex:1 1 auto!important;
 overflow-y:auto!important;
 overflow-x:hidden!important;
 padding:14px 18px 18px!important;
 overscroll-behavior:contain;
 scrollbar-gutter:stable;
}
#appModalContent .modal-foot{
 flex:0 0 auto!important;
 position:relative!important;
 bottom:auto!important;
 z-index:12!important;
 display:flex!important;
 align-items:center!important;
 justify-content:flex-end!important;
 gap:8px!important;
 padding:10px 18px!important;
 border-top:1px solid #e0e9e5!important;
 background:#fff!important;
 box-shadow:0 -5px 14px rgba(20,64,49,.06)!important;
}
#appModalContent .modal-foot .btn{
 min-width:100px!important;
 min-height:38px!important;
 justify-content:center!important;
}
#appModalContent .form-grid{
 grid-template-columns:repeat(2,minmax(0,1fr))!important;
 gap:13px 16px!important;
}
#appModalContent .form-grid > div{min-width:0!important}
#appModalContent label{
 display:block!important;
 margin:0 0 5px!important;
 font-size:12px!important;
 font-weight:700!important;
}
#appModalContent input,
#appModalContent select,
#appModalContent textarea{
 width:100%!important;
 max-width:100%!important;
}
#appModalContent textarea{min-height:78px!important}

/* Footer utama harus selalu di bawah modal secara visual */
.app-footer{z-index:50!important}

@media(max-width:820px){
 .app-modal-backdrop{padding:10px!important}
 .app-modal-dialog{
   width:calc(100vw - 20px)!important;
   max-width:calc(100vw - 20px)!important;
   max-height:calc(100dvh - 20px)!important;
 }
 #appModalContent{max-height:calc(100dvh - 20px)!important}
 #appModalContent .form-grid{grid-template-columns:1fr!important}
}
@media(max-width:560px){
 .app-modal-backdrop{padding:0!important}
 .app-modal-dialog{
   width:100vw!important;max-width:100vw!important;
   height:100dvh!important;max-height:100dvh!important;
   border-radius:0!important;
 }
 #appModalContent{height:100dvh!important;max-height:100dvh!important}
 #appModalContent > .modal-head{padding:11px 12px!important}
 #appModalContent .modal-body{padding:11px 12px 14px!important}
 #appModalContent .modal-foot{
   padding:9px 12px calc(9px + env(safe-area-inset-bottom))!important;
   display:grid!important;grid-template-columns:1fr 1fr!important;
 }
 #appModalContent .modal-foot .btn{width:100%!important}
}

/* V123 - Form popup 3 kolom ke samping pada desktop */
@media(min-width:1025px){
 .app-modal-dialog{
   width:min(1240px,calc(100vw - 48px))!important;
 }
 #appModalContent .form-grid{
   grid-template-columns:repeat(3,minmax(0,1fr))!important;
   gap:13px 16px!important;
 }
}
/* Laptop/tablet: 2 kolom */
@media(min-width:821px) and (max-width:1024px){
 #appModalContent .form-grid{
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
 }
}
/* HP: 1 kolom */
@media(max-width:820px){
 #appModalContent .form-grid{
   grid-template-columns:1fr!important;
 }
}

/* V125 - Susunan khusus Tambah Penanganan Sampah Liar */
#appModalForm [name="berat_ton"][readonly]{background:#f2f6f4!important;color:#456258!important;cursor:not-allowed}
@media(min-width:1025px){
 #appModalForm [name="foto_penanganan"],
 #appModalForm [name="uraian_penanganan"]{width:100%!important}
}

/* V126 - Upload Foto */
#appModalForm input[type="file"]{padding:7px!important;background:#fff!important;border:1px dashed #9ebbb0!important}
#appModalForm input[type="file"]::file-selector-button{border:0;border-radius:7px;padding:7px 11px;margin-right:9px;background:#176b4b;color:#fff;cursor:pointer}

/* V128 - List Penanganan Sampah Liar */
.penanganan-liar-table .uraian-cell{min-width:220px;white-space:normal!important}
.penanganan-liar-table .foto-link{white-space:nowrap!important}
.penanganan-liar-table th{white-space:nowrap}

/* V130 - Kamera langsung Pelaporan Sampah Liar */
.camera-upload-box{display:flex;flex-direction:column;gap:8px}
.camera-btn{display:flex!important;align-items:center;justify-content:center;min-height:42px;padding:9px 13px;border-radius:8px;background:#176b4b;color:#fff!important;font-weight:700;cursor:pointer}
.camera-btn input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.camera-hint{font-size:12px;color:#687b73}
.camera-preview{width:100%;max-height:230px;object-fit:cover;border-radius:9px;border:1px solid #d7e2dd}

/* V131 - Tambah Pelaporan Sampah Liar: urutan rapi + responsif HP */
.pelaporan-liar-grid{align-items:start}
.pelaporan-liar-grid>div{min-width:0}
.pelaporan-liar-grid label{display:block;margin-bottom:6px;font-weight:600}
.pelaporan-liar-grid input,
.pelaporan-liar-grid select,
.pelaporan-liar-grid textarea{width:100%;max-width:100%;box-sizing:border-box}
.pelaporan-liar-grid textarea{resize:vertical;min-height:92px}
.pelaporan-liar-grid .camera-upload-box{width:100%;min-width:0}
.pelaporan-liar-grid .camera-btn{width:100%;box-sizing:border-box}
.pelaporan-liar-grid .camera-preview{width:100%;height:auto;max-height:280px;object-fit:contain}

@media(min-width:1025px){
 .pelaporan-liar-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .pelaporan-liar-grid .field-alamat_lokasi,
 .pelaporan-liar-grid .field-lokasi_detail{grid-column:span 1}
 .pelaporan-liar-grid .field-uraian_laporan{grid-column:span 2}
 .pelaporan-liar-grid .field-foto_laporan{grid-column:span 1}
}
@media(min-width:821px) and (max-width:1024px){
 .pelaporan-liar-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .pelaporan-liar-grid .field-uraian_laporan,
 .pelaporan-liar-grid .field-foto_laporan{grid-column:span 1}
}
@media(max-width:820px){
 .app-modal-backdrop{padding:0!important;align-items:stretch!important}
 .app-modal-dialog{width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;margin:0!important}
 #appModalContent .pelaporan-liar-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
 #appModalContent .pelaporan-liar-grid>div{grid-column:1/-1!important;width:100%!important}
 #appModalContent .pelaporan-liar-grid input,
 #appModalContent .pelaporan-liar-grid select,
 #appModalContent .pelaporan-liar-grid textarea{font-size:16px!important;min-height:44px!important}
 #appModalContent .pelaporan-liar-grid textarea{min-height:100px!important}
 #appModalContent .modal-body{padding:14px!important;overscroll-behavior:contain}
 #appModalContent .modal-head{padding:13px 14px!important}
 #appModalContent .modal-head h2{font-size:17px!important;line-height:1.25!important}
 #appModalContent .modal-foot{padding:10px 14px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}
 #appModalContent .modal-foot .btn{width:100%!important;min-height:44px!important;justify-content:center!important}
 .pelaporan-liar-grid .camera-btn{min-height:48px!important;font-size:15px!important}
 .pelaporan-liar-grid .camera-preview{max-height:240px!important}
}
@media(max-width:420px){
 #appModalContent .modal-body{padding:12px!important}
 #appModalContent .pelaporan-liar-grid{gap:10px!important}
 #appModalContent .modal-foot{grid-template-columns:1fr!important}
}

/* V132 - Pelaporan: wilayah menyatu ke grid utama, bukan blok terpisah */
@media(min-width:1025px){
 .pelaporan-liar-grid .field-nomor_laporan{grid-column:1}
 .pelaporan-liar-grid .field-tanggal_laporan{grid-column:2}
 .pelaporan-liar-grid .field-waktu_laporan{grid-column:3}
 .pelaporan-liar-grid .field-nama_pelapor{grid-column:1}
 .pelaporan-liar-grid .field-no_telepon_pelapor{grid-column:2}
 .pelaporan-liar-grid .field-foto_laporan{grid-column:3;grid-row:2}
 .pelaporan-liar-grid .field-id_provinsi{grid-column:1}
 .pelaporan-liar-grid .field-id_kabupaten{grid-column:2}
 .pelaporan-liar-grid .field-id_kecamatan{grid-column:3}
 .pelaporan-liar-grid .field-id_desa{grid-column:1}
 .pelaporan-liar-grid .field-id_rw{grid-column:2}
 .pelaporan-liar-grid .field-id_rt{grid-column:3}
 .pelaporan-liar-grid .field-alamat_lokasi{grid-column:1}
 .pelaporan-liar-grid .field-lokasi_detail{grid-column:2}
 .pelaporan-liar-grid .field-uraian_laporan{grid-column:1 / span 2}
}

/* V133 - Field otomatis Pelaporan Sampah Liar */
.pelaporan-liar-grid .sidat-auto-field{background:#f1f6f3!important;color:#365248!important;cursor:not-allowed}

/* V134 - Kamera HP dan galeri dipisahkan agar perilakunya jelas */
.camera-upload-box{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.camera-upload-box .camera-hint,.camera-upload-box .camera-preview{grid-column:1/-1}
.camera-upload-box .gallery-btn{background:#4f6f64}
@media(max-width:560px){
 .camera-upload-box{grid-template-columns:1fr}
 .camera-upload-box .camera-hint,.camera-upload-box .camera-preview{grid-column:1}
}

/* V135 - Tombol foto eksplisit; tidak bergantung pada styling <label> */
.sidat-photo-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important}
.sidat-photo-actions .camera-action-btn,
.sidat-photo-actions .gallery-action-btn{
 display:flex!important;visibility:visible!important;opacity:1!important;
 align-items:center!important;justify-content:center!important;
 width:100%!important;min-height:44px!important;padding:10px 12px!important;
 border:0!important;border-radius:8px!important;color:#fff!important;
 font:inherit!important;font-weight:700!important;cursor:pointer!important;
 position:relative!important;z-index:2!important
}
.sidat-photo-actions .camera-action-btn{background:#147a50!important}
.sidat-photo-actions .gallery-action-btn{background:#4f6f64!important}
.sidat-hidden-file{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
.sidat-photo-actions .camera-hint,.sidat-photo-actions .camera-preview{grid-column:1/-1!important}
@media(max-width:560px){
 .sidat-photo-actions{grid-template-columns:1fr!important}
 .sidat-photo-actions .camera-hint,.sidat-photo-actions .camera-preview{grid-column:1!important}
}

/* V136 - Daftar Pelaporan Sampah Liar ringkas dan responsif */
.pelaporan-liar-table td,.pelaporan-liar-table th{vertical-align:middle}
.pelaporan-liar-table .actions{white-space:nowrap}
.pelaporan-liar-table .foto-link{white-space:nowrap}
@media(max-width:700px){
 .pelaporan-liar-table thead{display:none}
 .pelaporan-liar-table,.pelaporan-liar-table tbody,.pelaporan-liar-table tr,.pelaporan-liar-table td{display:block;width:100%;box-sizing:border-box}
 .pelaporan-liar-table tr{margin:0 0 12px;padding:10px 12px;border:1px solid #dce6e1;border-radius:10px;background:#fff}
 .pelaporan-liar-table td{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;padding:7px 0!important;border:0!important;white-space:normal!important}
 .pelaporan-liar-table td:not(.col-no):before{content:attr(data-label);font-weight:700;color:#466057}
 .pelaporan-liar-table .col-no{display:none!important}
 .pelaporan-liar-table .actions{display:flex!important;grid-template-columns:none!important;flex-wrap:wrap;gap:6px;padding-top:10px!important;border-top:1px solid #e5ece8!important}
 .pelaporan-liar-table .actions:before{display:none}
 .pelaporan-liar-table .actions .btn{flex:1 1 auto;justify-content:center;min-height:40px}
}

/* V141 - Kamera/Galeri Penanganan, desktop + HP */
.penanganan-photo-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.penanganan-photo-actions .camera-action-btn,.penanganan-photo-actions .gallery-action-btn{display:flex!important;align-items:center;justify-content:center;min-height:44px;width:100%;visibility:visible!important;opacity:1!important}
.penanganan-photo-actions .camera-hint,.penanganan-photo-actions .camera-preview{grid-column:1/-1}
.penanganan-photo-actions .camera-preview{max-width:100%;max-height:260px;object-fit:contain;border-radius:10px}
@media(max-width:560px){
 .penanganan-photo-actions{grid-template-columns:1fr}
 .penanganan-photo-actions .camera-hint,.penanganan-photo-actions .camera-preview{grid-column:1}
 .penanganan-photo-actions .camera-action-btn,.penanganan-photo-actions .gallery-action-btn{min-height:48px;font-size:15px}
}

/* V145 - Edit Pelaporan Sampah Liar rapi dan responsif */
#appModalForm .pelaporan-liar-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px 16px!important;align-items:start}
#appModalForm .pelaporan-liar-grid>div{min-width:0!important;margin:0!important}
#appModalForm .pelaporan-liar-grid .pelaporan-wide{grid-column:1/-1!important}
#appModalForm .pelaporan-liar-grid input,#appModalForm .pelaporan-liar-grid select,#appModalForm .pelaporan-liar-grid textarea{width:100%!important;box-sizing:border-box!important}
@media(max-width:1024px){
 #appModalForm .pelaporan-liar-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
 #appModalForm .pelaporan-liar-grid{grid-template-columns:1fr!important;gap:12px!important}
 #appModalForm .pelaporan-liar-grid .pelaporan-wide{grid-column:1!important}
}

/* V147 - Edit Pelaporan dibuat sama dengan tampilan Tambah Pelaporan */
#appModalForm .pelaporan-liar-grid .field-foto_laporan,
#appModalForm .pelaporan-liar-grid .field-alamat_lokasi,
#appModalForm .pelaporan-liar-grid .field-lokasi_detail,
#appModalForm .pelaporan-liar-grid .field-uraian_laporan{grid-column:1/-1!important}

/* V148 - Tampilkan foto yang sudah tersimpan pada Edit Pelaporan */
.sidat-saved-photo{grid-column:1/-1;width:100%;margin-top:8px;padding:10px;border:1px solid #dbe7df;border-radius:10px;background:#f8fbf9;box-sizing:border-box}
.sidat-saved-photo-title{font-weight:700;margin-bottom:8px}
.sidat-saved-photo .sidat-current-photo{display:block!important;max-width:100%;max-height:280px;width:auto;height:auto;object-fit:contain;border-radius:8px}

/* V149 - Detail Pelaporan Sampah Liar */
.pelaporan-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.pelaporan-detail-item{min-width:0;padding:10px 12px;border:1px solid #e0e8e3;border-radius:9px;background:#fff}
.pelaporan-detail-wide{grid-column:1/-1}
.pelaporan-detail-label{font-size:12px;font-weight:700;margin-bottom:5px;color:#355348}
.pelaporan-detail-value{white-space:pre-wrap;word-break:break-word}
.pelaporan-detail-photo{width:100%;display:flex;justify-content:center;padding:8px;box-sizing:border-box}
.pelaporan-detail-photo img{display:block;max-width:100%;max-height:360px;width:auto;height:auto;object-fit:contain;border-radius:10px}
@media(max-width:1024px){.pelaporan-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.pelaporan-detail-grid{grid-template-columns:1fr}.pelaporan-detail-wide{grid-column:1}}
@media print{.pelaporan-detail-item{break-inside:avoid}}

/* V154 - Verifikasi Penanganan dari Pelaporan Sampah Liar */
.btn-verify{background:#198754!important;color:#fff!important;border-color:#198754!important;white-space:nowrap}
.btn-verify:hover{filter:brightness(.94)}
@media(max-width:700px){.pelaporan-liar-table .actions .btn-verify{width:100%;justify-content:center;min-height:44px}}

/* V155 - Tolak Pelaporan Sampah Liar */
.btn-reject{background:#dc3545!important;color:#fff!important;border-color:#dc3545!important;white-space:nowrap}
.btn-reject:hover{filter:brightness(.94)}
.reject-box{display:flex;flex-direction:column;gap:8px}
.reject-box textarea{width:100%;box-sizing:border-box;min-height:120px;resize:vertical}
@media(max-width:700px){.pelaporan-liar-table .actions .btn-reject{width:100%;justify-content:center;min-height:44px}}

/* V162 - Edit Pelaporan Sampah Liar: semua field editable, tetap responsif */
#appModalForm .pelaporan-liar-grid .field-status_laporan,
#appModalForm .pelaporan-liar-grid .field-keterangan_verifikasi,
#appModalForm .pelaporan-liar-grid .field-aktif{min-width:0}

/* V168 - lokasi sampah liar sebagai kolom terpisah */
.sidat-lokasi-liar-box{margin-top:10px}
.sidat-lokasi-liar-box label{display:block;font-weight:700;margin-bottom:6px}
.sidat-lokasi-liar-box textarea{width:100%;min-height:76px;resize:none;background:#f7faf8}